@7365admin1/layer-common 3.0.31-staging.20 → 3.0.31-staging.22

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/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/composables/useLocalAuth.ts

@@ -183,4 +183,4 @@ export default function useLocalAuth() {
     updateVerificationStatus,
     signUp,
   };
-}
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.0.31-staging.20",
+  "version": "3.0.31-staging.22",
   "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"
+>;