@iservice365/layer-common 1.6.0 → 1.7.0

package/components/AccessManagement.vue

@@ -7,6 +7,7 @@
           rounded="pill"
           variant="tonal"
           size="large"
+          @click="setCard()"
           v-if="canCreate && canCreateAccessCard"
         >
           Add Access Card
@@ -14,7 +15,7 @@
 
         <v-text-field
           v-model="searchText"
-          placeholder="Search Unit..."
+          placeholder="Search Card, Unit..."
           variant="outlined"
           density="comfortable"
           clearable
@@ -34,7 +35,7 @@
       >
         <v-toolbar density="compact" color="grey-lighten-4">
           <template #prepend>
-            <v-btn fab icon density="comfortable">
+            <v-btn fab icon density="comfortable" @click="getCards">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
           </template>
@@ -44,7 +45,11 @@
               <span class="mr-2 text-caption text-fontgray">
                 {{ pageRange }}
               </span>
-              <local-pagination v-model="page" :length="pages" />
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="getCards"
+              />
             </v-row>
           </template>
         </v-toolbar>
@@ -55,13 +60,169 @@
           items-per-page="10"
           fixed-header
           hide-default-footer
-          hide-default-header
-          @click:row="(_: any, data: any) => $emit('row-click', data)"
+          @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>
@@ -76,7 +237,7 @@ const props = defineProps({
     default: () => [
       {
         title: "Card",
-        value: "card",
+        value: "cardNumber",
       },
       {
         title: "Unit",
@@ -115,7 +276,7 @@ const props = defineProps({
   },
 });
 
-const { headerSearch } = useLocal();
+// const { headerSearch } = useLocal();
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
@@ -131,6 +292,123 @@ 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;
+}
 
-const loading = ref(false);
+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/EntryPassMain.vue

@@ -0,0 +1,231 @@
+<template>
+  <v-row no-gutters class="">
+    <v-col cols="12" elevation="3" class="border">
+      <v-row no-gutters class="px-6 pt-4">
+        <div class="d-flex mt-7 pb-5">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Physical / Key Pass
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              A Physical Pass Card is a tangible identification or access card
+              used for entry and verification purposes at a specific site or
+              property. Its primary functions include granting authorized
+              access, enhancing security, and tracking attendance or movement.
+            </span>
+          </p>
+          <v-switch color="success" hide-details></v-switch>
+        </div>
+        <v-divider thickness="1"></v-divider>
+        <div class="d-flex mt-7 pb-5">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            NFC / QR Code Pass
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              NFC Card Pass is a type of access card that uses Near Field
+              Communication (NFC) technology to enable secure and convenient
+              entry to a site or property. This technology facilitates wireless
+              communication between the card and an NFC reader when they are
+              placed in close proximity (typically within 4 cm).
+            </span>
+          </p>
+          <v-switch color="success" hide-details></v-switch>
+        </div>
+        <v-divider thickness="1"></v-divider>
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Upload Access Cards Template
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <a
+                target="_blank"
+                class="text-truncate d-flex items-center text-decoration-none"
+                href=""
+              >
+                <v-icon class="mr-2" size="24px"> mdi-paperclip </v-icon>
+                template
+              </a>
+            </span>
+          </p>
+          <v-btn
+            variant="flat"
+            color="error"
+            size="small"
+            style="height: 40px; margin-left: auto"
+            prepend-icon="mdi-file-document-remove-outline"
+          >
+            Remove
+          </v-btn>
+        </div>
+        <v-divider thickness="1"></v-divider>
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Printer Setup
+            <v-col cols="12">
+              <v-row>
+                <v-col cols="3">
+                  <v-text-field
+                    label="Vendor ID"
+                    hide-details
+                    clearable
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="3">
+                  <v-text-field
+                    label="Product ID"
+                    hide-details
+                    clearable
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="3">
+                  <v-btn
+                    color="primary"
+                    variant="outlined"
+                    prepend-icon="mdi-magnify"
+                    block
+                  >
+                    Scan Printer
+                  </v-btn>
+                </v-col>
+                <v-col cols="3">
+                  <v-btn
+                    color="success"
+                    variant="outlined"
+                    prepend-icon="mdi-printer-check"
+                    block
+                  >
+                    Test & Print
+                  </v-btn>
+                </v-col>
+              </v-row>
+              <v-row class="mt-4">
+                <v-col cols="12" sm="6" md="4">
+                  <v-btn
+                    color="primary"
+                    variant="flat"
+                    prepend-icon="mdi-content-save"
+                    block
+                  >
+                    Save Printer Settings
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-col>
+          </p>
+        </div>
+
+        <v-divider thickness="1"></v-divider>
+
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            QR Code Template
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <v-col cols="12">
+                <v-row>
+                  <v-col cols="12">
+                    <v-text-field
+                      label="Header"
+                      placeholder="Enter qr code header eg. Welcome to Company Name"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                    ></v-text-field>
+                  </v-col>
+                  <v-col cols="12">
+                    <v-text-field
+                      label="Subtext"
+                      placeholder="Enter qr code sub header"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                      class="mb-2"
+                    ></v-text-field>
+                  </v-col>
+                  <v-row class="mt-3">
+                    <v-col cols="12" md="2">
+                      <v-btn color="primary" variant="flat" block>
+                        Preview
+                      </v-btn>
+                    </v-col>
+                    <v-col cols="12" md="2">
+                      <v-btn color="primary" variant="flat" block> Save </v-btn>
+                    </v-col>
+                  </v-row>
+                </v-row>
+              </v-col>
+            </span>
+          </p>
+        </div>
+
+        <v-divider thickness="1"></v-divider>
+
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Resident-app Disclaimer Message
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <v-col cols="12">
+                <v-row no-gutters>
+                  <v-col cols="12" class="mb-5">
+                    <v-textarea
+                      label="Disclaimer Message"
+                      placeholder="Enter disclaimer message for resident app"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                      rows="5"
+                      auto-grow
+                    ></v-textarea>
+                  </v-col>
+                  <v-row class="mt-3">
+                    <v-col cols="12" md="2">
+                      <v-btn color="primary" variant="flat" block> Save </v-btn>
+                    </v-col>
+                  </v-row>
+                </v-row>
+              </v-col>
+            </span>
+          </p>
+        </div>
+
+        <v-divider thickness="1"></v-divider>
+
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Entrypass URL
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <v-col>
+                <v-text-field
+                  label="Enter entrypass URL"
+                  placeholder="https://example.com"
+                  outlined
+                  clearable
+                  hide-details
+                />
+              </v-col>
+              <v-col>
+                <v-btn color="primary">Save</v-btn>
+              </v-col>
+            </span>
+          </p>
+        </div>
+      </v-row>
+    </v-col></v-row
+  >
+</template>
+<script lang="ts" setup>
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+const prop = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+  siteName: {
+    type: String,
+    required: true,
+  },
+
+  orgId: {
+    type: String,
+    required: true,
+  },
+});
+</script>