refactor: standardize design
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user