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

package/components/OnlineFormsConfiguration.vue

@@ -1,73 +1,63 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters style="gap: 8px">
-        <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="setOnlineForm()"
-          v-if="canCreate && canCreateOnlineFormConfiguration"
-        >
-          Add Online Form
-        </v-btn>
-      </v-row>
+    <v-col cols="12">
+      <!--
+        The screen's name and its one primary action on the same line, which is
+        how the design opens every screen. "Configuration" is the app's own nav
+        label (Online Forms > Configuration), not invented copy. The page that
+        mounts this is a bare mount with no heading of its own.
+      -->
+      <PageHeader title="Configuration">
+        <template #actions>
+          <AppButton
+            v-if="canCreate && canCreateOnlineFormConfiguration"
+            @click="setOnlineForm()"
+          >
+            Add Online Form
+          </AppButton>
+        </template>
+      </PageHeader>
     </v-col>
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <!-- The design's 32px icon button, the same one every other
+                 converted table toolbar uses, instead of Vuetify's tinted
+                 fab. -->
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
               @click="getOnlineFormConfigurations"
-            >
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
-              :color="sortAlpha ? 'primary' : undefined"
+            />
+            <AppButton
+              variant="icon"
+              icon="mdi-sort-alphabetical-ascending"
+              class="online-forms-config__sort"
+              :class="{ 'online-forms-config__sort--on': sortAlpha }"
               :title="sortAlpha ? 'Sorted A–Z' : 'Sort A–Z'"
               @click="sortAlpha = !sortAlpha"
-            >
-              <v-icon>mdi-sort-alphabetical-ascending</v-icon>
-            </v-btn>
-            <v-text-field
+            />
+            <AppField
               v-model="search"
-              density="compact"
-              variant="outlined"
+              search
+              compact
               placeholder="Search..."
-              prepend-inner-icon="mdi-magnify"
-              clearable
-              hide-details
-              style="width: 220px; margin-left: 12px;"
+              klass="online-forms-config__search"
             />
           </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="page"
-                :length="pages"
-                @update:value="getOnlineFormConfigurations"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="getOnlineFormConfigurations"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
         <v-data-table
+          :loading="loading"
           :headers="headers"
           :items="sortedItems"
           item-value="_id"
@@ -84,11 +74,11 @@
             {{ item.status ? item.status.charAt(0).toUpperCase() + item.status.slice(1) : "N/A" }}
           </template></v-data-table
         >
-      </v-card></v-col
+      </AppCard></v-col
     >
 
     <!-- Create Dialog -->
-    <v-dialog v-model="createDialog" width="450" persistent>
+    <v-dialog v-model="createDialog" width="720" persistent>
       <OnlineFormConfigurationForm
         mode="add"
         @cancel="createDialog = false"
@@ -97,7 +87,7 @@
     </v-dialog>
 
     <!-- Edit Dialog -->
-    <v-dialog v-model="editDialog" width="450" persistent>
+    <v-dialog v-model="editDialog" width="720" persistent>
       <OnlineFormConfigurationForm
         mode="edit"
         @cancel="editDialog = false"
@@ -113,16 +103,20 @@
         :definition="selectedFormDefinition"
         :site-id="siteId"
         :org-id="orgId"
+        :payment-amount="selectedPaymentAmount"
         readonly
         @cancel="previewDialog = false"
       >
         <template #title-actions>
+          <!-- `color="white"` was correct only while the fill's title bar was a
+               hardcoded dark slab. The bar now paints from `--card`, so the
+               pencil takes the card's own ink; `error` is a theme colour and
+               follows both themes. -->
           <v-btn
             v-if="canUpdate && canUpdateOnlineFormConfiguration"
             icon
             size="small"
             variant="text"
-            color="white"
             @click="openEditDialog()"
           >
             <v-icon>mdi-pencil</v-icon>
@@ -141,34 +135,38 @@
       </OnlineFormFill>
 
       <!-- Fallback: no block definition found for this form type -->
-      <v-card v-else width="100%">
-        <v-card-text class="text-center pa-10">
-          <v-icon size="48" class="mb-3 text-medium-emphasis">mdi-file-question-outline</v-icon>
-          <div class="text-body-2 text-medium-emphasis">
-            No preview available for "{{ selectedFormType }}".
-          </div>
-        </v-card-text>
-        <v-toolbar density="compact">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="previewDialog = false">
+      <v-card v-else class="screen-modal" width="100%">
+        <!-- The design's empty block, the same one every other "nothing to
+             show here" surface in the layer draws. -->
+        <div class="screen-empty">
+          <v-icon size="48">mdi-file-question-outline</v-icon>
+          <div>No preview available for "{{ selectedFormType }}".</div>
+        </div>
+        <div class="screen-modal__footer">
+          <v-btn variant="outlined" class="screen-btn-ghost" @click="previewDialog = false">
             Close
           </v-btn>
-        </v-toolbar>
+        </div>
       </v-card>
     </v-dialog>
 
     <!-- Delete Dialog -->
+    <!-- 520px is the handoff's `--modal-w`. The two `v-toolbar`s this drew for
+         its title row and its footer were Vuetify `surface` slabs - a visible
+         grey bar on the dark card; a `v-card-title` and the shared
+         `.screen-modal__footer` are the same rows on the card's own surface.
+         The confirming button was a hardcoded `color="black"` fill, the same
+         black on both themes. -->
     <v-dialog
       v-model="confirmDialog"
       :loading="deleteLoading"
-      width="450"
+      width="520"
       persistent
     >
-      <v-card width="100%">
-        <v-toolbar density="compact" class="pl-4">
-          <span class="font-weight-medium text-h5">Delete Online Form</span>
-        </v-toolbar>
-        <v-card-text>
-          <p class="text-subtitle-2 text-center">
+      <v-card class="screen-modal" width="100%">
+        <v-card-title>Delete Online Form</v-card-title>
+        <v-card-text class="screen-modal__body">
+          <p class="text-center">
             Are you sure you want to delete this online form? This action cannot
             be undone.
           </p>
@@ -179,38 +177,25 @@
             </span>
           </v-row>
         </v-card-text>
-        <v-toolbar density="compact">
-          <v-row no-gutters>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                variant="text"
-                class="text-none"
-                @click="confirmDialog = false"
-                :disabled="deleteLoading"
-              >
-                Close
-              </v-btn>
-            </v-col>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                color="black"
-                variant="flat"
-                class="text-none"
-                :loading="deleteLoading"
-                :disabled="deleteLoading"
-                @click="handleDeleteOnlineFormConfiguration()"
-              >
-                Delete Online Form
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-toolbar>
+        <div class="screen-modal__footer">
+          <v-btn
+            variant="outlined"
+            class="screen-btn-ghost"
+            :disabled="deleteLoading"
+            @click="confirmDialog = false"
+          >
+            Close
+          </v-btn>
+          <v-btn
+            variant="flat"
+            class="screen-btn-primary"
+            :loading="deleteLoading"
+            :disabled="deleteLoading"
+            @click="handleDeleteOnlineFormConfiguration()"
+          >
+            Delete Online Form
+          </v-btn>
+        </div>
       </v-card>
     </v-dialog>
 
@@ -336,6 +321,9 @@ const selectedFormDefinition = ref<any>(null);
 const deleteLoading = ref(false);
 const confirmDialog = ref(false);
 const selectedOnlineFormId = ref<string | null>(null);
+const selectedPaymentAmount = computed(() =>
+  Number(selectedOnlineForm.value?.fields?.paymentAmount ?? 0)
+);
 
 function parseFieldsToInputs(fields: Record<string, string>): any[] {
   return Object.keys(fields)
@@ -431,3 +419,19 @@ function successUpdate() {
 }
 
 </script>
+
+<style scoped>
+/* Same 240px cap the other in-toolbar search fields use, so the field does not
+   eat the toolbar's whole left side. */
+.online-forms-config__search {
+  max-width: 240px;
+}
+
+/* The sort toggle is the only control on this toolbar with an on/off state.
+   `--accent-strong` is the design's own accent; the icon button has no
+   "selected" variant, so the state is one declaration rather than a variant
+   nothing else would use. */
+.online-forms-config__sort--on {
+  color: var(--accent-strong);
+}
+</style>

package/components/OrgViewDialog.vue

@@ -1,24 +1,28 @@
 <template>
+  <!-- 760px is kept: the handoff draws exactly one modal and it is the 520px
+       Create Role form, so a multi-section detail dialog is a case it is
+       silent on, and narrowing this one would wrap fifteen label/value rows
+       rather than follow anything. What changes is the chrome. -->
   <v-dialog v-model="model" max-width="760" scrollable>
-    <v-card rounded="lg">
-      <v-toolbar density="compact" color="grey-lighten-4">
-        <v-toolbar-title class="text-subtitle-1 font-weight-bold">
-          View Organization Information
-        </v-toolbar-title>
-      </v-toolbar>
+    <v-card class="screen-modal">
+      <!-- Was a `v-toolbar color="grey-lighten-4"` - a literal light grey that
+           stays light grey on the dark theme, i.e. a white bar across the top
+           of a dark card. A `v-card-title` is the same row on the card's own
+           surface. -->
+      <v-card-title>View Organization Information</v-card-title>
 
-      <v-card-text class="py-4">
+      <v-card-text class="screen-modal__body py-4">
         <template v-for="section in sections" :key="section.title">
-          <div class="text-subtitle-2 font-weight-bold mb-2">
+          <div class="screen-card-title mb-2">
             {{ section.title }}
           </div>
           <div
             v-for="row in section.rows"
             :key="row.label"
-            class="d-flex justify-space-between py-1"
+            class="d-flex justify-space-between py-1 org-view__row"
           >
-            <span class="text-body-2 text-medium-emphasis">{{ row.label }}</span>
-            <span class="text-body-2 font-weight-medium text-right">
+            <span class="screen-hint">{{ row.label }}</span>
+            <span class="text-right org-view__value">
               {{ row.value || "--" }}
             </span>
           </div>
@@ -26,13 +30,13 @@
         </template>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="justify-center py-3">
-        <v-btn variant="text" class="text-none" @click="model = false">
+      <!-- The design's bordered footer strip. `v-divider` plus a padded
+           actions row was the same thing drawn by hand. -->
+      <div class="screen-modal__footer">
+        <v-btn variant="outlined" class="screen-btn-ghost" @click="model = false">
           Close
         </v-btn>
-      </v-card-actions>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -116,3 +120,17 @@ const sections = computed(() => {
   ];
 });
 </script>
+
+<style scoped>
+/* The handoff names no type for a label/value detail row, so both take the
+   established cell type: the label on `--muted` (it was `text-medium-emphasis`,
+   Vuetify's own 60%-alpha ink) and the value on the cell weight. */
+.org-view__row {
+  font-size: var(--fs-cell);
+}
+
+.org-view__value {
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+</style>

package/components/OvernightParkingAvailability.vue

@@ -35,8 +35,7 @@
             />
           </span>
         </v-row>
-        <v-card class="mt-2">
-          <v-card-text>
+        <AppCard class="mt-2 pa-4">
             <template
               v-for="(slot, index) in overnightParkingSlotsArray"
               :key="slot.day"
@@ -44,9 +43,12 @@
               <v-row no-gutters class="mb-4">
                 <v-col
                   cols="12"
-                  class="text-capitalize mb-2 text-subtitle-1 d-flex align-center justify-space-between"
+                  class="text-capitalize mb-2 d-flex align-center justify-space-between"
                 >
-                  <span class="font-weight-black">{{ slot.day }}</span>
+                  <span class="screen-card-title">{{ slot.day }}</span>
+                  <!-- `black-lighten-1` is a literal black: on the dark theme
+                       the off state was a black tick on a #1c1e24 card. Both
+                       states take a token now. -->
                   <v-icon
                     :icon="
                       slot?.isEnabled
@@ -54,10 +56,10 @@
                         : 'mdi-check-circle-outline'
                     "
                     size="20"
-                    :class="{ 'cursor-pointer': !viewMode }"
-                    :color="
-                      slot.isEnabled ? 'green-darken-2' : 'black-lighten-1'
-                    "
+                    :class="[
+                      { 'cursor-pointer': !viewMode },
+                      slot.isEnabled ? 'day-tick--on' : 'day-tick--off',
+                    ]"
                     @click="!viewMode && toggleEnabled(slot.day)"
                   />
                 </v-col>
@@ -91,7 +93,7 @@
 
                 <v-col v-if="!viewMode" cols="12" class="mt-1">
                   <div
-                    class="d-flex align-center ga-1 cursor-pointer text-caption text-medium-emphasis"
+                    class="d-flex align-center ga-1 cursor-pointer screen-hint apply-link"
                     @click="applyToOtherDays(slot.day)"
                   >
                     <v-icon icon="mdi-content-copy" size="14" />
@@ -107,10 +109,10 @@
             </template>
 
             <v-col cols="12" align="end">
+              <!-- Stays a `v-btn`: `:loading` is the only in-flight signal on
+                   this form and AppButton has none. Tokenised instead. -->
               <v-btn
-                color="primary"
-                class="text-none mt-2"
-                size="large"
+                class="screen-btn-primary mt-2"
                 :loading="loading.updating"
                 variant="flat"
                 text="Save"
@@ -118,8 +120,7 @@
                 @click="handleSave('save')"
               />
             </v-col>
-          </v-card-text>
-        </v-card>
+        </AppCard>
       </v-col>
     </v-row>
   </v-form>
@@ -132,12 +133,10 @@
   />
 
   <v-dialog v-model="applyDialog.open" max-width="360" persistent>
-    <v-card>
-      <v-card-title class="text-subtitle-1 font-weight-bold pt-4 px-4"
-        >Apply to days</v-card-title
-      >
-      <v-card-text class="px-4 pb-2">
-        <p class="text-caption text-medium-emphasis mb-3">
+    <v-card class="screen-modal">
+      <v-card-title class="pt-4 px-4">Apply to days</v-card-title>
+      <v-card-text class="screen-modal__body px-4 pb-2">
+        <p class="screen-hint apply-link mb-3">
           Select the days to apply
           <span class="font-weight-bold text-capitalize">{{
             applyDialog.sourceDay
@@ -154,21 +153,45 @@
           class="text-capitalize"
         />
       </v-card-text>
-      <v-card-actions class="px-4 pb-4">
+      <!-- `ga-2`: v-card-actions only spaces `.v-btn` children, and these are
+           the design's own buttons - without it Cancel and Apply touch. -->
+      <v-card-actions class="px-4 pb-4 ga-2">
         <v-spacer />
-        <v-btn variant="text" @click="applyDialog.open = false">Cancel</v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
+        <AppButton variant="ghost" @click="applyDialog.open = false">
+          Cancel
+        </AppButton>
+        <AppButton
           :disabled="!applyDialog.targetDays.some((d) => d.selected)"
           @click="confirmApply"
-          >Apply</v-btn
         >
+          Apply
+        </AppButton>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
+<style scoped>
+/* The prototype names no colour for a per-day enable tick, so it takes the
+   design's own success / muted semantics rather than two literal Vuetify
+   greys - the off state was `black-lighten-1`, which stayed black on the dark
+   theme's card. */
+.day-tick--on {
+  /* `--ok`, not `--success`: the token is named for the design's tone, and an
+     undefined custom property makes the whole declaration invalid, so the tick
+     silently inherited `--text` instead. */
+  color: var(--ok);
+}
+
+.day-tick--off {
+  color: var(--muted);
+}
+
+.apply-link {
+  font-size: var(--fs-breadcrumb);
+}
+</style>
+
 <script setup lang="ts">
 const props = defineProps({
   viewMode: {