@7365admin1/layer-common 1.10.10 → 1.11.0

package/components/IncidentReport/IncidentInformation.vue

@@ -148,7 +148,7 @@
               size="small"
               color="blue"
               class="cursor-pointer"
-              @click="showNRICComplainant = !showNRICComplainant"
+              @click="toggleNRICComplainant"
             >
               {{ showNRICComplainant ? "mdi-eye-off" : "mdi-eye" }}
             </v-icon>
@@ -190,7 +190,7 @@
               size="small"
               color="blue"
               class="cursor-pointer"
-              @click="showNRICRecipient = !showNRICRecipient"
+              @click="toggleNRICRecipient"
             >
               {{ showNRICRecipient ? "mdi-eye-off" : "mdi-eye" }}
             </v-icon>
@@ -262,6 +262,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(["showNRICComplainant", "showNRICRecipient"]);
+
 // utilities
 const { getSiteById } = useSiteSettings();
 
@@ -293,6 +295,16 @@ function toLocalDate(utcString: string) {
   });
 }
 
+const toggleNRICComplainant = () => {
+  showNRICComplainant.value = !showNRICComplainant.value;
+  emit("showNRICComplainant", showNRICComplainant.value);
+};
+
+const toggleNRICRecipient = () => {
+  showNRICRecipient.value = !showNRICRecipient.value;
+   emit("showNRICRecipient", showNRICRecipient.value);
+};
+
 const maskNRIC = (value: any) => {
   if (!value) return "NA";
 

package/components/IncidentReport/IncidentInformationDownload.vue

@@ -98,15 +98,11 @@
       <v-col cols="4" class="pa-3 border-b">
         <p class="font-weight-bold">NRIC/WP No.</p>
         <p>
-          <v-icon
-            v-if="incidentInformation?.complaintInfo?.nric"
-            size="small"
-            color="blue"
-            class="cursor-pointer"
-            @click="showNRICComplainant = !showNRICComplainant"
-          >
-            {{ showNRICComplainant ? "mdi-eye-off" : "mdi-eye" }}
-          </v-icon>
+          {{
+            showNRICComplainant
+              ? incidentInformation?.complaintInfo?.nric || "-"
+              : maskNRIC(incidentInformation?.complaintInfo?.nric)
+          }}
         </p>
       </v-col>
 
@@ -175,6 +171,7 @@ const props = defineProps({
 
 // utilities
 const { getSiteById } = useSiteSettings();
+const route = useRoute();
 
 // state
 const siteName = ref("");
@@ -184,6 +181,22 @@ const siteId = computed(() => props.incidentInformation?.siteInfo?.site);
 const showNRICComplainant = ref(false);
 const showNRICRecipient = ref(false);
 
+watch(
+  () => route.query.nricComp,
+  (val) => {
+    showNRICComplainant.value = val === "true";
+  },
+  { immediate: true }
+);
+
+watch(
+  () => route.query.nricRec,
+  (val) => {
+    showNRICRecipient.value = val === "true";
+  },
+  { immediate: true }
+);
+
 watch(
   siteId,
   async (newSiteId) => {

package/components/IncidentReport/affectedEntities.vue

@@ -27,6 +27,7 @@
           <div class="d-flex align-center">
             NRIC
             <v-icon
+            v-if="isShowEyeIcon"
               class="cursor-pointer ml-1"
               size="18"
               color="blue"
@@ -90,6 +91,10 @@ const props = defineProps({
     type: Object as PropType<Record<string, any> | null>,
     required: true,
   },
+  isShowEyeIcon: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 // emits

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/SlideCardGroup.vue

@@ -0,0 +1,194 @@
+<template>
+  <v-sheet class="mx-auto">
+    <v-slide-group
+      class="pa-1"
+      show-arrows
+      :style="{ backgroundColor: '#FFFF' }"
+    >
+      <v-slide-group-item
+        v-for="(data, idx) in localDataFiles"
+        :key="idx"
+        v-slot="{ isSelected }"
+      >
+        <v-card
+          :class="['ma-1', isSelected && 'selected']"
+          width="150"
+          height="100"
+          @click="clickable && emit('onClickCarousel', data.path)"
+          class="rounded-lg border-thin"
+          border=" opacity-50 thin "
+        >
+          <v-btn
+            icon
+            variant="text"
+            size="x-small"
+            class="remove-btn pa-0 ma-0"
+            @click.stop="removeFile(data)"
+          >
+            <v-icon color="red" class="pa-0 ma-0" size="x-large"
+              >mdi-close-circle</v-icon
+            >
+          </v-btn>
+          <!-- File Icons -->
+
+          <v-img :src="data.url" cover height="200">
+            <template #placeholder>
+              <v-skeleton-loader height="100%" width="100%" />
+            </template>
+          </v-img>
+          <!-- <template v-if="url.type !== 'image'">
+            <div
+              class="d-flex fill-height align-center justify-center flex-column"
+            >
+              <v-icon
+                :icon="getFileIcon(url.type)"
+                size="64"
+                :color="getFileColor(url.type)"
+              ></v-icon>
+            </div>
+          </template>
+
+
+
+          <template v-else>
+            <v-img :src="url.path" cover height="200">
+              <template #placeholder>
+                <v-skeleton-loader height="100%" width="100%" />
+              </template>
+            </v-img>
+          </template> -->
+
+          <!-- Edit Button -->
+          <!-- <div v-if="imgEditable" class="edit-btn">
+            <v-btn
+              color="primary"
+              size="small"
+              @click.stop="onImageEdit(url.path, idx)"
+            >
+              <v-icon start>mdi-pencil</v-icon>
+              Edit
+            </v-btn>
+          </div>  -->
+        </v-card>
+      </v-slide-group-item>
+    </v-slide-group>
+  </v-sheet>
+
+  <DrawImage
+    v-if="isShowImageEdit"
+    :is-show-dialog="isShowImageEdit"
+    :image-url="imageUrl"
+    :image-idx="imageIdx"
+    @on-submit="onImageSubmitEdit"
+    @on-close-dialog="isShowImageEdit = false"
+  />
+</template>
+
+<script setup lang="ts">
+const { getImage } = useUtils();
+const { attachedFiles } = useUploadFiles();
+
+const emit = defineEmits<{
+  (event: "onClickCarousel", url: string): void;
+  (event: "onImageEdit", url: string, idx: number): void;
+  (event: "onFileRemove"): void;
+}>();
+
+const props = defineProps<{
+  clickable?: boolean;
+  imgEditable?: boolean;
+  dataFiles?: File[];
+}>();
+const localDataFiles = ref([...props.dataFiles]);
+const isShowImageEdit = ref(false);
+const imageUrl = ref("");
+const imageIdx = ref(0);
+
+const getFileType = (url: string) => {
+  const extension = url.split(".").pop()?.toLowerCase() || "";
+  if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) return "image";
+  if (["pdf"].includes(extension)) return "pdf";
+  if (["doc", "docx"].includes(extension)) return "word";
+  return "other";
+};
+
+const getFileIcon = (type: string) => {
+  switch (type) {
+    case "pdf":
+      return "mdi-file-pdf-box";
+    case "word":
+      return "mdi-file-word-box";
+    default:
+      return "mdi-file-outline";
+  }
+};
+
+const getFileColor = (type: string) => {
+  switch (type) {
+    case "pdf":
+      return "red";
+    case "word":
+      return "blue";
+    default:
+      return "grey";
+  }
+};
+
+const onImageEdit = (url: string, idx: number) => {
+  isShowImageEdit.value = true;
+  imageUrl.value = url;
+  imageIdx.value = idx;
+};
+
+const onImageSubmitEdit = async (url: string, idx: number) => {
+  const response = await getImage(url);
+  if (!response) return;
+  attachedFiles.value[idx].data = new File(
+    [response],
+    attachedFiles.value[idx].data?.name
+  );
+  attachedFiles.value[idx].url = url;
+  isShowImageEdit.value = false;
+};
+
+const isImageFile = (type: string) => {
+  return type?.startsWith("image/");
+};
+
+watch(
+  () => props.dataFiles,
+  (newDataFiles) => {
+    localDataFiles.value = [...newDataFiles];
+  }
+);
+
+const removeFile = (file) => {
+  const index = localDataFiles.value.findIndex(
+    (dataFile) => dataFile.id === file.id
+  );
+
+  if (index !== -1) {
+    localDataFiles.value.splice(index, 1);
+    emit("onFileRemove", file);
+  }
+};
+</script>
+
+<style scoped>
+.edit-btn {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+}
+
+.selected {
+  border: 2px solid var(--v-theme-primary);
+}
+
+.remove-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  z-index: 2;
+}
+</style>

package/components/VisitorForm.vue

@@ -322,6 +322,7 @@ const { requiredRule, debounce, UTCToLocalTIme } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { createVisitor, typeFieldMap, contractorTypes, getVisitors, updateVisitor } = useVisitor();
 const { getBySiteId: getEntryPassSettingsBySiteId } = useSiteEntryPassSettings();
+const { createVisitorPass } = useAccessManagement();
 const { findPersonByNRIC, findPersonByContact, searchCompanyList, findUsersByPlateNumber } = usePeople()
 const { getById: getUnitDataById } = useBuildingUnit()
 
@@ -354,7 +355,7 @@ const visitor = reactive<Partial<TVisitorPayload>>({
 
 const passType = ref("");
 const passQuantity = ref<number | null>(1);
-const passCards = ref<string[]>([]);
+const passCards = ref<{ _id: string; cardNo: string }[]>([]);
 
 const registeredUnitCompanyName = ref('N/A')
 
@@ -906,6 +907,21 @@ async function submit() {
   try {
     const res = await createVisitor(payload);
     if (res) {
+      if (prop.type === "contractor" && passType.value) {
+        const visitorId = res?._id;
+        const acmUrl = entryPassSettings.value?.data?.settings?.acm_url;
+        if (visitorId && acmUrl) {
+          await createVisitorPass({
+            site: prop.site,
+            unitId: visitor.unit!,
+            quantity: passQuantity.value ?? 1,
+            type: passType.value === "QR" ? "QRCODE" : passType.value,
+            nfcCards: passCards.value,
+            acm_url: acmUrl,
+            visitorId,
+          });
+        }
+      }
       if (createMore.value) {
         emit("done:more");
       } else emit("done");

package/composables/useAccessManagement.ts

@@ -111,8 +111,8 @@ export default function useAccessManagement() {
     site: string;
     userType: string;
     type: string;
-    accessLevel: string;
-    liftAccessLevel: string;
+    accessLevel: string | null;
+    liftAccessLevel: string | null;
   }) {
     return useNuxtApp().$api<Record<string, any>>(
       `/api/access-management/access-and-lift-cards`,
@@ -122,8 +122,8 @@ export default function useAccessManagement() {
           site: params.site,
           userType: params.userType,
           type: params.type,
-          accessLevel: params.accessLevel,
-          liftAccessLevel: params.liftAccessLevel,
+          ...(params.accessLevel != null ? { accessLevel: params.accessLevel } : {}),
+          ...(params.liftAccessLevel != null ? { liftAccessLevel: params.liftAccessLevel } : {}),
         },
       }
     );
@@ -135,8 +135,8 @@ export default function useAccessManagement() {
     type: string;
     site: string;
     userType: string;
-    accessLevel: string;
-    liftAccessLevel: string;
+    accessLevel: string | null;
+    liftAccessLevel: string | null;
   }) {
     return useNuxtApp().$api<Record<string, any>>(
       `/api/access-management/assign-access-card`,
@@ -261,6 +261,24 @@ export default function useAccessManagement() {
     );
   }
 
+  function createVisitorPass(payload: {
+    site: string;
+    unitId: string;
+    quantity: number;
+    type: string;
+    nfcCards: { _id: string; cardNo: string }[];
+    acm_url: string;
+    visitorId: string;
+  }) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/access-management/visitor`,
+      {
+        method: "POST",
+        body: payload,
+      }
+    );
+  }
+
   return {
     getDoorAccessLevels,
     getLiftAccessLevels,
@@ -280,5 +298,6 @@ export default function useAccessManagement() {
     getAllVisitorAccessCardsQrTags,
     getAvailableContractorCards,
     generateQrVms,
+    createVisitorPass,
   };
 }

package/composables/useComment.ts

@@ -0,0 +1,147 @@
+const { currentUser } = useLocalAuth();
+export default function useComment() {
+  class MComment implements TCommentChat {
+    _id?: string;
+    comment: string;
+    attachments?: TAttachment[];
+    createdBy: string;
+    workOrder: string;
+    createdAt?: string;
+    updatedAt?: string;
+    createdByName?: string;
+    createdByType?: string;
+    feedback?: string;
+    justify?: string | undefined;
+    seenByNames: string;
+
+    constructor(comment: Partial<TCommentChat> = {}) {
+      this._id = comment._id || "";
+      this.comment = comment.comment || "";
+      this.attachments = comment.attachments || [];
+      this.workOrder = comment.workOrder || "";
+      this.createdAt = comment.createdAt
+        ? comment.createdAt.toString()
+        : undefined;
+      this.updatedAt = comment.updatedAt || "";
+      this.createdBy = comment.createdBy || "";
+      this.createdByName = comment.createdByName || "";
+      this.createdByType = comment.createdByType || "";
+      this.justify = comment.justify || "";
+      this.feedback = comment.feedback || "";
+      this.seenByNames = comment.seenByNames ?? "";
+    }
+  }
+
+  const comment = useState("comment", () => new MComment());
+  const comments = useState("comments", (): TCommentChat[] => []);
+  const page = useState("commentPage", () => 1);
+  const itemsPerPage = useState("itemsPerPage", () => 2);
+  const search = useState("commentSearch", () => "");
+  const pageRange = useState("commentPageRange", () => "-- - -- of --");
+  const isCommentsLoaded = useState("isCommentsLoaded", () => false);
+
+  function addComment(payload: TCommentChat) {
+    delete payload._id;
+    return useNuxtApp().$api<{ value?: { message: string } }>(
+      "/api/comments/v1",
+      {
+        method: "POST",
+        body: payload,
+      }
+    );
+  }
+
+  function getCommentById(id: string) {
+    return useNuxtApp().$api(`/api/auth/comments/id/${id}`, {
+      method: "GET",
+    });
+  }
+
+  function setComment(data?: TCommentChat) {
+    comment.value = new MComment(data);
+  }
+
+  const isInviteValid = useState("isInviteValid", () => false);
+
+  function getCommentsByWorkOrder(id: string) {
+    return useNuxtApp().$api(`/api/comments/v1/work-order/${id}`);
+  }
+
+  function getCommentsByWorkOrderId(id: string) {
+    return useNuxtApp().$api(`/api/comments/v1/work-order/${id}`);
+  }
+
+  function getCommentsByFeedBackId(id: string, type?: string) {
+    const commentFeedbackOrWOD =
+      type === "workOrder" ? "work-order" : "feedback";
+    return useNuxtApp().$api(`/api/comments/v1/${commentFeedbackOrWOD}/${id}`);
+  }
+
+  async function setComments(id: string, type?: string) {
+    try {
+      isCommentsLoaded.value = true;
+      const _comments = (await getCommentsByFeedBackId(
+        id,
+        type
+      )) as TCommentPaginated;
+
+      let updateSeenIds: any = [];
+
+      comments.value = _comments.items
+        .map((comment: any) => {
+          if (comment.createdBy === currentUser.value._id) {
+            comment.justify = "end";
+          } else {
+            comment.justify = "start";
+            if (
+              ((Array.isArray(comment.seenBy) &&
+                !comment.seenBy.includes(currentUser.value._id)) ||
+                !comment?.seenBy) &&
+              comment?._id
+            ) {
+              updateSeenIds.push(comment._id);
+            }
+          }
+          return comment;
+        })
+        .sort(
+          (firstComment: any, secondComment: any) =>
+            new Date(firstComment.createdAt).getTime() -
+            new Date(secondComment.createdAt).getTime()
+        );
+
+      if (Array.isArray(updateSeenIds) && updateSeenIds.length > 0) {
+        const seenBy = await updateSeenBy(updateSeenIds, currentUser.value._id);
+      }
+    } catch (error) {
+      console.log("error :", error);
+    } finally {
+      isCommentsLoaded.value = false;
+    }
+  }
+
+  function updateSeenBy(ids: string[], seenById: string) {
+    return useNuxtApp().$api(`/api/comments/v1/seen-by`, {
+      method: "PUT",
+      body: { seenById, ids },
+    });
+  }
+
+  return {
+    comment,
+    comments,
+    page,
+    itemsPerPage,
+    pageRange,
+    addComment,
+    setComment,
+    search,
+    isCommentsLoaded,
+    isInviteValid,
+    setComments,
+    getCommentById,
+    getCommentsByWorkOrderId,
+    updateSeenBy,
+    getCommentsByFeedBackId,
+  };
+}