@7365admin1/layer-common 3.1.3-staging.41 → 3.1.3-staging.42

package/components/AttachmentsViewer.vue

@@ -48,7 +48,7 @@
                                 <v-list-item class="cursor-pointer" @click="openMediaViewer(item._id, item.mimeType)">
                                     <template #prepend>
                                         <v-avatar size="36" rounded="sm" class="mr-3">
-                                            <v-img :src="getFileUrl(item._id)" cover>
+                                            <v-img :src="imageCover(item._id)" cover>
                                                 <template #error>
                                                     <v-icon color="green" size="20">mdi-image</v-icon>
                                                 </template>
@@ -97,7 +97,7 @@
         </v-row>
 
         <!-- Media Carousel (images + videos) -->
-        <ImageCarousel v-model="showCarousel" :active-file-id="activeFileId" :files="carouselFiles" />
+        <ImageCarousel v-model="showCarousel" :active-file-id="activeFileId" :files="carouselFiles" :anpr="anpr" :site="site" />
 
         <!-- Document Viewer -->
         <DocumentViewer v-model="showDocumentViewer" :file-id="activeFileId" :file-name="activeFileName"
@@ -123,10 +123,18 @@ const props = defineProps({
     showFileTypeTitle: {
         type: Boolean,
         default: false,
+    },
+    anpr: {
+        type: Boolean,
+        default: false
+    },
+    site: {
+        type: String,
+        default: ""
     }
 });
 
-const { getFileUrl, urlToFile, getFileById } = useFile();
+const { getFileUrl, urlToFile, getFileById, getFileUrlAnpr } = useFile();
 
 const rawFileArray = ref<{ file: File, _id: string, preview: boolean, mimeType: string }[]>([]);
 const loading = ref(true);
@@ -159,6 +167,12 @@ function openDocumentViewer(id: string, name: string, mimeType: string) {
     showDocumentViewer.value = true;
 }
 
+const imageCover = (id: string) => {
+    if(props.anpr && props.site){
+        return getFileUrlAnpr(`${props.site}/${id}`)
+    } else return getFileUrl(id)
+}
+
 function getFileIcon(mimeType: string): string {
     if (mimeType.startsWith('image/')) return 'mdi-image';
     if (mimeType.startsWith('video/')) return 'mdi-video';
@@ -206,7 +220,11 @@ watchEffect(async () => {
 
             try {
                 // Try to get the actual file with proper MIME type detection from blob
-                const fileUrl = getFileUrl(item.id);
+                // const fileUrl = getFileUrl(item.id);
+                let fileUrl = ""
+                if(props.anpr && props.site){
+                    fileUrl = getFileUrlAnpr(`${props.site}/${item.id}`)
+                } else fileUrl = getFileUrl(item.id);
                 file = await urlToFile(fileUrl, item.name);
                 mimeType = file.type || 'application/octet-stream';
 

package/components/ImageCarousel.vue

@@ -7,7 +7,7 @@
           <template v-if="fileTypes?.[x] === 'image'">
             <v-carousel-item height="100%" width="100%" rounded="lg">
               <v-row no-gutters class="w-100 h-100" align="center">
-                <v-img :lazy-src="getFileUrl(x)" :src="getFileUrl(x)" width="70%" height="70%"
+                <v-img :lazy-src="getFinalUrl(x)" :src="getFinalUrl(x)" width="70%" height="70%"
                   :alt="'Image Viewer Card -' + index"></v-img>
               </v-row>
               <template v-slot:placeholder>
@@ -21,7 +21,7 @@
             <v-carousel-item>
               <v-row no-gutters class="h-100 w-100" align="center" justify="center">
                 <video width="80%" height="80%" controls>
-                  <source :src="getFileUrl(x)" />
+                  <source :src="getFinalUrl(x)" />
                 </video>
               </v-row>
               <template v-slot:placeholder>
@@ -78,11 +78,19 @@ const props = defineProps({
   files: {
     type: Array as PropType<string[]>,
     default: []
+  },
+  site: {
+    type: String,
+    default: ""
+  },
+  anpr: {
+    type: Boolean,
+    default: false
   }
 });
 
 
-const { getFileUrl, urlToFile } = useFile()
+const { getFileUrl, urlToFile, getFileUrlAnpr } = useFile()
 const overlay = defineModel({ required: true, default: false });
 const activeIndex = ref(0);
 const fileTypes = ref<Record<string, "image" | "video" | "other">>({});
@@ -107,10 +115,13 @@ async function resolveFileTypes() {
 
   for (const x of props.files) {
     try {
-      const url = getFileUrl(x);
+      let url = ""
+      if (props.anpr && props.site) {
+        url = getFileUrlAnpr(`${props.site}/${x}`)
+      } else url = getFileUrl(x);
       const file = await urlToFile(url, x);
       const type = file?.type;
-     
+
 
       if (type?.startsWith("video")) fileTypes.value[x] = "video";
       else if (type?.startsWith("image")) fileTypes.value[x] = "image";
@@ -129,6 +140,13 @@ watch(
 );
 
 
+const getFinalUrl = (id: string) => {
+  if (props.anpr && props.site) {
+    return getFileUrlAnpr(`${props.site}/${id}`)
+  } else return getFileUrl(id)
+}
+
+
 </script>
 
 <style scoped>

package/components/VisitorManagement.vue

@@ -675,6 +675,24 @@
                   />
                 </div>
               </span>
+              <span
+                v-else-if="
+                  key === 'snapshotEntryImage' || key === 'snapshotExitImage'
+                "
+                class="d-flex flex-column"
+              >
+                <strong class="w-full">{{ label }}:</strong>
+                <div class="d-flex flex-wrap ga-2">
+                  <AttachmentsViewer
+                    :files="
+                      mappedSnapshots([selectedVisitorObject.snapshotEntryImage])
+                    "
+                    anpr
+                    :site="siteId"
+                    title="Snapshot"
+                  />
+                </div>
+              </span>
 
               <span
                 v-else-if="selectedVisitorObject[key]"
@@ -1438,6 +1456,15 @@ function mappedAttachments(attachments: string[]) {
   });
 }
 
+function mappedSnapshots(attachments: string[]) {
+  return attachments.map((x, index) => {
+    return {
+      id: x,
+      name: `Snapshot - ${x}`,
+    };
+  });
+}
+
 function normalizeDateOnly(value: string) {
   if (!value) return "";
   if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return value;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.1.3-staging.41",
+  "version": "3.1.3-staging.42",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {