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

package/components/SwitchContext.vue

@@ -13,26 +13,35 @@
           :prepend-icon="prop.icon"
           append-icon="mdi-chevron-down"
           :to="props.route"
-          class="text-subtitle-2 font-weight-bold"
+          class="switch-context__activator"
         >
-          <v-list-item-title class="text-truncate">
+          <!-- The design prints the organisation and site names in full, but
+               mid-word line breaks ("Manageme-nt", "Condominiu-m") are not
+               acceptable. Wrap at word boundaries onto up to two lines, then
+               ellipsis; the title attribute keeps the full name on hover. -->
+          <v-list-item-title
+            class="switch-context__name"
+            :title="name || `Select ${prop.title}`"
+          >
             {{ name || `Select ${prop.title}` }}
           </v-list-item-title>
         </v-list-item>
       </v-list>
     </template>
 
-    <v-card width="300px" rounded="lg" class="pa-4">
-      <span class="text-subtitle-2 font-weight-bold">
+    <v-card width="300px" elevation="0" class="switch-context__panel">
+      <span class="switch-context__heading">
         Switch {{ prop.title }} context
       </span>
       <v-text-field
         v-model="search"
-        @keydown.enter="emit('search')"
+        @keydown.enter="triggerSearch"
+        clearable
+        @click:clear="clearSearch"
         density="compact"
         width="100%"
         hide-details
-        class="mb-2"
+        class="filter-field mb-2"
       >
         <template #prepend-inner>
           <v-icon>mdi-magnify</v-icon>
@@ -42,7 +51,7 @@
       <v-list class="pa-0 my-2" density="compact" max-height="200px">
         <v-list-item
           density="compact"
-          class="text-caption font-weight-bold"
+          class="switch-context__row"
           v-for="item in prop.items"
           :key="item.value"
           @click="selectItem(item.value)"
@@ -55,7 +64,41 @@
         </v-list-item>
       </v-list>
 
-      <slot name="footer"></slot>
+      <!-- The two actions under the list. Seven applications hand-wrote this
+           same block, and all seven wrote `color="primary" size="large"` on a
+           filled button - `primary` is the design's FOREGROUND token, so the
+           fill was off-palette and 44px against the design's 40px. Stating it
+           once here means an application passes two labels instead of thirty
+           lines. Anything passed to #footer still overrides it wholesale. -->
+      <slot name="footer">
+        <v-row v-if="prop.manageLabel || prop.addLabel" no-gutters>
+          <v-col
+            v-if="prop.manageLabel"
+            cols="12"
+            :class="{ 'mb-2': prop.addLabel }"
+          >
+            <v-btn
+              block
+              variant="flat"
+              class="screen-btn-primary"
+              @click="emit('manage')"
+            >
+              {{ prop.manageLabel }}
+            </v-btn>
+          </v-col>
+
+          <v-col v-if="prop.addLabel" cols="12">
+            <v-btn
+              block
+              variant="flat"
+              class="screen-btn-primary"
+              @click="emit('add')"
+            >
+              {{ prop.addLabel }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </slot>
     </v-card>
   </v-menu>
 </template>
@@ -82,6 +125,25 @@ const prop = defineProps({
     required: false,
     default: "",
   },
+  /**
+   * The default #footer's two buttons. Each draws only when its label is a
+   * non-empty string, so an application that states neither gets the empty
+   * footer it has today, and one that states only `addLabel` gets one button.
+   * Deliberately opt-in by label rather than by a boolean: the wording differs
+   * per context ("Manage organization" / "Manage sites") and is not derivable
+   * from `title`, which is already "Organizations" in one place and "site" in
+   * the other.
+   */
+  manageLabel: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  addLabel: {
+    type: String,
+    required: false,
+    default: "",
+  },
 });
 
 const menu = defineModel<boolean>("menu", { required: false, default: false });
@@ -94,15 +156,145 @@ const search = defineModel<string>("search", {
   default: "",
 });
 
-const emit = defineEmits(["search", "select"]);
+const emit = defineEmits(["search", "select", "manage", "add"]);
 
 const name = computed(() => {
   return prop.items.find((item) => item.value === selected.value)?.text ?? "";
 });
 
+/**
+ * THE BREADCRUMB'S SITE HALF.
+ *
+ * The top bar draws `Site name / Page`, but the site's NAME is only ever
+ * resolved here - each application loads its own site list and hands it to
+ * this selector, so the bar had nothing to print and showed the page alone.
+ * The label already on screen is mirrored into shared state for the bar to
+ * read. It is a label: no request is made, and what the selector selects is
+ * untouched.
+ */
+const shellSiteName = useState<string>("shell-context-site-name", () => "");
+
+watchEffect(() => {
+  if (prop.title?.toLowerCase() === "site" && name.value) {
+    shellSiteName.value = name.value;
+  }
+});
+
+let searchDebounce: ReturnType<typeof setTimeout> | null = null;
+let skipNextWatch = false;
+
+const triggerSearch = () => {
+  if (searchDebounce) clearTimeout(searchDebounce);
+  emit("search");
+};
+
+const clearSearch = () => {
+  skipNextWatch = true;
+  search.value = "";
+  triggerSearch();
+};
+
+watch(search, () => {
+  if (skipNextWatch) {
+    skipNextWatch = false;
+    return;
+  }
+  if (searchDebounce) clearTimeout(searchDebounce);
+  searchDebounce = setTimeout(triggerSearch, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (searchDebounce) clearTimeout(searchDebounce);
+});
+
 const selectItem = (value: string) => {
   selected.value = value;
   menu.value = false;
   emit("select", value);
 };
 </script>
+
+<style scoped>
+/**
+ * The rail's context selector and the panel it opens.
+ *
+ * The panel was a factory `v-card` with `pa-4` and Vuetify's `text-subtitle-2`
+ * / `text-caption` scale, so it was the one menu in the shell that did NOT
+ * match the profile menu the top bar already draws. It takes the SAME surface
+ * as `Layout/Header`'s `.app-profile-menu` - 14px radius, the design's menu
+ * shadow, a 1px border - rather than a third treatment invented here.
+ *
+ * The typography utilities also sat on elements that CONTAIN icons
+ * (`prepend-icon`, the chevron, the tick), which is the exact shape the central
+ * icon-font guard exists to catch. Tokens carry no such risk.
+ */
+.switch-context__activator {
+  font-size: var(--fs-nav);
+  font-weight: 700;
+  color: var(--text);
+}
+
+/* The panel is a `v-card`, and Vuetify puts it inside `.v-overlay__content`.
+   `screens.css` gives EVERY card in an overlay the modal shape - 16px and the
+   modal shadow - with `!important`, because dialogs open from sixty components
+   and the shape had to be stated once. A menu is an overlay too, so the panel
+   was silently taking the modal shape: measured 16px and
+   `rgba(10, 12, 16, 0.3) 0 24px 64px`, not the 14px `--r-menu` and the lighter
+   `--shadow-menu` it asks for.
+   `!important` alone does NOT win it back: `.switch-context__panel[data-v-...]`
+   and `.v-overlay__content > .v-card` are both two classes, the scope attribute
+   counts, and a tie goes to whichever sheet loaded last - which is screens.css.
+   Measured still 16px with `!important` on the plain class. So the selector
+   carries the overlay class too, to out-specify rather than tie. */
+.v-overlay__content > .switch-context__panel {
+  border-radius: var(--r-menu) !important;
+  box-shadow: var(--shadow-menu) !important;
+  border: 1px solid var(--border);
+  background: var(--card);
+  padding: 14px;
+}
+
+.switch-context__heading {
+  display: block;
+  font-size: var(--fs-btn);
+  font-weight: 800;
+  line-height: 1.3;
+  color: var(--text);
+  margin-bottom: 10px;
+}
+
+/* The profile menu's row, to the pixel - same padding, same radius, same
+   weight - because it is the same control one panel over.
+   `!important` ONLY on the radius, and it is not optional: a `v-list` with no
+   `rounded` prop stamps Vuetify's own `rounded-0` utility onto every
+   `v-list-item` inside it, and that utility IS `!important`. So this rule was
+   losing silently - measured `0px`, not the 9px it asks for - and the hover
+   painted a square block inside a 14px-rounded panel. The header's rows escape
+   it only because they are plain `<button>`s, which is why the two menus did
+   not match despite the same value. */
+.switch-context__row {
+  border-radius: var(--r-inner-sm) !important;
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn);
+  color: var(--text2);
+}
+
+.switch-context__row:hover {
+  background: var(--hover);
+}
+
+/* Wrap the full organisation/site name at word boundaries onto up to two
+   lines, then ellipsis - never break mid-word. Full name is on the title
+   attribute for hover. */
+.switch-context__name {
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+  overflow-wrap: normal;
+  word-break: normal;
+  line-height: 1.25;
+}
+</style>

package/components/TableHygiene.vue

@@ -5,10 +5,8 @@
         <slot name="actions">
           <v-btn
             v-if="canCreate"
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
+            class="text-none screen-btn-primary"
+            variant="flat"
             @click="emits('create')"
           >
             {{ createLabel }}
@@ -18,16 +16,11 @@
     </v-col>
 
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
+      <v-card width="100%" variant="flat" class="table-card" :loading="loading">
         <v-toolbar
           density="compact"
-          color="grey-lighten-4"
+          color="transparent"
+          class="table-card__toolbar"
           :extension-height="extensionHeight"
         >
           <template #prepend>
@@ -46,7 +39,7 @@
 
           <template #append>
             <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
+              <span class="mr-2 table-card__range">
                 {{ pageRange }}
               </span>
               <local-pagination
@@ -68,25 +61,23 @@
           :max-height="`calc(100vh - (${offset}px))`"
           class="overflow-y-auto"
         >
-          <v-row
-            v-if="groupedItems.length === 0"
-            no-gutters
-            justify="center"
-            class="py-10"
-          >
-            <v-col
-              cols="auto"
-              class="text-center text-medium-emphasis text-body-2"
-            >
-              {{ noDataText }}
-            </v-col>
-          </v-row>
+          <div v-if="groupedItems.length === 0" class="table-card__empty">
+            <!--
+              The empty block was hard-coded, so a caller had no way to say
+              "this is not empty, the request failed" - every 500 rendered as
+              the neutral "nothing here". The default is unchanged.
+            -->
+            <slot name="no-data">
+              <v-icon icon="mdi-magnify-close" size="32" />
+              <span>{{ noDataText }}</span>
+            </slot>
+          </div>
 
           <template
             v-for="(group, groupIndex) in groupedItems"
             :key="`group-${groupIndex}`"
           >
-            <v-sheet color="grey-lighten-4" border="b t">
+            <v-sheet color="transparent" class="table-card__group" border="b t">
               <v-row no-gutters align="center" class="px-4 py-2">
                 <v-col cols="auto" class="d-flex align-center ga-2">
                   <span
@@ -94,39 +85,37 @@
                   >
                     Set {{ group.set }}
                   </span>
-                  <v-chip
+                  <StatusChip
                     v-if="group.isScheduleTask"
-                    size="x-small"
-                    color="info"
-                    variant="tonal"
-                    prepend-icon="mdi-calendar-clock"
+                    tone="info"
+                    :dot="false"
                     class="text-none"
                   >
+                    <v-icon size="12">mdi-calendar-clock</v-icon>
                     Schedule Task
-                  </v-chip>
+                  </StatusChip>
                   <slot name="group-header-chips" :group="group">
-                    <v-chip
+                    <StatusChip
                       v-if="group.completedByName && isGroupComplete(group)"
-                      size="x-small"
-                      color="success"
-                      variant="tonal"
-                      prepend-icon="mdi-check-circle-outline"
+                      status="Completed"
+                      :dot="false"
                       class="text-none"
                     >
+                      <v-icon size="12">mdi-check-circle-outline</v-icon>
                       Completed · {{ group.completedByName }}
-                    </v-chip>
-                    <v-chip
+                    </StatusChip>
+                    <StatusChip
                       v-else-if="
                         group.completedByName && isGroupInProgress(group)
                       "
-                      size="x-small"
-                      color="warning"
-                      variant="tonal"
-                      prepend-icon="mdi-progress-clock"
+                      status="Ongoing"
+                      tone="warn"
+                      :dot="false"
                       class="text-none"
                     >
+                      <v-icon size="12">mdi-progress-clock</v-icon>
                       Ongoing · {{ group.completedByName }}
-                    </v-chip>
+                    </StatusChip>
                   </slot>
                 </v-col>
                 <v-spacer />
@@ -139,7 +128,8 @@
             <v-sheet
               v-for="item in group.items"
               :key="item[itemValue]"
-              color="white"
+              color="transparent"
+              class="table-card__row"
               border="b"
             >
               <v-row no-gutters align="center" class="px-4 py-2">

package/components/TableList.vue

@@ -1,12 +1,10 @@
 <template>
-  <v-card
-    width="100%"
-    variant="outlined"
-    border="thin"
-    rounded="lg"
-    :loading="loading"
-  >
-    <v-toolbar density="compact" color="grey-lighten-4">
+  <v-card width="100%" elevation="0" class="table-card" :loading="loading">
+    <v-toolbar
+      density="compact"
+      class="table-card__toolbar px-3"
+      color="transparent"
+    >
       <template #prepend>
         <v-checkbox v-model="selectAll" hide-details class="mx-1"></v-checkbox>
 
@@ -17,7 +15,7 @@
 
       <template #append>
         <v-row no-gutters justify="end" align="center">
-          <span class="mr-2 text-caption text-fontgray">
+          <span class="table-card__range mr-2">
             {{ props.pageRange }}
           </span>
           <div class="arrow-navigation">
@@ -41,7 +39,9 @@
       </template>
 
       <template v-if="$slots.extension" v-slot:extension>
-        <slot name="extension"></slot>
+        <div class="table-card__extension">
+          <slot name="extension"></slot>
+        </div>
       </template>
     </v-toolbar>
     <div :style="{ overflowY: 'auto', height }">

package/components/TableListSecondary.vue

@@ -1,55 +1,46 @@
-<template>
-  <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-    <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
-      <template #prepend>
-        <slot name="title">Title</slot>
-      </template>
+<!--
+  THE SECOND LIST CARD - the one `ListView` and `WorkOrder/ListView` draw.
 
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <slot name="action-button"></slot>
-        </v-row>
-      </template>
+  Was a `v-card` with TWO `v-toolbar`s: the caller's title + action button on
+  the top one, and the page range + arrows on a second one under the table. The
+  design has neither. The page name and the screen's primary action belong on
+  ONE title row ABOVE the card (`PageHeader`), and the range and the pager
+  belong on the card's own single top row (`CardToolbar`) - which is exactly
+  the shape `TableMain` was converted to.
 
-      <template v-if="$slots.extension" v-slot:extension>
-        <slot name="extension"></slot>
-      </template>
-    </v-toolbar>
-
-    <v-data-table
-      v-model="selected"
-      :headers="props.headers"
-      :items="props.items"
-      item-value="_id"
-      items-per-page="20"
-      fixed-header
-      hide-default-footer
-      selec
-      :loading="props.loading"
-      @click:row="handleRowClick"
-      :style="`max-height:${props.height}`"
-      :class="{ 'clickable-rows': props.clickableRows }"
-    >
-      <template v-if="$slots.item" v-slot:item>
-        <slot name="item" :items="props.items"></slot>
+  VISUAL ONLY. Same headers, same items, same slots, same row click, same
+  `page` model, same `update:pagination` payloads, same increment/decrement
+  guards. Nothing is fetched, filtered, sorted or emitted differently; the two
+  toolbars became one row and moved, and that is the whole change.
+-->
+<template>
+  <div class="list-card">
+    <!--
+      The fold: the caller's `title` slot used to be the `v-toolbar`'s prepend,
+      i.e. a heading INSIDE the card, and its action button sat on the same
+      bar. Both are the design's page-title row, so they move up to it. Only
+      drawn when the caller actually supplies a title - a caller that passes
+      none used to get the literal fallback word "Title" on the bar, which is
+      not a heading anybody asked for.
+    -->
+    <PageHeader v-if="$slots.title">
+      <template #title>
+        <slot name="title" />
       </template>
 
-      <template v-slot:item="{ item }">
-        <tr @click="handleRowClick(item)">
-          <td v-for="col in props.headers" :key="col.value">
-            <slot :name="col.value" :item="item">
-              {{ item[col.value] }}
-            </slot>
-          </td>
-        </tr>
+      <template v-if="$slots['action-button']" #actions>
+        <slot name="action-button"></slot>
       </template>
-    </v-data-table>
-    <v-toolbar density="compact" class="px-3 border-t-sm" color="transparent">
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <span class="mr-2 text-caption text-fontgray">
-            {{ props.pageRange }}
-          </span>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <!--
+        ONE toolbar. The range keeps the exact string the caller computed and
+        the arrows keep their own disabled rules and emits; they have simply
+        stopped costing a second bar under the table.
+      -->
+      <CardToolbar :count="props.pageRange">
+        <template #right>
           <div class="arrow-navigation">
             <v-btn
               icon="mdi-chevron-left"
@@ -66,14 +57,58 @@
               @click="increment"
             />
           </div>
-        </v-row>
-      </template>
+        </template>
+      </CardToolbar>
 
-      <template v-if="$slots.extension" v-slot:extension>
+      <!--
+        `extension` used to be rendered by BOTH toolbars, i.e. the same content
+        twice, above and below the table. It is one row now, under the toolbar,
+        where `TableMain` puts a filter row.
+      -->
+      <div v-if="$slots.extension" class="table-card__extension">
         <slot name="extension"></slot>
-      </template>
-    </v-toolbar>
-  </v-card>
+      </div>
+
+      <v-data-table
+        v-model="selected"
+        :headers="props.headers"
+        :items="props.items"
+        item-value="_id"
+        items-per-page="20"
+        fixed-header
+        hide-default-footer
+        selec
+        :loading="props.loading"
+        @click:row="handleRowClick"
+        :style="`max-height:${props.height}`"
+        :class="{ 'clickable-rows': props.clickableRows }"
+      >
+        <template v-if="$slots.item" v-slot:item>
+          <slot name="item" :items="props.items"></slot>
+        </template>
+
+        <template v-slot:item="{ item }">
+          <tr @click="handleRowClick(item)">
+            <td v-for="col in props.headers" :key="col.value">
+              <slot :name="col.value" :item="item">
+                {{ item[col.value] }}
+              </slot>
+            </td>
+          </tr>
+        </template>
+
+        <!--
+          Forwarded so a caller can say "this is not empty, the request
+          failed". Without it every 500 rendered as the table's neutral
+          "No data available". Vuetify's own default is unchanged when the
+          caller passes nothing.
+        -->
+        <template v-if="$slots['no-data']" #no-data>
+          <slot name="no-data" />
+        </template>
+      </v-data-table>
+    </AppCard>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -159,6 +194,22 @@ watch(selectAll, (curr) => {
 }
 
 .clickable-rows tbody tr:hover {
-  background-color: #f5f5f5;
+  background-color: var(--hover);
+}
+
+/*
+  Every caller wraps its title in `<span class="text-h6 font-weight-regular">`,
+  because the old toolbar drew no type of its own. Vuetify's typography classes
+  are `!important`, so that span would keep 20px/400 inside the design's
+  22px/800 heading and the fold would look like it had not happened. The
+  heading owns the type now; the caller's span is left to carry whatever else
+  it says. Confined to this card's own page head, so no other `PageHeader` is
+  touched - and no app repo has to be edited for the title to land.
+*/
+.list-card :deep(.app-page-head__title) * {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+  letter-spacing: inherit !important;
 }
 </style>