RED-3687 - removed some subscriptions

apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts

@@ -45,9 +45,7 @@ export class DownloadsListScreenComponent extends ListingComponent<DownloadStatu
     ) {
         super(_injector);
         this._loadingService.loadWhile(this._loadData());
-        this.addSubscription = interval(5000)
+        setInterval(() => this._loadData(), 5000);
-            .pipe(switchMap(() => this._loadData()))
-            .subscribe();
     }
 
     downloadItem(download: DownloadStatus) {

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component.html

@@ -45,7 +45,12 @@
                 <div>
                     <div class="iqser-input-group datepicker-wrapper">
                         <ng-container *ngIf="hasValidFrom">
-                            <input [matDatepicker]="fromPicker" formControlName="validFrom" placeholder="dd/mm/yy" />
+                            <input
+                                [matDatepicker]="fromPicker"
+                                formControlName="validFrom"
+                                (dateChange)="applyValidityIntervalConstraints()"
+                                placeholder="dd/mm/yy"
+                            />
                             <mat-datepicker-toggle [for]="fromPicker" matSuffix>
                                 <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                             </mat-datepicker-toggle>
@@ -55,7 +60,12 @@
 
                     <div class="iqser-input-group datepicker-wrapper">
                         <ng-container *ngIf="hasValidTo">
-                            <input [matDatepicker]="toPicker" formControlName="validTo" placeholder="dd/mm/yy" />
+                            <input
+                                [matDatepicker]="toPicker"
+                                formControlName="validTo"
+                                (dateChange)="applyValidityIntervalConstraints()"
+                                placeholder="dd/mm/yy"
+                            />
                             <mat-datepicker-toggle [for]="toPicker" matSuffix>
                                 <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                             </mat-datepicker-toggle>

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component.ts

@@ -54,17 +54,6 @@ export class AddEditCloneDossierTemplateDialogComponent extends BaseDialogCompon
 
         this._previousValidFrom = this._lastValidFrom = this.form.get('validFrom').value;
         this._previousValidTo = this._lastValidTo = this.form.get('validTo').value;
-
-        this.addSubscription = this.form.valueChanges.subscribe(value => {
-            this._applyValidityIntervalConstraints(value);
-        });
-
-        this.addSubscription = this.form.controls['validFrom'].valueChanges.subscribe(value => {
-            this._lastValidFrom = value || this._lastValidFrom;
-        });
-        this.addSubscription = this.form.controls['validTo'].valueChanges.subscribe(value => {
-            this._lastValidTo = value || this._lastValidTo;
-        });
     }
 
     toggleHasValid(extremity: string) {
@@ -75,6 +64,7 @@ export class AddEditCloneDossierTemplateDialogComponent extends BaseDialogCompon
             this.hasValidTo = !this.hasValidTo;
             this.form.controls['validTo'].setValue(this.hasValidTo ? this._lastValidTo : null);
         }
+        this.applyValidityIntervalConstraints();
     }
 
     async save() {
@@ -144,14 +134,14 @@ export class AddEditCloneDossierTemplateDialogComponent extends BaseDialogCompon
         return this.dossierTemplate?.name;
     }
 
-    private _applyValidityIntervalConstraints(value): boolean {
+    applyValidityIntervalConstraints(): void {
-        if (applyIntervalConstraints(value, this._previousValidFrom, this._previousValidTo, this.form, 'validFrom', 'validTo')) {
+        const formValue = this.form.value;
-            return true;
+        applyIntervalConstraints(formValue, this._previousValidFrom, this._previousValidTo, this.form, 'validFrom', 'validTo');
-        }
 
         this._previousValidFrom = this.form.get('validFrom').value;
         this._previousValidTo = this.form.get('validTo').value;
-        return false;
+        this._lastValidFrom = this._previousValidFrom || this._lastValidFrom;
+        this._lastValidTo = this._previousValidTo || this._lastValidTo;
     }
 
     private _requiredIfValidator(predicate) {

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html

@@ -26,7 +26,12 @@
         <div class="iqser-input-group">
             <label translate="add-edit-user.form.role"></label>
             <div class="roles-wrapper">
-                <mat-checkbox *ngFor="let role of ROLES" [formControlName]="role" color="primary">
+                <mat-checkbox
+                    *ngFor="let role of ROLES"
+                    [formControlName]="role"
+                    color="primary"
+                    (change)="setRolesRequirements($event.checked, role)"
+                >
                     {{ translations[role] | translate }}
                 </mat-checkbox>
             </div>

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts

@@ -62,7 +62,6 @@ export class UserDetailsComponent extends BaseFormComponent implements OnChanges
 
     ngOnChanges() {
         this.form = this._getForm();
-        this._setRolesRequirements();
         this.initialFormValue = this.form.getRawValue();
     }
 
@@ -123,16 +122,14 @@ export class UserDetailsComponent extends BaseFormComponent implements OnChanges
         });
     }
 
-    private _setRolesRequirements() {
+    setRolesRequirements(checked: boolean, role: string): void {
-        for (const key of Object.keys(this._ROLE_REQUIREMENTS)) {
+        if (Object.keys(this._ROLE_REQUIREMENTS).includes(role)) {
-            this.addSubscription = this.form.controls[key].valueChanges.subscribe(checked => {
+            if (checked) {
-                if (checked) {
+                this.form.patchValue({ [this._ROLE_REQUIREMENTS[role]]: true });
-                    this.form.patchValue({ [this._ROLE_REQUIREMENTS[key]]: true });
+                this.form.controls[this._ROLE_REQUIREMENTS[role]].disable();
-                    this.form.controls[this._ROLE_REQUIREMENTS[key]].disable();
+            } else {
-                } else {
+                this.form.controls[this._ROLE_REQUIREMENTS[role]].enable();
-                    this.form.controls[this._ROLE_REQUIREMENTS[key]].enable();
+            }
-                }
-            });
         }
     }
 }

apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html

@@ -45,7 +45,7 @@
         <form [formGroup]="form">
             <div class="iqser-input-group w-150 mr-20">
                 <mat-form-field class="no-label">
-                    <mat-select formControlName="category">
+                    <mat-select formControlName="category" (selectionChange)="filterChange()">
                         <mat-option *ngFor="let category of categories" [value]="category">
                             {{ translations[category] | translate }}
                         </mat-option>
@@ -54,7 +54,7 @@
             </div>
             <div class="iqser-input-group w-150">
                 <mat-form-field class="no-label">
-                    <mat-select formControlName="userId">
+                    <mat-select formControlName="userId" (selectionChange)="filterChange()">
                         <mat-select-trigger>
                             <redaction-initials-avatar
                                 *ngIf="form.get('userId').value !== ALL_USERS"
@@ -76,7 +76,7 @@
             </div>
             <div class="separator">·</div>
             <div class="iqser-input-group datepicker-wrapper mr-20">
-                <input [matDatepicker]="fromPicker" formControlName="from" placeholder="dd/mm/yy" />
+                <input [matDatepicker]="fromPicker" formControlName="from" placeholder="dd/mm/yy" (dateChange)="filterChange()" />
                 <mat-datepicker-toggle [for]="fromPicker" matSuffix>
                     <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                 </mat-datepicker-toggle>
@@ -86,7 +86,7 @@
             <div class="mr-20" translate="audit-screen.to"></div>
 
             <div class="iqser-input-group datepicker-wrapper">
-                <input [matDatepicker]="toPicker" formControlName="to" placeholder="dd/mm/yy" />
+                <input [matDatepicker]="toPicker" formControlName="to" placeholder="dd/mm/yy" (dateChange)="filterChange()" />
                 <mat-datepicker-toggle [for]="toPicker" matSuffix>
                     <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                 </mat-datepicker-toggle>

apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts

@@ -18,7 +18,7 @@ const PAGE_SIZE = 50;
     styleUrls: ['./audit-screen.component.scss'],
     providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => AuditScreenComponent) }],
 })
-export class AuditScreenComponent extends ListingComponent<Audit> implements OnDestroy, OnInit {
+export class AuditScreenComponent extends ListingComponent<Audit> implements OnInit, OnDestroy {
     readonly ALL_CATEGORIES = 'allCategories';
     readonly ALL_USERS = _('audit-screen.all-users');
     readonly translations = auditCategoriesTranslations;
@@ -45,12 +45,6 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnD
         private readonly _auditService: AuditService,
     ) {
         super(_injector);
-
-        this.addSubscription = this.form.valueChanges.subscribe(async value => {
-            if (!this._updateDateFilters(value)) {
-                await this._fetchData();
-            }
-        });
     }
 
     get totalPages(): number {
@@ -68,6 +62,12 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnD
         await this._fetchData();
     }
 
+    async filterChange() {
+        if (!this._updateDateFilters(this.form.value)) {
+            await this._fetchData();
+        }
+    }
+
     private _getForm(): UntypedFormGroup {
         return this._formBuilder.group({
             category: [this.ALL_CATEGORIES],

apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.html

@@ -83,7 +83,11 @@
             </div>
             <div class="iqser-input-group">
                 <label translate="general-config-screen.form.auth"></label>
-                <mat-slide-toggle color="primary" formControlName="auth"></mat-slide-toggle>
+                <mat-slide-toggle
+                    color="primary"
+                    formControlName="auth"
+                    (change)="onToggleAuthentication($event.checked)"
+                ></mat-slide-toggle>
             </div>
             <div
                 (click)="openAuthConfigDialog(true)"

apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.ts

@@ -25,17 +25,18 @@ export class SmtpFormComponent extends BaseFormComponent implements OnInit, OnDe
     ) {
         super();
         this.form = this._getForm();
-        this.addSubscription = this.form.controls.auth.valueChanges.subscribe(auth => {
-            if (auth) {
-                this.openAuthConfigDialog();
-            }
-        });
     }
 
     async ngOnInit(): Promise<void> {
         await this._loadData();
     }
 
+    onToggleAuthentication(checked: boolean): void {
+        if (checked) {
+            this.openAuthConfigDialog();
+        }
+    }
+
     openAuthConfigDialog(skipDisableOnCancel?: boolean) {
         this._dialogService.openDialog('smtpAuthConfig', null, this.form.getRawValue(), null, authConfig => {
             if (authConfig) {

apps/red-ui/src/app/modules/archive/screens/archived-dossiers-screen/archived-dossiers-screen.component.html

@@ -25,3 +25,6 @@
 <ng-template #tableItemTemplate let-dossier="entity">
     <redaction-table-item [dossier]="dossier"></redaction-table-item>
 </ng-template>
+
+<!-- A hack to avoid subscribing in component -->
+<ng-container *ngIf="computeFilters$ | async"></ng-container>

apps/red-ui/src/app/modules/archive/screens/archived-dossiers-screen/archived-dossiers-screen.component.ts

@@ -18,6 +18,7 @@ export class ArchivedDossiersScreenComponent extends ListingComponent<Dossier> i
     readonly tableColumnConfigs = this._configService.tableConfig;
     readonly tableHeaderLabel = _('archived-dossiers-listing.table-header.title');
     private readonly _dossierTemplateId: string;
+    readonly computeFilters$ = this.entitiesService.all$.pipe(tap(() => this._computeAllFilters()));
 
     constructor(
         protected readonly _injector: Injector,
@@ -31,7 +32,6 @@ export class ArchivedDossiersScreenComponent extends ListingComponent<Dossier> i
     }
 
     ngOnInit(): void {
-        this.addSubscription = this.entitiesService.all$.pipe(tap(() => this._computeAllFilters())).subscribe();
         this.addSubscription = this._archivedDossiersService.all$
             .pipe(tap(dossiers => this.entitiesService.setEntities(dossiers.filter(d => d.dossierTemplateId === this._dossierTemplateId))))
             .subscribe();

apps/red-ui/src/app/modules/dossiers-listing/screen/dossiers-listing-screen.component.html

@@ -36,3 +36,6 @@
 <ng-template #tableItemTemplate let-dossier="entity">
     <redaction-table-item [dossier]="dossier"></redaction-table-item>
 </ng-template>
+
+<!-- A hack to avoid subscribing in component -->
+<ng-container *ngIf="computeFilters$ | async"></ng-container>

apps/red-ui/src/app/modules/dossiers-listing/screen/dossiers-listing-screen.component.ts

@@ -22,6 +22,7 @@ export class DossiersListingScreenComponent extends ListingComponent<Dossier> im
     readonly tableHeaderLabel = _('dossier-listing.table-header.title');
     readonly buttonConfigs: ButtonConfig[];
     readonly dossierTemplate: DossierTemplate;
+    readonly computeFilters$ = this._activeDossiersService.all$.pipe(tap(() => this._computeAllFilters()));
     @ViewChild('needsWorkFilterTemplate', {
         read: TemplateRef,
         static: true,
@@ -52,7 +53,6 @@ export class DossiersListingScreenComponent extends ListingComponent<Dossier> im
 
     async ngOnInit(): Promise<void> {
         await this._userPreferenceService.saveLastDossierTemplate(this.dossierTemplate.id);
-        this.addSubscription = this.entitiesService.all$.pipe(tap(() => this._computeAllFilters())).subscribe();
         this.addSubscription = this._activeDossiersService.all$
             .pipe(tap(dossiers => this.entitiesService.setEntities(dossiers.filter(d => d.dossierTemplateId === this.dossierTemplate.id))))
             .subscribe();

apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.html

@@ -34,3 +34,6 @@
 </ng-container>
 
 <div (click)="toggleExpandComments($event)" class="all-caps-label pointer hide-comments" translate="comments.hide-comments"></div>
+
+<!-- A hack to avoid subscribing in component -->
+<ng-container *ngIf="hiddenComments$ | async"></ng-container>

apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts

@@ -21,6 +21,7 @@ export class CommentsComponent extends AutoUnsubscribe implements OnChanges {
     readonly trackBy = trackByFactory();
     readonly file$: Observable<File>;
     readonly dossier$: Observable<Dossier>;
+    hiddenComments$: Observable<boolean>;
     @HostBinding('class.hidden') _hidden = true;
     @ViewChild(InputWithActionComponent) private readonly _input: InputWithActionComponent;
 
@@ -39,14 +40,11 @@ export class CommentsComponent extends AutoUnsubscribe implements OnChanges {
     }
 
     ngOnChanges() {
-        this.addSubscription = this._commentingService
+        this.hiddenComments$ = this._commentingService.isActive$(this.annotation.id).pipe(
-            .isActive$(this.annotation.id)
+            tap(active => {
-            .pipe(
+                this._hidden = !active;
-                tap(active => {
+            }),
-                    this._hidden = !active;
+        );
-                }),
-            )
-            .subscribe();
     }
 
     async addComment(value: string): Promise<void> {

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html

@@ -2,7 +2,7 @@
     <div class="iqser-input-group w-300 required">
         <mat-form-field floatLabel="always">
             <mat-label>{{ 'assign-dossier-owner.dialog.single-user' | translate }}</mat-label>
-            <mat-select formControlName="owner" id="editDossierOwnerSelect">
+            <mat-select formControlName="owner" id="editDossierOwnerSelect" (valueChange)="onChangeOwner($event)">
                 <mat-option *ngFor="let userId of ownersSelectOptions; let index = index" [id]="'mat-option-' + index" [value]="userId">
                     {{ userId | name }}
                 </mat-option>

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts

@@ -143,6 +143,16 @@ export class EditDossierTeamComponent extends AutoUnsubscribe implements EditDos
             .map(user => user.id);
     }
 
+    onChangeOwner(ownerId: string) {
+        if (this.hasOwner) {
+            if (!this.isApprover(ownerId)) {
+                this.toggleApprover(ownerId);
+            }
+            // If it is an approver, it is already a member, no need to check
+            this._updateLists();
+        }
+    }
+
     private _setSelectedReviewersList() {
         const selectedReviewers = this.selectedMembersList.filter(m => this.selectedApproversList.indexOf(m) === -1);
         this.selectedReviewers$.next(selectedReviewers);
@@ -160,15 +170,6 @@ export class EditDossierTeamComponent extends AutoUnsubscribe implements EditDos
             approvers: [[...this.dossier.approverIds]],
             members: [[...this.dossier.memberIds]],
         });
-        this.addSubscription = this.form.get('owner').valueChanges.subscribe((ownerId: string) => {
-            if (this.hasOwner) {
-                if (!this.isApprover(ownerId)) {
-                    this.toggleApprover(ownerId);
-                }
-                // If it is an approver, it is already a member, no need to check
-                this._updateLists();
-            }
-        });
         this._updateLists();
     }