@7365admin1/layer-common 1.10.0 → 1.10.2

package/components/SupplyManagementMain.vue

@@ -0,0 +1,557 @@
+<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="getSuppliesRefresh"
+        :canCreate="canAddSupply"
+        createLabel="Add Supply"
+        @row-click="handleRowClick"
+      >
+        <template #actions>
+          <v-row no-gutters align="center" class="w-100">
+            <v-col cols="auto" v-if="canAddSupply">
+              <v-btn
+                class="text-none"
+                rounded="pill"
+                variant="tonal"
+                size="large"
+                @click="onCreateUnit()"
+              >
+                Add Supply
+              </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.status="{ value }">
+          <v-chip class="text-capitalize">{{ value || "N/A" }}</v-chip>
+        </template>
+
+        <template #item.block="{ value }">
+          {{ value ? `blk ${value}` : "" }}
+        </template>
+      </TableMain>
+    </v-col>
+  </v-row>
+
+  <AddSupplyForm
+    v-model="dialogShowForm"
+    v-model:name="supplyName"
+    v-model:qty="supplyQuantity"
+    v-model:unitOfMeasurement="supplyUnit"
+    :mode="dialogMode"
+    :supplyData="editingSupply"
+    :site="props.site"
+    @saved="_createSupply"
+  />
+
+  <v-dialog v-model="dialogShowMoreActions" width="400" persistent>
+    <HygieneUpdateMoreAction
+      :title="selectedSupply?.name || 'Unit Actions'"
+      :canUpdate="canUpdateSupply"
+      :canDelete="canDeleteSupply"
+      :showAddStock="canAddStock"
+      :showViewStock="canViewStock"
+      :showRequestItem="canRequestItem"
+      :manageButtonLabel="''"
+      :editButtonLabel="'Edit Supply'"
+      :deleteButtonLabel="'Delete Supply'"
+      :addStockButtonLabel="'Add Stock'"
+      :viewButtonLabel="'View Stock'"
+      :requestItemButtonLabel="'Checkout Item'"
+      @close="dialogShowMoreActions = false"
+      @edit="onEditFromMoreAction"
+      @delete="onDeleteFromMoreAction"
+      @addstock="onAddStockFromMoreAction"
+      @view-stock="onViewStockFromMoreAction"
+      @requestItem="onRequestItemFromMoreAction"
+    >
+      <template #content>
+        <v-row no-gutters>
+          <v-col v-if="selectedSupply" cols="12" class="mb-2">
+            <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.name || "N/A" }}
+              </v-col>
+            </v-row>
+
+            <v-row no-gutters class="mb-2">
+              <v-col cols="5" class="text-subtitle-2 font-weight-bold">
+                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-col cols="12" class="my-2">
+              <span class="text-subtitle-2 text-error">{{ message }}</span>
+            </v-col>
+          </v-col>
+        </v-row>
+      </template>
+    </HygieneUpdateMoreAction>
+  </v-dialog>
+
+  <v-dialog v-model="dialogDeleteSupply" max-width="450">
+    <v-card>
+      <v-toolbar>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h6 text-capitalize">
+            Delete {{ selectedSupply?.name || "Unit" }}
+          </span>
+        </v-row>
+      </v-toolbar>
+      <v-card-text>
+        <span class="text-subtitle-2"
+          >Are you sure you want to delete this unitOfMeasurement?</span
+        >
+      </v-card-text>
+
+      <v-toolbar class="pa-0" density="compact">
+        <v-row no-gutters>
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="text"
+              class="text-none"
+              size="large"
+              @click="dialogDeleteSupply = false"
+              height="48"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              class="text-none font-weight-bold"
+              height="48"
+              :loading="submitting"
+              @click="_deleteSupply"
+            >
+              Delete
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+
+  <v-dialog v-model="dialogStockAction" max-width="450">
+    <v-card>
+      <v-toolbar>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h6 text-capitalize">
+            {{ stockActionMode === "add" ? "Add Stock" : "Checkout Item" }}
+          </span>
+        </v-row>
+      </v-toolbar>
+      <v-card-text class="pa-4">
+        <v-form ref="stockActionFormRef" v-model="stockActionValid">
+          <v-row no-gutters>
+            <v-col cols="12" class="mb-4">
+              <InputLabel
+                for="stockActionQty"
+                title="Quantity"
+                required
+                class="mb-1"
+              />
+              <v-text-field
+                v-model.number="stockActionQuantity"
+                :rules="[requiredRule]"
+                density="comfortable"
+                variant="outlined"
+                type="number"
+                min="1"
+                placeholder="Enter quantity"
+                hide-details="auto"
+              />
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+
+      <v-toolbar class="pa-0" density="compact">
+        <v-row no-gutters>
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="text"
+              class="text-none"
+              size="large"
+              @click="dialogStockAction = false"
+              height="48"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              class="text-none font-weight-bold rounded-0"
+              height="48"
+              :loading="submitting"
+              @click="stockActionMode === 'add' ? _addStock() : _requestItem()"
+            >
+              {{ stockActionMode === "add" ? "Add Stock" : "Checkout Item" }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+import useSupply from "../composables/useSupply";
+import useStock from "../composables/useStock";
+import { useSupplyPermission } from "../composables/useSupplyPermission";
+
+const props = defineProps({
+  orgId: { type: String, default: "" },
+  site: { type: String, default: "" },
+});
+
+const {
+  canViewSupplies,
+  canAddSupply,
+  canUpdateSupply,
+  canDeleteSupply,
+  canAddStock,
+  canViewStock,
+  canRequestItem,
+} = useSupplyPermission();
+
+const items = ref<Array<Record<string, any>>>([]);
+const siteName = ref<string>("");
+const submitting = ref(false);
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Available Stock Qty", value: "qty" },
+  { title: "Status", value: "status" },
+];
+
+const { getSupplies, getSupplyById, createSupply, updateSupply, deleteSupply } =
+  useSupply();
+const { debounce, requiredRule } = useUtils();
+
+const searchInput = ref("");
+const startDate = ref("");
+const endDate = ref("");
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const {
+  data: getSuppliesReq,
+  refresh: getSuppliesRefresh,
+  pending: loading,
+} = await useLazyAsyncData(
+  "get-all-supplies",
+  () =>
+    getSupplies({
+      page: page.value,
+      search: searchInput.value,
+      site: props.site,
+    }),
+  {
+    watch: [page, () => props.site],
+  }
+);
+
+watchEffect(() => {
+  if (getSuppliesReq.value) {
+    items.value = getSuppliesReq.value.items;
+    pages.value = getSuppliesReq.value.pages;
+    pageRange.value = getSuppliesReq.value.pageRange;
+  }
+});
+
+const debounceSearch = debounce(getSuppliesRefresh, 500);
+watch(
+  [searchInput, endDate, startDate],
+  ([]) => {
+    debounceSearch();
+  },
+  { immediate: false, deep: true }
+);
+
+const selectedSupply = ref<Record<string, any>>({});
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const dialogShowMoreActions = ref(false);
+const dialogShowForm = ref(false);
+const dialogDeleteSupply = ref(false);
+const dialogStockAction = ref(false);
+const stockActionMode = ref<"add" | "request">("add");
+const dialogMode = ref<"add" | "edit">("add");
+
+const editingSupply = ref<Record<string, any>>({});
+const supplyName = ref("");
+const supplyQuantity = ref(0);
+const supplyUnit = ref("");
+
+const stockActionFormRef = ref<any>(null);
+const stockActionValid = ref(false);
+
+function showMessage(msg: string, color: string = "error") {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function onCreateUnit() {
+  dialogMode.value = "add";
+  editingSupply.value = {};
+  supplyName.value = "";
+  supplyQuantity.value = 0;
+  supplyUnit.value = "";
+  dialogShowForm.value = true;
+}
+
+function onSaveSupply(data: {
+  name: string;
+  qty: number;
+  unitOfMeasurement: string;
+}) {
+  showMessage("Supply saved successfully", "success");
+  getSuppliesRefresh();
+}
+
+async function _createSupply() {
+  submitting.value = true;
+  try {
+    const payload: TSupplyCreate = {
+      name: supplyName.value,
+      unitOfMeasurement: supplyUnit.value,
+    };
+
+    let response;
+
+    if (dialogMode.value === "edit" && editingSupply.value) {
+      const id =
+        (editingSupply.value as any)._id || (editingSupply.value as any).id;
+      if (!id) throw new Error("Invalid supply id for update");
+      response = await updateSupply(id, payload);
+    } else {
+      response = await createSupply(payload, props.site);
+    }
+
+    showMessage(response?.message, "success");
+    dialogShowForm.value = false;
+    editingSupply.value = {};
+    supplyName.value = "";
+    supplyQuantity.value = 0;
+    supplyUnit.value = "";
+
+    await getSuppliesRefresh();
+  } catch (error: any) {
+    console.error(error);
+    showMessage(error?.data?.message, "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+
+const selectedSupplyId = ref("");
+
+const {
+  data: getSupplyByIdReq,
+  refresh: getSupplyByIdRefresh,
+  status: getSupplyByIdStatus,
+} = await useLazyAsyncData(
+  "get-supply-by-id",
+  () => getSupplyById(selectedSupplyId.value),
+  {
+    watch: [selectedSupplyId],
+    immediate: false,
+  }
+);
+
+watchEffect(() => {
+  if (getSupplyByIdReq.value && getSupplyByIdStatus.value === "success") {
+    selectedSupply.value = getSupplyByIdReq.value;
+  }
+});
+
+async function handleRowClick(data: any) {
+  selectedSupply.value = data?.item;
+  message.value = "";
+
+  selectedSupplyId.value = selectedSupply.value._id;
+  await getSupplyByIdRefresh();
+
+  dialogShowMoreActions.value = true;
+}
+
+const onEditFromMoreAction = async () => {
+  dialogShowMoreActions.value = false;
+  if (!selectedSupply.value) return;
+
+  submitting.value = true;
+  selectedSupplyId.value = selectedSupply.value._id;
+  await getSupplyByIdRefresh();
+  submitting.value = false;
+
+  const response = getSupplyByIdReq.value;
+  if (!response) return;
+
+  dialogMode.value = "edit";
+  editingSupply.value = response;
+  supplyName.value = response.name || "";
+  supplyQuantity.value = response.qty || 0;
+  supplyUnit.value = response.unitOfMeasurement || "";
+  dialogShowForm.value = true;
+};
+
+const onDeleteFromMoreAction = () => {
+  dialogShowMoreActions.value = false;
+  dialogDeleteSupply.value = true;
+};
+
+const onAddStockFromMoreAction = () => {
+  dialogShowMoreActions.value = false;
+  stockActionMode.value = "add";
+  stockActionQuantity.value = 0;
+  stockActionRemarks.value = "";
+  dialogStockAction.value = true;
+};
+
+const onViewStockFromMoreAction = () => {
+  dialogShowMoreActions.value = false;
+  const org = props.orgId;
+  const site = props.site;
+  const id = selectedSupply.value._id;
+  useRouter().push(`/${org}/${site}/supply-management/stock/${id}`);
+};
+
+const onRequestItemFromMoreAction = () => {
+  dialogShowMoreActions.value = false;
+  stockActionMode.value = "request";
+  stockActionQuantity.value = 0;
+  stockActionRemarks.value = "";
+  dialogStockAction.value = true;
+};
+
+async function _deleteSupply() {
+  if (!selectedSupply.value) return;
+
+  try {
+    submitting.value = true;
+    const id =
+      (selectedSupply.value as any)._id || (selectedSupply.value as any).id;
+    if (!id) throw new Error("Invalid supply id");
+
+    const response = await deleteSupply(id);
+    dialogDeleteSupply.value = false;
+    showMessage(response?.message, "success");
+
+    await getSuppliesRefresh();
+  } catch (error: any) {
+    showMessage(error?.data?.message, "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+
+const { createStock, requestItem } = useStock();
+
+const stockActionQuantity = ref<number>(0);
+const stockActionRemarks = ref("");
+
+async function _addStock() {
+  submitting.value = true;
+  try {
+    const id = selectedSupply.value._id || selectedSupply.value.id;
+
+    const payload: TStockCreate = {
+      qty: stockActionQuantity.value,
+      remarks: stockActionRemarks.value,
+    };
+
+    const response = await createStock(props.site, id, payload);
+    showMessage(response?.message, "success");
+    dialogStockAction.value = false;
+    stockActionQuantity.value = 0;
+    stockActionRemarks.value = "";
+
+    await getSuppliesRefresh();
+  } catch (error: any) {
+    console.error(error);
+    showMessage(error?.data?.message, "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+
+async function _requestItem() {
+  submitting.value = true;
+  try {
+    const id = selectedSupply.value._id || selectedSupply.value.id;
+
+    const payload: TStockCreate = {
+      qty: stockActionQuantity.value,
+    };
+
+    const response = await requestItem(props.site, id, payload);
+    showMessage(response?.message, "success");
+    dialogStockAction.value = false;
+    stockActionQuantity.value = 0;
+
+    await getSuppliesRefresh();
+  } catch (error: any) {
+    console.error(error);
+    showMessage(error?.data?.message, "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>