diff --git a/src-ui/src/app/components/admin/settings/settings.component.html b/src-ui/src/app/components/admin/settings/settings.component.html index 305bb8a96..b520e8218 100644 --- a/src-ui/src/app/components/admin/settings/settings.component.html +++ b/src-ui/src/app/components/admin/settings/settings.component.html @@ -112,6 +112,22 @@ +

Sidebar items to show:

+ @for (option of sidebarItemOptions; track option.id) { +
+ + +
+ } + diff --git a/src-ui/src/app/components/admin/settings/settings.component.spec.ts b/src-ui/src/app/components/admin/settings/settings.component.spec.ts index 7b65281d0..71889e74b 100644 --- a/src-ui/src/app/components/admin/settings/settings.component.spec.ts +++ b/src-ui/src/app/components/admin/settings/settings.component.spec.ts @@ -24,7 +24,7 @@ import { SystemStatus, SystemStatusItemStatus, } from 'src/app/data/system-status' -import { SETTINGS_KEYS } from 'src/app/data/ui-settings' +import { HideableSidebarItemID, SETTINGS_KEYS } from 'src/app/data/ui-settings' import { IfOwnerDirective } from 'src/app/directives/if-owner.directive' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { PermissionsGuard } from 'src/app/guards/permissions.guard' @@ -209,6 +209,45 @@ describe('SettingsComponent', () => { fixture.detectChanges() } + it('supports configuring sidebar items and canceling changes', () => { + completeSetup() + + component.toggleSidebarItem(HideableSidebarItemID.Workflows, false) + fixture.detectChanges() + + expect(component.settingsForm.value.sidebarHiddenItems).toContain( + HideableSidebarItemID.Workflows + ) + + settingsService.updateSidebarItemVisibility( + HideableSidebarItemID.Mail, + false + ) + + expect(component.settingsForm.value.sidebarHiddenItems).toContain( + HideableSidebarItemID.Mail + ) + + component.reset() + + expect(component.settingsForm.value.sidebarHiddenItems).not.toContain( + HideableSidebarItemID.Workflows + ) + expect(component.settingsForm.value.sidebarHiddenItems).not.toContain( + HideableSidebarItemID.Mail + ) + }) + + it('enables sidebar item controls on general settings until destroyed', () => { + completeSetup() + + expect(settingsService.organizingSidebarItems()).toBe(true) + + component.ngOnDestroy() + + expect(settingsService.organizingSidebarItems()).toBe(false) + }) + it('should support tabbed settings & change URL, prevent navigation if dirty confirmation rejected', async () => { completeSetup() const navigateSpy = jest.spyOn(router, 'navigate') @@ -249,6 +288,7 @@ describe('SettingsComponent', () => { it('should support save local settings updating appearance settings and calling API, show error', () => { completeSetup() + component.toggleSidebarItem(HideableSidebarItemID.Workflows, false) const toastErrorSpy = jest.spyOn(toastService, 'showError') const toastSpy = jest.spyOn(toastService, 'show') const storeSpy = jest.spyOn(settingsService, 'storeSettings') @@ -267,7 +307,10 @@ describe('SettingsComponent', () => { expect(toastErrorSpy).toHaveBeenCalled() expect(storeSpy).toHaveBeenCalled() expect(appearanceSettingsSpy).not.toHaveBeenCalled() - expect(setSpy).toHaveBeenCalledTimes(33) + expect(setSpy).toHaveBeenCalledTimes(34) + expect(setSpy).toHaveBeenCalledWith(SETTINGS_KEYS.SIDEBAR_HIDDEN_ITEMS, [ + HideableSidebarItemID.Workflows, + ]) // succeed storeSpy.mockReturnValueOnce(of(true)) diff --git a/src-ui/src/app/components/admin/settings/settings.component.ts b/src-ui/src/app/components/admin/settings/settings.component.ts index 218f6683c..9076d2a3e 100644 --- a/src-ui/src/app/components/admin/settings/settings.component.ts +++ b/src-ui/src/app/components/admin/settings/settings.component.ts @@ -39,7 +39,12 @@ import { SystemStatus, SystemStatusItemStatus, } from 'src/app/data/system-status' -import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings' +import { + GlobalSearchType, + HIDEABLE_SIDEBAR_ITEM_IDS, + HideableSidebarItemID, + SETTINGS_KEYS, +} from 'src/app/data/ui-settings' import { User } from 'src/app/data/user' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe' @@ -102,6 +107,14 @@ const documentDetailFieldOptions = [ { id: DocumentDetailFieldID.Tags, label: $localize`Tags` }, ] +const sidebarItemLabels: Record = { + [HideableSidebarItemID.Dashboard]: $localize`Dashboard`, + [HideableSidebarItemID.SavedViews]: $localize`Saved Views`, + [HideableSidebarItemID.Workflows]: $localize`Workflows`, + [HideableSidebarItemID.Mail]: $localize`Mail`, + [HideableSidebarItemID.Documentation]: $localize`Documentation`, +} + @Component({ selector: 'pngx-settings', templateUrl: './settings.component.html', @@ -149,6 +162,7 @@ export class SettingsComponent bulkEditApplyOnClose: new FormControl(null), documentListItemPerPage: new FormControl(null), slimSidebarEnabled: new FormControl(null), + sidebarHiddenItems: new FormControl([]), darkModeUseSystem: new FormControl(null), darkModeEnabled: new FormControl(null), darkModeInvertThumbs: new FormControl(null), @@ -186,6 +200,7 @@ export class SettingsComponent store: BehaviorSubject storeSub: Subscription + sidebarItemsSub: Subscription isDirty$: Observable isDirty: boolean = false unsubscribeNotifier: Subject = new Subject() @@ -203,6 +218,10 @@ export class SettingsComponent public readonly PdfEditorEditMode = PdfEditorEditMode public readonly documentDetailFieldOptions = documentDetailFieldOptions + public readonly sidebarItemOptions = HIDEABLE_SIDEBAR_ITEM_IDS.map((id) => ({ + id, + label: sidebarItemLabels[id], + })) get systemStatusHasErrors(): boolean { const status = this.systemStatus() @@ -230,6 +249,10 @@ export class SettingsComponent constructor() { super() + this.sidebarItemsSub = + this.settings.sidebarHiddenItemsEditingChanged.subscribe((hiddenItems) => + this.settingsForm.controls.sidebarHiddenItems.setValue(hiddenItems) + ) this.settings.settingsSaved.subscribe(() => { if (!this.savePending) this.initialize() this.savedViewsService.maybeRefreshDocumentCounts() @@ -279,14 +302,21 @@ export class SettingsComponent this.activatedRoute.paramMap.subscribe((paramMap) => { const section = paramMap.get('section') + let navID = SettingsNavIDs.General if (section) { const navIDKey: string = Object.keys(SettingsNavIDs).find( (navID) => navID.toLowerCase() == section ) if (navIDKey) { - this.activeNavID.set(SettingsNavIDs[navIDKey]) + navID = SettingsNavIDs[navIDKey] } } + this.activeNavID.set(navID) + this.settings.sidebarHiddenItemsEditing.set( + navID === SettingsNavIDs.General + ? [...this.settingsForm.controls.sidebarHiddenItems.value] + : null + ) }) } @@ -310,6 +340,7 @@ export class SettingsComponent SETTINGS_KEYS.DOCUMENT_LIST_SIZE ), slimSidebarEnabled: this.settings.get(SETTINGS_KEYS.SLIM_SIDEBAR), + sidebarHiddenItems: this.settings.get(SETTINGS_KEYS.SIDEBAR_HIDDEN_ITEMS), darkModeUseSystem: this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM), darkModeEnabled: this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED), darkModeInvertThumbs: this.settings.get( @@ -436,6 +467,12 @@ export class SettingsComponent this.settingsForm.patchValue(currentFormValue) } + if (this.settings.organizingSidebarItems()) { + this.settings.sidebarHiddenItemsEditing.set([ + ...this.settingsForm.controls.sidebarHiddenItems.value, + ]) + } + if (this.canViewSystemStatus) { this.systemStatusService.get().subscribe((status) => { this.systemStatus.set(status) @@ -444,8 +481,18 @@ export class SettingsComponent } ngOnDestroy() { + this.settings.sidebarHiddenItemsEditing.set(null) if (this.isDirty) this.settings.updateAppearanceSettings() // in case user changed appearance but didn't save this.storeSub && this.storeSub.unsubscribe() + this.sidebarItemsSub.unsubscribe() + } + + isSidebarItemShown(item: HideableSidebarItemID): boolean { + return !(this.settingsForm.value.sidebarHiddenItems || []).includes(item) + } + + toggleSidebarItem(item: HideableSidebarItemID, checked: boolean): void { + this.settings.updateSidebarItemVisibility(item, checked) } public saveSettings() { @@ -473,6 +520,10 @@ export class SettingsComponent SETTINGS_KEYS.SLIM_SIDEBAR, this.settingsForm.value.slimSidebarEnabled ) + this.settings.set( + SETTINGS_KEYS.SIDEBAR_HIDDEN_ITEMS, + this.settingsForm.value.sidebarHiddenItems + ) this.settings.set( SETTINGS_KEYS.DARK_MODE_USE_SYSTEM, this.settingsForm.value.darkModeUseSystem @@ -632,6 +683,11 @@ export class SettingsComponent reset() { this.settingsForm.patchValue(this.store.getValue()) + if (this.settings.organizingSidebarItems()) { + this.settings.sidebarHiddenItemsEditing.set([ + ...this.settingsForm.controls.sidebarHiddenItems.value, + ]) + } } clearThemeColor() { diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html index 6faddbb8a..a8dd12d34 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.html +++ b/src-ui/src/app/components/app-frame/app-frame.component.html @@ -86,12 +86,15 @@ }
    -
  • - + Dashboard + @if (settingsService.organizingSidebarItems()) { + + }
    • } -
  • - + Saved Views + @if (settingsService.organizingSidebarItems()) { + + }
    • -
  • - Workflows + @if (settingsService.organizingSidebarItems()) { + + }
    • -
  • - Mail + @if (settingsService.organizingSidebarItems()) { + + }
    • } -
  • - + Documentation + @if (settingsService.organizingSidebarItems()) { + + }
  • diff --git a/src-ui/src/app/components/app-frame/app-frame.component.spec.ts b/src-ui/src/app/components/app-frame/app-frame.component.spec.ts index d9b1acda4..4dd88c84d 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.spec.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.spec.ts @@ -15,7 +15,7 @@ import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap' import { of, throwError } from 'rxjs' import { routes } from 'src/app/app-routing.module' import { SavedView } from 'src/app/data/saved-view' -import { SETTINGS_KEYS } from 'src/app/data/ui-settings' +import { HideableSidebarItemID, SETTINGS_KEYS } from 'src/app/data/ui-settings' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { PermissionsGuard } from 'src/app/guards/permissions.guard' import { @@ -287,6 +287,82 @@ describe('AppFrameComponent', () => { jest.useRealTimers() }) + it('should hide configured sidebar items', () => { + settingsService.set(SETTINGS_KEYS.SIDEBAR_HIDDEN_ITEMS, [ + HideableSidebarItemID.Dashboard, + HideableSidebarItemID.Workflows, + ]) + fixture.detectChanges() + + expect( + fixture.nativeElement.querySelector('[routerLink="dashboard"]') + .parentElement.classList + ).toContain('d-none') + expect( + fixture.nativeElement.querySelector('[routerLink="workflows"]') + .parentElement.classList + ).toContain('d-none') + expect( + fixture.nativeElement.querySelector('[routerLink="mail"]').parentElement + .classList + ).not.toContain('d-none') + }) + + it('should show hidden items and visibility switches while customizing', () => { + settingsService.set(SETTINGS_KEYS.SIDEBAR_HIDDEN_ITEMS, [ + HideableSidebarItemID.Dashboard, + ]) + settingsService.sidebarHiddenItemsEditing.set([ + HideableSidebarItemID.Dashboard, + ]) + fixture.detectChanges() + + expect( + fixture.nativeElement.querySelectorAll('pngx-input-switch').length + ).toBe(5) + expect( + fixture.nativeElement.querySelector('[routerLink="dashboard"]') + .parentElement.classList + ).not.toContain('d-none') + expect( + fixture.nativeElement.querySelector('[routerLink="dashboard"]').classList + ).toContain('opacity-50') + + settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, true) + fixture.detectChanges() + + expect( + Array.from( + fixture.nativeElement.querySelectorAll('pngx-input-switch') + ).every((toggle: HTMLElement) => toggle.classList.contains('d-none')) + ).toBe(true) + expect( + fixture.nativeElement.querySelector('[routerLink="dashboard"]').classList + ).not.toContain('pe-5') + + settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, false) + component.slimSidebarAnimating.set(true) + fixture.detectChanges() + + expect( + Array.from( + fixture.nativeElement.querySelectorAll('pngx-input-switch') + ).every((toggle: HTMLElement) => toggle.classList.contains('d-none')) + ).toBe(true) + + component.slimSidebarAnimating.set(false) + fixture.detectChanges() + + expect( + Array.from( + fixture.nativeElement.querySelectorAll('pngx-input-switch') + ).every((toggle: HTMLElement) => !toggle.classList.contains('d-none')) + ).toBe(true) + expect( + fixture.nativeElement.querySelector('[routerLink="dashboard"]').classList + ).toContain('pe-5') + }) + it('should show error on toggle slim sidebar if store settings fails', () => { jest.spyOn(console, 'warn').mockImplementation(() => {}) const toastSpy = jest.spyOn(toastService, 'showError') diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts index 59a2ba18b..7b4c29d2f 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.ts @@ -7,6 +7,7 @@ import { } from '@angular/cdk/drag-drop' import { NgClass } from '@angular/common' import { Component, HostListener, inject, OnInit, signal } from '@angular/core' +import { FormsModule } from '@angular/forms' import { ActivatedRoute, Router, RouterModule } from '@angular/router' import { NgbCollapseModule, @@ -21,7 +22,11 @@ import { Observable } from 'rxjs' import { first } from 'rxjs/operators' import { Document } from 'src/app/data/document' import { SavedView } from 'src/app/data/saved-view' -import { CollapsibleSection, SETTINGS_KEYS } from 'src/app/data/ui-settings' +import { + CollapsibleSection, + HideableSidebarItemID, + SETTINGS_KEYS, +} from 'src/app/data/ui-settings' import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive' import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard' import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe' @@ -48,6 +53,7 @@ import { ChatComponent } from '../chat/chat/chat.component' import { BrandMarkComponent } from '../common/logo/brand-mark/brand-mark.component' import { LogoComponent } from '../common/logo/logo.component' import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component' +import { SwitchComponent } from '../common/input/switch/switch.component' import { DocumentDetailComponent } from '../document-detail/document-detail.component' import { ComponentWithPermissions } from '../with-permissions/with-permissions.component' import { GlobalSearchComponent } from './global-search/global-search.component' @@ -76,6 +82,8 @@ const SCROLL_THRESHOLD = 16 NgxBootstrapIconsModule, DragDropModule, TourNgBootstrap, + FormsModule, + SwitchComponent, ], }) export class AppFrameComponent @@ -98,6 +106,7 @@ export class AppFrameComponent readonly isMenuCollapsed = signal(true) readonly slimSidebarAnimating = signal(false) readonly mobileSearchHidden = signal(false) + readonly HideableSidebarItemID = HideableSidebarItemID private readonly versionSetting = this.settingsService.getSignal( SETTINGS_KEYS.VERSION ) @@ -195,6 +204,10 @@ export class AppFrameComponent }, 200) // slightly longer than css animation for slim sidebar } + toggleSidebarItem(item: HideableSidebarItemID, visible: boolean): void { + this.settingsService.updateSidebarItemVisibility(item, visible) + } + toggleAttributesSections(event?: Event): void { event?.preventDefault() event?.stopPropagation() diff --git a/src-ui/src/app/components/common/input/switch/switch.component.html b/src-ui/src/app/components/common/input/switch/switch.component.html index edd831e5c..636356d64 100644 --- a/src-ui/src/app/components/common/input/switch/switch.component.html +++ b/src-ui/src/app/components/common/input/switch/switch.component.html @@ -1,6 +1,6 @@ -
    -
    - @if (!horizontal) { +
    +
    + @if (!horizontal && !compact) {