@7365admin1/layer-common 3.2.8-staging.215 → 3.2.8-staging.218

package/components/DashboardMain.vue

@@ -1343,27 +1343,41 @@ const { userAppRole } = useLocalSetup();
 const { downloadPDF } = usePDFDownload();
 const route = useRoute();
 
+// Each app spells its own resources, and the three that render this dashboard
+// disagree: work orders are `work_orders` in `-security`, `workOrder` in
+// `-property-management` and `work_order` in this layer's `useCleaningPermission`;
+// visitors are `visitor-mgmt` in `-security` and `visitorManagement` in
+// `-property-management`. A widget asking for one spelling is invisible to a role
+// granted another, so every spelling in use is listed. One canonical vocabulary
+// would let all of these collapse back to a single string -- that is a
+// cross-repo change, not one this component can make.
+const WORK_ORDER_SEE_ALL = [
+  "work_orders:see-all-work-orders",
+  "workOrder:see-all-work-orders",
+  "work_order:see-all-work-orders",
+];
+
 const propertyWidgetPermissions: Record<string, string[]> = {
-  workOrders: ["work_orders:see-all-work-orders"],
+  workOrders: WORK_ORDER_SEE_ALL,
   incidents: ["incident-reports:see-incident-reports"],
-  visitors: ["visitor-mgmt:see-all-visitor"],
+  visitors: ["visitor-mgmt:see-all-visitor", "visitorManagement:see-all-visitor"],
   facilityBookings: ["facility-booking-mgmt:see-all-facility-booking"],
-  activity: ["work_orders:see-all-work-orders"],
+  activity: WORK_ORDER_SEE_ALL,
   upcomingEvents: ["event-mgmt:see-all-event"],
   todayReminders: ["event-mgmt:see-all-event"],
   todayAttentions: [
     "incident-reports:see-incident-reports",
     "facility-booking-mgmt:see-all-facility-booking",
   ],
-  workOrderStatus: ["work_orders:see-all-work-orders"],
+  workOrderStatus: WORK_ORDER_SEE_ALL,
   feedbacks: ["feedbacks:see-all-feedback"],
   activePatrol: ["virtual-patrol:see-all-virtual-patrol-logs"],
 };
 
 const moduleWidgetPermissions: Record<string, string[]> = {
-  openWorkOrder: ["work_orders:see-all-work-orders"],
-  workOrders: ["work_orders:see-all-work-orders"],
-  activity: ["work_orders:see-all-work-orders"],
+  openWorkOrder: WORK_ORDER_SEE_ALL,
+  workOrders: WORK_ORDER_SEE_ALL,
+  activity: WORK_ORDER_SEE_ALL,
   taskSchedule: [
     "cleaning-schedule-mgmt:see-all-schedules",
     "schedule-task-mgmt:see-all-schedule-tasks",
@@ -1406,7 +1420,12 @@ function canViewWidget(key: string) {
     ? propertyWidgetPermissions[key]
     : moduleWidgetPermissions[key];
 
-  if (!permissions) return true;
+  // Fail closed. This used to return `true` while `userAppRole` was still
+  // unresolved, so the dashboard drew every widget and then took some away --
+  // and if the role fetch failed outright it drew every widget permanently.
+  // Every other gate in this package returns `false` without a role; this one
+  // now agrees with them.
+  if (!permissions) return false;
   if (permissions.includes("*")) return true;
 
   if (

package/components/MemberMain.vue

@@ -84,8 +84,16 @@
             {{ formatDateInvited(item.dateInvited) }}
           </template>
           <template #item.action-table="{ item }">
+            <!--
+              `props.assignRole` belongs in this test. The menu's only item that
+              is not status-dependent is Assign Role, but the menu itself opened
+              only for suspend / activate / delete -- so a role granted
+              `members:assign-member-role` and nothing else got no menu at all,
+              and the permission was unreachable.
+            -->
             <v-menu
               v-if="
+                props.assignRole ||
                 (currentStatus === 'active' &&
                   (canSuspendMembers || canDeleteMembers)) ||
                 (currentStatus === 'suspended' &&

package/components/RolePermissionFormCreate.vue

@@ -317,7 +317,12 @@ async function submit() {
     });
     emit("success");
   } catch (error: any) {
-    message.value = error.response._data.message;
+    // Same unguarded chain as the preview dialog had: on a network or timeout
+    // failure `error.response` is undefined and the catch threw inside itself,
+    // leaving the user with no message at all.
+    message.value =
+      error?.response?._data?.message ??
+      "Could not create this role. Please check your connection and try again.";
   } finally {
     disable.value = false;
   }

package/components/RolePermissionFormPreviewUpdate.vue

@@ -99,15 +99,12 @@
             </div>
           </v-col>
 
-          <v-col v-if="edit" cols="12" class="my-2">
-            <v-row no-gutters>
-              <v-col cols="12" class="text-center">
-                <span class="role-perm__error">{{ message }}</span>
-              </v-col>
-            </v-row>
-          </v-col>
-
-          <v-col cols="12" class="my-2">
+          <!--
+            One message, once. This block used to appear twice -- inside
+            `v-if="edit"` and again unconditionally -- so a refused save printed
+            the server's sentence back to back.
+          -->
+          <v-col v-if="message" cols="12" class="my-2">
             <v-row no-gutters>
               <v-col cols="12" class="text-center">
                 <span class="role-perm__error">{{ message }}</span>
@@ -122,7 +119,7 @@
       <AppButton v-if="!edit" variant="ghost" @click="emit('cancel')">Close</AppButton>
       <AppButton v-else variant="ghost" @click="edit = false">Cancel</AppButton>
 
-      <AppButton v-if="!edit" :disabled="disable" @click="edit = true">Edit</AppButton>
+      <AppButton v-if="!edit && canUpdateRole" :disabled="disable" @click="edit = true">Edit</AppButton>
       <AppButton v-else :disabled="Boolean(errorMessages) || disable" @click="submit()">
         Submit
       </AppButton>
@@ -159,6 +156,15 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  // "Update role". This dialog had no permission prop at all, so it showed Edit
+  // to everyone -- including on the seeded platform-owner role -- and the
+  // `canUpdateRole` the apps have been passing to `RolePermissionMain` in good
+  // faith did nothing. `RolePermissionMain` is the only thing that renders this
+  // dialog and always passes it, so the default is closed.
+  canUpdateRole: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const validForm = ref(false);
@@ -282,7 +288,12 @@ async function submit() {
     await updatePermissionById(props.id, definedModel.value);
     emit("success");
   } catch (error: any) {
-    message.value = error.response._data.message;
+    // `error.response` is undefined on a network or timeout failure, so the old
+    // unguarded chain threw inside its own catch: nothing was shown, the button
+    // came back enabled, and the save looked like it had simply been ignored.
+    message.value =
+      error?.response?._data?.message ??
+      "Could not save this role. Please check your connection and try again.";
   } finally {
     disable.value = false;
   }

package/components/RolePermissionMain.vue

@@ -42,12 +42,13 @@
 
       <v-data-table
           :headers="props.headers"
-          :items="items"
+          :items="visibleItems"
           item-value="_id"
           items-per-page="20"
           fixed-header
           hide-default-footer
           hide-default-header
+          :no-data-text="emptyText"
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (180px))"
         >
@@ -102,6 +103,7 @@
         v-model:edit="edit"
         :name="name"
         :id="roleId"
+        :can-update-role="props.canUpdateRole"
         :web-only-resources="props.webOnlyResources"
       />
     </v-dialog>
@@ -245,13 +247,18 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  // "See all roles". Defaults to `true` because nine of the ten pages that
+  // render this component do not pass it, and until now nothing read it at all
+  // -- so `true` is exactly what those pages have always had. The one page that
+  // does pass it now gets a gate that works.
   canViewRole: {
     type: Boolean,
-    default: false,
+    default: true,
   },
+  // "See role details" -- opening a role. Same reasoning as `canViewRole`.
   canViewByRole: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   canDeleteRole: {
     type: Boolean,
@@ -281,6 +288,7 @@ const {
   data: getRoleReq,
   refresh: getRoles,
   status: getRoleReqStatus,
+  error: getRoleReqError,
 } = useLazyAsyncData(
   "roles-permissions-get-all",
   () =>
@@ -305,7 +313,33 @@ watchEffect(() => {
   }
 });
 
+// "See all roles". Without it the list is not drawn at all, and `emptyText`
+// below says so rather than leaving a blank table to be read as a failure.
+const visibleItems = computed(() => (props.canViewRole ? items.value : []));
+
+/**
+ * SAY WHY THE TABLE IS EMPTY. "No data available" was shown for three
+ * different situations -- you may not see roles, the request failed, and this
+ * organisation genuinely has none -- so a refusal was indistinguishable from an
+ * empty list and neither was distinguishable from a broken screen.
+ */
+const emptyText = computed(() => {
+  if (!props.canViewRole) return "You do not have permission to view roles.";
+  const status = (getRoleReqError.value as any)?.response?.status
+    ?? (getRoleReqError.value as any)?.statusCode;
+  if (status === 401 || status === 403) {
+    return "You do not have permission to view the roles for this organisation.";
+  }
+  if (getRoleReqError.value) {
+    return "Could not load roles. Please refresh to try again.";
+  }
+  return "No roles have been created yet.";
+});
+
 function tableRowClickHandler(_: any, data: any) {
+  // "See role details". Ungated until now, which is why granting or withholding
+  // it changed nothing.
+  if (!props.canViewByRole) return;
   previewDialog.value = true;
   roleId.value = data.item._id;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.8-staging.215",
+  "version": "3.2.8-staging.218",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",
@@ -35,7 +35,7 @@
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
-    "test": "esbuild composables/useVisitorSocket.ts --format=esm --outfile=test/.build/useVisitorSocket.mjs --log-level=error && node --test \"test/*.test.mjs\" && yarn test:units",
+    "test": "esbuild composables/useVisitorSocket.ts --format=esm --outfile=test/.build/useVisitorSocket.mjs --log-level=error && node --experimental-strip-types --test \"test/*.test.mjs\" && yarn test:units",
     "test:units": "node --experimental-strip-types --test \"utils/*.test.ts\"",
     "release": "yarn run build && changeset publish"
   },