@7365admin1/layer-common 1.8.0

package/components/BuildingManagement/units.vue

@@ -0,0 +1,350 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters>
+        <v-btn class="text-none" rounded="pill" variant="tonal" @click="setBuilding()" size="large"
+          v-if="canCreate && canCreateUnit">
+          Add Unit
+        </v-btn>
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="getBuildingUnit()">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination v-model="page" :length="pages" @update:value="getBuildingUnit()" />
+            </v-row>
+          </template>
+        </v-toolbar>
+
+        <v-data-table :headers="props.headers" :items="items" item-value="_id" items-per-page="20" fixed-header
+          hide-default-footer hide-default-header @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (200px))">
+          <template #item.block="{ value }">
+            {{ value ? `blk ${value}` : "" }}
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+
+    <!-- Create Dialog -->
+    <v-dialog v-model="createDialog" width="450" persistent>
+      <BuildingUnitFormAdd :site="site" @cancel="createDialog = false" @success="successCreate()"
+        @success:create-more="getBuildingUnit()" />
+    </v-dialog>
+
+    <!-- Edit Dialog -->
+    <v-dialog v-model="dialogEdit" width="450" persistent>
+      <BuildingUnitFormEdit v-if="selectedBuildingUnit" @cancel="dialogEdit = false" @success="successUpdate()"
+        :roomFacility="selectedBuildingUnit" />
+    </v-dialog>
+
+    <!-- Preview Dialog -->
+    <v-dialog v-if="canViewUnitDetails" v-model="dialogPreview" width="450" persistent>
+      <v-card width="100%">
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+          <v-row no-gutters v-if="selectedBuildingUnit" class="mb-4">
+            <v-col cols="12">
+              <strong>Name:</strong> {{ selectedBuildingUnit.name }}
+            </v-col>
+
+            <v-col cols="12">
+              <strong>Block:</strong>
+              {{ selectedBuildingUnit.block }}
+            </v-col>
+
+            <v-col cols="12">
+              <strong>Floors:</strong>
+              {{ selectedBuildingUnit.level }}
+            </v-col>
+
+            <v-col cols="12">
+              <strong>Category:</strong>
+              {{ selectedBuildingUnit.category }}
+            </v-col>
+
+            <template v-if="selectedBuildingUnit?.buildingUnitFiles.length > 0">
+              <v-col cols="12">
+                <strong>Uploaded Files:</strong>
+              </v-col>
+              <v-col cols="12">
+                <InputFileV2 :model-value="selectedBuildingUnit?.buildingUnitFiles" view-mode />
+              </v-col>
+            </template>
+          </v-row>
+        </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="dialogPreview = false" height="48">
+                Close
+              </v-btn>
+            </v-col>
+
+            <v-col cols="6" class="pa-0" v-if="canUpdate">
+              <v-menu>
+                <template #activator="{ props }">
+                  <v-btn block variant="flat" color="black" class="text-none" height="48" v-bind="props" tile
+                    :disabled="!canUpdateUnit && !canDeleteUnit">
+                    More actions
+                  </v-btn>
+                </template>
+
+                <v-list class="pa-0">
+                  <v-list-item v-if="canUpdateUnit" @click="openEditDialog()">
+                    <v-list-item-title class="text-subtitle-2">
+                      Edit Unit
+                    </v-list-item-title>
+                  </v-list-item>
+
+                  <v-list-item v-if="canDeleteUnit" @click="openDeleteDialog()" class="text-red">
+                    <v-list-item-title class="text-subtitle-2">
+                      Delete Unit
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="dialogDelete" :loading="deleteLoading" width="450" persistent>
+      <v-card width="100%">
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h5">Delete Unit</span>
+        </v-toolbar>
+
+        <v-card-text>
+          <p class="text-subtitle-2 text-center">
+            Are you sure you want to delete this unit? This action cannot be
+            undone.
+          </p>
+
+          <v-row v-if="message" no-gutters justify="center" class="mt-4">
+            <span class="text-caption text-error text-center">
+              {{ message }}
+            </span>
+          </v-row>
+        </v-card-text>
+
+        <v-toolbar density="compact">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <v-btn tile block size="48" variant="text" class="text-none" @click="dialogDelete = false"
+                :disabled="deleteLoading">
+                Close
+              </v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn tile block size="48" color="black" variant="flat" class="text-none"
+                @click="handleDeleteBuildingUnit" :loading="deleteLoading">
+                Delete Unit
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [
+      {
+        title: "Name",
+        value: "name",
+      },
+      {
+        title: "Building",
+        value: "buildingName",
+      },
+      {
+        title: "Block",
+        value: "block",
+      },
+      {
+        title: "Floor",
+        value: "level",
+      },
+      {
+        title: "Category",
+        value: "category",
+      },
+      {
+        title: "Type",
+        value: "type",
+      },
+      { title: "Action", value: "action-table" },
+    ],
+  },
+  canCreate: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  canCreateUnit: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdateUnit: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteUnit: {
+    type: Boolean,
+    default: true,
+  },
+  canViewUnitDetails: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const site = (useRoute().params.site as string) ?? "";
+const status = (useRoute().params.status as string) ?? "active";
+
+const { toOrdinal } = useUtils();
+
+const { headerSearch } = useLocal();
+const { getAll, deleteById } = useBuildingUnit();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const {
+  data: getBuildingReq,
+  refresh: getBuildingUnit,
+  status: getBuildingReqStatus,
+} = useLazyAsyncData(
+  "get-all-building-units",
+  () =>
+    getAll({
+      page: page.value,
+      search: headerSearch.value,
+      status,
+      site: site,
+    }),
+  {
+    watch: [page, headerSearch],
+  }
+);
+
+const loading = computed(() => getBuildingReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getBuildingReq.value) {
+    items.value = getBuildingReq.value.items;
+    pages.value = getBuildingReq.value.pages;
+    pageRange.value = getBuildingReq.value.pageRange;
+  }
+});
+
+function tableRowClickHandler(_: any, data: any) {
+  selectedBuildingUnit.value = data.item;
+  dialogPreview.value = true;
+}
+
+const createDialog = ref(false);
+const dialogEdit = ref(false);
+const dialogPreview = ref(false);
+const selectedBuildingUnit = ref<TBuildingUnit | null>(null);
+
+function successCreate() {
+  createDialog.value = false;
+  getBuildingUnit();
+  showMessage("Unit created successfully!", "success");
+}
+
+function successUpdate() {
+  dialogEdit.value = false;
+  dialogPreview.value = false;
+  getBuildingUnit();
+  showMessage("Unit updated successfully!", "success");
+}
+
+function openEditDialog() {
+  dialogEdit.value = true;
+  if (dialogPreview.value) {
+    dialogPreview.value = false;
+  }
+}
+
+const dialogDelete = ref(false);
+const deleteLoading = ref(false);
+
+function openDeleteDialog() {
+  dialogDelete.value = true;
+  message.value = "";
+  if (dialogPreview.value) {
+    dialogPreview.value = false;
+  }
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+async function handleDeleteBuildingUnit() {
+  deleteLoading.value = true;
+  try {
+    await deleteById(selectedBuildingUnit.value?._id ?? "");
+    await getBuildingUnit();
+    dialogDelete.value = false;
+    selectedBuildingUnit.value = null;
+  } catch (error: any) {
+    message.value = error?.response?._data?.message || "Failed to delete unit";
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+
+function setBuilding({
+  mode = "create",
+  dialog = true,
+  data = {} as TBuildingUnit,
+} = {}) {
+  if (mode === "create") {
+    createDialog.value = dialog;
+  } else if (mode === "edit") {
+    dialogEdit.value = dialog;
+    selectedBuildingUnit.value = data;
+  } else if (mode === "preview") {
+    dialogPreview.value = dialog;
+    selectedBuildingUnit.value = data;
+  }
+}
+</script>