Skip to content

Commit 35f138a

Browse files
4manasamanasa
4manasa
and
manasa
authored
Added support for confirmation template (#191)
Co-authored-by: manasa <[email protected]>
1 parent 2006979 commit 35f138a

21 files changed

+445
-87
lines changed

‎src/app/_components/_forms/text/text.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<div class="psdk-label-infix-readonly">
2-
<span class="psdk-label-wrapper-readonly">
3-
<label class="psdk-label-readonly">{{ label$ }}</label>
4-
</span>
1+
<div class="psdk-grid-filter">
2+
<div class="psdk-details-fields-label">
3+
{{ label$ }}
4+
</div>
55
<div class="psdk-data-readonly">
66
<label *ngIf="formatAs$ != 'url'">{{ formattedValue$ }}</label>
77
<a *ngIf="formatAs$ == 'url'" href="{{ formattedUrl$ }}">{{ formattedValue$ }}</a>

‎src/app/_components/_forms/text/text.component.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,17 @@
1515
::ng-deep .mat-mdc-form-field-infix {
1616
width: auto;
1717
}
18+
19+
.psdk-grid-filter {
20+
display: grid;
21+
grid-template-columns: repeat(2, minmax(0, 1fr));
22+
column-gap: calc(2 * 0.5rem);
23+
row-gap: calc(2 * 0.5rem);
24+
align-items: start;
25+
}
26+
27+
.psdk-details-fields-label {
28+
color: rgba(0, 0, 0, 0.54);
29+
margin: 8px 0px;
30+
}
31+

‎src/app/_components/_templates/confirmation/confirmation.component.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div>
2+
<div *ngIf="showConfirmView">
3+
<h2 id='confirm-label' class="confirm-label">{{label}}</h2>
4+
<div *ngIf="showDetails">
5+
<app-details [pConn$]="pConn$"></app-details>
6+
</div>
7+
<div *ngIf="showTasks && toDoList?.length > 0">
8+
<app-todo
9+
[pConn$]="pConn$"
10+
[datasource$]="{source: toDoList}"
11+
[headerText$]="'Open Tasks'"
12+
[type$]="CONSTS.TODO"
13+
[isConfirm]="true"
14+
></app-todo>
15+
</div>
16+
<div class="done-button">
17+
<button mat-raised-button color="primary" (click)="onConfirmViewClose()">Done</button>
18+
</div>
19+
</div>
20+
<div *ngIf="toDoList?.length > 0">
21+
<app-todo
22+
[pConn$]="pConn$"
23+
[datasource$]="{source: toDoList}"
24+
[headerText$]="'Tasks'"
25+
[type$]=CONSTS.TODO
26+
[isConfirm]="true"
27+
></app-todo>
28+
</div>
29+
</div>

‎src/app/_components/_templates/confirmation/confirmation.component.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.done-button {
2+
justify-content: flex-end;
3+
display: flex;
4+
padding-bottom: 1rem;
5+
}
6+
7+
.confirm-label {
8+
padding: 0px 16px;
9+
margin: 0px;
10+
}

‎src/app/_components/_templates/confirmation/confirmation.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { ConfirmationComponent } from './confirmation.component';
3+
4+
5+
describe('ConfirmationComponent', () => {
6+
let component: ConfirmationComponent;
7+
let fixture: ComponentFixture<ConfirmationComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ ConfirmationComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ConfirmationComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/_components/_templates/confirmation/confirmation.component.ts‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { Component, OnInit, Input } from '@angular/core';
2+
import { AngularPConnectService } from '../../../_bridge/angular-pconnect';
3+
import { getToDoAssignments } from '../../flow-container/helpers';
4+
5+
6+
@Component({
7+
selector: 'app-confirmation',
8+
templateUrl: './confirmation.component.html',
9+
styleUrls: ['./confirmation.component.scss'],
10+
})
11+
export class ConfirmationComponent implements OnInit {
12+
rootInfo: any;
13+
datasource: any;
14+
showTasks: any;
15+
detailProps: any;
16+
toDoList: any;
17+
label: any;
18+
CONSTS: any;
19+
showDetails: boolean;
20+
constructor(private angularPConnect: AngularPConnectService) { }
21+
22+
@Input() pConn$: any;
23+
24+
angularPConnectData: any = {};
25+
PCore$: any;
26+
configProps$: any;
27+
showConfirmView = true;
28+
29+
ngOnInit(): void {
30+
// First thing in initialization is registering and subscribing to the AngularPConnect service
31+
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
32+
if (!this.PCore$) {
33+
this.PCore$ = window.PCore;
34+
}
35+
this.CONSTS = this.PCore$.getConstants();
36+
const activeContainerItemID = this.PCore$.getContainerUtils().getActiveContainerItemName(
37+
this.pConn$.getTarget()
38+
);
39+
this.rootInfo = this.PCore$.getContainerUtils().getContainerItemData(
40+
this.pConn$.getTarget(),
41+
activeContainerItemID
42+
);
43+
this.checkAndUpdate();
44+
}
45+
46+
ngOnDestroy() {
47+
if (this.angularPConnectData.unsubscribeFn) {
48+
this.angularPConnectData.unsubscribeFn();
49+
}
50+
}
51+
52+
onStateChange() {
53+
this.checkAndUpdate();
54+
}
55+
56+
checkAndUpdate() {
57+
// Should always check the bridge to see if the component should
58+
// update itself (re-render)
59+
const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
60+
61+
// ONLY call updateSelf when the component should update
62+
if (bUpdateSelf) {
63+
this.updateSelf();
64+
}
65+
}
66+
67+
updateSelf() {
68+
const theConfigProps = this.pConn$.getConfigProps();
69+
this.datasource = theConfigProps?.datasource;
70+
this.showTasks = theConfigProps?.showTasks;
71+
this.label = theConfigProps?.label;
72+
// Get the inherited props from the parent to determine label settings
73+
// Not using whatsNext at the moment, need to figure out the use of it
74+
const whatsNext = this.datasource?.source;
75+
const items = whatsNext?.length > 0 ? whatsNext.map(item => item.label) : '';
76+
const todoProps = { ...theConfigProps, renderTodoInConfirm: true };
77+
this.toDoList = getToDoAssignments(this.pConn$);
78+
this.detailProps = { ...theConfigProps, showLabel: false };
79+
this.showDetails = this.pConn$?.getChildren()?.[0]?.getPConnect()?.getChildren()?.length > 0;
80+
}
81+
82+
onConfirmViewClose() {
83+
this.showConfirmView = false;
84+
this.PCore$.getPubSubUtils().publish(this.PCore$.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, this.rootInfo);
85+
};
86+
}

‎src/app/_components/_templates/default-form/default-form.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<!-- When adding a component here, add the same component in 'region' template as well -->
2+
<div *ngIf="!NO_HEADER_TEMPLATES.includes(template) && showLabel">
3+
<div class="template-title-container">{{label}}</div>
4+
</div>
25
<div [className]="divClass$">
36
<div *ngFor="let kid of arChildren$" [ngClass]="{'grid-column': kid.getPConnect().getComponentName() === 'View'}">
47
<div [ngSwitch]="kid.getPConnect().getComponentName()">

‎src/app/_components/_templates/default-form/default-form.component.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,10 @@
2424

2525
.psdk-default-form-three-column .grid-column {
2626
grid-column: 1 / span 3;
27-
}
27+
}
28+
29+
.template-title-container {
30+
font-size: calc(0.9375rem);
31+
font-weight: 600;
32+
margin: 10px 0px;
33+
}

‎src/app/_components/_templates/default-form/default-form.component.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,29 @@ export class DefaultFormComponent implements OnInit {
1414
configProps$: Object;
1515
arChildren$: Array<any>;
1616
divClass$: string;
17+
template: any;
18+
showLabel: any;
19+
label: any;
20+
21+
NO_HEADER_TEMPLATES = [
22+
'SubTabs',
23+
'SimpleTable',
24+
'Details',
25+
'DetailsTwoColumn',
26+
'DetailsThreeColumn',
27+
'NarrowWideDetails',
28+
'WideNarrowDetails',
29+
'Confirmation'
30+
];
1731

1832
constructor() {}
1933

2034
ngOnInit(): void {
2135
let configProps = this.pConn$.getConfigProps();
36+
this.template = configProps?.template;
37+
const propToUse = { ...this.pConn$.getInheritedProps() };
38+
this.showLabel = propToUse?.showLabel;
39+
this.label = propToUse?.label;
2240
let kids = this.pConn$.getChildren();
2341

2442
let numCols = configProps.NumCols ? configProps.NumCols : '1';

‎src/app/_components/flow-container/flow-container.component.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div style="text-align: left" class="psdk-flow-container-top">
2-
<div *ngIf="!bHasCaseMessages$; else show_messages">
2+
<div *ngIf="!bShowConfirm">
33
<h2 *ngIf="!todo_showTodo$">{{ containerName$ }}</h2>
44
<h5 *ngIf="instructionText$ !== ''">{{ instructionText$ }}</h5>
55
<div *ngIf="todo_showTodo$">
@@ -9,20 +9,23 @@ <h5 *ngIf="instructionText$ !== ''">{{ instructionText$ }}</h5>
99
[datasource$]="todo_datasource$"
1010
[showTodoList$]="todo_showTodoList$"
1111
[headerText$]="todo_headerText$"
12-
[type$]="todo_type$"
12+
[type$]="TODO"
1313
[context$]="todo_context$"
1414
></app-todo>
1515
</div>
1616
<div *ngIf="!todo_showTodo$">
1717
<app-assignment [pConn$]="pConn$" [formGroup$]="formGroup$" [arChildren$]="arChildren$" [itemKey$]="itemKey$"></app-assignment>
1818
</div>
1919
</div>
20-
<ng-template #show_messages>
20+
<div *ngIf="bHasCaseMessages$">
2121
<mat-card class="psdk-message-card">
2222
<div style="display: flex; flex-direction: row">
2323
<div><img class="psdk-icon" src="{{ checkSvg$ }}" /></div>
2424
<div>{{ caseMessages$ }}</div>
2525
</div>
2626
</mat-card>
27-
</ng-template>
28-
</div>
27+
</div>
28+
<div *ngIf="bShowBanner && bShowConfirm">
29+
<app-view [formGroup$]="formGroup$" [pConn$]="confirm_pconn"></app-view>
30+
</div>
31+
</div>

0 commit comments

Comments
 (0)