@7365admin1/layer-common 1.10.0 → 1.10.2

package/components/CheckoutItemMain.vue

@@ -0,0 +1,705 @@
+<template>
+  <v-row no-gutters align="center" justify="center">
+    <v-col cols="12" lg="12">
+      <TableMain
+        :title="`${siteName} Units`"
+        :items="items"
+        :headers="headers"
+        :loading="loading"
+        :show-header="true"
+        v-model:page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        :no-data-text="`No supplies found for ${siteName}.`"
+        @refresh="getCheckoutItemsRefresh"
+        :canCreate="canCreateCheckout"
+        createLabel="Checkout Item"
+        @row-click="handleRowClick"
+      >
+        <template #actions>
+          <v-row no-gutters align="center" class="w-100">
+            <v-col cols="auto" v-if="canCreateCheckout">
+              <v-btn
+                class="text-none"
+                rounded="pill"
+                variant="tonal"
+                size="large"
+                @click="openCheckoutDialog()"
+              >
+                Checkout Item
+              </v-btn>
+            </v-col>
+
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-text-field
+                v-model="searchInput"
+                density="compact"
+                placeholder="Search"
+                clearable
+                width="300"
+                append-inner-icon="mdi-magnify"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+        </template>
+
+        <template #item.createdAt="{ value }">
+          <span>{{ formatDate(value) }}</span>
+        </template>
+      </TableMain>
+    </v-col>
+  </v-row>
+
+  <v-dialog v-model="dialogShowMoreActions" width="400" persistent>
+    <HygieneUpdateMoreAction
+      :title="selectedSupply?.name"
+      :canDelete="false"
+      :canUpdate="false"
+      :canApprove="false"
+      :canDisapprove="false"
+      :disabled="true"
+      @close="dialogShowMoreActions = false"
+    >
+      <template #content>
+        <v-row no-gutters>
+          <v-col v-if="selectedSupply" cols="12" class="mb-2">
+            <v-row
+              no-gutters
+              class="mb-3"
+              v-if="
+                selectedSupply.attachment && selectedSupply.attachment.length
+              "
+            >
+              <v-col cols="12" class="d-flex justify-center">
+                <v-sheet
+                  rounded="lg"
+                  class="overflow-hidden"
+                  style="width: 100%; max-width: 360px; cursor: pointer"
+                >
+                  <v-img
+                    :src="getFileUrl(selectedSupply.attachment[0])"
+                    height="180"
+                    cover
+                    class="rounded-lg"
+                    @click="viewAttachment(selectedSupply.attachment[0])"
+                  >
+                    <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>
+
+            <v-row
+              no-gutters
+              class="mb-3"
+              v-if="
+                selectedSupply.attachment &&
+                selectedSupply.attachment.length > 1
+              "
+            >
+              <v-col cols="12">
+                <v-row no-gutters>
+                  <v-col
+                    v-for="(attId, i) in selectedSupply.attachment.slice(1)"
+                    :key="attId + '-' + i"
+                    cols="auto"
+                    class="pa-1"
+                  >
+                    <v-sheet
+                      rounded="sm"
+                      style="
+                        width: 72px;
+                        height: 56px;
+                        overflow: hidden;
+                        cursor: pointer;
+                      "
+                      @click="viewAttachment(attId)"
+                    >
+                      <v-img :src="getFileUrl(attId)" height="56" cover />
+                    </v-sheet>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+
+            <v-row no-gutters class="mb-2">
+              <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+                Name:
+              </v-col>
+              <v-col cols="7" 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">
+                Checkout Quantity:
+              </v-col>
+              <v-col cols="7" 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">
+                Unit of Measurement:
+              </v-col>
+              <v-col cols="7" 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>
+              <v-col cols="7" class="text-subtitle-2">
+                {{ selectedSupply.stockQty || "N/A" }}
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </template>
+    </HygieneUpdateMoreAction>
+  </v-dialog>
+
+  <!-- Main Checkout Dialog -->
+  <v-dialog v-model="dialogCheckoutItem" max-width="540" persistent>
+    <v-card>
+      <v-card-title class="d-flex align-center pa-4">
+        <span class="text-h6 font-weight-bold">Checkout Item</span>
+        <v-spacer />
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          size="small"
+          @click="dialogCheckoutItem = false"
+        />
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="pa-6">
+        <v-form ref="checkoutItemFormRef">
+          <!-- Add Supply Section -->
+          <v-row no-gutters class="mb-4">
+            <v-col cols="12">
+              <InputLabel for="supply" title="Add Supply" class="mb-2" />
+              <v-autocomplete
+                v-model="selectedSupplyForAdd"
+                :items="supplyItems"
+                :loading="loading"
+                item-title="name"
+                item-value="value"
+                density="comfortable"
+                variant="outlined"
+                placeholder="Select supply"
+                @update:model-value="addSupplyToList"
+              />
+            </v-col>
+          </v-row>
+
+          <!-- Selected Supplies List -->
+          <v-row no-gutters v-if="checkoutItems.length > 0" class="mb-4">
+            <v-col cols="12">
+              <v-divider class="mb-4" />
+
+              <div class="text-subtitle-2 font-weight-bold mb-3">
+                Selected Supplies
+              </div>
+
+              <v-sheet
+                v-for="(item, index) in checkoutItems"
+                :key="index"
+                rounded="lg"
+                variant="outlined"
+                class="pa-3 mb-3"
+              >
+                <v-row no-gutters align="center">
+                  <v-col cols="12" md="8" class="pr-md-4 mb-2 mb-md-0">
+                    <div class="text-body-2 font-weight-medium">
+                      <span class="text-capitalize">{{ item.supplyName }}</span>
+                      - (Available:
+                      <span class="font-weight-bold">{{ item.qty }}</span
+                      >)
+                    </div>
+                  </v-col>
+
+                  <v-col
+                    cols="12"
+                    md="4"
+                    class="d-flex justify-end align-center"
+                  >
+                    <v-text-field
+                      v-model.number="item.qty"
+                      :rules="[requiredRule]"
+                      density="compact"
+                      variant="outlined"
+                      type="number"
+                      min="1"
+                      hide-details
+                      style="max-width: 120px"
+                      class="mr-2"
+                    />
+
+                    <v-menu location="bottom end">
+                      <template #activator="{ props }">
+                        <v-btn
+                          v-bind="props"
+                          icon="mdi-dots-vertical"
+                          variant="text"
+                          size="small"
+                        />
+                      </template>
+
+                      <v-list density="compact" min-width="180">
+                        <v-list-item @click="openPhotoDialog(index)">
+                          <template #prepend>
+                            <v-icon size="18">mdi-camera-outline</v-icon>
+                          </template>
+                          <v-list-item-title>Upload Photo/s</v-list-item-title>
+                        </v-list-item>
+
+                        <v-list-item
+                          @click="removeSupplyFromList(index)"
+                          class="text-error"
+                        >
+                          <template #prepend>
+                            <v-icon size="18" color="error"
+                              >mdi-delete-outline</v-icon
+                            >
+                          </template>
+                          <v-list-item-title>Remove Supply</v-list-item-title>
+                        </v-list-item>
+                      </v-list>
+                    </v-menu>
+                  </v-col>
+                </v-row>
+
+                <!-- Photo Preview -->
+                <v-row
+                  v-if="item.photoIds && item.photoIds.length"
+                  no-gutters
+                  class="mt-3"
+                >
+                  <v-col
+                    v-for="(pid, pidx) in item.photoIds"
+                    :key="pid + '-' + pidx"
+                    cols="auto"
+                    class="pa-1"
+                  >
+                    <v-sheet
+                      rounded="sm"
+                      class="photo-thumb"
+                      @click="viewAttachment(pid)"
+                    >
+                      <v-img
+                        :src="getFileUrl(pid)"
+                        height="64"
+                        width="88"
+                        cover
+                      />
+                    </v-sheet>
+                  </v-col>
+                </v-row>
+
+                <!-- Empty photo hint -->
+                <v-row v-else no-gutters class="mt-2">
+                  <v-col cols="12">
+                    <div class="text-caption text-medium-emphasis">
+                      No photos attached
+                    </div>
+                  </v-col>
+                </v-row>
+              </v-sheet>
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="pa-0">
+        <v-row no-gutters>
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="text"
+              size="large"
+              height="56"
+              class="text-none font-weight-medium rounded-0"
+              @click="dialogCheckoutItem = false"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              size="large"
+              height="56"
+              class="text-none font-weight-bold rounded-0"
+              :loading="submitting"
+              @click="_checkoutItem()"
+            >
+              Checkout Item
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+
+  <v-dialog v-model="dialogPhotoForItem" 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">Item Photos</div>
+          <div class="text-caption text-medium-emphasis">
+            {{ checkoutItems[activePhotoIndex ?? 0]?.supplyName || "Item" }}
+          </div>
+        </div>
+
+        <v-spacer />
+
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          size="small"
+          @click="dialogPhotoForItem = false"
+        />
+      </v-card-title>
+
+      <v-divider />
+
+      <!-- Body -->
+      <v-card-text class="pa-6" v-if="activePhotoIndex !== null">
+        <PhotoUpload
+          title="Add / Take Photos"
+          v-model="currentPhotos"
+          v-model:photo-ids="currentPhotoIds"
+          @error="showMessage($event, 'error')"
+        />
+      </v-card-text>
+
+      <v-divider />
+
+      <!-- Footer -->
+      <v-card-actions class="pa-0">
+        <v-row no-gutters class="w-100">
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="text"
+              size="large"
+              height="56"
+              class="text-none font-weight-medium rounded-0"
+              @click="dialogPhotoForItem = false"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              size="large"
+              height="56"
+              class="text-none font-weight-bold rounded-0"
+              @click="dialogPhotoForItem = false"
+            >
+              Done
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import useCheckout from "../composables/useCheckout";
+import { useCheckoutPermission } from "../composables/useCheckoutPermission";
+import useSupply from "../composables/useSupply";
+
+const props = defineProps({
+  orgId: { type: String, default: "" },
+  site: { type: String, default: "" },
+});
+
+const { canCreateCheckout } = useCheckoutPermission();
+
+const items = ref<Array<Record<string, any>>>([]);
+const siteName = ref<string>("");
+const submitting = ref(false);
+
+const headers = [
+  { title: "Date", value: "createdAt" },
+  { title: "Name", value: "supplyName" },
+  { title: "Checkout Qty", value: "checkOutQty" },
+  { title: "Checkout By", value: "checkOutByName" },
+  { title: "Available Stock Qty", value: "supplyQty" },
+];
+
+const {
+  getCheckoutItems,
+  getCheckoutItemById,
+  checkoutItems: checkoutItemApi,
+} = useCheckout();
+const { debounce, requiredRule, formatDate } = useUtils();
+
+const searchInput = ref("");
+const startDate = ref("");
+const endDate = ref("");
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const selectedCheckoutItemId = ref("");
+
+const {
+  data: getCheckoutItemsReq,
+  refresh: getCheckoutItemsRefresh,
+  pending: loading,
+} = await useLazyAsyncData(
+  "get-all-checkout-items",
+  () =>
+    getCheckoutItems({
+      page: page.value,
+      search: searchInput.value,
+      site: props.site,
+    }),
+  {
+    watch: [page, () => props.site],
+  }
+);
+
+watchEffect(() => {
+  if (getCheckoutItemsReq.value) {
+    items.value = getCheckoutItemsReq.value.items;
+    pages.value = getCheckoutItemsReq.value.pages;
+    pageRange.value = getCheckoutItemsReq.value.pageRange;
+  }
+});
+
+const debounceSearch = debounce(getCheckoutItemsRefresh, 500);
+watch(
+  [searchInput, endDate, startDate],
+  ([]) => {
+    debounceSearch();
+  },
+  { immediate: false, deep: true }
+);
+
+const { data: getCheckoutItemByIdReq, refresh: getCheckoutItemByIdRefresh } =
+  await useLazyAsyncData(
+    "get-checkout-item-by-id",
+    () => getCheckoutItemById(selectedCheckoutItemId.value),
+    {
+      immediate: false,
+    }
+  );
+
+watchEffect(() => {
+  if (getCheckoutItemByIdReq.value) {
+    selectedSupply.value = {
+      _id: getCheckoutItemByIdReq.value._id,
+      supplyName: getCheckoutItemByIdReq.value.supplyName || "N/A",
+      qty: getCheckoutItemByIdReq.value.qty || 0,
+      unitOfMeasurement:
+        getCheckoutItemByIdReq.value.supply?.unitOfMeasurement || "N/A",
+      status: getCheckoutItemByIdReq.value.status || "N/A",
+      site: getCheckoutItemByIdReq.value.site || "N/A",
+      supply:
+        getCheckoutItemByIdReq.value.supply ||
+        getCheckoutItemByIdReq.value.supply?._id ||
+        "N/A",
+      attachment: Array.isArray(getCheckoutItemByIdReq.value.attachment)
+        ? [...getCheckoutItemByIdReq.value.attachment]
+        : [],
+      stockQty:
+        getCheckoutItemByIdReq.value.stockQty ||
+        getCheckoutItemByIdReq.value.supply?.stockQty ||
+        "N/A",
+    };
+  }
+});
+
+const { getSupplies } = useSupply();
+
+const { data: getSuppliesReq } = await useLazyAsyncData(
+  "get-supplies-for-checkout-item",
+  () =>
+    getSupplies({
+      site: props.site,
+      limit: 100,
+    }),
+  {}
+);
+
+watchEffect(() => {
+  if (getSuppliesReq.value) {
+    supplyItems.value = getSuppliesReq.value.items.map((item: any) => ({
+      name: item.name,
+      value: item._id,
+    }));
+  }
+});
+
+const supplyItems = ref<Array<{ name: string; value: string }>>([]);
+const selectedSupplyForAdd = ref<string>("");
+const checkoutItems = ref<TCheckoutItem[]>([]);
+
+const selectedSupply = ref<Record<string, any>>({});
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const dialogShowMoreActions = ref(false);
+const dialogCheckoutItem = ref(false);
+const dialogPhotoForItem = ref(false);
+const activePhotoIndex = ref<number | null>(null);
+
+function showMessage(msg: string, color: string = "error") {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function openCheckoutDialog() {
+  checkoutItems.value = [];
+  selectedSupplyForAdd.value = "";
+  dialogCheckoutItem.value = true;
+}
+
+function addSupplyToList(supplyId: string) {
+  if (!supplyId) return;
+
+  const exists = checkoutItems.value.find((item) => item.supply === supplyId);
+  if (exists) {
+    showMessage("Supply already added.");
+    selectedSupplyForAdd.value = "";
+    return;
+  }
+
+  const supply = supplyItems.value.find((s) => s.value === supplyId);
+  if (supply) {
+    checkoutItems.value.push({
+      supply: supplyId,
+      supplyName: supply.name,
+      qty: 1,
+      photos: [],
+      photoIds: [],
+    });
+  }
+  selectedSupplyForAdd.value = "";
+}
+
+function removeSupplyFromList(index: number) {
+  checkoutItems.value.splice(index, 1);
+}
+
+function openPhotoDialog(index: number) {
+  activePhotoIndex.value = index;
+  dialogPhotoForItem.value = true;
+}
+
+async function handleRowClick(data: any) {
+  message.value = "";
+
+  selectedCheckoutItemId.value = data?.item?._id;
+
+  if (selectedCheckoutItemId.value) {
+    await getCheckoutItemByIdRefresh();
+  }
+
+  dialogShowMoreActions.value = true;
+}
+
+async function _checkoutItem() {
+  submitting.value = true;
+  try {
+    if (!checkoutItems.value.length) {
+      showMessage("Add at least one supply.");
+      submitting.value = false;
+      return;
+    }
+
+    const items = checkoutItems.value.map((item) => ({
+      supply: item.supply,
+      qty: item.qty,
+      ...(item.photoIds && item.photoIds.length
+        ? { attachment: [...item.photoIds] }
+        : {}),
+    }));
+
+    await checkoutItemApi(props.site, { items });
+
+    showMessage(
+      `Checked out ${checkoutItems.value.length} item(s).`,
+      "success"
+    );
+    dialogCheckoutItem.value = false;
+    checkoutItems.value = [];
+
+    await getCheckoutItemsRefresh();
+  } catch (error: any) {
+    console.error(error);
+    showMessage(error?.data?.message, "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+
+const { getFileUrl } = useFile();
+
+function viewAttachment(attachmentId: string) {
+  if (!attachmentId) return;
+  const url = getFileUrl(attachmentId);
+  window.open(url, "_blank");
+}
+
+const currentPhotos = computed({
+  get() {
+    if (activePhotoIndex.value === null) return [];
+    return checkoutItems.value[activePhotoIndex.value]?.photos || [];
+  },
+  set(val) {
+    if (activePhotoIndex.value === null) return;
+    checkoutItems.value[activePhotoIndex.value].photos = val || [];
+  },
+});
+
+const currentPhotoIds = computed({
+  get() {
+    if (activePhotoIndex.value === null) return [];
+    return checkoutItems.value[activePhotoIndex.value]?.photoIds || [];
+  },
+  set(val) {
+    if (activePhotoIndex.value === null) return;
+    checkoutItems.value[activePhotoIndex.value].photoIds = val || [];
+  },
+});
+</script>
+
+<style scoped></style>