fix: Error banner and snackbar issues

Author: tumms2021389

packages/angular-sdk-components/src/lib/_components/infra/Containers/flow-container/flow-container.component.ts

@@ -119,6 +119,14 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
       },
       'cancelPressed'
     );
+
+    PCore.getPubSubUtils().subscribe(
+      'clearBannerMessages',
+      () => {
+        this.banners = [];
+      },
+      'CLEAR_BANNER_MESSAGES'
+    );
   }
 
   ngOnDestroy() {
@@ -129,6 +137,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'cancelAssignment');
 
     PCore.getPubSubUtils().unsubscribe('cancelPressed', 'cancelPressed');
+    PCore.getPubSubUtils().unsubscribe('clearBannerMessages', 'CLEAR_BANNER_MESSAGES');
   }
 
   handleCancel() {
@@ -152,14 +161,15 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     const pConn = this.pConnectOfActiveContainerItem || this.pConn$;
     const caseViewModeFromProps = this.angularPConnect.getComponentProp(this, 'caseViewMode');
     const caseViewModeFromRedux = pConn.getValue('context_data.caseViewMode', '');
+    const completeProps = this.angularPConnect.getCurrentCompleteProps(this) as FlowContainerProps;
 
     // ONLY call updateSelf when the component should update
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
+    // eslint-disable-next-line sonarjs/no-collapsible-if
     if (bUpdateSelf || caseViewModeFromProps !== caseViewModeFromRedux) {
       // don't want to redraw the flow container when there are page messages, because
       // the redraw causes us to loose the errors on the elements
-      const completeProps = this.angularPConnect.getCurrentCompleteProps(this) as FlowContainerProps;
       if (!completeProps.pageMessages || completeProps.pageMessages.length == 0) {
         // with a cancel, need to timeout so todo will update correctly
         if (this.bHasCancel) {
@@ -170,10 +180,10 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
         } else {
           this.updateSelf();
         }
-      } else {
-        this.showPageMessages(completeProps);
       }
     }
+
+    this.showPageMessages(completeProps);
   }
 
   showPageMessages(completeProps: FlowContainerProps) {

packages/angular-sdk-components/src/lib/_components/infra/assignment/assignment.component.html

@@ -1,5 +1,5 @@
 <div>
-  <div><component-mapper name="AlertBanner" [props]="{ banners }" [parent]="this"></component-mapper></div>
+  <div><component-mapper name="AlertBanner" [props]="{ banners: bannerService.banners }" [parent]="this"></component-mapper></div>
   <div *ngIf="bHasNavigation$" class="psdk-stepper">
     <component-mapper
       name="MultiStep"

packages/angular-sdk-components/src/lib/_components/infra/assignment/assignment.component.ts

@@ -8,6 +8,7 @@ import { ErrorMessagesService } from '../../../_messages/error-messages.service'
 import { ProgressSpinnerService } from '../../../_messages/progress-spinner.service';
 import { ReferenceComponent } from '../../infra/reference/reference.component';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { BannerService } from '../../../_services/banner.service';
 
 function getRefreshProps(refreshConditions) {
   // refreshConditions cuurently supports only "Changes" event
@@ -37,7 +38,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   @Input() isCreateStage$: boolean;
   @Input() updateToken$: number;
   @Input() isInModal$ = false;
-  @Input() banners;
 
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -75,12 +75,15 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   localeCategory = 'Assignment';
   localeReference;
 
+  snackBarRef;
+
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
     private ngZone: NgZone,
-    private snackBar: MatSnackBar
+    private snackBar: MatSnackBar,
+    public bannerService: BannerService
   ) {}
 
   ngOnInit(): void {
@@ -111,6 +114,8 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     // Should always check the bridge to see if the component should update itself (re-render)
     const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
 
+    this.bannerService.updateBanners(this.itemKey$);
+
     // ONLY call updateSelf when the component should update
     //    AND removing the "gate" that was put there since shouldComponentUpdate
     //      should be the real "gate"
@@ -300,6 +305,10 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   buttonClick(sAction, sButtonType) {
+    this.snackBarRef?.dismiss();
+    this.bannerService.clearBanners();
+    // @ts-ignore
+    PCore.getPubSubUtils().publish('clearBannerMessages');
     // right now, done on an individual basis, setting bReInit to true
     // upon the next flow container state change, will cause the flow container
     // to re-initialize
@@ -335,7 +344,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
               })
               .catch(() => {
                 this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Navigation failed!', this.localeCategory)}`, 'Ok');
+                this.snackBarRef = this.snackBar.open(`${this.localizedVal('Navigation failed!', this.localeCategory)}`, 'Ok');
               });
           }
           break;
@@ -354,7 +363,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
             })
             .catch(() => {
               this.psService.sendMessage(false);
-              this.snackBar.open(`${this.localizedVal('Save failed', this.localeCategory)}`, 'Ok');
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Save failed', this.localeCategory)}`, 'Ok');
             });
 
           break;
@@ -381,7 +390,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
               })
               .catch(() => {
                 this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
+                this.snackBarRef = this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
               });
           } else {
             this.psService.sendMessage(true);
@@ -400,7 +409,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
               })
               .catch(() => {
                 this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
+                this.snackBarRef = this.snackBar.open(`${this.localizedVal('Cancel failed!', this.localeCategory)}`, 'Ok');
               });
           }
           break;
@@ -413,23 +422,18 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
       switch (sAction) {
         case 'finishAssignment':
           this.erService.sendMessage('publish', '');
-          if (this.formValid()) {
-            this.bReInit = true;
-            this.psService.sendMessage(true);
-            const finishPromise = this.finishAssignment(this.itemKey$); // JA - was itemID but Nebula/Constellation uses itemKey
-            finishPromise
-              .then(() => {
-                this.psService.sendMessage(false);
-                this.updateChanges();
-              })
-              .catch(() => {
-                this.psService.sendMessage(false);
-                this.snackBar.open(`${this.localizedVal('Submit failed!', this.localeCategory)}`, 'Ok');
-              });
-          } else {
-            // let snackBarRef = this.snackBar.open("Please fix errors on form.",  "Ok");
-            this.erService.sendMessage('show', this.localizedVal('Please fix errors on form.', this.localeCategory));
-          }
+          this.bReInit = true;
+          this.psService.sendMessage(true);
+          const finishPromise = this.finishAssignment(this.itemKey$); // JA - was itemID but Nebula/Constellation uses itemKey
+          finishPromise
+            .then(() => {
+              this.psService.sendMessage(false);
+              this.updateChanges();
+            })
+            .catch(() => {
+              this.psService.sendMessage(false);
+              this.snackBarRef = this.snackBar.open(`${this.localizedVal('Submit failed!', this.localeCategory)}`, 'Ok');
+            });
           break;
         default:
           break;

packages/angular-sdk-components/src/lib/_services/banner.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BannerService {
+  banners: any[] = [];
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+
+  clearBanners() {
+    this.banners = [];
+  }
+
+  updateBanners(itemKey) {
+    let validationErrors = PCore.getMessageManager().getValidationErrorMessages(itemKey) || [];
+    // const completeProps = this.angularPConnect.getCurrentCompleteProps(this) as FlowContainerProps;
+    validationErrors = validationErrors.map(item => ({ message: typeof item === 'string' ? item : `${item.label}: ${item.description}` }));
+    // this.showPageMessages(completeProps);
+
+    if (validationErrors.length) {
+      this.banners = [{ messages: validationErrors?.map(msg => this.localizedVal(msg.message, 'Messages')), variant: 'urgent' }];
+    }
+  }
+}

packages/angular-sdk-components/src/public-api.ts

@@ -124,6 +124,7 @@ export * from './lib/_services/server-config.service';
 export * from './lib/_services/case.service';
 export * from './lib/_services/datapage.service';
 export * from './lib/_services/idle-detection.service';
+export * from './lib/_services/banner.service';
 export * from './lib/_services/endpoints';
 
 export * from './lib/_helpers/case-utils';