Add settings routing

src-ui/src/app/app-routing.module.ts

@@ -47,6 +47,11 @@ const routes: Routes = [
         component: SettingsComponent,
         canDeactivate: [DirtyFormGuard],
       },
+      {
+        path: 'settings/:section',
+        component: SettingsComponent,
+        canDeactivate: [DirtyFormGuard],
+      },
       { path: 'tasks', component: TasksComponent },
     ],
   },

src-ui/src/app/components/manage/settings/settings.component.html

@@ -10,7 +10,7 @@
 
 <form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">
 
-  <ul ngbNav #nav="ngbNav" (navChange)="maybeInitializeTab($event)" [(activeId)]="activeNavID" class="nav-tabs">
+  <ul ngbNav #nav="ngbNav" (navChange)="onNavChange($event)" [(activeId)]="activeNavID" class="nav-tabs">
     <li [ngbNavItem]="SettingsNavIDs.General">
       <a ngbNavLink i18n>General</a>
       <ng-template ngbNavContent>

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -26,7 +26,7 @@ import {
   Subject,
 } from 'rxjs'
 import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
-import { ActivatedRoute } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
 import { ViewportScroller } from '@angular/common'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { PaperlessMailAccount } from 'src/app/data/paperless-mail-account'
@@ -120,6 +120,7 @@ export class SettingsComponent
     @Inject(LOCALE_ID) public currentLocale: string,
     private viewportScroller: ViewportScroller,
     private activatedRoute: ActivatedRoute,
+    private router: Router,
     public readonly tourService: TourService,
     private modalService: NgbModal
   ) {
@@ -128,6 +129,23 @@ export class SettingsComponent
     })
   }
 
+  ngOnInit() {
+    this.initialize()
+
+    this.activatedRoute.paramMap.subscribe((paramMap) => {
+      const section = paramMap.get('section')
+      if (section) {
+        const navIDKey: string = Object.keys(SettingsNavIDs).find(
+          (navID) => navID.toLowerCase() == section
+        )
+        if (navIDKey) {
+          this.activeNavID = SettingsNavIDs[navIDKey]
+          this.maybeInitializeTab(this.activeNavID)
+        }
+      }
+    })
+  }
+
   ngAfterViewInit(): void {
     if (this.activatedRoute.snapshot.fragment) {
       this.viewportScroller.scrollToAnchor(
@@ -182,23 +200,25 @@ export class SettingsComponent
     }
   }
 
-  ngOnInit() {
+  onNavChange(navChangeEvent: NgbNavChangeEvent) {
-    this.initialize()
+    this.maybeInitializeTab(navChangeEvent.nextId)
+    const [foundNavIDkey, foundNavIDValue] = Object.entries(
+      SettingsNavIDs
+    ).find(([navIDkey, navIDValue]) => navIDValue == navChangeEvent.nextId)
+    if (foundNavIDkey)
+      this.router.navigate(['settings', foundNavIDkey.toLowerCase()])
   }
 
-  // Load tab contents 'on demand', either on mouseover or focusin (i.e. before click) or on nav change event
+  // Load tab contents 'on demand', either on mouseover or focusin (i.e. before click) or called from nav change event
-  maybeInitializeTab(navIDorEvent: number | NgbNavChangeEvent): void {
+  maybeInitializeTab(navID: number): void {
-    const navID =
-      typeof navIDorEvent == 'number' ? navIDorEvent : navIDorEvent.nextId
-    // initialize saved views
     if (navID == SettingsNavIDs.SavedViews && !this.savedViews) {
       this.savedViewService.listAll().subscribe((r) => {
         this.savedViews = r.results
         this.initialize()
       })
     } else if (
-      (navID == SettingsNavIDs.Mail && !this.mailAccounts) ||
+      navID == SettingsNavIDs.Mail &&
-      !this.mailRules
+      (!this.mailAccounts || !this.mailRules)
     ) {
       this.mailAccountService.listAll().subscribe((r) => {
         this.mailAccounts = r.results