dynamic loading of settings tab contents

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

@@ -30,6 +30,16 @@ import { ActivatedRoute } from '@angular/router'
 import { ViewportScroller } from '@angular/common'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap'
+import { Results } from 'src/app/data/results'
+
+enum SettingsNavIDs {
+  General = 1,
+  Notifications = 2,
+  SavedViews = 3,
+  Mail = 4,
+  UsersGroups = 5,
+}
 
 @Component({
   selector: 'app-settings',
@@ -40,6 +50,9 @@ export class SettingsComponent
   extends ComponentWithPermissions
   implements OnInit, AfterViewInit, OnDestroy, DirtyComponent
 {
+  SettingsNavIDs = SettingsNavIDs
+  activeNavID: number
+
   savedViewGroup = new FormGroup({})
 
   settingsForm = new FormGroup({
@@ -150,10 +163,20 @@ export class SettingsComponent
   }
 
   ngOnInit() {
-    this.savedViewService.listAll().subscribe((r) => {
-      this.savedViews = r.results
-      this.initialize()
-    })
+    this.initialize()
+  }
+
+  // Load tab contents 'on demand', either on mouseover or focusin (i.e. before click) or on nav change event
+  maybeInitializeTab(navIDorEvent: number | NgbNavChangeEvent): 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()
+      })
+    }
   }
 
   initialize() {
@@ -161,22 +184,24 @@ export class SettingsComponent
 
     let storeData = this.getCurrentSettings()
 
-    for (let view of this.savedViews) {
-      storeData.savedViews[view.id.toString()] = {
-        id: view.id,
-        name: view.name,
-        show_on_dashboard: view.show_on_dashboard,
-        show_in_sidebar: view.show_in_sidebar,
+    if (this.savedViews) {
+      for (let view of this.savedViews) {
+        storeData.savedViews[view.id.toString()] = {
+          id: view.id,
+          name: view.name,
+          show_on_dashboard: view.show_on_dashboard,
+          show_in_sidebar: view.show_in_sidebar,
+        }
+        this.savedViewGroup.addControl(
+          view.id.toString(),
+          new FormGroup({
+            id: new FormControl(null),
+            name: new FormControl(null),
+            show_on_dashboard: new FormControl(null),
+            show_in_sidebar: new FormControl(null),
+          })
+        )
       }
-      this.savedViewGroup.addControl(
-        view.id.toString(),
-        new FormGroup({
-          id: new FormControl(null),
-          name: new FormControl(null),
-          show_on_dashboard: new FormControl(null),
-          show_in_sidebar: new FormControl(null),
-        })
-      )
     }
 
     this.store = new BehaviorSubject(storeData)