@7365admin1/layer-common 4.0.2 → 4.0.3-staging.221

package/components/AccessCardQrTagging.vue

@@ -180,10 +180,6 @@
 <script setup lang="ts">
 import QrcodeVue from "qrcode.vue";
 
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-  memberOnly: true,
-});
 
 const props = defineProps({
   canViewAllQrTagging: {

package/components/AccessManagement.vue

@@ -138,10 +138,6 @@
 // into the consuming apps but not reliably into the layer's own components.
 import { readListPage } from "../utils/list-page";
 
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-  memberOnly: true,
-});
 const props = defineProps({
   headers: {
     type: Array as PropType<Array<Record<string, any>>>,

package/components/BuildingManagement/buildings.vue

@@ -162,10 +162,6 @@
 // into the consuming apps but not reliably into the layer's own components.
 import { levelCount } from "../../utils/data";
 
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-  memberOnly: true,
-});
 
 const props = defineProps({
   headers: {

package/components/BulletinBoardManagement.vue

@@ -89,9 +89,6 @@ import { APP_CONSTANTS } from '../constants/app';
 // is a ReferenceError that blanks the screen in every consuming app.
 import { readListPage } from '../utils/list-page';
 
-definePageMeta({
-    memberOnly: true,
-})
 
 const props = defineProps({
     siteId: {

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/DocumentManagement.vue

@@ -610,10 +610,6 @@
 // into the consuming apps but not reliably into the layer's own components.
 import { readListPage } from "../utils/list-page";
 
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-  memberOnly: true,
-});
 const props = defineProps({
   headers: {
     type: Array as PropType<Array<Record<string, any>>>,

package/components/IncidentReport/Authorities.vue

@@ -213,10 +213,6 @@
 </style>
 
 <script lang="ts" setup>
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-  memberOnly: true,
-});
 
 // imports
 

package/components/IncidentReport/IncidentInformation.vue

@@ -249,10 +249,6 @@
 </template>
 
 <script lang="ts" setup>
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-  memberOnly: true,
-});
 
 // props
 const props = defineProps({

package/components/IncidentReport/IncidentInformationDownload.vue

@@ -155,10 +155,6 @@
 </template>
 
 <script lang="ts" setup>
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-  memberOnly: true,
-});
 
 // props
 const props = defineProps({

package/components/IncidentReport/affectedEntities.vue

@@ -97,10 +97,6 @@
 </style>
 
 <script lang="ts" setup>
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-  memberOnly: true,
-});
 
 // imports
 

package/components/Input/InputPhoneNumberV2.vue

@@ -46,7 +46,7 @@
         persistent-placeholder
         :density="density"
         :disabled="props.disabled"
-        :placeholder="placeholder || currentMask"
+        :placeholder="placeholder"
         @focus="emit('focus')"
         @blur="emit('blur')"
       />
@@ -104,7 +104,7 @@ const currentMask = computed(() => {
   const country = countries.find(
     (c: TPhoneMask) => c.code === selectedCode.value
   );
-  if (!country) return "############";
+  if (!country) return "";
   return generateMaskFromRegex(country.regex);
 });
 

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/components/VehicleManagement.vue

@@ -167,10 +167,6 @@
 import useUtils from '../composables/useUtils';
 import useVehicle from '../composables/useVehicle';
 
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-  memberOnly: true,
-})
 
 
 const props = defineProps({

package/components/VisitorManagement.vue

@@ -1226,9 +1226,6 @@
 import moment from "moment-timezone";
 import QRCode from "qrcode";
 
-definePageMeta({
-  middleware: ["01-auth", "02-org"],
-});
 
 const { downloadPDF } = usePDFDownload();
 

package/components/VisitorsReportPreview.vue

@@ -115,9 +115,6 @@ import useUtils from '../composables/useUtils';
 import useSite from '../composables/useSite';
 
 
-definePageMeta({
-    middleware: ["01-auth", "02-org"],
-});
 
 
 const props = defineProps({

package/composables/useBulletinBoardPermission.ts

@@ -2,7 +2,12 @@ import { useCommonPermissions } from "./useCommonPermission";
 
 export function useBulletinBoardPermission() {
   const { hasPermission } = usePermission();
-  const { bulletinBoardPermissions: permissions } = useCommonPermissions();
+  // Same nesting rule as every other permission composable: `hasPermission`
+  // reads `catalogue[resource][action]`, and `bulletinBoardPermissions` is a
+  // flat `{action: ...}` map. Unwrapped, `catalogue["bulletin-board"]` was
+  // undefined and all five gates were reachable only through `"*"`.
+  const { bulletinBoardPermissions } = useCommonPermissions();
+  const permissions: TPermissions = { "bulletin-board": bulletinBoardPermissions };
 
   const { userAppRole } = useLocalSetup();
 

package/composables/useSettingsPermission.ts

@@ -2,7 +2,13 @@ import { useCommonPermissions } from "./useCommonPermission";
 
 export function useSettingsPermission() {
   const { hasPermission } = usePermission();
-  const { siteSettingsPermissions: permissions } = useCommonPermissions();
+  // `hasPermission` looks the action up as `catalogue[resource][action]`, so the
+  // catalogue has to be nested by resource. `siteSettingsPermissions` is a flat
+  // `{action: ...}` map, so passing it straight through made
+  // `catalogue["site-settings"]` undefined and every check below fell through to
+  // `false` -- only the `"*"` short-circuit could ever open a panel.
+  const { siteSettingsPermissions } = useCommonPermissions();
+  const permissions: TPermissions = { "site-settings": siteSettingsPermissions };
   const { userAppRole } = useLocalSetup();
 
   const canManageSiteInformation = computed(() => {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.2",
+  "version": "4.0.3-staging.221",
   "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"
   },