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

package/components/TableMain.vue

@@ -1,92 +1,197 @@
+<!--
+  PHASE 3 - THE STANDARD TABLE CARD.
+
+  The redesign is, more than anything else, a table card: toolbar row (refresh,
+  optional in-card search, pagination) -> uppercase header row -> rows. This is
+  the shared one, so this file is where that pattern is drawn once.
+
+  VISUAL ONLY, and that matters more here than anywhere. Every column, filter,
+  sort, action, slot, prop, emit and page still behaves exactly as it did:
+  the headers are the caller's, the items are the caller's, every slot is still
+  forwarded to `v-data-table` untouched, and no prop's default has changed. The
+  empty state is the same wording `v-data-table` already showed, with the icon
+  the design draws above it - and it is only supplied when the caller has NOT
+  passed its own `no-data` slot.
+-->
 <template>
-  <v-row no-gutters>
-    <!-- Top Actions -->
-    <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
-      <v-row no-gutters>
-        <slot name="actions">
-          <v-col cols="12">
-            <v-row no-gutters class="ga-2">
-              <v-btn
-                v-if="canCreate"
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
-                @click="emits('create')"
-              >
-                {{ createLabel }}
-              </v-btn>
-              <v-text-field
-                v-if="canSearch"
-                v-model="searchInput"
-                density="compact"
-                placeholder="Search"
-                clearable
-                max-width="300"
-                append-inner-icon="mdi-magnify"
-                hide-details
-              />
-              <v-btn
-                v-if="canScanVisitorQRCode"
-                text="Scan QR Code"
-                class="text-none ml-2"
-                rounded="pill"
-                variant="tonal"
-                size="large"
-                @click="emits('scan')"
-              />
-            </v-row>
-          </v-col>
-        </slot>
-      </v-row>
+  <v-row no-gutters class="table-card__shrink">
+    <!--
+      THE DESIGN'S PAGE TITLE (Phase 9).
+
+      The design opens every screen with a 22px/800 heading. This shared table
+      card is mounted by 17 module screens, and none of them had one - four of
+      them (Units, Areas, Equipment Item, Equipment Management) were already
+      PASSING `:title` to this component, which had no `title` prop, so the
+      string was landing on the root element as a plain HTML `title` attribute:
+      a browser tooltip nobody asked for. It now draws the heading it was
+      always meant to draw.
+
+      Placement only. No caller changes, no slot moves, no behaviour: a screen
+      that passes no title renders exactly what it rendered before.
+    -->
+    <!--
+      The actions used to be drawn on a SECOND row underneath that heading,
+      which is not where the design puts them - the design's title row is the
+      page name on the left and the screen's actions on the right of the SAME
+      line, which is why every screen converted so far had to bypass this
+      component and draw its own `PageHeader` above it. They are on the title
+      row now, in `PageHeader`'s own `actions` slot.
+
+      Same buttons, same slot name, same content, same events - one row instead
+      of two. A screen with no title still gets its actions at the left, where
+      they have always been, because the title block is not drawn at all.
+    -->
+    <v-col cols="12" v-if="title || canCreate || $slots.actions">
+      <PageHeader :title="title">
+        <template v-if="canCreate || $slots.actions" #actions>
+          <slot name="actions">
+            <!--
+              The design's primary button: the accent fill that may carry a
+              white label (`--accent-strong`; white on `--accent` is 3.23:1),
+              40px, 10px radius, leading icon. Same click, same label.
+            -->
+            <v-btn
+              v-if="canCreate"
+              class="text-none table-card__primary"
+              variant="flat"
+              prepend-icon="mdi-plus"
+              @click="emits('create')"
+            >
+              {{ createLabel }}
+            </v-btn>
+            <v-text-field
+              v-if="canSearch"
+              v-model="searchInput"
+              density="compact"
+              placeholder="Search"
+              clearable
+              max-width="300"
+              append-inner-icon="mdi-magnify"
+              hide-details
+              class="table-card__search"
+            />
+            <!-- Ghost/secondary, as the design specifies for Scan QR Code. -->
+            <v-btn
+              v-if="canScanVisitorQRCode"
+              text="Scan QR Code"
+              class="text-none table-card__ghost"
+              variant="outlined"
+              @click="emits('scan')"
+            />
+          </slot>
+        </template>
+      </PageHeader>
     </v-col>
 
     <!-- Table Card -->
-    <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
+    <!--
+      `table-card__shrink` is the fix for the wide-table blowout: this column is a
+      flex item, and a flex item's automatic minimum size is its CONTENT's, so
+      a table with enough columns set a floor the column would not shrink below
+      and the whole page scrolled sideways at 360 and 768. The table scrolls
+      inside the card instead - see `.table-card__shrink` in `screens.css`.
+    -->
+    <v-col cols="12" class="table-card__shrink">
+      <!--
+        THE DESIGN'S CARD AND ITS IN-CARD TOP ROW (Phase 9).
+
+        Was a `v-card` + `v-toolbar`. `v-card` brings its own radius, elevation
+        and surface at a specificity a class has to fight, and `v-toolbar` puts
+        its `extension` on a SECOND stacked row. `AppCard` + `CardToolbar` are
+        the primitives the design is drawn with, already proven on
+        `ServiceProviderMain` / `MemberMain`.
+
+        Placement only. The refresh button, the `prepend-additional` slot, the
+        page range, the pager, the `extension` slot and the `footer` slot are
+        the same controls, emitting the same events, in the same order. The
+        `loading` bar `v-card` used to draw is drawn explicitly so a loading
+        screen still says so.
+      -->
+      <AppCard class="table-card">
+        <v-progress-linear
+          v-if="loading"
+          indeterminate
+          height="2"
+          class="table-card__loading"
+        />
+
         <!-- Toolbar -->
-        <v-toolbar
-          density="compact"
-          color="grey-lighten-4"
-          :extension-height="extensionHeight"
-        >
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="emits('refresh')">
+        <CardToolbar :count="pageRange">
+          <!--
+            The design draws a screen's tabs ON the toolbar row, not on a
+            stacked strip above the table. `CardToolbar` has always had the
+            slot; `TableMain` simply never forwarded it, so callers put their
+            `v-tabs` in `extension` and got a second row. Purely additive: a
+            caller that passes no `tabs` renders exactly what it rendered.
+          -->
+          <template v-if="$slots.tabs" #tabs>
+            <slot name="tabs" />
+          </template>
+
+          <template #left>
+            <!--
+              THE REFRESH BUTTON HAD NO BUSY STATE.
+
+              It emitted `refresh` and then looked identical for the whole
+              request. When the reload returned the same rows, NOTHING on the
+              screen changed - so there was no way to tell whether the click
+              had registered, which is exactly what QA reported on Work Orders
+              and on the Duty Officer Book (both fire the request; neither
+              showed it). `loading` is the caller's own in-flight flag, the
+              same one the bar above already reads: while it is true the button
+              is disabled, so the click is acknowledged and a second one cannot
+              stack another request on the first.
+
+              A caller that passes no `loading` renders exactly what it renders
+              today (the prop defaults to false).
+            -->
+            <v-btn
+              fab
+              icon
+              density="comfortable"
+              variant="text"
+              :disabled="loading"
+              @click="emits('refresh')"
+            >
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
             <slot name="prepend-additional" />
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="internalPage"
-                :length="pages"
-                @update:value="emits('update:page', internalPage)"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="internalPage"
+              :length="pages"
+              @update:value="emits('update:page', internalPage)"
+            />
           </template>
+        </CardToolbar>
 
-          <template v-if="$slots.extension" #extension>
-            <slot name="extension" />
-          </template>
-        </v-toolbar>
+        <!--
+          The callers' `extension` is a FILTER row (selects, date ranges), not
+          tabs - it is full-width by construction, so it keeps its own line
+          under the toolbar rather than being folded into it, which would push
+          the pager off the end of the row.
+        -->
+        <div v-if="$slots.extension" class="table-card__extension">
+          <slot name="extension" />
+        </div>
 
         <!-- Data Table -->
+        <!--
+          `tableHeaders`, not `headers`, and the two are the SAME ARRAY unless a
+          caller has opted into fixed proportions by putting `weight` on a
+          column. See `columnsAreWeighted` below.
+        -->
         <v-data-table
+          v-model="selectedItems"
           :headers="headers"
+          :class="columnsAreWeighted ? 'table-card__fixed' : undefined"
+          :headers="tableHeaders"
           :items="items"
           :item-value="itemValue"
           :items-per-page="itemsPerPage"
+          :show-select="showSelect"
           fixed-header
           hide-default-footer
           :hide-default-header="!showHeader"
@@ -94,17 +199,40 @@
           :style="`max-height: calc(100vh - (${offset}px))`"
         >
           <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
-            <slot :name="slotName" v-bind="slotProps" />
+            <!--
+              Vuetify invokes argument-less slots such as `no-data` with null
+              props. Vue's dynamic `renderSlot` expects an object and otherwise
+              crashes while reading `props.key`, leaving the previous route on
+              screen even though Vue Router has already updated the URL.
+            -->
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+          </template>
+
+          <!--
+            The design's empty state. Same sentence the table already showed;
+            only supplied when the caller has not passed its own, so nobody's
+            existing empty state is replaced.
+          -->
+          <template v-if="!$slots['no-data']" #no-data>
+            <div class="table-card__empty">
+              <v-icon icon="mdi-magnify-close" size="32" />
+              <span>No data available</span>
+            </div>
           </template>
         </v-data-table>
         <slot name="footer" />
-      </v-card>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
 
 <script lang="ts" setup>
 const props = defineProps({
+  // The design's page heading. Empty = no heading, i.e. exactly today's markup.
+  title: {
+    type: String,
+    default: "",
+  },
   headers: {
     type: Array as PropType<Array<Record<string, any>>>,
     required: true,
@@ -157,6 +285,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  showSelect: {
+    type: Boolean,
+    default: false,
+  },
   extensionHeight: {
     type: Number,
     default: 50,
@@ -167,6 +299,49 @@ const props = defineProps({
   },
 });
 
+/**
+ * THE DESIGN'S FIXED COLUMN PROPORTIONS, AND WHY THEY ARE OPT-IN.
+ *
+ * Every table in the prototype is a CSS grid with an explicit, per-table
+ * `grid-template-columns` - `0.9fr 1.5fr 1.7fr 0.8fr 1fr 1.1fr` on Feedbacks,
+ * `2fr 1fr 1fr` on Units, `1.6fr 1fr 1.3fr 1.6fr 48px` on Pass & Key. Those
+ * ratios are a per-screen design decision. Nothing in a caller's `headers`
+ * array carries that information, so this shared component cannot derive them,
+ * and inventing one set of proportions for 21 components and 18 app pages would
+ * be worse than the automatic layout they have now.
+ *
+ * So it is stated, not guessed: a header may carry `weight: 1.5` and this turns
+ * the weights into percentage widths and switches the table to
+ * `table-layout: fixed`, which is what makes a width binding rather than a hint.
+ * A column with NO weight is left exactly as the caller wrote it, so an
+ * existing `width` (an action column pinned at 48px, say) survives untouched
+ * and only the weighted columns share out what is left.
+ *
+ * NO caller changes. With no weights anywhere, `tableHeaders` IS `props.headers`
+ * - the same array reference - and the table renders exactly what it renders
+ * today, automatic widths and all.
+ */
+const columnsAreWeighted = computed(() =>
+  props.headers.some((h) => Number(h?.weight) > 0)
+);
+
+const tableHeaders = computed(() => {
+  if (!columnsAreWeighted.value) return props.headers;
+
+  // Columns with no weight keep whatever width they already had (often none,
+  // e.g. a 48px action column), and only the weighted ones share what is left.
+  const total = props.headers.reduce(
+    (sum, h) => sum + (Number(h?.weight) > 0 ? Number(h.weight) : 0),
+    0
+  );
+
+  return props.headers.map((h) =>
+    Number(h?.weight) > 0
+      ? { ...h, width: `${((Number(h.weight) / total) * 100).toFixed(4)}%` }
+      : h
+  );
+});
+
 const emits = defineEmits([
   "create",
   "scan",
@@ -176,6 +351,10 @@ const emits = defineEmits([
 ]);
 
 const searchInput = defineModel("search", { default: "" });
+const selectedItems = defineModel("selected", {
+  type: Array as PropType<any[]>,
+  default: () => [],
+});
 
 const internalPage = ref(props.page);
 watch(
@@ -185,9 +364,3 @@ watch(
   }
 );
 </script>
-
-<style scoped>
-.v-data-table :deep(thead th) {
-  font-weight: bold !important;
-}
-</style>

package/components/TableV3.vue

@@ -5,43 +5,39 @@
     border="thin"
     rounded="lg"
     :loading="loading"
-    class="table-v3"
+    class="table-v3 table-card"
   >
-    <v-toolbar density="compact" color="grey-lighten-5">
-      <template #prepend>
+    <div class="app-toolbar app-toolbar--plain">
+      <v-btn
+        icon
+        variant="text"
+        density="comfortable"
+        class="table-v3__refresh-btn"
+        @click="emit('refresh')"
+      >
+        <v-icon size="24">mdi-history</v-icon>
+      </v-btn>
+
+      <div class="app-toolbar__spacer" />
+
+      <div class="app-toolbar__right">
+        <span class="table-card__range">{{ pageRange }}</span>
         <v-btn
-          icon
+          icon="mdi-chevron-left"
           variant="text"
           density="comfortable"
-          class="table-v3__refresh-btn"
-          @click="emit('refresh')"
-        >
-          <v-icon size="28" color="black">mdi-history</v-icon>
-        </v-btn>
-      </template>
-
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <span class="mr-2 text-caption text-fontgray">
-            {{ pageRange }}
-          </span>
-          <v-btn
-            icon="mdi-chevron-left"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoPrev"
-            @click="goPrev"
-          />
-          <v-btn
-            icon="mdi-chevron-right"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoNext"
-            @click="goNext"
-          />
-        </v-row>
-      </template>
-    </v-toolbar>
+          :disabled="!canGoPrev"
+          @click="goPrev"
+        />
+        <v-btn
+          icon="mdi-chevron-right"
+          variant="text"
+          density="comfortable"
+          :disabled="!canGoNext"
+          @click="goNext"
+        />
+      </div>
+    </div>
 
     <div v-if="$slots.breadcrumb" class="table-v3__breadcrumb">
       <slot name="breadcrumb" />
@@ -62,29 +58,27 @@
       </template>
     </v-data-table>
 
-    <v-toolbar density="compact" color="grey-lighten-5" class="table-v3__footer">
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <span class="mr-2 text-caption text-fontgray">
-            {{ pageRange }}
-          </span>
-          <v-btn
-            icon="mdi-chevron-left"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoPrev"
-            @click="goPrev"
-          />
-          <v-btn
-            icon="mdi-chevron-right"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoNext"
-            @click="goNext"
-          />
-        </v-row>
-      </template>
-    </v-toolbar>
+    <div class="app-toolbar app-toolbar--plain table-v3__footer">
+      <div class="app-toolbar__spacer" />
+
+      <div class="app-toolbar__right">
+        <span class="table-card__range">{{ pageRange }}</span>
+        <v-btn
+          icon="mdi-chevron-left"
+          variant="text"
+          density="comfortable"
+          :disabled="!canGoPrev"
+          @click="goPrev"
+        />
+        <v-btn
+          icon="mdi-chevron-right"
+          variant="text"
+          density="comfortable"
+          :disabled="!canGoNext"
+          @click="goNext"
+        />
+      </div>
+    </div>
   </v-card>
 </template>
 
@@ -161,19 +155,16 @@ watch(
 </script>
 
 <style scoped>
-.table-v3 :deep(thead th) {
-  background-color: #f5f5f5;
-  color: #6b7280;
-  font-weight: 600 !important;
-  font-size: 12px;
-}
-
-.table-v3 :deep(tbody td) {
-  height: 54px;
-}
-
+/*
+ * The header row is no longer drawn here. It was `#f5f5f5` on `#6b7280`,
+ * both literal, so in the dark theme the fixed-header rule won the background
+ * and the header read 3.45:1. `.table-card` on the root gives this table the
+ * same tokenised header, cell and hover treatment as every other table in the
+ * product, which measures 4.77:1 light / 4.71:1 dark.
+ */
 .table-v3__footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid var(--border);
+  border-bottom: 0;
 }
 
 .table-v3__refresh-btn {
@@ -182,8 +173,8 @@ watch(
 }
 
 .table-v3__breadcrumb {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  background-color: #fff;
+  border-bottom: 1px solid var(--border);
+  background-color: var(--card);
   padding: 6px 12px;
 }
 </style>

package/components/TiptapEditor.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
-    <VCard class="">
+    <!-- AppCard, not VCard: the design's 14px radius and 1px rule, without
+         Vuetify's own elevation and 4px corner fighting the class for it. -->
+    <AppCard>
       <VuetifyTiptap v-model="content" />
-    </VCard>
+    </AppCard>
   </div>
 </template>
 
@@ -39,35 +41,37 @@ const updateContent = () => {
 </script>
 
 <style scoped>
-/deep/ .vuetify-pro-tiptap-editor__content {
+/*
+ * The rich-text tables. Every colour here used to be a literal - #333 borders,
+ * #fff and #f8f8f8 cells, #f0f0f0 headers, #000 header text, #e6f3ff hover -
+ * so an editor opened in the dark theme drew a white table with black text on
+ * a dark page. They are the same tokens every other table in the product uses,
+ * so the editor content now follows the theme it is opened in.
+ *
+ * The selectors were also written twice, once with :deep() and again with the
+ * deprecated /deep/, matching the same two roots. One copy is enough.
+ */
+:deep(.vuetify-pro-tiptap-editor__content) {
   padding: 15px;
 }
 
-/* Table styles with strong visible borders */
 :deep(.vuetify-pro-tiptap-editor__content table),
-:deep(.ProseMirror table),
-/deep/ .vuetify-pro-tiptap-editor__content table,
-/deep/ .ProseMirror table {
+:deep(.ProseMirror table) {
   border-collapse: collapse;
   border-spacing: 0;
-  border: 2px solid #333333 !important;
+  border: 2px solid var(--border) !important;
   width: 100%;
   margin: 16px 0;
-  background-color: #ffffff;
+  background-color: var(--card);
   display: table !important;
-  font-size: 14px;
+  font-size: var(--fs-cell);
 }
 
-/* Cell borders - very visible */
 :deep(.vuetify-pro-tiptap-editor__content table th),
 :deep(.vuetify-pro-tiptap-editor__content table td),
 :deep(.ProseMirror table th),
-:deep(.ProseMirror table td),
-/deep/ .vuetify-pro-tiptap-editor__content table th,
-/deep/ .vuetify-pro-tiptap-editor__content table td,
-/deep/ .ProseMirror table th,
-/deep/ .ProseMirror table td {
-  border: 1px solid #333333 !important;
+:deep(.ProseMirror table td) {
+  border: 1px solid var(--border) !important;
   padding: 8px 12px;
   text-align: left;
   vertical-align: top;
@@ -75,38 +79,27 @@ const updateContent = () => {
   box-sizing: border-box;
 }
 
-/* Header styling */
 :deep(.vuetify-pro-tiptap-editor__content table th),
-:deep(.ProseMirror table th),
-/deep/ .vuetify-pro-tiptap-editor__content table th,
-/deep/ .ProseMirror table th {
-  font-weight: 600;
-  background-color: #f0f0f0;
-  color: #000000;
-  border-bottom: 2px solid #333333 !important;
+:deep(.ProseMirror table th) {
+  font-weight: var(--fw-table-head);
+  background-color: var(--thead);
+  color: var(--text);
+  border-bottom: 2px solid var(--border) !important;
 }
 
-/* Regular cells */
 :deep(.vuetify-pro-tiptap-editor__content table td),
-:deep(.ProseMirror table td),
-/deep/ .vuetify-pro-tiptap-editor__content table td,
-/deep/ .ProseMirror table td {
-  background-color: #ffffff;
+:deep(.ProseMirror table td) {
+  background-color: var(--card);
+  color: var(--text);
 }
 
-/* Alternating row colors */
 :deep(.vuetify-pro-tiptap-editor__content table tr:nth-child(2n) td),
-:deep(.ProseMirror table tr:nth-child(2n) td),
-/deep/ .vuetify-pro-tiptap-editor__content table tr:nth-child(2n) td,
-/deep/ .ProseMirror table tr:nth-child(2n) td {
-  background-color: #f8f8f8;
+:deep(.ProseMirror table tr:nth-child(2n) td) {
+  background-color: var(--thead);
 }
 
-/* Hover effects */
 :deep(.vuetify-pro-tiptap-editor__content table tr:hover td),
-:deep(.ProseMirror table tr:hover td),
-/deep/ .vuetify-pro-tiptap-editor__content table tr:hover td,
-/deep/ .ProseMirror table tr:hover td {
-  background-color: #e6f3ff !important;
+:deep(.ProseMirror table tr:hover td) {
+  background-color: var(--hover) !important;
 }
 </style>