Story #15442 [Search][Rules Update] Frontend improvement for rules update.

Author: Salim Terres

ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/additional-actions-search/management-rules/management-rules.component.css

@@ -28,6 +28,7 @@
 .update-rules-table-head {
   display: flex;
   align-items: center;
+  height: 70px;
   font-weight: 700;
   color: var(--vitamui-grey-900);
   margin-bottom: 0.3rem;
@@ -41,9 +42,3 @@
 .row-padding {
   padding-left: 20px;
 }
-
-.details-ua {
-  text-align: center;
-  vertical-align: middle;
-  line-height: 50px;
-}

ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/additional-actions-search/management-rules/management-rules.component.html

@@ -1,7 +1,7 @@
 <mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
   <mat-sidenav-content>
     <div class="vitamui-heading">
-      <vitamui-title-breadcrumb>
+      <vitamui-title-breadcrumb [data]="breadcrumbData">
         <h5>{{ 'ARCHIVE_SEARCH.RULES_ACTION.UPDATE_RULE' | translate }}</h5>
       </vitamui-title-breadcrumb>
     </div>
@@ -43,23 +43,17 @@ <h5>{{ 'ARCHIVE_SEARCH.RULES_ACTION.UPDATE_RULE' | translate }}</h5>
           </div>
         </div>
         <div class="col-8 row-padding">
-          <div class="update-rules-table-head row">
-            <div class="col-2 clickable" (click)="returnToArchiveSearchPage()">
-              <span class="text primary"> {{ 'RULES.BACK' | translate }}</span>
-            </div>
-            <div class="col-10">
-              <div class="row">
-                <div class="col-7">
-                  <span class="details-ua">
-                    {{ 'RULES.UA_SELECTED' | translate: { ua_selected: selectedItemToShow } }}
-                  </span>
-                </div>
-                <div class="col-5">
-                  <button class="btn primary" [disabled]="ruleActionsAbsentOrInvalid()" (click)="submitUpdates()">
-                    {{ 'RULES.EXECUTE_RULE_UPDATE' | translate }}
-                  </button>
-                </div>
-              </div>
+          <div class="update-rules-table-head justify-content-between">
+            <span>
+              {{ 'RULES.UA_SELECTED' | translate: { ua_selected: selectedItemToShow } }}
+            </span>
+            <div class="hgap-3">
+              <button class="btn primary" [disabled]="ruleActionsAbsentOrInvalid()" (click)="submitUpdates()">
+                {{ 'RULES.EXECUTE_RULE_UPDATE' | translate }}
+              </button>
+              <button class="btn outline outline-primary" (click)="returnToArchiveSearchPage()">
+                {{ 'RULES.QUIT' | translate }}
+              </button>
             </div>
           </div>
 

ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/additional-actions-search/management-rules/management-rules.component.spec.ts

@@ -320,15 +320,6 @@ describe('ManagementRulesComponent', () => {
   });
 
   describe('DOM', () => {
-    it('should have 4 rows  ', () => {
-      // When
-      const nativeElement = fixture.nativeElement;
-      const elementRow = nativeElement.querySelectorAll('.row');
-
-      // Then
-      expect(elementRow.length).toBe(4);
-    });
-
     it('should have 2 text titles', () => {
       const formTitlesHtmlElements = fixture.nativeElement.querySelectorAll('label');
 

ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/additional-actions-search/management-rules/management-rules.component.ts

@@ -42,6 +42,7 @@ import { Observable, Subscription } from 'rxjs';
 import { filter, map, shareReplay } from 'rxjs/operators';
 import {
   ApplicationId,
+  BreadCrumbData,
   Logger,
   Option,
   Rule,
@@ -139,6 +140,13 @@ export class ManagementRulesComponent implements OnInit, OnChanges, OnDestroy {
   ruleCategorySelected: string;
   hasExactCount: boolean;
   resultNumberToShow: string;
+  isUpdateInProgress = true;
+
+  breadcrumbData: BreadCrumbData[] = [
+    { identifier: ApplicationId.PORTAL_APP },
+    { identifier: ApplicationId.ARCHIVE_SEARCH_APP },
+    { label: this.translate.instant('ARCHIVE_SEARCH.RULES_ACTION.UPDATE_RULE') },
+  ];
 
   private subscriptions = new Subscription();
 
@@ -595,6 +603,7 @@ export class ManagementRulesComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   onSelectAction(rule: string) {
+    this.isUpdateInProgress = false;
     switch (rule) {
       case 'ADD_RULES':
         if (this.isRuleCategorySelected && !this.isAddValidActions) {
@@ -654,17 +663,22 @@ export class ManagementRulesComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   returnToArchiveSearchPage() {
-    const dialogRef = this.dialog.open(this.confirmLeaveRuleActionsDialog);
-
-    this.subscriptions.add(
-      dialogRef
-        .afterClosed()
-        .pipe(filter((result) => !!result))
-        .subscribe(() => {
-          this.initializeParameters();
-          this.router.navigate(['/archive-search/tenant/', this.tenantIdentifier]);
-        }),
-    );
+    if (this.isUpdateInProgress) {
+      this.initializeParameters();
+      this.router.navigate(['/archive-search/tenant/', this.tenantIdentifier]);
+    } else {
+      const dialogRef = this.dialog.open(this.confirmLeaveRuleActionsDialog);
+
+      this.subscriptions.add(
+        dialogRef
+          .afterClosed()
+          .pipe(filter((result) => !!result))
+          .subscribe(() => {
+            this.initializeParameters();
+            this.router.navigate(['/archive-search/tenant/', this.tenantIdentifier]);
+          }),
+      );
+    }
   }
 
   submitUpdates() {
@@ -673,6 +687,7 @@ export class ManagementRulesComponent implements OnInit, OnChanges, OnDestroy {
     const actionUpdateOnRules: any = {};
     const actionDeleteOnRules: any = {};
 
+    this.isUpdateInProgress = false;
     this.prepareAppraisalRuleActionsObject(actionAddOnRules, actionUpdateOnRules, actionDeleteOnRules);
     this.prepareAccessRuleActionsObject(actionAddOnRules, actionUpdateOnRules, actionDeleteOnRules);
     this.prepareStorageRuleActionsObject(actionAddOnRules, actionUpdateOnRules, actionDeleteOnRules);
@@ -698,6 +713,7 @@ export class ManagementRulesComponent implements OnInit, OnChanges, OnDestroy {
 
           this.archiveService.updateUnitsRules(ruleSearchCriteriaDto).subscribe(
             (response) => {
+              this.isUpdateInProgress = true;
               const ruleActions: ActionsRules[] = [];
               this.managementRulesSharedDataService.emitRuleActions(ruleActions);
               this.managementRulesSharedDataService.emitManagementRules([]);
@@ -715,6 +731,7 @@ export class ManagementRulesComponent implements OnInit, OnChanges, OnDestroy {
               });
             },
             (error: any) => {
+              this.isUpdateInProgress = false;
               this.logger.error('Error message :', error);
             },
           );

ui/ui-frontend/projects/archive-search/src/app/archive/archive-search/archive-search.component.html

@@ -485,19 +485,16 @@ <h5>{{ 'ARCHIVE_SEARCH.TITLE_SEARCH' | translate }}</h5>
       ) | translate: { elementsSize: selectedItemCount }
     "
     [title]="
-      (shouldReadSelectedItemCount()
+      ((shouldReadSelectedItemCount()
         ? selectedItemCount > 1
           ? 'ARCHIVE_SEARCH.OTHER_ACTIONS.DIALOG_MESSAGE.ACTION_ON_BIG_NUMBERS_MESSAGE_EXACT_COUNT'
           : 'ARCHIVE_SEARCH.OTHER_ACTIONS.DIALOG_MESSAGE.ACTION_ON_BIG_NUMBERS_MESSAGE_EXACT_COUNT_ONE'
         : 'ARCHIVE_SEARCH.OTHER_ACTIONS.DIALOG_MESSAGE.ACTION_ON_BIG_NUMBERS_MESSAGE_WITHOUT_EXACT_COUNT'
-      ) | translate: { elementsSize: selectedItemCount }
+      ) | translate: { elementsSize: selectedItemCount }) +
+      '<br>' +
+      ('ARCHIVE_SEARCH.OTHER_ACTIONS.DIALOG_MESSAGE.ACTION_ON_BIG_NUMBERS_MESSAGE_2' | translate)
     "
   ></vitamui-dialog-header>
-  <mat-dialog-content>
-    <div class="text large bold">
-      {{ 'ARCHIVE_SEARCH.OTHER_ACTIONS.DIALOG_MESSAGE.ACTION_ON_BIG_NUMBERS_MESSAGE_2' | translate }}
-    </div>
-  </mat-dialog-content>
   <mat-dialog-actions>
     <button [matDialogClose]="true" class="btn primary btn-confirm-dialog">
       {{ 'ARCHIVE_SEARCH.OTHER_ACTIONS.DIALOG_MESSAGE.CONFIRM' | translate }}

ui/ui-frontend/projects/archive-search/src/assets/i18n/en.json

@@ -116,7 +116,7 @@
     "SELECT_RULE_CATEGORY": "Select a rule category",
     "SELECT_RULE_ACTION": "Select an action",
     "OTHER_ACTIONS": "Other actions",
-    "BACK": "BACK",
+    "QUIT": "QUIT",
     "EXECUTE_RULE_UPDATE": "Start update",
     "EXECUTE_RULE_UPDATE_MESSAGE": "The operation to update the management rules has been launched",
     "ACTION_ON_RULES": "Action on the rules",
@@ -196,7 +196,7 @@
     "DIALOG_MESSAGE": {
       "UPDATE_CONFIRM_TITLE_MESSAGE": "Validate rule change(s)",
       "DELETE_COMPONENT": "Are you sure you want to delete this rule update block?",
-      "UPDATE_CONFIRM_MESSAGE": "Attention, you are about to validate the changes of rule(s) on all the archival units taken into account in the requested update. Do you confirm this update?",
+      "UPDATE_CONFIRM_MESSAGE": "Attention, you are about to validate the changes of rule(s) on all the archival units taken into account in the requested update.<br>Do you confirm this update?",
       "EXIT_CONFIRM_MESSAGE": "Are you sure you want to quit updating business rules on {{ua_selected}} selected archival units?"
     },
     "CATEGORIES_NAME": {

ui/ui-frontend/projects/archive-search/src/assets/i18n/fr.json

@@ -116,7 +116,7 @@
     "SELECT_RULE_CATEGORY": "Sélectionnez une catégorie de règle",
     "SELECT_RULE_ACTION": "Sélectionnez une action",
     "OTHER_ACTIONS": "Autres actions",
-    "BACK": "RETOUR",
+    "QUIT": "QUITTER",
     "EXECUTE_RULE_UPDATE": "Lancer la mise à jour",
     "EXECUTE_RULE_UPDATE_MESSAGE": "L'opération de mise à jour des règles de gestion a bien été lancée",
     "ACTION_ON_RULES": "Action sur les règles",
@@ -196,7 +196,7 @@
     "DIALOG_MESSAGE": {
       "UPDATE_CONFIRM_TITLE_MESSAGE": "Validation de changement(s) de règle(s)",
       "DELETE_COMPONENT": "Êtes-vous sûr de vouloir supprimer ce bloc de mise à jour des règles ?",
-      "UPDATE_CONFIRM_MESSAGE": "Attention, vous êtes sur le point de valider les changements de règle(s) sur l'ensemble des unités archivistiques prises en compte dans la mise à jour demandée. Confirmez-vous cette mise à jour ?",
+      "UPDATE_CONFIRM_MESSAGE": "Attention, vous êtes sur le point de valider les changements de règle(s) sur l'ensemble des unités archivistiques prises en compte dans la mise à jour demandée.<br>Confirmez-vous cette mise à jour ?",
       "EXIT_CONFIRM_MESSAGE": "Êtes-vous sûr de vouloir quitter la mise à jour des règles de gestion sur les {{ua_selected}} unités archivistiques sélectionnées ?"
     },
     "CATEGORIES_NAME": {