Skip to content

Commit 23298c8

Browse files
4manasamanasa
4manasa
and
manasa
authored
Added SelfServiceCaseView template (#355)
Co-authored-by: manasa <[email protected]>
1 parent 19e9625 commit 23298c8

File tree

8 files changed

+492
-2
lines changed

8 files changed

+492
-2
lines changed

‎packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ import { OneColumnTabComponent } from '../../_components/template/one-column-tab
8383
import { PageComponent } from '../../_components/template/page/page.component';
8484
import { PromotedFiltersComponent } from '../../_components/template/promoted-filters/promoted-filters.component';
8585
import { SearchGroupsComponent } from '../../_components/template/advanced-search/search-groups/search-groups.component';
86+
import { SelfServiceCaseViewComponent } from '../../_components/template/self-service-case-view/self-service-case-view.component';
8687
import { SimpleTableComponent } from '../../_components/template/simple-table/simple-table.component';
8788
import { SimpleTableManualComponent } from '../../_components/template/simple-table-manual/simple-table-manual.component';
8889
import { SimpleTableSelectComponent } from '../../_components/template/simple-table-select/simple-table-select.component';
@@ -226,6 +227,7 @@ const pegaSdkComponentMap = {
226227
SearchForm: SearchFormComponent,
227228
SearchGroups: SearchGroupsComponent,
228229
SelectableCard: SelectableCardComponent,
230+
SelfServiceCaseView: SelfServiceCaseViewComponent,
229231
SemanticLink: SemanticLinkComponent,
230232
SimpleTable: SimpleTableComponent,
231233
SimpleTableManual: SimpleTableManualComponent,

‎packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-case-summary/material-case-summary.component.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,10 @@
3535
else hasSecondaryValue
3636
"
3737
>
38-
<component-mapper name="Operator" [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel }"></component-mapper>
38+
<component-mapper
39+
name="Operator"
40+
[props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel || field?.config.displayLabel }"
41+
></component-mapper>
3942
</div>
4043
<ng-template #hasSecondaryValue>
4144
<div class="psdk-csf-secondary-field">

‎packages/angular-sdk-components/src/lib/_components/infra/stages/stages.component.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
}
2828

2929
.psdk-stages-bar {
30-
margin: 1rem 0rem;
3130
background-color: var(--mat-sys-surface-container);
3231
border-radius: 0.5rem;
3332
border: 0.0625rem solid var(--mat-sys-outline-variant);

‎packages/angular-sdk-components/src/lib/_components/template/self-service-case-view/self-service-case-view.component.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<div *ngIf="showCaseActions" class="psdk-self-service-case-view-header">
2+
<div>{{ this.heading$ }}</div>
3+
<div class="psdk-case-view-buttons">
4+
<button mat-raised-button color="secondary" [matMenuTriggerFor]="actionMenu">{{ localizedVal('Actions...', localeCategory) }}</button>
5+
<mat-menu #actionMenu="matMenu" overlapTrigger="false">
6+
<ng-container *ngFor="let action of arAvailableActions$">
7+
<button mat-menu-item (click)="_menuActionClick(action)">
8+
{{ localizedVal(action.name, '', localeKey) }}
9+
</button>
10+
</ng-container>
11+
<ng-container *ngFor="let process of arAvailabeProcesses$">
12+
<button mat-menu-item (click)="_menuProcessClick(process)">
13+
{{ process.name }}
14+
</button>
15+
</ng-container>
16+
</mat-menu>
17+
</div>
18+
</div>
19+
<div class="psdk-case-view" id="case-view">
20+
<div class="psdk-case-view-info">
21+
<div *ngIf="showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)">
22+
<mat-toolbar class="psdk-case-view-toolbar">
23+
<mat-toolbar-row class="psdk-case-view-toolbar-row">
24+
<div class="psdk-case-view-heading">
25+
<div>
26+
<h1 id="case-name">{{ heading$ }}</h1>
27+
</div>
28+
<div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
29+
<div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
30+
</div>
31+
</mat-toolbar-row>
32+
</mat-toolbar>
33+
<div class="psdk-case-view-divider"></div>
34+
<div class="psdk-case-view-summary">
35+
<component-mapper
36+
name="CaseSummaryFields"
37+
[props]="{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }"
38+
></component-mapper>
39+
</div>
40+
</div>
41+
</div>
42+
<div class="psdk-case-view-main">
43+
<div>
44+
<div *ngFor="let kid of arChildren$">
45+
<div
46+
*ngIf="
47+
kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' &&
48+
kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages' &&
49+
showCaseLifecycle
50+
"
51+
>
52+
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<div *ngFor="let kid of arChildren$">
58+
<div
59+
*ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'"
60+
>
61+
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
62+
</div>
63+
</div>
64+
65+
<div *ngFor="let kid of arChildren$">
66+
<div *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'">
67+
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
68+
</div>
69+
</div>
70+
</div>
71+
<div class="psdk-case-view-utilities">
72+
<div *ngIf="arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()">
73+
<div *ngFor="let kid of arChildren$">
74+
<div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
75+
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</div>

‎packages/angular-sdk-components/src/lib/_components/template/self-service-case-view/self-service-case-view.component.scss‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
h1 {
2+
font-size: 1.1rem;
3+
line-height: 1.3rem;
4+
}
5+
6+
::ng-deep .mat-mdc-menu-panel {
7+
overflow: unset;
8+
max-width: unset;
9+
}
10+
11+
.psdk-case-view-label {
12+
font-size: 1rem;
13+
display: block;
14+
transform: translateY(0.2em) scale(0.75) perspective(100px) translateZ(0.001px);
15+
-ms-transform: translateY(0.2em) scale(0.75);
16+
width: 133.33333%;
17+
border-radius: 0.6125rem;
18+
}
19+
20+
.psdk-case-view {
21+
box-sizing: border-box;
22+
display: flex;
23+
}
24+
25+
.ng-case-view-toolbar {
26+
padding: 0.625rem 0.625rem;
27+
}
28+
29+
.psdk-case-icon-div {
30+
background-color: var(--mat-sys-on-primary-fixed);
31+
border-radius: 1rem;
32+
padding: 0.5rem 0.3rem 0.3rem 0.3rem;
33+
}
34+
.psdk-case-svg-icon {
35+
width: 2rem;
36+
padding: 0rem 0.3125rem;
37+
filter: var(--app-white-color-filter);
38+
}
39+
40+
.psdk-case-view-info-box {
41+
display: flex;
42+
flex-direction: row;
43+
padding: 0rem 0.3125rem 0rem 0rem;
44+
}
45+
46+
.psdk-case-view-info {
47+
flex: 0 0 auto;
48+
width: 25rem;
49+
float: left;
50+
// padding: 0rem 0.3125rem 0rem 0rem;
51+
background-color: var(--mat-sys-surface-container);
52+
height: 100%;
53+
}
54+
55+
.psdk-case-view-main {
56+
flex-grow: 2;
57+
float: left;
58+
padding: 0rem 0.3125rem;
59+
height: 100%; /* Should be removed. Only for demonstration */
60+
}
61+
62+
.psdk-case-view-summary {
63+
padding-left: 0.75rem;
64+
}
65+
66+
.psdk-case-view-heading {
67+
display: block;
68+
text-align: left;
69+
padding-left: 0.5rem;
70+
padding-bottom: 0;
71+
padding-top: 5px;
72+
}
73+
.psdk-case-view-heading-id {
74+
font-size: 0.9rem;
75+
font-weight: normal;
76+
}
77+
78+
.psdk-case-view-buttons {
79+
display: flex;
80+
justify-content: flex-start;
81+
padding: 0.3125rem;
82+
}
83+
84+
.psdk-case-view-utilities {
85+
background-color: var(--mat-sys-surface-container);
86+
width: 21.875rem;
87+
float: left;
88+
padding: 0rem 0.3125rem;
89+
}
90+
91+
.psdk-case-view-divider {
92+
border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
93+
}
94+
95+
.psdk-status {
96+
padding: 0.3125rem 0.3125rem;
97+
background-color: var(--mat-sys-primary);
98+
color: var(--mat-sys-surface-container);
99+
width: fit-content;
100+
margin: 0.625rem;
101+
}
102+
103+
.psdk-case-view-toolbar {
104+
background-color: var(--mat-sys-primary);
105+
justify-content: center;
106+
}
107+
108+
button {
109+
margin: 0rem 0.3125rem;
110+
}
111+
112+
.psdk-case-view-toolbar-row {
113+
padding-left: 1rem;
114+
white-space: normal;
115+
height: auto;
116+
}
117+
118+
.psdk-self-service-case-view-header {
119+
display: flex;
120+
justify-content: space-around;
121+
align-items: center;
122+
margin: 10px;
123+
background-color: var(--mat-sys-primary);
124+
}

‎packages/angular-sdk-components/src/lib/_components/template/self-service-case-view/self-service-case-view.component.spec.ts‎

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

0 commit comments

Comments
 (0)