@7365admin1/layer-common 3.0.31-staging.19 → 3.0.31-staging.21

package/components/AddEqupmentForm.vue

@@ -12,6 +12,24 @@
       <v-card-text class="pa-4">
         <v-form ref="formRef" v-model="valid">
           <v-row no-gutters class="pa-0">
+            <v-col cols="12" class="pa-0 mb-2">
+              <PhotoUpload
+                v-model="attachmentPhotos"
+                v-model:photo-ids="attachmentIds"
+                title="Photo"
+                @error="photoUploadError = $event"
+              />
+
+              <v-alert
+                v-if="photoUploadError"
+                type="error"
+                density="compact"
+                variant="tonal"
+                class="mt-2"
+              >
+                {{ photoUploadError }}
+              </v-alert>
+            </v-col>
             <v-col cols="12" class="pa-0 mb-2">
               <InputLabel for="name" title="Name" required class="mb-1" />
               <v-text-field
@@ -87,6 +105,10 @@ const unitOfMeasurementModel = defineModel("unitOfMeasurement", {
   type: String,
   default: "",
 });
+const attachmentModel = defineModel("attachment", {
+  type: String,
+  default: "",
+});
 const showDialog = defineModel({ type: Boolean, default: false });
 
 const prop = defineProps({
@@ -105,6 +127,9 @@ const emit = defineEmits(["saved", "close"]);
 const formRef = ref<any>(null);
 const valid = ref(false);
 const submitting = ref(false);
+const attachmentPhotos = ref<string[]>([]);
+const attachmentIds = ref<string[]>([]);
+const photoUploadError = ref("");
 
 const { requiredRule } = useUtils();
 
@@ -124,6 +149,29 @@ const unitOfMeasurementOptions = [
 watchEffect(() => {
   nameModel.value = prop.equipmentData?.name || "";
   unitOfMeasurementModel.value = prop.equipmentData?.unitOfMeasurement || "";
+  attachmentModel.value = prop.equipmentData?.attachment || "";
+});
+
+watch(
+  attachmentIds,
+  (photoIds) => {
+    const [attachmentId] = photoIds;
+    attachmentModel.value = attachmentId || "";
+
+    if (photoIds.length > 1) {
+      attachmentIds.value = attachmentId ? [attachmentId] : [];
+      attachmentPhotos.value = attachmentPhotos.value.slice(0, 1);
+    }
+  },
+  { deep: true }
+);
+
+watch(showDialog, (isOpen) => {
+  if (!isOpen) {
+    attachmentPhotos.value = [];
+    attachmentIds.value = [];
+    photoUploadError.value = "";
+  }
 });
 
 function close() {
@@ -147,12 +195,15 @@ async function submit() {
 
     emit("saved", {
       name: nameModel.value,
-
       unitOfMeasurement: unitOfMeasurementModel.value,
+      attachment: attachmentModel.value,
     });
 
     nameModel.value = "";
     unitOfMeasurementModel.value = "";
+    attachmentModel.value = "";
+    attachmentPhotos.value = [];
+    attachmentIds.value = [];
 
     showDialog.value = false;
     emit("close");

package/components/EquipmentManagementMain.vue

@@ -46,6 +46,19 @@
           </v-row>
         </template>
 
+        <template #item.attachment="{ value }">
+          <v-btn
+            v-if="value"
+            size="small"
+            variant="tonal"
+            class="text-none"
+            @click.stop="viewAttachment(value)"
+          >
+            View Image
+          </v-btn>
+          <span v-else>—</span>
+        </template>
+
         <template #item.status="{ value }">
           <v-chip class="text-capitalize">{{ value || "N/A" }}</v-chip>
         </template>
@@ -61,6 +74,7 @@
     v-model="dialogShowForm"
     v-model:name="equipmentName"
     v-model:unitOfMeasurement="equipmentUnit"
+    v-model:attachment="equipmentAttachment"
     :mode="dialogMode"
     :equipmentData="editingEquipment"
     :site="props.site"
@@ -242,6 +256,29 @@
     </v-card>
   </v-dialog>
 
+  <v-dialog v-model="showAttachmentDialog" max-width="720" persistent>
+    <v-card rounded="lg">
+      <v-card-title class="d-flex align-center pa-4">
+        <span class="text-h6 font-weight-bold">Attachment</span>
+
+        <v-spacer />
+
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          size="small"
+          @click="(showAttachmentDialog = false), (attachmentUrl = '')"
+        />
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="pa-6">
+        <v-img :src="attachmentUrl" contain />
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
   <Snackbar
     v-model="messageSnackbar"
     :text="snackbarMessage"
@@ -253,6 +290,7 @@ import useEquipment from "../composables/useEquipment";
 import useStock from "../composables/useStock";
 import useUtils from "../composables/useUtils";
 import useEquipmentManagement from "../composables/useEquipmentManagement";
+import useFile from "../composables/useFile";
 
 const props = defineProps({
   orgId: { type: String, default: "" },
@@ -280,6 +318,7 @@ const siteName = ref<string>("");
 const submitting = ref(false);
 
 const headers = [
+  { title: "Image", value: "attachment" },
   { title: "Name", value: "name" },
   { title: "Available Stock Qty", value: "qty" },
   { title: "Status", value: "status" },
@@ -293,6 +332,7 @@ const {
   deleteEquipment,
 } = useEquipment();
 const { debounce, requiredRule } = useUtils();
+const { getFileUrl } = useFile();
 
 const searchInput = ref("");
 const startDate = ref("");
@@ -352,11 +392,21 @@ const dialogMode = ref<"add" | "edit">("add");
 const editingEquipment = ref<Record<string, any>>({});
 const equipmentName = ref("");
 const equipmentUnit = ref("");
+const equipmentAttachment = ref("");
 
 const stockActionFormRef = ref<any>(null);
 const stockActionValid = ref(false);
 
 const snackbarMessage = ref("");
+const showAttachmentDialog = ref(false);
+const attachmentUrl = ref("");
+
+function viewAttachment(attachmentId: string) {
+  if (!attachmentId) return;
+
+  attachmentUrl.value = getFileUrl(attachmentId);
+  showAttachmentDialog.value = true;
+}
 
 function showMessage(msg: string, color: string = "error") {
   message.value = msg;
@@ -370,6 +420,7 @@ function onCreateUnit() {
   editingEquipment.value = {};
   equipmentName.value = "";
   equipmentUnit.value = "";
+  equipmentAttachment.value = "";
   dialogShowForm.value = true;
 }
 
@@ -379,6 +430,9 @@ async function _createEquipment() {
     const payload: TEquipmentCreate = {
       name: equipmentName.value,
       unitOfMeasurement: equipmentUnit.value,
+      ...(equipmentAttachment.value
+        ? { attachment: equipmentAttachment.value }
+        : {}),
     };
 
     let response;
@@ -398,6 +452,7 @@ async function _createEquipment() {
     editingEquipment.value = {};
     equipmentName.value = "";
     equipmentUnit.value = "";
+    equipmentAttachment.value = "";
 
     await getEquipmentsRefresh();
   } catch (error: any) {
@@ -455,6 +510,7 @@ const onEditFromMoreAction = async () => {
   editingEquipment.value = response;
   equipmentName.value = response.name || "";
   equipmentUnit.value = response.unitOfMeasurement || "";
+  equipmentAttachment.value = response.attachment || "";
   dialogShowForm.value = true;
 };
 

package/components/VisitorForm.vue

@@ -12,7 +12,7 @@
       <div class="w-100 d-flex justify-space-between ga-2">
         <span class="text-subtitle-1 w-100 font-weight-bold mb-3">{{
           formTitle
-        }}</span>
+          }}</span>
         <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>
@@ -92,7 +92,7 @@
             </v-row>
           </v-col>
 
-            <v-col v-if="shouldShowField('contractorType')" cols="12">
+          <v-col v-if="shouldShowField('contractorType')" cols="12">
             <InputLabel class="text-capitalize" title="Contractor Type" required />
             <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
               autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
@@ -104,7 +104,7 @@
                   <v-list-item-title @click.stop="handleAddNewContractorType" class="d-flex align-center ga-1">
                     <span><v-icon icon="mdi-plus" /></span> Add "<strong>{{
                       contractorTypeInput
-                    }}</strong>" as custom contractor type.
+                      }}</strong>" as custom contractor type.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -137,8 +137,8 @@
               <InputLabel class="text-capitalize" title="Company Name" />
               <v-combobox v-model="visitor.company" v-model:search="companyNameInput" ref="companyCombo"
                 autocomplete="off" :hide-no-data="false" :items="companyNames" item-value="value"
-                 @update:model-value="handleSelectCompanyName" variant="outlined"
-                density="comfortable" persistent-hint small-chips>
+                @update:model-value="handleSelectCompanyName" variant="outlined" density="comfortable" persistent-hint
+                small-chips>
                 <!-- <template v-slot:no-data>
                   <v-list-item>
                     <v-list-item-title v-if="companyNameInput" @click.stop="handleAddNewCompany"
@@ -175,7 +175,7 @@
                       class="d-flex align-center ga-1">
                       <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
                         companyNameInput
-                      }}</strong>" as new company.
+                        }}</strong>" as new company.
                     </v-list-item-title>
                     <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
                       Start typing to search for companies.
@@ -929,23 +929,34 @@ function getPersonPlateOptions(item: Partial<TPeople>) {
 function findMatchingContactOption(options: string[], value?: string | null) {
   const normalizedValue = value?.trim();
   if (!normalizedValue) return "";
+  const compactValue = normalizedValue.replace(/\s/g, "");
 
   return (
     options.find((option) => option.trim() === normalizedValue) ||
-    options.find((option) => option.replace(/\s/g, "") === normalizedValue.replace(/\s/g, "")) ||
+    options.find((option) => option.replace(/\s/g, "") === compactValue) ||
+    options.find((option) => option.trim().includes(normalizedValue)) ||
+    options.find((option) => option.replace(/\s/g, "").includes(compactValue)) ||
     ""
   );
 }
 
+function normalizePlateNumber(value?: string | null) {
+  return (value ?? "").replace(/[^A-Z0-9]/gi, "").toUpperCase();
+}
+
 function normalizePlateOption(value?: string | null) {
   return (value || "").replace(/[^A-Z0-9]/gi, "").toUpperCase();
 }
 
 function findMatchingPlateOption(options: string[], value?: string | null) {
-  const normalizedValue = normalizePlateOption(value);
+  const normalizedValue = normalizePlateNumber(value);
   if (!normalizedValue) return "";
 
-  return options.find((option) => normalizePlateOption(option) === normalizedValue) || "";
+  return (
+    options.find((option) => normalizePlateNumber(option) === normalizedValue) ||
+    options.find((option) => normalizePlateNumber(option).includes(normalizedValue)) ||
+    ""
+  );
 }
 
 function applyNricSearchResult(
@@ -969,11 +980,11 @@ function applyNricSearchResult(
 
   companyNames.value = Array.isArray(item.companyName) ? item.companyName : [];
 
-  if(item.companyName && item.companyName.length === 1) {
+  if (item.companyName && item.companyName.length === 1) {
     visitor.company = item.companyName?.[0] || visitor.company;
   }
 
-  if(item.companyName && item.companyName.length > 1){
+  if (item.companyName && item.companyName.length > 1) {
     visitor.company = ""
   }
 

package/composables/useEquipment.ts

@@ -27,6 +27,7 @@ export default function useEquipment() {
           name: payload.name,
           unitOfMeasurement: payload.unitOfMeasurement,
           serviceType,
+          ...(payload.attachment ? { attachment: payload.attachment } : {}),
         },
       }
     );
@@ -40,6 +41,7 @@ export default function useEquipment() {
         body: {
           name: payload.name,
           unitOfMeasurement: payload.unitOfMeasurement,
+          ...(payload.attachment ? { attachment: payload.attachment } : {}),
         },
       }
     );

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.0.31-staging.19",
+  "version": "3.0.31-staging.21",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/types/equipment.d.ts

@@ -6,6 +6,10 @@ declare type TEquipment = {
   unitOfMeasurement: string;
   createdAt: string;
   updatedAt: string;
+  attachment?: string;
 };
 
-declare type TEquipmentCreate = Pick<TEquipment, "name" | "unitOfMeasurement">;
+declare type TEquipmentCreate = Pick<
+  TEquipment,
+  "name" | "unitOfMeasurement" | "attachment"
+>;