154 lines
4.4 KiB
Vue
154 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
|
|
import { useServicesStore } from '@MailManager/stores/servicesStore'
|
|
import { useMailStore } from '@/stores/mailStore'
|
|
import { useUser } from '@KTXC'
|
|
import FolderTreeView from './FolderTreeView.vue'
|
|
import FolderPageView from './FolderPageView.vue'
|
|
import CreateFolderDialog from './CreateFolderDialog.vue'
|
|
import RenameFolderDialog from './RenameFolderDialog.vue'
|
|
import type { CollectionObject } from '@MailManager/models/collection'
|
|
import type { ServiceObject } from '@MailManager/models'
|
|
|
|
type FolderViewMode = 'tree' | 'page'
|
|
|
|
const props = defineProps<{
|
|
selectedFolder?: CollectionObject | null
|
|
}>()
|
|
|
|
// Emits
|
|
const emit = defineEmits<{
|
|
select: [folder: CollectionObject]
|
|
folderCreated: [folder: CollectionObject]
|
|
}>()
|
|
|
|
// Stores
|
|
const collectionsStore = useCollectionsStore()
|
|
const servicesStore = useServicesStore()
|
|
const mailStore = useMailStore()
|
|
|
|
// User settings
|
|
const { settings } = useUser()
|
|
|
|
// Folder view mode from user settings
|
|
const folderViewMode = computed(() => {
|
|
return (settings.value.get('mail.folderViewMode') as FolderViewMode) || 'tree'
|
|
})
|
|
|
|
// Create folder dialog state
|
|
const createDialogVisible = ref(false)
|
|
const createDialogService = ref<ServiceObject | null>(null)
|
|
const createDialogParent = ref<CollectionObject | null>(null)
|
|
const renameDialogVisible = ref(false)
|
|
const renameDialogService = ref<ServiceObject | null>(null)
|
|
const renameDialogFolder = ref<CollectionObject | null>(null)
|
|
|
|
// Handle create folder event from child components
|
|
const handleCreateFolder = (service: ServiceObject, parentFolder: CollectionObject | null = null) => {
|
|
createDialogService.value = service
|
|
createDialogParent.value = parentFolder
|
|
createDialogVisible.value = true
|
|
}
|
|
|
|
// Handle folder created
|
|
const handleFolderCreated = (newFolder: CollectionObject) => {
|
|
emit('folderCreated', newFolder)
|
|
emit('select', newFolder)
|
|
}
|
|
|
|
const handleEditFolder = (service: ServiceObject, folder: CollectionObject) => {
|
|
renameDialogService.value = service
|
|
renameDialogFolder.value = folder
|
|
renameDialogVisible.value = true
|
|
}
|
|
|
|
const handleFolderRenamed = (updatedFolder: CollectionObject) => {
|
|
emit('select', updatedFolder)
|
|
}
|
|
|
|
// Computed: all folders for validation
|
|
const allFolders = computed(() =>
|
|
servicesStore.services.flatMap(service =>
|
|
collectionsStore.collectionsForService(service.provider, service.identifier),
|
|
)
|
|
)
|
|
|
|
interface ServiceGroup {
|
|
service: ServiceObject
|
|
loading: boolean
|
|
loaded: boolean
|
|
error: string | null
|
|
}
|
|
const serviceGroups = computed(() => {
|
|
const groups: ServiceGroup[] = []
|
|
|
|
servicesStore.services.forEach(service => {
|
|
groups.push({
|
|
service,
|
|
loading: mailStore.isServiceFolderLoading(service.provider, service.identifier),
|
|
loaded: mailStore.hasServiceFoldersLoaded(service.provider, service.identifier),
|
|
error: mailStore.getServiceFolderError(service.provider, service.identifier),
|
|
})
|
|
})
|
|
|
|
return groups
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<v-list density="compact" nav>
|
|
<!-- Tree View -->
|
|
<FolderTreeView
|
|
v-if="folderViewMode === 'tree'"
|
|
:selected-folder="selectedFolder"
|
|
:service-groups="serviceGroups"
|
|
@select="emit('select', $event)"
|
|
@create-folder="handleCreateFolder"
|
|
@edit-folder="handleEditFolder"
|
|
/>
|
|
|
|
<!-- Page-based View -->
|
|
<FolderPageView
|
|
v-else
|
|
:selected-folder="selectedFolder"
|
|
:service-groups="serviceGroups"
|
|
@select="emit('select', $event)"
|
|
@create-folder="handleCreateFolder"
|
|
@edit-folder="handleEditFolder"
|
|
/>
|
|
|
|
<!-- Empty state -->
|
|
<v-list-item v-if="servicesStore.services.length === 0">
|
|
<v-list-item-title class="text-center text-medium-emphasis">
|
|
No mail accounts configured
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
<!-- Create Folder Dialog -->
|
|
<CreateFolderDialog
|
|
v-if="createDialogService"
|
|
v-model="createDialogVisible"
|
|
:service="createDialogService"
|
|
:parent-folder="createDialogParent"
|
|
:all-folders="allFolders"
|
|
@created="handleFolderCreated"
|
|
/>
|
|
|
|
<RenameFolderDialog
|
|
v-if="renameDialogService && renameDialogFolder"
|
|
v-model="renameDialogVisible"
|
|
:service="renameDialogService"
|
|
:folder="renameDialogFolder"
|
|
:all-folders="allFolders"
|
|
@updated="handleFolderRenamed"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.v-list-item--active {
|
|
background-color: rgba(var(--v-theme-primary), 0.12);
|
|
}
|
|
</style>
|