@iservice365/layer-common 1.5.5 → 1.5.7

package/components/DocumentForm.vue

@@ -0,0 +1,101 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5 text-capitalize">
+          {{ prop.mode }} Document
+        </span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+      <v-form v-model="validForm" :disabled="disable">
+        <v-col cols="12" class="px-6">
+          <InputLabel class="text-capitalize" title="Document Attachment" />
+          <InputFileV2
+            v-model="document.attachment"
+            :multiple="false"
+            :max-length="10"
+            title="Upload Images"
+          />
+        </v-col>
+
+        <v-col cols="12">
+          <v-row no-gutters>
+            <v-col cols="12" class="text-center">
+              <span
+                class="text-none text-subtitle-2 font-weight-medium text-error"
+              >
+                {{ message }}
+              </span>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-form>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="cancel"
+            :disabled="disable"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm || disable"
+            @click="submit"
+            :loading="disable"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+<script setup lang="ts">
+const prop = defineProps({
+  mode: {
+    type: String,
+    default: "add",
+  },
+  document: {
+    type: Object as PropType<TDocument>,
+    default: () => ({
+      name: "",
+      attachment: "",
+    }),
+  },
+});
+
+const emit = defineEmits(["cancel", "success"]);
+
+const validForm = ref(false);
+const disable = ref(false);
+const message = ref("");
+
+function cancel() {
+  //   createMore.value = false;
+  message.value = "";
+  emit("cancel");
+}
+
+async function submit() {
+  disable.value = true;
+}
+</script>

package/components/DocumentManagement.vue

@@ -0,0 +1,187 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters>
+        <v-btn
+          class="text-none"
+          rounded="pill"
+          variant="tonal"
+          size="large"
+          @click="setDocument()"
+          v-if="canCreate && canCreateDocument"
+        >
+          Add Document
+        </v-btn>
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value=""
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="10"
+          fixed-header
+          hide-default-footer
+          hide-default-header
+          @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (200px))"
+        ></v-data-table>
+      </v-card>
+    </v-col>
+
+    <!-- Create Dialog -->
+    <v-dialog v-model="createDialog" width="450" persistent>
+      <DocumentForm @cancel="createDialog = false" @success="successCreate()" />
+    </v-dialog>
+  </v-row>
+</template>
+<script setup lang="ts">
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [
+      {
+        title: "Name",
+        value: "name",
+      },
+      { title: "Action", value: "action-table" },
+    ],
+  },
+  canCreate: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  canCreateDocument: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdateDocument: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteDocument: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { headerSearch } = useLocal();
+const { getAll: _getAllDocuments } = useDocument();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const {
+  data: getDocumentReq,
+  refresh: getDocuments,
+  status: getAllReqStatus,
+} = useLazyAsyncData(
+  "get-all-documents",
+  () =>
+    _getAllDocuments({
+      page: page.value,
+      search: headerSearch.value,
+    }),
+  {
+    watch: [page, headerSearch],
+  }
+);
+
+const loading = computed(() => getAllReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getDocumentReq.value) {
+    items.value = getDocumentReq.value.items;
+    pages.value = getDocumentReq.value.pages;
+    pageRange.value = getDocumentReq.value.pageRange;
+  }
+});
+
+const createDialog = ref(false);
+const editDialog = ref(false);
+const previewDialog = ref(false);
+const selectedDocument = ref<TDocument>({
+  _id: "",
+  name: "",
+  attachment: [],
+});
+
+function tableRowClickHandler(_: any, data: any) {
+  selectedDocument.value = data.item as TDocument;
+  previewDialog.value = true;
+}
+
+function setDocument({
+  mode = "create",
+  dialog = true,
+  data = {} as TDocument,
+} = {}) {
+  if (mode === "create") {
+    createDialog.value = dialog;
+  } else if (mode === "edit") {
+    editDialog.value = dialog;
+    selectedDocument.value = data;
+  } else if (mode === "preview") {
+    previewDialog.value = dialog;
+    selectedDocument.value = data;
+  }
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function successCreate() {
+  createDialog.value = false;
+  getDocuments();
+  showMessage("Document created successfully!", "success");
+}
+</script>

package/components/FeedbackMain.vue

@@ -36,7 +36,7 @@
       >
         <v-toolbar density="compact" color="grey-lighten-4">
           <template #prepend>
-            <v-btn fab icon density="comfortable" @click="updatePage">
+            <v-btn fab icon density="comfortable" @click="updatePage(1)">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
           </template>
@@ -351,6 +351,7 @@ async function updatePage(pageVal: any) {
   const response = await _getFeedbacks({
     page: page.value,
     site: route.params.site as string,
+    category: props.category,
   });
   if (response) {
     items.value = response.items;

package/components/Input/InputPhoneNumberV2.vue

@@ -3,13 +3,14 @@
         <v-col cols="12" class="d-flex ga-2">
             <v-select v-model="selectedCode" :variant="variant" :items="countries" item-title="code" item-value="code"
                 hide-details class="px-0" :density="density" style="max-width: 95px" :rules="[...props.rules]"
-                @update:model-value="handleUpdateCountry">
+                :readonly="props.readOnly" @update:model-value="handleUpdateCountry">
                 <template v-slot:item="{ props: itemProps, item }">
                     <v-list-item v-bind="itemProps" :title="item.raw.name" :subtitle="item.raw.dial_code" width="300" />
                 </template>
             </v-select>
-            <v-mask-input v-model="phone" :mask="currentMask" :rules="[...props.rules, validatePhone]" :loading="loading"
-                :variant="variant" hint="Enter a valid phone number" hide-details persistent-hint return-masked-value
+            <v-mask-input v-model="input" :mask="currentMask" :rules="[...props.rules, validatePhone]" ref="maskRef" :key="`mask-key-${maskKey}`"
+                :loading="loading" :readonly="props.readOnly" :variant="variant" hint="Enter a valid phone number"
+                hide-details persistent-hint return-masked-value :prefix="phonePrefix || '###'" persistent-placeholder
                 :density="density" :placeholder="placeholder || currentMask"></v-mask-input>
         </v-col>
         <span class="text-error text-caption w-100" v-if="errorMessage && !hideDetails">{{ errorMessage }}</span>
@@ -45,6 +46,10 @@ const props = defineProps({
     loading: {
         type: Boolean,
         default: false
+    },
+    readOnly: {
+        type: Boolean,
+        default: false
     }
 })
 
@@ -60,9 +65,12 @@ type TPhoneMask =
     }
 
 const phone = defineModel({ default: '' })
+const input = ref('')
 const selectedCode = ref('SG')
 const countries = phoneMasks
 const errorMessage = ref('')
+const maskRef = ref()
+const maskKey = ref(0)
 
 const currentMask = computed(() => {
     const country = phoneMasks.find((c: TPhoneMask) => c.code === selectedCode.value)
@@ -72,7 +80,9 @@ const currentMask = computed(() => {
 
 
 
-const validatePhone = (value: string): boolean | string => {
+const validatePhone = (): boolean | string => {
+    if(props.readOnly) return true;
+    const value = phone.value
     if (!value) {
         errorMessage.value = ''
         return true;
@@ -92,23 +102,29 @@ const validatePhone = (value: string): boolean | string => {
 
 
 
-
 function generateMaskFromRegex(regex: string): string {
+    let pattern = regex.replace(/^\^|\$$/g, '');
 
-    let pattern = regex.replace(/^\^|\$$/g, '')
-    pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) => '#'.repeat(Number(count)))
-    pattern = pattern.replace(/\\d/g, '#')
+    pattern = pattern.replace(/\(\?:\+?\d+\)\?/g, '');
+    pattern = pattern.replace(/\+?\d{1,4}/, '');
 
-    pattern = pattern.replace(/\\/g, '')
+    pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) => '#'.repeat(Number(count)));
 
-    pattern = pattern.replace(/\s\?/g, ' ')
-    pattern = pattern.replace(/\s/g, ' ')
+    pattern = pattern.replace(/\\d/g, '#');
 
-    pattern = pattern.replace(/\(\?:/g, '(')
+    pattern = pattern.replace(/\\/g, '');
+    pattern = pattern.replace(/\(\?:/g, '');
+    pattern = pattern.trim();
 
-    return pattern.trim()
+    return pattern;
 }
 
+const phonePrefix = computed(() => {
+    const country = phoneMasks.find((c: TPhoneMask) => c.code === selectedCode.value)
+    return country?.dial_code || ''
+})
+
+
 function handleUpdateCountry() {
     phone.value = ''
 }
@@ -116,8 +132,32 @@ function handleUpdateCountry() {
 const emit = defineEmits(['update:modelValue'])
 
 watch(phone, (newVal) => {
-  emit('update:modelValue', newVal)
+    emit('update:modelValue', newVal)
+})
+
+watch(input, (newInput) => {
+    const prefix = phonePrefix.value
+
+    if (!newInput) {
+        return
+    }
+
+    phone.value = prefix + newInput
+})
+
+
+onMounted(() => {
+    if (!phone.value) return
+
+    const found = phoneMasks.find((c: any) => phone.value?.startsWith(c?.dial_code))
+    if (found) {
+        selectedCode.value = found.code
+    }
+
+    input.value = phone.value.replace(found?.dial_code || '', '')
+    maskKey.value++
 })
 
 
+
 </script>

package/components/SupplyManagement.vue

@@ -58,7 +58,7 @@ const loading = ref(false);
 
 const page = ref(1);
 const pages = ref(0);
-const pageRange = ref("-- - -- of --");
+const pageRange = ref("1-10 of 10");
 const items = ref<Array<Record<string, any>>>([]);
 
 const headers: Array<Record<string, any>> = [

package/components/WorkOrder/Main.vue

@@ -7,7 +7,7 @@
           rounded="pill"
           variant="tonal"
           size="large"
-          @click="showCreateDialog = true"
+          @click="(showCreateDialog = true), (isEditMode = false)"
           v-if="canCreateWorkOrder"
         >
           Create Work Order
@@ -35,7 +35,7 @@
       >
         <v-toolbar density="compact" color="grey-lighten-4">
           <template #prepend>
-            <v-btn fab icon density="comfortable" @click="updatePage">
+            <v-btn fab icon density="comfortable" @click="updatePage(1)">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
           </template>
@@ -258,7 +258,12 @@ const selected = ref<string[]>([]);
 const route = useRoute();
 const { customers } = useCustomer();
 
-const { getWorkOrders: _getWorkOrders, createWorkOrder } = useWorkOrder();
+const {
+  getWorkOrders: _getWorkOrders,
+  createWorkOrder,
+  getWorkOrderById,
+  updateWorkOrder,
+} = useWorkOrder();
 
 const page = ref(1);
 const pages = ref(0);
@@ -294,6 +299,7 @@ async function updatePage(pageVal: any) {
   const response = await _getWorkOrders({
     page: page.value,
     site: route.params.site as string,
+    category: props.category,
   });
   if (response) {
     items.value = response.items;
@@ -412,7 +418,13 @@ async function submitWorkOrder() {
       site: route.params.site as string,
     };
 
-    const res = await createWorkOrder(payload);
+    let res: Record<string, any> = {};
+
+    if (isEditMode.value) {
+      res = await updateWorkOrder(_workOrderId.value as string, payload);
+    } else {
+      res = await createWorkOrder(payload);
+    }
 
     showMessage(res.message, "success");
     showCreateDialog.value = false;
@@ -437,12 +449,32 @@ function onViewWorkOrder(item: any) {
   });
 }
 
-function editWorkOrder(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 || "",
+      subject: _workOrders.subject || "",
+      description: _workOrders.description || "",
+      highPriority: _workOrders.highPriority || false,
+      unit: _workOrders.location || "",
+    };
+    _workOrderId.value = item._id;
+    isEditMode.value = true;
+    showCreateDialog.value = true;
+    dialogPreview.value = false;
+  } catch (error) {
+    showMessage("Failed to load full work order", "error");
+  }
+}
+
+async function _updateWorkOrder() {}
 
 function confirmDeleteWorkOrder(item: any) {}
 
 function tableRowClickHandler(_: any, data: any) {
-  console.log(data.item);
   selectedWorkOrder.value = data.item;
   dialogPreview.value = true;
 }