@7365admin1/layer-common 1.8.6 → 1.10.0

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

@@ -93,7 +93,7 @@
                 <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
               </template>
               <v-list>
-                <v-list-item @click="openConfirmDialog(item._id ?? '')">
+                <v-list-item @click="openConfirmDialog(item._id ?? '')" v-if="item.status === 'pending'">
                   Cancel Invite
                 </v-list-item>
               </v-list>
@@ -118,21 +118,23 @@
         </p>
       </template>
       <template #footer>
-        <v-btn
-          variant="text"
-          @click="confirmDialog = false"
-          :disabled="cancelLoading"
-        >
-          Close
-        </v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
-          @click="onConfirmCancel"
-          :loading="cancelLoading"
-        >
-          Cancel Invite
-        </v-btn>
+        <div class="d-flex justify-center ga-3 w-100">
+          <v-btn
+            variant="text"
+            @click="confirmDialog = false"
+            :disabled="cancelLoading"
+          >
+            Close
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="flat"
+            @click="onConfirmCancel"
+            :loading="cancelLoading"
+          >
+            Cancel Invite
+          </v-btn>
+        </div>
       </template>
     </ConfirmDialog>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
@@ -245,7 +247,7 @@ const {
     status: props.status,
     search: headerSearch.value,
     type: "user-invite,member-invite",
-    app: props.app
+    app: props.app,
   })
 );
 

package/components/PasswordConfirmation.vue

@@ -0,0 +1,95 @@
+<template>
+    <v-card width="100%" :disabled="loading || processingPassword" :loading="loading || processingPassword">
+        <v-toolbar density="compact">
+            <v-row no-gutters class="pa-3 text-h6 font-weight-bold">
+                <span>{{ promptTitle }}</span>
+            </v-row>
+        </v-toolbar>
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
+            <v-row no-gutters class="w-100">
+                <v-col cols="12">
+                    <v-icon icon="mdi-lock-outline" :color="'gray'" class="text-h2" />
+                </v-col>
+                <v-col cols="12" v-if="message" class="mt-2">
+                    {{ message }}
+                </v-col>
+                <v-col cols="12" class="mt-5 text-start">
+                    <v-text-field v-model="passwordInput" label="Password" type="password" density="compact" :error-messages="errorMessage"></v-text-field>
+                </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" tile @click="emit('cancel')" height="48">
+                        Cancel
+                    </v-btn>
+                </v-col>
+
+                <v-col cols="6" class="pa-0">
+                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="red" :disabled="!passwordInput"
+                        @click="handleConfirm">
+                        Confirm
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-toolbar>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps({
+    message: {
+        type: String,
+        default: "Confirm your digital signature with password to proceed."
+    },
+    promptTitle: {
+        type: String,
+        default: "Confirm Action"
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+})
+
+const { confirmPassword } = useDOBEntries();
+const { currentUser } = useLocalAuth();
+
+const emit = defineEmits(["cancel", "confirm"])
+
+const processingPassword = ref(false)
+const errorMessage = ref('')
+
+
+const passwordInput = ref('')
+
+
+
+async function handleConfirm() {
+    errorMessage.value = ''
+  try {
+    processingPassword.value = true;
+    const userId = currentUser.value?._id;
+    if (!userId) {
+        throw new Error('User not found. Please login again.');
+    }   
+    const res = await confirmPassword({ userId, password: passwordInput.value });
+    if (res) {
+      emit('confirm');
+    }
+
+  } catch (err: any) {
+    const errMessage = err?.response?._data?.message || 'Something went wrong. Please try again.';
+    console.log('[ERROR]', err)
+    errorMessage.value = errMessage;
+  } finally {
+    processingPassword.value = false;
+  }
+}
+
+</script>
+
+<style scoped></style>

package/components/RolePermissionMain.vue

@@ -119,21 +119,23 @@
       </template>
 
       <template #footer>
-        <v-btn
-          variant="text"
-          @click="confirmDialog = false"
-          :disabled="deleteLoading"
-        >
-          Close
-        </v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
-          @click="handleDeleteRole"
-          :loading="deleteLoading"
-        >
-          Delete Role
-        </v-btn>
+        <div class="d-flex justify-center ga-3 w-100">
+          <v-btn
+            variant="text"
+            @click="confirmDialog = false"
+            :disabled="deleteLoading"
+          >
+            Close
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="flat"
+            @click="handleDeleteRole"
+            :loading="deleteLoading"
+          >
+            Delete Role
+          </v-btn>
+        </div>
       </template>
     </ConfirmDialog>
 

package/components/ServiceProviderMain.vue

@@ -40,6 +40,7 @@
         </div>
 
         <v-text-field
+          v-model="searchText"
           placeholder="Search..."
           variant="outlined"
           density="comfortable"
@@ -420,19 +421,27 @@ const {
   invite: inviteServiceProvider,
 } = useServiceProvider();
 
-const loading = ref(true);
-
 const { getSiteById } = useSite();
 
+const { getColorStatus, debounce } = useUtils();
+
 const { data: site } = await useLazyAsyncData(
   "get-site-by-id-" + props.siteId,
   () => getSiteById(props.siteId)
 );
 
-const { data: serviceProviderReq, refresh: _getAllServiceProvider } =
-  await useLazyAsyncData("get-all-service-providers", () =>
-    getAllServiceProvider({ siteId: props.siteId })
-  );
+const loading = computed(() => getAllReqStatus.value === "pending");
+
+const {
+  data: serviceProviderReq,
+  refresh: _getAllServiceProvider,
+  status: getAllReqStatus,
+} = await useLazyAsyncData("get-all-service-providers", () =>
+  getAllServiceProvider({
+    siteId: props.siteId,
+    search: searchText.value || "",
+  })
+);
 
 watchEffect(() => {
   // console.log("serviceProviderReq", serviceProviderReq.value);
@@ -441,12 +450,14 @@ watchEffect(() => {
     pages.value = serviceProviderReq.value.pages;
     pageRange.value = serviceProviderReq.value.pageRange;
   }
-  loading.value = false;
+  // loading.value = false;
 });
 
 const createDialog = ref(false);
 const createInviteDialog = ref(false);
 
+const searchText = ref("");
+
 const success = () => {
   createDialog.value = false;
   // getServiceProvider();
@@ -544,4 +555,13 @@ async function submitServiceProviderInvite() {
     disableServiceProvider.value = false;
   }
 }
+
+const debounceSearch = debounce(_getAllServiceProvider, 500);
+
+watch(
+  () => searchText.value,
+  () => {
+    debounceSearch();
+  }
+);
 </script>

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>