refactor: split stores and use events

Signed-off-by: Sebastian <krupinski01@gmail.com>

src/components/FolderSelectionDialog.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
-import { useServicesStore } from '@MailManager/stores/servicesStore'
 import { useMailStore } from '@/stores/mailStore'
+import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
 import type { ServiceObject, CollectionObject } from '@MailManager/models'
 import FolderSelectionTreeNode from './FolderSelectionTreeNode.vue'
 
@@ -31,9 +30,8 @@ const emit = defineEmits<{
   cancel: []
 }>()
 
-const collectionsStore = useCollectionsStore()
-const servicesStore = useServicesStore()
 const mailStore = useMailStore()
+const collectionsStore = useCollectionsStore()
 
 const selectedFolderKey = ref<string | null>(null)
 
@@ -42,10 +40,6 @@ const dialogValue = computed({
   set: (value: boolean) => emit('update:modelValue', value),
 })
 
-const folderKeyFor = (folder: CollectionObject): string => {
-  return `${folder.provider}:${String(folder.service)}:${String(folder.identifier)}`
-}
-
 interface ServiceGroup {
   service: ServiceObject
   loading: boolean
@@ -54,9 +48,7 @@ interface ServiceGroup {
 }
 
 const serviceGroups = computed<ServiceGroup[]>(() => {
-  const service = props.service ??
-    (mailStore.moveDialogService ? servicesStore.serviceByIdentifier(mailStore.moveDialogService) : null)
-
+  const service = props.service
   if (!service) {
     return []
   }
@@ -73,6 +65,34 @@ const serviceGroups = computed<ServiceGroup[]>(() => {
   }]
 })
 
+const selectedFolder = computed(() => {
+  if (!selectedFolderKey.value) {
+    return null
+  }
+
+  const group = serviceGroups.value[0]
+  if (!group) {
+    return null
+  }
+
+  return getServiceFolders(group.service).find(folder => folder.identifier === selectedFolderKey.value) ?? null
+})
+
+const canConfirm = computed(() => {
+  return selectedFolder.value !== null && !props.loading
+})
+
+watch(
+  () => props.modelValue,
+  (isOpen) => {
+    if (!isOpen) {
+      return
+    }
+
+    selectedFolderKey.value = null
+  },
+)
+
 const getRootFolders = (service: ServiceObject): CollectionObject[] => {
   if (service.identifier === null) {
     return []
@@ -89,36 +109,8 @@ const getServiceFolders = (service: ServiceObject): CollectionObject[] => {
   return collectionsStore.collectionsForService(service.provider, service.identifier)
 }
 
-const selectedFolder = computed(() => {
-  if (!selectedFolderKey.value) {
-    return null
-  }
-
-  const group = serviceGroups.value[0]
-  if (!group) {
-    return null
-  }
-
-  return getServiceFolders(group.service).find(folder => folderKeyFor(folder) === selectedFolderKey.value) ?? null
-})
-
-const canConfirm = computed(() => {
-  return selectedFolder.value !== null && !props.loading
-})
-
-watch(
-  () => [props.modelValue, mailStore.moveDialogService],
-  ([isOpen]) => {
-    if (!isOpen) {
-      return
-    }
-
-    selectedFolderKey.value = null
-  },
-)
-
 const handleSelect = (folder: CollectionObject) => {
-  selectedFolderKey.value = folderKeyFor(folder)
+  selectedFolderKey.value = folder.identifier
 }
 
 const handleCancel = () => {
@@ -168,7 +160,7 @@ const handleConfirm = () => {
 
               <FolderSelectionTreeNode
                 v-for="folder in getRootFolders(group.service)"
-                :key="folderKeyFor(folder)"
+                :key="folder.identifier"
                 :folder="folder"
                 :service="group.service"
                 :selected-folder-key="selectedFolderKey"