@7365admin1/layer-common 3.2.2-staging.116 → 3.2.2-staging.120

package/components/VehicleAddSelection.vue

@@ -1,36 +1,24 @@
 <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 text-capitalize">
-          Add Vehicle
-        </span>
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
-      <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Status</span>
-      <template v-for="item in selection" :key="item.value">
-        <v-btn color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
-      </template>
-    </v-card-text>
-
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="12">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="cancel"
-          >
-            Cancel
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal vehicle-add">
+    <v-card-title>Add Vehicle</v-card-title>
+
+    <div class="screen-modal__body vehicle-add__body">
+      <p class="vehicle-add__hint">Please Select Status</p>
+      <AppButton
+        v-for="item in selection"
+        :key="item.value"
+        class="vehicle-add__option"
+        @click="select(item.value)"
+      >
+        {{ item.label }}
+      </AppButton>
+    </div>
+
+    <div class="vehicle-add__footer">
+      <AppButton variant="ghost" class="vehicle-add__cancel" @click="cancel">
+        Cancel
+      </AppButton>
+    </div>
   </v-card>
 </template>
 
@@ -56,3 +44,31 @@ function select(value: TVehicleType | 'seasonpass') {
   emit("select", value);
 }
 </script>
+
+<style scoped>
+/* The three choices are full-width by the screen's own design, so the only
+   thing said here is the width and the stack - the button itself is AppButton. */
+.vehicle-add__body {
+  padding: 20px;
+}
+
+.vehicle-add__hint {
+  margin: 0 0 14px;
+  text-align: center;
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+
+.vehicle-add__option {
+  display: flex;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.vehicle-add__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 20px 20px;
+}
+</style>

package/components/VehicleForm.vue

@@ -1,24 +1,19 @@
 <template>
-  <v-card width="100%" :loading="processing">
-    <v-toolbar>
-      <v-row
-        no-gutters
-        class="fill-height px-6 d-flex ga-2 justify-space-between"
-        align="center"
-      >
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} Vehicle <span>({{ formatVehicleType(type) }})</span>
-        </span>
-        <span>
-          <ButtonClose @click="emit('close:all')" icon-only />
-        </span>
-      </v-row>
-    </v-toolbar>
-
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
-      <span class="text-subtitle-1 w-100 font-weight-bold mb-3"
-        >General Information</span
-      >
+  <v-card width="100%" class="screen-modal vehicle-form" :loading="processing">
+    <div class="vehicle-form__head">
+      <v-card-title class="text-capitalize">
+        {{ prop.mode }} Vehicle ({{ formatVehicleType(type) }})
+      </v-card-title>
+      <AppButton
+        variant="icon"
+        icon="mdi-close"
+        aria-label="Close"
+        @click="emit('close:all')"
+      />
+    </div>
+
+    <div class="screen-modal__body vehicle-form__body filter-field">
+      <span class="vehicle-form__section">General Information</span>
       <v-form
         ref="formRef"
         v-model="validForm"
@@ -209,24 +204,20 @@
                     :cols="newPlateNumbers.length > 1 ? '1' : '0'"
                     class="d-flex align-start"
                   >
-                    <v-btn
-                      icon="mdi-delete-outline"
-                      variant="text"
-                      color="error"
+                    <AppButton
                       v-if="newPlateNumbers.length > 1"
+                      variant="icon"
+                      icon="mdi-delete-outline"
+                      class="vehicle-form__remove"
+                      :aria-label="`Remove plate ${index + 1}`"
                       @click="removePlate(index)"
                     />
                   </v-col>
                 </v-row>
 
-                <v-btn
-                  prepend-icon="mdi-plus"
-                  variant="outlined"
-                  class="text-none"
-                  @click="addPlate"
-                >
+                <AppButton variant="ghost" icon="mdi-plus" @click="addPlate">
                   Add Plate
-                </v-btn>
+                </AppButton>
               </template>
             </template>
 
@@ -300,21 +291,19 @@
 
             <v-col cols="12" :class="[showSubscriptionDateOptions && 'mt-5']">
               <v-row justify="center">
-                <v-col cols="6">
-                  <v-btn
-                    block
-                    color="primary"
-                    variant="text"
-                    class="text-none font-weight-bold"
-                    :text="
-                      showSubscriptionDateOptions
-                        ? 'Hide Subscription Options'
-                        : 'Show Subscription Options'
-                    "
+                <v-col cols="6" class="d-flex justify-center">
+                  <AppButton
+                    variant="ghost"
                     @click="
                       showSubscriptionDateOptions = !showSubscriptionDateOptions
                     "
-                  ></v-btn>
+                  >
+                    {{
+                      showSubscriptionDateOptions
+                        ? "Hide Subscription Options"
+                        : "Show Subscription Options"
+                    }}
+                  </AppButton>
                 </v-col>
               </v-row>
             </v-col>
@@ -323,82 +312,41 @@
           <v-col cols="12">
             <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="vehicle-form__error">{{ message }}</span>
               </v-col>
             </v-row>
           </v-col>
         </v-row>
       </v-form>
-    </v-card-text>
-    <v-row no-gutters class="w-100" v-if="errorMessage">
-      <p class="text-error w-100 text-center text-subtitle-2">
-        {{ errorMessage }}
-      </p>
-    </v-row>
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn
-            v-if="prop.mode === 'add'"
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="back"
-            text="Back to Selection"
-          />
-          <v-btn
-            v-else
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="close"
-            text="Close"
-          />
-        </v-col>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :disabled="!validForm || processing"
-            @click="submit"
-            :text="prop.mode == 'add' ? 'Submit' : 'Update'"
-          />
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    </div>
+    <p v-if="errorMessage" class="vehicle-form__error vehicle-form__error--block">
+      {{ errorMessage }}
+    </p>
+    <div class="vehicle-form__footer">
+      <AppButton v-if="prop.mode === 'add'" variant="ghost" @click="back">
+        Back to Selection
+      </AppButton>
+      <AppButton v-else variant="ghost" @click="close">Close</AppButton>
+      <AppButton :disabled="!validForm || processing" @click="submit">
+        {{ prop.mode == "add" ? "Submit" : "Update" }}
+      </AppButton>
+    </div>
 
     <v-dialog v-model="showMatchingPeopleDialog" max-width="700" persistent>
-      <v-card :loading="checkingUnit">
-        <v-toolbar>
-          <v-toolbar-title>
-            <v-row no-gutters class="d-flex align-center justify-space-between">
-              <span class="font-weight-bold">
-                Matching Records for "{{ searchUnitName ?? "-" }}"
-              </span>
-              <span>
-                <v-btn
-                  icon="mdi-close"
-                  variant="text"
-                  @click="handleCloseMatchDialog"
-                />
-              </span>
-            </v-row>
-          </v-toolbar-title>
-        </v-toolbar>
+      <v-card class="screen-modal vehicle-match" :loading="checkingUnit">
+        <div class="vehicle-form__head">
+          <v-card-title>
+            Matching Records for "{{ searchUnitName ?? "-" }}"
+          </v-card-title>
+          <AppButton
+            variant="icon"
+            icon="mdi-close"
+            aria-label="Close"
+            @click="handleCloseMatchDialog"
+          />
+        </div>
 
-        <v-card-text max-height="400" style="overflow-y: auto">
+        <div class="screen-modal__body vehicle-match__body">
           <v-list lines="three">
             <v-list-item
               v-if="matchingPeople.length > 0 || checkingUnit"
@@ -414,24 +362,19 @@
                 NRIC: {{ v.nric || "-" }}
               </v-list-item-subtitle>
 
-              <div class="mt-1">
-                <v-chip
+              <div class="mt-1 d-flex flex-wrap ga-1">
+                <StatusChip
                   v-for="p in v.plates"
                   :key="p?.plateNumber"
-                  size="small"
-                  class="mr-1"
+                  tone="neutral"
+                  :dot="false"
                 >
                   {{ p?.plateNumber }}
-                </v-chip>
+                </StatusChip>
               </div>
 
               <template #append>
-                <v-btn
-                  variant="flat"
-                  color="primary"
-                  @click="selectPeopleRecord(v)"
-                  >Select</v-btn
-                >
+                <AppButton @click="selectPeopleRecord(v)">Select</AppButton>
               </template>
             </v-list-item>
             <v-empty-state
@@ -441,16 +384,13 @@
               subtitle="The NRIC you entered does not match any existing records."
             >
               <template #actions>
-                <v-btn
-                  variant="flat"
-                  color="primary"
-                  @click="showMatchingPeopleDialog = false"
-                  >Close</v-btn
-                >
+                <AppButton @click="showMatchingPeopleDialog = false">
+                  Close
+                </AppButton>
               </template>
             </v-empty-state>
           </v-list>
-        </v-card-text>
+        </div>
       </v-card>
     </v-dialog>
   </v-card>
@@ -1123,4 +1063,47 @@ onMounted(() => {
 .class-readonly {
   pointer-events: none;
 }
+
+.vehicle-form__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.vehicle-form__body,
+.vehicle-match__body {
+  padding: 4px 20px 0;
+}
+
+.vehicle-form__section {
+  display: block;
+  margin-bottom: 4px;
+  font-size: var(--fs-cell);
+  font-weight: 800;
+  color: var(--text);
+}
+
+.vehicle-form__remove {
+  color: var(--err);
+}
+
+.vehicle-form__error {
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--err);
+}
+
+.vehicle-form__error--block {
+  width: 100%;
+  margin: 0;
+  text-align: center;
+}
+
+.vehicle-form__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
 </style>

package/components/VehicleUpdateMoreAction.vue

@@ -1,55 +1,37 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <template v-if="$slots.header">
-        <slot name="header" :title="title" :onClose="onClose" />
-      </template>
-      <template v-else>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h5 text-capitalize">{{
-            title
-            }}</span>
-        </v-row>
-      </template>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal more-action">
+    <template v-if="$slots.header">
+      <slot name="header" :title="title" :onClose="onClose" />
+    </template>
+    <v-card-title v-else class="text-capitalize">{{ title }}</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+    <div class="screen-modal__body more-action__body">
       <slot name="content" />
-    </v-card-text>
+    </div>
 
-    <v-toolbar class="pa-0" density="compact">
-      <v-row no-gutters>
-        <v-col :cols="canDelete || canUpdate ? 6 : 12" class="pa-0">
-          <v-btn block variant="text" class="text-none" size="large" @click="emit('close')" height="48">
-            Close
-          </v-btn>
-        </v-col>
+    <div class="more-action__footer">
+      <AppButton variant="ghost" @click="emit('close')">Close</AppButton>
 
-        <v-col cols="6" class="pa-0" v-if="canDelete || canUpdate">
-          <v-menu>
-            <template #activator="{ props }">
-              <v-btn block variant="flat" color="black" class="text-none" height="48" v-bind="props" tile>
-                More actions
-              </v-btn>
-            </template>
+      <v-menu v-if="canDelete || canUpdate">
+        <template #activator="{ props }">
+          <AppButton v-bind="props">More actions</AppButton>
+        </template>
 
-            <v-list class="pa-0">
-              <v-list-item v-if="canUpdate" @click="emit('edit')">
-                <v-list-item-title class="text-subtitle-2">
-                  {{ editButtonLabel }}
-                </v-list-item-title>
-              </v-list-item>
+        <v-list class="more-action__menu">
+          <v-list-item v-if="canUpdate" @click="emit('edit')">
+            <v-list-item-title class="more-action__item">
+              {{ editButtonLabel }}
+            </v-list-item-title>
+          </v-list-item>
 
-              <v-list-item v-if="canDelete" @click="emit('delete')" class="text-red">
-                <v-list-item-title class="text-subtitle-2">
-                  {{ deleteButtonLabel }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+          <v-list-item v-if="canDelete" @click="emit('delete')">
+            <v-list-item-title class="more-action__item more-action__item--danger">
+              {{ deleteButtonLabel }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </div>
   </v-card>
 </template>
 
@@ -81,4 +63,35 @@ const emit = defineEmits(["close", "edit", "delete"]);
 const { canUpdate, editButtonLabel, deleteButtonLabel, title } = prop;
 </script>
 
-<style scoped></style>
+<style scoped>
+.more-action__body {
+  padding: 4px 20px;
+}
+
+.more-action__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+
+/* The dropdown is teleported out of the card, so it needs the card's own
+   surface and rule said again rather than inheriting Vuetify's grey sheet. */
+.more-action__menu {
+  padding: 4px 0;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+}
+
+.more-action__item {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-btn);
+  color: var(--text);
+}
+
+/* The delete row was Vuetify's `text-red`; same meaning, on the token. */
+.more-action__item--danger {
+  color: var(--err);
+}
+</style>