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

package/components/VisitorDataFromScannedQRCodeForm.vue

@@ -1,24 +1,25 @@
 <template>
-  <v-card width="100%" :loading="processing">
-    <v-toolbar>
-      <v-row
-        no-gutters
-        class="fill-height px-6 d-flex justify-space-between align-center"
-        align="center"
-      >
-        <span class="font-weight-bold text-h5 text-capitalize">
-          Visitor Information
-        </span>
-        <ButtonClose @click="emit('close')" />
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
+  <v-card width="100%" class="screen-modal visitor-scan" :loading="processing">
+    <div class="visitor-scan__head">
+      <v-card-title>Visitor Information</v-card-title>
+      <AppButton
+        variant="icon"
+        icon="mdi-close"
+        aria-label="Close"
+        @click="emit('close')"
+      />
+    </div>
+    <div class="screen-modal__body visitor-scan__body">
       <div class="w-100 d-flex justify-space-between ga-2">
         <!-- <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
           <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span> -->
       </div>
       <!-- <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''"> -->
-      <v-row no-gutters class="pt-4">
+      <!-- `.filter-field` is the design's input on its own (40px, 10px radius,
+           13.5px). It is a DESCENDANT selector, so one class on the row gives
+           it to every field here - including the composed `Input/*` controls,
+           which are shared with other screens and are not edited. -->
+      <v-row no-gutters class="pt-4 filter-field">
         <v-col cols="12">
           <InputLabel class="text-capitalize" title="Full Name" />
           <v-text-field
@@ -134,22 +135,16 @@
         </v-col>
 
         <v-col v-else cols="12">
-          <v-card elevation="4" height="100%" width="100%">
-            <v-col cols="12" class="d-flex justify-center pb-0">
-              <span
-                class="text-h6 font-weight-bold d-flex text-center text-success"
-              >
-                {{
-                  visitorInfo.checkIn
-                    ? standardFormatDateTime(visitorInfo.checkIn)
-                    : "N/A"
-                }}
-              </span>
-            </v-col>
-            <v-col cols="12" class="d-flex justify-center">
-              Actual Check In
-            </v-col>
-          </v-card>
+          <AppCard class="visitor-scan__checkin">
+            <span class="visitor-scan__checkin-time">
+              {{
+                visitorInfo.checkIn
+                  ? standardFormatDateTime(visitorInfo.checkIn)
+                  : "N/A"
+              }}
+            </span>
+            <span class="visitor-scan__checkin-label">Actual Check In</span>
+          </AppCard>
         </v-col>
 
         <!-- <v-col cols="12" class="mt-4">
@@ -194,41 +189,31 @@
         </v-col> -->
       </v-row>
       <!-- </v-form> -->
-    </v-card-text>
+    </div>
 
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn text="Close" block size="48" tile @click="emit('close')" />
-        </v-col>
-        <v-col cols="6">
-          <v-btn
-            v-if="!visitorInfo.checkIn && !visitorInfo.checkOut"
-            block
-            text="Check In"
-            variant="flat"
-            color="success"
-            size="48"
-            tile
-            :disabled="processing"
-            @click="emit('check-in-out', 'checkIn', visitorInfo)"
-            :loading="processing"
-          />
-          <v-btn
-            v-if="visitorInfo.checkIn && !visitorInfo.checkOut"
-            block
-            text="Confirm Check Out"
-            variant="flat"
-            color="error"
-            size="48"
-            tile
-            :disabled="processing"
-            @click="emit('check-in-out', 'checkOut', visitorInfo)"
-            :loading="processing"
-          />
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <!--
+      Check In and Confirm Check Out are mutually exclusive - only ever one of
+      them is on the glass - so both are the screen's single primary action.
+      The handoff draws no green/red button, and inventing one only to fail
+      contrast is the trade that was already made and reverted once.
+    -->
+    <div class="visitor-scan__footer">
+      <AppButton variant="ghost" @click="emit('close')">Close</AppButton>
+      <AppButton
+        v-if="!visitorInfo.checkIn && !visitorInfo.checkOut"
+        :disabled="processing"
+        @click="emit('check-in-out', 'checkIn', visitorInfo)"
+      >
+        Check In
+      </AppButton>
+      <AppButton
+        v-if="visitorInfo.checkIn && !visitorInfo.checkOut"
+        :disabled="processing"
+        @click="emit('check-in-out', 'checkOut', visitorInfo)"
+      >
+        Confirm Check Out
+      </AppButton>
+    </div>
   </v-card>
 </template>
 <script setup lang="ts">
@@ -315,3 +300,43 @@ const location = computed({
   set: () => {}, // readonly, do nothing on set
 });
 </script>
+
+<style scoped>
+.visitor-scan__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.visitor-scan__body {
+  padding: 4px 20px 0;
+}
+
+.visitor-scan__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+
+/* The check-in stamp, on the card primitive instead of a 4dp Vuetify sheet. */
+.visitor-scan__checkin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 16px;
+}
+
+.visitor-scan__checkin-time {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--ok);
+}
+
+.visitor-scan__checkin-label {
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+</style>