@iservice365/layer-common 1.5.7 → 1.7.0

package/components/AccessManagement.vue

@@ -0,0 +1,414 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters align="center" justify="space-between">
+        <v-btn
+          class="text-none"
+          rounded="pill"
+          variant="tonal"
+          size="large"
+          @click="setCard()"
+          v-if="canCreate && canCreateAccessCard"
+        >
+          Add Access Card
+        </v-btn>
+
+        <v-text-field
+          v-model="searchText"
+          placeholder="Search Card, Unit..."
+          variant="outlined"
+          density="comfortable"
+          clearable
+          hide-details
+          class="ml-2"
+          style="max-width: 250px"
+        />
+      </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="getCards">
+              <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="getCards"
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="10"
+          fixed-header
+          hide-default-footer
+          @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (200px))"
+        />
+      </v-card>
+    </v-col>
+
+    <!-- Create Dialog -->
+    <v-dialog v-model="createDialog" width="650" persistent>
+      <AccessCardAddForm
+        @cancel="createDialog = false"
+        @success="successCreate()"
+      />
+    </v-dialog>
+
+    <!-- Edit Dialog -->
+    <v-dialog v-model="editDialog" width="650" persistent>
+      <AccessCardAddForm
+        mode="edit"
+        @cancel="editDialog = false"
+        @success="successUpdate()"
+        :card="selectedCard"
+      />
+    </v-dialog>
+
+    <!-- Preview Dialog -->
+    <v-dialog v-model="previewDialog" width="450" persistent>
+      <v-card width="100%">
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+          <v-row no-gutters class="mb-4">
+            <v-col cols="12">
+              <strong>Card:</strong> {{ selectedCard?.cardNumber ?? "N/A" }}
+            </v-col>
+            <v-col cols="12">
+              <strong>Access Type:</strong>
+              {{ selectedCard?.accessCardType ?? "N/A" }}
+            </v-col>
+            <!-- <v-col cols="12">
+              <strong>Visitor Type:</strong>
+              {{ selectedCard?.visitorType ?? "N/A" }}
+            </v-col> -->
+            <v-col cols="12">
+              <strong>Unit:</strong>
+              {{ selectedCard?.unit || "N/A" }}
+            </v-col>
+            <v-col cols="12">
+              <strong>Assign:</strong> {{ selectedCard?.assign || "N/A" }}
+            </v-col>
+            <v-col cols="12">
+              <strong>Status:</strong> {{ selectedCard?.status ?? "N/A" }}
+            </v-col>
+          </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="previewDialog = 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="!canUpdateAccessCard && !canDeleteAccessCard"
+                  >
+                    More actions
+                  </v-btn>
+                </template>
+                <v-list class="pa-0">
+                  <v-list-item @click="openEditDialog()">
+                    <v-list-item-title class="text-subtitle-2">
+                      Edit Card
+                    </v-list-item-title>
+                  </v-list-item>
+                  <v-list-item @click="openReplaceDialog()">
+                    <v-list-item-title class="text-subtitle-2">
+                      Replace Card
+                    </v-list-item-title>
+                  </v-list-item>
+                  <v-list-item @click="openDeleteDialog()" class="text-red">
+                    <v-list-item-title class="text-subtitle-2">
+                      Delete Card
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-col>
+          </v-row>
+        </v-toolbar></v-card
+      >
+    </v-dialog>
+
+    <!-- Delete Dialog -->
+    <v-dialog
+      v-model="confirmDialog"
+      :loading="deleteLoading"
+      width="450"
+      persistent
+    >
+      <v-card width="100%">
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h5">Delete Card</span>
+        </v-toolbar>
+        <v-card-text>
+          <p class="text-subtitle-2 text-center">
+            Are you sure you want to delete this card? 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="confirmDialog = 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="handleDeleteCard"
+                :loading="deleteLoading"
+              >
+                Delete Card
+              </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">
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [
+      {
+        title: "Card",
+        value: "cardNumber",
+      },
+      {
+        title: "Unit",
+        value: "unit",
+      },
+      {
+        title: "Assign",
+        value: "assign",
+      },
+      { title: "Action", value: "action-table" },
+    ],
+  },
+  canCreate: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  canCreateAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdateAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+// const { headerSearch } = useLocal();
+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 createDialog = ref(false);
+const editDialog = ref(false);
+const previewDialog = ref(false);
+const deleteLoading = ref(false);
+const confirmDialog = ref(false);
+const searchText = ref("");
+const replaceDialog = ref(false);
+
+const selectedCard = ref<TCard>({
+  _id: "",
+  name: "",
+  accessCardType: "",
+  // visitorType: "",
+  type: "",
+  cardNumber: "",
+  startDate: "",
+  endDate: "",
+  door: "",
+  accessGroup: [],
+  cardType: "",
+  pinNo: "",
+  useAsLiftCard: false,
+  liftAccessLevel: "",
+  isActivate: true,
+  isAntiPassBack: false,
+  status: "",
+  org: "",
+  site: "",
+  unit: "",
+  assign: "",
+});
+const selectedCardId = ref<string | null>(null);
+
+const { getAll: _getAllCards, deleteById: _deleteCard } = useCard();
+
+const {
+  data: getCardReq,
+  refresh: getCards,
+  status: getAllReqStatus,
+} = useLazyAsyncData(
+  "get-all-cards",
+  () =>
+    _getAllCards({
+      page: page.value,
+      search: searchText.value,
+      // search: headerSearch.value,
+    }),
+  {
+    watch: [page, searchText],
+  }
+);
+
+const loading = computed(() => getAllReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getCardReq.value) {
+    items.value = getCardReq.value.items;
+    pages.value = getCardReq.value.pages;
+    pageRange.value = getCardReq.value.pageRange;
+  }
+});
+
+function setCard({ mode = "create", dialog = true, data = {} as TCard } = {}) {
+  if (mode === "create") {
+    createDialog.value = dialog;
+  } else if (mode === "edit") {
+    editDialog.value = dialog;
+    selectedCard.value = data;
+  } else if (mode === "preview") {
+    previewDialog.value = dialog;
+    selectedCard.value = data;
+  }
+}
+
+function successCreate() {
+  createDialog.value = false;
+  getCards();
+  showMessage("Card created successfully!", "success");
+}
+
+function successUpdate() {
+  editDialog.value = false;
+  previewDialog.value = false;
+  getCards();
+  showMessage("Card updated successfully!", "success");
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function tableRowClickHandler(_: any, data: any) {
+  selectedCard.value = data.item as TCard;
+  previewDialog.value = true;
+}
+
+function openEditDialog() {
+  editDialog.value = true;
+}
+
+function openDeleteDialog() {
+  confirmDialog.value = true;
+  message.value = "";
+}
+
+function openReplaceDialog() {
+  replaceDialog.value = true;
+}
+
+async function handleDeleteCard() {
+  deleteLoading.value = true;
+  try {
+    await _deleteCard(selectedCard.value._id ?? "");
+    await getCards();
+    selectedCardId.value = null;
+    confirmDialog.value = false;
+    previewDialog.value = false;
+  } catch (error: any) {
+    message.value = error?.response?._data?.message || "Failed to delete card";
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+</script>

package/components/BuildingUnitFormEdit.vue

@@ -60,6 +60,28 @@
             </v-row>
           </v-col>
 
+          <v-col cols="12">
+            <v-row>
+              <v-col cols="12" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize font-weight-bold"
+                    title="Owner"
+                  />
+                  <v-col cols="12">
+                  <v-autocomplete
+                    v-model="buildingUnit.ownerName"
+                    :items="peopleItems"
+                    item-title="name"
+                    return-object
+                    density="comfortable">
+                  </v-autocomplete>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-col>
+
           <v-col cols="12">
             <v-row>
               <v-col cols="12" class="mt-2">
@@ -258,6 +280,8 @@ const prop = defineProps({
       _id: "",
       site: "",
       name: "",
+      owner: "",
+      ownerName: "",
       building: "",
       buildingName: "",
       category: "",
@@ -277,6 +301,8 @@ const buildingUnit = ref({
   _id: "",
   site: "",
   name: "",
+  owner: "",
+  ownerName: "",
   building: "",
   buildingName: "",
   level: 0,
@@ -297,8 +323,10 @@ const emit = defineEmits(["cancel", "success", "success:create-more"]);
 const validForm = ref(false);
 
 const { getAll } = useBuilding();
+const { getPeopleByUnit } = usePeople();
 
 const buildings = ref<Record<string, any>[]>([]);
+const peopleItems = ref<Array<Record<string, any>>>([]);
 
 const { data: getBuildingReq } = useLazyAsyncData(
   "get-all-buildings",
@@ -315,6 +343,17 @@ watchEffect(() => {
   }
 });
 
+const { data: getUnitPeople } = useLazyAsyncData(
+  "get-unit-people",
+  async () => getPeopleByUnit(prop.roomFacility._id as string)
+);
+
+watch(getUnitPeople, (newData: any) => {
+  if (newData) {
+      peopleItems.value = newData ?? [];
+  }
+});
+
 buildingUnit.value.site = prop.site;
 
 const selectedBuilding = computed(() => {
@@ -355,6 +394,12 @@ const hasChanges = computed(() => {
 async function submit() {
   disable.value = true;
   try {
+    
+    if (buildingUnit.value.ownerName) {
+      buildingUnit.value.owner = (buildingUnit.value.ownerName as any)._id
+      buildingUnit.value.ownerName = (buildingUnit.value.ownerName as any).name
+    }
+
     await updateById(buildingUnit.value._id ?? "", {
       name: buildingUnit.value.name,
       level: buildingUnit.value.level,
@@ -364,6 +409,8 @@ async function submit() {
       companyRegistrationNumber: buildingUnit.value.companyRegistrationNumber || "",
       leaseStart: buildingUnit.value.leaseStart,
       leaseEnd: buildingUnit.value.leaseEnd,
+      owner: buildingUnit.value.owner || "",
+      ownerName: buildingUnit.value.ownerName || ""
     });
 
     emit("success");

package/components/DocumentForm.vue

@@ -15,10 +15,19 @@
             v-model="document.attachment"
             :multiple="false"
             :max-length="10"
-            title="Upload Images"
+            title="Upload PDF Files"
+            accept=".pdf, .doc, .docx, .xls, .xlsx, .txt"
           />
         </v-col>
 
+        <v-col cols="12" class="px-6">
+          <InputLabel class="text-capitalize" title="Document Name" />
+          <v-text-field
+            v-model.trim="document.name"
+            density="comfortable"
+          ></v-text-field>
+        </v-col>
+
         <v-col cols="12">
           <v-row no-gutters>
             <v-col cols="12" class="text-center">
@@ -57,7 +66,12 @@
             color="black"
             class="text-none"
             size="48"
-            :disabled="!validForm || disable"
+            :disabled="
+              !validForm ||
+              disable ||
+              document.attachment.length == 0 ||
+              document.name == ''
+            "
             @click="submit"
             :loading="disable"
           >
@@ -78,17 +92,42 @@ const prop = defineProps({
     type: Object as PropType<TDocument>,
     default: () => ({
       name: "",
-      attachment: "",
+      attachment: [],
     }),
   },
 });
 
 const emit = defineEmits(["cancel", "success"]);
 
+const { add, updateById } = useDocument();
+const { getFileById } = useFile();
+
 const validForm = ref(false);
 const disable = ref(false);
 const message = ref("");
 
+const document = ref<Record<string, any>>({
+  name: "",
+  attachment: [],
+});
+
+if (prop.mode === "edit") {
+  document.value.name = prop.document.name;
+  document.value.attachment = [prop.document.attachment];
+}
+
+watch(
+  () => document.value.attachment,
+  async (newVal) => {
+    if (newVal) {
+      const fileData = await getFileById(newVal);
+      if (fileData) {
+        document.value.name = fileData.data.name;
+      }
+    }
+  }
+);
+
 function cancel() {
   //   createMore.value = false;
   message.value = "";
@@ -97,5 +136,30 @@ function cancel() {
 
 async function submit() {
   disable.value = true;
+  try {
+    if (prop.mode === "add") {
+      const payload = {
+        name: document.value.name,
+        attachment: document.value.attachment,
+        status: "active",
+      };
+      await add(payload);
+    }
+
+    if (prop.mode === "edit") {
+      const payload = {
+        name: document.value.name,
+        attachment: document.value.attachment,
+      }
+      await updateById(prop.document._id ?? "", payload);
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value =
+      error.response?._data?.message || "Failed to create document";
+  } finally {
+    disable.value = false;
+  }
 }
 </script>