Skip to content

Commit ca28b84

Browse files
author
manasa
committed
Added Todo component
1 parent a72cd03 commit ca28b84

File tree

4 files changed

+356
-0
lines changed

4 files changed

+356
-0
lines changed
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div *ngIf="surveyCase">
2+
<div class="banner-container">
3+
<div class="icon-wrapper">
4+
<div class="icon-box">
5+
<img class="quick-link-icon" [src]="img" />
6+
</div>
7+
</div>
8+
<div class="content-text">
9+
<h2>Share Your Experience</h2>
10+
<p>Take a quick survey about your recent experience with MediaCo.</p>
11+
</div>
12+
<div class="action-wrapper">
13+
<button (click)="clickGo(surveyCase)" class="start-btn">
14+
Start
15+
<span class="material-icons">arrow_forward</span>
16+
</button>
17+
</div>
18+
</div>
19+
</div>
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
$font-family: 'Roboto', sans-serif;
2+
3+
$text-white: #ffffff;
4+
$btn-text-color: #5c4498;
5+
6+
.banner-container {
7+
font-family: $font-family;
8+
background: linear-gradient(135deg, rgb(103, 80, 164) 0%, rgb(248, 20, 227) 50%, rgb(0, 201, 255) 100%) 0% 0% / 200% 200%;
9+
10+
border-radius: 24px;
11+
padding: 24px 32px;
12+
display: flex;
13+
align-items: center;
14+
gap: 24px;
15+
color: $text-white;
16+
box-shadow: 0 8px 20px rgba(94, 75, 159, 0.25);
17+
18+
@media (max-width: 768px) {
19+
flex-direction: column;
20+
text-align: center;
21+
padding: 32px 24px;
22+
}
23+
24+
position: absolute;
25+
z-index: 10;
26+
left: 29%;
27+
top: 15rem;
28+
}
29+
30+
.icon-wrapper {
31+
flex-shrink: 0;
32+
33+
.icon-box {
34+
width: 72px;
35+
height: 72px;
36+
background: rgba(255, 255, 255, 0.15);
37+
border-radius: 16px;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
backdrop-filter: blur(4px);
42+
43+
.material-icons {
44+
font-size: 36px;
45+
color: $text-white;
46+
}
47+
}
48+
}
49+
50+
.content-text {
51+
flex-grow: 1;
52+
display: flex;
53+
flex-direction: column;
54+
justify-content: center;
55+
56+
h2 {
57+
margin: 0 0 6px 0;
58+
font-size: 22px;
59+
font-weight: 400;
60+
}
61+
62+
p {
63+
margin: 0;
64+
font-size: 15px;
65+
opacity: 0.9;
66+
font-weight: 400;
67+
line-height: 1.4;
68+
}
69+
}
70+
71+
.action-wrapper {
72+
flex-shrink: 0;
73+
74+
.start-btn {
75+
background-color: #ffffff;
76+
color: #5c4498;
77+
border: none;
78+
padding: 12px 28px;
79+
border-radius: 50px;
80+
cursor: pointer;
81+
display: flex;
82+
align-items: center;
83+
gap: 6px;
84+
}
85+
}
86+
87+
.quick-link-icon {
88+
height: 35px;
89+
filter: brightness(0) saturate(100%) invert(100%);
90+
}
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { TodoComponent } from './todo.component';
4+
5+
describe('TodoComponent', () => {
6+
let component: TodoComponent;
7+
let fixture: ComponentFixture<TodoComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [TodoComponent]
12+
}).compileComponents();
13+
14+
fixture = TestBed.createComponent(TodoComponent);
15+
component = fixture.componentInstance;
16+
fixture.detectChanges();
17+
});
18+
19+
it('should create', () => {
20+
expect(component).toBeTruthy();
21+
});
22+
});
Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
4+
import { ProgressSpinnerService } from '@pega/angular-sdk-components';
5+
import { ErrorMessagesService } from '@pega/angular-sdk-components';
6+
import { Utils } from '@pega/angular-sdk-components';
7+
import { updateWorkList } from '@pega/angular-sdk-components';
8+
9+
const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
10+
return PCore.getDataPageUtils()
11+
.getDataAsync(
12+
datapage,
13+
context,
14+
{},
15+
{
16+
pageNumber: 1,
17+
pageSize: numberOfRecords
18+
},
19+
{
20+
select: Object.keys(fields).map(key => ({ field: PCore.getAnnotationUtils().getPropertyName(fields[key]) })),
21+
sortBy: [
22+
{ field: 'pxUrgencyAssign', type: 'DESC' },
23+
{ field: 'pxDeadlineTime', type: 'ASC' },
24+
{ field: 'pxCreateDateTime', type: 'DESC' }
25+
]
26+
},
27+
{
28+
invalidateCache: true,
29+
additionalApiParams: {
30+
includeTotalCount
31+
}
32+
}
33+
)
34+
.then(response => {
35+
return {
36+
...response,
37+
data: (Array.isArray(response?.data) ? response.data : []).map(row =>
38+
Object.keys(fields).reduce((obj, key) => {
39+
obj[key] = row[PCore.getAnnotationUtils().getPropertyName(fields[key])];
40+
return obj;
41+
}, {})
42+
)
43+
};
44+
});
45+
};
46+
47+
const getMappedValue = value => {
48+
const mappedValue = PCore.getEnvironmentInfo().getKeyMapping(value);
49+
return mappedValue === null ? value : mappedValue;
50+
};
51+
52+
interface ToDoProps {
53+
// If any, enter additional props that only exist on this component
54+
datasource?: any;
55+
headerText?: string;
56+
myWorkList?: any;
57+
label?: string;
58+
readOnly?: boolean;
59+
}
60+
61+
@Component({
62+
selector: 'app-todo',
63+
templateUrl: './todo.component.html',
64+
styleUrls: ['./todo.component.scss'],
65+
imports: [CommonModule]
66+
})
67+
export class TodoComponent implements OnInit, OnDestroy {
68+
img = this.utils.getImageSrc('message-circle', this.utils.getSDKStaticContentUrl());
69+
@Input() pConn$: typeof PConnect;
70+
@Input() caseInfoID$: string;
71+
@Input() datasource$: any;
72+
@Input() headerText$?: string;
73+
@Input() showTodoList$ = true;
74+
@Input() target$: string;
75+
@Input() type$ = 'worklist';
76+
@Input() context$: string;
77+
@Input() myWorkList$: any;
78+
@Input() isConfirm;
79+
80+
configProps$: ToDoProps;
81+
arAssignments$: any[];
82+
assignmentsSource$: any;
83+
CONSTS: typeof publicConstants;
84+
bLogging = true;
85+
surveyCase: any[];
86+
constructor(
87+
private psService: ProgressSpinnerService,
88+
private erService: ErrorMessagesService,
89+
private utils: Utils
90+
) {}
91+
92+
ngOnInit() {
93+
this.CONSTS = PCore.getConstants();
94+
const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = PCore.getEvents().getCaseEvent();
95+
96+
PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, () => this.updateToDo(), 'updateToDo');
97+
PCore.getPubSubUtils().subscribe(CREATE_STAGE_SAVED, () => this.updateList(), CREATE_STAGE_SAVED);
98+
PCore.getPubSubUtils().subscribe(CREATE_STAGE_DELETED, () => this.updateList(), CREATE_STAGE_DELETED);
99+
100+
this.updateToDo();
101+
}
102+
103+
ngOnDestroy() {
104+
const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = PCore.getEvents().getCaseEvent();
105+
106+
PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'updateToDo');
107+
PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_SAVED, CREATE_STAGE_SAVED);
108+
PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_DELETED, CREATE_STAGE_DELETED);
109+
}
110+
111+
updateList() {
112+
const {
113+
WORK_BASKET: {
114+
DATA_PAGES: { D__PY_MY_WORK_LIST }
115+
}
116+
} = PCore.getConstants();
117+
updateWorkList(getPConnect, getMappedValue(D__PY_MY_WORK_LIST));
118+
}
119+
120+
updateToDo() {
121+
this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ToDoProps;
122+
123+
this.headerText$ = this.headerText$ || this.configProps$.headerText;
124+
this.datasource$ = this.datasource$ || this.configProps$.datasource;
125+
this.myWorkList$ = this.myWorkList$ || this.configProps$.myWorkList;
126+
127+
this.assignmentsSource$ = this.datasource$?.source || this.myWorkList$?.source;
128+
129+
if (this.showTodoList$) {
130+
if (this.assignmentsSource$) {
131+
// this.arAssignments$ = this.topThreeAssignments(this.assignmentsSource$);
132+
this.surveyCase = this.surveyAssignment(this.assignmentsSource$);
133+
} else if (this.myWorkList$.datapage) {
134+
fetchMyWorkList(this.myWorkList$.datapage, this.pConn$.getComponentConfig()?.myWorkList.fields, 3, true, this.context$).then(responseData => {
135+
this.deferLoadWorklistItems(responseData);
136+
});
137+
} else {
138+
this.arAssignments$ = [];
139+
}
140+
} else {
141+
// get caseInfoId assignment.
142+
143+
if (this.caseInfoID$ != undefined) {
144+
this.arAssignments$ = this.getCaseInfoAssignment(this.assignmentsSource$, this.caseInfoID$);
145+
}
146+
}
147+
}
148+
149+
deferLoadWorklistItems(responseData) {
150+
this.arAssignments$ = responseData.data;
151+
}
152+
153+
surveyAssignment(assignmentsSource: any[]) {
154+
const [firstAssignment] = assignmentsSource || [];
155+
if (firstAssignment?.classname === 'DIXL-MediaCo-Work-SatisfactionSurvey') {
156+
return firstAssignment;
157+
}
158+
}
159+
160+
// topThreeAssignments(assignmentsSource: any[]): any[] {
161+
// return Array.isArray(assignmentsSource) ? assignmentsSource.slice(0, 1) : [];
162+
// }
163+
164+
getCaseInfoAssignment(assignmentsSource: any[], caseInfoID: string) {
165+
const result: any[] = [];
166+
for (const source of assignmentsSource) {
167+
if (source.ID.indexOf(caseInfoID) >= 0) {
168+
const listRow = JSON.parse(JSON.stringify(source));
169+
// urgency becomes priority
170+
listRow.priority = listRow.urgency || undefined;
171+
// mimic regular list
172+
listRow.id = listRow.ID || undefined;
173+
result.push(listRow);
174+
}
175+
}
176+
return result;
177+
}
178+
179+
getAssignmentId(assignment) {
180+
return this.type$ === this.CONSTS.TODO ? assignment.ID : assignment.id;
181+
}
182+
183+
isChildCase(assignment) {
184+
return assignment.isChild;
185+
}
186+
187+
clickGo(assignment) {
188+
const id = this.getAssignmentId(assignment);
189+
let { classname = '' } = assignment;
190+
const sTarget = this.pConn$.getContainerName();
191+
const sTargetContainerName = sTarget;
192+
193+
const options: any = { containerName: sTargetContainerName, channelName: '' };
194+
195+
if (classname === null || classname === '') {
196+
classname = this.pConn$.getCaseInfo().getClassName();
197+
}
198+
199+
if (sTarget === 'workarea') {
200+
options.isActionFromToDoList = true;
201+
options.target = '';
202+
options.context = null;
203+
options.isChild = this.isChildCase(assignment);
204+
} else {
205+
options.isActionFromToDoList = false;
206+
options.target = sTarget;
207+
}
208+
209+
this.psService.sendMessage(true);
210+
211+
this.pConn$
212+
.getActionsApi()
213+
.openAssignment(id, classname, options)
214+
.then(() => {
215+
this.psService.sendMessage(false);
216+
if (this.bLogging) {
217+
console.log(`openAssignment completed`);
218+
}
219+
})
220+
.catch(() => {
221+
this.psService.sendMessage(false);
222+
this.erService.sendMessage('show', 'Failed to open');
223+
});
224+
}
225+
}

0 commit comments

Comments
 (0)