RED-10139: other getters to computed.

This commit is contained in:
Nicoleta Panaghiu 2024-10-16 13:49:34 +03:00
parent f00a92a5ea
commit 57d3c008cc
8 changed files with 91 additions and 100 deletions

View File

@ -1,14 +1,15 @@
<iqser-side-nav [title]="'account-settings' | translate"> <iqser-side-nav [title]="'account-settings' | translate">
<ng-container *ngFor="let item of items"> @for (item of items; track item.helpModeKey) {
<div @if (item.show) {
*ngIf="item.show" <div
[routerLinkActiveOptions]="{ exact: false }" [routerLinkActiveOptions]="{ exact: false }"
[routerLink]="'../' + item.screen" [routerLink]="'../' + item.screen"
[attr.help-mode-key]="item.helpModeKey" [attr.help-mode-key]="item.helpModeKey"
class="item" class="item"
routerLinkActive="active" routerLinkActive="active"
> >
{{ item.label | translate }} {{ item.label | translate }}
</div> </div>
</ng-container> }
}
</iqser-side-nav> </iqser-side-nav>

View File

@ -6,7 +6,6 @@ import { User } from '@red/domain';
import { getCurrentUser } from '@iqser/common-ui/lib/users'; import { getCurrentUser } from '@iqser/common-ui/lib/users';
import { SideNavComponent } from '@common-ui/shared'; import { SideNavComponent } from '@common-ui/shared';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { NgForOf, NgIf } from '@angular/common';
import { RouterLink, RouterLinkActive } from '@angular/router'; import { RouterLink, RouterLinkActive } from '@angular/router';
interface NavItem { interface NavItem {
@ -22,7 +21,7 @@ interface NavItem {
styleUrls: ['./account-side-nav.component.scss'], styleUrls: ['./account-side-nav.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true, standalone: true,
imports: [SideNavComponent, TranslateModule, NgForOf, NgIf, RouterLinkActive, RouterLink], imports: [SideNavComponent, TranslateModule, RouterLinkActive, RouterLink],
}) })
export class AccountSideNavComponent { export class AccountSideNavComponent {
readonly currentUser = getCurrentUser<User>(); readonly currentUser = getCurrentUser<User>();

View File

@ -8,9 +8,11 @@
<div class="content-container full-height"> <div class="content-container full-height">
<div class="overlay-shadow"></div> <div class="overlay-shadow"></div>
<div [ngClass]="!isWarningsScreen && 'dialog'"> <div [ngClass]="!isWarningsScreen && 'dialog'">
<div *ngIf="!isWarningsScreen" class="dialog-header"> @if (!isWarningsScreen) {
<div class="heading-l" [translate]="translations[path]"></div> <div class="dialog-header">
</div> <div class="heading-l" [translate]="translations[path]"></div>
</div>
}
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

View File

@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, OnInit, ViewContainerRef } from '@angular/core'; import { ChangeDetectionStrategy, Component, OnInit, ViewContainerRef } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router'; import { Router, RouterOutlet } from '@angular/router';
import { accountTranslations } from '@translations/account-translations'; import { accountTranslations } from '@translations/account-translations';
import { NgClass, NgIf } from '@angular/common'; import { NgClass } from '@angular/common';
import { AccountSideNavComponent } from '../account-side-nav/account-side-nav.component'; import { AccountSideNavComponent } from '../account-side-nav/account-side-nav.component';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
@ -11,7 +11,7 @@ import { TranslateModule } from '@ngx-translate/core';
styleUrls: ['./base-account-screen-component.scss'], styleUrls: ['./base-account-screen-component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true, standalone: true,
imports: [NgClass, NgIf, RouterOutlet, AccountSideNavComponent, TranslateModule], imports: [NgClass, RouterOutlet, AccountSideNavComponent, TranslateModule],
}) })
export class BaseAccountScreenComponent implements OnInit { export class BaseAccountScreenComponent implements OnInit {
readonly translations = accountTranslations; readonly translations = accountTranslations;

View File

@ -1,6 +1,6 @@
<form (submit)="save()" [formGroup]="form"> <form (submit)="save()" [formGroup]="form">
<div class="dialog-content"> <div class="dialog-content">
<div *ngFor="let category of notificationCategories"> @for (category of notificationCategories; track category) {
<div class="iqser-input-group header w-full"> <div class="iqser-input-group header w-full">
<mat-slide-toggle color="primary" formControlName="{{ category }}Enabled" <mat-slide-toggle color="primary" formControlName="{{ category }}Enabled"
>{{ translations[category] | translate }} >{{ translations[category] | translate }}
@ -8,26 +8,31 @@
</div> </div>
<!-- TODO: This lots of getters--> <!-- TODO: This lots of getters-->
<div *ngIf="isCategoryActive(category)" class="options-content"> @if (isCategoryActive(category)) {
<div [translate]="'notifications-screen.options-title'" class="statement"></div> <div class="options-content">
<div [translate]="'notifications-screen.options-title'" class="statement"></div>
<div *ngFor="let key of notificationGroupsKeys; let i = index" class="group"> @for (key of notificationGroupsKeys; track key) {
<div [translate]="translations[key]" class="group-title"></div> <div class="group">
<div class="iqser-input-group"> <div [translate]="translations[key]" class="group-title"></div>
<ng-container *ngFor="let preference of getRssFilteredSettings(notificationGroupsValues[i])"> <div class="iqser-input-group">
<mat-checkbox @for (preference of getRssFilteredSettings(notificationGroupsValues[$index]); track preference) {
(change)="addRemovePreference($event.checked, category, preference)" @if (!skipPreference(preference)) {
*ngIf="!skipPreference(preference)" <mat-checkbox
[checked]="isPreferenceChecked(category, preference)" (change)="addRemovePreference($event.checked, category, preference)"
color="primary" [checked]="isPreferenceChecked(category, preference)"
> color="primary"
{{ translations[preference] | translate }} >
</mat-checkbox> {{ translations[preference] | translate }}
</ng-container> </mat-checkbox>
</div> }
}
</div>
</div>
}
</div> </div>
</div> }
</div> }
</div> </div>
<div class="dialog-actions"> <div class="dialog-actions">

View File

@ -14,7 +14,6 @@ import {
import { firstValueFrom } from 'rxjs'; import { firstValueFrom } from 'rxjs';
import { notificationsSettingsTranslations } from '@translations/notifications-settings-translations'; import { notificationsSettingsTranslations } from '@translations/notifications-settings-translations';
import { getCurrentUser } from '@iqser/common-ui/lib/users'; import { getCurrentUser } from '@iqser/common-ui/lib/users';
import { NgForOf, NgIf } from '@angular/common';
import { MatSlideToggle } from '@angular/material/slide-toggle'; import { MatSlideToggle } from '@angular/material/slide-toggle';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { MatCheckbox } from '@angular/material/checkbox'; import { MatCheckbox } from '@angular/material/checkbox';
@ -26,7 +25,7 @@ const RSS_EXCLUDED_SETTINGS = ['USER_PROMOTED_TO_APPROVER', 'USER_DEGRADED_TO_RE
styleUrls: ['./notifications-screen.component.scss'], styleUrls: ['./notifications-screen.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true, standalone: true,
imports: [ReactiveFormsModule, NgForOf, MatSlideToggle, TranslateModule, NgIf, MatCheckbox, IconButtonComponent], imports: [ReactiveFormsModule, MatSlideToggle, TranslateModule, MatCheckbox, IconButtonComponent],
}) })
export class NotificationsScreenComponent extends BaseFormComponent implements OnInit { export class NotificationsScreenComponent extends BaseFormComponent implements OnInit {
readonly #toaster = inject(Toaster); readonly #toaster = inject(Toaster);

View File

@ -12,7 +12,7 @@
}}</mat-option> }}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionAddRedaction" formControlName="addRedactionApplyToAll">{{ <mat-checkbox *ngIf="displayExtraOptionAddRedaction()" formControlName="addRedactionApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate 'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox> }}</mat-checkbox>
</div> </div>
@ -25,7 +25,7 @@
}}</mat-option> }}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionRemoveRedaction" formControlName="removeRedactionApplyToAll">{{ <mat-checkbox *ngIf="displayExtraOptionRemoveRedaction()" formControlName="removeRedactionApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate 'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox> }}</mat-checkbox>
</div> </div>
@ -39,7 +39,7 @@
}}</mat-option> }}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionRemoveRecommendation" formControlName="removeRecommendationApplyToAll">{{ <mat-checkbox *ngIf="displayExtraOptionRemoveRecommendation()" formControlName="removeRecommendationApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate 'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox> }}</mat-checkbox>
</div> </div>
@ -51,7 +51,7 @@
<mat-option *ngFor="let option of hintAddOptions" [value]="option.value">{{ option.label | translate }}</mat-option> <mat-option *ngFor="let option of hintAddOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionAddHint" formControlName="addHintApplyToAll">{{ <mat-checkbox *ngIf="displayExtraOptionAddHint()" formControlName="addHintApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate 'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox> }}</mat-checkbox>
</div> </div>
@ -62,7 +62,7 @@
<mat-option *ngFor="let option of removeOptions" [value]="option.value">{{ option.label | translate }}</mat-option> <mat-option *ngFor="let option of removeOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-checkbox *ngIf="displayExtraOptionRemoveHint" formControlName="removeHintApplyToAll">{{ <mat-checkbox *ngIf="displayExtraOptionRemoveHint()" formControlName="removeHintApplyToAll">{{
'dialog-defaults-form.extra-option-label' | translate 'dialog-defaults-form.extra-option-label' | translate
}}</mat-checkbox> }}</mat-checkbox>
</div> </div>

View File

@ -1,11 +1,11 @@
import { NgForOf, NgIf } from '@angular/common'; import { NgForOf, NgIf } from '@angular/common';
import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { ChangeDetectorRef, Component, computed, inject } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatCheckbox } from '@angular/material/checkbox'; import { MatCheckbox } from '@angular/material/checkbox';
import { MatFormField } from '@angular/material/form-field'; import { MatFormField } from '@angular/material/form-field';
import { MatOption, MatSelect } from '@angular/material/select'; import { MatOption, MatSelect } from '@angular/material/select';
import { BaseFormComponent } from '@common-ui/form'; import { BaseFormComponent } from '@common-ui/form';
import { AsControl } from '@common-ui/utils'; import { AsControl, formValueToSignal } from '@common-ui/utils';
import { IconButtonComponent } from '@iqser/common-ui'; import { IconButtonComponent } from '@iqser/common-ui';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.service'; import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.service';
@ -48,57 +48,53 @@ export class DialogDefaultsComponent extends BaseFormComponent {
readonly #formBuilder = inject(FormBuilder); readonly #formBuilder = inject(FormBuilder);
readonly #userPreferences = inject(UserPreferenceService); readonly #userPreferences = inject(UserPreferenceService);
readonly #changeDetectorRef = inject(ChangeDetectorRef); readonly #changeDetectorRef = inject(ChangeDetectorRef);
form: FormGroup<AsControl<DefaultOptionsForm>> = this.#formBuilder.group({
addRedaction: this.#userPreferences.getAddRedactionDefaultOption(),
addHint: this.#userPreferences.getAddHintDefaultOption(),
removeRedaction: this.#userPreferences.getRemoveRedactionDefaultOption(),
removeRecommendation: this.#userPreferences.getRemoveRecommendationDefaultOption(),
removeHint: this.#userPreferences.getRemoveHintDefaultOption(),
addRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addRedactionDefaultExtraOption),
removeRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRedactionDefaultExtraOption),
removeRecommendationApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRecommendationDefaultExtraOption),
addHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addHintDefaultExtraOption),
removeHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeHintDefaultExtraOption),
});
initialFormValue = this.form.getRawValue();
readonly redactionAddOptions = redactionAddOptions; readonly redactionAddOptions = redactionAddOptions;
readonly hintAddOptions = hintAddOptions; readonly hintAddOptions = hintAddOptions;
readonly removeOptions = removeOptions; readonly removeOptions = removeOptions;
readonly redactionRemoveOptions = redactionRemoveOptions; readonly redactionRemoveOptions = redactionRemoveOptions;
readonly recommendationRemoveOptions = recommendationRemoveOptions; readonly recommendationRemoveOptions = recommendationRemoveOptions;
constructor() { form: FormGroup<AsControl<DefaultOptionsForm>> = this.#formBuilder.group(this.#initialFormValue);
super(); initialFormValue = this.form.getRawValue();
}
get displayExtraOptionAddRedaction() { readonly formToSignalMap = {
return RedactOrHintOptions.IN_DOSSIER === this.form.controls.addRedaction.value; addRedaction: formValueToSignal<DefaultOptionsForm['addRedaction']>(this.form.controls.addRedaction),
} addHint: formValueToSignal<DefaultOptionsForm['addHint']>(this.form.controls.addHint),
removeRedaction: formValueToSignal<DefaultOptionsForm['removeRedaction']>(this.form.controls.removeRedaction),
removeHint: formValueToSignal<DefaultOptionsForm['removeHint']>(this.form.controls.removeHint),
removeRecommendation: formValueToSignal<DefaultOptionsForm['removeRecommendation']>(this.form.controls.removeRecommendation),
};
get displayExtraOptionAddHint() { readonly displayExtraOptionAddRedaction = computed(() => RedactOrHintOptions.IN_DOSSIER === this.formToSignalMap['addRedaction']());
return RedactOrHintOptions.IN_DOSSIER === this.form.controls.addHint.value; readonly displayExtraOptionAddHint = computed(() => RedactOrHintOptions.IN_DOSSIER === this.formToSignalMap['addHint']());
} readonly displayExtraOptionRemoveRedaction = computed(() =>
(
get displayExtraOptionRemoveRedaction() {
return (
[RemoveRedactionOptions.IN_DOSSIER, RemoveRedactionOptions.FALSE_POSITIVE] as Partial< [RemoveRedactionOptions.IN_DOSSIER, RemoveRedactionOptions.FALSE_POSITIVE] as Partial<
RemoveRedactionOption | SystemDefaultType RemoveRedactionOption | SystemDefaultType
>[] >[]
).includes(this.form.controls.removeRedaction.value); ).includes(this.formToSignalMap['removeRedaction']()),
} );
readonly displayExtraOptionRemoveHint = computed(() => RemoveRedactionOptions.IN_DOSSIER === this.formToSignalMap['removeHint']());
readonly displayExtraOptionRemoveRecommendation = computed(
() => RemoveRedactionOptions.DO_NOT_RECOMMEND === this.formToSignalMap['removeRecommendation'](),
);
get displayExtraOptionRemoveHint() { get #initialFormValue() {
return RemoveRedactionOptions.IN_DOSSIER === this.form.controls.removeHint.value; return {
} addRedaction: this.#userPreferences.getAddRedactionDefaultOption(),
addHint: this.#userPreferences.getAddHintDefaultOption(),
get displayExtraOptionRemoveRecommendation() { removeRedaction: this.#userPreferences.getRemoveRedactionDefaultOption(),
return RemoveRedactionOptions.DO_NOT_RECOMMEND === this.form.controls.removeRecommendation.value; removeRecommendation: this.#userPreferences.getRemoveRecommendationDefaultOption(),
removeHint: this.#userPreferences.getRemoveHintDefaultOption(),
addRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addRedactionDefaultExtraOption),
removeRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRedactionDefaultExtraOption),
removeRecommendationApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRecommendationDefaultExtraOption),
addHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addHintDefaultExtraOption),
removeHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeHintDefaultExtraOption),
} as DefaultOptionsForm;
} }
async save(): Promise<any> { async save(): Promise<any> {
const formValue = this.form.value;
if (this.initialFormValue.addRedaction !== this.form.controls.addRedaction.value) { if (this.initialFormValue.addRedaction !== this.form.controls.addRedaction.value) {
await this.#userPreferences.saveAddRedactionDefaultOption(this.form.controls.addRedaction.value); await this.#userPreferences.saveAddRedactionDefaultOption(this.form.controls.addRedaction.value);
} }
@ -115,7 +111,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
await this.#userPreferences.saveRemoveHintDefaultOption(this.form.controls.removeHint.value); await this.#userPreferences.saveRemoveHintDefaultOption(this.form.controls.removeHint.value);
} }
if (this.displayExtraOptionAddRedaction) { if (this.displayExtraOptionAddRedaction()) {
if (this.initialFormValue.addRedactionApplyToAll !== this.form.controls.addRedactionApplyToAll.value) { if (this.initialFormValue.addRedactionApplyToAll !== this.form.controls.addRedactionApplyToAll.value) {
await this.#userPreferences.saveAddRedactionDefaultExtraOption(this.form.controls.addRedactionApplyToAll.value); await this.#userPreferences.saveAddRedactionDefaultExtraOption(this.form.controls.addRedactionApplyToAll.value);
} }
@ -123,7 +119,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
await this.#userPreferences.saveAddRedactionDefaultExtraOption('undefined'); await this.#userPreferences.saveAddRedactionDefaultExtraOption('undefined');
} }
if (this.displayExtraOptionAddHint) { if (this.displayExtraOptionAddHint()) {
if (this.initialFormValue.addHintApplyToAll !== this.form.controls.addHintApplyToAll.value) { if (this.initialFormValue.addHintApplyToAll !== this.form.controls.addHintApplyToAll.value) {
await this.#userPreferences.saveAddHintDefaultExtraOption(this.form.controls.addHintApplyToAll.value); await this.#userPreferences.saveAddHintDefaultExtraOption(this.form.controls.addHintApplyToAll.value);
} }
@ -131,7 +127,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
await this.#userPreferences.saveAddHintDefaultExtraOption('undefined'); await this.#userPreferences.saveAddHintDefaultExtraOption('undefined');
} }
if (this.displayExtraOptionRemoveRedaction) { if (this.displayExtraOptionRemoveRedaction()) {
if (this.initialFormValue.removeRedactionApplyToAll !== this.form.controls.removeRedactionApplyToAll.value) { if (this.initialFormValue.removeRedactionApplyToAll !== this.form.controls.removeRedactionApplyToAll.value) {
await this.#userPreferences.saveRemoveRedactionDefaultExtraOption(this.form.controls.removeRedactionApplyToAll.value); await this.#userPreferences.saveRemoveRedactionDefaultExtraOption(this.form.controls.removeRedactionApplyToAll.value);
} }
@ -139,7 +135,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
await this.#userPreferences.saveRemoveRedactionDefaultExtraOption('undefined'); await this.#userPreferences.saveRemoveRedactionDefaultExtraOption('undefined');
} }
if (this.displayExtraOptionRemoveHint) { if (this.displayExtraOptionRemoveHint()) {
if (this.initialFormValue.removeHintApplyToAll !== this.form.controls.removeHintApplyToAll.value) { if (this.initialFormValue.removeHintApplyToAll !== this.form.controls.removeHintApplyToAll.value) {
await this.#userPreferences.saveRemoveHintDefaultExtraOption(this.form.controls.removeHintApplyToAll.value); await this.#userPreferences.saveRemoveHintDefaultExtraOption(this.form.controls.removeHintApplyToAll.value);
} }
@ -147,7 +143,7 @@ export class DialogDefaultsComponent extends BaseFormComponent {
await this.#userPreferences.saveRemoveHintDefaultExtraOption('undefined'); await this.#userPreferences.saveRemoveHintDefaultExtraOption('undefined');
} }
if (this.displayExtraOptionRemoveRecommendation) { if (this.displayExtraOptionRemoveRecommendation()) {
if (this.initialFormValue.removeRecommendationApplyToAll !== this.form.controls.removeRecommendationApplyToAll.value) { if (this.initialFormValue.removeRecommendationApplyToAll !== this.form.controls.removeRecommendationApplyToAll.value) {
await this.#userPreferences.saveRemoveRecommendationDefaultExtraOption( await this.#userPreferences.saveRemoveRecommendationDefaultExtraOption(
this.form.controls.removeRecommendationApplyToAll.value, this.form.controls.removeRecommendationApplyToAll.value,
@ -164,17 +160,6 @@ export class DialogDefaultsComponent extends BaseFormComponent {
} }
#patchValues() { #patchValues() {
this.form.patchValue({ this.form.patchValue(this.#initialFormValue);
addRedaction: this.#userPreferences.getAddRedactionDefaultOption(),
addHint: this.#userPreferences.getAddHintDefaultOption(),
removeRedaction: this.#userPreferences.getRemoveRedactionDefaultOption(),
removeRecommendation: this.#userPreferences.getRemoveRecommendationDefaultOption(),
removeHint: this.#userPreferences.getRemoveHintDefaultOption(),
addRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addRedactionDefaultExtraOption),
removeRedactionApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRedactionDefaultExtraOption),
removeRecommendationApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeRecommendationDefaultExtraOption),
addHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.addHintDefaultExtraOption),
removeHintApplyToAll: this.#userPreferences.getBool(PreferencesKeys.removeHintDefaultExtraOption),
});
} }
} }