@7365admin1/layer-common 1.11.20 → 1.11.21

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.11.21
+
+### Patch Changes
+
+- 17a59f6: Update Layer-common
+
 ## 1.11.20
 
 ### Patch Changes

package/components/AddPassKeyToVisitor.vue

@@ -2,7 +2,8 @@
     <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>
+                <span class="font-weight-bold text-subtitle-1">{{ isEditMode ? 'Edit' : 'Assign' }} Pass &amp;
+                    Keys</span>
                 <ButtonClose @click="emit('close')" />
             </v-row>
         </v-toolbar>
@@ -11,25 +12,28 @@
             <v-row no-gutters class="ga-1">
                 <v-col cols="12">
                     <span class="text-subtitle-2 text-medium-emphasis">
-                       Name: {{ prop.visitor.name }}
+                        Name: {{ prop.visitor.name }}
                     </span>
                 </v-col>
 
+                <!-- Pass section -->
                 <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"
-                    >
+
+                    <!-- Existing pass -->
+                    <div v-if="existingPass" class="d-flex align-center ga-2 mb-2">
+                        <v-chip prepend-icon="mdi-card-bulleted-outline" color="blue" variant="tonal" size="small"
+                            closable @click:close="existingPass = null">
+                            {{ existingPass.prefixAndName }}
+                        </v-chip>
+                        <span class="text-caption text-medium-emphasis">(current)</span>
+                    </div>
+
+                    <!-- New pass selector -->
+                    <v-autocomplete v-if="!existingPass" 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"
+                        clearable>
                         <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" />
@@ -42,22 +46,24 @@
                     </v-autocomplete>
                 </v-col>
 
+                <!-- Keys section -->
                 <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"
-                    >
+
+                    <!-- Existing keys -->
+                    <div v-if="existingKeys.length > 0" class="d-flex flex-wrap ga-1 mb-2">
+                        <v-chip v-for="key in existingKeys" :key="key.keyId" prepend-icon="mdi-key" color="orange"
+                            variant="tonal" size="small" closable @click:close="removeExistingKey(key.keyId)">
+                            {{ key.prefixAndName }}
+                        </v-chip>
+                        <span class="text-caption text-medium-emphasis align-self-center">(current)</span>
+                    </div>
+
+                    <!-- New keys selector -->
+                    <v-autocomplete v-model="selectedKeys" v-model:search="keyInput" :hide-no-data="false"
+                        :items="keyItems" item-title="prefixAndName" item-value="_id"
+                        :label="existingKeys.length > 0 ? 'Add more keys' : undefined" 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" />
@@ -82,13 +88,9 @@
                     <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-btn tile block variant="flat" color="black" class="text-none" size="48"
+                        :text="isEditMode ? 'Save' : 'Assign'" :disabled="!canSubmit" :loading="processing"
+                        @click="handleSubmit" />
                 </v-col>
             </v-row>
         </v-toolbar>
@@ -109,13 +111,9 @@ const prop = defineProps({
         type: String,
         required: true,
     },
-    type: {
-        type: String as PropType<TVisitorType>,
-        required: true,
-    },
-    contractorType: {
-        type: String,
-        default: '',
+    mode: {
+        type: String as PropType<'add' | 'edit'>,
+        default: 'add',
     },
 })
 
@@ -130,6 +128,7 @@ const { updateVisitor } = useVisitor()
 const processing = ref(false)
 const errorMessage = ref('')
 
+// New selections
 const selectedPass = ref<string>('')
 const selectedKeys = ref<string[]>([])
 const passInput = ref('')
@@ -137,16 +136,46 @@ const keyInput = ref('')
 const passItems = ref<TPassKey[]>([])
 const keyItems = ref<TPassKey[]>([])
 
+// Existing pass/keys (editable)
+const existingPass = ref<{ keyId: string; prefixAndName: string } | null>(null)
+const existingKeys = ref<{ keyId: string; prefixAndName: string }[]>([])
+
+const isEditMode = computed(() => prop.mode === 'edit')
 const showKeys = computed(() => prop.visitor.type === 'contractor')
 
 const passTypesComputed = computed(() => {
-    if (prop.type === 'contractor') {
-        return prop.contractorType === 'property-agent' ? ['agent-pass'] : ['contractor-pass']
+    const type = prop.visitor.type
+    const contractorType = (prop.visitor as any).contractorType
+    if (type === 'contractor') {
+        return contractorType === 'property-agent' ? ['agent-pass'] : ['contractor-pass']
     }
     return ['visitor-pass']
 })
 
-const { data: passesData, pending: fetchPassesPending } = await useLazyAsyncData(
+// Initialise existing values in edit mode
+onMounted(() => {
+    if (isEditMode.value) {
+        const vPass = prop.visitor.visitorPass
+        if (Array.isArray(vPass) && vPass.length > 0) {
+            const p = vPass[0] as any
+            existingPass.value = { keyId: p.keyId, prefixAndName: p.prefixAndName }
+        }
+        const vKeys = prop.visitor.passKeys
+        if (Array.isArray(vKeys) && vKeys.length > 0) {
+            existingKeys.value = (vKeys as any[]).map(k => ({ keyId: k.keyId, prefixAndName: k.prefixAndName }))
+        }
+    }
+})
+
+function removeExistingKey(keyId: string) {
+    existingKeys.value = existingKeys.value.filter(k => k.keyId !== keyId)
+}
+
+// Exclude already-held pass/keys from selectable lists
+const existingPassId = computed(() => existingPass.value?.keyId)
+const existingKeyIds = computed(() => existingKeys.value.map(k => k.keyId))
+
+const { data: passesData, refresh: refreshPasses, pending: fetchPassesPending } = await useLazyAsyncData(
     `add-pass-key-visitor-passes-${prop.visitor._id}`,
     () => getPassKeysByPageSearch({
         search: passInput.value,
@@ -158,7 +187,7 @@ const { data: passesData, pending: fetchPassesPending } = await useLazyAsyncData
     })
 )
 
-const { data: keysData, pending: fetchKeysPending } = await useLazyAsyncData(
+const { data: keysData, refresh: refreshKeys, pending: fetchKeysPending } = await useLazyAsyncData(
     `add-pass-key-visitor-keys-${prop.visitor._id}`,
     () => getPassKeysByPageSearch({
         search: keyInput.value,
@@ -171,11 +200,30 @@ const { data: keysData, pending: fetchKeysPending } = await useLazyAsyncData(
 )
 
 watch(passesData, (data: any) => {
-    passItems.value = Array.isArray(data?.items) ? data.items : []
+    const all: TPassKey[] = Array.isArray(data?.items) ? data.items : []
+    passItems.value = all.filter(p => p._id !== existingPassId.value)
 })
 
 watch(keysData, (data: any) => {
-    keyItems.value = Array.isArray(data?.items) ? data.items : []
+    const all: TPassKey[] = Array.isArray(data?.items) ? data.items : []
+    keyItems.value = all.filter(k => !existingKeyIds.value.includes(k._id!))
+})
+
+// Re-filter when existing items change
+watch([existingPassId, existingKeyIds], () => {
+    const rawPasses = (passesData.value as any)?.items ?? []
+    passItems.value = rawPasses.filter((p: TPassKey) => p._id !== existingPassId.value)
+    const rawKeys = (keysData.value as any)?.items ?? []
+    keyItems.value = rawKeys.filter((k: TPassKey) => !existingKeyIds.value.includes(k._id!))
+}, { deep: true })
+
+const canSubmit = computed(() => {
+    if (isEditMode.value) {
+        // allow save if anything changed: existing items modified OR new items selected
+        return existingPass.value !== null || selectedPass.value ||
+            existingKeys.value.length > 0 || selectedKeys.value.length > 0
+    }
+    return !!selectedPass.value || selectedKeys.value.length > 0
 })
 
 async function handleSubmit() {
@@ -186,18 +234,30 @@ async function handleSubmit() {
     try {
         const payload: Partial<TVisitorPayload> = {}
 
+        // Build final pass list: kept existing + newly selected
+        const finalPasses: { keyId: string; status: string }[] = []
+        if (existingPass.value) {
+            finalPasses.push({ keyId: existingPass.value.keyId, status: 'In Use' })
+        }
         if (selectedPass.value) {
-            payload.visitorPass = [{ keyId: selectedPass.value, status: "In Use" }]
+            finalPasses.push({ keyId: selectedPass.value, status: 'In Use' })
         }
+        payload.visitorPass = finalPasses
 
-        if (selectedKeys.value.length > 0) {
-            payload.passKeys = selectedKeys.value.map(keyId => ({ keyId, status: "In Use" }))
+        // Build final keys list: kept existing + newly selected
+        if (showKeys.value) {
+            const finalKeys: { keyId: string; status: string }[] = [
+                ...existingKeys.value.map(k => ({ keyId: k.keyId, status: 'In Use' })),
+                ...selectedKeys.value.map(keyId => ({ keyId, status: 'In Use' })),
+            ]
+            payload.passKeys = finalKeys
         }
 
         await updateVisitor(prop.visitor._id, payload)
         emit('done')
+        emit('close')
     } catch (error: any) {
-        errorMessage.value = error?.data?.message || 'Failed to assign pass & keys. Please try again.'
+        errorMessage.value = error?.data?.message || 'Failed to save pass & keys. Please try again.'
     } finally {
         processing.value = false
     }
@@ -205,3 +265,4 @@ async function handleSubmit() {
 </script>
 
 <style scoped></style>
+

package/components/BulletinBoardView.vue

@@ -31,24 +31,119 @@
                 </template>
 
                 <v-col cols="12" v-if="prop.activeAnnouncement?.file?.length > 0" class="mb-5">
-                    <v-row no-gutters class="font-weight-bold text-subtitle-1">Attachments:</v-row>
-                    <v-row no-gutters class="">
-                        <template v-if="videosArray.length > 0">
-                            <v-col cols="12">Videos ({{ videosArray.length }})</v-col>
-                            <AttachmentList :list="videosArray" show-checkbox read-only />
-                        </template>
-
-                        <template v-if="photosArray.length > 0">
-                            <v-col cols="12" class="mt-1">Photos ({{ photosArray.length }})</v-col>
-                            <AttachmentList :list="photosArray" show-checkbox read-only />
-                        </template>
-
-                        <template v-if="filesArray.length > 0">
-                            <v-col cols="12" class="mt-1">Files ({{ filesArray.length }})</v-col>
-                            <AttachmentList :list="filesArray" show-checkbox read-only />
-                        </template>
+                    <v-row no-gutters>
+                        <v-col class="font-weight-bold">Attachments:</v-col>
+                        <v-col cols="9" class="px-10">
+
+                            <template v-if="videosArray.length > 0">
+                                <div class="text-caption text-medium-emphasis mb-1">Videos ({{ videosArray.length }})</div>
+                                <v-list density="compact" class="pa-0 rounded-lg border mb-3">
+                                    <template v-for="(item, i) in videosArray" :key="item._id">
+                                        <v-divider v-if="i > 0" />
+                                        <v-list-item
+                                            :prepend-icon="getFileIcon(item.file.type)"
+                                            :title="item.file.name"
+                                            :subtitle="item.file.type"
+                                            class="cursor-pointer"
+                                            @click="openMediaViewer(item._id, 'media')"
+                                        >
+                                            <template #prepend>
+                                                <v-icon :color="getFileIconColor(item.file.type)" class="mr-3">{{ getFileIcon(item.file.type) }}</v-icon>
+                                            </template>
+                                            <template #append>
+                                                <v-icon size="16" color="grey-lighten-1">mdi-play-circle-outline</v-icon>
+                                            </template>
+                                        </v-list-item>
+                                    </template>
+                                </v-list>
+                            </template>
+
+                            <template v-if="photosArray.length > 0">
+                                <div class="text-caption text-medium-emphasis mb-1" :class="{ 'mt-3': videosArray.length > 0 }">Photos ({{ photosArray.length }})</div>
+                                <v-list density="compact" class="pa-0 rounded-lg border mb-3">
+                                    <template v-for="(item, i) in photosArray" :key="item._id">
+                                        <v-divider v-if="i > 0" />
+                                        <v-list-item
+                                            class="cursor-pointer"
+                                            @click="openMediaViewer(item._id, 'media')"
+                                        >
+                                            <template #prepend>
+                                                <v-avatar size="36" rounded="sm" class="mr-3">
+                                                    <v-img :src="getFileUrl(item._id)" cover>
+                                                        <template #error>
+                                                            <v-icon color="green" size="20">mdi-image</v-icon>
+                                                        </template>
+                                                    </v-img>
+                                                </v-avatar>
+                                            </template>
+                                            <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
+                                            <v-list-item-subtitle class="text-caption">{{ item.file.type }}</v-list-item-subtitle>
+                                            <template #append>
+                                                <v-icon size="16" color="grey-lighten-1">mdi-eye-outline</v-icon>
+                                            </template>
+                                        </v-list-item>
+                                    </template>
+                                </v-list>
+                            </template>
+
+                            <template v-if="filesArray.length > 0">
+                                <div class="text-caption text-medium-emphasis mb-1" :class="{ 'mt-3': videosArray.length > 0 || photosArray.length > 0 }">Files ({{ filesArray.length }})</div>
+                                <v-list density="compact" class="pa-0 rounded-lg border">
+                                    <template v-for="(item, i) in filesArray" :key="item._id">
+                                        <v-divider v-if="i > 0" />
+                                        <v-list-item
+                                            class="cursor-pointer"
+                                            @click="openFileViewer(item._id, item.file.name)"
+                                        >
+                                            <template #prepend>
+                                                <v-icon :color="getFileIconColor(item.file.type)" class="mr-3">{{ getFileIcon(item.file.type) }}</v-icon>
+                                            </template>
+                                            <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
+                                            <v-list-item-subtitle class="text-caption">{{ item.file.type }}</v-list-item-subtitle>
+                                            <template #append>
+                                                <v-icon size="16" color="grey-lighten-1">mdi-open-in-new</v-icon>
+                                            </template>
+                                        </v-list-item>
+                                    </template>
+                                </v-list>
+                            </template>
+
+                        </v-col>
                     </v-row>
                 </v-col>
+
+                <!-- Media Carousel (images + videos) -->
+                <ImageCarousel v-model="showCarousel" :active-file-id="activeFileId" :files="carouselFiles" />
+
+                <!-- File Viewer Dialog (PDF, docs, etc.) -->
+                <v-dialog v-model="showFileDialog" max-width="900" scrollable>
+                    <v-card>
+                        <v-toolbar density="compact">
+                            <v-toolbar-title class="text-subtitle-2 text-truncate">{{ activeFileName }}</v-toolbar-title>
+                            <v-spacer />
+                            <v-btn icon="mdi-open-in-new" variant="text" size="small"
+                                @click="openInNewTab(activeFileId)" />
+                            <v-btn icon="mdi-close" variant="text" size="small"
+                                @click="showFileDialog = false" />
+                        </v-toolbar>
+                        <v-card-text class="pa-0" style="height: 75vh;">
+                            <iframe
+                                :src="getFileUrl(activeFileId)"
+                                width="100%"
+                                height="100%"
+                                style="border: none;"
+                                :title="activeFileName"
+                            />
+                        </v-card-text>
+                        <v-card-actions>
+                            <v-spacer />
+                            <v-btn variant="text" class="text-none" @click="openInNewTab(activeFileId)">
+                                <v-icon start>mdi-download</v-icon>
+                                Open / Download
+                            </v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
             </v-row>
         </v-card-text>
 
@@ -147,6 +242,53 @@ const photosArray = getByType('image/')
 const videosArray = getByType('video/')
 const filesArray = getByType('other')
 
+/* Viewer state */
+const showCarousel = ref(false)
+const showFileDialog = ref(false)
+const activeFileId = ref('')
+const activeFileName = ref('')
+const carouselFiles = ref<string[]>([])
+
+function openMediaViewer(id: string, _type: 'media') {
+    activeFileId.value = id
+    carouselFiles.value = [
+        ...photosArray.value.map(x => x._id),
+        ...videosArray.value.map(x => x._id),
+    ]
+    showCarousel.value = true
+}
+
+function openFileViewer(id: string, name: string) {
+    activeFileId.value = id
+    activeFileName.value = name
+    showFileDialog.value = true
+}
+
+function openInNewTab(id: string) {
+    window.open(getFileUrl(id), '_blank', 'noopener,noreferrer')
+}
+
+function getFileIcon(mimeType: string): string {
+    if (mimeType.startsWith('image/')) return 'mdi-image'
+    if (mimeType.startsWith('video/')) return 'mdi-video'
+    if (mimeType === 'application/pdf') return 'mdi-file-pdf-box'
+    if (mimeType.includes('word') || mimeType.includes('document')) return 'mdi-file-word-box'
+    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'mdi-file-excel-box'
+    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'mdi-file-powerpoint-box'
+    if (mimeType === 'text/plain') return 'mdi-file-document-outline'
+    if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive')) return 'mdi-folder-zip-outline'
+    return 'mdi-file-outline'
+}
+
+function getFileIconColor(mimeType: string): string {
+    if (mimeType === 'application/pdf') return 'red'
+    if (mimeType.includes('word') || mimeType.includes('document')) return 'blue'
+    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'green'
+    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'orange'
+    if (mimeType.startsWith('video/')) return 'purple'
+    return 'grey'
+}
+
 function getByType(prefix: 'image/' | 'video/' | 'other') {
     return computed(() => {
         return rawFileArray.value.filter(x => {