BUG #11527: add disabled mode to action buttons (#1471)

Co-authored-by: mohamed tizaoui <mohamed.tizaoui@teamdlab.com>
ProgrammeVitam · Sep 21, 2023 · 859670b · 859670b
1 parent 2d115f7
commit 859670b
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 53 deletions.
diff --git a/ui/ui-frontend/projects/pastis/src/app/models/profile-description.model.ts b/ui/ui-frontend/projects/pastis/src/app/models/profile-description.model.ts
@@ -3,6 +3,7 @@ import {Profile} from './profile';
 
 export interface ProfileDescription extends Partial<Profile>, Partial<ArchivalProfileUnit> {
   type: string;
+  isEditable?:boolean;
 }
 
 export class ProfileDescriptionModel implements ProfileDescription {

diff --git a/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.html b/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.html
@@ -1,4 +1,4 @@
-<div  *ngIf="pending then loadingSpinner"></div>
+<div *ngIf="pending then loadingSpinner"></div>
 
 
 <ng-template #loadingSpinner>
@@ -32,11 +32,12 @@
           <i class="vitamui-icon vitamui-icon-deposit mr-3 "></i>
           <span style="align-items: center; margin:auto;">{{'PROFILE.LIST_PROFILE.IMPORTER_PROFIL' | translate}}</span>
 
-          <input #fileInput (change)="uploadProfile($event.target.files)" [uploader]="uploader" accept=".json, .rng" class="buttons"
+          <input #fileInput (change)="uploadProfile($event.target.files)" [uploader]="uploader" accept=".json, .rng"
+                 class="buttons"
                  ng2FileSelect style="display:none;" type="file"/>
         </button>
-        <pastis-popup-option  *ngIf="!isStandalone" [sedaUrl]="sedaUrl"
-                              [newProfileUrl]="newProfileUrl" ></pastis-popup-option>
+        <pastis-popup-option *ngIf="!isStandalone" [sedaUrl]="sedaUrl"
+                             [newProfileUrl]="newProfileUrl"></pastis-popup-option>
       </vitamui-common-banner>
 
     </div>
@@ -110,38 +111,43 @@
             <div *ngFor="let element of retrievedProfiles | filterByType:filterType | filterByStringName:search;"
                  class="vitamui-table-rows">
               <div class="vitamui-row d-flex align-items-center">
-                <div (click)="showProfile(element)" class="col-2 clickable" >
+                <div (click)="showProfile(element)" class="col-2 clickable">
                   {{element.type}}
                   <div *ngIf="!isStandalone">
                     <i *ngIf="element.status == 'ACTIVE'"
-                                     class="status-badge-green ml-3"></i>
-                  <i *ngIf="element.status == 'INACTIVE'" class="status-badge-red ml-3"></i>
+                       class="status-badge-green ml-3"></i>
+                    <i *ngIf="element.status == 'INACTIVE'" class="status-badge-red ml-3"></i>
                   </div>
                 </div>
-                <div (click)="showProfile(element)" class="col-3 clickable" style="word-wrap: break-word;">{{element.identifier}}</div>
-                <div (click)="showProfile(element)" class="col-3 clickable" style="word-wrap: break-word;">{{element.name}}</div>
-                <div (click)="showProfile(element)" class="col-2 mr-3 clickable">{{element.lastUpdate | date: 'medium':'UTC+4'}}</div>
+                <div (click)="showProfile(element)" class="col-3 clickable"
+                     style="word-wrap: break-word;">{{element.identifier}}</div>
+                <div (click)="showProfile(element)" class="col-3 clickable"
+                     style="word-wrap: break-word;">{{element.name}}</div>
+                <div (click)="showProfile(element)"
+                     class="col-2 mr-3 clickable">{{element.lastUpdate | date: 'medium':'UTC+4'}}</div>
                 <div class="col-2  actions">
                   <div>
                     <button (click)="editProfile(element)" class="btn btn-circle primary mr-3"
                             [disabled]="((!element.controlSchema || element.controlSchema === '{}') && element.type === 'PUA') || (!element.path && element.type === 'PA') || element.status === 'INACTIVE'">
                       <i [style.fontSize.px]="25" class="vitamui-icon vitamui-icon-edit"
-                        matTooltip="{{'PROFILE.LIST_PROFILE.MODIFIER_PROFIL_TOOLTIP' |
+                         matTooltip="{{'PROFILE.LIST_PROFILE.MODIFIER_PROFIL_TOOLTIP' |
                       translate}}"
                          matTooltipPosition="above" matTooltipClass="modifierToolTip"></i>
                     </button>
 
-                    <button (click)="changeExpand(element)" class="btn btn-circle outlin outline-primary mr-3" *ngIf="!isStandalone">
+                    <button (click)="changeExpand(element)" class="btn btn-circle outlin outline-primary mr-3"
+                            [disabled]="!element.isEditable" *ngIf="!isStandalone">
                       <i [style.fontSize.px]="25"
                          class="vitamui-icon vitamui-icon-more-horiz"></i>
                     </button>
-                    <div *ngIf="expanded" class="pastis-vitamui-option-container">
+                    <div *ngIf="expanded && element.isEditable" class="pastis-vitamui-option-container">
                       <button mat-menu-item (click)="fileInput.click()">
-                          <i class="vitamui-icon vitamui-icon-download"></i>
-                          &nbsp;&nbsp;&nbsp;
-                          <span class="text normal">{{'PROFILE.LIST_PROFILE.LOAD_PROFILE' | translate}}</span>
-                          <input #fileInput (change)="updateProfileNotice(element, $event.target.files)" [uploader]="uploader" accept=".json, .rng" class="buttons"
-                          ng2FileSelect style="display:none;" type="file"/>
+                        <i class="vitamui-icon vitamui-icon-download"></i>
+                        &nbsp;&nbsp;&nbsp;
+                        <span class="text normal">{{'PROFILE.LIST_PROFILE.LOAD_PROFILE' | translate}}</span>
+                        <input #fileInput (change)="updateProfileNotice(element, $event.target.files)"
+                               [uploader]="uploader" accept=".json, .rng" class="buttons"
+                               ng2FileSelect style="display:none;" type="file"/>
                       </button>
                     </div>
                   </div>

diff --git a/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.ts b/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.ts
@@ -35,28 +35,28 @@ same conditions as regards security.
 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, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { MatTableDataSource } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { FileUploader } from 'ng2-file-upload';
-import { Subscription } from 'rxjs';
-import { Direction, GlobalEventService, SidenavPage, StartupService } from 'ui-frontend-common';
-import { environment } from '../../../environments/environment';
-import { PastisConfiguration } from '../../core/classes/pastis-configuration';
-import { NoticeService } from '../../core/services/notice.service';
-import { ProfileService } from '../../core/services/profile.service';
-import { ToggleSidenavService } from '../../core/services/toggle-sidenav.service';
-import { ArchivalProfileUnit } from '../../models/archival-profile-unit';
-import { BreadcrumbDataTop } from '../../models/breadcrumb';
-import { MetadataHeaders } from '../../models/models';
-import { Profile } from '../../models/profile';
-import { ProfileDescription } from '../../models/profile-description.model';
-import { ProfileResponse } from '../../models/profile-response';
-import { DataGeneriquePopupService } from '../../shared/data-generique-popup.service';
-import { PastisDialogData } from '../../shared/pastis-dialog/classes/pastis-dialog-data';
-import { CreateProfileComponent } from '../create-profile/create-profile.component';
+import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
+import {MatTableDataSource} from '@angular/material/table';
+import {ActivatedRoute, Router} from '@angular/router';
+import {TranslateService} from '@ngx-translate/core';
+import {FileUploader} from 'ng2-file-upload';
+import {Subscription} from 'rxjs';
+import {Direction, GlobalEventService, SidenavPage, StartupService} from 'ui-frontend-common';
+import {environment} from '../../../environments/environment';
+import {PastisConfiguration} from '../../core/classes/pastis-configuration';
+import {NoticeService} from '../../core/services/notice.service';
+import {ProfileService} from '../../core/services/profile.service';
+import {ToggleSidenavService} from '../../core/services/toggle-sidenav.service';
+import {ArchivalProfileUnit} from '../../models/archival-profile-unit';
+import {BreadcrumbDataTop} from '../../models/breadcrumb';
+import {MetadataHeaders} from '../../models/models';
+import {Profile} from '../../models/profile';
+import {ProfileDescription} from '../../models/profile-description.model';
+import {ProfileResponse} from '../../models/profile-response';
+import {DataGeneriquePopupService} from '../../shared/data-generique-popup.service';
+import {PastisDialogData} from '../../shared/pastis-dialog/classes/pastis-dialog-data';
+import {CreateProfileComponent} from '../create-profile/create-profile.component';
 import {
   ProfileInformationTabComponent
 } from '../profile-preview/profile-information-tab/profile-information-tab/profile-information-tab.component';
@@ -73,13 +73,13 @@ function constantToTranslate() {
 @Component({
   selector: 'pastis-list-profile',
   templateUrl: './list-profile.component.html',
-  styleUrls: [ './list-profile.component.scss' ],
+  styleUrls: ['./list-profile.component.scss'],
 })
 export class ListProfileComponent extends SidenavPage<ProfileDescription> implements OnInit, OnDestroy {
-  @ViewChild(ProfileInformationTabComponent, { static: true }) profileInformationTabComponent: ProfileInformationTabComponent;
+  @ViewChild(ProfileInformationTabComponent, {static: true}) profileInformationTabComponent: ProfileInformationTabComponent;
 
   @Input()
-  uploader: FileUploader = new FileUploader({ url: '' });
+  uploader: FileUploader = new FileUploader({url: ''});
 
   retrievedProfiles: ProfileDescription[] = [];
 
@@ -178,20 +178,34 @@ export class ListProfileComponent extends SidenavPage<ProfileDescription> implem
         url: this.startupService.getPortalUrl(),
         external: true,
       },
-      { label: 'PROFILE.EDIT_PROFILE.BREADCRUMB.CREER_ET_GERER_PROFIL', url: '/' },
+      {label: 'PROFILE.EDIT_PROFILE.BREADCRUMB.CREER_ET_GERER_PROFIL', url: '/'},
     ];
 
     this.subscription1$ = this.refreshListProfiles();
     this.subscriptions.push(this.subscription1$);
   }
 
+  private isEditable(profileDescription: ProfileDescription): boolean {
+    return (
+      (profileDescription.type === 'PA' && !profileDescription.path
+        && profileDescription.status === 'ACTIVE') ||
+      (profileDescription.type === 'PUA' && profileDescription.status === 'ACTIVE'
+        && (!profileDescription.controlSchema || profileDescription.controlSchema === '{}'))
+    )
+  }
+
   private refreshListProfiles() {
     this.toggleService.showPending();
     this.profileService.refreshListProfiles();
     return this.profileService.retrievedProfiles.subscribe((profileList: ProfileDescription[]) => {
       if (profileList) {
+
         this.retrievedProfiles = profileList;
-        // console.log('Profiles: ', this.retrievedProfiles);
+        this.retrievedProfiles.forEach(
+          profileDescription => {
+            profileDescription.isEditable = this.isEditable(profileDescription);
+          }
+        )
         this.profilesChargees = true;
         this.toggleService.hidePending();
       }
@@ -223,12 +237,12 @@ export class ListProfileComponent extends SidenavPage<ProfileDescription> implem
     if (d.external) {
       window.location.assign(d.url);
     } else {
-      this.router.navigate([ d.url ], { skipLocationChange: false });
+      this.router.navigate([d.url], {skipLocationChange: false});
     }
   }
 
   editProfile(element: ProfileDescription) {
-    this.router.navigate([ this.pastisConfig.pastisEditPage, element.id ], {
+    this.router.navigate([this.pastisConfig.pastisEditPage, element.id], {
       state: element,
       relativeTo: this.route,
       skipLocationChange: false,
@@ -243,7 +257,7 @@ export class ListProfileComponent extends SidenavPage<ProfileDescription> implem
       formData.append('file', fileToUpload, fileToUpload.name);
       this._uploadProfileSub = this.profileService.uploadProfile(formData).subscribe((response: any) => {
         if (response) {
-          this.router.navigate([ this.pastisConfig.pastisNewProfile ], { state: response, relativeTo: this.route });
+          this.router.navigate([this.pastisConfig.pastisNewProfile], {state: response, relativeTo: this.route});
         }
       });
       this.subscriptions.push(this._uploadProfileSub);
@@ -271,7 +285,7 @@ export class ListProfileComponent extends SidenavPage<ProfileDescription> implem
             .createProfile(this.pastisConfig.createProfileByTypeUrl, result.action)
             .subscribe((response: ProfileResponse) => {
               if (response) {
-                this.router.navigate([ this.pastisConfig.pastisNewProfile ], { state: response, relativeTo: this.route });
+                this.router.navigate([this.pastisConfig.pastisNewProfile], {state: response, relativeTo: this.route});
               }
             });
         }
@@ -364,11 +378,10 @@ export class ListProfileComponent extends SidenavPage<ProfileDescription> implem
   }
 
   changeExpand(element: ProfileDescription) {
-    if (element.type === 'PA' && !element.path && element.status === 'ACTIVE') {
-      this.expanded = !this.expanded;
-    }
-    if (element.type === 'PUA' && element.status === 'ACTIVE' && (element.controlSchema === '{}' || !element.controlSchema)) {
+
+    if (element.isEditable) {
       this.expanded = !this.expanded;
     }
+
   }
 }