@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/DocumentManagement.vue

@@ -1,77 +1,60 @@
 <template>
   <v-row no-gutters class="pa-0">
     <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center">
-        <v-col cols="12" md="6" class="d-flex align-center">
-          <v-btn
-            class="text-none me-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="setDocument()"
+      <PageHeader title="Documents">
+        <template #actions>
+          <AppButton
+            v-if="canCreate && canCreateFolder"
+            variant="ghost"
+            icon="mdi-folder-plus-outline"
+            @click="openCreateFolderDialog()"
+          >
+            Create Folder
+          </AppButton>
+
+          <AppButton
             v-if="canCreate && canCreateDocument"
+            icon="mdi-plus"
+            @click="setDocument()"
           >
             Add Document
-          </v-btn>
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <div class="doc-filters">
+        <AppField
+          v-model="search"
+          search
+          icon="mdi-magnify"
+          placeholder="Search"
+          klass="doc-filters__search"
+        />
 
-          <v-btn
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="openCreateFolderDialog()"
-            v-if="canCreate && canCreateFolder"
-          >
-            Create Folder
-          </v-btn>
-        </v-col>
-
-        <v-col
-          cols="12"
-          md="6"
-          class="d-flex justify-end align-center mt-4 mt-md-0"
-        >
-          <v-text-field
-            v-model="search"
-            placeholder="Search"
-            density="comfortable"
-            variant="outlined"
-            hide-details
-            rounded="lg"
-            class="me-3"
-            style="max-width: 220px"
-          />
-
-          <v-menu v-model="filterMenu" offset-y>
-            <template #activator="{ props }">
-              <v-btn
-                v-bind="props"
-                variant="outlined"
-                rounded="lg"
-                class="filtertype-btn text-none"
-                style="max-width: 220px"
-              >
-                {{ selectedFileType || "Filter by File Type" }}
-              </v-btn>
-            </template>
+        <v-menu v-model="filterMenu" offset-y>
+          <template #activator="{ props }">
+            <button v-bind="props" type="button" class="doc-filters__type">
+              <span>{{ selectedFileType || "Filter by File Type" }}</span>
+              <v-icon size="18">mdi-chevron-down</v-icon>
+            </button>
+          </template>
 
-            <v-card class="filtertype-card">
-              <v-list class="pa-0">
-                <v-list-item
-                  v-for="(type, idx) in fileTypes"
-                  :key="idx"
-                  @click="selectFileType(type)"
-                  class="filtertype-item"
-                >
-                  <v-list-item-title class="text-subtitle-2">
-                    {{ type }}
-                  </v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-menu>
-        </v-col>
-      </v-row>
+          <v-card class="filtertype-card">
+            <v-list class="pa-0">
+              <v-list-item
+                v-for="(type, idx) in fileTypes"
+                :key="idx"
+                @click="selectFileType(type)"
+                class="filtertype-item"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ type }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+      </div>
     </v-col>
 
     <v-col cols="12" class="mb-2" v-if="isInsideFolder">
@@ -82,7 +65,7 @@
           variant="text"
           @click="goBackFolder"
         />
-        <v-icon size="18" color="grey-darken-2">mdi-folder</v-icon>
+        <v-icon size="18" style="color: var(--muted)">mdi-folder</v-icon>
         <span class="text-body-2 font-weight-medium">{{
           currentFolderPath
         }}</span>
@@ -102,6 +85,15 @@
         @update:page="page = $event"
         @row-click="tableRowClickHandler"
       >
+        <!--
+          A failed request is not an empty folder. Without this the table drew
+          its neutral "No data available" for a 500, which reads as "there are
+          no documents here" - a statement the server never made.
+        -->
+        <template v-if="getDocumentError" #no-data>
+          <DashboardEmptyState error />
+        </template>
+
         <template v-if="isInsideFolder" #breadcrumb>
           <div class="d-flex align-center flex-wrap ga-1">
             <v-btn
@@ -114,18 +106,18 @@
             />
 
             <span
-              class="breadcrumb-segment text-body-2 text-grey-darken-1 cursor-pointer"
+              class="breadcrumb-segment text-body-2 breadcrumb-segment--link cursor-pointer"
               @click="navigateToRoot"
               >Home</span
             >
             <template v-for="(folder, idx) in folderStack" :key="folder.id">
-              <v-icon size="14" color="grey-darken-1">mdi-chevron-right</v-icon>
+              <v-icon size="14" style="color: var(--muted)">mdi-chevron-right</v-icon>
               <span
                 :class="[
                   'breadcrumb-segment text-body-2 font-weight-medium',
                   idx === folderStack.length - 1
-                    ? 'text-black'
-                    : 'text-grey-darken-1 cursor-pointer',
+                    ? 'breadcrumb-segment--current'
+                    : 'breadcrumb-segment--link cursor-pointer',
                 ]"
                 @click="
                   idx < folderStack.length - 1 && navigateToStackIndex(idx)
@@ -140,7 +132,7 @@
             <v-icon
               size="18"
               :color="
-                isFolderItem(item._raw) ? 'amber-darken-2' : 'grey-darken-2'
+                isFolderItem(item._raw) ? 'warning' : 'muted'
               "
             >
               {{
@@ -221,7 +213,7 @@
     <!-- Create Folder Dialog -->
     <v-dialog v-model="createFolderDialog" width="450" persistent>
       <v-card width="100%">
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="12" class="pa-4">
               <span class="font-weight-medium text-h6">Create Folder</span>
@@ -251,7 +243,7 @@
           </v-form>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -288,7 +280,7 @@
     <!-- Edit Folder Dialog -->
     <v-dialog v-model="editFolderDialog" width="450" persistent>
       <v-card width="100%" class="folder-dialog-card">
-        <v-toolbar class="pa-0 folder-dialog-toolbar" density="compact">
+        <v-toolbar class="pa-0 folder-dialog-toolbar screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="12" class="pa-4">
               <span class="font-weight-medium text-h6">Edit Folder</span>
@@ -323,7 +315,7 @@
           </v-form>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -360,7 +352,7 @@
     <!-- Delete Folder Dialog -->
     <v-dialog v-model="deleteFolderDialog" width="450" persistent>
       <v-card width="100%" class="folder-dialog-card">
-        <v-toolbar density="compact" class="pl-4 folder-dialog-toolbar">
+        <v-toolbar density="compact" class="pl-4 folder-dialog-toolbar screen-dialog-bar">
           <span class="font-weight-medium text-h6">Delete Folder</span>
         </v-toolbar>
 
@@ -374,7 +366,7 @@
           </p>
         </v-card-text>
 
-        <v-toolbar density="compact" class="pa-0">
+        <v-toolbar density="compact" class="pa-0 screen-dialog-bar">
           <v-row no-gutters class="w-100">
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -502,7 +494,7 @@
             </v-col>
           </v-row>
         </v-card-text>
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters>
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -566,7 +558,7 @@
       persistent
     >
       <v-card width="100%">
-        <v-toolbar density="compact" class="pl-4">
+        <v-toolbar density="compact" class="pl-4 screen-dialog-bar">
           <span class="font-weight-medium text-h5">Delete Document</span>
         </v-toolbar>
         <v-card-text>
@@ -576,7 +568,7 @@
           </p>
         </v-card-text>
 
-        <v-toolbar density="compact">
+        <v-toolbar class="screen-dialog-bar" density="compact">
           <v-row no-gutters>
             <v-col cols="6">
               <v-btn
@@ -614,6 +606,10 @@
   </v-row>
 </template>
 <script setup lang="ts">
+// Relative import, never Nuxt auto-import: this layer's `utils/` are auto-imported
+// 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,
@@ -753,6 +749,7 @@ const {
   data: getDocumentReq,
   refresh: getDocuments,
   status: getAllReqStatus,
+  error: getDocumentError,
 } = useLazyAsyncData(
   "get-all-documents",
   () =>
@@ -771,12 +768,16 @@ const {
 
 const loading = computed(() => getAllReqStatus.value === "pending");
 
+// The page totals are the server's count of the WHOLE list, read through the
+// one helper that knows how a paginated reply is shaped - never re-derived
+// from the rows on this page. Applied unconditionally so that when a request
+// fails the reply goes null and the header falls back to the placeholder,
+// instead of leaving the previous page's total on screen as if it still held.
 watchEffect(() => {
-  if (getDocumentReq.value) {
-    items.value = getDocumentReq.value.items;
-    pages.value = getDocumentReq.value.pages;
-    pageRange.value = getDocumentReq.value.pageRange;
-  }
+  const listPage = readListPage<Record<string, any>>(getDocumentReq.value);
+  items.value = listPage.items;
+  pages.value = listPage.pages;
+  pageRange.value = listPage.pageRange;
 });
 
 function formatDate(value?: string | null) {
@@ -1197,36 +1198,87 @@ function selectFileType(type: string) {
 </script>
 
 <style scoped>
+/*
+ * EVERY COLOUR IN THIS BLOCK WAS A LITERAL. `#fff` menus, `#fafafa` bars,
+ * `#e0e0e0` rules and `#38475a` ink do not follow the theme, so in dark mode
+ * this screen drew white slabs on the dark page. All of them are tokens now;
+ * nothing about the layout, the flow or the actions changed.
+ */
+
+/* The breadcrumb was `text-grey-darken-1` and `text-black` - the same two
+   greys on the dark page, i.e. black lettering on a dark card. */
+.breadcrumb-segment--link {
+  color: var(--muted);
+}
+
+.breadcrumb-segment--current {
+  color: var(--text);
+}
+
 .table-download-btn {
   min-width: 106px;
   height: 30px;
-  border-radius: 4px;
-  background-color: #e3e3e3;
-  color: #38475a;
+  border-radius: var(--r-tag);
+  background-color: var(--hover);
+  color: var(--text2);
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   box-shadow: none;
 }
 
 .table-download-btn:hover {
-  background-color: #d8d8d8;
+  background-color: var(--thead);
+}
+
+/* The filter row under the title: the design puts search and filters on one
+   line, right-aligned, rather than in a second full-width toolbar. */
+.doc-filters {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
 }
 
-.filtertype-btn {
-  justify-content: flex-start;
+.doc-filters :deep(.doc-filters__search) {
+  flex: 0 0 auto;
   width: 220px;
+  min-width: 0;
+}
+
+.doc-filters__type {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 220px;
+  height: 38px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.doc-filters__type:hover {
+  background: var(--hover);
 }
 
 .filtertype-card {
-  background: #fff;
-  border-radius: 8px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   min-width: 160px;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-menu);
   overflow: hidden;
 }
 
 .filtertype-item {
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border);
   padding: 10px 16px;
 }
 
@@ -1235,27 +1287,29 @@ function selectFileType(type: string) {
 }
 
 .folder-path-bar {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background: #fafafa;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--thead);
+  color: var(--text);
 }
 
 .folder-action-btn {
-  color: #38475a;
+  color: var(--text2);
 }
 
 .folder-action-list {
   min-width: 180px;
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-menu);
   overflow: hidden;
 }
 
 .folder-action-item {
   min-height: 40px;
-  border-bottom: 1px solid #eef0f2;
-  color: #38475a;
+  border-bottom: 1px solid var(--border);
+  color: var(--text2);
 }
 
 .folder-action-item:last-child {
@@ -1263,11 +1317,11 @@ function selectFileType(type: string) {
 }
 
 .folder-dialog-card {
-  border-radius: 6px;
+  border-radius: var(--r-inner);
   overflow: hidden;
 }
 
 .folder-dialog-toolbar {
-  border-bottom: 1px solid #eef0f2;
+  border-bottom: 1px solid var(--border);
 }
 </style>

package/components/DocumentViewer.vue

@@ -1,14 +1,24 @@
 <template>
     <v-dialog :model-value="modelValue" :max-width="fileType === 'image' ? '1200' : '900'" scrollable
         @update:model-value="emit('update:modelValue', $event)">
-        <v-card>
-            <v-toolbar density="compact">
-                <v-toolbar-title class="text-subtitle-2 text-truncate">{{ fileName }}</v-toolbar-title>
-                <v-spacer />
-                <v-btn icon="mdi-open-in-new" variant="text" size="small" @click="openInNewTab()" />
-                <v-btn icon="mdi-close" variant="text" size="small" @click="emit('update:modelValue', false)" />
-            </v-toolbar>
-            <v-card-text class="pa-0"
+        <!-- The card wears `.screen-modal` for the 16px corner, the `--card`
+             surface and the modal shadow. The `v-toolbar` header was a fixed
+             grey slab that stays grey on the dark theme; the design's modal
+             header is a title and its controls on the card's own surface over
+             a 1px `--border` rule, which is what this now draws. -->
+        <v-card class="screen-modal">
+            <v-card-title class="d-flex align-center ga-1 doc-viewer__head">
+                <span class="flex-grow-1 text-truncate">{{ fileName }}</span>
+                <!-- `.screen-modal__close` is the handoff's modal control:
+                     32x32, 8px radius, borderless, `--muted` ink. The handoff
+                     draws only a close in that row; a second control beside it
+                     is a case it is silent on, so it takes the same shape. -->
+                <v-btn icon="mdi-open-in-new" variant="text" size="small" class="screen-modal__close"
+                    @click="openInNewTab()" />
+                <v-btn icon="mdi-close" variant="text" size="small" class="screen-modal__close"
+                    @click="emit('update:modelValue', false)" />
+            </v-card-title>
+            <v-card-text class="screen-modal__body pa-0"
                 :style="{ height: fileType === 'image' ? 'auto' : '75vh', 'overflow-y': fileType === 'image' ? 'auto' : 'auto' }">
                 <!-- Image Viewer -->
                 <v-img v-if="fileType === 'image'" :src="getFileUrl(fileId)" :alt="fileName" class="w-100" />
@@ -24,13 +34,12 @@
                 <iframe v-else :src="getFileUrl(fileId)" width="100%" height="100%" style="border: none;"
                     :title="fileName" />
             </v-card-text>
-            <v-card-actions>
-                <v-spacer />
-                <v-btn variant="text" class="text-none" @click="openInNewTab()">
+            <div class="screen-modal__footer">
+                <v-btn variant="outlined" class="screen-btn-ghost" @click="openInNewTab()">
                     <v-icon start>mdi-download</v-icon>
                     Open / Download
                 </v-btn>
-            </v-card-actions>
+            </div>
         </v-card>
     </v-dialog>
 </template>
@@ -73,3 +82,11 @@ function openInNewTab() {
     window.open(getFileUrl(props.fileId), '_blank', 'noopener,noreferrer');
 }
 </script>
+
+<style scoped>
+/* The handoff's modal header sits over a 1px --border rule, the same rule the
+   footer strip sits under. */
+.doc-viewer__head {
+    border-bottom: 1px solid var(--border);
+}
+</style>

package/components/DrawImage.vue

@@ -4,32 +4,25 @@
     transition="dialog-top-transition"
     max-width="1000"
   >
-    <v-card class="pa-1">
-      <v-toolbar>
-        <v-spacer></v-spacer>
-        <v-btn icon="mdi-close" @click="emit('onCloseDialog')" />
-      </v-toolbar>
-      <canvas id="imageCanvas" />
-      <v-card-title class="text-end">
+    <v-card class="screen-modal">
+      <div class="draw-image__head">
         <v-btn
-          color="orange-darken-3"
-          size="small"
-          variant="flat"
-          style="height: 40px; margin-right: 12px"
-          @click="onClearDrawing()"
-        >
+          class="screen-modal__close"
+          variant="text"
+          icon="mdi-close"
+          aria-label="Close"
+          @click="emit('onCloseDialog')"
+        />
+      </div>
+      <canvas id="imageCanvas" />
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" @click="onClearDrawing()">
           Clear Drawing
         </v-btn>
-        <v-btn
-          color="blue-darken-3"
-          size="small"
-          variant="flat"
-          style="height: 40px"
-          @click="submit"
-        >
+        <v-btn class="screen-btn-primary" variant="flat" @click="submit">
           Submit
         </v-btn>
-      </v-card-title>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -170,3 +163,18 @@ async function onClearDrawing() {
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 }
 </script>
+
+<style scoped>
+/* The design's modal has a title row; this dialog has never had a title, only
+   a close - so the row keeps that and just moves the close onto the design's
+   borderless 32px square. No copy invented. */
+.draw-image__head {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 12px 0;
+}
+
+/* The canvas itself is untouched: its width/height are computed in script from
+   its own bounding box, so a layout rule here would quietly move the drawing
+   coordinates - a behaviour change no render can prove. */
+</style>

package/components/EntryPass/QrTemplatePreview.vue

@@ -6,24 +6,28 @@
     persistent
     @update:model-value="emit('update:modelValue', $event)"
   >
-    <v-card>
-      <v-toolbar
-        style="height: 12px"
-        :color="isDark ? 'grey-darken-4' : 'white'"
-      >
-        <v-spacer></v-spacer>
+    <v-card class="screen-modal">
+      <!-- Was a 12px-tall `v-toolbar` themed by hand (`white` / `grey-darken-4`)
+           carrying a `grey-darken-1` icon button. The design's modal close is a
+           borderless 32px square on `--muted`, so the whole bar goes and the
+           close sits on the card's own surface. -->
+      <div class="d-flex justify-end pa-2">
         <v-btn
-          color="grey-darken-1"
+          variant="text"
           icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close preview"
           @click="emit('update:modelValue', false)"
         ></v-btn>
-      </v-toolbar>
+      </div>
 
-      <v-card-text style="padding: 0 !important">
+      <v-card-text class="screen-modal__body pa-0">
         <v-container>
           <v-row no-gutters class="text-center">
             <v-col cols="12">
-              <p class="font-weight-bold text-h5 mb-3">{{ header }}</p>
+              <!-- `text-h5` is Vuetify's 24px/400 Roboto scale. The design's
+                   modal title token is `--fs-card-title` / `--fw-card-title`. -->
+              <p class="qr-preview__title mb-3">{{ header }}</p>
               <p>{{ subText }}</p>
             </v-col>
 
@@ -53,8 +57,8 @@
             </v-col>
 
             <v-col cols="12" class="mt-5">
-              <p class="font-weight-bold text-h5 mb-2">Company Name</p>
-              <p class="font-weight-bold text-h5 mb-3">BL 01/03/24</p>
+              <p class="qr-preview__title mb-2">Company Name</p>
+              <p class="qr-preview__title mb-3">BL 01/03/24</p>
               <p class="mb-1">{{ `Date: ${dateStr} ${timeStr}` }}</p>
               <p class="mb-1">Access: Door</p>
               <p>Scan and press level 1. One time use.</p>
@@ -67,7 +71,6 @@
 </template>
 
 <script lang="ts" setup>
-import { useTheme } from "vuetify";
 import QRCode from "qrcode";
 
 defineProps({
@@ -87,9 +90,6 @@ defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 
-const { global: themeGlobal } = useTheme();
-const isDark = computed(() => themeGlobal.current.value.dark);
-
 const qrSmall = ref<string>("");
 const qrLarge = ref<string>("");
 
@@ -102,3 +102,14 @@ const now = new Date();
 const dateStr = now.toLocaleDateString();
 const timeStr = now.toLocaleTimeString();
 </script>
+
+<style scoped>
+/* The pass body is a printed artefact, so its own sizes stay. Only the two
+   heading lines move off Vuetify's Roboto display scale onto the design's
+   modal-title token. */
+.qr-preview__title {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+}
+</style>