Skip to content

Commit 971993f

Browse files
4manasamanasatumms2021389
authored
Displaying the caseType name on self service case view page (#403)
* Displaying the caseType name on self service case view page * self service case view header fixes --------- Co-authored-by: manasa <[email protected]> Co-authored-by: tumms2021389 <[email protected]>
1 parent 47c5038 commit 971993f

File tree

5 files changed

+75
-65
lines changed

5 files changed

+75
-65
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div style="text-align: left" class="psdk-flow-container-top">
22
<div *ngIf="!bShowConfirm">
33
<div *ngIf="!todo_showTodo$">
4-
<h2>{{ containerName$ }}</h2>
4+
<h2 *ngIf="!isMultiStep">{{ containerName$ }}</h2>
55
<div *ngIf="banners?.length">
66
<component-mapper name="AlertBanner" [props]="{ banners }"></component-mapper>
77
</div>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
7070
// itemKey: string = ""; // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
7171

7272
pConnectOfActiveContainerItem;
73+
isMultiStep: any;
7374

7475
constructor(
7576
injector: Injector,
@@ -281,6 +282,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
281282
// this.containerName$ = oWorkMeta["name"];
282283
if (bLoadChildren && oWorkData) {
283284
this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
285+
this.isMultiStep = this.utils.getBooleanValue(oWorkData.caseInfo.assignments?.[0].isMultiStep);
284286
}
285287

286288
// turn off spinner

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

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

55-
<div *ngFor="let kid of arChildren$">
56-
<div
57-
*ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'"
58-
>
59-
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
60-
</div>
61-
</div>
62-
63-
<div *ngFor="let kid of arChildren$">
64-
<div *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'">
65-
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
64+
<div *ngFor="let kid of arChildren$">
65+
<div *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'">
66+
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
67+
</div>
6668
</div>
6769
</div>
68-
</div>
69-
<div class="psdk-case-view-utilities" *ngIf="arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()">
70-
<div *ngFor="let kid of arChildren$">
71-
<div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
72-
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
70+
<div class="psdk-case-view-utilities" *ngIf="arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()">
71+
<div *ngFor="let kid of arChildren$">
72+
<div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
73+
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
74+
</div>
7375
</div>
7476
</div>
7577
</div>

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,16 @@ button {
117117
}
118118

119119
.psdk-self-service-case-view-header {
120+
height: 50px;
120121
display: flex;
121-
justify-content: space-around;
122+
justify-content: space-between;
122123
align-items: center;
123-
margin: 10px;
124124
background-color: var(--mat-sys-primary);
125+
padding: 0px 8px;
126+
}
127+
128+
.heading {
129+
font-size: 20px;
130+
color: var(--mat-sys-on-primary);
131+
font-weight: 600;
125132
}

‎packages/angular-sdk-components/src/lib/_components/template/wss-nav-bar/wss-nav-bar.component.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@
125125
}
126126

127127
mat-toolbar {
128-
margin-bottom: 5px;
129128
background-color: var(--mat-sys-surface-variant);
130129
}
131130

0 commit comments

Comments
 (0)