@7365admin1/layer-common 1.10.1 → 1.10.2

package/components/BulletinBoardManagement.vue

@@ -0,0 +1,322 @@
+<template>
+    <v-row no-gutters>
+        <TableMain :headers="headers" :items="paginatePlaceholderItem" v-model:search="searchInput"
+            :loading="getAnnouncementPending" :page="page" :pages="pages" :pageRange="pageRange"
+            @refresh="getAnnouncementsRefresh" show-header @update:page="handleUpdatePage" @row-click="handleRowClick"
+            @create="handleCreateEvent" :can-create="canCreateBulletinBoard" create-label="Add Announcement">
+            <template #extension>
+                <v-row no-gutters class="w-100 d-flex flex-column">
+                    <v-tabs v-model="status" color="primary" :height="40" @update:model-value="toRoute" class="w-100">
+                        <v-tab v-for="tab in tabOptions" :value="tab.status" :key="tab.status" class="text-capitalize">
+                            {{ tab.name }}
+                        </v-tab>
+                    </v-tabs>
+                </v-row>
+            </template>
+
+            <template v-slot:item.createdAt="{ item }">
+                <span class="d-flex align-center ga-2">
+                    <v-icon icon="mdi-calendar-start" color="green" size="20" />
+                    <span class="text-capitalize">{{ toLocalDate(item.createdAt) || "-" }}</span>
+                </span>
+
+            </template>
+
+            <template v-slot:item.noExpiration="{ item }">
+                <BulletinExpirationChip :value="item?.noExpiration" />
+            </template>
+
+            <template v-slot:item.duration="{ item }">
+                <span class="d-flex align-center ga-2">
+                    <v-icon icon="mdi-calendar-start" color="green" size="20" />
+                    <span class="text-capitalize">{{ toLocalDate(item.startDate) || "-" }}</span>
+                </span>
+                <span class="d-flex align-center ga-2">
+                    <v-icon icon="mdi-calendar-end" color="red" size="20" />
+                    <span class="text-capitalize">{{ toLocalDate(item.endDate) || "_" }}</span>
+                </span>
+            </template>
+        </TableMain>
+
+        <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" style="z-index: 3000;" />
+
+        <v-dialog v-model="dialog.showForm" width="600" persistent>
+            <BulletinBoardForm :mode="mode" :site-id="siteId" :active-id="selectedAnnouncementId"
+                @close="dialog.showForm = false" @done="handleDone" />
+        </v-dialog>
+
+        <v-dialog v-model="dialog.moreActions" v-if="activeAnnouncementObj && canViewBulletinBoardDetails" width="600"
+            persistent>
+            <BulletinBoardView :active-announcement="activeAnnouncementObj" :can-delete="canDeleteBulletinBoard"
+                :can-update="canUpdateBulletinBoard" @edit="handleEditAnnouncement" @close="dialog.moreActions = false"
+                @delete="dialog.deletePrompt = true" />
+        </v-dialog>
+
+        <v-dialog v-model="dialog.deletePrompt" width="450" persistent>
+            <CardDeleteConfirmation prompt-title="Are you sure want to delete this announcement?"
+                :loading="loading.deletingAnnouncement" @close="dialog.deletePrompt = false"
+                @delete="handleProceedDeleteAnnouncement" />
+        </v-dialog>
+    </v-row>
+</template>
+<script setup lang="ts">
+definePageMeta({
+    memberOnly: true,
+})
+
+const props = defineProps({
+    siteId: {
+        type: String,
+        required: true
+    },
+    canCreateBulletinBoard: {
+        type: Boolean,
+        default: true
+    },
+    canUpdateBulletinBoard: {
+        type: Boolean,
+        default: true
+    },
+    canViewBulletinBoardDetails: {
+        type: Boolean,
+        default: true
+    }, canDeleteBulletinBoard: {
+        type: Boolean,
+        default: true
+    }
+})
+
+
+const { authenticate } = useLocalAuth();
+authenticate();
+
+const route = useRoute();
+const orgId = route.params.org as string;
+const siteId = props.siteId;
+const routeName = (useRoute().name as string) ?? "";
+const { getAll, deleteBulletinById } = useBulletin()
+const { debounce } = useUtils()
+
+
+
+const headers = [
+    { title: "Title", value: "title" },
+    { title: "Date Created", value: "createdAt", align: "start" },
+    { title: "Start Date/End Date", value: "duration", align: "start" },
+    { title: "No Expiration", value: "noExpiration", align: "start" },
+    { title: "", value: "actions" },
+];
+const items = ref<TAnnouncement[]>([]);
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+const selectedAnnouncementId = ref<string>("")
+const mode = ref<'add' | 'edit'>('add')
+const status = ref<TAnnouncementStatus>()
+const searchInput = ref('')
+
+const dialog = reactive({
+    showForm: false,
+    moreActions: false,
+    viewDetails: false,
+    deletePrompt: false,
+})
+
+const loading = reactive({
+    deletingAnnouncement: false
+})
+
+const messageSnackbar = ref(false)
+const message = ref('')
+const messageColor = ref<'success' | 'error' | 'info'>()
+
+const activeAnnouncementObj = computed(() => {
+    return items.value.find(x => x._id === selectedAnnouncementId.value)
+})
+
+const paginatePlaceholderItem = computed(() => {
+    const pageSize = 10
+    const total = items.value.length
+    const currentPage = page.value
+
+    const start = (currentPage - 1) * pageSize
+    const end = start + pageSize
+
+    const from = total === 0 ? 0 : start + 1
+    const to = Math.min(end, total)
+    pageRange.value = `${from}-${to} of ${total}`
+
+    pages.value = Math.ceil(total / pageSize)
+
+    return items.value.slice(start, end)
+})
+
+
+const {
+    data: getAnnouncementReq,
+    refresh: getAnnouncementsRefresh,
+    pending: getAnnouncementPending,
+} = await useLazyAsyncData(
+    `get-all-announcements-${page.value}`,
+    () => getAll({ page: page.value, site: siteId, status: status.value }),
+    {
+        watch: [page, () => route.query],
+    }
+);
+
+watch(getAnnouncementReq, (newVal) => {
+    items.value = newVal?.items || [];
+    pages.value = newVal?.pages || 0;
+    pageRange.value = newVal?.pageRange || "-- - -- of --";
+});
+
+
+function eventStatusFormat(status: any) {
+    switch (status) {
+        case 'In Progress':
+            return {
+                color: 'orange',
+                text: 'In Progress'
+            };
+        case 'Active':
+            return {
+                color: 'green',
+                text: status
+            }
+        case 'Scheduled':
+            return {
+                color: 'blue',
+                text: status
+            }
+        default:
+            return {
+                color: 'grey',
+                text: status
+            }
+    }
+}
+
+const tabOptions = [
+    { name: "Active", status: "active" },
+    { name: "Expired", status: "expired" },
+];
+
+function toRoute(status: any) {
+    const obj = tabOptions.find((x) => x.status === status);
+    if (!obj) return;
+    page.value = 1
+    navigateTo({
+        name: routeName,
+        params: {
+            org: orgId,
+        },
+        query: {
+            status: obj.status,
+        },
+    });
+}
+
+function toLocalDate(utcString: string) {
+    if (!utcString) return ""
+    return new Date(utcString).toLocaleString("en-US", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+    })
+}
+
+function handleRowClick(data: any) {
+    selectedAnnouncementId.value = data?.item?._id;
+    dialog.moreActions = true;
+}
+
+function handleUpdatePage(newPageNum: number) {
+    page.value = newPageNum;
+}
+
+function handleClose() {
+    dialog.showForm = false;
+
+}
+
+function handleFormDone() {
+    getAnnouncementsRefresh();
+    dialog.showForm = false;
+}
+
+function handleFormCreateMore() {
+    getAnnouncementsRefresh();
+}
+
+function handleCreateEvent() {
+    selectedAnnouncementId.value = ""
+    mode.value = 'add'
+    dialog.showForm = true;
+}
+
+function handleDeleteAnnouncement() {
+    dialog.moreActions = false;
+    dialog.showForm = false;
+    dialog.deletePrompt = true;
+}
+
+function handleEditAnnouncement() {
+    dialog.moreActions = false
+    mode.value = "edit"
+    dialog.showForm = true;
+}
+
+function showMessage(text: string, type: "error" | 'success' | 'info') {
+    messageSnackbar.value = true;
+    message.value = text;
+    messageColor.value = type
+}
+
+
+
+
+
+async function handleProceedDeleteAnnouncement() {
+    try {
+        loading.deletingAnnouncement = true;
+        const bulletinId = selectedAnnouncementId.value;
+        const res = await deleteBulletinById(bulletinId as string);
+        if (res) {
+            showMessage("Announcement successfully deleted!", "info");
+            await getAnnouncementsRefresh();
+            dialog.deletePrompt = false;
+        }
+    } catch (error: any) {
+        const errorMessage = error?.response?._data?.message;
+        console.log("[ERROR]", error);
+        showMessage(
+            errorMessage || "Something went wrong. Please try again later.",
+            "error"
+        );
+    } finally {
+        loading.deletingAnnouncement = false;
+    }
+}
+
+
+
+
+async function handleDone() {
+    await getAnnouncementsRefresh()
+    dialog.showForm = false
+}
+
+
+const debounceSearch = debounce(getAnnouncementsRefresh, 500)
+
+watch([searchInput], ([search]) => {
+    debounceSearch()
+})
+
+
+onMounted(() => {
+    const statusQuery = (useRoute()?.query?.status)
+    status.value = (statusQuery === "active" || statusQuery === "expired") ? statusQuery : "active"
+})
+
+</script>

package/components/SignaturePad.vue

@@ -27,8 +27,12 @@
 import { ref, defineProps, defineEmits } from "vue";
 import Vue3Signature from "vue3-signature";
 
-defineProps({
+const props = defineProps({
   modelValue: String,
+  hideToast: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -53,21 +57,29 @@ function showMessage(msg: string, color: string) {
 
 function onSave(data: string) {
   emit("update:modelValue", data);
-  showMessage("Signature saved successfully.", "success");
+  if(!props.hideToast) {
+    showMessage("Signature saved successfully.", "success");
+  }
 }
 
 function save() {
   const signatureData = signatureRef.value?.save("image/jpeg");
   if (signatureData) {
     emit("update:modelValue", signatureData);
-    showMessage("Signature saved successfully.", "success");
+      if(!props.hideToast) {
+        showMessage("Signature saved successfully.", "success");
+      }
   } else {
-    showMessage("No signature to save.", "error");
+    if(!props.hideToast) {
+      showMessage("No signature to save.", "error");
+    }
   }
 }
 
 function clear() {
   signatureRef.value?.clear();
-  showMessage("Signature cleared.", "success");
+  if(!props.hideToast) {
+    showMessage("Signature cleared.", "success");
+  }
 }
 </script>

package/components/SupplyManagementMain.vue

@@ -272,7 +272,7 @@ const submitting = ref(false);
 
 const headers = [
   { title: "Name", value: "name" },
-  { title: "Qty", value: "qty" },
+  { title: "Available Stock Qty", value: "qty" },
   { title: "Status", value: "status" },
 ];
 

package/composables/useAccessManagement.ts

@@ -55,6 +55,22 @@ export default function useAccessManagement() {
     );
   }
 
+  function getAllAccessCardsCounts(params: {
+    site: string;
+    userType: string;
+  }) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/access-management/all-access-cards-counts`,
+      {
+        method: "GET",
+        query: {
+          site: params.site,
+          userType: params.userType,
+        },
+      }
+    );
+  }
+
   function getUserTypeAccessCards(params: {
     page?: number;
     limit?: number;
@@ -79,6 +95,59 @@ export default function useAccessManagement() {
     );
   }
 
+  function bulkPhysicalAccessCard(params: { site: string; file: File }) {
+    const formData = new FormData();
+    formData.append("file", params.file);
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/access-management/bulk-upload`,
+      {
+        method: "POST",
+        query: { site: params.site },
+        body: formData,
+      }
+    );
+  }
+
+  function getAvailableAccessCards(params: {
+    site: string;
+    userType: string;
+    type: string;
+    accessLevel: string;
+    liftAccessLevel: string;
+  }) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/access-management/access-and-lift-cards`,
+      {
+        method: "GET",
+        query: {
+          site: params.site,
+          userType: params.userType,
+          type: params.type,
+          accessLevel: params.accessLevel,
+          liftAccessLevel: params.liftAccessLevel,
+        },
+      }
+    );
+  }
+
+  function assignAccessCard(payload: {
+    units: string[];
+    quantity: number;
+    type: string;
+    site: string;
+    userType: string;
+    accessLevel: string;
+    liftAccessLevel: string;
+  }) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/access-management/assign-access-card`,
+      {
+        method: "POST",
+        body: payload,
+      }
+    );
+  }
+
   return {
     getDoorAccessLevels,
     getLiftAccessLevels,
@@ -86,5 +155,9 @@ export default function useAccessManagement() {
     addPhysicalCard,
     addNonPhysicalCard,
     getUserTypeAccessCards,
+    getAllAccessCardsCounts,
+    bulkPhysicalAccessCard,
+    assignAccessCard,
+    getAvailableAccessCards,
   };
 }

package/composables/useBulletin.ts

@@ -0,0 +1,82 @@
+export default function(){
+
+  const recipientList: { title: string, value: TAnnouncementRecipients }[] = [
+    { title: "Admin", value: "admin" },
+    { title: "Management Agency", value: "organization" },
+    { title: "Site Personnel", value: "site" },
+    { title: "Service Provider", value: "service-provider" },
+    { title: "Service Provider Member", value: "service-provider-member" },
+    { title: "Resident", value: "resident" }
+]
+
+  async function add(payload: Partial<TCreateAnnouncementPayload>) {
+    return await useNuxtApp().$api<Record<string, any>>("/api/bulletin-boards", {
+      method: "POST",
+      body: payload,
+    });
+  }
+
+    async function update(bulletinId: string, payload: Partial<TCreateAnnouncementPayload>) {
+    return await useNuxtApp().$api<Record<string, any>>(`/api/bulletin-boards/id/${bulletinId}`, {
+      method: "PUT",
+      body: payload,
+    });
+  }
+
+    type TGetAllParams = {
+    page?: number; 
+    limit?: number; 
+    sort?: 'asc' | 'desc'; 
+    site?: string;
+    status?: TAnnouncementStatus;
+    search?: string
+  }
+
+    async function getAll({
+    page = 1,
+    limit = 10,
+    sort = "asc",
+    site,
+    status,
+    search
+  } : TGetAllParams) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      "/api/bulletin-boards",
+      {
+        method: "GET",
+        query: {
+          page,
+          limit,
+          sort,
+          site,
+          status,
+          search
+  
+        },
+      }
+    );
+  }
+
+  async function getBulletinById(bulletinId: string) {
+    return await useNuxtApp().$api<Record<string, any>>(`/api/bulletin-boards/id/${bulletinId}`, {
+      method: "GET",
+    });
+  }
+
+    async function deleteBulletinById(bulletinId: string) {
+    return await useNuxtApp().$api<Record<string, any>>(`/api/bulletin-boards/${bulletinId}`, {
+      method: "PUT",
+    });
+  }
+
+
+    return {
+      recipientList,
+        add,
+        update,
+        getAll,
+        getBulletinById,
+        deleteBulletinById
+        
+    }
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {