dynamic loading of settings tab contents

This commit is contained in:
Michael Shamoon 2022-11-12 14:46:57 -08:00
parent 4333bd58cf
commit bf28a512c6
2 changed files with 54 additions and 24 deletions

View File

@ -5,8 +5,8 @@
<!-- <p>items per page, documents per view type</p> -->
<form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li [ngbNavItem]="1">
<ul ngbNav #nav="ngbNav" (navChange)="maybeInitializeTab($event)" [(activeId)]="activeNavID" class="nav-tabs">
<li [ngbNavItem]="SettingsNavIDs.General">
<a ngbNavLink i18n>General</a>
<ng-template ngbNavContent>
@ -162,7 +162,7 @@
</ng-template>
</li>
<li [ngbNavItem]="2">
<li [ngbNavItem]="SettingsNavIDs.Notifications">
<a ngbNavLink i18n>Notifications</a>
<ng-template ngbNavContent>
@ -180,7 +180,7 @@
</ng-template>
</li>
<li [ngbNavItem]="3">
<li [ngbNavItem]="SettingsNavIDs.SavedViews" (mouseover)="maybeInitializeTab(SettingsNavIDs.SavedViews)" (focusin)="maybeInitializeTab(SettingsNavIDs.SavedViews)">
<a ngbNavLink i18n>Saved views</a>
<ng-template ngbNavContent>
@ -210,7 +210,12 @@
</div>
</div>
<div *ngIf="savedViews.length == 0" i18n>No saved views defined.</div>
<div *ngIf="savedViews && savedViews.length == 0" i18n>No saved views defined.</div>
<div *ngIf="!savedViews">
<div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
<div class="visually-hidden" i18n>Loading...</div>
</div>
</div>

View File

@ -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)