@7365admin1/layer-common 1.10.9 → 1.11.0

package/components/IncidentReport/affectedEntities.vue

@@ -1,58 +1,5 @@
 <template>
   <v-row no-gutters class="px-5 pt-4">
-    <!-- Any unit affected -->
-    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
-        Any unit affected?
-      </p>
-      <p
-        v-if="affectedEntities?.anyUnitAffectedValue == 'no'"
-        class="mt-2 text-h6 text-capitalize"
-      >
-        {{ affectedEntities?.anyUnitAffectedValue }}
-      </p>
-      <!-- Block Level Unit Section -->
-      <v-row v-else no-gutters class="d-flex align-center mt-5">
-        <v-row
-          v-if="affectedEntities?.affectedUnit.hasOwnProperty('block')"
-          no-gutters
-        >
-          <v-col cols="12" sm="4">
-            <InputLabel class="text-capitalize" title="Block" />
-            <p class="my-1 text-h6">
-              {{ affectedEntities?.affectedUnit?.block }}
-            </p>
-          </v-col>
-          <v-col cols="12" sm="4">
-            <InputLabel class="text-capitalize" title="Level" />
-            <p class="my-1 text-h6">
-              {{ affectedEntities?.affectedUnit?.level }}
-            </p>
-          </v-col>
-          <v-col cols="12" sm="4">
-            <InputLabel class="text-capitalize" title="Unit" />
-            <p class="my-1 text-h6">
-              {{ affectedEntities?.affectedUnit?.unit }}
-            </p>
-          </v-col>
-        </v-row>
-
-        <v-col v-else cols="12" class="px-1 mb-0">
-          <InputLabel class="text-capitalize" title="Location" />
-          <p class="my-1 text-h6 text-capitalize">
-            {{ affectedEntities?.affectedUnit?.other }}
-          </p>
-        </v-col>
-
-        <v-col cols="12" class="px-1 mb-0 mt-5">
-          <InputLabel class="text-capitalize" title="Remarks" />
-          <p class="my-1 text-h6 text-capitalize">
-            {{ affectedEntities?.affectedUnit?.remarks }}
-          </p>
-        </v-col>
-      </v-row>
-    </v-col>
-
     <!-- Anyone affected/injured -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
       <p class="mb-2" style="font-size: 17px; font-weight: 600">
@@ -80,6 +27,7 @@
           <div class="d-flex align-center">
             NRIC
             <v-icon
+            v-if="isShowEyeIcon"
               class="cursor-pointer ml-1"
               size="18"
               color="blue"
@@ -143,6 +91,10 @@ const props = defineProps({
     type: Object as PropType<Record<string, any> | null>,
     required: true,
   },
+  isShowEyeIcon: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 // emits
@@ -161,6 +113,14 @@ const injuredTableHeader = [
     title: "Contact Number",
     value: "contact",
   },
+  {
+    title: "Block / Level / Unit Location",
+    value: "incidentLocation",
+  },
+  {
+    title: "Remarks",
+    value: "remarks",
+  },
 ];
 
 const damagePropertyTableHeader = [
@@ -180,10 +140,6 @@ const damagePropertyTableHeader = [
     title: "Contact Number",
     value: "contact",
   },
-  {
-    title: "Action",
-    value: "action",
-  },
 ];
 
 const isShowNRIC = ref(false);

package/components/Signature.vue

@@ -0,0 +1,133 @@
+<template>
+  <v-dialog max-width="700" v-model="isDialogVisible" persistent>
+    <v-card>
+      <v-toolbar>
+        <v-toolbar-title>Signature </v-toolbar-title>
+        <v-spacer />
+        <v-btn icon="mdi-close" @click="hideModal"></v-btn>
+      </v-toolbar>
+      <v-card-text>
+        <v-row no-gutters>
+          <v-col cols="12">
+            <div class="text-subtitle-1 text-medium-emphasis ml-2">
+              Your signature here
+            </div>
+
+            <NuxtSignaturePad
+              ref="signature"
+              :options="state.option"
+              :width="'100%'"
+              :height="'400px'"
+              :disabled="state.disabled"
+              class="border"
+            />
+          </v-col>
+
+          <v-col cols="12" class="text-center">
+            <v-row class="d-flex">
+              <v-col class="w-50 px-3">
+                <v-btn
+                  text="clear"
+                  color="warning"
+                  type="submit"
+                  class="my-4 w-100 rounded-lg"
+                  height="40px"
+                  @click="clear()"
+                />
+              </v-col>
+
+              <v-col class="w-50 px-3">
+                <v-btn
+                  text="submit"
+                  color="#1867C0"
+                  type="submit"
+                  class="my-4 w-100 rounded-lg"
+                  height="40px"
+                  :loading="loading"
+                  @click="submit"
+                  :disabled="loading"
+                />
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const loading = ref(false);
+// const { isValid } = useAudit();
+// const { uiRequiredInput, uiSetSnackbar } = useUtils();
+
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+const signature = ref(null);
+const state = ref({
+  count: 0,
+  option: {
+    penColor: "rgb(0, 0, 0)",
+    backgroundColor: "rgb(255,255,255)",
+  },
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  (event: "onSubmit", payload: string): void;
+  (event: "onCloseDialog"): void;
+}>();
+let props = defineProps({
+  isShowDialog: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isDialogVisible = computed(() => props.isShowDialog);
+
+const hideModal = () => {
+  emit("onCloseDialog");
+};
+const file = ref<File | null>(null);
+const { addFile } = useFile();
+const submit = async () => {
+  try {
+    loading.value = true;
+    const base64 = signature.value.saveSignature();
+    const blob = await (await fetch(base64)).blob();
+
+    file.value = new File([blob], "signature.jpg", { type: "image/jpeg" });
+
+    const uploadItem = {
+      data: file.value,
+      name: file.value.name,
+      url: URL.createObjectURL(file.value),
+      progress: 0,
+      type: file.value.type,
+    };
+
+    const response = await addFile(uploadItem.data);
+
+    if (response && response.length > 0) {
+      emit("onSubmit", response[0]._id);
+    }
+  } catch (error) {
+    showMessage("Error uploading signature. Please try again.", "error");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const clear = () => {
+  signature.value.clearCanvas();
+};
+</script>

package/components/SiteSettings.vue

@@ -0,0 +1,285 @@
+<template>
+    <v-row no-gutters>
+        <v-expansion-panels multiple v-model="openPanels" >
+
+            <!-- SITE SETTINGS -->
+            <v-expansion-panel color="primary">
+                <v-expansion-panel-title>
+                    <v-icon class="mr-2">mdi-cog</v-icon>
+                    Site Settings
+                </v-expansion-panel-title>
+
+                <v-expansion-panel-text>
+                    <v-row no-gutters class="d-flex justify-center">
+                        <v-col cols="12">
+                            <v-row no-gutters>
+                                <v-col cols="12">
+                                    <span class="text-h4 font-weight-bold"> Site Settings </span>
+                                </v-col>
+
+                                <v-col cols="12">
+                                    <v-row no-gutters>
+                                        <v-col cols="12" lg="4" class="mt-2">
+                                            <NumberSettingField v-model="blocks" title="No. of blocks" type="blocks"
+                                                :read-only="!canManageSiteSettings"
+                                                :existing-block-number="existingBlockNumber" :site-id="siteId"
+                                                :disabled="existingBlockNumber === blocks" @success="refreshSiteData" />
+                                        </v-col>
+                                    </v-row>
+                                </v-col>
+
+                                <v-col cols="12">
+                                    <v-row no-gutters>
+                                        <v-col cols="12" lg="4" class="mt-2">
+                                            <NumberSettingField v-model="guardPosts" title="No. of guard posts"
+                                                type="guard_posts" :read-only="!canManageSiteSettings"
+                                                :existing-guard-posts-number="existingGuardPostNumber" :site-id="siteId"
+                                                :disabled="existingGuardPostNumber === guardPosts"
+                                                @success="refreshSiteData" />
+                                        </v-col>
+                                    </v-row>
+                                </v-col>
+
+                                <v-col cols="12">
+                                    <v-row no-gutters>
+                                        <v-col cols="12" lg="4" class="mt-2">
+                                            <v-row no-gutters>
+                                                <v-form v-model="gracePeriodValid">
+                                                    <v-row>
+                                                        <v-col cols="6">
+                                                            <InputLabel class="text-capitalize font-weight-bold"
+                                                                title="Grace Period" required />
+                                                            <v-text-field v-model="gracePeriod" type="number"
+                                                                density="comfortable" :readonly="!canManageSiteSettings"
+                                                                :rules="[requiredRule]" />
+                                                        </v-col>
+
+                                                        <v-col cols="6">
+                                                            <v-btn v-if="canManageSiteSettings" color="primary"
+                                                                class="text-none mt-6" size="large" variant="flat"
+                                                                :disabled="!gracePeriodValid ||
+                                                                    existingGracePeriodNumber === gracePeriod
+                                                                    " :loading="gracePeriodLoading" text="Save"
+                                                                @click="handleSaveGracePeriod" />
+                                                        </v-col>
+                                                    </v-row>
+                                                </v-form>
+                                            </v-row>
+                                        </v-col>
+                                    </v-row>
+                                </v-col>
+
+                            </v-row>
+                        </v-col>
+                    </v-row>
+                </v-expansion-panel-text>
+            </v-expansion-panel>
+
+            <!-- ANPR CAMERA -->
+            <v-expansion-panel color="primary">
+                <v-expansion-panel-title>
+                    <v-icon class="mr-2">mdi-camera</v-icon>
+                    ANPR Camera
+                </v-expansion-panel-title>
+
+                <v-expansion-panel-text>
+                    <CameraMain :site="siteId" :read-only="!canManageSiteSettings"
+                        :guard-posts="siteData?.metadata?.guardPosts" />
+                </v-expansion-panel-text>
+            </v-expansion-panel>
+
+            <!-- CCTV CAMERA -->
+            <v-expansion-panel color="primary">
+                <v-expansion-panel-title>
+                    <v-icon class="mr-2">mdi-cctv</v-icon>
+                    CCTV Camera
+                </v-expansion-panel-title>
+
+                <v-expansion-panel-text>
+                    <CameraMain :site="siteId" type="ip" :read-only="!canManageSiteSettings" />
+                </v-expansion-panel-text>
+            </v-expansion-panel>
+
+            <v-expansion-panel color="primary">
+                <v-expansion-panel-title>
+                    <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
+                    Work Order Settings
+                </v-expansion-panel-title>
+
+                <v-expansion-panel-text>
+                    <v-text-field v-model="prefix" label="Prefix" :disabled="isLoading || !canManageSiteSettings"
+                        @input="handleInput" />
+
+                    <v-select v-model="noOfDigits" :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" label="No. of Digits"
+                        :disabled="isLoading || !canManageSiteSettings" />
+
+                    <v-text-field v-model="orderNumberPreview" label="Preview" readonly />
+
+                    <v-btn v-if="canManageSiteSettings" class="mt-2" :loading="isLoading" @click="save">
+                        Save
+                    </v-btn>
+                </v-expansion-panel-text>
+            </v-expansion-panel>
+
+
+            <v-expansion-panel color="primary">
+                <v-expansion-panel-title>
+                    <v-icon class="mr-2">mdi-truck</v-icon>
+                    Delivery Companies
+                </v-expansion-panel-title>
+                <v-expansion-panel-text class="">
+                    <DeliveryCompany :site="siteId" v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData" @update:companiesValue="handleUpdateCompanies"
+                        :read-only="!canManageSiteSettings" />
+                </v-expansion-panel-text>
+
+            </v-expansion-panel>
+
+        </v-expansion-panels>
+
+        <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+    </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    siteId: { type: String, required: true },
+    canManageSiteSettings: { type: Boolean, default: false }
+})
+
+const openPanels = ref([0]) // default open first
+
+const { getSiteById, updateSitebyId } = useSiteSettings()
+const { requiredRule } = useUtils()
+const { getFileUrl } = useFile()
+const { getWorkOrderSettings, createWorkOrderSettings } = useWorkOrder()
+
+const blocks = ref(0)
+const guardPosts = ref(0)
+const gracePeriod = ref(0)
+
+const existingBlockNumber = ref(0)
+const existingGuardPostNumber = ref(0)
+const existingGracePeriodNumber = ref(0)
+
+const gracePeriodValid = ref(false)
+const gracePeriodLoading = ref(false)
+const deliveryCompanies = ref<string[]>([])
+
+const siteLogo = ref<any[]>([])
+const uploadedSiteLogo = ref("")
+
+const prefix = ref("")
+const noOfDigits = ref(1)
+const isLoading = ref(false)
+
+const toast = reactive({
+    show: false,
+    message: "",
+    color: ""
+})
+
+const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
+    `site-${props.siteId}`,
+    () => getSiteById(props.siteId)
+)
+
+watch(siteData, (val: TSite) => {
+    if (!val) return
+
+    blocks.value = val.metadata?.block || 0
+    guardPosts.value = val.metadata?.guardPosts || 0
+    gracePeriod.value = val.metadata?.gracePeriod || 0
+
+    existingBlockNumber.value = blocks.value
+    existingGuardPostNumber.value = guardPosts.value
+    existingGracePeriodNumber.value = gracePeriod.value
+    deliveryCompanies.value = Array.isArray(val.deliveryCompanyList) ? [...val.deliveryCompanyList] : []
+
+    uploadedSiteLogo.value = val.metadata?.incidentLogo || ""
+}, { immediate: true })
+
+async function handleSaveGracePeriod() {
+    gracePeriodLoading.value = true
+    try {
+        await updateSitebyId(props.siteId, {
+            field: "metadata.gracePeriod",
+            value: gracePeriod.value
+        })
+        show("Grace period updated", "success")
+        refreshSiteData()
+    } catch (e: any) {
+        show(e?.data?.message || "Error updating grace period", "error")
+    } finally {
+        gracePeriodLoading.value = false
+    }
+}
+
+async function handleLogo(action: string) {
+    try {
+        await updateSitebyId(props.siteId, {
+            field: "metadata.incidentLogo",
+            value: action === "add" ? siteLogo.value[0] : 0
+        })
+        show("Logo updated", "success")
+        refreshSiteData()
+    } catch {
+        show("Error updating logo", "error")
+    } finally {
+        siteLogo.value = []
+    }
+}
+
+const onUploadedLogoPreview = () => {
+    if (!uploadedSiteLogo.value) return ""
+    return getFileUrl(uploadedSiteLogo.value)
+}
+
+const { data: workOrderSetting } = await useLazyAsyncData(
+    `work-${props.siteId}`,
+    () => getWorkOrderSettings({ site: props.siteId, service: "Security" })
+)
+
+watchEffect(() => {
+    if (workOrderSetting.value) {
+        prefix.value = workOrderSetting.value.prefix
+        noOfDigits.value = workOrderSetting.value.noOfDigits
+    }
+})
+
+function handleInput(e: any) {
+    prefix.value = e.target.value
+        .replace(/[^A-Z]/g, "")
+        .toUpperCase()
+}
+
+function handleUpdateCompanies(value: string[]) {
+    deliveryCompanies.value = value
+}
+
+const orderNumberPreview = computed(() => {
+    return `${prefix.value}${"0".repeat(noOfDigits.value - 1)}1`
+})
+
+async function save() {
+    try {
+        isLoading.value = true
+        await createWorkOrderSettings({
+            site: props.siteId,
+            service: "Security",
+            prefix: prefix.value,
+            noOfDigits: noOfDigits.value
+        })
+        show("Saved successfully", "success")
+    } catch {
+        show("Error saving", "error")
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function show(message: string, color: string) {
+    toast.show = true
+    toast.message = message
+    toast.color = color
+}
+</script>