@7365admin1/layer-common 1.8.5 → 1.9.0

package/components/FeedbackMain.vue

@@ -310,7 +310,7 @@ const _feedback = ref({
 
 const selected = ref<string[]>([]);
 
-const { getColorStatus } = useUtils();
+const { getColorStatus, debounce } = useUtils();
 
 const headers: Array<Record<string, any>> = [
   { title: "Name", value: "createdByName", align: "start" },
@@ -325,6 +325,10 @@ const erroredImages = ref<string[]>([]);
 const route = useRoute();
 const { customers } = useCustomer();
 
+const dialogPreview = ref(false);
+const selectedFeedback = ref<TFeedback | null>(null);
+const searchText = ref("");
+
 const {
   getFeedbacks: _getFeedbacks,
   deleteFeedback,
@@ -347,6 +351,7 @@ const {
     page: page.value,
     site: route.params.site as string,
     category: props.category,
+    search: searchText.value || "",
   })
 );
 
@@ -575,14 +580,19 @@ const categories = computed(() =>
 );
 
 function tableRowClickHandler(_: any, data: any) {
-  console.log(data.item);
+  // console.log(data.item);
   selectedFeedback.value = data.item;
   dialogPreview.value = true;
 }
 
-const dialogPreview = ref(false);
-const selectedFeedback = ref<TFeedback | null>(null);
-const searchText = ref("");
-
 getServiceProviderCategories();
+
+const debounceSearch = debounce(getAllReqRefresh, 500);
+
+watch(
+  () => searchText.value,
+  () => {
+    debounceSearch();
+  }
+);
 </script>

package/components/Input/DatePicker.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="d-flex flex-column">
+        <v-text-field v-bind="$attrs" ref="datePickerRef" :model-value="dateFormattedReadOnly" autocomplete="off"
+            :placeholder="placeholder" :rules="rules" style="z-index: 10" @click="openDatePicker">
+            <template #append-inner>
+                <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
+            </template>
+        </v-text-field>
+        <div class="w-100 d-flex align-end ga-3 hidden-input">
+            <input ref="dateInput" type="date" v-model="date" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const prop = defineProps({
+    rules: {
+        type: Array as PropType<Array<any>>,
+        default: () => []
+    },
+    placeholder: {
+        type: String,
+        default: 'MM/DD/YYYY'
+    }
+})
+
+const date = defineModel<string | null>({ default: null }) // YYYY-MM-DD format
+
+const dateFormattedReadOnly = ref<string | null>(null)
+
+const dateInput = ref<HTMLInputElement | null>(null)
+const datePickerRef = ref<HTMLInputElement | null>(null)
+
+const isInitialLoad = ref(true)
+
+function openDatePicker() {
+    setTimeout(() => {
+        dateInput.value?.showPicker?.()
+    }, 0)
+}
+
+function validate() {
+    (datePickerRef.value as any)?.validate()
+}
+
+function convertToReadableFormat(dateStr: string): string {
+    if (!dateStr) return ""
+    const dateObj = new Date(dateStr + "T00:00:00")
+    const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    }
+    return dateObj.toLocaleDateString('en-US', options)
+}
+
+function handleInitialDate() {
+    if (date.value) {
+        dateFormattedReadOnly.value = convertToReadableFormat(date.value)
+    } else {
+        dateFormattedReadOnly.value = null
+    }
+}
+
+watch(date, (dateVal) => {
+    if (isInitialLoad.value) return
+    if (!dateVal) {
+        dateFormattedReadOnly.value = null
+        return
+    }
+    dateFormattedReadOnly.value = convertToReadableFormat(dateVal)
+}, { immediate: false })
+
+watch(date, () => {
+    handleInitialDate()
+}, { immediate: true })
+
+onMounted(async () => {
+    await nextTick()
+    isInitialLoad.value = false
+    const nativeInput = (datePickerRef.value as any)?.$el?.querySelector('input')
+    if (nativeInput) {
+        nativeInput.addEventListener('click', (e: MouseEvent) => {
+            e.stopPropagation()
+            openDatePicker()
+        })
+    }
+})
+
+defineExpose({
+    validate
+})
+</script>
+
+<style scoped>
+.hidden-input {
+    opacity: 0;
+    height: 0;
+    width: 1px;
+}
+</style>

package/components/NumberSettingField.vue

@@ -4,11 +4,11 @@
             <v-row>
                 <v-col cols="6">
                     <InputLabel class="text-capitalize font-weight-bold" :title="title" :required="required" />
-                    <v-text-field v-model.number="count" type="number" density="comfortable" :rules="rules" />
+                    <v-text-field v-model.number="count" type="number" density="comfortable" :rules="rules" :readonly="readOnly" />
                 </v-col>
 
                 <v-col cols="6">
-                    <v-btn color="primary" class="text-none mt-6" size="large" variant="flat"
+                    <v-btn v-if="!readOnly" color="primary" class="text-none mt-6" size="large" variant="flat"
                         :disabled="!valid || disabled" :loading="loading || updating" text="Save" @click="handleSave" />
                 </v-col>
             </v-row>
@@ -34,6 +34,7 @@ const props = defineProps({
     siteId: { type: String, required: true },
     existingBlockNumber: { type: Number, default: 0 },
     existingGuardPostsNumber: { type: Number, default: 0 },
+    readOnly: { type: Boolean, default: false },
 });
 
 const { updateSite, setSiteGuardPosts } = useSiteSettings()

package/components/VisitorForm.vue

@@ -1,10 +1,11 @@
 <template>
   <v-card width="100%" :loading="processing">
     <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
+      <v-row no-gutters class="fill-height px-6 d-flex justify-space-between align-center" align="center">
         <span class="font-weight-bold text-h5 text-capitalize">
           {{ prop.mode }} {{ formatVisitorType(type) }}
         </span>
+        <ButtonClose @click="emit('close:all')" />
       </v-row>
     </v-toolbar>
     <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
@@ -238,6 +239,7 @@ const emit = defineEmits([
   "done:more",
   "error",
   "close",
+  "close:all"
 ]);
 
 const visitor = reactive<Partial<TVisitorPayload>>({

package/components/VisitorManagement.vue

@@ -114,7 +114,7 @@
 
     <v-dialog v-model="dialog.addVisitor" v-if="activeVisitorFormType" width="450" persistent>
       <VisitorForm mode="add" :org="orgId" :site="siteId" :type="activeVisitorFormType" @back="handleClickBack"
-        @done="handleVisitorFormDone" @done:more="handleVisitorFormCreateMore" />
+        @done="handleVisitorFormDone" @done:more="handleVisitorFormCreateMore" @close:all="handleCloseAll" />
     </v-dialog>
 
     <v-dialog v-model="dialog.viewVisitor" width="450" persistent>
@@ -385,6 +385,11 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 
+function handleCloseAll() {
+  dialog.showSelection = false;
+  dialog.addVisitor = false;
+} 
+
 function handleUpdateAutofillDetails(people: TPeople){
   dialog.vehicleNumberUsersList = false
   console.log('people', people)

package/components/WorkOrder/Detail.vue

@@ -20,19 +20,51 @@
       </v-col>
     </v-row>
   </div>
+  <WorkOrderCreate
+    v-model="showCreateDialog"
+    created-from="workOrder"
+    :work-order="_workOrder"
+    @update:work-order="(val: TWorkOrderCreate) => (_workOrder = val)"
+    :is-edit-mode="isEditMode"
+    :loading="isSubmitting"
+    :categories="serviceProviders"
+    :theme="theme"
+    :errored-images="erroredImages"
+    :max-files="5"
+    :message-fn="showMessage"
+    @close="handleCloseDialog"
+    @file-added="handleFileAdded"
+    @file-deleted="deleteFile"
+    @submit="submitWorkOrder"
+  />
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
 <script lang="ts" setup>
+import { useTheme } from "vuetify";
 const route = useRoute();
 const id = route.params.id;
 
 const {
   workOrder,
-  workOrders,
   getWorkOrderById,
   getWorkOrders: _getWorkOrders,
+  updateWorkOrder,
+  createWorkOrder,
 } = useWorkOrder();
 
 const { getServiceProviderNames } = useServiceProvider();
+const erroredImages = ref<string[]>([]);
+
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
 
 const _getWorkOrderById = async () => {
   try {
@@ -67,5 +99,150 @@ const showCreateDialog = ref(false);
 const showCompleteDialog = ref(false);
 const showDeleteDialog = ref(false);
 
-function openEditDialog() {}
+const _workOrder = ref<TWorkOrderCreate>({
+  attachments: [],
+  category: "",
+  subject: "",
+  location: "",
+  description: "",
+  highPriority: false,
+  block: "",
+  level: "",
+  unit: "",
+  serviceProvider: "",
+  assignee: "",
+  organization: "",
+  site: "",
+});
+
+const isEditMode = ref(false);
+const isSubmitting = ref(false);
+const theme = useTheme().name;
+
+const _workOrderId = ref<string | null>(null);
+
+const serviceProviders = ref<
+  Array<{ title: string; value: string; subtitle: string }>
+>([]);
+
+const { getBySiteAsServiceProvider } = useCustomerSite();
+
+const { data: getAllReq } = useLazyAsyncData(
+  "get-by-site-as-service-provider",
+  () => getBySiteAsServiceProvider(useRoute().params.site as string)
+);
+
+watchEffect(() => {
+  if (getAllReq.value) {
+    serviceProviders.value = getAllReq.value.map((i: any) => ({
+      title: i.nature.replace(/_/g, " "),
+      subtitle: i.title,
+      value: i.nature,
+    }));
+  }
+});
+
+function openEditDialog() {
+  isEditMode.value = true;
+  _workOrder.value = { ...workOrder.value };
+  showCreateDialog.value = true;
+}
+
+function handleCloseDialog() {
+  resetWorkOrderForm();
+  isEditMode.value = false;
+  showCreateDialog.value = false;
+}
+
+function resetWorkOrderForm() {
+  _workOrder.value = {
+    attachments: [],
+    category: "",
+    subject: "",
+    location: "",
+    description: "",
+    highPriority: false,
+    block: "",
+    level: "",
+    unit: "",
+    serviceProvider: "",
+    assignee: "",
+    organization: "",
+    site: "",
+  };
+}
+
+const { addFile, deleteFile: _deleteFile } = useFile();
+
+const API_DO_STORAGE_ENDPOINT =
+  useRuntimeConfig().public.API_DO_STORAGE_ENDPOINT;
+
+async function handleFileAdded(file: File) {
+  try {
+    const res = await addFile(file);
+    const uploadedId = res?.id;
+    if (uploadedId) {
+      const url = `${API_DO_STORAGE_ENDPOINT}/${uploadedId}`;
+      _workOrder.value.attachments = _workOrder.value.attachments ?? [];
+      _workOrder.value.attachments.push(url);
+    }
+  } catch (error) {
+    console.error("Error uploading file:", error);
+    showMessage("Failed to upload file", "error");
+  }
+}
+
+async function deleteFile(value: string) {
+  try {
+    await _deleteFile(value);
+    _workOrder.value.attachments = (_workOrder.value.attachments ?? []).filter(
+      (file) => file !== value
+    );
+  } catch (error) {
+    console.log(error);
+    showMessage("Failed to delete file", "error");
+  }
+}
+
+async function submitWorkOrder() {
+  if (!isEditMode.value || !workOrder.value?._id) {
+    console.warn("Update called without valid edit mode or work order ID.");
+    return;
+  }
+  try {
+    isSubmitting.value = true;
+
+    const payload = {
+      // ..._workOrder.value,
+      attachments: _workOrder.value.attachments,
+      category: _workOrder.value.category,
+      description: _workOrder.value.description,
+      highPriority: _workOrder.value.highPriority,
+      organization: route.params.org as string,
+      site: route.params.site as string,
+      subject: _workOrder.value.subject,
+      unit: _workOrder.value.unit,
+    };
+
+    let res: Record<string, any> = {};
+
+    if (isEditMode.value) {
+      console.log("updating...");
+      res = await updateWorkOrder(workOrder.value._id as string, payload);
+    } else {
+      res = await createWorkOrder(payload);
+    }
+
+    showMessage(res.message, "success");
+    showCreateDialog.value = false;
+
+    await _getWorkOrderById();
+
+    resetWorkOrderForm();
+  } catch (err) {
+    showMessage((err as Error).message, "error");
+  } finally {
+    isSubmitting.value = false;
+  }
+}
 </script>

package/components/WorkOrder/Main.vue

@@ -65,6 +65,9 @@
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))"
         >
+          <template v-slot:item.createdAt="{ item }">
+            {{ formatDateDDMMYYYYLocal(item.createdAt) }}
+          </template>
         </v-data-table>
       </v-card>
     </v-col>
@@ -88,10 +91,48 @@
     @submit="submitWorkOrder"
   />
 
+  <ConfirmDialog
+    v-model="showDeleteDialog"
+    :loading="submitting"
+    @submit="submitDelete"
+    :image-src="'/images/icons/delete-icon.png'"
+  >
+    <template #image>
+      <v-img
+        height="120"
+        src="/images/icons/delete-icon.png"
+        alt="Delete Icon"
+        contain
+      />
+    </template>
+
+    <template #title>
+      Are you sure you want to delete this work order?
+    </template>
+
+    <template #footer>
+      <v-btn
+        color="primary-button"
+        variant="flat"
+        class="font-weight-bold py-5 d-flex align-center justify-center"
+        @click="submitDelete"
+        :loading="submitting"
+        block
+      >
+        Confirm
+      </v-btn>
+    </template>
+  </ConfirmDialog>
+
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
   <!-- Preview Dialog -->
-  <v-dialog v-model="dialogPreview" width="450" persistent v-if="canViewWorkOrders">
+  <v-dialog
+    v-model="dialogPreview"
+    width="450"
+    persistent
+    v-if="canViewWorkOrders"
+  >
     <v-card width="100%">
       <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
         <v-row no-gutters v-if="selectedWorkOrder" class="mb-4">
@@ -139,12 +180,18 @@
               </template>
 
               <v-list class="pa-0">
-                <v-list-item @click="onViewWorkOrder(selectedWorkOrder)" v-if="canViewWorkOrderDetails">
+                <v-list-item
+                  @click="onViewWorkOrder(selectedWorkOrder)"
+                  v-if="canViewWorkOrderDetails"
+                >
                   <v-list-item-title class="text-subtitle-2">
                     View
                   </v-list-item-title>
                 </v-list-item>
-                <v-list-item @click="editWorkOrder(selectedWorkOrder)" v-if="canUpdateWorkOrder">
+                <v-list-item
+                  @click="editWorkOrder(selectedWorkOrder)"
+                  v-if="canUpdateWorkOrder"
+                >
                   <v-list-item-title class="text-subtitle-2">
                     Edit
                   </v-list-item-title>
@@ -224,7 +271,8 @@ const message = ref("");
 const messageColor = ref("");
 const messageSnackbar = ref(false);
 
-const { getColorStatus, formatDate } = useUtils();
+const { getColorStatus, formatDate, debounce, formatDateDDMMYYYYLocal } =
+  useUtils();
 
 const _workOrder = ref<TWorkOrderCreate>({
   attachments: [],
@@ -261,12 +309,14 @@ const submitting = ref(false);
 const selected = ref<string[]>([]);
 const route = useRoute();
 const { customers } = useCustomer();
+const showDeleteDialog = ref(false);
 
 const {
   getWorkOrders: _getWorkOrders,
   createWorkOrder,
   getWorkOrderById,
   updateWorkOrder,
+  deleteWorkOrder,
 } = useWorkOrder();
 
 const page = ref(1);
@@ -283,6 +333,7 @@ const {
     page: page.value,
     site: route.params.site as string,
     category: props.category,
+    search: searchText.value || "",
   })
 );
 
@@ -432,8 +483,8 @@ async function submitWorkOrder() {
 
     showMessage(res.message, "success");
     showCreateDialog.value = false;
+    await getAllReqRefresh();
     resetWorkOrderForm();
-    getAllReqRefresh();
   } catch (err) {
     showMessage((err as Error).message, "error");
   } finally {
@@ -456,7 +507,6 @@ function onViewWorkOrder(item: any) {
 async function editWorkOrder(item: any) {
   try {
     const _workOrders = await getWorkOrderById(item._id);
-    console.log(_workOrders);
     _workOrder.value = {
       attachments: (_workOrders.attachments || []) as string[],
       category: _workOrders.category || "",
@@ -476,7 +526,30 @@ async function editWorkOrder(item: any) {
 
 async function _updateWorkOrder() {}
 
-function confirmDeleteWorkOrder(item: any) {}
+function confirmDeleteWorkOrder(item: any) {
+  workOrderToDelete.value = item;
+  showDeleteDialog.value = true;
+}
+
+const workOrderToDelete = ref<any>(null);
+
+async function submitDelete() {
+  if (!workOrderToDelete.value) return;
+  submitting.value = true;
+  try {
+    const response = await deleteWorkOrder(workOrderToDelete.value._id);
+    showMessage(response.message, "success");
+    await getAllReqRefresh();
+  } catch (error) {
+    console.error("Failed to delete work order:", error);
+    showMessage("Failed to delete work order!", "error");
+  } finally {
+    submitting.value = false;
+    showDeleteDialog.value = false;
+    workOrderToDelete.value = null;
+    dialogPreview.value = false;
+  }
+}
 
 function tableRowClickHandler(_: any, data: any) {
   selectedWorkOrder.value = data.item;
@@ -486,4 +559,13 @@ function tableRowClickHandler(_: any, data: any) {
 const dialogPreview = ref(false);
 const selectedWorkOrder = ref<TWorkOrder | null>(null);
 const searchText = ref("");
+
+const debounceSearch = debounce(getAllReqRefresh, 500);
+
+watch(
+  () => searchText.value,
+  () => {
+    debounceSearch();
+  }
+);
 </script>

package/composables/useBuildingUnit.ts

@@ -73,7 +73,7 @@ export default function useBuildingUnit() {
     });
   }
 
-  function add(data: { labels: string[]; unit: TBuildingUnit; qty?: number }) {
+  function add(data: { labels: string[]; unit: Partial<TBuildingUnit>; qty?: number }) {
     return useNuxtApp().$api("/api/building-units", {
       method: "POST",
       body: data,

package/composables/useFeedback.ts

@@ -75,8 +75,9 @@ export default function useFeedback() {
   }
 
   function deleteFeedback(id: string) {
-    return useNuxtApp().$api<Record<string, any>>(`/api/feedbacks/${id}`, {
+    return useNuxtApp().$api<Record<string, any>>(`/api/feedbacks/deleted/feedback`, {
       method: "DELETE",
+      query: { id },
     });
   }
 
@@ -94,7 +95,7 @@ export default function useFeedback() {
 
   function updateStatusComplete(id: string, payload: TFeedbackStatusComplete) {
     return useNuxtApp().$api<Record<string, any>>(
-      `/api/feedbacks/${id}/status-complete`,
+      `/api/feedbacks/${id}/status/complete`,
       {
         method: "PUT",
         body: payload,

package/composables/useNFCPatrolSettings.ts

@@ -1,6 +1,6 @@
 export default function useNFCPatrolSettings() {
   async function getBySite(site: string) {
-    return await useNuxtApp().$api<Record<string, any>>(
+    return useNuxtApp().$api<Record<string, any>>(
       `/api/nfc-patrol-settings/site/${site}`
     );
   }

package/composables/useWorkOrder.ts

@@ -71,6 +71,13 @@ export default function useWorkOrder() {
     });
   }
 
+  function deleteWorkOrder(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/work-orders/deleted/work-order`, {
+      method: "DELETE",
+      query: { id },
+    });
+  }
+
   return {
     workOrders,
     workOrder,
@@ -81,5 +88,6 @@ export default function useWorkOrder() {
     getWorkOrders,
     getWorkOrderById,
     updateWorkOrder,
+    deleteWorkOrder,
   };
 }

package/package.json

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

package/types/card.d.ts

@@ -19,4 +19,9 @@ declare type TCard = {
   site?: string | ObjectId;
   unit: string;
   assign: string;
+  quantity?: number;
+  showAssign?: boolean;
+  assignBuilding?: string;
+  assignLevel?: string;
+  assignUnit?: string;
 };