Fix Admin-UI management bugs (#1588)

* Close multiselect dropdowns on selection * Bugfix overlay reload buttons * Fix overlays not shown after loading error (admin view pages) * Fix search not disabled during loading (admin index pages) * Fix dialog buttons not disabled correctly during actions on admin pages * Fix error messages (AdminServerPoolsView, AdminRoomTypesView, AdminSettings) * Fix error handling (AdminUsersIndex, AdminServerPoolsView (staleError), RoomTypesDeleteButton (404 error)) * Add missing loading retry button (Admin RoomTypesIndex) * Add reload button for replacement room type (RoomTypesDeleteButton) * Fix bbb logo image url input * Fix access superuser attribute * Fix accessing multiselect ref * Permissions loading behaviour (AdminRolesView) * Prevent dialogs from being closable during loading * Update CHANGELOG.md * Improve accessibility on reload buttons --------- Co-authored-by: Sabrina Wüst <[email protected]>
THM-Health · Jan 29, 2025 · 4f2f298 · 4f2f298
1 parent 9dd1542
commit 4f2f298
Show file tree

Hide file tree

Showing 25 changed files with 165 additions and 83 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Missing loading retry button on room types overview page ([#1588])
+- Reload button for replacement room type in delete dialog on room types overview page ([#1588])
 - Permission restrictions to prevent non-superusers from editing and deleting superusers ([#1651])
 - Permission restrictions to prevent non-superusers from assigning the superuser role ([#1651])
 - Environment variable for configuring restricted permissions that cannot be assigned to non-superuser roles ([#1651])
@@ -21,11 +23,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Real-time input validation on create superuser command ([#1651])
 - Error handling in room statistics ([#1535], [#1600])
 - Error handling in room attendance ([#1535], [#1600])
+- Close multiselect dropdowns on selection ([#1588])
+- Permissions loading behaviour on view/edit page of roles ([#1588])
 - Improve frontend tests for login page ([#1794])
 - Access code input type on room settings section to hide browser arrow buttons ([#1827], [#1829])
 
 ### Fixed
 
+- Search not disabled during loading on the overview pages for roles, room types, servers and server pools ([#1675], [#1588])
+- Overlays not shown after loading error on view/edit pages of servers and server pools ([#1677], [#1588])
+- Dialog buttons not disabled correctly during actions on the overview/view/edit pages for roles, room types, servers and server pools ([#1711], [#1588])
+- Dialogs being closable during loading on the overview/view/edit pages for roles, room types, servers and server pools ([#1588])
+- Form validation error messages on view/edit pages room types, server pools and application settings ([#1588])
+- Error handling on the overview page of users ([#1588])
+- Stale error handling on the view/edit page of sever pools ([#1588])
+- 404 error handling on the room types delete dialog ([#1588])
+- Set empty BBB logo image url ([#1751], [#1588])
+- 401 error handling on view/edit/create page of users ([#1588])
+- Overlay reload buttons on view/edit/create page of roles, room types, servers and server pools ([#1588])
 - Wrong error message shown for 422 errors when verifying email ([#1744], [#1758])
 - Broken banner link style 'warning' ([#1759], [#1760])
 - Inconsistent select/multiselect loading states ([#1772])
@@ -331,6 +346,7 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1559]: https://github.com/THM-Health/PILOS/issues/1559
 [#1561]: https://github.com/THM-Health/PILOS/pull/1561
 [#1565]: https://github.com/THM-Health/PILOS/pull/1565
+[#1588]: https://github.com/THM-Health/PILOS/pull/1588
 [#1569]: https://github.com/THM-Health/PILOS/pull/1569
 [#1595]: https://github.com/THM-Health/PILOS/pull/1595
 [#1600]: https://github.com/THM-Health/PILOS/pull/1600
@@ -342,13 +358,17 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#1618]: https://github.com/THM-Health/PILOS/pull/1618
 [#1636]: https://github.com/THM-Health/PILOS/issues/1636
 [#1651]: https://github.com/THM-Health/PILOS/issues/1651
+[#1675]: https://github.com/THM-Health/PILOS/issues/1675
+[#1677]: https://github.com/THM-Health/PILOS/issues/1677
 [#1678]: https://github.com/THM-Health/PILOS/pull/1678
 [#1679]: https://github.com/THM-Health/PILOS/issues/1679
 [#1702]: https://github.com/THM-Health/PILOS/pull/1702
 [#1704]: https://github.com/THM-Health/PILOS/pull/1704
+[#1711]: https://github.com/THM-Health/PILOS/issues/1711
 [#1721]: https://github.com/THM-Health/PILOS/issues/1721
 [#1724]: https://github.com/THM-Health/PILOS/pull/1724
 [#1744]: https://github.com/THM-Health/PILOS/issues/1744
+[#1751]: https://github.com/THM-Health/PILOS/issues/1751
 [#1758]: https://github.com/THM-Health/PILOS/pull/1758
 [#1759]: https://github.com/THM-Health/PILOS/issues/1759
 [#1760]: https://github.com/THM-Health/PILOS/pull/1760

diff --git a/app/Http/Requests/UpdateSettings.php b/app/Http/Requests/UpdateSettings.php
@@ -77,7 +77,7 @@ public function rules()
             'recording_attendance_retention_period' => ['required', 'numeric', Rule::enum(TimePeriod::class)],
             'recording_recording_retention_period' => ['required', 'numeric',  Rule::enum(TimePeriod::class)->except($disabledRecordingRetentionPeriods)],
 
-            'bbb_logo' => ['string', 'max:255'],
+            'bbb_logo' => ['nullable', 'string', 'max:255'],
             'bbb_logo_file' => ['image', 'max:500'],
             'bbb_style' => ['nullable', 'file', 'max:500'],
             'bbb_default_presentation' => ['nullable', 'file', 'max:'.(config('bigbluebutton.max_filesize') * 1000), 'mimes:'.config('bigbluebutton.allowed_file_mimes')],

diff --git a/resources/js/components/RoleSelect.vue b/resources/js/components/RoleSelect.vue
@@ -1,7 +1,7 @@
 <template>
   <InputGroup>
     <multiselect
-      ref="rolesMultiselectRef"
+      ref="roles-multiselect"
       :aria-labelledby="ariaLabelledby"
       data-test="role-dropdown"
       :placeholder="$t('admin.roles.select_roles')"
@@ -87,14 +87,15 @@
       severity="secondary"
       outlined
       icon="fa-solid fa-sync"
+      :aria-label="$t('app.reload')"
       data-test="roles-reload-button"
       @click="loadRoles(currentPage)"
     />
   </InputGroup>
 </template>
 
 <script setup>
-import { onBeforeMount, ref, watch } from "vue";
+import { onBeforeMount, ref, useTemplateRef, watch } from "vue";
 import { useApi } from "../composables/useApi.js";
 import { Multiselect } from "vue-multiselect";
 
@@ -139,7 +140,7 @@ const loading = ref(false);
 const loadingError = ref(false);
 const currentPage = ref(1);
 const hasNextPage = ref(false);
-const rolesMultiselectRef = ref(null);
+const rolesMultiselectRef = useTemplateRef("roles-multiselect");
 
 watch(
   () => props.modelValue,

diff --git a/resources/js/components/SettingsRolesDeleteButton.vue b/resources/js/components/SettingsRolesDeleteButton.vue
@@ -16,7 +16,7 @@
     :breakpoints="{ '575px': '90vw' }"
     :close-on-escape="!isBusy"
     :dismissable-mask="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :draggable="false"
   >
     <span>
@@ -25,6 +25,7 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />

diff --git a/resources/js/components/SettingsRoomTypesDeleteButton.vue b/resources/js/components/SettingsRoomTypesDeleteButton.vue
@@ -17,7 +17,7 @@
     :breakpoints="{ '575px': '90vw' }"
     :close-on-escape="!isBusy"
     :dismissable-mask="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :draggable="false"
     data-test="room-types-delete-dialog"
   >
@@ -29,39 +29,52 @@
       <label for="replacement-room-type">{{
         $t("admin.room_types.delete.replacement")
       }}</label>
-      <Select
-        id="replacement-room-type"
-        v-model.number="replacement"
-        data-test="replacement-room-type-dropdown"
-        autofocus
-        :disabled="isBusy || loadingRoomTypes"
-        :loading="loadingRoomTypes"
-        :class="{
-          'p-invalid': formErrors.fieldInvalid('replacement_room_type'),
-        }"
-        :options="replacementRoomTypes"
-        :placeholder="$t('admin.room_types.delete.no_replacement')"
-        option-value="value"
-        option-label="text"
-        aria-describedby="replacement-help"
-        show-clear
-        :pt="{
-          listContainer: {
-            'data-test': 'replacement-room-type-dropdown-items',
-          },
-          option: {
-            'data-test': 'replacement-room-type-dropdown-option',
-          },
-        }"
-      >
-        <template #clearicon="{ clearCallback }">
-          <i
-            class="fa-solid fa-times p-icon p-select-clear-icon"
-            role="button"
-            @click.stop="clearCallback"
-          />
-        </template>
-      </Select>
+      <InputGroup>
+        <Select
+          id="replacement-room-type"
+          v-model.number="replacement"
+          data-test="replacement-room-type-dropdown"
+          autofocus
+          :disabled="
+            isBusy || loadingRoomTypes || replacementRoomTypesLoadingError
+          "
+          :loading="loadingRoomTypes"
+          :class="{
+            'p-invalid': formErrors.fieldInvalid('replacement_room_type'),
+          }"
+          :options="replacementRoomTypes"
+          :placeholder="$t('admin.room_types.delete.no_replacement')"
+          option-value="value"
+          option-label="text"
+          aria-describedby="replacement-help"
+          show-clear
+          :pt="{
+            listContainer: {
+              'data-test': 'replacement-room-type-dropdown-items',
+            },
+            option: {
+              'data-test': 'replacement-room-type-dropdown-option',
+            },
+          }"
+        >
+          <template #clearicon="{ clearCallback }">
+            <i
+              class="fa-solid fa-times p-icon p-select-clear-icon"
+              role="button"
+              @click.stop="clearCallback"
+            />
+          </template>
+        </Select>
+        <Button
+          v-if="replacementRoomTypesLoadingError"
+          :disabled="isBusy"
+          outlined
+          severity="secondary"
+          icon="fa-solid fa-sync"
+          :aria-label="$t('app.reload')"
+          @click="loadReplacementRoomTypes()"
+        />
+      </InputGroup>
       <FormError :errors="formErrors.fieldError('replacement_room_type')" />
       <small id="replacement-help">{{
         $t("admin.room_types.delete.replacement_info")
@@ -70,6 +83,7 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />
@@ -110,6 +124,7 @@ const isBusy = ref(false);
 const replacement = ref(null);
 const replacementRoomTypes = ref([]);
 const loadingRoomTypes = ref(false);
+const replacementRoomTypesLoadingError = ref(false);
 
 /**
  * Shows the delete modal
@@ -124,6 +139,8 @@ function showModal() {
 
 function loadReplacementRoomTypes() {
   loadingRoomTypes.value = true;
+  replacementRoomTypesLoadingError.value = false;
+
   api
     .call("roomTypes")
     .then((response) => {
@@ -139,6 +156,7 @@ function loadReplacementRoomTypes() {
         });
     })
     .catch((error) => {
+      replacementRoomTypesLoadingError.value = true;
       api.error(error);
     })
     .finally(() => {
@@ -174,7 +192,6 @@ function deleteRoomType() {
       if (error.response && error.response.status === env.HTTP_NOT_FOUND) {
         modalVisible.value = false;
         emit("notFound");
-        return;
       }
       api.error(error);
     })

diff --git a/resources/js/components/SettingsServerPoolsDeleteButton.vue b/resources/js/components/SettingsServerPoolsDeleteButton.vue
@@ -12,7 +12,7 @@
     v-model:visible="modalVisible"
     :breakpoints="{ '575px': '90vw' }"
     :close-on-escape="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :dismissable-mask="!isBusy"
     :draggable="false"
     :header="$t('admin.server_pools.delete.title')"
@@ -42,6 +42,7 @@
     <template v-if="deleteFailedRoomTypes == null" #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />

diff --git a/resources/js/components/SettingsServersDeleteButton.vue b/resources/js/components/SettingsServersDeleteButton.vue
@@ -14,7 +14,7 @@
     :breakpoints="{ '575px': '90vw' }"
     modal
     :close-on-escape="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :dismissable-mask="!isBusy"
     :draggable="false"
   >
@@ -23,6 +23,7 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />

diff --git a/resources/js/components/SettingsUsersDeleteButton.vue b/resources/js/components/SettingsUsersDeleteButton.vue
@@ -25,7 +25,7 @@
     :breakpoints="{ '575px': '90vw' }"
     :close-on-escape="!isBusy"
     :dismissable-mask="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :draggable="false"
   >
     <span>
@@ -39,6 +39,7 @@
     <template #footer>
       <Button
         :label="$t('app.no')"
+        :disabled="isBusy"
         severity="secondary"
         @click="modalVisible = false"
       />

diff --git a/resources/js/components/SettingsUsersResetPasswordButton.vue b/resources/js/components/SettingsUsersResetPasswordButton.vue
@@ -27,7 +27,7 @@
     :breakpoints="{ '575px': '90vw' }"
     :close-on-escape="!isBusy"
     :dismissable-mask="!isBusy"
-    :closeable="!isBusy"
+    :closable="!isBusy"
     :draggable="false"
   >
     <span>
@@ -42,6 +42,7 @@
       <Button
         :label="$t('app.no')"
         severity="secondary"
+        :disabled="isBusy"
         @click="modalVisible = false"
       />
       <Button

diff --git a/resources/js/components/TimezoneSelect.vue b/resources/js/components/TimezoneSelect.vue
@@ -25,6 +25,7 @@
       outlined
       severity="secondary"
       icon="fa-solid fa-sync"
+      :aria-label="$t('app.reload')"
       data-test="timezone-reload-button"
       @click="loadTimezones()"
     />

diff --git a/resources/js/components/UserTabEmail.vue b/resources/js/components/UserTabEmail.vue
@@ -121,7 +121,7 @@ const isBusy = ref(false);
 const validationRequiredEmail = ref(null);
 
 const isOwnUser = computed(() => {
-  return authStore.currentUser.id === props.user.id;
+  return authStore.currentUser?.id === props.user.id;
 });
 
 onBeforeMount(() => {

diff --git a/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue b/resources/js/components/UserTabSecurityRolesAndPermissionsSection.vue
@@ -16,7 +16,7 @@
               isBusy || viewOnly || !userPermissions.can('editUserRole', model)
             "
             :automatic-roles="automaticRoles"
-            :disable-superuser="!authStore.currentUser.superuser"
+            :disable-superuser="!authStore.currentUser?.superuser"
             @loading-error="(value) => (rolesLoadingError = value)"
             @busy="(value) => (rolesLoading = value)"
           />

diff --git a/resources/js/views/AdminRolesIndex.vue b/resources/js/views/AdminRolesIndex.vue
@@ -5,11 +5,13 @@
         <InputGroup>
           <InputText
             v-model="filter"
+            :disabled="isBusy"
             :placeholder="$t('app.search')"
             @keyup.enter="loadData(1)"
           />
           <Button
             v-tooltip="$t('app.search')"
+            :disabled="isBusy"
             :aria-label="$t('app.search')"
             severity="primary"
             icon="fa-solid fa-magnifying-glass"