Nodarx/documents
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Projects Releases Activity

refactor: standardize design

Browse Source 
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
Sebastian Krupinski
2026-03-03 21:55:48 -05:00
parent 31a33d8758
commit a59dbff9f1
25 changed files with 994 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/FileActionsMenu.vue
View File

@@ -1,29 +1,32 @@
<script setup lang="ts">
import { ref } from 'vue'
import { FileCollectionObject } from '@FilesManager/models/collection'
import { FileEntityObject } from '@FilesManager/models/entity'
import { CollectionObject } from '@DocumentsManager/models/collection'
import { EntityObject } from '@DocumentsManager/models/entity'
defineProps<{
item: FileCollectionObject | FileEntityObject
item: CollectionObject | EntityObject
size?: 'x-small' | 'small' | 'default'
variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
buttonClass?: string
}>()
const emit = defineEmits<{
'rename': [item: FileCollectionObject | FileEntityObject]
'delete': [item: FileCollectionObject | FileEntityObject]
'download': [item: FileCollectionObject | FileEntityObject]
'show-details': [item: FileCollectionObject | FileEntityObject]
'open': [item: CollectionObject | EntityObject]
'rename': [item: CollectionObject | EntityObject]
'delete': [item: CollectionObject | EntityObject]
'download': [item: CollectionObject | EntityObject]
'show-details': [item: CollectionObject | EntityObject]
}>()
const menuOpen = ref(false)
function handleAction(action: string, item: FileCollectionObject | FileEntityObject, event: Event) {
function handleAction(action: string, item: CollectionObject | EntityObject, event: Event) {
event.stopPropagation()
menuOpen.value = false
if (action === 'rename') {
if (action === 'open') {
emit('open', item)
} else if (action === 'rename') {
emit('rename', item)
} else if (action === 'delete') {
emit('delete', item)
@@ -34,8 +37,8 @@ function handleAction(action: string, item: FileCollectionObject | FileEntityObj
}
}
function isEntity(item: FileCollectionObject | FileEntityObject): item is FileEntityObject {
return item['@type'] === 'files.entity'
function isEntity(item: CollectionObject | EntityObject): item is EntityObject {
return item instanceof EntityObject
}
</script>
@@ -52,6 +55,10 @@ function isEntity(item: FileCollectionObject | FileEntityObject): item is FileEn
/>
</template>
<v-list density="compact">
<v-list-item v-if="isEntity(item)" @click="(e: Event) => handleAction('open', item, e)">
<template #prepend><v-icon size="small">mdi-open-in-app</v-icon></template>
<v-list-item-title>Open</v-list-item-title>
</v-list-item>
<v-list-item @click="(e: Event) => handleAction('details', item, e)">
<template #prepend><v-icon size="small">mdi-information-outline</v-icon></template>
<v-list-item-title>Details</v-list-item-title>

40
src/components/FilesInfoPanel.vue
View File

@@ -1,11 +1,11 @@
<script setup lang="ts">
import { computed } from 'vue'
import { FileCollectionObject } from '@FilesManager/models/collection'
import { FileEntityObject } from '@FilesManager/models/entity'
import { CollectionObject } from '@DocumentsManager/models/collection'
import { EntityObject } from '@DocumentsManager/models/entity'
import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
const props = defineProps<{
selectedItems: (FileCollectionObject | FileEntityObject)[]
selectedItems: (CollectionObject | EntityObject)[]
}>()
const emit = defineEmits<{
@@ -17,15 +17,15 @@ const singleSelection = computed(() => props.selectedItems.length === 1)
const selectedItem = computed(() => props.selectedItems[0] ?? null)
const isCollection = computed(() =>
selectedItem.value?.['@type'] === 'files.collection'
selectedItem.value instanceof CollectionObject
)
const isEntity = computed(() =>
selectedItem.value?.['@type'] === 'files.entity'
selectedItem.value instanceof EntityObject
)
const entity = computed(() =>
isEntity.value ? selectedItem.value as FileEntityObject : null
isEntity.value ? selectedItem.value as EntityObject : null
)
// Computed display values
@@ -43,8 +43,8 @@ const itemIconColor = computed(() => {
const totalSize = computed(() => {
if (props.selectedItems.length === 0) return 0
return props.selectedItems.reduce((sum, item) => {
if (item['@type'] === 'files.entity') {
return sum + ((item as FileEntityObject).size || 0)
if (item instanceof EntityObject) {
return sum + (item.properties.size || 0)
}
return sum
}, 0)
@@ -54,7 +54,7 @@ const totalSize = computed(() => {
<template>
<v-navigation-drawer
:model-value="hasSelection"
:key="selectedItems.map(i => i.id).join(',')"
:key="selectedItems.map(i => String(i.identifier)).join(',')"
location="right"
width="320"
temporary
@@ -78,9 +78,9 @@ const totalSize = computed(() => {
<!-- Icon and name -->
<div class="text-center mb-4">
<v-icon :color="itemIconColor" size="64">{{ itemIcon }}</v-icon>
<div class="text-h6 mt-2 text-truncate">{{ selectedItem.label }}</div>
<div class="text-h6 mt-2 text-truncate">{{ selectedItem.properties.label || String(selectedItem.identifier ?? '') }}</div>
<div class="text-caption text-grey">
{{ isCollection ? 'Folder' : entity?.mime || 'File' }}
{{ isCollection ? 'Folder' : entity?.properties.mime || 'File' }}
</div>
</div>
@@ -95,7 +95,7 @@ const totalSize = computed(() => {
</template>
<v-list-item-title class="text-caption text-grey">Type</v-list-item-title>
<v-list-item-subtitle>
{{ isCollection ? 'Folder' : (entity?.mime || 'Unknown') }}
{{ isCollection ? 'Folder' : (entity?.properties.mime || 'Unknown') }}
</v-list-item-subtitle>
</v-list-item>
@@ -105,25 +105,25 @@ const totalSize = computed(() => {
<v-icon size="small" class="mr-3">mdi-harddisk</v-icon>
</template>
<v-list-item-title class="text-caption text-grey">Size</v-list-item-title>
<v-list-item-subtitle>{{ formatSize(entity.size) }}</v-list-item-subtitle>
<v-list-item-subtitle>{{ formatSize(entity.properties.size) }}</v-list-item-subtitle>
</v-list-item>
<!-- Created -->
<v-list-item v-if="selectedItem.createdOn">
<v-list-item v-if="selectedItem.created">
<template #prepend>
<v-icon size="small" class="mr-3">mdi-calendar-plus</v-icon>
</template>
<v-list-item-title class="text-caption text-grey">Created</v-list-item-title>
<v-list-item-subtitle>{{ formatDate(selectedItem.createdOn) }}</v-list-item-subtitle>
<v-list-item-subtitle>{{ formatDate(selectedItem.created) }}</v-list-item-subtitle>
</v-list-item>
<!-- Modified -->
<v-list-item v-if="selectedItem.modifiedOn">
<v-list-item v-if="selectedItem.modified">
<template #prepend>
<v-icon size="small" class="mr-3">mdi-calendar-edit</v-icon>
</template>
<v-list-item-title class="text-caption text-grey">Modified</v-list-item-title>
<v-list-item-subtitle>{{ formatDate(selectedItem.modifiedOn) }}</v-list-item-subtitle>
<v-list-item-subtitle>{{ formatDate(selectedItem.modified) }}</v-list-item-subtitle>
</v-list-item>
<!-- ID -->
@@ -133,7 +133,7 @@ const totalSize = computed(() => {
</template>
<v-list-item-title class="text-caption text-grey">ID</v-list-item-title>
<v-list-item-subtitle class="text-truncate" style="font-family: monospace; font-size: 11px;">
{{ selectedItem.id }}
{{ selectedItem.identifier }}
</v-list-item-subtitle>
</v-list-item>
</v-list>
@@ -165,8 +165,8 @@ const totalSize = computed(() => {
</template>
<v-list-item-title class="text-caption text-grey">Contents</v-list-item-title>
<v-list-item-subtitle>
{{ selectedItems.filter(i => i['@type'] === 'files.collection').length }} folders,
{{ selectedItems.filter(i => i['@type'] === 'files.entity').length }} files
{{ selectedItems.filter(i => i instanceof CollectionObject).length }} folders,
{{ selectedItems.filter(i => i instanceof EntityObject).length }} files
</v-list-item-subtitle>
</v-list-item>
</v-list>

3
src/components/index.ts
View File

@@ -12,3 +12,6 @@ export * from './views'
// Dialog components
export * from './dialogs'
// Viewer
export * from './viewer'

293
src/components/viewer/FileViewerDialog.vue Normal file
View File

@@ -0,0 +1,293 @@
<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
src/components/viewer/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as FileViewerDialog } from './FileViewerDialog.vue'

42
src/components/views/FilesDetailsView.vue
View File

@@ -1,27 +1,28 @@
<script setup lang="ts">
import { computed } from 'vue'
import { FileCollectionObject } from '@FilesManager/models/collection'
import { FileEntityObject } from '@FilesManager/models/entity'
import { CollectionObject } from '@DocumentsManager/models/collection'
import { EntityObject } from '@DocumentsManager/models/entity'
import { getFileIcon, formatSize, formatDate } from '@/utils/fileHelpers'
import { FileActionsMenu } from '@/components'
type ItemWithType = {
item: FileCollectionObject | FileEntityObject
item: CollectionObject | EntityObject
type: 'collection' | 'entity'
}
const props = defineProps<{
collections: FileCollectionObject[]
entities: FileEntityObject[]
collections: CollectionObject[]
entities: EntityObject[]
selectedIds: Set<string>
}>()
const emit = defineEmits<{
'item-click': [item: FileCollectionObject | FileEntityObject, event: MouseEvent | KeyboardEvent]
'rename': [item: FileCollectionObject | FileEntityObject]
'delete': [item: FileCollectionObject | FileEntityObject]
'download': [item: FileCollectionObject | FileEntityObject]
'show-details': [item: FileCollectionObject | FileEntityObject]
'item-click': [item: CollectionObject | EntityObject, event: MouseEvent | KeyboardEvent]
'open': [item: CollectionObject | EntityObject]
'rename': [item: CollectionObject | EntityObject]
'delete': [item: CollectionObject | EntityObject]
'download': [item: CollectionObject | EntityObject]
'show-details': [item: CollectionObject | EntityObject]
}>()
// Combine collections and entities into a single list for virtual scrolling
@@ -30,7 +31,7 @@ const allItems = computed<ItemWithType[]>(() => [
...props.entities.map(e => ({ item: e, type: 'entity' as const }))
])
function isCollection(wrapped: ItemWithType): wrapped is { item: FileCollectionObject; type: 'collection' } {
function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObject; type: 'collection' } {
return wrapped.type === 'collection'
}
</script>
@@ -56,18 +57,19 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: FileCollectionO
<div
v-if="isCollection(wrapped)"
class="files-details-row"
:class="{ 'files-details-row--selected': selectedIds.has(wrapped.item.id) }"
:class="{ 'files-details-row--selected': selectedIds.has(String(wrapped.item.identifier)) }"
@click="emit('item-click', wrapped.item, $event)"
>
<div class="files-details-cell files-details-name">
<v-icon color="amber-darken-2" size="small" class="mr-2">mdi-folder</v-icon>
{{ wrapped.item.label }}
{{ wrapped.item.properties.label || String(wrapped.item.identifier ?? '') }}
</div>
<div class="files-details-cell files-details-size">—</div>
<div class="files-details-cell files-details-modified">{{ formatDate(wrapped.item.modifiedOn) }}</div>
<div class="files-details-cell files-details-modified">{{ formatDate(wrapped.item.modified) }}</div>
<div class="files-details-cell files-details-actions">
<FileActionsMenu
:item="wrapped.item"
@open="emit('open', $event)"
@rename="emit('rename', $event)"
@delete="emit('delete', $event)"
@download="emit('download', $event)"
@@ -80,18 +82,20 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: FileCollectionO
<div
v-else
class="files-details-row"
:class="{ 'files-details-row--selected': selectedIds.has(wrapped.item.id) }"
:class="{ 'files-details-row--selected': selectedIds.has(String(wrapped.item.identifier)) }"
@click="emit('item-click', wrapped.item, $event)"
@dblclick.stop="emit('open', wrapped.item)"
>
<div class="files-details-cell files-details-name">
<v-icon color="grey" size="small" class="mr-2">{{ getFileIcon(wrapped.item as FileEntityObject) }}</v-icon>
{{ wrapped.item.label }}
<v-icon color="grey" size="small" class="mr-2">{{ getFileIcon(wrapped.item as EntityObject) }}</v-icon>
{{ wrapped.item.properties.label || String(wrapped.item.identifier ?? '') }}
</div>
<div class="files-details-cell files-details-size">{{ formatSize((wrapped.item as FileEntityObject).size) }}</div>
<div class="files-details-cell files-details-modified">{{ formatDate(wrapped.item.modifiedOn) }}</div>
<div class="files-details-cell files-details-size">{{ formatSize(wrapped.item.properties.size) }}</div>
<div class="files-details-cell files-details-modified">{{ formatDate(wrapped.item.modified) }}</div>
<div class="files-details-cell files-details-actions">
<FileActionsMenu
:item="wrapped.item"
@open="emit('open', $event)"
@rename="emit('rename', $event)"
@delete="emit('delete', $event)"
@download="emit('download', $event)"

36
src/components/views/FilesGridView.vue
View File

@@ -1,21 +1,22 @@
<script setup lang="ts">
import { FileCollectionObject } from '@FilesManager/models/collection'
import { FileEntityObject } from '@FilesManager/models/entity'
import { CollectionObject } from '@DocumentsManager/models/collection'
import { EntityObject } from '@DocumentsManager/models/entity'
import { getFileIcon, formatSize } from '@/utils/fileHelpers'
import { FileActionsMenu } from '@/components'
defineProps<{
collections: FileCollectionObject[]
entities: FileEntityObject[]
collections: CollectionObject[]
entities: EntityObject[]
selectedIds: Set<string>
}>()
const emit = defineEmits<{
'item-click': [item: FileCollectionObject | FileEntityObject, event: MouseEvent | KeyboardEvent]
'rename': [item: FileCollectionObject | FileEntityObject]
'delete': [item: FileCollectionObject | FileEntityObject]
'download': [item: FileCollectionObject | FileEntityObject]
'show-details': [item: FileCollectionObject | FileEntityObject]
'item-click': [item: CollectionObject | EntityObject, event: MouseEvent | KeyboardEvent]
'open': [item: CollectionObject | EntityObject]
'rename': [item: CollectionObject | EntityObject]
'delete': [item: CollectionObject | EntityObject]
'download': [item: CollectionObject | EntityObject]
'show-details': [item: CollectionObject | EntityObject]
}>()
</script>
@@ -24,9 +25,9 @@ const emit = defineEmits<{
<!-- Folders -->
<div
v-for="folder in collections"
:key="folder.id"
:key="String(folder.identifier)"
class="files-grid-item"
:class="{ selected: selectedIds.has(folder.id) }"
:class="{ selected: selectedIds.has(String(folder.identifier)) }"
@click="emit('item-click', folder, $event)"
>
<div class="files-grid-item-actions">
@@ -34,6 +35,7 @@ const emit = defineEmits<{
:item="folder"
size="x-small"
button-class="action-btn"
@open="emit('open', $event)"
@rename="emit('rename', $event)"
@delete="emit('delete', $event)"
@download="emit('download', $event)"
@@ -41,22 +43,24 @@ const emit = defineEmits<{
/>
</div>
<v-icon size="48" color="amber-darken-2">mdi-folder</v-icon>
<div class="files-grid-label">{{ folder.label }}</div>
<div class="files-grid-label">{{ folder.properties.label || String(folder.identifier ?? '') }}</div>
</div>
<!-- Files -->
<div
v-for="entity in entities"
:key="entity.id"
:key="String(entity.identifier)"
class="files-grid-item"
:class="{ selected: selectedIds.has(entity.id) }"
:class="{ selected: selectedIds.has(String(entity.identifier)) }"
@click="emit('item-click', entity, $event)"
@dblclick.stop="emit('open', entity)"
>
<div class="files-grid-item-actions">
<FileActionsMenu
:item="entity"
size="x-small"
button-class="action-btn"
@open="emit('open', $event)"
@rename="emit('rename', $event)"
@delete="emit('delete', $event)"
@download="emit('download', $event)"
@@ -64,8 +68,8 @@ const emit = defineEmits<{
/>
</div>
<v-icon size="48" color="grey">{{ getFileIcon(entity) }}</v-icon>
<div class="files-grid-label">{{ entity.label }}</div>
<div class="files-grid-size">{{ formatSize(entity.size) }}</div>
<div class="files-grid-label">{{ entity.properties.label || String(entity.identifier ?? '') }}</div>
<div class="files-grid-size">{{ formatSize(entity.properties.size) }}</div>
</div>
</div>
</template>

38
src/components/views/FilesListView.vue
View File

@@ -1,27 +1,28 @@
<script setup lang="ts">
import { computed } from 'vue'
import { FileCollectionObject } from '@FilesManager/models/collection'
import { FileEntityObject } from '@FilesManager/models/entity'
import { CollectionObject } from '@DocumentsManager/models/collection'
import { EntityObject } from '@DocumentsManager/models/entity'
import { getFileIcon, formatSize } from '@/utils/fileHelpers'
import { FileActionsMenu } from '@/components'
type ItemWithType = {
item: FileCollectionObject | FileEntityObject
item: CollectionObject | EntityObject
type: 'collection' | 'entity'
}
const props = defineProps<{
collections: FileCollectionObject[]
entities: FileEntityObject[]
collections: CollectionObject[]
entities: EntityObject[]
selectedIds: Set<string>
}>()
const emit = defineEmits<{
'item-click': [item: FileCollectionObject | FileEntityObject, event: MouseEvent | KeyboardEvent]
'rename': [item: FileCollectionObject | FileEntityObject]
'delete': [item: FileCollectionObject | FileEntityObject]
'download': [item: FileCollectionObject | FileEntityObject]
'show-details': [item: FileCollectionObject | FileEntityObject]
'item-click': [item: CollectionObject | EntityObject, event: MouseEvent | KeyboardEvent]
'open': [item: CollectionObject | EntityObject]
'rename': [item: CollectionObject | EntityObject]
'delete': [item: CollectionObject | EntityObject]
'download': [item: CollectionObject | EntityObject]
'show-details': [item: CollectionObject | EntityObject]
}>()
// Combine collections and entities into a single list for virtual scrolling
@@ -30,7 +31,7 @@ const allItems = computed<ItemWithType[]>(() => [
...props.entities.map(e => ({ item: e, type: 'entity' as const }))
])
function isCollection(wrapped: ItemWithType): wrapped is { item: FileCollectionObject; type: 'collection' } {
function isCollection(wrapped: ItemWithType): wrapped is { item: CollectionObject; type: 'collection' } {
return wrapped.type === 'collection'
}
</script>
@@ -45,16 +46,17 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: FileCollectionO
<!-- Folder -->
<v-list-item
v-if="isCollection(wrapped)"
:active="selectedIds.has(wrapped.item.id)"
:active="selectedIds.has(String(wrapped.item.identifier))"
@click="($event: MouseEvent | KeyboardEvent) => emit('item-click', wrapped.item, $event)"
>
<template #prepend>
<v-icon color="amber-darken-2">mdi-folder</v-icon>
</template>
<v-list-item-title>{{ wrapped.item.label }}</v-list-item-title>
<v-list-item-title>{{ wrapped.item.properties.label || String(wrapped.item.identifier ?? '') }}</v-list-item-title>
<template #append>
<FileActionsMenu
:item="wrapped.item"
@open="emit('open', $event)"
@rename="emit('rename', $event)"
@delete="emit('delete', $event)"
@download="emit('download', $event)"
@@ -66,17 +68,19 @@ function isCollection(wrapped: ItemWithType): wrapped is { item: FileCollectionO
<!-- File -->
<v-list-item
v-else
:active="selectedIds.has(wrapped.item.id)"
:active="selectedIds.has(String(wrapped.item.identifier))"
@click="($event: MouseEvent | KeyboardEvent) => emit('item-click', wrapped.item, $event)"
@dblclick.stop="emit('open', wrapped.item)"
>
<template #prepend>
<v-icon color="grey">{{ getFileIcon(wrapped.item as FileEntityObject) }}</v-icon>
<v-icon color="grey">{{ getFileIcon(wrapped.item as EntityObject) }}</v-icon>
</template>
<v-list-item-title>{{ wrapped.item.label }}</v-list-item-title>
<v-list-item-subtitle>{{ formatSize((wrapped.item as FileEntityObject).size) }}</v-list-item-subtitle>
<v-list-item-title>{{ wrapped.item.properties.label || String(wrapped.item.identifier ?? '') }}</v-list-item-title>
<v-list-item-subtitle>{{ formatSize(wrapped.item.properties.size) }}</v-list-item-subtitle>
<template #append>
<FileActionsMenu
:item="wrapped.item"
@open="emit('open', $event)"
@rename="emit('rename', $event)"
@delete="emit('delete', $event)"
@download="emit('download', $event)"