@7365admin1/layer-common 1.11.17 → 1.11.19

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.11.19
+
+### Patch Changes
+
+- e340731: Update Layer-common
+
+## 1.11.18
+
+### Patch Changes
+
+- 5e21af9: updates and fixes
+
 ## 1.11.17
 
 ### Patch Changes

package/components/AddPassKeyToVisitor.vue

@@ -0,0 +1,207 @@
+<template>
+    <v-card width="100%" :loading="processing">
+        <v-toolbar>
+            <v-row no-gutters class="fill-height px-6 d-flex justify-space-between align-center" align="center">
+                <span class="font-weight-bold text-subtitle-1">Assign Pass & Keys</span>
+                <ButtonClose @click="emit('close')" />
+            </v-row>
+        </v-toolbar>
+
+        <v-card-text>
+            <v-row no-gutters class="ga-1">
+                <v-col cols="12">
+                    <span class="text-subtitle-2 text-medium-emphasis">
+                       Name: {{ prop.visitor.name }}
+                    </span>
+                </v-col>
+
+                <v-col cols="12" class="mt-3">
+                    <InputLabel title="Pass" />
+                    <v-autocomplete
+                        v-model="selectedPass"
+                        v-model:search="passInput"
+                        :hide-no-data="false"
+                        :items="passItems"
+                        item-title="prefixAndName"
+                        item-value="_id"
+                        variant="outlined"
+                        hide-details
+                        density="compact"
+                        small-chips
+                        :loading="fetchPassesPending"
+                    >
+                        <template v-slot:chip="{ props: chipProps, item }">
+                            <v-chip v-if="selectedPass" v-bind="chipProps" prepend-icon="mdi-card-bulleted-outline"
+                                :text="item.raw?.prefixAndName" />
+                        </template>
+                        <template v-slot:no-data>
+                            <v-list-item density="compact">
+                                <v-list-item-title>No available passes</v-list-item-title>
+                            </v-list-item>
+                        </template>
+                    </v-autocomplete>
+                </v-col>
+
+                <v-col v-if="showKeys" cols="12" class="mt-3">
+                    <InputLabel title="Keys" />
+                    <v-autocomplete
+                        v-model="selectedKeys"
+                        v-model:search="keyInput"
+                        :hide-no-data="false"
+                        :items="keyItems"
+                        item-title="prefixAndName"
+                        item-value="_id"
+                        multiple
+                        variant="outlined"
+                        hide-details
+                        density="compact"
+                        small-chips
+                        :loading="fetchKeysPending"
+                    >
+                        <template v-slot:chip="{ props: chipProps, item }">
+                            <v-chip v-if="selectedKeys.length > 0" v-bind="chipProps" prepend-icon="mdi-key"
+                                :text="item.raw?.prefixAndName" />
+                        </template>
+                        <template v-slot:no-data>
+                            <v-list-item density="compact">
+                                <v-list-item-title>No available keys</v-list-item-title>
+                            </v-list-item>
+                        </template>
+                    </v-autocomplete>
+                </v-col>
+            </v-row>
+
+            <v-row v-if="errorMessage" no-gutters class="mt-2">
+                <p class="text-error text-subtitle-2 w-100 text-center">{{ errorMessage }}</p>
+            </v-row>
+        </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" text="Cancel" @click="emit('close')" />
+                </v-col>
+                <v-col cols="6">
+                    <v-btn
+                        tile block variant="flat" color="black" class="text-none" size="48"
+                        text="Assign"
+                        :disabled="!selectedPass && selectedKeys.length === 0"
+                        :loading="processing"
+                        @click="handleSubmit"
+                    />
+                </v-col>
+            </v-row>
+        </v-toolbar>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import usePassKey from '../composables/usePassKey'
+import useVisitor from '../composables/useVisitor'
+
+const prop = defineProps({
+    visitor: {
+        type: Object as PropType<TVisitor>,
+        required: true,
+    },
+    site: {
+        type: String,
+        required: true,
+    },
+    type: {
+        type: String as PropType<TVisitorType>,
+        required: true,
+    },
+    contractorType: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits<{
+    (e: 'done'): void
+    (e: 'close'): void
+}>()
+
+const { getPassKeysByPageSearch } = usePassKey()
+const { updateVisitor } = useVisitor()
+
+const processing = ref(false)
+const errorMessage = ref('')
+
+const selectedPass = ref<string>('')
+const selectedKeys = ref<string[]>([])
+const passInput = ref('')
+const keyInput = ref('')
+const passItems = ref<TPassKey[]>([])
+const keyItems = ref<TPassKey[]>([])
+
+const showKeys = computed(() => prop.visitor.type === 'contractor')
+
+const passTypesComputed = computed(() => {
+    if (prop.type === 'contractor') {
+        return prop.contractorType === 'property-agent' ? ['agent-pass'] : ['contractor-pass']
+    }
+    return ['visitor-pass']
+})
+
+const { data: passesData, pending: fetchPassesPending } = await useLazyAsyncData(
+    `add-pass-key-visitor-passes-${prop.visitor._id}`,
+    () => getPassKeysByPageSearch({
+        search: passInput.value,
+        page: 1,
+        limit: 500,
+        passTypes: passTypesComputed.value,
+        sites: [prop.site],
+        statuses: ['Available'],
+    })
+)
+
+const { data: keysData, pending: fetchKeysPending } = await useLazyAsyncData(
+    `add-pass-key-visitor-keys-${prop.visitor._id}`,
+    () => getPassKeysByPageSearch({
+        search: keyInput.value,
+        page: 1,
+        limit: 500,
+        passTypes: ['pass-key'],
+        sites: [prop.site],
+        statuses: ['Available'],
+    })
+)
+
+watch(passesData, (data: any) => {
+    passItems.value = Array.isArray(data?.items) ? data.items : []
+})
+
+watch(keysData, (data: any) => {
+    keyItems.value = Array.isArray(data?.items) ? data.items : []
+})
+
+async function handleSubmit() {
+    if (!prop.visitor._id) return
+    errorMessage.value = ''
+    processing.value = true
+
+    try {
+        const payload: Partial<TVisitorPayload> = {}
+
+        if (selectedPass.value) {
+            payload.visitorPass = [{ keyId: selectedPass.value, status: "In Use" }]
+        }
+
+        if (selectedKeys.value.length > 0) {
+            payload.passKeys = selectedKeys.value.map(keyId => ({ keyId, status: "In Use" }))
+        }
+
+        await updateVisitor(prop.visitor._id, payload)
+        emit('done')
+    } catch (error: any) {
+        errorMessage.value = error?.data?.message || 'Failed to assign pass & keys. Please try again.'
+    } finally {
+        processing.value = false
+    }
+}
+</script>
+
+<style scoped></style>

package/components/BuildingUnitFormEdit.vue

@@ -227,6 +227,17 @@
 
             </v-row>
           </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <InputLabel class="text-capitalize d-block mb-1" title="Unit Documents" />
+            <InputFileV2
+              v-model="buildingUnit.buildingUnitFiles"
+              :multiple="true"
+              accept="*/*"
+              title="Upload documents"
+              :height="104"
+            />
+          </v-col>
         </v-row>
       </template>
     </v-card-text>
@@ -331,6 +342,35 @@ const buildingUnit = ref({
 
 buildingUnit.value = JSON.parse(JSON.stringify(prop.roomFacility));
 
+// Normalize buildingUnitFiles: extract IDs for InputFileV2, keep names in a separate map
+const buildingUnitFilesNames = ref<Record<string, string>>({});
+const rawFiles = buildingUnit.value.buildingUnitFiles as any[];
+if (rawFiles?.length && typeof rawFiles[0] === 'object') {
+  rawFiles.forEach((f: { id: string; name: string }) => {
+    buildingUnitFilesNames.value[f.id] = f.name ?? "";
+  });
+  buildingUnit.value.buildingUnitFiles = rawFiles.map((f: { id: string }) => f.id);
+}
+
+const { getFileById } = useFile();
+
+watch(
+  () => buildingUnit.value.buildingUnitFiles as string[],
+  async (ids) => {
+    for (const id of ids) {
+      if (!buildingUnitFilesNames.value[id]) {
+        try {
+          const meta = await getFileById(id) as any;
+          buildingUnitFilesNames.value[id] = meta?.data?.name ?? meta?.name ?? "";
+        } catch {
+          buildingUnitFilesNames.value[id] = "";
+        }
+      }
+    }
+  },
+  { deep: true }
+);
+
 const emit = defineEmits(["cancel", "success", "success:create-more", "delete-unit"]);
 
 
@@ -462,7 +502,7 @@ async function submit() {
       name: buildingUnit.value.name,
       level: buildingUnit.value.level,
       // category: buildingUnit.value.category,
-      buildingUnitFiles: buildingUnit.value.buildingUnitFiles || [],
+      buildingUnitFiles: (buildingUnit.value.buildingUnitFiles as string[] || []).map((id) => ({ id, name: buildingUnitFilesNames.value[id] ?? "" })),
       companyName: buildingUnit.value.companyName,
       companyRegistrationNumber: buildingUnit.value.companyRegistrationNumber || "",
       leaseStart: buildingUnit.value.leaseStart,

package/components/Card/MemberInfoSummary.vue

@@ -26,7 +26,11 @@ const prop = defineProps({
     member: {
         type: Object as PropType<TMemberInfo>,
         required: true
-    }
+        },
+        visitorPassItems: {
+            type: Array as PropType<TPassKey[]>,
+            default: () => []
+        }
 })
 
 const emit = defineEmits(['remove'])

package/components/Input/FileV2.vue

@@ -77,7 +77,7 @@ const props = defineProps({
   }
 })
 
-const { addFile, deleteFile, getFileUrl, urlToFile } = useFile()
+const { addFile, deleteFile, getFileUrl, getFileById, urlToFile } = useFile()
 
 const showImageCarousel = ref(false)
 const activeImageId = ref("")
@@ -187,8 +187,9 @@ async function downloadFile(id: string, filename: 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 meta = await getFileById(id) as any
+        const name: string = meta?.data?.name || meta?.name || `file_${id}`
+        const url = getFileUrl(id)
         const file = await urlToFile(url, name)
         result.push({ file, id })
       } catch (err) {

package/components/MemberInformation.vue

@@ -19,9 +19,9 @@
                         </v-col>
 
                         <v-col cols="12">
-                            <v-combobox v-model="pass" v-model:search="passInput" :hide-no-data="false" class="mt-3"
-                                @update:focused="handleFocusedPass" :items="passItems" item-value="value"
-                                @update:model-value="handleSelectPass" label="Pass (optional)" variant="outlined"
+                            <v-autocomplete v-model="selectedPass" v-model:search="passInput"
+                                :hide-no-data="false" class="mt-3" :items="passItemsFilteredFinal"
+                                item-title="prefixAndName" item-value="_id" label="Pass (optional)" variant="outlined"
                                 hide-details density="compact" persistent-hint small-chips>
                                 <template v-slot:no-data>
                                     <v-list-item density="compact">
@@ -33,12 +33,19 @@
                                         <v-list-item v-else>No data available</v-list-item>
                                     </v-list-item>
                                 </template>
-                            </v-combobox>
+
+                                <template v-slot:chip="{ props, item }">
+                                    <v-chip v-if="selectedPass" v-bind="props"
+                                        prepend-icon="mdi-card-bulleted-outline"
+                                        :text="item.raw?.prefixAndName"></v-chip>
+                                </template>
+                            </v-autocomplete>
                         </v-col>
 
                         <v-col cols="12">
                             <InputLabel class="text-capitalize" title="Phone Number" required />
-                                <InputPhoneNumberV2 v-model="memberForm.contact" density="compact" hide-details/>
+                            <InputPhoneNumberV2 v-model="memberForm.contact" density="compact" default-country="SG"
+                                hide-details />
                         </v-col>
 
                         <v-row class="pt-3" justify="space-between">
@@ -56,20 +63,41 @@
             </v-card-text>
         </v-card>
         <v-divider class="my-3" />
-        <v-row v-if="members.length > 0" no-gutters class="w-100 mt-5 ga-3">
-            <template v-for="member, index in members" :key="member.nric">
-                <CardMemberInfoSummary :member="member" @remove="handleRemoveMember(index)" />
+        <v-row v-if="committedMembers.length > 0" no-gutters class="w-100 mt-5 ga-3">
+            <template v-for="member, index in committedMembers" :key="member.nric">
+                <CardMemberInfoSummary :member="membersDisplayed[index]" @remove="handleRemoveMember(index)" />
             </template>
         </v-row>
     </v-row>
 </template>
 
 <script setup lang="ts">
+import type { PropType } from 'vue'
+import usePassKey from '../composables/usePassKey'
+import useUtils from '../composables/useUtils'
+
 
 const props = defineProps({
+    type: {
+        type: String,
+        required: true
+    },
+    contractorType: {
+        type: String,
+        required: false
+    },
+    site: {
+        type: String,
+        required: true
+    },
+    selectedVisitorPass: {
+        type: Array as PropType<TPassKeyPayload[]>,
+        default: () => []
+    }
 })
 
 const { requiredRule } = useUtils()
+const { getPassKeysByPageSearch } = usePassKey()
 
 
 const memberForm = reactive<TMemberInfo>({
@@ -85,33 +113,83 @@ const processing = ref(false);
 const errorMessage = ref('')
 
 // pass
-const pass = ref()
 const passInput = ref('')
-const passItems = ref(['Test'])
+const passItems = ref<TPassKey[]>([])
+
+const selectedPass = ref<string>('')
+
+const members = defineModel<TMemberInfo[]>({ required: true, default: [] })
+const committedMembers = ref<TMemberInfo[]>([])
+
+// Always keep the model in sync: committed members + current form draft
+watch(() => memberForm, (newForm) => {
+    if (memberForm.name && memberForm.nric && memberForm.contact) {
+        members.value = [...committedMembers.value, { ...newForm }]
+    } else {
+        members.value = [...committedMembers.value]
+    }
+}, { deep: true })
+
+
+const passTypesComputed = computed(() => {
+    if (props.type === 'contractor') {
+        if (props.contractorType === 'property-agent') {
+            return ["agent-pass"]
+        } else {
+            return ["contractor-pass"]
+        }
+    } else {
+        return ["visitor-pass"]
+    }
+})
 
-const members = defineModel<TMemberInfo[]>({required: true, default: []})
+const { data: passesData, refresh: refreshPassesData, pending: fetchPassesPending } = await useLazyAsyncData('get-pass-keys', () => {
+    return getPassKeysByPageSearch({
+        search: passInput.value,
+        page: 1,
+        limit: 500,
+        passTypes: passTypesComputed.value,
+        sites: [props.site],
+        statuses: ["Available"]
+    })
+})
 
+watch(passesData, (data: any) => {
+    passItems.value = Array.isArray(data?.items) ? data.items : []
+})
 
-function handleFocusedPass() {
+const passItemsFilteredFinal = computed(() => {
+    return passItems.value.filter((item: TPassKey) => {
+        return !props.selectedVisitorPass.some((pass: TPassKeyPayload) => pass.keyId === item._id) && !committedMembers.value.some((member: TMemberInfo) => member.visitorPass === item._id)
+    })
+})
+
+const membersDisplayed = computed(() => {
+    return committedMembers.value.map((member: TMemberInfo) => {
+        return {
+            ...member,
+            visitorPass: passItems.value.find((item: TPassKey) => item._id === member.visitorPass)?.prefixAndName || ""
+        }
+    })
+})
+
+watch(selectedPass, (newVal) => {
+    memberForm.visitorPass = [{ keyId: newVal }]
+})
 
-}
 
-function handleSelectPass(val: any) {
-    memberForm.visitorPass = val
-}
 
 function handleClearForm() {
     formRef.value?.reset()
 }
 
 async function handleAddMember() {
-    members.value.push({...memberForm})
+    committedMembers.value.push({ ...memberForm })
     handleClearForm()
 }
 
-function handleRemoveMember(index: number){
-    const filtered = members.value.filter((item, qIndex) =>  qIndex !== index)
-    members.value = filtered
+function handleRemoveMember(index: number) {
+    committedMembers.value = committedMembers.value.filter((_, i) => i !== index)
 }
 
 

package/components/PassInformation.vue

@@ -4,27 +4,36 @@
             <v-card-text>
                 <v-btn block color="primary-button" :height="40" text="Scan QR Code" class="text-capitalize" disabled
                     prepend-icon="mdi-qrcode" />
-                <v-combobox v-model="pass" v-model:search="passInput" :hide-no-data="false" class="mt-3"
-                    @update:focused="handleFocusedPass" :items="passItems" :rules="props.passRules" item-title="prefixAndName" item-value="_id"
-                    @update:model-value="handleSelectPass" label="Pass" variant="outlined" hide-details
-                    density="compact" persistent-hint small-chips>
-                    <template v-slot:no-data>
-                        <v-list-item density="compact">
-                            <v-list-item-title v-if="passInput">
-                                No results matching "<strong>{{ passInput }}</strong>". This value will be
-                                added as new
-                                option.
-                            </v-list-item-title>
-                            <v-list-item v-else>No data available</v-list-item>
-                        </v-list-item>
+                <v-autocomplete v-model="selectedPass" v-model:search="passInput" :hide-no-data="false" class="mt-3"
+                    :items="passItems" :rules="props.passRules" item-title="prefixAndName" item-value="_id" label="Pass"
+                    variant="outlined" hide-details density="compact" persistent-hint small-chips>
+
+                    <template v-slot:chip="{ props, item }">
+                        <v-chip v-if="selectedPass" v-bind="props" prepend-icon="mdi-card-bulleted-outline"
+                            :text="item.raw?.prefixAndName"></v-chip>
                     </template>
-                </v-combobox>
+                </v-autocomplete>
+
+
+                <template v-if="!props.hideKeys">
+                    <v-autocomplete v-model="selectedKeys" v-model:search="keyInput" :hide-no-data="false" class="mt-3"
+                        :items="keyItems" :rules="props.passRules" item-title="prefixAndName" item-value="_id"
+                        label="Keys" multiple variant="outlined" hide-details density="compact" persistent-hint
+                        small-chips>
+
+                        <template v-slot:chip="{ props, item }">
+                            <v-chip v-if="selectedKeys.length > 0" v-bind="props" prepend-icon="mdi-key"
+                                :text="item.raw?.prefixAndName"></v-chip>
+                        </template>
+                    </v-autocomplete>
+                </template>
 
                 <v-divider class="my-4 w-100" />
-            
+
 
                 <template v-if="selectedType">
-                    <v-number-input v-model="count" variant="outlined" :min="1" :precision="0" density="compact" :rules="countRules"  />
+                    <v-number-input v-model="count" variant="outlined" :min="1" :precision="0" density="compact"
+                        :rules="countRules" />
                 </template>
             </v-card-text>
         </v-card>
@@ -35,6 +44,7 @@
 import type { PropType } from 'vue'
 import type { ValidationRule } from 'vuetify/lib/types.mjs'
 import usePassKey from '../composables/usePassKey'
+import useKey from '../composables/useKey'
 
 const props = defineProps({
     passRules: {
@@ -56,12 +66,21 @@ const props = defineProps({
     contractorType: {
         type: String,
         default: ""
+    },
+    hideKeys: {
+        type: Boolean,
+        default: false
     }
 })
 
-const pass = ref("")
+const pass = defineModel<TPassKeyPayload[]>("pass", { default: [] })
+const keys = defineModel<TPassKeyPayload[]>("keys", { default: [] })
+const selectedPass = ref<string>('')
+const selectedKeys = ref<string[]>([])
 const passInput = ref('')
-const passItems = ref([])
+const keyInput = ref('')
+const passItems = ref<TPassKey[]>([])
+const keyItems = ref<any[]>([])
 const selectedType = ref<'qr-pass' | 'nfc-card'>()
 const count = ref(1)
 
@@ -79,15 +98,15 @@ const typeItems = [
 ]
 
 const passTypesComputed = computed(() => {
-   if(props.type === 'contractor'){
-    if(props.contractorType === 'property-agent'){
-        return ["agent-pass"]
+    if (props.type === 'contractor') {
+        if (props.contractorType === 'property-agent') {
+            return ["agent-pass"]
+        } else {
+            return ["contractor-pass"]
+        }
     } else {
-        return ["contractor-pass"]
+        return ["visitor-pass"]
     }
-   } else {
-    return ["visitor-pass"]
-   }
 })
 
 const { data: passesData, refresh: refreshPassesData, pending: fetchPassesPending } = await useLazyAsyncData('get-pass-keys', () => {
@@ -105,22 +124,48 @@ watch(passesData, (data: any) => {
     passItems.value = data?.items || []
 })
 
+const { data: keysData, refresh: refreshKeysData, pending: fetchKeysPending } = await useLazyAsyncData('get-keys', () => {
+    return getPassKeysByPageSearch({
+        search: keyInput.value,
+        statuses: ["Available"],
+        passTypes: ['pass-key'],
+        page: 1,
+        limit: 500,
+        sites: [props.site],
+    })
+})
+
+watch(keysData, (data: any) => {
+    keyItems.value = data?.items || []
+})
 
-function handleFocusedPass() {
+watch(selectedPass, (newVal) => {
+    pass.value = [{ keyId: newVal }]
+})
+
+watch(selectedKeys, (newVal) => {
+    keys.value = newVal.map(key => ({ keyId: key }))
+})
 
-}
 
-function handleSelectPass() {
 
-}
 
 //prevent negative value;
 watch(count, (newCount) => {
-    if(newCount < 1){
+    if (newCount < 1) {
         count.value = 1
     }
 })
 
+onMounted(() => {
+    if (pass.value.length > 0) {
+        selectedPass.value = pass.value[0].keyId
+    }
+    if (keys.value.length > 0) {
+        selectedKeys.value = keys.value.map(k => k.keyId)
+    }
+})
+
 </script>
 
 <style scoped></style>