@7365admin1/layer-common 3.2.1 → 3.2.2-staging.76

package/components/Layout/NavigationDrawer.vue

@@ -1,9 +1,41 @@
 <!-- LayoutNavigationDrawer.vue -->
 <template>
-  <v-navigation-drawer v-model="drawer" permanent floating class="bg-primary">
+  <!--
+    `bg-brand-surface`, not `bg-primary`: `primary` is a foreground colour on a
+    dark page (it has to carry `class="text-primary"` sentences at 4.5:1), and a
+    fill that carries a label cannot also be that. `brand-surface` is a real
+    surface in each theme - see `utils/theme.ts` - so the drawer belongs to the
+    application it is in rather than being the one panel the theme switch never
+    reached. Its label reads 15.43:1 light, 13.21:1 dark.
+
+    NO HARDCODED LABEL COLOUR ANYWHERE IN HERE. Vuetify paints the drawer with
+    `on-brand-surface` and the list inside it inherits that through
+    `bg-transparent`, which the drawer supplies to every `v-list` it contains.
+    A `text-white` in here (or in an app's `#action` / `#services` slot) is
+    white on a light rail at 1.13:1.
+
+    `floating` dropped so the drawer draws its own edge, and the three
+    opacities below are raised on this element only:
+
+    - `border-opacity` 0.45. A surface is a low-contrast panel by design
+      (1.13:1 light, 1.19:1 dark against the page), so the edge is what carries
+      the boundary: 3.27:1 light, 4.33:1 dark. The theme-wide value stays where
+      it is; raising that would redraw every table and card edge in eleven
+      applications.
+    - `hover-opacity` 0.08. Material's 0.04 is 1.11:1 on this rail, which is
+      not feedback. 0.08 is 1.17:1 light, 1.24:1 dark.
+    - `activated-opacity` 0.18. The active item is `primary` text on a
+      primary-tinted fill (see `NavigationItem.vue`); 0.12 left the fill at
+      1.15:1, 0.18 is 1.44:1 light, 1.33:1 dark.
+  -->
+  <v-navigation-drawer
+    v-model="drawer"
+    permanent
+    class="bg-brand-surface brand-drawer"
+  >
     <v-list>
       <v-list-item>
-        <v-list-item-title class="text-h6 text-white">
+        <v-list-item-title class="text-h6">
           {{ props.title || APP_NAME }}
         </v-list-item-title>
       </v-list-item>
@@ -91,3 +123,12 @@ const handleClick = (item: any) => {
   emit("navigate", item);
 };
 </script>
+
+<style scoped>
+/* Scoped to the drawer: none of these reach the rest of the application. */
+.brand-drawer {
+  --v-border-opacity: 0.45;
+  --v-hover-opacity: 0.08;
+  --v-activated-opacity: 0.18;
+}
+</style>

package/components/NavigationItem.vue

@@ -1,9 +1,16 @@
+<!--
+  `color="primary"` is applied by Vuetify only while the item is active, so the
+  page you are on is named by colour and not just by a 1.15:1 tint you cannot
+  see. `primary` reads 14.56:1 on the light rail and 5.38:1 on the dark one,
+  and it is the one brand colour that is a foreground in both themes.
+-->
 <template>
   <v-list-group v-if="children && children.length">
     <template #activator="{ props: groupProps }">
       <v-list-item
         v-bind="groupProps"
         :prepend-icon="icon"
+        color="primary"
         class="text-subtitle-2"
         @click.stop="onParentClick"
       >
@@ -25,6 +32,7 @@
     v-else-if="routeTo"
     :prepend-icon="icon"
     :to="routeTo"
+    color="primary"
     class="text-subtitle-2"
   >
     {{ title }}
@@ -34,6 +42,7 @@
     v-else-if="props.link"
     :prepend-icon="icon"
     :href="props.link"
+    color="primary"
     class="text-subtitle-2"
   >
     {{ title }}

package/components/Nfc/NFCPatrolRouteMain.vue

@@ -4,6 +4,7 @@
       <v-row no-gutters class="mb-4" align="center">
         <v-col cols="12" md="6">
           <v-btn
+            v-if="props.canCreateNfcPatrol"
             rounded="pill"
             variant="outlined"
   
@@ -82,7 +83,12 @@
     </v-col>
 
     <!-- Add Dialog -->
-    <v-dialog v-model="dialogAdd" persistent max-width="900">
+    <v-dialog
+      v-if="props.canCreateNfcPatrol"
+      v-model="dialogAdd"
+      persistent
+      max-width="900"
+    >
       <NFCPatrolRouteForm
         title="Add Route"
         :site="props.site"
@@ -94,7 +100,12 @@
     </v-dialog>
 
     <!-- Edit Dialog -->
-    <v-dialog v-model="dialogEdit" persistent max-width="900">
+    <v-dialog
+      v-if="props.canUpdateNfcPatrol"
+      v-model="dialogEdit"
+      persistent
+      max-width="900"
+    >
       <NFCPatrolRouteForm
         title="Edit Route"
         :site="props.site"
@@ -190,7 +201,10 @@
 
         <v-toolbar class="pa-0" density="compact">
           <v-row no-gutters>
-            <v-col cols="6" class="pa-0">
+            <v-col
+              :cols="props.canUpdateNfcPatrol || props.canDeleteNfcPatrol ? 6 : 12"
+              class="pa-0"
+            >
               <v-btn
                 block
                 variant="text"
@@ -203,7 +217,11 @@
               </v-btn>
             </v-col>
 
-            <v-col cols="6" class="pa-0">
+            <v-col
+              v-if="props.canUpdateNfcPatrol || props.canDeleteNfcPatrol"
+              cols="6"
+              class="pa-0"
+            >
               <v-menu>
                 <template #activator="{ props }">
                   <v-btn
@@ -220,13 +238,17 @@
                 </template>
 
                 <v-list class="pa-0">
-                  <v-list-item @click="openDialogEdit()">
+                  <v-list-item v-if="props.canUpdateNfcPatrol" @click="openDialogEdit()">
                     <v-list-item-title class="text-subtitle-2">
                       Edit Route
                     </v-list-item-title>
                   </v-list-item>
 
-                  <v-list-item @click="openDialogDelete()" class="text-red">
+                  <v-list-item
+                    v-if="props.canDeleteNfcPatrol"
+                    @click="openDialogDelete()"
+                    class="text-red"
+                  >
                     <v-list-item-title class="text-subtitle-2">
                       Delete Route
                     </v-list-item-title>
@@ -240,7 +262,12 @@
     </v-dialog>
 
     <!-- Delete Dialog -->
-    <v-dialog v-model="dialogDelete" persistent width="540">
+    <v-dialog
+      v-if="props.canDeleteNfcPatrol"
+      v-model="dialogDelete"
+      persistent
+      width="540"
+    >
       <v-card width="100%">
         <v-card-text
           style="max-height: 100vh; overflow-y: auto"
@@ -304,6 +331,18 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  canCreateNfcPatrol: {
+    type: Boolean,
+    default: false,
+  },
+  canUpdateNfcPatrol: {
+    type: Boolean,
+    default: false,
+  },
+  canDeleteNfcPatrol: {
+    type: Boolean,
+    default: false,
+  },
   headers: {
     type: Array as PropType<Array<any>>,
     default: () => [
@@ -406,6 +445,8 @@ const messageSnackbar = ref(false);
 const messageColor = ref("");
 
 async function openDialogEdit() {
+  if (!props.canUpdateNfcPatrol) return;
+
   try {
     // Fetch the full route details from the API
     const response = await getRouteById(selectedRoute.value._id);
@@ -431,6 +472,8 @@ async function openDialogEdit() {
 }
 
 function openDialogDelete() {
+  if (!props.canDeleteNfcPatrol) return;
+
   dialogDelete.value = true;
 
   if (dialogPreview.value) dialogPreview.value = false;
@@ -502,6 +545,8 @@ function handleRowClick(_: any, data: any) {
 }
 
 async function submitDelete() {
+  if (!props.canDeleteNfcPatrol) return;
+
   try {
     await deleteRouteById(selectedRoute.value._id ?? "");
     await getRoutesRefresh();