Nodarx/documents
1
0
Fork 0
Code Issues 1 Pull Requests 4 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
src/components/views/FilesDetailsView.vue
+23 -19
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)"