refactor: use new documents interfaces
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
@@ -10,11 +10,11 @@ export { default as FileActionsMenu } from './FileActionsMenu.vue'
|
|||||||
// View components
|
// View components
|
||||||
export * from './views'
|
export * from './views'
|
||||||
|
|
||||||
// Dialog components
|
|
||||||
export * from './dialogs'
|
|
||||||
|
|
||||||
// Viewer
|
// Viewer
|
||||||
export * from './viewer'
|
export * from './viewer'
|
||||||
|
|
||||||
|
// Dialog components
|
||||||
|
export * from './dialogs'
|
||||||
|
|
||||||
// Editor
|
// Editor
|
||||||
export * from './editor'
|
export * from './editor'
|
||||||
|
|||||||
@@ -0,0 +1,48 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
/**
|
||||||
|
* Thin Documents-side adapter that drops the media_viewer module's hover
|
||||||
|
* popover onto a file item. Resolves the popover from the integration store
|
||||||
|
* and builds a generic MediaItem from the entity; the popover anchors to its
|
||||||
|
* parent element via `activator="parent"`.
|
||||||
|
*/
|
||||||
|
import { computed, defineAsyncComponent } from 'vue'
|
||||||
|
import { useIntegrationStore } from '@KTXC'
|
||||||
|
import { EntityObject } from '@DocumentsManager/models/entity'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
entity: EntityObject
|
||||||
|
/** Same resolver the fullscreen dialog uses (returns a GET URL string). */
|
||||||
|
source: (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
expand: [entity: EntityObject]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const integrationStore = useIntegrationStore()
|
||||||
|
|
||||||
|
const popoverComponent = computed(() => {
|
||||||
|
// Integration ids are prefixed with the module handle (e.g. 'media_viewer.popover').
|
||||||
|
const entry = integrationStore.getItems('media_viewer').find(i => i.id.endsWith('.popover'))
|
||||||
|
return entry?.component
|
||||||
|
? defineAsyncComponent(entry.component as () => Promise<unknown>)
|
||||||
|
: null
|
||||||
|
})
|
||||||
|
|
||||||
|
const item = computed(() => ({
|
||||||
|
id: String(props.entity.identifier ?? ''),
|
||||||
|
title: props.entity.properties.label ?? String(props.entity.identifier ?? ''),
|
||||||
|
mime: props.entity.properties.mime ?? '',
|
||||||
|
meta: { collection: props.entity.collection ? String(props.entity.collection) : null },
|
||||||
|
}))
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<component
|
||||||
|
:is="popoverComponent"
|
||||||
|
v-if="popoverComponent"
|
||||||
|
:item="item"
|
||||||
|
:source="source"
|
||||||
|
@expand="emit('expand', entity)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
@@ -1,293 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, watch, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
|
|
||||||
import { EntityObject } from '@DocumentsManager/models/entity'
|
|
||||||
import { useFileViewer } from '@/composables'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue: boolean
|
|
||||||
entity: EntityObject | null
|
|
||||||
/** All files in the current folder, used for prev/next navigation */
|
|
||||||
allEntities: EntityObject[]
|
|
||||||
/** Converts an entity into a URL usable as an img/video src */
|
|
||||||
getUrl: (entityId: string, collectionId: string | null) => string
|
|
||||||
/** Called to trigger a browser download of an entity */
|
|
||||||
downloadEntity: (entityId: string, collectionId: string | null) => void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
'update:modelValue': [value: boolean]
|
|
||||||
/** Request the parent to switch to a different entity */
|
|
||||||
'navigate': [entity: EntityObject]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const fileViewer = useFileViewer()
|
|
||||||
|
|
||||||
// ── Derived state ──────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
const url = computed(() => {
|
|
||||||
if (!props.entity) return ''
|
|
||||||
return props.getUrl(
|
|
||||||
String(props.entity.identifier ?? ''),
|
|
||||||
props.entity.collection ? String(props.entity.collection) : null,
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
const mime = computed(() => props.entity?.properties.mime ?? '')
|
|
||||||
|
|
||||||
const viewer = computed(() => {
|
|
||||||
if (!mime.value) return null
|
|
||||||
return fileViewer.findViewer(mime.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
// Wrap the raw () => import() factory in defineAsyncComponent so Vue
|
|
||||||
// actually resolves it instead of rendering the Promise as text.
|
|
||||||
const viewerComponent = computed(() => {
|
|
||||||
if (!viewer.value?.component) return null
|
|
||||||
return defineAsyncComponent(viewer.value.component as () => Promise<unknown>)
|
|
||||||
})
|
|
||||||
|
|
||||||
const filename = computed(
|
|
||||||
() => props.entity?.properties.label ?? String(props.entity?.identifier ?? ''),
|
|
||||||
)
|
|
||||||
|
|
||||||
const currentIndex = computed(() => {
|
|
||||||
if (!props.entity) return -1
|
|
||||||
return props.allEntities.findIndex(e => e.identifier === props.entity!.identifier)
|
|
||||||
})
|
|
||||||
|
|
||||||
const hasPrev = computed(() => currentIndex.value > 0)
|
|
||||||
const hasNext = computed(() => currentIndex.value < props.allEntities.length - 1)
|
|
||||||
|
|
||||||
// Viewer component may take a moment to load; track async state
|
|
||||||
const viewerLoading = ref(false)
|
|
||||||
|
|
||||||
watch(() => props.entity, () => {
|
|
||||||
viewerLoading.value = false
|
|
||||||
})
|
|
||||||
|
|
||||||
// ── Navigation ──────────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
function navigatePrev() {
|
|
||||||
if (!hasPrev.value) return
|
|
||||||
emit('navigate', props.allEntities[currentIndex.value - 1])
|
|
||||||
}
|
|
||||||
|
|
||||||
function navigateNext() {
|
|
||||||
if (!hasNext.value) return
|
|
||||||
emit('navigate', props.allEntities[currentIndex.value + 1])
|
|
||||||
}
|
|
||||||
|
|
||||||
function close() {
|
|
||||||
emit('update:modelValue', false)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDownload() {
|
|
||||||
if (!props.entity) return
|
|
||||||
props.downloadEntity(
|
|
||||||
String(props.entity.identifier ?? ''),
|
|
||||||
props.entity.collection ? String(props.entity.collection) : null,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Keyboard shortcuts ──────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
function handleKeydown(e: KeyboardEvent) {
|
|
||||||
if (!props.modelValue) return
|
|
||||||
if (e.key === 'ArrowLeft') { e.preventDefault(); navigatePrev() }
|
|
||||||
else if (e.key === 'ArrowRight') { e.preventDefault(); navigateNext() }
|
|
||||||
else if (e.key === 'Escape') { e.preventDefault(); close() }
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => window.addEventListener('keydown', handleKeydown))
|
|
||||||
onUnmounted(() => window.removeEventListener('keydown', handleKeydown))
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<v-dialog
|
|
||||||
:model-value="modelValue"
|
|
||||||
fullscreen
|
|
||||||
transition="dialog-bottom-transition"
|
|
||||||
@update:model-value="emit('update:modelValue', $event)"
|
|
||||||
>
|
|
||||||
<div class="viewer-shell">
|
|
||||||
|
|
||||||
<!-- ── Toolbar ─────────────────────────────────────────────────── -->
|
|
||||||
<div class="viewer-toolbar">
|
|
||||||
<v-btn icon="mdi-close" variant="text" @click="close" />
|
|
||||||
|
|
||||||
<span class="viewer-filename text-truncate">{{ filename }}</span>
|
|
||||||
|
|
||||||
<div class="viewer-toolbar-actions">
|
|
||||||
<span v-if="allEntities.length > 1" class="viewer-counter text-caption text-medium-emphasis mr-2">
|
|
||||||
{{ currentIndex + 1 }} / {{ allEntities.length }}
|
|
||||||
</span>
|
|
||||||
<v-btn
|
|
||||||
icon="mdi-download"
|
|
||||||
variant="text"
|
|
||||||
size="small"
|
|
||||||
title="Download"
|
|
||||||
@click="handleDownload"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ── Content area ───────────────────────────────────────────── -->
|
|
||||||
<div class="viewer-content">
|
|
||||||
|
|
||||||
<!-- Prev arrow -->
|
|
||||||
<div class="viewer-nav viewer-nav--prev">
|
|
||||||
<v-btn
|
|
||||||
v-if="hasPrev"
|
|
||||||
icon="mdi-chevron-left"
|
|
||||||
variant="elevated"
|
|
||||||
size="large"
|
|
||||||
@click="navigatePrev"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Viewer / fallback -->
|
|
||||||
<div class="viewer-stage">
|
|
||||||
<template v-if="entity">
|
|
||||||
<!-- Registered viewer component -->
|
|
||||||
<Suspense v-if="viewer">
|
|
||||||
<template #default>
|
|
||||||
<component
|
|
||||||
:is="viewerComponent"
|
|
||||||
:url="url"
|
|
||||||
:entity="entity"
|
|
||||||
:mime="mime"
|
|
||||||
class="viewer-component"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #fallback>
|
|
||||||
<div class="viewer-loading">
|
|
||||||
<v-progress-circular indeterminate color="primary" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Suspense>
|
|
||||||
|
|
||||||
<!-- No viewer registered for this type -->
|
|
||||||
<div v-else class="viewer-no-preview">
|
|
||||||
<v-icon size="64" color="grey-lighten-1">mdi-file-question-outline</v-icon>
|
|
||||||
<p class="text-h6 mt-4">No preview available</p>
|
|
||||||
<p class="text-body-2 text-medium-emphasis mb-6">
|
|
||||||
{{ mime || 'Unknown file type' }}
|
|
||||||
</p>
|
|
||||||
<v-btn
|
|
||||||
prepend-icon="mdi-download"
|
|
||||||
variant="tonal"
|
|
||||||
@click="handleDownload"
|
|
||||||
>
|
|
||||||
Download file
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Next arrow -->
|
|
||||||
<div class="viewer-nav viewer-nav--next">
|
|
||||||
<v-btn
|
|
||||||
v-if="hasNext"
|
|
||||||
icon="mdi-chevron-right"
|
|
||||||
variant="elevated"
|
|
||||||
size="large"
|
|
||||||
@click="navigateNext"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.viewer-shell {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
background: rgb(var(--v-theme-surface));
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Toolbar */
|
|
||||||
.viewer-toolbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
|
||||||
min-height: 56px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewer-filename {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 0.9375rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewer-toolbar-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Content */
|
|
||||||
.viewer-content {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Prev/Next nav columns */
|
|
||||||
.viewer-nav {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 64px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Main stage */
|
|
||||||
.viewer-stage {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: auto;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewer-component {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Loading */
|
|
||||||
.viewer-loading {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* No-preview fallback */
|
|
||||||
.viewer-no-preview {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.viewer-nav {
|
|
||||||
width: 40px;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1 +1 @@
|
|||||||
export { default as FileViewerDialog } from './FileViewerDialog.vue'
|
export { default as FilePreviewPopover } from './FilePreviewPopover.vue'
|
||||||
|
|||||||
@@ -3,17 +3,20 @@ import { computed } from 'vue'
|
|||||||
import { CollectionObject } from '@DocumentsManager/models/collection'
|
import { CollectionObject } from '@DocumentsManager/models/collection'
|
||||||
import { EntityObject } from '@DocumentsManager/models/entity'
|
import { EntityObject } from '@DocumentsManager/models/entity'
|
||||||
import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
|
import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
|
||||||
import { FileActionsMenu } from '@/components'
|
import { FileActionsMenu, FilePreviewPopover } from '@/components'
|
||||||
|
|
||||||
type ItemWithType = {
|
type ItemWithType = {
|
||||||
item: CollectionObject | EntityObject
|
item: CollectionObject | EntityObject
|
||||||
type: 'collection' | 'entity'
|
type: 'collection' | 'entity'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
collections: CollectionObject[]
|
collections: CollectionObject[]
|
||||||
entities: EntityObject[]
|
entities: EntityObject[]
|
||||||
selectedIds: Set<string>
|
selectedIds: Set<string>
|
||||||
|
previewSource?: PreviewSource
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
@@ -105,6 +108,13 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
|
|||||||
@show-details="emit('show-details', $event)"
|
@show-details="emit('show-details', $event)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<FilePreviewPopover
|
||||||
|
v-if="previewSource"
|
||||||
|
:entity="(wrapped.item as EntityObject)"
|
||||||
|
:source="previewSource"
|
||||||
|
@expand="emit('open', $event)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</v-virtual-scroll>
|
</v-virtual-scroll>
|
||||||
|
|||||||
@@ -2,12 +2,15 @@
|
|||||||
import { CollectionObject } from '@DocumentsManager/models/collection'
|
import { CollectionObject } from '@DocumentsManager/models/collection'
|
||||||
import { EntityObject } from '@DocumentsManager/models/entity'
|
import { EntityObject } from '@DocumentsManager/models/entity'
|
||||||
import { getFileIcon, formatSize } from '@/utils/fileHelpers'
|
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<{
|
defineProps<{
|
||||||
collections: CollectionObject[]
|
collections: CollectionObject[]
|
||||||
entities: EntityObject[]
|
entities: EntityObject[]
|
||||||
selectedIds: Set<string>
|
selectedIds: Set<string>
|
||||||
|
previewSource?: PreviewSource
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
@@ -73,6 +76,13 @@ const emit = defineEmits<{
|
|||||||
<v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
|
<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-label">{{ entity.properties.label || String(entity.identifier ?? '') }}</div>
|
||||||
<div class="files-grid-size">{{ formatSize(entity.properties.size) }}</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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -3,17 +3,20 @@ import { computed } from 'vue'
|
|||||||
import { CollectionObject } from '@DocumentsManager/models/collection'
|
import { CollectionObject } from '@DocumentsManager/models/collection'
|
||||||
import { EntityObject } from '@DocumentsManager/models/entity'
|
import { EntityObject } from '@DocumentsManager/models/entity'
|
||||||
import { getFileIcon, formatSize } from '@/utils/fileHelpers'
|
import { getFileIcon, formatSize } from '@/utils/fileHelpers'
|
||||||
import { FileActionsMenu } from '@/components'
|
import { FileActionsMenu, FilePreviewPopover } from '@/components'
|
||||||
|
|
||||||
type ItemWithType = {
|
type ItemWithType = {
|
||||||
item: CollectionObject | EntityObject
|
item: CollectionObject | EntityObject
|
||||||
type: 'collection' | 'entity'
|
type: 'collection' | 'entity'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type PreviewSource = (item: { id: string; meta?: Record<string, unknown> }) => string | Blob | Promise<string | Blob>
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
collections: CollectionObject[]
|
collections: CollectionObject[]
|
||||||
entities: EntityObject[]
|
entities: EntityObject[]
|
||||||
selectedIds: Set<string>
|
selectedIds: Set<string>
|
||||||
|
previewSource?: PreviewSource
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
@@ -90,6 +93,13 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObjec
|
|||||||
@show-details="emit('show-details', $event)"
|
@show-details="emit('show-details', $event)"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<FilePreviewPopover
|
||||||
|
v-if="previewSource"
|
||||||
|
:entity="(wrapped.item as EntityObject)"
|
||||||
|
:source="previewSource"
|
||||||
|
@expand="emit('open', $event)"
|
||||||
|
/>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
</template>
|
</template>
|
||||||
</v-virtual-scroll>
|
</v-virtual-scroll>
|
||||||
|
|||||||
@@ -5,11 +5,9 @@
|
|||||||
export { useFileManager } from './useFileManager'
|
export { useFileManager } from './useFileManager'
|
||||||
export { useFileSelection } from './useFileSelection'
|
export { useFileSelection } from './useFileSelection'
|
||||||
export { useFileUpload } from './useFileUpload'
|
export { useFileUpload } from './useFileUpload'
|
||||||
export { useFileViewer } from './useFileViewer'
|
|
||||||
export { useFileEditor } from './useFileEditor'
|
export { useFileEditor } from './useFileEditor'
|
||||||
|
|
||||||
export type { UseFileManagerOptions } from './useFileManager'
|
export type { UseFileManagerOptions } from './useFileManager'
|
||||||
export type { UseFileSelectionOptions } from './useFileSelection'
|
export type { UseFileSelectionOptions } from './useFileSelection'
|
||||||
export type { UseFileUploadOptions, FileUploadProgress } from './useFileUpload'
|
export type { UseFileUploadOptions, FileUploadProgress } from './useFileUpload'
|
||||||
export type { UseFileViewerReturn } from './useFileViewer'
|
|
||||||
export type { UseFileEditorReturn } from './useFileEditor'
|
export type { UseFileEditorReturn } from './useFileEditor'
|
||||||
|
|||||||
@@ -241,8 +241,8 @@ export function useFileManager(options: UseFileManagerOptions) {
|
|||||||
|
|
||||||
// Initialize - fetch providers, services, and initial nodes if autoFetch
|
// Initialize - fetch providers, services, and initial nodes if autoFetch
|
||||||
const initialize = async () => {
|
const initialize = async () => {
|
||||||
await providersStore.list()
|
await providersStore.list([currentProviderId()])
|
||||||
await servicesStore.list({ [currentProviderId()]: true })
|
await servicesStore.list()
|
||||||
if (autoFetch) {
|
if (autoFetch) {
|
||||||
await refresh()
|
await refresh()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,81 +0,0 @@
|
|||||||
/**
|
|
||||||
* useFileViewer — resolves which registered viewer can handle a given MIME type.
|
|
||||||
*
|
|
||||||
* Other modules register viewers at the `documents_file_viewer` integration
|
|
||||||
* point by including an entry in their `integrations.ts`:
|
|
||||||
*
|
|
||||||
* ```ts
|
|
||||||
* documents_file_viewer: [{
|
|
||||||
* id: 'my_viewer',
|
|
||||||
* meta: { mimeTypes: ['application/pdf'] },
|
|
||||||
* component: () => import('./components/MyViewer.vue'),
|
|
||||||
* }]
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* Viewer components receive the props: `url: string`, `entity: EntityObject`, `mime: string`.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useIntegrationStore } from '@KTXC'
|
|
||||||
import type { EntityObject } from '@DocumentsManager/models/entity'
|
|
||||||
|
|
||||||
const INTEGRATION_POINT = 'documents_file_viewer'
|
|
||||||
|
|
||||||
function mimeMatchesPattern(mime: string, pattern: string): boolean {
|
|
||||||
if (pattern.endsWith('/*')) {
|
|
||||||
// e.g. 'image/*' matches 'image/png', 'image/jpeg', …
|
|
||||||
return mime.startsWith(pattern.slice(0, -1))
|
|
||||||
}
|
|
||||||
return mime === pattern
|
|
||||||
}
|
|
||||||
|
|
||||||
function viewerMatchesMime(
|
|
||||||
mime: string,
|
|
||||||
mimeTypes?: string[],
|
|
||||||
mimePatterns?: string[],
|
|
||||||
): boolean {
|
|
||||||
if (mimeTypes?.includes(mime)) return true
|
|
||||||
if (mimePatterns) {
|
|
||||||
for (const pattern of mimePatterns) {
|
|
||||||
if (mimeMatchesPattern(mime, pattern)) return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useFileViewer() {
|
|
||||||
const integrationStore = useIntegrationStore()
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the highest-priority registered viewer that can handle `mime`,
|
|
||||||
* or `null` if none is found.
|
|
||||||
*/
|
|
||||||
function findViewer(mime: string) {
|
|
||||||
// getItems() already returns items sorted by priority (ascending)
|
|
||||||
const viewers = integrationStore.getItems(INTEGRATION_POINT)
|
|
||||||
for (const viewer of viewers) {
|
|
||||||
if (
|
|
||||||
viewerMatchesMime(
|
|
||||||
mime,
|
|
||||||
viewer.meta?.mimeTypes as string[] | undefined,
|
|
||||||
viewer.meta?.mimePatterns as string[] | undefined,
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
return viewer
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Convenience: returns true if any registered viewer can open this entity.
|
|
||||||
*/
|
|
||||||
function canOpen(entity: EntityObject): boolean {
|
|
||||||
const mime = entity.properties.mime
|
|
||||||
if (!mime) return false
|
|
||||||
return findViewer(mime) !== null
|
|
||||||
}
|
|
||||||
|
|
||||||
return { findViewer, canOpen }
|
|
||||||
}
|
|
||||||
|
|
||||||
export type UseFileViewerReturn = ReturnType<typeof useFileViewer>
|
|
||||||
+57
-17
@@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted, watch, nextTick } from 'vue'
|
import { ref, computed, onMounted, watch, nextTick, defineAsyncComponent } from 'vue'
|
||||||
import { useDisplay } from 'vuetify'
|
import { useDisplay } from 'vuetify'
|
||||||
import { useModuleStore } from '@KTXC'
|
import { useModuleStore, useIntegrationStore } from '@KTXC'
|
||||||
import { useFileManager, useFileSelection, useFileUpload, useFileEditor } from '@/composables'
|
import { useFileManager, useFileSelection, useFileUpload, useFileEditor } from '@/composables'
|
||||||
import type { ViewMode, SortField, SortOrder, BreadcrumbItem } from '@/types'
|
import type { ViewMode, SortField, SortOrder, BreadcrumbItem } from '@/types'
|
||||||
import { CollectionObject } from '@DocumentsManager/models/collection'
|
import { CollectionObject } from '@DocumentsManager/models/collection'
|
||||||
@@ -20,7 +20,6 @@ import {
|
|||||||
FilesGridView,
|
FilesGridView,
|
||||||
FilesListView,
|
FilesListView,
|
||||||
FilesDetailsView,
|
FilesDetailsView,
|
||||||
FileViewerDialog,
|
|
||||||
FileEditorDialog,
|
FileEditorDialog,
|
||||||
NewFolderDialog,
|
NewFolderDialog,
|
||||||
RenameDialog,
|
RenameDialog,
|
||||||
@@ -33,6 +32,7 @@ const display = useDisplay()
|
|||||||
const isMobile = computed(() => display.mdAndDown.value)
|
const isMobile = computed(() => display.mdAndDown.value)
|
||||||
|
|
||||||
const moduleStore = useModuleStore()
|
const moduleStore = useModuleStore()
|
||||||
|
const integrationStore = useIntegrationStore()
|
||||||
const isFileManagerAvailable = computed(() => {
|
const isFileManagerAvailable = computed(() => {
|
||||||
return moduleStore.has('documents_manager') || moduleStore.has('DocumentsManager')
|
return moduleStore.has('documents_manager') || moduleStore.has('DocumentsManager')
|
||||||
})
|
})
|
||||||
@@ -98,9 +98,45 @@ const uploadPreparationMessage = ref('Preparing uploads...')
|
|||||||
const uploadPreparationProcessedCount = ref(0)
|
const uploadPreparationProcessedCount = ref(0)
|
||||||
const uploadPreparationTotalCount = ref(0)
|
const uploadPreparationTotalCount = ref(0)
|
||||||
|
|
||||||
// Viewer state
|
// Viewer state — the media viewer dialog is provided by the media_viewer module
|
||||||
const viewerEntity = ref<EntityObject | null>(null)
|
// and resolved from the integration store so Documents does not import it.
|
||||||
|
interface ViewerItem {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
mime: string
|
||||||
|
size?: number | null
|
||||||
|
meta?: Record<string, unknown>
|
||||||
|
}
|
||||||
|
|
||||||
const showViewer = ref(false)
|
const showViewer = ref(false)
|
||||||
|
const viewerIndex = ref(0)
|
||||||
|
|
||||||
|
const mediaViewerDialog = computed(() => {
|
||||||
|
// Integration ids are prefixed with the module handle (e.g. 'media_viewer.dialog').
|
||||||
|
const entry = integrationStore.getItems('media_viewer').find(i => i.id.endsWith('.dialog'))
|
||||||
|
return entry?.component ? defineAsyncComponent(entry.component as () => Promise<unknown>) : null
|
||||||
|
})
|
||||||
|
|
||||||
|
const viewerItems = computed<ViewerItem[]>(() =>
|
||||||
|
sortedItems.value.entities.map(entityToViewerItem),
|
||||||
|
)
|
||||||
|
|
||||||
|
function entityToViewerItem(entity: EntityObject): ViewerItem {
|
||||||
|
return {
|
||||||
|
id: String(entity.identifier ?? ''),
|
||||||
|
title: entity.properties.label ?? String(entity.identifier ?? ''),
|
||||||
|
mime: entity.properties.mime ?? '',
|
||||||
|
meta: { collection: entity.collection ? String(entity.collection) : null },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resolveViewerSource(item: ViewerItem): string {
|
||||||
|
return fileManager.getEntityUrl(item.id, (item.meta?.collection as string | null) ?? null)
|
||||||
|
}
|
||||||
|
|
||||||
|
function downloadViewerItem(item: ViewerItem): void {
|
||||||
|
fileManager.downloadEntity(item.id, (item.meta?.collection as string | null) ?? null)
|
||||||
|
}
|
||||||
|
|
||||||
// Editor state
|
// Editor state
|
||||||
const fileEditorComposable = useFileEditor()
|
const fileEditorComposable = useFileEditor()
|
||||||
@@ -163,7 +199,9 @@ async function queueFolderUploads(
|
|||||||
|
|
||||||
function handleOpenItem(item: CollectionObject | EntityObject) {
|
function handleOpenItem(item: CollectionObject | EntityObject) {
|
||||||
if (item instanceof EntityObject) {
|
if (item instanceof EntityObject) {
|
||||||
viewerEntity.value = item
|
const id = String(item.identifier ?? '')
|
||||||
|
const idx = viewerItems.value.findIndex(m => m.id === id)
|
||||||
|
viewerIndex.value = idx >= 0 ? idx : 0
|
||||||
showViewer.value = true
|
showViewer.value = true
|
||||||
} else {
|
} else {
|
||||||
// Folders: navigate into them when opened via double-click / action
|
// Folders: navigate into them when opened via double-click / action
|
||||||
@@ -172,10 +210,6 @@ function handleOpenItem(item: CollectionObject | EntityObject) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleViewerNavigate(entity: EntityObject) {
|
|
||||||
viewerEntity.value = entity
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleEditItem(item: CollectionObject | EntityObject) {
|
function handleEditItem(item: CollectionObject | EntityObject) {
|
||||||
if (item instanceof EntityObject && fileEditorComposable.canEdit(item)) {
|
if (item instanceof EntityObject && fileEditorComposable.canEdit(item)) {
|
||||||
editorEntity.value = item
|
editorEntity.value = item
|
||||||
@@ -747,6 +781,7 @@ onMounted(async () => {
|
|||||||
:collections="sortedItems.collections"
|
:collections="sortedItems.collections"
|
||||||
:entities="sortedItems.entities"
|
:entities="sortedItems.entities"
|
||||||
:selected-ids="selectedIds"
|
:selected-ids="selectedIds"
|
||||||
|
:preview-source="resolveViewerSource"
|
||||||
@item-click="handleItemClick"
|
@item-click="handleItemClick"
|
||||||
@open="handleOpenItem"
|
@open="handleOpenItem"
|
||||||
@edit="handleEditItem"
|
@edit="handleEditItem"
|
||||||
@@ -762,6 +797,7 @@ onMounted(async () => {
|
|||||||
:collections="sortedItems.collections"
|
:collections="sortedItems.collections"
|
||||||
:entities="sortedItems.entities"
|
:entities="sortedItems.entities"
|
||||||
:selected-ids="selectedIds"
|
:selected-ids="selectedIds"
|
||||||
|
:preview-source="resolveViewerSource"
|
||||||
@item-click="handleItemClick"
|
@item-click="handleItemClick"
|
||||||
@open="handleOpenItem"
|
@open="handleOpenItem"
|
||||||
@edit="handleEditItem"
|
@edit="handleEditItem"
|
||||||
@@ -777,6 +813,7 @@ onMounted(async () => {
|
|||||||
:collections="sortedItems.collections"
|
:collections="sortedItems.collections"
|
||||||
:entities="sortedItems.entities"
|
:entities="sortedItems.entities"
|
||||||
:selected-ids="selectedIds"
|
:selected-ids="selectedIds"
|
||||||
|
:preview-source="resolveViewerSource"
|
||||||
@item-click="handleItemClick"
|
@item-click="handleItemClick"
|
||||||
@open="handleOpenItem"
|
@open="handleOpenItem"
|
||||||
@edit="handleEditItem"
|
@edit="handleEditItem"
|
||||||
@@ -856,14 +893,17 @@ onMounted(async () => {
|
|||||||
@close="handleUploadDialogClose"
|
@close="handleUploadDialogClose"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- File Viewer -->
|
<!-- File Viewer (provided by the media_viewer module) -->
|
||||||
<FileViewerDialog
|
<component
|
||||||
|
:is="mediaViewerDialog"
|
||||||
|
v-if="mediaViewerDialog"
|
||||||
v-model="showViewer"
|
v-model="showViewer"
|
||||||
:entity="viewerEntity"
|
:items="viewerItems"
|
||||||
:all-entities="sortedItems.entities"
|
:index="viewerIndex"
|
||||||
:get-url="fileManager.getEntityUrl"
|
:source="resolveViewerSource"
|
||||||
:download-entity="fileManager.downloadEntity"
|
:download="downloadViewerItem"
|
||||||
@navigate="handleViewerNavigate"
|
:navigation="true"
|
||||||
|
@update:index="viewerIndex = $event"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- File Editor -->
|
<!-- File Editor -->
|
||||||
|
|||||||
@@ -118,8 +118,8 @@ export const useDocumentsStore = defineStore('documentsStore', () => {
|
|||||||
const isAtRoot = computed(() => currentLocation.value === ROOT_ID)
|
const isAtRoot = computed(() => currentLocation.value === ROOT_ID)
|
||||||
|
|
||||||
async function initialize() {
|
async function initialize() {
|
||||||
await providersStore.list()
|
await providersStore.list([activeProviderId.value])
|
||||||
await servicesStore.list({ [activeProviderId.value]: true })
|
await servicesStore.list()
|
||||||
await refresh()
|
await refresh()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -28,23 +28,3 @@ export interface ContextMenuAction {
|
|||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
divider?: boolean
|
divider?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Shape of an item registered at the `documents_file_viewer` integration point.
|
|
||||||
* Stored under `meta` so it fits inside a standard `ModuleIntegrationItem`.
|
|
||||||
*/
|
|
||||||
export interface DocumentViewerMeta {
|
|
||||||
/** Exact MIME type matches, e.g. ['application/pdf'] */
|
|
||||||
mimeTypes?: string[]
|
|
||||||
/** Glob-style patterns, e.g. ['image/*', 'video/*'] */
|
|
||||||
mimePatterns?: string[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DocumentViewerItem {
|
|
||||||
id: string
|
|
||||||
label?: string
|
|
||||||
priority?: number
|
|
||||||
meta: DocumentViewerMeta
|
|
||||||
/** Async factory returning the Vue viewer component */
|
|
||||||
component: () => Promise<unknown>
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -3,7 +3,6 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"],
|
"@/*": ["./src/*"],
|
||||||
"@KTXC/*": ["../../core/src/*"],
|
"@KTXC/*": ["../../core/src/*"],
|
||||||
|
|||||||
Reference in New Issue
Block a user