refactor: use new documents interfaces

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/views/FilesDetailsView.vue

@@ -3,17 +3,20 @@ import { computed } from 'vue'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
-import { FileActionsMenu } from '@/components'
+import { FileActionsMenu, FilePreviewPopover } from '@/components'
 
 type ItemWithType = {
   item: CollectionObject | EntityObject
   type: 'collection' | 'entity'
 }
 
+type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
+
 const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
+  previewSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -105,6 +108,13 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
               @show-details="emit('show-details', $event)"
             />
           </div>
+
+          <FilePreviewPopover
+            v-if="previewSource"
+            :entity="(wrapped.item as EntityObject)"
+            :source="previewSource"
+            @expand="emit('open', $event)"
+          />
         </div>
       </template>
     </v-virtual-scroll>

src/components/views/FilesGridView.vue

@@ -2,12 +2,15 @@
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
-import { FileActionsMenu } from '@/components'
+import { FileActionsMenu, FilePreviewPopover } from '@/components'
+
+type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
 
 defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
+  previewSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -73,6 +76,13 @@ const emit = defineEmits<{
       <v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
       <div class="files-grid-label">{{ entity.properties.label || String(entity.identifier ?? '') }}</div>
       <div class="files-grid-size">{{ formatSize(entity.properties.size) }}</div>
+
+      <FilePreviewPopover
+        v-if="previewSource"
+        :entity="entity"
+        :source="previewSource"
+        @expand="emit('open', $event)"
+      />
     </div>
   </div>
 </template>

src/components/views/FilesListView.vue

@@ -3,17 +3,20 @@ import { computed } from 'vue'
 import { CollectionObject } from '@DocumentsManager/models/collection'
 import { EntityObject } from '@DocumentsManager/models/entity'
 import { getFileIcon, formatSize } from '@/utils/fileHelpers'
-import { FileActionsMenu } from '@/components'
+import { FileActionsMenu, FilePreviewPopover } from '@/components'
 
 type ItemWithType = {
   item: CollectionObject | EntityObject
   type: 'collection' | 'entity'
 }
 
+type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
+
 const props = defineProps<{
   collections: CollectionObject[]
   entities: EntityObject[]
   selectedIds: Set<string>
+  previewSource?: PreviewSource
 }>()
 
 const emit = defineEmits<{
@@ -90,6 +93,13 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
             @show-details="emit('show-details', $event)"
           />
         </template>
+
+        <FilePreviewPopover
+          v-if="previewSource"
+          :entity="(wrapped.item as EntityObject)"
+          :source="previewSource"
+          @expand="emit('open', $event)"
+        />
       </v-list-item>
     </template>
   </v-virtual-scroll>