114 lines
3.1 KiB
Vue
114 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useServicesStore } from '@MailManager/stores/servicesStore'
|
|
import { useMailStore } from '@/stores/mailStore'
|
|
import { useMailSettingsStore } from '@/stores/mailSettingsStore'
|
|
import { useMailUiStore } from '@/stores/mailUiStore'
|
|
import FolderTreeView from './FolderTreeView.vue'
|
|
import FolderPageView from './FolderPageView.vue'
|
|
import type { CollectionObject } from '@MailManager/models/collection'
|
|
import type { ServiceObject } from '@MailManager/models'
|
|
|
|
interface ServiceGroup {
|
|
service: ServiceObject
|
|
loading: boolean
|
|
loaded: boolean
|
|
error: string | null
|
|
}
|
|
|
|
const props = defineProps<{
|
|
selectedFolder?: CollectionObject | null
|
|
}>()
|
|
|
|
// Emits
|
|
const emit = defineEmits<{
|
|
select: [folder: CollectionObject]
|
|
}>()
|
|
|
|
// Stores
|
|
const servicesStore = useServicesStore()
|
|
const mailStore = useMailStore()
|
|
const mailUiStore = useMailUiStore()
|
|
const mailSettingsStore = useMailSettingsStore()
|
|
const { folderViewMode } = storeToRefs(mailSettingsStore)
|
|
|
|
const serviceGroups = computed(() => {
|
|
const groups: ServiceGroup[] = []
|
|
|
|
servicesStore.servicesEnabled.forEach(service => {
|
|
if (service.identifier === null) {
|
|
return
|
|
}
|
|
|
|
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
|
|
})
|
|
|
|
// Handlers
|
|
const handleFolderCreate = (service: ServiceObject, parentFolder: CollectionObject | null = null) => {
|
|
mailUiStore.openCreateFolderDialog(service, parentFolder)
|
|
}
|
|
|
|
const handleFolderEdit = (folder: CollectionObject) => {
|
|
mailUiStore.openRenameFolderDialog(folder)
|
|
}
|
|
|
|
const handleFolderDelete = (folder: CollectionObject) => {
|
|
mailUiStore.openDeleteFolderDialog(folder)
|
|
}
|
|
|
|
const handleFolderMove = (folder: CollectionObject) => {
|
|
mailUiStore.openMoveFolderDialog(folder)
|
|
}
|
|
|
|
</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="handleFolderCreate"
|
|
@edit-folder="handleFolderEdit"
|
|
@move-folder="handleFolderMove"
|
|
@delete-folder="handleFolderDelete"
|
|
/>
|
|
|
|
<!-- Page-based View -->
|
|
<FolderPageView
|
|
v-else
|
|
:selected-folder="selectedFolder"
|
|
:service-groups="serviceGroups"
|
|
@select="emit('select', $event)"
|
|
@create-folder="handleFolderCreate"
|
|
@edit-folder="handleFolderEdit"
|
|
@move-folder="handleFolderMove"
|
|
@delete-folder="handleFolderDelete"
|
|
/>
|
|
|
|
<!-- Empty state -->
|
|
<v-list-item v-if="servicesStore.servicesEnabled.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>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.v-list-item--active {
|
|
background-color: rgba(var(--v-theme-primary), 0.12);
|
|
}
|
|
</style>
|