@7365admin1/layer-common 1.10.1 → 1.10.3

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/BulletinBoardView.vue

@@ -0,0 +1,195 @@
+<template>
+    <v-card width="100%" :loading="processing">
+        <v-toolbar>
+            <v-row no-gutters class="fill-height px-6" align="center">
+                <span class="font-weight-bold text-subtitle-1 text-capitalize">
+                    Preview Announcement
+                </span>
+            </v-row>
+        </v-toolbar>
+
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0 my-3">
+            <v-row no-gutters>
+                <template v-for="(label, key) in formattedFields" :key="key">
+                    <v-col cols="12" class="mb-5">
+                        <v-row no-gutters class="">
+                            <v-col class="font-weight-bold">{{ label }}:</v-col>
+
+                            <v-col cols="9" class="px-10">
+                                <span v-if="key === 'content'" v-html="getFieldValue(key)" />
+                                <span v-else-if="key === 'noExpiration'">
+                                    <BulletinExpirationChip :value="getFieldValue(key) as boolean" />
+                                </span>
+                                <span v-else>
+                                    {{ getFieldValue(key) }}
+                                </span>
+                            </v-col>
+
+
+                        </v-row>
+                    </v-col>
+                </template>
+
+                <v-col cols="12" v-if="prop.activeAnnouncement?.file?.length > 0" class="mb-5">
+                    <v-row no-gutters class="font-weight-bold text-subtitle-1">Attachments:</v-row>
+                    <v-row no-gutters class="">
+                        <template v-if="videosArray.length > 0">
+                            <v-col cols="12">Videos ({{ videosArray.length }})</v-col>
+                            <AttachmentList :list="videosArray" show-checkbox read-only />
+                        </template>
+
+                        <template v-if="photosArray.length > 0">
+                            <v-col cols="12" class="mt-1">Photos ({{ photosArray.length }})</v-col>
+                            <AttachmentList :list="photosArray" show-checkbox read-only />
+                        </template>
+
+                        <template v-if="filesArray.length > 0">
+                            <v-col cols="12" class="mt-1">Files ({{ filesArray.length }})</v-col>
+                            <AttachmentList :list="filesArray" show-checkbox read-only />
+                        </template>
+                    </v-row>
+                </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" height="48" class="text-none" @click="emit('close')">
+                        Close
+                    </v-btn>
+                </v-col>
+
+                <v-col cols="6" class="pa-0">
+                    <v-menu contained>
+                        <template #activator="{ props }">
+                            <v-btn block variant="flat" color="black" height="48" class="text-none" tile v-bind="props">
+                                More actions
+                            </v-btn>
+                        </template>
+
+                        <v-list class="pa-0">
+                            <v-list-item v-if="canUpdate" @click="handleEdit">
+                                <v-list-item-title class="text-subtitle-2">
+                                    Edit Announcement
+                                </v-list-item-title>
+                            </v-list-item>
+
+                            <v-list-item v-if="canDelete" class="text-red" @click="handleDelete">
+                                <v-list-item-title class="text-subtitle-2">
+                                    Delete Announcement
+                                </v-list-item-title>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-col>
+            </v-row>
+        </v-toolbar>
+    </v-card>
+</template>
+
+
+<script setup lang="ts">
+
+const prop = defineProps({
+    activeAnnouncement: {
+        type: Object as PropType<TAnnouncement>,
+        required: true
+    },
+    canUpdate: Boolean,
+    canDelete: Boolean,
+})
+
+const processing = ref(false)
+const { recipientList } = useBulletin()
+const { getFileUrl, urlToFile } = useFile()
+
+const emit = defineEmits(['close', 'edit', 'delete'])
+
+/* Field labels */
+const formattedFields: Partial<Record<keyof TAnnouncement, string>> = {
+    title: "Title",
+    createdAt: "Date Created",
+    recipients: "Recipients",
+    content: "Content",
+    startDate: "Start Date",
+    endDate: "End Date",
+    noExpiration: "No Expiration",
+}
+
+const formattedRecipients = computed(() => {
+    const arr = recipientList.filter(x =>
+        prop.activeAnnouncement?.recipients?.includes(x.value)
+    )
+    return arr.map(item => item.title).join(", ")
+})
+
+function getFieldValue(key: keyof TAnnouncement) {
+    const value = prop.activeAnnouncement?.[key]
+
+    if (value === null || value === "" || value === undefined) return ""
+
+    switch (key) {
+        case "recipients":
+            return formattedRecipients.value
+        case "createdAt":
+        case "startDate":
+        case "endDate":
+            return toLocalDate(value as string)
+        default:
+            return value
+    }
+}
+
+const rawFileArray = ref<{ file: File, _id: string, preview: boolean }[]>([])
+
+const photosArray = getByType('image/')
+const videosArray = getByType('video/')
+const filesArray = getByType('other')
+
+function getByType(prefix: 'image/' | 'video/' | 'other') {
+    return computed(() => {
+        return rawFileArray.value.filter(x => {
+            const type = x?.file?.type
+            if (typeof type !== 'string') return false
+
+            if (prefix === 'other') {
+                return !type.startsWith('image/') && !type.startsWith('video/')
+            }
+            return type.startsWith(prefix)
+        })
+    })
+}
+
+function toLocalDate(utcString: string) {
+    if (typeof utcString !== 'string') return;
+    return new Date(utcString).toLocaleString("en-US", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+    })
+}
+
+function handleEdit() {
+    emit("edit")
+}
+
+function handleDelete() {
+    emit("delete")
+}
+
+watchEffect(async () => {
+    const data = prop.activeAnnouncement
+    if (!data) return
+
+    rawFileArray.value = await Promise.all(
+        data.file.map(async (item) => {
+            const fileUrl = getFileUrl(item._id)
+            const file = await urlToFile(fileUrl, item.name)
+            return { file, _id: item._id, preview: item.preview ?? false }
+        })
+    )
+})
+
+
+</script>

package/components/BulletinExpirationChip.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-chip
+    size="small"
+    :color="value ? 'green' : 'red'"
+    :text="value ? 'Yes' : 'No'"
+  />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  value: boolean
+}>()
+</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,
   };
 }