@7365admin1/layer-common 1.10.4 → 1.10.5

package/components/IncidentReport/affectedEntities.vue

@@ -76,6 +76,26 @@
         style="max-height: calc(100vh - (200px))"
         class="border mt-5"
       >
+        <template #header.nric>
+          <div class="d-flex align-center">
+            NRIC
+            <v-icon
+              class="cursor-pointer ml-1"
+              size="18"
+              color="blue"
+              @click="isShowNRIC = !isShowNRIC"
+            >
+              {{ isShowNRIC ? "mdi-eye-off-outline" : "mdi-eye-outline" }}
+            </v-icon>
+          </div>
+        </template>
+        <template #item.nric="{ value }">
+          <tr>
+            {{
+              maskedNric(value)
+            }}
+          </tr>
+        </template>
       </v-data-table>
     </v-col>
 
@@ -142,6 +162,7 @@ const injuredTableHeader = [
     value: "contact",
   },
 ];
+
 const damagePropertyTableHeader = [
   {
     title: "Description",
@@ -164,4 +185,12 @@ const damagePropertyTableHeader = [
     value: "action",
   },
 ];
+
+const isShowNRIC = ref(false);
+
+const maskedNric = (nric: string) => {
+  if (!nric) return "";
+  if (isShowNRIC.value) return nric;
+  return nric[0] + "*".repeat(nric.length - 5) + nric.slice(-4);
+};
 </script>

package/components/PlateNumberDisplay.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="d-flex align-center ga-2 flex-wrap">
+    <span v-if="formatted">
+      {{ formatted }}
+    </span>
+
+    <v-chip
+      v-if="extraCount > 0"
+      density="comfortable"
+      size="small"
+    >
+      + {{ extraCount }}
+    </v-chip>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  plateNumbers: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  defaultValue: {
+    type: String,
+    default: ""
+  }
+})
+
+const formatted = computed(() => {
+  if (!props.plateNumbers?.length) return props.defaultValue || ""
+
+  const firstTwo = props.plateNumbers
+    .slice(0, 2)
+    .map((v: any) => v?.plateNumber || "")
+
+  return firstTwo.join(", ")
+})
+
+const extraCount = computed(() => {
+  if (!props.plateNumbers) return 0
+  return props.plateNumbers.length > 2
+    ? props.plateNumbers.length - 2
+    : 0
+})
+</script>

package/components/ScheduleAreaMain.vue

@@ -243,6 +243,9 @@ const getStatusColor = (status: unknown): string => {
     case "completed":
     case "accepted":
       return "success";
+    case "closed":
+    case "rejected":
+      return "error";
     default:
       return "secondary";
   }

package/components/VehicleAddSelection.vue

@@ -0,0 +1,58 @@
+<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>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+});
+
+const emit = defineEmits(['cancel', 'select']);
+
+const selection = computed<{label: string, value: TVehicleType}[]>(() => {
+  return [
+    { label: "Whitelist", value: "whitelist" },
+    { label: "Season Pass", value: "seasonpass" },
+    { label: "Blocklist", value: "blocklist" },
+  ];
+})
+
+function cancel() {
+  emit("cancel");
+}
+
+function select(value: string) {
+  emit("select", value);
+}
+</script>