fix: Fixed styling issues and cancel alert (#362)

Co-authored-by: tumms2021389 <[email protected]>

Author: tammy-a11y

packages/angular-sdk-components/src/lib/_components/field/cancel-alert/cancel-alert.component.html

@@ -1,17 +1,15 @@
 <div *ngIf="bShowAlert$" class="psdk-cancel-alert-background">
   <div class="psdk-cancel-alert-top">
-    <h3 *ngIf="heading$ != ''">{{ heading$ }}</h3>
+    <h3>{{ localizedVal('Discard unsaved changes?', localeCategory) }}</h3>
     <div>
-      <p>{{ body1$ }}</p>
-      <p>{{ body2$ }}</p>
+      <p>{{ localizedVal('You have unsaved changes. You can discard them or go back to keep working.', localeCategory) }}</p>
     </div>
     <mat-grid-list cols="2" rowHeight="6.25rem">
       <mat-grid-tile>
-        <button mat-raised-button color="secondary" (click)="buttonClick('save')">{{ localizedVal('Save for later', localeCategory) }}</button>
+        <button mat-raised-button color="secondary" (click)="buttonClick('continue')">{{ localizedVal('Go back', localeCategory) }}</button>
       </mat-grid-tile>
       <mat-grid-tile>
-        <button mat-raised-button color="secondary" (click)="buttonClick('continue')">{{ localizedVal('Continue Working', localeCategory) }}</button>
-        <button mat-raised-button color="primary" (click)="buttonClick('delete')">{{ localizedVal('Delete', localeCategory) }}</button>
+        <button mat-raised-button color="primary" (click)="buttonClick('discard')">{{ localizedVal('Discard', localeCategory) }}</button>
       </mat-grid-tile>
     </mat-grid-list>
   </div>

packages/angular-sdk-components/src/lib/_components/field/cancel-alert/cancel-alert.component.scss

@@ -9,6 +9,7 @@
   z-index: 9999;
   top: 0px;
   left: 0px;
+  background: rgba(0, 0, 0, 0.5);
 }
 
 .psdk-cancel-alert-top {
@@ -19,4 +20,5 @@
   border-radius: 10px;
   padding: 20px;
   box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
+  background-color: var(--mat-sys-surface-container);
 }

packages/angular-sdk-components/src/lib/_components/field/cancel-alert/cancel-alert.component.ts

@@ -15,9 +15,6 @@ export class CancelAlertComponent implements OnChanges {
   @Input() bShowAlert$: boolean;
   @Output() onAlertState$: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-  heading$: string;
-  body1$: string;
-  body2$: string;
   itemKey: string;
   localizedVal: Function;
   localeCategory = 'ModalContainer';
@@ -26,28 +23,18 @@ export class CancelAlertComponent implements OnChanges {
   ngOnChanges() {
     if (this.bShowAlert$) {
       this.psService.sendMessage(false);
-
       const contextName = this.pConn$.getContextName();
-      const caseInfo = this.pConn$.getCaseInfo();
-      const caseName = caseInfo.getName();
-      const ID = caseInfo.getID();
       this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
-
       this.itemKey = contextName;
-      this.heading$ = `Delete ${caseName} (${ID})`;
-      this.body1$ = `${this.localizedVal('Are you sure you want to delete ', this.localeCategory) + caseName} (${ID})?`;
-      this.body2$ = this.localizedVal('Alternatively, you can continue working or save your work for later.', this.localeCategory);
-
-      // this.onAlertState$.emit(true);
     }
   }
 
-  dismissAlert() {
+  dismissAlertOnly() {
     this.bShowAlert$ = false;
     this.onAlertState$.emit(false);
   }
 
-  dismissAlertOnly() {
+  dismissAlert() {
     this.bShowAlert$ = false;
     this.onAlertState$.emit(true);
   }
@@ -61,26 +48,10 @@ export class CancelAlertComponent implements OnChanges {
     this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
     switch (sAction) {
-      case 'save':
-        this.psService.sendMessage(true);
-        // eslint-disable-next-line no-case-declarations
-        const savePromise = actionsAPI.saveAndClose(this.itemKey);
-        savePromise
-          .then(() => {
-            this.psService.sendMessage(false);
-            this.dismissAlert();
-
-            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CASE_CREATED);
-          })
-          .catch(() => {
-            this.psService.sendMessage(false);
-            this.sendMessage(this.localizedVal('Save failed', this.localeCategory));
-          });
-        break;
       case 'continue':
         this.dismissAlertOnly();
         break;
-      case 'delete':
+      case 'discard':
         this.psService.sendMessage(true);
 
         // eslint-disable-next-line no-case-declarations

packages/angular-sdk-components/src/lib/_components/template/simple-table-manual/simple-table-manual.component.html

@@ -44,7 +44,7 @@ <h3 *ngIf="label" className="label" style="font-weight: bold">
           <td mat-cell *matCellDef="let element; index as j">
             <div class="header-icon">
               <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
-                <img class="psdk-utility-card-actions-svg-icon" src="{{ settingsSvgIcon$ }}" />
+                <mat-icon>more_vert</mat-icon>
               </button>
               <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
                 <button mat-menu-item (click)="editRecord(element, j)">Edit</button>
@@ -82,7 +82,7 @@ <h3 *ngIf="label" className="label" style="font-weight: bold">
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element; index as j">
           <button id="delete-button" mat-icon-button (click)="deleteRecord(j)">
-            <img class="psdk-utility-card-action-svg-icon" src="{{ menuIconOverride$ }}" />
+            <mat-icon>delete</mat-icon>
           </button>
         </td>
       </ng-container>

packages/angular-sdk-components/src/lib/_components/template/simple-table-manual/simple-table-manual.component.ts

@@ -9,6 +9,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatIcon } from '@angular/material/icon';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import isEqual from 'fast-deep-equal';
 
@@ -73,6 +74,7 @@ class Group {
     MatOptionModule,
     MatSelectModule,
     MatInputModule,
+    MatIcon,
     forwardRef(() => ComponentMapperComponent)
   ],
   providers: [DatapageService]

projects/angular-test-app/src/containerStyles.scss

@@ -55,6 +55,7 @@ app-modal-view-container {
     padding: 20px;
     box-shadow: 0 0 10px 3px var(--mat-sys-level3);
     overflow-y: auto;
+    max-width: 700px;
   }
 
   .psdk-dialog-float {