From bcc478e72bdbd43d7ec3040badb249f90a2689e6 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Fri, 23 Sep 2022 14:58:25 +0300 Subject: [PATCH] RED-5228: add auto expand filters on action setting --- .../modules/account/account-routing.module.ts | 15 +++++++ .../account-side-nav.component.ts | 4 ++ .../src/app/modules/account/account.module.ts | 3 +- .../preferences/preferences.component.html | 17 ++++++++ .../preferences/preferences.component.scss | 0 .../preferences/preferences.component.ts | 40 +++++++++++++++++++ .../user-profile-screen.component.ts | 16 ++++---- .../file-preview-screen.component.ts | 2 +- .../app/translations/account-translations.ts | 1 + .../src/app/users/user-preference.service.ts | 10 +++++ apps/red-ui/src/assets/i18n/de.json | 10 +++++ apps/red-ui/src/assets/i18n/en.json | 10 +++++ libs/common-ui | 2 +- 13 files changed, 119 insertions(+), 11 deletions(-) create mode 100644 apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.html create mode 100644 apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.scss create mode 100644 apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts diff --git a/apps/red-ui/src/app/modules/account/account-routing.module.ts b/apps/red-ui/src/app/modules/account/account-routing.module.ts index 3afb6b6e4..2889feb73 100644 --- a/apps/red-ui/src/app/modules/account/account-routing.module.ts +++ b/apps/red-ui/src/app/modules/account/account-routing.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; import { CompositeRouteGuard, IqserAuthGuard } from '@iqser/common-ui'; import { RedRoleGuard } from '@users/red-role.guard'; import { BaseAccountScreenComponent } from './base-account-screen/base-account-screen-component'; +import { PreferencesComponent } from './screens/preferences/preferences.component'; const routes: Routes = [ { path: '', redirectTo: 'user-profile', pathMatch: 'full' }, @@ -25,6 +26,20 @@ const routes: Routes = [ }, loadChildren: () => import('./screens/notifications/notifications.module').then(m => m.NotificationsModule), }, + { + path: 'preferences', + component: BaseAccountScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [IqserAuthGuard, RedRoleGuard], + }, + children: [ + { + path: '', + component: PreferencesComponent, + }, + ], + }, ]; @NgModule({ diff --git a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts index ffbd2978f..dff976f63 100644 --- a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts +++ b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts @@ -25,6 +25,10 @@ export class AccountSideNavComponent { label: _('notifications.label'), hideIf: !this._userService.currentUser.isUser, }, + { + screen: 'preferences', + label: _('preferences-screen.label'), + }, ]; constructor(private readonly _userService: UserService) {} diff --git a/apps/red-ui/src/app/modules/account/account.module.ts b/apps/red-ui/src/app/modules/account/account.module.ts index ea692b816..df77271c3 100644 --- a/apps/red-ui/src/app/modules/account/account.module.ts +++ b/apps/red-ui/src/app/modules/account/account.module.ts @@ -8,9 +8,10 @@ import { NotificationPreferencesService } from './services/notification-preferen import { TranslateModule } from '@ngx-translate/core'; import { IqserSharedModule } from '@iqser/common-ui'; import { IqserHelpModeModule } from '@iqser/common-ui'; +import { PreferencesComponent } from './screens/preferences/preferences.component'; @NgModule({ - declarations: [AccountSideNavComponent, BaseAccountScreenComponent], + declarations: [AccountSideNavComponent, BaseAccountScreenComponent, PreferencesComponent], imports: [CommonModule, SharedModule, AccountRoutingModule, TranslateModule, IqserSharedModule, IqserHelpModeModule], providers: [NotificationPreferencesService], }) diff --git a/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.html b/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.html new file mode 100644 index 000000000..93e976b9e --- /dev/null +++ b/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.html @@ -0,0 +1,17 @@ +
+
+
+
+ + {{ 'preferences-screen.form.auto-expand-filters-on-action' | translate }} + +
+
+
+ +
+ +
+
diff --git a/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.scss b/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts b/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts new file mode 100644 index 000000000..f5b74db0e --- /dev/null +++ b/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts @@ -0,0 +1,40 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { UserPreferenceService } from '@users/user-preference.service'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; +import { BaseFormComponent } from '@iqser/common-ui'; + +interface PreferencesForm { + autoExpandFiltersOnActions: boolean; + + [k: string]: any; +} + +type AsControl = { [K in keyof T]: FormControl }; + +@Component({ + selector: 'redaction-preferences', + templateUrl: './preferences.component.html', + styleUrls: ['./preferences.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class PreferencesComponent extends BaseFormComponent { + readonly form: FormGroup>; + initialFormValue: PreferencesForm; + + constructor(readonly userPreferenceService: UserPreferenceService, private readonly _formBuilder: FormBuilder) { + super(); + this.form = this._formBuilder.group({ + autoExpandFiltersOnActions: [this.userPreferenceService.getAutoExpandFiltersOnActions()], + }); + this.initialFormValue = this.form.getRawValue(); + } + + async save(): Promise { + if (this.form.controls.autoExpandFiltersOnActions.value !== this.userPreferenceService.getAutoExpandFiltersOnActions()) { + await this.userPreferenceService.toggleAutoExpandFiltersOnActions(); + } + await this.userPreferenceService.reload(); + this.form.patchValue({ autoExpandFiltersOnActions: this.userPreferenceService.getAutoExpandFiltersOnActions() }); + this.initialFormValue = this.form.getRawValue(); + } +} diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts index 7e20a3d37..bcf8aa812 100644 --- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts @@ -101,10 +101,10 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI private _getForm(): UntypedFormGroup { return this._formBuilder.group({ - email: [undefined, [Validators.required, Validators.email]], - firstName: [undefined], - lastName: [undefined], - language: [undefined], + email: ['', [Validators.required, Validators.email]], + firstName: [''], + lastName: [''], + language: [''], darkTheme: [false], }); } @@ -113,10 +113,10 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI try { this.form = this._getForm(); this.#profileModel = { - email: this._userService.currentUser.email, - firstName: this._userService.currentUser.firstName, - lastName: this._userService.currentUser.lastName, - language: this._languageService.currentLanguage, + email: this._userService.currentUser.email ?? '', + firstName: this._userService.currentUser.firstName ?? '', + lastName: this._userService.currentUser.lastName ?? '', + language: this._languageService.currentLanguage ?? '', darkTheme: this._userPreferenceService.getTheme() === 'dark', }; if (this._userService.currentUser.email) { diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts index e21d93713..04d63d286 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts @@ -676,7 +676,7 @@ export class FilePreviewScreenComponent const secondaryFilters = this._filterService.getGroup('secondaryFilters').filters; const hasAnyFilterSet = [...primaryFilters, ...secondaryFilters].some(f => f.checked || f.indeterminate); - if (!hasAnyFilterSet) { + if (!hasAnyFilterSet || !this.userPreferenceService.getAutoExpandFiltersOnActions()) { return; } diff --git a/apps/red-ui/src/app/translations/account-translations.ts b/apps/red-ui/src/app/translations/account-translations.ts index ecd67aa2b..88b9efac4 100644 --- a/apps/red-ui/src/app/translations/account-translations.ts +++ b/apps/red-ui/src/app/translations/account-translations.ts @@ -3,4 +3,5 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; export const accountTranslations: Record = { notifications: _('notifications-screen.title'), 'user-profile': _('user-profile-screen.title'), + preferences: _('preferences-screen.title'), }; diff --git a/apps/red-ui/src/app/users/user-preference.service.ts b/apps/red-ui/src/app/users/user-preference.service.ts index 2f0971551..b2e142e9b 100644 --- a/apps/red-ui/src/app/users/user-preference.service.ts +++ b/apps/red-ui/src/app/users/user-preference.service.ts @@ -6,6 +6,7 @@ const KEYS = { filePreviewTooltips: 'File-Preview-Tooltips', lastDossierTemplate: 'Last-Dossier-Template', filesListingMode: 'Files-Listing-Mode', + autoExpandFiltersOnActions: 'Auto-Expand-Filters-On-Actions', } as const; @Injectable({ @@ -40,6 +41,15 @@ export class UserPreferenceService extends IqserUserPreferenceService { await this._save(KEYS.filePreviewTooltips, nextValue); } + getAutoExpandFiltersOnActions(): boolean { + return this._getAttribute(KEYS.autoExpandFiltersOnActions, 'false') === 'true'; + } + + async toggleAutoExpandFiltersOnActions(): Promise { + const nextValue = (!this.getAutoExpandFiltersOnActions()).toString(); + await this._save(KEYS.autoExpandFiltersOnActions, nextValue); + } + getFilesListingMode(): ListingMode { return this._getAttribute(KEYS.filesListingMode) as ListingMode; } diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index f4c474c8d..961686495 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -1785,6 +1785,16 @@ "title": "" } }, + "preferences-screen": { + "actions": { + "save": "" + }, + "form": { + "auto-expand-filters-on-action": "" + }, + "label": "", + "title": "" + }, "processing-status": { "ocr": "", "pending": "", diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index b66a6dfc0..b933f5ae4 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -1785,6 +1785,16 @@ "title": "{length} {length, plural, one{Permission} other{Permissions}}" } }, + "preferences-screen": { + "actions": { + "save": "Save changes" + }, + "form": { + "auto-expand-filters-on-action": "Auto expand filters on action" + }, + "label": "Preferences", + "title": "Edit preferences" + }, "processing-status": { "ocr": "OCR", "pending": "Pending", diff --git a/libs/common-ui b/libs/common-ui index 440b8e6b8..f65831525 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 440b8e6b829c099a499f4a80a4d6c27941178812 +Subproject commit f65831525473687990749eb5e6bf6bd17e744e87