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

package/components/QrTemplate/PrintDialog.vue

@@ -5,7 +5,11 @@
     fullscreen
   >
     <v-card>
-      <v-toolbar style="background-color: white">
+      <!-- The inline `background-color: white` painted this bar white in BOTH
+           themes - a white slab across the top of the dialog on the dark one.
+           Removed, so Vuetify paints it from the theme's `surface` as every
+           other converted bar in the estate does. -->
+      <v-toolbar>
         <v-btn icon="mdi-arrow-left" @click="closeDialog"></v-btn>
 
         <v-toolbar-title>Pass & Keys</v-toolbar-title>
@@ -14,7 +18,7 @@
       </v-toolbar>
       <v-row no-gutters class="pa-15">
         <v-col cols="12">
-          <v-card class="pa-6">
+          <AppCard class="pa-6">
             <v-row no-gutters>
               <v-col
                 cols="12"
@@ -67,7 +71,9 @@
                 >
                   <template v-slot:label>
                     Select template
-                    <span class="text-red font-weight-bold">*</span>
+                    <!-- `text-red` is Vuetify's own palette red, a literal that
+                         ignores the theme. `text-error` is the design's. -->
+                    <span class="text-error font-weight-bold">*</span>
                   </template>
                   <!-- <template v-slot:append-item>
                     <div v-intersect="endIntersectTemplateList" />
@@ -112,7 +118,7 @@
                       @click="selectedChoicePaperSizeOrientation = 'A4'"
                       :color="
                         selectedChoicePaperSizeOrientation === 'A4'
-                          ? 'green'
+                          ? 'success'
                           : ''
                       "
                     >
@@ -156,7 +162,7 @@
                       @click="selectedChoicePaperSizeOrientation = 'CCP'"
                       :color="
                         selectedChoicePaperSizeOrientation === 'CCP'
-                          ? 'green'
+                          ? 'success'
                           : ''
                       "
                     >
@@ -199,7 +205,7 @@
                       @click="selectedChoicePaperSizeOrientation = 'CCL'"
                       :color="
                         selectedChoicePaperSizeOrientation === 'CCL'
-                          ? 'green'
+                          ? 'success'
                           : ''
                       "
                     >
@@ -310,7 +316,7 @@
                   <template v-slot:loader="{ isActive }">
                     <v-progress-linear
                       :active="isActive"
-                      color="deep-purple"
+                      color="primary-button"
                       height="4"
                       indeterminate
                     ></v-progress-linear>
@@ -436,7 +442,7 @@
                                       cols="12"
                                       sm="7"
                                       md="1"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -483,7 +489,7 @@
                                       cols="12"
                                       sm="7"
                                       md="3"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -524,7 +530,7 @@
                                       cols="12"
                                       sm="7"
                                       md="1"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -569,7 +575,7 @@
                                       cols="12"
                                       sm="7"
                                       md="4"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -610,7 +616,7 @@
                                       cols="12"
                                       sm="7"
                                       md="2"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -728,16 +734,15 @@
 
             <v-row no-gutters class="pt-2">
               <v-col cols="12" class="d-flex justify-end">
-                <v-btn
-                  color="primary"
-                  @click="printContent"
-                  :disabled="isPrintDisabled"
-                >
+                <!-- `color="primary"` on a v-btn asked Vuetify to FILL with the
+                     foreground token. The design's filled action is AppButton,
+                     which paints from `primary-button`. -->
+                <AppButton @click="printContent" :disabled="isPrintDisabled">
                   Print
-                </v-btn>
+                </AppButton>
               </v-col>
             </v-row>
-          </v-card>
+          </AppCard>
         </v-col>
       </v-row>
     </v-card>
@@ -746,7 +751,8 @@
   <!-- start range dialog -->
   <v-snackbar
     v-model="snackbarStartRange"
-    color="red"
+    class="app-toast"
+    color="error"
     :timeout="5000"
     multi-line
   >
@@ -761,8 +767,11 @@
       generate
     </v-btn>
     <template v-slot:actions>
+      <!-- Was `color="white"`. The dark theme's `error` fill is a LIGHT colour
+           carrying dark ink (`on-error`), so a hardcoded white cross measured
+           ~2:1 on it. Dropping the colour lets the button inherit `on-error`
+           and read correctly in both themes. -->
       <v-btn
-        color="white"
         variant="text"
         @click="snackbarStartRange = false"
         icon="mdi-close"
@@ -806,6 +815,10 @@ const props = defineProps<{
   start: any;
 }>();
 
+// 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 { pickRouteName } from "../../utils/route-name";
+
 const route = useRoute();
 const router = useRouter();
 const emit = defineEmits(["update:close"]);
@@ -981,12 +994,25 @@ const closeDialog = async (type?: string, tabType?: string) => {
       dialogType.value = "generate";
       generatePass.value = true;
     } else {
-      router.push({
-        name: "keys-visitor-pass-add",
-        query: {
-          site: route.params.site as string,
-        },
-      });
+      // Two faults here. The name is only correct in an app whose keys pages
+      // sit at the root - every consumer that renders this dialog nests them
+      // under [org]/[site], so `router.push` threw on an unknown name and the
+      // dialog's Generate action died. And `org` / `site` are PATH params on
+      // the destination, so sending `site` as a query left both unfilled.
+      const passAdd = pickRouteName(
+        router,
+        "org-site-keys-visitor-pass-add",
+        "keys-visitor-pass-add"
+      );
+      if (passAdd) {
+        router.push({
+          name: passAdd,
+          params: {
+            org: route.params.org as string,
+            site: route.params.site as string,
+          },
+        });
+      }
     }
     resetPrintState();
     snackbarStartRange.value = false;
@@ -1226,23 +1252,20 @@ async function nextPage() {
 </script>
 
 <style scoped>
-.custom-placeholer-color input::placeholder {
-  color: red !important;
-  opacity: 1;
-}
-
-.custom-label-color .v-label {
-  color: red;
-  opacity: 1;
-}
-
-.custom-placeholer-color input,
-.custom-label-color input {
-  color: red !important;
-}
-
+/*
+  `.custom-placeholer-color` and `.custom-label-color` were declared here and
+  applied to NOTHING - neither class appears anywhere in the template. Deleted
+  rather than left as three blocks of red-text styling waiting to be pasted
+  onto a field by mistake.
+
+  `.placeHolderDarken` IS applied (the three paper-size fields). Its
+  `color: primary` was not a colour - `primary` is a Vuetify theme NAME, not a
+  CSS keyword, so the browser dropped that one declaration as invalid and the
+  placeholder has never been darkened. The `opacity: 1` beside it did apply.
+  Now points at the design's muted ink, which is what "darken" meant.
+*/
 .placeHolderDarken ::placeholder {
-  color: primary !important;
+  color: var(--muted) !important;
   opacity: 1;
 }
 </style>

package/components/RolePermissionFormCreate.vue

@@ -1,16 +1,11 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5">Create Role</span>
-        <v-spacer />
-        <v-btn icon density="comfortable" @click="cancel">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text style="max-height: 75vh; overflow-y: auto">
+  <v-card width="100%" class="screen-modal role-create">
+    <div class="role-create__head">
+      <v-card-title>Create Role</v-card-title>
+      <AppButton variant="icon" icon="mdi-close" aria-label="Close" @click="cancel" />
+    </div>
+
+    <div class="screen-modal__body role-create__body filter-field">
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-2">
@@ -42,31 +37,30 @@
           </v-col>
 
           <v-col cols="12" class="mt-3">
-            <div class="d-flex align-center ga-4 text-caption">
+            <div class="role-create__legend">
               <span class="d-flex align-center ga-2">
-                <v-icon color="amber-darken-2" size="14">mdi-circle</v-icon>
+                <v-icon class="role-create__dot--both" size="14">mdi-circle</v-icon>
                 Web and Mobile
               </span>
               <span class="d-flex align-center ga-2">
-                <v-icon color="blue-darken-2" size="14">mdi-circle</v-icon>
+                <v-icon class="role-create__dot--web" size="14">mdi-circle</v-icon>
                 Web only
               </span>
             </div>
           </v-col>
 
           <v-col cols="12" class="mt-2">
-            <v-btn
-              size="small"
-              variant="tonal"
-              class="text-none mb-2"
+            <AppButton
+              variant="ghost"
+              class="mb-2"
               @click="() => toggleSelectAll(!isAllSelected)"
             >
               {{ isAllSelected ? "Unselect All" : "Select All" }}
-            </v-btn>
+            </AppButton>
           </v-col>
 
           <v-col cols="12" class="mt-3">
-            <v-card variant="outlined" border="thin" rounded="lg">
+            <div class="role-create__list">
               <template
                 v-for="(actions, resourceKey, resourceIndex) in safePermissions"
                 :key="resourceKey"
@@ -76,19 +70,15 @@
                 <!-- Category row -->
                 <v-list-item density="compact" :ripple="false">
                   <template #prepend>
-                    <v-chip
+                    <StatusChip
                       class="mr-3"
-                      size="small"
-                      label
-                      :color="resourceColor(String(resourceKey))"
-                    >
-                      {{ selectedActionCount(String(resourceKey)) }}
-                    </v-chip>
+                      :dot="false"
+                      :tone="isWebOnly(String(resourceKey)) ? 'info' : 'warn'"
+                      :label="String(selectedActionCount(String(resourceKey)))"
+                    />
                   </template>
                   <v-list-item-title>
-                    <span
-                      class="text-capitalize text-subtitle-2 font-weight-medium"
-                    >
+                    <span class="text-capitalize role-create__row-title">
                       {{ formatResourceLabel(String(resourceKey)) }}
                     </span>
                   </v-list-item-title>
@@ -98,10 +88,9 @@
                       @update:model-value="
                         toggleCategory(String(resourceKey), $event)
                       "
-                      color="green"
+                      class="app-switch"
                       density="compact"
                       hide-details
-                      inset
                     />
                   </template>
                 </v-list-item>
@@ -128,72 +117,41 @@
                               $event
                             )
                           "
-                          color="primary"
+                          color="accent"
                           density="compact"
                           class="mr-2"
                         />
                       </template>
                       <v-list-item-title
-                        class="text-subtitle-2 font-weight-medium text-capitalize"
+                        class="text-capitalize role-create__row-title"
                       >
                         {{ String(actionKey).replace(/-/g, " ") }}
                       </v-list-item-title>
-                      <v-list-item-subtitle class="text-caption">
+                      <v-list-item-subtitle class="role-create__row-sub">
                         {{ action.description }}
                       </v-list-item-subtitle>
                     </v-list-item>
                   </template>
                 </template>
               </template>
-            </v-card>
+            </div>
           </v-col>
 
           <v-col cols="12" class="my-2">
             <v-row no-gutters>
               <v-col cols="12" class="text-center">
-                <span
-                  class="text-none text-subtitle-2 font-weight-medium text-error"
-                >
-                  {{ message }}
-                </span>
+                <span class="role-create__error">{{ message }}</span>
               </v-col>
             </v-row>
           </v-col>
         </v-row>
       </v-form>
-    </v-card-text>
-
-    <v-toolbar class="pa-0" density="compact">
-      <v-row no-gutters>
-        <v-col cols="6" class="pa-0">
-          <v-btn
-            block
-            variant="text"
-            class="text-none"
-            size="large"
-            height="48"
-            @click="cancel"
-          >
-            {{ props.cancelText }}
-          </v-btn>
-        </v-col>
-
-        <v-col cols="6" class="pa-0">
-          <v-btn
-            block
-            variant="flat"
-            color="black"
-            class="text-none font-weight-bold rounded-0"
-            height="48"
-            :disabled="!validForm"
-            :loading="disable"
-            @click="submit"
-          >
-            Submit
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    </div>
+
+    <div class="role-create__footer">
+      <AppButton variant="ghost" @click="cancel">{{ props.cancelText }}</AppButton>
+      <AppButton :disabled="!validForm || disable" @click="submit">Submit</AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -259,10 +217,8 @@ function formatResourceLabel(key: string): string {
   return props.webOnlyResources.includes(key) ? `${label} (Web Only)` : label;
 }
 
-function resourceColor(resource: string) {
-  return props.webOnlyResources.includes(resource)
-    ? "blue-darken-2"
-    : "amber-darken-2";
+function isWebOnly(resource: string) {
+  return props.webOnlyResources.includes(resource);
 }
 
 function isCategoryEnabled(resource: string) {
@@ -406,3 +362,72 @@ const isAllSelected = computed(() => {
   );
 });
 </script>
+
+<style scoped>
+.role-create__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.role-create__body {
+  padding: 0 20px;
+  max-height: calc(100vh - 160px);
+}
+
+.role-create__legend {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
+/* Were `amber-darken-2` / `blue-darken-2` - fixed Vuetify hues that do not
+   follow the theme, and the same two the count chip used. Design tones now,
+   and the dot and the chip read the same `isWebOnly`, so they cannot drift. */
+.role-create__dot--both {
+  color: var(--warn);
+}
+
+.role-create__dot--web {
+  color: var(--info);
+}
+
+/* Was a `variant="outlined"` v-card inside the card - a card on a card. It is
+   the list frame, so it takes the design's border and radius and no second
+   surface. */
+.role-create__list {
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  overflow: hidden;
+}
+
+.role-create__row-title {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+
+.role-create__row-sub {
+  font-size: var(--fs-breadcrumb) !important;
+  color: var(--text2);
+}
+
+.role-create__error {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--err);
+}
+
+/* The design's dialog footer. Deliberately not the shared
+   `.screen-modal__footer` - that class is on the batch-D branch (#1150), not
+   on this base, and a second copy in `screens.css` would collide with it. */
+.role-create__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>