@7365admin1/layer-common 4.144.0 → 4.147.0

package/components/VisitorFormSelection.vue

@@ -1,18 +1,27 @@
 <template>
   <v-card width="100%" class="screen-modal visitor-select">
-    <v-card-title class="text-capitalize">{{ mode }} Visitor</v-card-title>
+    <!-- Register (iSecure `VisitorTypeDialog`): "Register {plate} as", with
+         the plate highlighted, or "Select visitor type" without one. -->
+    <v-card-title v-if="mode === 'register'">
+      <template v-if="plate">
+        Register <span class="visitor-select__plate">{{ plate }}</span> as
+      </template>
+      <template v-else>Select visitor type</template>
+    </v-card-title>
+    <v-card-title v-else class="text-capitalize">{{ mode }} Visitor</v-card-title>
 
     <div class="screen-modal__body visitor-select__body">
-      <p class="visitor-select__hint">Please Select Visitor Type</p>
-      <template v-for="item in selection" :key="item.value">
-        <AppButton
-          v-if="showSelection(item)"
-          class="visitor-select__option"
-          @click="select(item.value)"
-        >
-          {{ item.label }}
-        </AppButton>
-      </template>
+      <p v-if="mode !== 'register'" class="visitor-select__hint">
+        Please Select Visitor Type
+      </p>
+      <AppButton
+        v-for="item in selection"
+        :key="item.value"
+        class="visitor-select__option"
+        @click="select(item.value)"
+      >
+        {{ item.label }}
+      </AppButton>
     </div>
 
     <div class="visitor-select__footer">
@@ -27,10 +36,35 @@ const prop = defineProps({
     type: String as PropType<"add" | "edit" | "register">,
     default: "add",
   },
+  /** The plate being registered (register mode), shown in the title. */
+  plateNumber: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits(['cancel', 'select']);
-const { visitorSelection: selection} = useVisitor();
+const { visitorSelection } = useVisitor();
+
+const plate = computed(() => String(prop.plateNumber ?? "").trim().toUpperCase());
+
+/*
+ * iSecure's orders. Add: Guest, Contractor, Delivery, Walk-In, Pick-Up,
+ * Drop-Off (`VISITOR_FORM_TYPES`). Register: Guest, Delivery, Pick-up,
+ * Drop-off, Contractor (`VisitorTypeDialog`; no Walk-In - a camera read is a
+ * vehicle). The values are the ones the form already takes.
+ */
+const REGISTER_SELECTION = [
+  { label: "Guest", value: "guest" },
+  { label: "Delivery", value: "delivery" },
+  { label: "Pick-up", value: "pick-up" },
+  { label: "Drop-off", value: "drop-off" },
+  { label: "Contractor", value: "contractor" },
+];
+
+const selection = computed(() =>
+  prop.mode === "register" ? REGISTER_SELECTION : visitorSelection
+);
 
 
 
@@ -42,12 +76,6 @@ function select(value: string) {
   emit("select", value);
 }
 
-function showSelection(item: any) {
-  if(item.value === 'walk-in' && prop.mode === 'register') {
-    return false ;
-  } return true;
-
-}
 </script>
 
 <style scoped>
@@ -69,6 +97,11 @@ function showSelection(item: any) {
   margin-bottom: 10px;
 }
 
+.visitor-select__plate {
+  color: var(--accent-text);
+  font-weight: 700;
+}
+
 .visitor-select__footer {
   display: flex;
   justify-content: flex-end;