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)"
src/components/views/FilesGridView.vue
+20 -16
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>
src/components/views/FilesListView.vue
+21 -17
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)"