bugs #15437 (fix): the confirmation button stays disabled when the notice is updated via a file

Author: Regzox

ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.ts

@@ -72,7 +72,7 @@ The fact that you are presently reading this means that you have had
 knowledge of the CeCILL-C license and that you accept its terms.
 */
 import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
@@ -94,8 +94,8 @@ import { LoadProfileComponent, LoadProfileConfig } from './load-profile/load-pro
 import { Profile } from '../../models/profile';
 import { ArchivalProfileUnit } from '../../models/archival-profile-unit';
 import { NoticeService } from '../../core/services/notice.service';
-import { MatDialogConfig } from '@angular/material/dialog';
 import { NotificationService } from '../../core/services/notification.service';
+import { map } from 'rxjs/operators';
 
 const POPUP_CREATION_PATH = 'PROFILE.POP_UP_CREATION';
 const POPUP_UPLOAD_PATH = 'PROFILE.POP_UP_UPLOAD_FILE';
@@ -357,7 +357,7 @@ export class ListProfileComponent extends SidenavPage<ProfileDescription> implem
         filter((confirmed) => confirmed),
         switchMap(() =>
           this.dialog
-            .open<LoadProfileComponent, LoadProfileConfig>(LoadProfileComponent, {
+            .open<LoadProfileComponent, LoadProfileConfig, File[]>(LoadProfileComponent, {
               data: {
                 title: this.translations.popupUploadTitle,
                 subTitle: this.translations.popupUploadSubTitle,
@@ -369,37 +369,36 @@ export class ListProfileComponent extends SidenavPage<ProfileDescription> implem
             })
             .afterClosed(),
         ),
+        filter((files) => Boolean(files?.length)),
+        map((files) => files.at(0)),
       )
-      .subscribe((files) => {
-        if (files) {
-          const fileToUpload: File = files[0];
-          if (profileDescription.type === ProfileType.PA) {
-            const profile: Profile = this.noticeService.profileDescriptionToPaProfile(profileDescription);
-            this.profileService.updateProfileFilePa(profile, fileToUpload).subscribe(
-              () => this.refreshListProfiles(),
-              () =>
-                this.notificationService.showError(
-                  this.translateService.instant('PROFILE.LIST_PROFILE.PROFILE_PREVIEW.MODIFICATION_ERROR_SEDA_VERSION'),
-                ),
-            );
-          }
-          if (profileDescription.type === ProfileType.PUA && fileToUpload) {
-            const fileReader = new FileReader();
-            fileReader.readAsText(fileToUpload, 'UTF-8');
-            fileReader.onload = () => {
-              const jsonObj: ProfileDescription = JSON.parse(fileReader.result.toString());
-              if (jsonObj.sedaVersion !== profileDescription.sedaVersion) {
-                this.notificationService.showError(
-                  this.translateService.instant('PROFILE.LIST_PROFILE.PROFILE_PREVIEW.MODIFICATION_ERROR_SEDA_VERSION'),
-                );
-              } else {
-                profileDescription.controlSchema = jsonObj.controlSchema;
-                const archivalProfileUnit: ArchivalProfileUnit = this.noticeService.profileDescriptionToPuaProfile(profileDescription);
-                this.profileService.updateProfilePua(archivalProfileUnit).subscribe(() => this.refreshListProfiles());
-              }
-            };
-            fileReader.onerror = (error) => console.error(error);
-          }
+      .subscribe((fileToUpload) => {
+        if (profileDescription.type === ProfileType.PA) {
+          const profile: Profile = this.noticeService.profileDescriptionToPaProfile(profileDescription);
+          this.profileService.updateProfileFilePa(profile, fileToUpload).subscribe({
+            next: () => this.refreshListProfiles(),
+            error: () =>
+              this.notificationService.showError(
+                this.translateService.instant('PROFILE.LIST_PROFILE.PROFILE_PREVIEW.MODIFICATION_ERROR_SEDA_VERSION'),
+              ),
+          });
+        }
+        if (profileDescription.type === ProfileType.PUA && fileToUpload) {
+          const fileReader = new FileReader();
+          fileReader.readAsText(fileToUpload, 'UTF-8');
+          fileReader.onload = () => {
+            const jsonObj: ProfileDescription = JSON.parse(fileReader.result.toString());
+            if (jsonObj.sedaVersion !== profileDescription.sedaVersion) {
+              this.notificationService.showError(
+                this.translateService.instant('PROFILE.LIST_PROFILE.PROFILE_PREVIEW.MODIFICATION_ERROR_SEDA_VERSION'),
+              );
+            } else {
+              profileDescription.controlSchema = jsonObj.controlSchema;
+              const archivalProfileUnit: ArchivalProfileUnit = this.noticeService.profileDescriptionToPuaProfile(profileDescription);
+              this.profileService.updateProfilePua(archivalProfileUnit).subscribe(() => this.refreshListProfiles());
+            }
+          };
+          fileReader.onerror = (error) => console.error(error);
         }
       });
   }

ui/ui-frontend/projects/pastis/src/app/profile/list-profile/load-profile/load-profile.component.html

@@ -1,10 +1,11 @@
 <vitamui-dialog-header [subhead]="config.title" [title]="config.subTitle"></vitamui-dialog-header>
 
 <mat-dialog-content>
-  <vitamui-file-selector #fs class="d-flex" [extensions]="config.extensions" [multiple]="config.multipleFiles"> </vitamui-file-selector>
+  <vitamui-file-selector class="d-flex" [formControl]="files" [extensions]="config.extensions" [multiple]="config.multipleFiles">
+  </vitamui-file-selector>
 </mat-dialog-content>
 
 <mat-dialog-actions>
-  <button type="button" class="btn primary" [disabled]="!fs.files?.length" [matDialogClose]="fs.files">{{ config.okLabel }}</button>
+  <button type="button" class="btn primary" [disabled]="isEmpty$ | async" [matDialogClose]="files.value">{{ config.okLabel }}</button>
   <button type="button" class="btn cancel link" matDialogClose>{{ config.cancelLabel }}</button>
 </mat-dialog-actions>

ui/ui-frontend/projects/pastis/src/app/profile/list-profile/load-profile/load-profile.component.ts

@@ -37,6 +37,10 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { FileSelectorComponent, PipesModule, VitamUILibraryModule } from 'vitamui-library';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { map, startWith, switchMap } from 'rxjs/operators';
+import { AsyncPipe } from '@angular/common';
+import { BehaviorSubject } from 'rxjs';
 
 export interface LoadProfileConfig {
   title: string;
@@ -54,9 +58,15 @@ export interface LoadProfileConfig {
   selector: 'vitamui-load-profile',
   templateUrl: './load-profile.component.html',
   styleUrl: './load-profile.component.scss',
-  imports: [FileSelectorComponent, PipesModule, MatDialogModule, VitamUILibraryModule],
+  imports: [FileSelectorComponent, PipesModule, MatDialogModule, VitamUILibraryModule, AsyncPipe, ReactiveFormsModule],
 })
 export class LoadProfileComponent {
+  protected files = new FormControl([]);
+  protected isEmpty$ = new BehaviorSubject(true).pipe(
+    switchMap(() => this.files.valueChanges.pipe(startWith(this.files.value))),
+    map((files: File[] | FileList) => files?.length === 0),
+  );
+
   constructor(
     @Inject(MAT_DIALOG_DATA)
     public config: LoadProfileConfig,