@iservice365/layer-common 1.1.0 → 1.3.0

package/components/Card/MemberInfoSummary.vue

@@ -0,0 +1,44 @@
+<template>
+    <v-card flat border="sm grey-lighten-2" color="grey-lighten-3" class="w-100">
+        <v-card-text>
+            <v-row no-gutters>
+                <v-col cols="10" no-gutters>
+                    <v-row no-gutters class="ga-1">
+                        <template v-for="(label, key) in displayFields" :key="key">
+                            <v-col v-if="member[key]" cols="12">
+                                <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong> {{ member[key]
+                                }}</span>
+                            </v-col>
+                        </template>
+                    </v-row>
+                </v-col>
+                <v-col cols="2" class="d-flex align-center justify-center">
+                    <v-btn icon="mdi-trash-outline" size="small" color="red" @click="emit('remove')" />
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+const prop = defineProps({
+    member: {
+        type: Object as PropType<TMemberInfo>,
+        required: true
+    }
+})
+
+const emit = defineEmits(['remove'])
+
+
+const displayFields: Record<keyof TMemberInfo, string> = {
+    name: "Name",
+    nric: "NRIC",
+    visitorPass: "Pass",
+    contact: "Contact"
+} as const
+
+</script>
+
+<style scoped></style>

package/components/Chat/Information.vue

@@ -62,7 +62,7 @@
           <v-row dense class="my-1 pr-4">
             <v-col cols="6" class="py-1"><strong>Category:</strong></v-col>
             <v-col cols="6" class="py-1 text-right text-capitalize">{{
-              item.categoryInfo
+              item.category
             }}</v-col>
           </v-row>
 
@@ -186,7 +186,7 @@
 
     <WorkOrderCreate
       v-model="showCreateDialog"
-      :created-from="'feedback'"
+      created-from="feedback"
       :work-order="_workOrder"
       @update:work-order="(val: TWorkOrderCreate) => (_workOrder = val)"
       :is-edit-mode="isEditMode"
@@ -269,20 +269,37 @@ const _workOrder = ref<TWorkOrderCreate>({
 const serviceProviders = ref<
   Array<{ title: string; value: string; subtitle: string }>
 >([]);
-const { getAll: getAllServiceProvider } = useServiceProvider();
-
-const { data: getAllReq } = useLazyAsyncData("get-all-service-providers", () =>
-  getAllServiceProvider({
-    siteId: useRoute().params.site as string,
-  })
+// const { getAll: getAllServiceProvider } = useServiceProvider();
+
+// const { data: getAllReq } = useLazyAsyncData("get-all-service-providers", () =>
+//   getAllServiceProvider({
+//     siteId: useRoute().params.site as string,
+//   })
+// );
+
+// watchEffect(() => {
+//   if (getAllReq.value) {
+//     serviceProviders.value = getAllReq.value.items.map((i: any) => ({
+//       title: i.nature.replace(/_/g, " "),
+//       value: i.serviceProviderOrgId,
+//       subtitle: i.name,
+//     }));
+//   }
+// });
+
+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.items.map((i: any) => ({
+    serviceProviders.value = getAllReq.value.map((i: any) => ({
       title: i.nature.replace(/_/g, " "),
-      value: i.serviceProviderOrgId,
-      subtitle: i.name,
+      subtitle: i.title,
+      value: i._id.org,
     }));
   }
 });

package/components/Dialog/DeleteConfirmation.vue

@@ -0,0 +1,51 @@
+<template>
+    <v-card width="100%" :disabled="loading" :loading="loading">
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
+            <span> {{ promptTitle }}</span>
+
+            <span v-if="message" class="text-error mt-2">
+                {{ message }} Do you want to delete anyway?
+            </span>
+        </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('close')"
+                        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="black"
+                        @click="emit('delete')">
+                        Delete
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-toolbar>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    message: {
+        type: String,
+        default: ""
+    },
+    promptTitle: {
+        type: String,
+        default: "Are you sure want to delete this? "
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(["close", "delete"])
+
+</script>
+
+<style scoped></style>

package/components/Dialog/UpdateMoreAction.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <template v-if="$slots.header">
+        <slot name="header" :title="title" :onClose="onClose" />
+      </template>
+      <template v-else>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h5 text-capitalize">{{
+            title
+          }}</span>
+        </v-row>
+      </template>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+      <slot name="content" />
+    </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"
+            @click="emit('close')"
+            height="48"
+          >
+            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"
+                class="text-none"
+                height="48"
+                v-bind="props"
+                tile
+              >
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0">
+              <v-list-item v-if="canUpdate" @click="emit('edit')">
+                <v-list-item-title class="text-subtitle-2">
+                  {{ editButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item v-if="canDelete" @click="emit('delete')" class="text-red">
+                <v-list-item-title class="text-subtitle-2">
+                  {{ deleteButtonLabel }}
+                </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({
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  editButtonLabel: {
+    type: String,
+    default: "Edit",
+  },
+  deleteButtonLabel: {
+    type: String,
+    default: "Delete",
+  },
+  title: {
+    type: String,
+    default: "Details",
+  },
+});
+
+const emit = defineEmits(["close", "edit", "delete"]);
+const { canUpdate, editButtonLabel, deleteButtonLabel, title } = prop;
+</script>
+
+<style scoped></style>

package/components/Feedback/Form.vue

@@ -15,13 +15,18 @@
       @errored="onImageError"
     />
 
-    <v-text-field
+    <v-autocomplete
+      v-model="localFeedback.subject"
+      :items="subjects"
+      item-title="title"
+      item-value="value"
+      item-props
       label="Subject"
       variant="outlined"
       density="compact"
-      v-model="localFeedback.subject"
       class="mb-2"
-      dense
+      clearable
+      :custom-filter="customFilter"
     />
 
     <v-autocomplete
@@ -133,4 +138,13 @@ function closeDialog() {
 function submitFeedback() {
   emit("submit", { ...localFeedback.value });
 }
+
+const { subjects } = useLocal();
+
+const customFilter = (value: string, query: string, item: any) => {
+  const title = item?.raw?.title?.toLowerCase() || "";
+  const subtitle = item?.raw?.subtitle?.toLowerCase() || "";
+  const search = query.toLowerCase();
+  return title.includes(search) || subtitle.includes(search);
+};
 </script>

package/components/FeedbackDetail.vue

@@ -1,16 +1,6 @@
 <template>
   <div class="feedback-detail-wrapper">
     <v-row no-gutters class="fill-height">
-      <!-- <v-col cols="12" xl="3" lg="4" md="4" class="fill-height">
-        <div class="panel-container border-e">
-          <ChatNavigation
-            :title="'Feedbacks'"
-            :items="items"
-            @select="handleSelectFeedback"
-            @search="_getFeedbacks"
-          />
-        </div>
-      </v-col> -->
 
       <v-col cols="12" xl="7" lg="7" md="7" class="fill-height">
         <div class="panel-container border-e">
@@ -179,7 +169,6 @@ const {
 } = useLazyAsyncData("get-all-feedbacks", () =>
   _getFeedbacks({
     page: page.value,
-    organization: route.params.org as string,
     site: route.params.site as string,
   })
 );

package/components/FeedbackMain.vue

@@ -164,6 +164,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  category: {
+    type: String,
+    default: "",
+  },
 });
 
 const isEditMode = ref(false);
@@ -179,20 +183,27 @@ const { getUserFromCookie } = useLocal();
 const serviceProviders = ref<
   Array<{ title: string; value: string; subtitle: string }>
 >([]);
-const { getAll: getAllServiceProvider } = useServiceProvider();
+// const { getAll: getAllServiceProvider } = useServiceProvider();
 
-const { data: getAllReq } = useLazyAsyncData("get-all-service-providers", () =>
-  getAllServiceProvider({
-    siteId: useRoute().params.site as string,
-  })
+// const { data: getAllReq } = useLazyAsyncData("get-all-service-providers", () =>
+//   getAllServiceProvider({
+//     siteId: useRoute().params.site as 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.items.map((i: any) => ({
+    serviceProviders.value = getAllReq.value.map((i: any) => ({
       title: i.nature.replace(/_/g, " "),
-      value: i.serviceProviderOrgId,
-      subtitle: i.name,
+      subtitle: i.title,
+      value: i.nature,
     }));
   }
 });
@@ -244,11 +255,11 @@ const {
   data: getAllFeedbackReq,
   status: getAllReqStatus,
   refresh: getAllReqRefresh,
-} = useLazyAsyncData("get-all-feedbacks", () =>
+} = useLazyAsyncData("get-all-feedbacks-" + props.category, () =>
   _getFeedbacks({
     page: page.value,
-    organization: route.params.org as string,
     site: route.params.site as string,
+    category: props.category,
   })
 );
 
@@ -268,7 +279,6 @@ async function updatePage(pageVal: any) {
   page.value = pageVal;
   const response = await _getFeedbacks({
     page: page.value,
-    organization: route.params.org as string,
     site: route.params.site as string,
   });
   if (response) {

package/components/Input/DateTimePicker.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="d-flex flex-column">
         <v-text-field v-bind="$attrs" ref="dateTimePickerRef" :model-value="dateTimeFormattedReadOnly"
-            placeholder="MM/DD/YYYY, HH:MM AM/PM" :rules="rules" style="z-index: 10" @click="openDatePicker">
+            :placeholder="placeholder" :rules="rules" style="z-index: 10" @click="openDatePicker">
             <template #append-inner>
                 <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
             </template>
@@ -20,6 +20,10 @@ const prop = defineProps({
         type: Array as PropType<Array<any>>,
         default: () => []
     },
+    placeholder: {
+        type: String,
+        default: 'MM/DD/YYYY, HH:MM AM/PM'
+    }
 })
 
 const { formatDateISO8601 } = useUtils()
@@ -93,15 +97,16 @@ watch(dateTime, (dateVal) => {
 
 }, { immediate: false })
 
+  watch(dateTimeUTC, () => {
+        handleInitialDate()
+  }, { immediate: true})
 
-onMounted(async () => {
 
-    handleInitialDate()
+onMounted(async () => {
     await nextTick()
     isInitialLoad.value = false
-
     // Wait until Vuetify renders its internal input
-    const nativeInput = dateTimePickerRef.value?.$el?.querySelector('input')
+    const nativeInput = (dateTimePickerRef.value as any)?.$el?.querySelector('input')
     if (nativeInput) {
         nativeInput.addEventListener('click', (e: MouseEvent) => {
             e.stopPropagation()

package/components/Input/File.vue

@@ -128,7 +128,7 @@ const props = defineProps<{
   attachments: string[];
   erroredImages?: string[];
   maxFiles?: number;
-  createdFrom: string;
+  createdFrom?: string;
 }>();
 
 const emit = defineEmits<{

package/components/Input/FileV2.vue

@@ -1,7 +1,7 @@
 <template>
     <v-row no-gutters class="w-100 pb-5" @click="resetErrorMessage">
         <v-file-upload v-model="uploadFiles" density="compact" @update:model-value="handleUpdateValue"
-            :loading="processing" :disabled="processing" :height="height" title="Upload Images" accept="image/*"
+            :loading="processing" :disabled="processing" :height="height" :title="title" :accept="accept"
             name="upload_images" class="text-caption w-100" clearable :multiple="multiple">
             <template v-slot:item="{ props: itemProps, file }">
                 <v-file-upload-item v-bind="itemProps" lines="one" nav>
@@ -22,93 +22,136 @@
 </template>
 
 <script setup lang="ts">
-
-const prop = defineProps({
-    height: {
-        type: Number || String,
-        default: 68
-    },
-    multiple: {
-        type: Boolean,
-        default: false
-    },
-    maxLength: {
-        type: Number,
-        default: 10
-    }
-
-
+import { nextTick, ref, onMounted, watch } from 'vue'
+
+const props = defineProps({
+  height: {
+    type: [Number, String],
+    default: 68,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  maxLength: {
+    type: Number,
+    default: 10,
+  },
+  title: {
+    type: String,
+    default: 'Upload Images'
+  },
+  accept: {
+    type: String,
+    default: "image/*"
+  }
 })
 
 const { addFile, deleteFile, getFileUrl, urlToFile } = useFile()
 
+// The parent v-model binding
+const idsArray = defineModel<string[]>({ default: [] })
+
 const uploadFiles = ref<File[]>([])
-const filesCollection = defineModel<{ file: File, id: string }[]>({required: true, default: []}) // files collection array
-const showCameraDialog = ref(false)
-const errorMessage = ref('');
+const filesCollection = ref<{ file: File; id: string }[]>([])
+const errorMessage = ref('')
 const processing = ref(false)
 
-const video = ref<HTMLVideoElement>()
-const canvas = ref<HTMLCanvasElement>()
-const cameraFacingMode = ref('environment')
-
+function fileKey(f: File) {
+  return `${f.name}_${f.size}_${f.lastModified}`
+}
 
 async function handleRemove(removedFile: File) {
-    const fileKey = (f: File) => `${f.name}_${f.size}_${f.lastModified}`
-    const arr = filesCollection.value
-    const fileId = arr.find(item => fileKey(item.file) === fileKey(removedFile))?.id
+  const key = fileKey(removedFile)
+  const arr = [...filesCollection.value]
+
+  const removedItem = arr.find((item) => fileKey(item.file) === key)
+  if (!removedItem) return
+
+  filesCollection.value = arr.filter((item) => item.id !== removedItem.id)
+  uploadFiles.value = uploadFiles.value.filter((f) => fileKey(f) !== key)
+
+
+  idsArray.value = filesCollection.value.map((x) => x.id)
 
-    uploadFiles.value = uploadFiles.value.filter(f => fileKey(f) !== fileKey(removedFile))
-    filesCollection.value = arr.filter(item => item.id !== fileId)
 }
 
 async function handleUpdateValue(value: File[]) {
-    await nextTick()
-    const max = prop.maxLength
-    const existingLength = filesCollection.value.length
-    errorMessage.value = ''
-    if ((existingLength + value.length) > max) {
-        value = value.slice(0, (max - existingLength))
-        errorMessage.value = `Max value of allowed image is ${max}`
-    }
-    uploadFiles.value = []
-    processing.value = true
-    // Determine which files are newly added or removed
-    const fileKey = (f: File) => `${f.name}_${f.size}_${f.lastModified}`
+  await nextTick()
+  const max = props.maxLength
+  const existingLength = filesCollection.value.length
+  errorMessage.value = ''
 
-    const arr = filesCollection.value
-    const collectionKeys = arr.map(x => fileKey(x.file))
-    const addedFiles = value.filter(f => !collectionKeys.includes(fileKey(f)))
+  if (existingLength + value.length > max) {
+    value = value.slice(0, max - existingLength)
+    errorMessage.value = `Max allowed images is ${max}`
+  }
 
-    // Upload new files
-    processing.value = true
+  const collectionKeys = filesCollection.value.map((x) => fileKey(x.file))
+  const addedFiles = value.filter((f) => !collectionKeys.includes(fileKey(f)))
+
+  processing.value = true
+  try {
     for (const file of addedFiles) {
-        try {
-            const res = await addFile(file) // expected to return { id, url } or similar
-            if (res?.id) {
-                filesCollection.value.push({ file, id: res?.id })
-            }
-        } catch (err) {
-            console.error("Upload failed", err)
-            errorMessage.value = `Failed to upload ${file.name}`
-        } finally {
-            processing.value = false
-            uploadFiles.value = filesCollection.value.map(x => x.file)
-        }
+      const res = await addFile(file) // should return { id, url }
+      if (res?.id) {
+        filesCollection.value.push({ file, id: res.id })
+      }
     }
 
+    uploadFiles.value = filesCollection.value.map((x) => x.file)
+    idsArray.value = filesCollection.value.map((x) => x.id)
+  } catch (err) {
+    console.error('Upload failed', err)
+    errorMessage.value = 'Failed to upload some files.'
+  } finally {
+    processing.value = false
+  }
+}
+
+
+async function loadFilesFromIds(ids: string[]) {
+  const result: { file: File; id: string }[] = []
+  for (const id of ids) {
+    try {
+      const url = await getFileUrl(id)
+      const name = decodeURIComponent(url.split('/').pop() || `file_${id}`)
+      const file = await urlToFile(url, name)
+      result.push({ file, id })
+    } catch (err) {
+      console.warn('Failed to load file from ID:', id, err)
+    }
+  }
+  return result
 }
 
-function resetErrorMessage(){
-    errorMessage.value = '';
-    
+
+function resetErrorMessage() {
+  errorMessage.value = ''
 }
 
-onMounted(() => {
-    filesCollection.value = []
+
+onMounted(async () => {
+  if (idsArray.value.length > 0) {
+    processing.value = true
+    const loaded = await loadFilesFromIds(idsArray.value)
+    filesCollection.value = loaded
+    uploadFiles.value = loaded.map((x) => x.file)
+    processing.value = false
+  }
 })
+
+
+watch(
+  filesCollection,
+  (newVal) => {
+    idsArray.value = newVal.map((x) => x.id)
+  },
+  { deep: true }
+)
 </script>
 
+
 <style scoped>
 * :deep(.v-file-upload-title) {
     font-size: 1rem;