Feature: support sorting sidebar saved views (#4381)

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -32,6 +32,13 @@ import {
   PermissionsService,
   PermissionType,
 } from 'src/app/services/permissions.service'
+import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
+import {
+  CdkDragStart,
+  CdkDragEnd,
+  CdkDragDrop,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
 
 @Component({
   selector: 'pngx-app-frame',
@@ -42,6 +49,17 @@ export class AppFrameComponent
   extends ComponentWithPermissions
   implements OnInit, ComponentCanDeactivate
 {
+  versionString = `${environment.appTitle} ${environment.version}`
+  appRemoteVersion: AppRemoteVersion
+
+  isMenuCollapsed: boolean = true
+
+  slimSidebarAnimating: boolean = false
+
+  searchField = new FormControl('')
+
+  sidebarViews: PaperlessSavedView[]
+
   constructor(
     public router: Router,
     private activatedRoute: ActivatedRoute,
@@ -63,7 +81,7 @@ export class AppFrameComponent
         PermissionType.SavedView
       )
     ) {
-      savedViewService.initialize()
+      this.savedViewService.initialize()
     }
   }
 
@@ -72,15 +90,12 @@ export class AppFrameComponent
       this.checkForUpdates()
     }
     this.tasksService.reload()
+
+    this.savedViewService.listAll().subscribe(() => {
+      this.sidebarViews = this.savedViewService.sidebarViews
+    })
   }
 
-  versionString = `${environment.appTitle} ${environment.version}`
-  appRemoteVersion: AppRemoteVersion
-
-  isMenuCollapsed: boolean = true
-
-  slimSidebarAnimating: boolean = false
-
   toggleSlimSidebar(): void {
     this.slimSidebarAnimating = true
     this.slimSidebarEnabled = !this.slimSidebarEnabled
@@ -121,8 +136,6 @@ export class AppFrameComponent
     return !this.openDocumentsService.hasDirty()
   }
 
-  searchField = new FormControl('')
-
   get searchFieldEmpty(): boolean {
     return this.searchField.value.trim().length == 0
   }
@@ -218,6 +231,27 @@ export class AppFrameComponent
       })
   }
 
+  onDragStart(event: CdkDragStart) {
+    this.settingsService.globalDropzoneEnabled = false
+  }
+
+  onDragEnd(event: CdkDragEnd) {
+    this.settingsService.globalDropzoneEnabled = true
+  }
+
+  onDrop(event: CdkDragDrop<PaperlessSavedView[]>) {
+    moveItemInArray(this.sidebarViews, event.previousIndex, event.currentIndex)
+
+    this.settingsService.updateSidebarViewsSort(this.sidebarViews).subscribe({
+      next: () => {
+        this.toastService.showInfo($localize`Sidebar views updated`)
+      },
+      error: (e) => {
+        this.toastService.showError($localize`Error updating sidebar views`, e)
+      },
+    })
+  }
+
   private checkForUpdates() {
     this.remoteVersionService
       .checkForUpdates()