@7365admin1/layer-common 3.0.19 → 3.0.21

package/components/EquipmentItemMain.vue

@@ -55,18 +55,19 @@
 
   <v-dialog v-model="dialogShowMoreActions" width="400" persistent>
     <HygieneUpdateMoreAction
-      :title="selectedSupply?.name"
+      title="Preview"
       :canDelete="false"
       :canUpdate="false"
       :canApprove="false"
       :canDisapprove="false"
       :disabled="true"
+      :showMoreActions="false"
       @close="dialogShowMoreActions = false"
     >
       <template #content>
         <v-row no-gutters>
           <v-col v-if="selectedSupply" cols="12" class="mb-2">
-            <v-row
+            <!-- <v-row
               no-gutters
               class="mb-3"
               v-if="
@@ -81,8 +82,8 @@
                 >
                   <v-img
                     :src="getFileUrl(selectedSupply.attachment[0])"
-                    height="180"
-                    cover
+                    height="350"
+                    contain
                     class="rounded-lg"
                     @click="viewAttachment(selectedSupply.attachment[0])"
                   >
@@ -101,35 +102,56 @@
                   </v-img>
                 </v-sheet>
               </v-col>
-            </v-row>
+            </v-row> -->
 
             <v-row
               no-gutters
               class="mb-3"
               v-if="
-                selectedSupply.attachment &&
-                selectedSupply.attachment.length > 1
+                selectedSupply.attachment && selectedSupply.attachment.length
               "
             >
               <v-col cols="12">
-                <v-row no-gutters>
+                <v-row
+                  no-gutters
+                  :class="
+                    selectedSupply.attachment.length > 1
+                      ? 'flex-wrap'
+                      : 'justify-center'
+                  "
+                >
                   <v-col
-                    v-for="(attId, i) in selectedSupply.attachment.slice(1)"
-                    :key="attId + '-' + i"
-                    cols="auto"
+                    v-for="(attId, i) in selectedSupply.attachment"
+                    :key="i"
+                    cols="6"
                     class="pa-1"
                   >
                     <v-sheet
                       rounded="sm"
-                      style="
-                        width: 72px;
-                        height: 56px;
-                        overflow: hidden;
-                        cursor: pointer;
-                      "
-                      @click="viewAttachment(attId)"
+                      class="border-md pa-1"
+                      style="overflow: hidden; cursor: pointer"
                     >
-                      <v-img :src="getFileUrl(attId)" height="56" cover />
+                      <v-img
+                        :src="getFileUrl(attId)"
+                        :height="
+                          selectedSupply.attachment.length > 1 ? 100 : '100%'
+                        "
+                        contain
+                        @click="viewAttachment(attId)"
+                      >
+                        <template v-slot:placeholder>
+                          <v-row
+                            class="fill-height ma-0"
+                            align="center"
+                            justify="center"
+                          >
+                            <v-progress-circular
+                              indeterminate
+                              color="grey-lighten-4"
+                            />
+                          </v-row>
+                        </template>
+                      </v-img>
                     </v-sheet>
                   </v-col>
                 </v-row>
@@ -137,37 +159,37 @@
             </v-row>
 
             <v-row no-gutters class="mb-2">
-              <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+              <v-col cols="6" class="text-subtitle-2 font-weight-bold">
                 Name:
               </v-col>
-              <v-col cols="7" class="text-subtitle-2">
+              <v-col cols="6" class="text-subtitle-2">
                 {{ selectedSupply.supplyName || "N/A" }}
               </v-col>
             </v-row>
 
             <v-row no-gutters class="mb-2">
-              <v-col cols="5" class="text-subtitle-2 font-weight-bold">
-                Equipment Quantity:
+              <v-col cols="6" class="text-subtitle-2 font-weight-bold">
+                Checkout Quantity:
               </v-col>
-              <v-col cols="7" class="text-subtitle-2">
+              <v-col cols="6" class="text-subtitle-2">
                 {{ selectedSupply.qty || "N/A" }}
               </v-col>
             </v-row>
 
             <v-row no-gutters class="mb-2">
-              <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+              <v-col cols="6" class="text-subtitle-2 font-weight-bold">
                 Unit of Measurement:
               </v-col>
-              <v-col cols="7" class="text-subtitle-2">
+              <v-col cols="6" class="text-subtitle-2">
                 {{ selectedSupply.unitOfMeasurement || "N/A" }}
               </v-col>
             </v-row>
 
             <v-row no-gutters class="mb-2">
-              <v-col cols="5" class="text-subtitle-2 font-weight-bold">
-                Stock Quantity:
+              <v-col cols="6" class="text-subtitle-2 font-weight-bold">
+                Available Stock Quantity:
               </v-col>
-              <v-col cols="7" class="text-subtitle-2">
+              <v-col cols="6" class="text-subtitle-2">
                 {{ selectedSupply.stockQty || "N/A" }}
               </v-col>
             </v-row>
@@ -246,14 +268,26 @@
                   >
                     <v-text-field
                       v-model.number="item.qty"
-                      :rules="[requiredRule]"
+                      :rules="
+                        (item.stockQty ?? 0) === 0
+                          ? []
+                          : [
+                              requiredRule,
+                              (v) => v > 0 || 'Must be greater than 0',
+                              (v) =>
+                                v <= (item.stockQty ?? 0) ||
+                                'Exceeds stock limits',
+                            ]
+                      "
                       density="compact"
                       variant="outlined"
                       type="number"
                       min="1"
-                      hide-details
-                      style="max-width: 120px"
+                      :max="item.stockQty ?? 0"
+                      hide-details="auto"
+                      style="max-width: 150px"
                       class="mr-2"
+                      :disabled="(item.stockQty ?? 0) === 0"
                     />
 
                     <v-menu location="bottom end">
@@ -290,6 +324,15 @@
                       </v-list>
                     </v-menu>
                   </v-col>
+
+                  <v-col
+                    v-if="item.stockQty == 0"
+                    cols="12"
+                    md="4"
+                    class="d-flex align-center text-error"
+                  >
+                    Insufficient stock
+                  </v-col>
                 </v-row>
 
                 <!-- Photo Preview -->
@@ -360,7 +403,7 @@
               :loading="submitting"
               @click="_equipmentItem()"
             >
-              Equipment Item
+              Checkout Item
             </v-btn>
           </v-col>
         </v-row>
@@ -437,6 +480,32 @@
       </v-card-actions>
     </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">
+        <div>
+          <div class="text-h6 font-weight-bold">Attachment</div>
+        </div>
+
+        <v-spacer />
+
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          size="small"
+          @click="(showAttachmentDialog = false), (attachmentUrl = '')"
+        />
+      </v-card-title>
+
+      <v-divider />
+
+      <!-- Body -->
+      <v-card-text class="pa-6">
+        <v-img :src="attachmentUrl" contain />
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
@@ -535,7 +604,7 @@ watchEffect(() => {
       supplyName: getEquipmentItemByIdReq.value.supplyName || "N/A",
       qty: getEquipmentItemByIdReq.value.qty || 0,
       unitOfMeasurement:
-        getEquipmentItemByIdReq.value.supply?.unitOfMeasurement || "N/A",
+        getEquipmentItemByIdReq.value.unitOfMeasurement || "N/A",
       status: getEquipmentItemByIdReq.value.status || "N/A",
       site: getEquipmentItemByIdReq.value.site || "N/A",
       supply:
@@ -555,16 +624,17 @@ watchEffect(() => {
 
 const { getSupplies } = useEquipmentManagement();
 
-const { data: getSuppliesReq } = await useLazyAsyncData(
-  "get-supplies-for-equipment-item",
-  () =>
-    getSupplies({
-      site: props.site,
-      limit: 100,
-      serviceType: props.serviceType,
-    }),
-  {}
-);
+const { data: getSuppliesReq, refresh: getSuppliesRefresh } =
+  await useLazyAsyncData(
+    "get-supplies-for-equipment-item",
+    () =>
+      getSupplies({
+        site: props.site,
+        limit: 100,
+        serviceType: props.serviceType,
+      }),
+    {}
+  );
 
 watchEffect(() => {
   if (getSuppliesReq.value) {
@@ -658,7 +728,34 @@ async function _equipmentItem() {
       return;
     }
 
-    const items = equipmentItems.value.map((item) => ({
+    const validItems = equipmentItems.value.filter(
+      (item) => (item.stockQty ?? 0) > 0
+    );
+
+    if (validItems.length === 0) {
+      showMessage("None of the selected equipment has available stock.");
+      submitting.value = false;
+      return;
+    }
+
+    for (const item of validItems) {
+      if (item.qty > (item.stockQty ?? 0)) {
+        showMessage(
+          `Checkout quantity for ${item.supplyName} exceeds available stock (${
+            item.stockQty ?? 0
+          }).`
+        );
+        submitting.value = false;
+        return;
+      }
+      if (!item.qty || item.qty <= 0) {
+        showMessage(`Quantity for ${item.supplyName} must be at least 1.`);
+        submitting.value = false;
+        return;
+      }
+    }
+
+    const items = validItems.map((item) => ({
       supply: item.supply,
       qty: item.qty,
       ...(item.photoIds && item.photoIds.length
@@ -666,7 +763,10 @@ async function _equipmentItem() {
         : {}),
     }));
 
-    await equipmentItemApi(props.site, { items, serviceType: props.serviceType });
+    await equipmentItemApi(props.site, {
+      items,
+      serviceType: props.serviceType,
+    });
 
     showMessage(
       `Checked out ${equipmentItems.value.length} item(s).`,
@@ -676,6 +776,7 @@ async function _equipmentItem() {
     equipmentItems.value = [];
 
     await getEquipmentItemsRefresh();
+    await getSuppliesRefresh();
   } catch (error: any) {
     console.error(error);
     showMessage(error?.data?.message, "error");
@@ -685,11 +786,14 @@ async function _equipmentItem() {
 }
 
 const { getFileUrl } = useFile();
+const showAttachmentDialog = ref(false);
+const attachmentUrl = ref("");
 
 function viewAttachment(attachmentId: string) {
   if (!attachmentId) return;
   const url = getFileUrl(attachmentId);
-  window.open(url, "_blank");
+  showAttachmentDialog.value = true;
+  attachmentUrl.value = url;
 }
 
 const currentPhotos = computed({

package/components/EquipmentManagementMain.vue

@@ -242,7 +242,11 @@
     </v-card>
   </v-dialog>
 
-  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  <Snackbar
+    v-model="messageSnackbar"
+    :text="snackbarMessage"
+    :color="messageColor"
+  />
 </template>
 <script setup lang="ts">
 import useEquipment from "../composables/useEquipment";
@@ -352,8 +356,11 @@ const equipmentUnit = ref("");
 const stockActionFormRef = ref<any>(null);
 const stockActionValid = ref(false);
 
+const snackbarMessage = ref("");
+
 function showMessage(msg: string, color: string = "error") {
   message.value = msg;
+  snackbarMessage.value = msg;
   messageColor.value = color;
   messageSnackbar.value = true;
 }