Feature: support sorting sidebar saved views (#4381)

src-ui/src/app/services/rest/saved-view.service.spec.ts

@@ -4,6 +4,8 @@ import { TestBed } from '@angular/core/testing'
 import { environment } from 'src/environments/environment'
 import { commonAbstractPaperlessServiceTests } from './abstract-paperless-service.spec'
 import { SavedViewService } from './saved-view.service'
+import { SettingsService } from '../settings.service'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 
 let httpTestingController: HttpTestingController
 let service: SavedViewService
@@ -22,8 +24,8 @@ const saved_views = [
   {
     name: 'Saved View 2',
     id: 2,
-    show_on_dashboard: false,
-    show_in_sidebar: false,
+    show_on_dashboard: true,
+    show_in_sidebar: true,
     sort_field: 'name',
     sort_reverse: true,
     filter_rules: [],
@@ -32,6 +34,15 @@ const saved_views = [
     name: 'Saved View 3',
     id: 3,
     show_on_dashboard: true,
+    show_in_sidebar: true,
+    sort_field: 'name',
+    sort_reverse: true,
+    filter_rules: [],
+  },
+  {
+    name: 'Saved View 4',
+    id: 4,
+    show_on_dashboard: false,
     show_in_sidebar: false,
     sort_field: 'name',
     sort_reverse: true,
@@ -43,6 +54,8 @@ const saved_views = [
 commonAbstractPaperlessServiceTests(endpoint, SavedViewService)
 
 describe(`Additional service tests for SavedViewService`, () => {
+  let settingsService
+
   it('should retrieve saved views and sort them', () => {
     service.initialize()
     const req = httpTestingController.expectOne(
@@ -51,9 +64,9 @@ describe(`Additional service tests for SavedViewService`, () => {
     req.flush({
       results: saved_views,
     })
-    expect(service.allViews).toHaveLength(3)
-    expect(service.dashboardViews).toHaveLength(2)
-    expect(service.sidebarViews).toHaveLength(1)
+    expect(service.allViews).toHaveLength(4)
+    expect(service.dashboardViews).toHaveLength(3)
+    expect(service.sidebarViews).toHaveLength(3)
   })
 
   it('should support patchMany', () => {
@@ -67,11 +80,36 @@ describe(`Additional service tests for SavedViewService`, () => {
     })
   })
 
+  it('should sort dashboard views', () => {
+    service['savedViews'] = saved_views
+    jest.spyOn(settingsService, 'get').mockImplementation((key) => {
+      if (key === SETTINGS_KEYS.DASHBOARD_VIEWS_SORT_ORDER) return [3, 1, 2]
+    })
+    expect(service.dashboardViews).toEqual([
+      saved_views[2],
+      saved_views[0],
+      saved_views[1],
+    ])
+  })
+
+  it('should sort sidebar views', () => {
+    service['savedViews'] = saved_views
+    jest.spyOn(settingsService, 'get').mockImplementation((key) => {
+      if (key === SETTINGS_KEYS.SIDEBAR_VIEWS_SORT_ORDER) return [3, 1, 2]
+    })
+    expect(service.sidebarViews).toEqual([
+      saved_views[2],
+      saved_views[0],
+      saved_views[1],
+    ])
+  })
+
   beforeEach(() => {
     // Dont need to setup again
 
     httpTestingController = TestBed.inject(HttpTestingController)
     service = TestBed.inject(SavedViewService)
+    settingsService = TestBed.inject(SettingsService)
   })
 
   afterEach(() => {

src-ui/src/app/services/rest/saved-view.service.ts

@@ -5,6 +5,8 @@ import { tap } from 'rxjs/operators'
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
 import { PermissionsService } from '../permissions.service'
 import { AbstractPaperlessService } from './abstract-paperless-service'
+import { SettingsService } from '../settings.service'
+import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
 
 @Injectable({
   providedIn: 'root',
@@ -12,7 +14,11 @@ import { AbstractPaperlessService } from './abstract-paperless-service'
 export class SavedViewService extends AbstractPaperlessService<PaperlessSavedView> {
   loading: boolean
 
-  constructor(http: HttpClient, permissionService: PermissionsService) {
+  constructor(
+    http: HttpClient,
+    permissionService: PermissionsService,
+    private settingsService: SettingsService
+  ) {
     super(http, 'saved_views')
   }
 
@@ -25,6 +31,7 @@ export class SavedViewService extends AbstractPaperlessService<PaperlessSavedVie
     this.listAll().subscribe((r) => {
       this.savedViews = r.results
       this.loading = false
+      this.settingsService.dashboardIsEmpty = this.dashboardViews.length === 0
     })
   }
 
@@ -34,12 +41,34 @@ export class SavedViewService extends AbstractPaperlessService<PaperlessSavedVie
     return this.savedViews
   }
 
-  get sidebarViews() {
-    return this.savedViews.filter((v) => v.show_in_sidebar)
+  get sidebarViews(): PaperlessSavedView[] {
+    const sidebarViews = this.savedViews.filter((v) => v.show_in_sidebar)
+
+    const sorted: number[] = this.settingsService.get(
+      SETTINGS_KEYS.SIDEBAR_VIEWS_SORT_ORDER
+    )
+
+    return sorted?.length > 0
+      ? sorted
+          .map((id) => sidebarViews.find((v) => v.id === id))
+          .concat(sidebarViews.filter((v) => !sorted.includes(v.id)))
+          .filter((v) => v)
+      : [...sidebarViews]
   }
 
-  get dashboardViews() {
-    return this.savedViews.filter((v) => v.show_on_dashboard)
+  get dashboardViews(): PaperlessSavedView[] {
+    const dashboardViews = this.savedViews.filter((v) => v.show_on_dashboard)
+
+    const sorted: number[] = this.settingsService.get(
+      SETTINGS_KEYS.DASHBOARD_VIEWS_SORT_ORDER
+    )
+
+    return sorted?.length > 0
+      ? sorted
+          .map((id) => dashboardViews.find((v) => v.id === id))
+          .concat(dashboardViews.filter((v) => !sorted.includes(v.id)))
+          .filter((v) => v)
+      : [...dashboardViews]
   }
 
   create(o: PaperlessSavedView) {

src-ui/src/app/services/settings.service.spec.ts

@@ -292,6 +292,14 @@ describe('SettingsService', () => {
       SETTINGS_KEYS.DASHBOARD_VIEWS_SORT_ORDER,
       [1, 4]
     )
+    settingsService.updateSidebarViewsSort([
+      { id: 1 } as PaperlessSavedView,
+      { id: 4 } as PaperlessSavedView,
+    ])
+    expect(setSpy).toHaveBeenCalledWith(
+      SETTINGS_KEYS.SIDEBAR_VIEWS_SORT_ORDER,
+      [1, 4]
+    )
     httpTestingController
       .expectOne(`${environment.apiBaseUrl}ui_settings/`)
       .flush(ui_settings)

src-ui/src/app/services/settings.service.ts

@@ -24,7 +24,6 @@ import {
 } from '../data/paperless-uisettings'
 import { PaperlessUser } from '../data/paperless-user'
 import { PermissionsService } from './permissions.service'
-import { SavedViewService } from './rest/saved-view.service'
 import { ToastService } from './toast.service'
 import { PaperlessSavedView } from '../data/paperless-saved-view'
 
@@ -55,8 +54,11 @@ export class SettingsService {
     return this._renderer
   }
 
+  public dashboardIsEmpty: boolean = false
+
   public globalDropzoneEnabled: boolean = true
   public globalDropzoneActive: boolean = false
+  public organizingSidebarSavedViews: boolean = false
 
   constructor(
     rendererFactory: RendererFactory2,
@@ -66,7 +68,6 @@ export class SettingsService {
     @Inject(LOCALE_ID) private localeId: string,
     protected http: HttpClient,
     private toastService: ToastService,
-    private savedViewService: SavedViewService,
     private permissionsService: PermissionsService
   ) {
     this._renderer = rendererFactory.createRenderer(null, null)
@@ -515,11 +516,7 @@ export class SettingsService {
   }
 
   offerTour(): boolean {
-    return (
-      !this.savedViewService.loading &&
-      this.savedViewService.dashboardViews.length == 0 &&
-      !this.get(SETTINGS_KEYS.TOUR_COMPLETE)
-    )
+    return this.dashboardIsEmpty && !this.get(SETTINGS_KEYS.TOUR_COMPLETE)
   }
 
   completeTour() {
@@ -544,4 +541,11 @@ export class SettingsService {
     ])
     return this.storeSettings()
   }
+
+  updateSidebarViewsSort(sidebarViews: PaperlessSavedView[]): Observable<any> {
+    this.set(SETTINGS_KEYS.SIDEBAR_VIEWS_SORT_ORDER, [
+      ...new Set(sidebarViews.map((v) => v.id)),
+    ])
+    return this.storeSettings()
+  }
 }