feat: collection delete

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

src/components/FolderTreeNode.vue

@@ -18,6 +18,7 @@ const emit = defineEmits<{
   select: [folder: CollectionObject]
   createSubfolder: [service: ServiceObject, parentFolder: CollectionObject]
   editFolder: [service: ServiceObject, folder: CollectionObject]
+  deleteFolder: [service: ServiceObject, folder: CollectionObject]
 }>()
 
 const childFolders = computed(() => {
@@ -28,6 +29,8 @@ const hasChildren = computed(() => {
   return collectionsStore.hasChildrenInCollection(props.service.provider, props.service.identifier, props.folder.identifier)
 })
 
+const canDeleteFolder = computed(() => !props.folder.properties.role)
+
 const handleExpandableFolderClick = () => {
   expanded.value = !expanded.value
   emit('select', props.folder)
@@ -95,12 +98,12 @@ const isSelected = (folder: CollectionObject): boolean => {
         @click.stop="handleExpandableFolderClick()"
       >
         <template v-slot:prepend>
-          <v-icon 
-            :icon="getFolderIcon(folder)" 
+          <v-icon
+            :icon="getFolderIcon(folder)"
             :color="getFolderColor(folder)"
           />
         </template>
-        
+
         <template v-slot:append>
           <v-badge
             v-if="folder.properties.unread && folder.properties.unread > 0"
@@ -109,8 +112,7 @@ const isSelected = (folder: CollectionObject): boolean => {
             inline
             class="mr-2"
           />
-          
-          <!-- Action menu -->
+
           <v-menu>
             <template v-slot:activator="{ props: menuProps }">
               <v-btn
@@ -124,7 +126,7 @@ const isSelected = (folder: CollectionObject): boolean => {
                 <v-icon size="small">mdi-dots-vertical</v-icon>
               </v-btn>
             </template>
-            
+
             <v-list density="compact">
               <v-list-item
                 prepend-icon="mdi-pencil"
@@ -138,6 +140,14 @@ const isSelected = (folder: CollectionObject): boolean => {
               >
                 <v-list-item-title>New Subfolder</v-list-item-title>
               </v-list-item>
+              <v-list-item
+                v-if="canDeleteFolder"
+                prepend-icon="mdi-delete"
+                base-color="error"
+                @click="emit('deleteFolder', service, folder)"
+              >
+                <v-list-item-title>Delete Folder</v-list-item-title>
+              </v-list-item>
             </v-list>
           </v-menu>
         </template>
@@ -154,6 +164,7 @@ const isSelected = (folder: CollectionObject): boolean => {
         @select="emit('select', $event)"
         @create-subfolder="(service, parentFolder) => emit('createSubfolder', service, parentFolder)"
         @edit-folder="(service, folder) => emit('editFolder', service, folder)"
+        @delete-folder="(service, folder) => emit('deleteFolder', service, folder)"
       />
     </div>
   </v-list-group>
@@ -166,12 +177,12 @@ const isSelected = (folder: CollectionObject): boolean => {
     @click="emit('select', folder)"
   >
     <template v-slot:prepend>
-      <v-icon 
-        :icon="getFolderIcon(folder)" 
+      <v-icon
+        :icon="getFolderIcon(folder)"
         :color="getFolderColor(folder)"
       />
     </template>
-    
+
     <template v-slot:append>
       <v-badge
         v-if="folder.properties.unread && folder.properties.unread > 0"
@@ -180,8 +191,7 @@ const isSelected = (folder: CollectionObject): boolean => {
         inline
         class="mr-2"
       />
-      
-      <!-- Action menu -->
+
       <v-menu>
         <template v-slot:activator="{ props: menuProps }">
           <v-btn
@@ -195,7 +205,7 @@ const isSelected = (folder: CollectionObject): boolean => {
             <v-icon size="small">mdi-dots-vertical</v-icon>
           </v-btn>
         </template>
-        
+
         <v-list density="compact">
           <v-list-item
             prepend-icon="mdi-pencil"
@@ -209,6 +219,14 @@ const isSelected = (folder: CollectionObject): boolean => {
           >
             <v-list-item-title>New Subfolder</v-list-item-title>
           </v-list-item>
+          <v-list-item
+            v-if="canDeleteFolder"
+            prepend-icon="mdi-delete"
+            base-color="error"
+            @click="emit('deleteFolder', service, folder)"
+          >
+            <v-list-item-title>Delete Folder</v-list-item-title>
+          </v-list-item>
         </v-list>
       </v-menu>
     </template>