@pega/angular-sdk-overrides 0.25.3 → 0.25.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/designSystemExtension/wss-quick-create/wss-quick-create.component.scss +0 -1
- package/lib/field/date/date.component.html +1 -1
- package/lib/field/date-time/date-time.component.html +1 -1
- package/lib/field/date-time/date-time.component.ts +5 -1
- package/lib/field/location/location.component.html +2 -2
- package/lib/field/location/location.component.ts +20 -125
- package/lib/field/phone/phone.component.scss +0 -5
- package/lib/infra/Containers/flow-container/flow-container.component.html +1 -1
- package/lib/infra/Containers/flow-container/flow-container.component.ts +1 -1
- package/lib/infra/multi-step/multi-step.component.html +22 -38
- package/lib/infra/multi-step/multi-step.component.scss +13 -6
- package/lib/infra/navbar/navbar.component.html +11 -13
- package/lib/infra/navbar/navbar.component.scss +6 -0
- package/lib/infra/reference/reference.component.ts +5 -0
- package/lib/infra/view/view.component.ts +3 -4
- package/lib/template/list-view/list-view.component.html +170 -167
- package/lib/template/list-view/list-view.component.scss +7 -3
- package/lib/template/list-view/list-view.component.ts +53 -31
- package/lib/template/self-service-case-view/self-service-case-view.component.html +21 -25
- package/lib/template/self-service-case-view/self-service-case-view.component.scss +2 -1
- package/lib/widget/attachment/attachment.component.scss +7 -9
- package/lib/widget/attachment/attachment.component.ts +4 -3
- package/lib/widget/file-utility/file-utility.component.scss +1 -1
- package/lib/widget/quick-create/quick-create.component.ts +41 -22
- package/lib/widget/todo/todo.component.scss +2 -0
- package/package.json +1 -1
|
@@ -1,193 +1,196 @@
|
|
|
1
1
|
<div class="psdk-list-header">
|
|
2
2
|
<div>
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<mat-
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 10px">
|
|
4
|
+
<h3 *ngIf="label" class="label" style="font-weight: bold; margin: 0">
|
|
5
|
+
{{ label }} <span class="results-count">{{ getResultsText() }}</span>
|
|
6
|
+
</h3>
|
|
7
|
+
<mat-form-field *ngIf="bShowSearch$">
|
|
8
|
+
<mat-label class="search-label"><mat-icon>search</mat-icon><span class="psdk-search-label">Search</span> </mat-label>
|
|
9
|
+
<input matInput id="search" (keyup)="applySearch($event)" placeholder="" />
|
|
10
|
+
</mat-form-field>
|
|
11
|
+
</div>
|
|
10
12
|
|
|
11
13
|
<div *ngIf="!bInForm$" class="psdk-outer-div-in-form">
|
|
12
14
|
<div class="psdk-inner-div-in-form" *ngIf="bColumnReorder$">
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
>
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<
|
|
33
|
-
<
|
|
34
|
-
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
|
|
35
|
-
</button>
|
|
36
|
-
<mat-menu #groupMenu>
|
|
37
|
-
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
|
|
38
|
-
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
|
|
39
|
-
</button>
|
|
40
|
-
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
|
|
41
|
-
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
|
|
42
|
-
</button>
|
|
43
|
-
<button mat-menu-item (click)="_filter($event, dCol)">
|
|
44
|
-
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
|
|
45
|
-
</button>
|
|
46
|
-
</mat-menu>
|
|
47
|
-
</div>
|
|
48
|
-
</th>
|
|
49
|
-
<td mat-cell *matCellDef="let element; index as i">
|
|
50
|
-
<button
|
|
51
|
-
*ngIf="_showButton(dCol.config.name, dCol); else regular"
|
|
52
|
-
mat-button
|
|
53
|
-
color="primary"
|
|
54
|
-
(click)="_listViewClick(dCol.config, element)"
|
|
55
|
-
>
|
|
56
|
-
{{ element[dCol.config.name] || '---' }}
|
|
15
|
+
<table
|
|
16
|
+
mat-table
|
|
17
|
+
id="list-view"
|
|
18
|
+
[dataSource]="repeatList$"
|
|
19
|
+
matSort
|
|
20
|
+
cdkDropList
|
|
21
|
+
cdkDropListOrientation="horizontal"
|
|
22
|
+
(cdkDropListDropped)="drop($event)"
|
|
23
|
+
>
|
|
24
|
+
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
|
|
25
|
+
<th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before" cdkDrag>
|
|
26
|
+
{{ dCol.config.label }}
|
|
27
|
+
<div class="psdk-mat-header-filter">
|
|
28
|
+
<img class="psdk-filter-svg-icon" name="filterOnIcon" />
|
|
29
|
+
</div>
|
|
30
|
+
<div class="psdk-mat-header-arrow">
|
|
31
|
+
<img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
|
|
32
|
+
</div>
|
|
33
|
+
<div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
|
|
34
|
+
<button mat-icon-button [matMenuTriggerFor]="groupMenu">
|
|
35
|
+
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
|
|
57
36
|
</button>
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
37
|
+
<mat-menu #groupMenu>
|
|
38
|
+
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
|
|
39
|
+
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
|
|
40
|
+
</button>
|
|
41
|
+
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
|
|
42
|
+
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
|
|
43
|
+
</button>
|
|
44
|
+
<button mat-menu-item (click)="_filter($event, dCol)">
|
|
45
|
+
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
|
|
46
|
+
</button>
|
|
47
|
+
</mat-menu>
|
|
48
|
+
</div>
|
|
49
|
+
</th>
|
|
50
|
+
<td mat-cell *matCellDef="let element; index as i">
|
|
51
|
+
<button
|
|
52
|
+
*ngIf="_showButton(dCol.config.name, dCol); else regular"
|
|
53
|
+
mat-button
|
|
54
|
+
color="primary"
|
|
55
|
+
(click)="_listViewClick(dCol.config, element)"
|
|
56
|
+
>
|
|
57
|
+
{{ element[dCol.config.name] || '---' }}
|
|
58
|
+
</button>
|
|
59
|
+
<ng-template #regular>
|
|
60
|
+
{{ element[dCol.config.name] || '---' }}
|
|
61
|
+
</ng-template>
|
|
62
|
+
</td>
|
|
63
|
+
</ng-container>
|
|
63
64
|
|
|
64
|
-
|
|
65
|
-
|
|
65
|
+
<tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
|
|
66
|
+
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
|
|
66
67
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
68
|
+
<!-- Group header -->
|
|
69
|
+
<ng-container matColumnDef="groupHeader">
|
|
70
|
+
<td mat-cell colspan="999" *matCellDef="let group">
|
|
71
|
+
<mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
|
|
72
|
+
<mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
|
|
73
|
+
<strong
|
|
74
|
+
>{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
|
|
75
|
+
group.totalCounts
|
|
76
|
+
}})</strong
|
|
77
|
+
>
|
|
78
|
+
</td>
|
|
79
|
+
</ng-container>
|
|
79
80
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
</div>
|
|
81
|
+
<tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
|
|
82
|
+
</table>
|
|
83
83
|
</div>
|
|
84
84
|
<div class="psdk-inner-div-in-form" *ngIf="!bColumnReorder$">
|
|
85
|
-
<
|
|
86
|
-
<
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
<
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
<
|
|
97
|
-
<
|
|
98
|
-
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
|
|
99
|
-
</button>
|
|
100
|
-
<mat-menu #groupMenu>
|
|
101
|
-
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
|
|
102
|
-
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
|
|
103
|
-
</button>
|
|
104
|
-
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
|
|
105
|
-
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
|
|
106
|
-
</button>
|
|
107
|
-
<button mat-menu-item (click)="_filter($event, dCol)">
|
|
108
|
-
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
|
|
109
|
-
</button>
|
|
110
|
-
</mat-menu>
|
|
111
|
-
</div>
|
|
112
|
-
</th>
|
|
113
|
-
<td mat-cell *matCellDef="let element; index as i">
|
|
114
|
-
<button
|
|
115
|
-
*ngIf="_showButton(dCol.config.name, dCol); else regular"
|
|
116
|
-
mat-button
|
|
117
|
-
color="primary"
|
|
118
|
-
(click)="_listViewClick(dCol.config, element)"
|
|
119
|
-
>
|
|
120
|
-
{{ element[dCol.config.name] || '---' }}
|
|
85
|
+
<table mat-table id="list-view" [dataSource]="repeatList$" matSort>
|
|
86
|
+
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
|
|
87
|
+
<th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before">
|
|
88
|
+
{{ dCol.config.label }}
|
|
89
|
+
<div class="psdk-mat-header-filter">
|
|
90
|
+
<img class="psdk-filter-svg-icon" name="filterOnIcon" />
|
|
91
|
+
</div>
|
|
92
|
+
<div class="psdk-mat-header-arrow">
|
|
93
|
+
<img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
|
|
94
|
+
</div>
|
|
95
|
+
<div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
|
|
96
|
+
<button mat-icon-button [matMenuTriggerFor]="groupMenu">
|
|
97
|
+
<img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
|
|
121
98
|
</button>
|
|
122
|
-
<
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
99
|
+
<mat-menu #groupMenu>
|
|
100
|
+
<button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
|
|
101
|
+
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
|
|
102
|
+
</button>
|
|
103
|
+
<button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
|
|
104
|
+
<img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
|
|
105
|
+
</button>
|
|
106
|
+
<button mat-menu-item (click)="_filter($event, dCol)">
|
|
107
|
+
<img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
|
|
108
|
+
</button>
|
|
109
|
+
</mat-menu>
|
|
110
|
+
</div>
|
|
111
|
+
</th>
|
|
112
|
+
<td mat-cell *matCellDef="let element; index as i">
|
|
113
|
+
<button
|
|
114
|
+
*ngIf="_showButton(dCol.config.name, dCol); else regular"
|
|
115
|
+
mat-button
|
|
116
|
+
color="primary"
|
|
117
|
+
(click)="_listViewClick(dCol.config, element)"
|
|
118
|
+
>
|
|
119
|
+
{{ element[dCol.config.name] || '---' }}
|
|
120
|
+
</button>
|
|
121
|
+
<ng-template #regular>
|
|
122
|
+
{{ element[dCol.config.name] || '---' }}
|
|
123
|
+
</ng-template>
|
|
124
|
+
</td>
|
|
125
|
+
</ng-container>
|
|
127
126
|
|
|
128
|
-
|
|
129
|
-
|
|
127
|
+
<tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
|
|
128
|
+
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
|
|
130
129
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
130
|
+
<!-- Group header -->
|
|
131
|
+
<ng-container matColumnDef="groupHeader">
|
|
132
|
+
<td mat-cell colspan="999" *matCellDef="let group">
|
|
133
|
+
<mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
|
|
134
|
+
<mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
|
|
135
|
+
<strong
|
|
136
|
+
>{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
|
|
137
|
+
group.totalCounts
|
|
138
|
+
}})</strong
|
|
139
|
+
>
|
|
140
|
+
</td>
|
|
141
|
+
</ng-container>
|
|
143
142
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
</div>
|
|
143
|
+
<tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
|
|
144
|
+
</table>
|
|
147
145
|
</div>
|
|
148
146
|
</div>
|
|
149
147
|
<div *ngIf="bInForm$">
|
|
150
|
-
<div>
|
|
151
|
-
<
|
|
152
|
-
<
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
<
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
<
|
|
160
|
-
<
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
148
|
+
<div class="psdk-inner-div-in-form">
|
|
149
|
+
<table id="list-view" *ngIf="repeatListData.length > 0" mat-table [dataSource]="repeatList$" matSort>
|
|
150
|
+
<ng-container *ngIf="singleSelectionMode" matColumnDef="select">
|
|
151
|
+
<th mat-header-cell *matHeaderCellDef></th>
|
|
152
|
+
<td mat-cell *matCellDef="let row">
|
|
153
|
+
<mat-radio-button [value]="row[rowID]" [checked]="row[rowID] === checkBoxValue" (change)="fieldOnChange(row)"></mat-radio-button>
|
|
154
|
+
</td>
|
|
155
|
+
</ng-container>
|
|
156
|
+
<ng-container *ngIf="multiSelectionMode" matColumnDef="select">
|
|
157
|
+
<th mat-header-cell *matHeaderCellDef>
|
|
158
|
+
<mat-checkbox
|
|
159
|
+
(change)="toggleAllRows()"
|
|
160
|
+
[checked]="selection.hasValue() && isAllSelected()"
|
|
161
|
+
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
|
162
|
+
>
|
|
163
|
+
</mat-checkbox>
|
|
164
|
+
</th>
|
|
165
|
+
<td mat-cell *matCellDef="let row">
|
|
166
|
+
<mat-checkbox (change)="onCheckboxClick(row)" [checked]="selection.isSelected(row)"> </mat-checkbox>
|
|
167
|
+
</td>
|
|
168
|
+
</ng-container>
|
|
169
|
+
<ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
|
|
170
|
+
<th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
|
|
171
|
+
{{ dCol.config.label }}
|
|
172
|
+
</th>
|
|
173
|
+
<td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
|
|
174
|
+
</ng-container>
|
|
175
|
+
|
|
176
|
+
<tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
|
|
177
|
+
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
|
|
178
|
+
</table>
|
|
179
|
+
<div *ngIf="repeatListData?.length === 0">
|
|
180
|
+
<table id="list-view" mat-table [dataSource]="[]">
|
|
181
|
+
<!-- Define columns for headers -->
|
|
182
|
+
<ng-container *ngFor="let col of displayedColumns$" [matColumnDef]="col">
|
|
183
|
+
<th mat-header-cell *matHeaderCellDef>
|
|
184
|
+
{{ getValue(col) }}
|
|
168
185
|
</th>
|
|
169
|
-
<td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
|
|
170
186
|
</ng-container>
|
|
171
187
|
|
|
188
|
+
<!-- Render only header row -->
|
|
172
189
|
<tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
|
|
173
|
-
<tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
|
|
174
190
|
</table>
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
<ng-container *ngFor="let col of displayedColumns$" [matColumnDef]="col">
|
|
179
|
-
<th mat-header-cell *matHeaderCellDef>
|
|
180
|
-
{{ getValue(col) }}
|
|
181
|
-
</th>
|
|
182
|
-
</ng-container>
|
|
183
|
-
|
|
184
|
-
<!-- Render only header row -->
|
|
185
|
-
<tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
|
|
186
|
-
</table>
|
|
187
|
-
</div>
|
|
188
|
-
<div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
|
|
189
|
-
{{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
|
|
190
|
-
</div>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
|
|
193
|
+
{{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
|
|
191
194
|
</div>
|
|
192
195
|
</div>
|
|
193
196
|
</div>
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
.psdk-list-header {
|
|
2
2
|
border: 1px solid var(--mat-sys-outline-variant);
|
|
3
3
|
background-color: var(--mat-sys-surface-container);
|
|
4
|
-
padding: 0.5rem 0rem;
|
|
5
4
|
}
|
|
6
5
|
|
|
7
6
|
table {
|
|
8
7
|
width: 100%;
|
|
9
|
-
border-bottom: 1px solid var(--
|
|
8
|
+
border-bottom: 1px solid var(--mat-sys-on-secondary-container);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.search-label {
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
10
14
|
}
|
|
11
15
|
|
|
12
16
|
::ng-deep .mat-sort-header-content {
|
|
@@ -172,7 +176,7 @@ tr.mat-mdc-row {
|
|
|
172
176
|
::ng-deep th.mat-mdc-header-cell,
|
|
173
177
|
td.mat-mdc-cell,
|
|
174
178
|
td.mat-mdc-footer-cell {
|
|
175
|
-
border-right: 1px solid var(--
|
|
179
|
+
border-right: 1px solid var(--mat-sys-on-secondary-container);
|
|
176
180
|
padding: 8px !important;
|
|
177
181
|
// min-width: 10rem;
|
|
178
182
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Component, OnInit, Input, ViewChild, forwardRef, OnDestroy } from '@angular/core';
|
|
2
|
+
import { SelectionModel } from '@angular/cdk/collections';
|
|
2
3
|
import { CommonModule } from '@angular/common';
|
|
3
4
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
4
5
|
import { MatOptionModule } from '@angular/material/core';
|
|
@@ -45,6 +46,7 @@ interface ListViewProps {
|
|
|
45
46
|
displayAs?: string;
|
|
46
47
|
showRecords: boolean;
|
|
47
48
|
viewName?: string;
|
|
49
|
+
localeReference?: any;
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
export class Group {
|
|
@@ -91,6 +93,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
91
93
|
@Input() payload;
|
|
92
94
|
|
|
93
95
|
repeatList$: MatTableDataSource<any>;
|
|
96
|
+
selection = new SelectionModel<any>(true, []);
|
|
94
97
|
fields$: any[];
|
|
95
98
|
|
|
96
99
|
displayedColumns$ = Array<any>();
|
|
@@ -402,6 +405,14 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
402
405
|
}
|
|
403
406
|
|
|
404
407
|
this.repeatList$ = new MatTableDataSource(this.updatedRefList);
|
|
408
|
+
|
|
409
|
+
if (this.configProps$?.readonlyContextList?.length > 0) {
|
|
410
|
+
const readonlyIds = new Set(this.configProps$.readonlyContextList.map(element => element[this.rowID]));
|
|
411
|
+
const rowsToSelect = this.repeatList$.data.filter(row => readonlyIds.has(row[this.rowID]));
|
|
412
|
+
if (rowsToSelect.length > 0) {
|
|
413
|
+
this.selection.select(...rowsToSelect);
|
|
414
|
+
}
|
|
415
|
+
}
|
|
405
416
|
this.repeatList$.filterPredicate = this.customFilterPredicate.bind(this);
|
|
406
417
|
|
|
407
418
|
// keeping an original copy to get back after possible sorts, filters and groupBy
|
|
@@ -506,6 +517,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
506
517
|
const arReturn = arFields;
|
|
507
518
|
arReturn.forEach((field, i) => {
|
|
508
519
|
field.config = { ...field.config, ...fields[i], name: fields[i].id };
|
|
520
|
+
field.config.label = PCore.getLocaleUtils().getLocaleValue(field.config.label, this.configProps$.localeReference);
|
|
509
521
|
});
|
|
510
522
|
return arReturn;
|
|
511
523
|
}
|
|
@@ -531,13 +543,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
531
543
|
}
|
|
532
544
|
}
|
|
533
545
|
|
|
534
|
-
isChecked(rowIn): any {
|
|
535
|
-
const initialVal = false;
|
|
536
|
-
return this.configProps$?.readonlyContextList?.reduce((acc, currRow) => {
|
|
537
|
-
return acc || rowIn[this.rowID] === currRow[this.rowID];
|
|
538
|
-
}, initialVal);
|
|
539
|
-
}
|
|
540
|
-
|
|
541
546
|
fieldOnChange(row) {
|
|
542
547
|
const value = row[this.rowID];
|
|
543
548
|
const reqObj = {};
|
|
@@ -554,32 +559,31 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
554
559
|
this.pConn$?.getListActions?.()?.setSelectedRows([reqObj]);
|
|
555
560
|
}
|
|
556
561
|
|
|
557
|
-
onCheckboxClick(row
|
|
558
|
-
|
|
559
|
-
const
|
|
560
|
-
|
|
561
|
-
if (this.compositeKeys?.length > 1) {
|
|
562
|
-
const index = this.response.findIndex(element => element[this.rowID] === value);
|
|
563
|
-
const selectedRow = this.response[index];
|
|
564
|
-
this.compositeKeys.forEach(element => {
|
|
565
|
-
reqObj[element] = selectedRow[element];
|
|
566
|
-
});
|
|
567
|
-
reqObj.$selected = checked;
|
|
568
|
-
} else {
|
|
569
|
-
reqObj[this.rowID] = value;
|
|
570
|
-
reqObj.$selected = checked;
|
|
571
|
-
}
|
|
572
|
-
this.pConn$?.getListActions()?.setSelectedRows([reqObj]);
|
|
562
|
+
onCheckboxClick(row) {
|
|
563
|
+
this.selection.toggle(row);
|
|
564
|
+
const requiredValue = this.getSelectedValue(row);
|
|
565
|
+
this.pConn$?.getListActions()?.setSelectedRows([requiredValue]);
|
|
573
566
|
}
|
|
574
567
|
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
568
|
+
isAllSelected() {
|
|
569
|
+
const numSelected = this.selection.selected.length;
|
|
570
|
+
const numRows = this.repeatList$.data.length;
|
|
571
|
+
return numSelected === numRows;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
toggleAllRows() {
|
|
575
|
+
if (this.isAllSelected()) {
|
|
576
|
+
this.selection.clear();
|
|
577
|
+
this.pConn$?.getListActions()?.clearSelectedRows();
|
|
578
|
+
return;
|
|
579
|
+
}
|
|
580
|
+
if (this.selection.hasValue() && !this.isAllSelected()) {
|
|
581
|
+
this.pConn$?.getListActions()?.clearSelectedRows();
|
|
582
|
+
}
|
|
583
|
+
this.selection.select(...this.repeatList$.data);
|
|
584
|
+
const requiredValues = this.repeatList$.data.map(row => this.getSelectedValue(row));
|
|
585
|
+
this.pConn$?.getListActions()?.setSelectedRows(requiredValues);
|
|
586
|
+
}
|
|
583
587
|
|
|
584
588
|
_getIconStyle(level): string {
|
|
585
589
|
let sReturn = '';
|
|
@@ -1442,6 +1446,24 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
1442
1446
|
return select;
|
|
1443
1447
|
}
|
|
1444
1448
|
|
|
1449
|
+
private getSelectedValue(row) {
|
|
1450
|
+
const value = row[this.rowID];
|
|
1451
|
+
const checked = this.selection.isSelected(row);
|
|
1452
|
+
const reqObj: any = {};
|
|
1453
|
+
if (this.compositeKeys?.length > 1) {
|
|
1454
|
+
const index = this.response.findIndex(element => element[this.rowID] === value);
|
|
1455
|
+
const selectedRow = this.response[index];
|
|
1456
|
+
this.compositeKeys.forEach(element => {
|
|
1457
|
+
reqObj[element] = selectedRow[element];
|
|
1458
|
+
});
|
|
1459
|
+
reqObj.$selected = checked;
|
|
1460
|
+
} else {
|
|
1461
|
+
reqObj[this.rowID] = value;
|
|
1462
|
+
reqObj.$selected = checked;
|
|
1463
|
+
}
|
|
1464
|
+
return reqObj;
|
|
1465
|
+
}
|
|
1466
|
+
|
|
1445
1467
|
private updateFiltersFromData(data) {
|
|
1446
1468
|
if (this.displayAs === 'advancedSearch') {
|
|
1447
1469
|
this.filters = {};
|
|
@@ -17,26 +17,24 @@
|
|
|
17
17
|
</div>
|
|
18
18
|
</div>
|
|
19
19
|
<div class="psdk-case-view" id="case-view">
|
|
20
|
-
<div class="psdk-case-view-info">
|
|
21
|
-
<
|
|
22
|
-
<mat-toolbar class="psdk-case-view-toolbar">
|
|
23
|
-
<
|
|
24
|
-
<div
|
|
25
|
-
<
|
|
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>
|
|
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>
|
|
30
26
|
</div>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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>
|
|
40
38
|
</div>
|
|
41
39
|
</div>
|
|
42
40
|
<div class="psdk-case-view-main">
|
|
@@ -68,12 +66,10 @@
|
|
|
68
66
|
</div>
|
|
69
67
|
</div>
|
|
70
68
|
</div>
|
|
71
|
-
<div class="psdk-case-view-utilities">
|
|
72
|
-
<div *
|
|
73
|
-
<div *
|
|
74
|
-
<
|
|
75
|
-
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
|
|
76
|
-
</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>
|
|
77
73
|
</div>
|
|
78
74
|
</div>
|
|
79
75
|
</div>
|