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

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

@@ -1,88 +1,80 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <v-row no-gutters class="mb-4" align="center">
-        <v-col cols="12" md="6">
-          <v-btn
-            rounded="pill"
-            variant="outlined"
-  
-            size="large"
-            class="text-none px-8"
+      <!-- Title row; nav calls this screen "Routes". The Add pill moves onto it
+           and the search onto the card's toolbar, where the design draws them. -->
+      <PageHeader title="Routes">
+        <template #actions>
+          <AppButton
+            v-if="props.canCreateNfcPatrol"
+            icon="mdi-plus"
             @click="dialogAdd = true"
           >
             Add Route
-          </v-btn>
-        </v-col>
-        <v-col cols="12" md="6" class="d-flex justify-end">
-          <v-text-field
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <!--
+        Was `v-card` + `v-data-table` + a `grey-lighten-4` `v-toolbar` BELOW the
+        table holding the page range and pager (a white slab that stayed white in
+        dark mode). `TableMain` draws the same card with that row on top, which
+        is where the design puts it. Same headers, items, page size, row click
+        and item slots; the refresh button is wired to the refresh this screen
+        already calls after add/edit.
+      -->
+      <TableMain
+        :headers="headers"
+        :items="items"
+        :page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        show-header
+        @refresh="getRoutesRefresh()"
+        @update:page="page = $event"
+        @row-click="(data: any) => handleRowClick(null, data)"
+      >
+        <template #prepend-additional>
+          <AppField
             v-model="searchInput"
-            density="comfortable"
+            search
+            compact
             placeholder="Search"
-            clearable
-            append-inner-icon="mdi-magnify"
-            hide-details
-            variant="outlined"
-            rounded="lg"
-            style="max-width: 400px"
-            bg-color="white"
+            klass="app-toolbar__search"
           />
-        </v-col>
-      </v-row>
-
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-
-        <v-card-text class="pa-0">
-          <v-data-table
-            :headers="headers"
-            :items="items"
-            :items-per-page="20"
-            fixed-header
-            hide-default-footer
-            @click:row="handleRowClick"
-            style="max-height: calc(100vh - 300px)"
-            class="nfc-route-table"
-            hover
-          >
-            <template #item.numberOfCheckpoints="{ value }">
-              <div class="text-center">{{ value || "--" }}</div>
-            </template>
-
-            <template #item.tolerance="{ item }">
-              <div class="text-center">
-                <div>{{ item.tolerance ? `${item.tolerance} mins` : "--" }}</div>
-                <div class="text-grey">{{ item.totalTravelTime ? `${item.totalTravelTime} mins` : "--" }}</div>
-              </div>
-            </template>
-
-            <template #item.schedules="{ value }">
-              <span v-if="Array.isArray(value) && value.length > 0">
-                {{ value.map(s => `${s.start}-${s.end}`).join(", ") }}
-              </span>
-              <span v-else>--</span>
-            </template>
-
-            <template #item.repeatDays="{ value }">
-              <span>{{ value || "--" }} </span>
-            </template>
-          </v-data-table>
-        </v-card-text>
-
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination v-model="page" :length="pages" />
-            </v-row>
-          </template>
-        </v-toolbar>
-      </v-card>
+        </template>
+
+        <template #item.numberOfCheckpoints="{ value }">
+          <div class="text-center">{{ value || "--" }}</div>
+        </template>
+
+        <template #item.tolerance="{ item }">
+          <div class="text-center">
+            <div>{{ item.tolerance ? `${item.tolerance} mins` : "--" }}</div>
+            <div class="text-grey">{{ item.totalTravelTime ? `${item.totalTravelTime} mins` : "--" }}</div>
+          </div>
+        </template>
+
+        <template #item.schedules="{ value }">
+          <span v-if="Array.isArray(value) && value.length > 0">
+            {{ value.map((s: any) => `${s.start}-${s.end}`).join(", ") }}
+          </span>
+          <span v-else>--</span>
+        </template>
+
+        <template #item.repeatDays="{ value }">
+          <span>{{ value || "--" }} </span>
+        </template>
+      </TableMain>
     </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 +86,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 +187,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 +203,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 +224,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 +248,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 +317,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 +431,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 +458,8 @@ async function openDialogEdit() {
 }
 
 function openDialogDelete() {
+  if (!props.canDeleteNfcPatrol) return;
+
   dialogDelete.value = true;
 
   if (dialogPreview.value) dialogPreview.value = false;
@@ -502,6 +531,8 @@ function handleRowClick(_: any, data: any) {
 }
 
 async function submitDelete() {
+  if (!props.canDeleteNfcPatrol) return;
+
   try {
     await deleteRouteById(selectedRoute.value._id ?? "");
     await getRoutesRefresh();
@@ -513,27 +544,9 @@ async function submitDelete() {
   }
 }
 </script>
-
-<style scoped>
-.nfc-route-table :deep(.v-data-table__th) {
-  background-color: rgb(250, 250, 250);
-  font-weight: 500;
-  white-space: pre-line;
-  padding: 16px 12px !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.nfc-route-table :deep(.v-data-table__td) {
-  padding: 16px 12px !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.nfc-route-table :deep(tbody tr:hover) {
-  background-color: rgba(0, 0, 0, 0.02) !important;
-  cursor: pointer;
-}
-
-.nfc-route-table :deep(.v-data-table__tr) {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-</style>
+<!--
+  The screen's own table CSS is gone with the `v-data-table` it styled: it
+  hardcoded an `rgb(250,250,250)` header fill and black-alpha borders, which
+  stay light in dark mode. `TableMain` draws the design's header row and
+  borders from the theme tokens instead.
+-->