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

refactor: improvemets

Browse Source 
Signed-off-by: Sebastian <krupinski01@gmail.com>
This commit is contained in:
Sebastian Krupinski
2026-03-24 19:11:29 -04:00
parent ab508a5361
commit 18d07d84cb
11 changed files with 499 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/FolderTreeNode.vue
View File

@@ -1,26 +1,38 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
import type { CollectionObject } from '@MailManager/models/collection'
import type { ServiceInterface } from '@MailManager/types/service'
export interface FolderNode {
folder: CollectionObject
children: FolderNode[]
}
import type { ServiceObject } from '@MailManager/models'
export interface Props {
node: FolderNode
service: ServiceInterface
folder: CollectionObject
service: ServiceObject
selectedFolder?: CollectionObject | null
}
const props = defineProps<Props>()
const collectionsStore = useCollectionsStore()
const expanded = ref(false)
const emit = defineEmits<{
select: [folder: CollectionObject]
createSubfolder: [service: ServiceInterface, parentFolder: CollectionObject]
editFolder: [service: ServiceInterface, folder: CollectionObject]
createSubfolder: [service: ServiceObject, parentFolder: CollectionObject]
editFolder: [service: ServiceObject, folder: CollectionObject]
}>()
const childFolders = computed(() => {
return collectionsStore.collectionsInCollection(props.service.provider, props.service.identifier, props.folder.identifier)
})
const hasChildren = computed(() => {
return collectionsStore.hasChildrenInCollection(props.service.provider, props.service.identifier, props.folder.identifier)
})
const handleExpandableFolderClick = () => {
expanded.value = !expanded.value
emit('select', props.folder)
}
// Get icon for folder based on role
const getFolderIcon = (folder: CollectionObject): string => {
switch (folder.properties.role) {
@@ -73,26 +85,26 @@ const isSelected = (folder: CollectionObject): boolean => {
</script>
<template>
<v-list-group v-if="node.children.length > 0" class="folder-tree-group">
<v-list-group v-if="hasChildren" v-model="expanded" class="folder-tree-group">
<template v-slot:activator="{ props: activatorProps }">
<v-list-item
v-bind="activatorProps"
class="folder-row-item"
:title="node.folder.properties.label"
:active="isSelected(node.folder)"
@click.stop="emit('select', node.folder)"
:title="folder.properties.label"
:active="isSelected(folder)"
@click.stop="handleExpandableFolderClick()"
>
<template v-slot:prepend>
<v-icon
:icon="getFolderIcon(node.folder)"
:color="getFolderColor(node.folder)"
:icon="getFolderIcon(folder)"
:color="getFolderColor(folder)"
/>
</template>
<template v-slot:append>
<v-badge
v-if="node.folder.properties.unread && node.folder.properties.unread > 0"
:content="node.folder.properties.unread"
v-if="folder.properties.unread && folder.properties.unread > 0"
:content="folder.properties.unread"
color="primary"
inline
class="mr-2"
@@ -116,13 +128,13 @@ const isSelected = (folder: CollectionObject): boolean => {
<v-list density="compact">
<v-list-item
prepend-icon="mdi-pencil"
@click="emit('editFolder', service, node.folder)"
@click="emit('editFolder', service, folder)"
>
<v-list-item-title>Edit Folder Name</v-list-item-title>
</v-list-item>
<v-list-item
prepend-icon="mdi-folder-plus"
@click="emit('createSubfolder', service, node.folder)"
@click="emit('createSubfolder', service, folder)"
>
<v-list-item-title>New Subfolder</v-list-item-title>
</v-list-item>
@@ -132,11 +144,11 @@ const isSelected = (folder: CollectionObject): boolean => {
</v-list-item>
</template>
<div class="folder-tree-children">
<div v-if="expanded" class="folder-tree-children">
<FolderTreeNode
v-for="child in node.children"
:key="child.folder.identifier"
:node="child"
v-for="childFolder in childFolders"
:key="childFolder.identifier"
:folder="childFolder"
:service="service"
:selected-folder="selectedFolder"
@select="emit('select', $event)"
@@ -149,21 +161,21 @@ const isSelected = (folder: CollectionObject): boolean => {
<v-list-item
v-else
class="folder-tree-item folder-row-item"
:title="node.folder.properties.label"
:active="isSelected(node.folder)"
@click="emit('select', node.folder)"
:title="folder.properties.label"
:active="isSelected(folder)"
@click="emit('select', folder)"
>
<template v-slot:prepend>
<v-icon
:icon="getFolderIcon(node.folder)"
:color="getFolderColor(node.folder)"
:icon="getFolderIcon(folder)"
:color="getFolderColor(folder)"
/>
</template>
<template v-slot:append>
<v-badge
v-if="node.folder.properties.unread && node.folder.properties.unread > 0"
:content="node.folder.properties.unread"
v-if="folder.properties.unread && folder.properties.unread > 0"
:content="folder.properties.unread"
color="primary"
inline
class="mr-2"
@@ -187,13 +199,13 @@ const isSelected = (folder: CollectionObject): boolean => {
<v-list density="compact">
<v-list-item
prepend-icon="mdi-pencil"
@click="emit('editFolder', service, node.folder)"
@click="emit('editFolder', service, folder)"
>
<v-list-item-title>Edit Folder Name</v-list-item-title>
</v-list-item>
<v-list-item
prepend-icon="mdi-folder-plus"
@click="emit('createSubfolder', service, node.folder)"
@click="emit('createSubfolder', service, folder)"
>
<v-list-item-title>New Subfolder</v-list-item-title>
</v-list-item>