@pega/angular-sdk-overrides 0.25.3 → 0.25.4
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 +7 -1
- 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.scss +1 -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 +51 -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/quick-create/quick-create.component.ts +41 -22
- package/lib/widget/todo/todo.component.scss +2 -0
- package/package.json +1 -1
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
(dateChange)="fieldOnDateChange($event)"
|
|
21
21
|
/>
|
|
22
22
|
<mat-datepicker-toggle matSuffix [for]="pegadate" [disabled]="bDisabled$"></mat-datepicker-toggle>
|
|
23
|
-
<mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>
|
|
23
|
+
<mat-datepicker #pegadate [startAt]="value$" xPosition="end"></mat-datepicker>
|
|
24
24
|
<mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
|
|
25
25
|
</mat-form-field>
|
|
26
26
|
</div>
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
[readonly]="bDisabled$"
|
|
18
18
|
/>
|
|
19
19
|
<mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
|
|
20
|
-
<owl-date-time #dtPicker [disabled]="bDisabled$"></owl-date-time>
|
|
20
|
+
<owl-date-time #dtPicker [disabled]="bDisabled$" [scrollStrategy]="scrollStrategy"></owl-date-time>
|
|
21
21
|
<mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
|
|
22
22
|
</mat-form-field>
|
|
23
23
|
</div>
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
import { Component, OnInit, forwardRef, OnDestroy } from '@angular/core';
|
|
1
|
+
import { Component, OnInit, forwardRef, OnDestroy, inject } from '@angular/core';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import { ReactiveFormsModule } from '@angular/forms';
|
|
4
4
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
5
5
|
import { MatInputModule } from '@angular/material/input';
|
|
6
6
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
7
|
+
|
|
8
|
+
import { ScrollStrategyOptions } from '@angular/cdk/overlay';
|
|
9
|
+
|
|
7
10
|
import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
|
|
8
11
|
import dayjs from 'dayjs';
|
|
9
12
|
|
|
@@ -45,6 +48,9 @@ export class DateTimeComponent extends FieldBase implements OnInit, OnDestroy {
|
|
|
45
48
|
timezone = PCore.getEnvironmentInfo()?.getTimeZone();
|
|
46
49
|
override placeholder = `${this.theDateFormat.dateFormatStringLC}, hh:mm A`;
|
|
47
50
|
|
|
51
|
+
private sso = inject(ScrollStrategyOptions);
|
|
52
|
+
scrollStrategy = this.sso.reposition();
|
|
53
|
+
|
|
48
54
|
override ngOnInit(): void {
|
|
49
55
|
super.ngOnInit();
|
|
50
56
|
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
</div>
|
|
33
33
|
<div *ngIf="bHasCaseMessages$">
|
|
34
34
|
<mat-card class="psdk-message-card">
|
|
35
|
-
<div style="display: flex; flex-direction: row">
|
|
35
|
+
<div style="display: flex; flex-direction: row; align-items: center">
|
|
36
36
|
<div><img class="psdk-icon" src="{{ checkSvg$ }}" /></div>
|
|
37
37
|
<div>{{ caseMessages$ }}</div>
|
|
38
38
|
</div>
|
|
@@ -280,7 +280,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
|
|
|
280
280
|
|
|
281
281
|
// this.containerName$ = oWorkMeta["name"];
|
|
282
282
|
if (bLoadChildren && oWorkData) {
|
|
283
|
-
this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments[0].name, undefined, this.localeReference);
|
|
283
|
+
this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
|
|
284
284
|
}
|
|
285
285
|
|
|
286
286
|
// turn off spinner
|
|
@@ -12,25 +12,17 @@
|
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
14
14
|
<div class="{{ _getVBodyClass(i) }}">
|
|
15
|
-
<ng-container *ngIf="mainStep?.steps">
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
name="AssignmentCard"
|
|
27
|
-
[props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
|
|
28
|
-
[parent]="this"
|
|
29
|
-
[outputEvents]="{ actionButtonClick: onActionButtonClick }"
|
|
30
|
-
></component-mapper>
|
|
31
|
-
</div>
|
|
32
|
-
</li>
|
|
33
|
-
</ul>
|
|
15
|
+
<ng-container *ngIf="mainStep?.steps && mainStep.visited_status == 'current'">
|
|
16
|
+
<div *ngFor="let subStep of mainStep.steps">
|
|
17
|
+
<div *ngIf="subStep.visited_status == 'current'">
|
|
18
|
+
<component-mapper
|
|
19
|
+
name="AssignmentCard"
|
|
20
|
+
[props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
|
|
21
|
+
[parent]="this"
|
|
22
|
+
[outputEvents]="{ actionButtonClick: onActionButtonClick }"
|
|
23
|
+
></component-mapper>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
34
26
|
</ng-container>
|
|
35
27
|
|
|
36
28
|
<ng-container *ngIf="!mainStep?.steps && mainStep.visited_status == 'current'">
|
|
@@ -64,25 +56,17 @@
|
|
|
64
56
|
</ng-container>
|
|
65
57
|
</div>
|
|
66
58
|
<div *ngFor="let mainStep of arNavigationSteps$" class="psdk-horizontal-stepper-body">
|
|
67
|
-
<ng-container *ngIf="mainStep?.steps">
|
|
68
|
-
<
|
|
69
|
-
<
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
name="AssignmentCard"
|
|
79
|
-
[props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
|
|
80
|
-
[parent]="this"
|
|
81
|
-
[outputEvents]="{ actionButtonClick: onActionButtonClick }"
|
|
82
|
-
></component-mapper>
|
|
83
|
-
</div>
|
|
84
|
-
</li>
|
|
85
|
-
</ul>
|
|
59
|
+
<ng-container *ngIf="mainStep?.steps && mainStep.visited_status == 'current'">
|
|
60
|
+
<div *ngFor="let subStep of mainStep.steps">
|
|
61
|
+
<div *ngIf="subStep.visited_status == 'current'">
|
|
62
|
+
<component-mapper
|
|
63
|
+
name="AssignmentCard"
|
|
64
|
+
[props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
|
|
65
|
+
[parent]="this"
|
|
66
|
+
[outputEvents]="{ actionButtonClick: onActionButtonClick }"
|
|
67
|
+
></component-mapper>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
86
70
|
</ng-container>
|
|
87
71
|
|
|
88
72
|
<ng-container *ngIf="!mainStep?.steps && mainStep.visited_status == 'current'">
|
|
@@ -7,12 +7,6 @@
|
|
|
7
7
|
min-width: unset;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.psdk-icon-current {
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.psdk-icon-not-current {
|
|
14
|
-
}
|
|
15
|
-
|
|
16
10
|
.psdk-current-svg-icon {
|
|
17
11
|
width: 1rem;
|
|
18
12
|
filter: var(--app-primary-color-filter);
|
|
@@ -33,9 +27,11 @@ mat-horizontal-stepper {
|
|
|
33
27
|
.psdk-sub-step-current {
|
|
34
28
|
padding-left: 0.625rem;
|
|
35
29
|
font-weight: bold;
|
|
30
|
+
color: var(--mat-sys-on-secondary-container);
|
|
36
31
|
}
|
|
37
32
|
|
|
38
33
|
.psdk-sub-step-not-current {
|
|
34
|
+
color: var(--mat-sys-on-surface-variant);
|
|
39
35
|
padding-left: 0.625rem;
|
|
40
36
|
}
|
|
41
37
|
|
|
@@ -76,6 +72,7 @@ mat-horizontal-stepper {
|
|
|
76
72
|
|
|
77
73
|
.psdk-vertical-step-icon {
|
|
78
74
|
margin-right: 12px;
|
|
75
|
+
background-color: var(--mat-sys-secondary);
|
|
79
76
|
border-radius: 50%;
|
|
80
77
|
height: 24px;
|
|
81
78
|
width: 24px;
|
|
@@ -92,6 +89,8 @@ mat-horizontal-stepper {
|
|
|
92
89
|
|
|
93
90
|
.psdk-vertical-step-icon-selected {
|
|
94
91
|
margin-right: 12px;
|
|
92
|
+
background-color: var(--mat-sys-primary);
|
|
93
|
+
color: var(--mat-sys-surface);
|
|
95
94
|
border-radius: 50%;
|
|
96
95
|
height: 24px;
|
|
97
96
|
width: 24px;
|
|
@@ -100,6 +99,7 @@ mat-horizontal-stepper {
|
|
|
100
99
|
}
|
|
101
100
|
|
|
102
101
|
.psdk-vertical-step-label {
|
|
102
|
+
color: var(--mat-sys-on-surface-variant);
|
|
103
103
|
display: inline-block;
|
|
104
104
|
white-space: nowrap;
|
|
105
105
|
overflow: hidden;
|
|
@@ -111,6 +111,7 @@ mat-horizontal-stepper {
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
.psdk-vertical-step-label-selected {
|
|
114
|
+
color: var(--mat-sys-on-secondary-container);
|
|
114
115
|
display: inline-block;
|
|
115
116
|
white-space: nowrap;
|
|
116
117
|
overflow: hidden;
|
|
@@ -169,6 +170,8 @@ mat-horizontal-stepper {
|
|
|
169
170
|
}
|
|
170
171
|
|
|
171
172
|
.psdk-horizontal-step-icon {
|
|
173
|
+
background-color: var(--mat-sys-secondary);
|
|
174
|
+
color: var(--mat-sys-surface);
|
|
172
175
|
border-radius: 50%;
|
|
173
176
|
height: 24px;
|
|
174
177
|
width: 24px;
|
|
@@ -188,6 +191,8 @@ mat-horizontal-stepper {
|
|
|
188
191
|
}
|
|
189
192
|
|
|
190
193
|
.psdk-horizontal-step-icon-selected {
|
|
194
|
+
background-color: var(--mat-sys-primary);
|
|
195
|
+
color: var(--mat-sys-surface);
|
|
191
196
|
border-radius: 50%;
|
|
192
197
|
height: 24px;
|
|
193
198
|
width: 24px;
|
|
@@ -199,6 +204,7 @@ mat-horizontal-stepper {
|
|
|
199
204
|
}
|
|
200
205
|
|
|
201
206
|
.psdk-horizontal-step-label {
|
|
207
|
+
color: var(--mat-sys-on-surface-variant);
|
|
202
208
|
display: inline-block;
|
|
203
209
|
min-width: 50px;
|
|
204
210
|
vertical-align: middle;
|
|
@@ -208,6 +214,7 @@ mat-horizontal-stepper {
|
|
|
208
214
|
}
|
|
209
215
|
|
|
210
216
|
.psdk-horizontal-step-label-selected {
|
|
217
|
+
color: var(--mat-sys-on-secondary-container);
|
|
211
218
|
display: inline-block;
|
|
212
219
|
min-width: 50px;
|
|
213
220
|
vertical-align: middle;
|
|
@@ -7,7 +7,7 @@ import { getAllFields } from '@pega/angular-sdk-components';
|
|
|
7
7
|
import { ReferenceComponent } from '@pega/angular-sdk-components';
|
|
8
8
|
import { ComponentMapperComponent } from '@pega/angular-sdk-components';
|
|
9
9
|
|
|
10
|
-
const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs'];
|
|
10
|
+
const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs', 'ListView'];
|
|
11
11
|
const DETAILS_TEMPLATES = [
|
|
12
12
|
'Details',
|
|
13
13
|
'DetailsFields',
|
|
@@ -158,10 +158,9 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
|
|
|
158
158
|
|
|
159
159
|
this.templateName$ = this.configProps$.template || '';
|
|
160
160
|
this.title$ = this.configProps$.title || '';
|
|
161
|
-
this.label$ = this.configProps$.label || '';
|
|
162
|
-
this.showLabel$ = this.configProps$.showLabel || isDetailsTemplate(this.templateName$) || this.showLabel$;
|
|
163
161
|
// label & showLabel within inheritedProps takes precedence over configProps
|
|
164
|
-
this.label$ = this.inheritedProps$.label || this.label
|
|
162
|
+
this.label$ = this.inheritedProps$.label || this.configProps$.label || '';
|
|
163
|
+
this.showLabel$ = this.inheritedProps$.showLabel || this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
|
|
165
164
|
// children may have a 'reference' so normalize the children array
|
|
166
165
|
this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
|
|
167
166
|
this.visibility$ = this.configProps$.visibility ?? this.visibility$;
|
|
@@ -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';
|
|
@@ -91,6 +92,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
91
92
|
@Input() payload;
|
|
92
93
|
|
|
93
94
|
repeatList$: MatTableDataSource<any>;
|
|
95
|
+
selection = new SelectionModel<any>(true, []);
|
|
94
96
|
fields$: any[];
|
|
95
97
|
|
|
96
98
|
displayedColumns$ = Array<any>();
|
|
@@ -402,6 +404,14 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
402
404
|
}
|
|
403
405
|
|
|
404
406
|
this.repeatList$ = new MatTableDataSource(this.updatedRefList);
|
|
407
|
+
|
|
408
|
+
if (this.configProps$?.readonlyContextList?.length > 0) {
|
|
409
|
+
const readonlyIds = new Set(this.configProps$.readonlyContextList.map(element => element[this.rowID]));
|
|
410
|
+
const rowsToSelect = this.repeatList$.data.filter(row => readonlyIds.has(row[this.rowID]));
|
|
411
|
+
if (rowsToSelect.length > 0) {
|
|
412
|
+
this.selection.select(...rowsToSelect);
|
|
413
|
+
}
|
|
414
|
+
}
|
|
405
415
|
this.repeatList$.filterPredicate = this.customFilterPredicate.bind(this);
|
|
406
416
|
|
|
407
417
|
// keeping an original copy to get back after possible sorts, filters and groupBy
|
|
@@ -531,13 +541,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
531
541
|
}
|
|
532
542
|
}
|
|
533
543
|
|
|
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
544
|
fieldOnChange(row) {
|
|
542
545
|
const value = row[this.rowID];
|
|
543
546
|
const reqObj = {};
|
|
@@ -554,32 +557,31 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
554
557
|
this.pConn$?.getListActions?.()?.setSelectedRows([reqObj]);
|
|
555
558
|
}
|
|
556
559
|
|
|
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]);
|
|
560
|
+
onCheckboxClick(row) {
|
|
561
|
+
this.selection.toggle(row);
|
|
562
|
+
const requiredValue = this.getSelectedValue(row);
|
|
563
|
+
this.pConn$?.getListActions()?.setSelectedRows([requiredValue]);
|
|
573
564
|
}
|
|
574
565
|
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
566
|
+
isAllSelected() {
|
|
567
|
+
const numSelected = this.selection.selected.length;
|
|
568
|
+
const numRows = this.repeatList$.data.length;
|
|
569
|
+
return numSelected === numRows;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
toggleAllRows() {
|
|
573
|
+
if (this.isAllSelected()) {
|
|
574
|
+
this.selection.clear();
|
|
575
|
+
this.pConn$?.getListActions()?.clearSelectedRows();
|
|
576
|
+
return;
|
|
577
|
+
}
|
|
578
|
+
if (this.selection.hasValue() && !this.isAllSelected()) {
|
|
579
|
+
this.pConn$?.getListActions()?.clearSelectedRows();
|
|
580
|
+
}
|
|
581
|
+
this.selection.select(...this.repeatList$.data);
|
|
582
|
+
const requiredValues = this.repeatList$.data.map(row => this.getSelectedValue(row));
|
|
583
|
+
this.pConn$?.getListActions()?.setSelectedRows(requiredValues);
|
|
584
|
+
}
|
|
583
585
|
|
|
584
586
|
_getIconStyle(level): string {
|
|
585
587
|
let sReturn = '';
|
|
@@ -1442,6 +1444,24 @@ export class ListViewComponent implements OnInit, OnDestroy {
|
|
|
1442
1444
|
return select;
|
|
1443
1445
|
}
|
|
1444
1446
|
|
|
1447
|
+
private getSelectedValue(row) {
|
|
1448
|
+
const value = row[this.rowID];
|
|
1449
|
+
const checked = this.selection.isSelected(row);
|
|
1450
|
+
const reqObj: any = {};
|
|
1451
|
+
if (this.compositeKeys?.length > 1) {
|
|
1452
|
+
const index = this.response.findIndex(element => element[this.rowID] === value);
|
|
1453
|
+
const selectedRow = this.response[index];
|
|
1454
|
+
this.compositeKeys.forEach(element => {
|
|
1455
|
+
reqObj[element] = selectedRow[element];
|
|
1456
|
+
});
|
|
1457
|
+
reqObj.$selected = checked;
|
|
1458
|
+
} else {
|
|
1459
|
+
reqObj[this.rowID] = value;
|
|
1460
|
+
reqObj.$selected = checked;
|
|
1461
|
+
}
|
|
1462
|
+
return reqObj;
|
|
1463
|
+
}
|
|
1464
|
+
|
|
1445
1465
|
private updateFiltersFromData(data) {
|
|
1446
1466
|
if (this.displayAs === 'advancedSearch') {
|
|
1447
1467
|
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>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.psdk-modal-file-selector {
|
|
8
|
-
border: 1px dashed var(--
|
|
8
|
+
border: 1px dashed var(--mat-sys-neutral-variant20);
|
|
9
9
|
width: 100%;
|
|
10
10
|
padding: 0.3rem;
|
|
11
11
|
text-align: center;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.psdk-modal-file-selector-error {
|
|
25
|
-
border: 1px dashed var(--
|
|
25
|
+
border: 1px dashed var(--mat-sys-error);
|
|
26
26
|
width: 100%;
|
|
27
27
|
padding: 0.3rem;
|
|
28
28
|
text-align: center;
|
|
@@ -45,14 +45,14 @@
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.psdk-attachment-list {
|
|
48
|
-
border: 1px solid var(--
|
|
48
|
+
border: 1px solid var(--mat-sys-secondary);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
::ng-deep .mat-mdc-form-field-infix {
|
|
52
52
|
width: auto;
|
|
53
53
|
}
|
|
54
54
|
.psdk-modal-file-selector {
|
|
55
|
-
border: 1px dashed var(--
|
|
55
|
+
border: 1px dashed var(--mat-sys-neutral-variant20);
|
|
56
56
|
padding: 0.5rem;
|
|
57
57
|
text-align: center;
|
|
58
58
|
position: relative;
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.psdk-modal-file-selector-error {
|
|
71
|
-
border: 1px dashed var(--
|
|
71
|
+
border: 1px dashed var(--mat-sys-error);
|
|
72
72
|
padding: 0.5rem;
|
|
73
73
|
text-align: center;
|
|
74
74
|
position: relative;
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.psdk-attachment-list {
|
|
93
|
-
border: 1px solid var(--
|
|
93
|
+
border: 1px solid var(--mat-sys-secondary);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
::ng-deep .mat-mdc-form-field-infix {
|
|
@@ -126,7 +126,6 @@
|
|
|
126
126
|
|
|
127
127
|
.psdk-attachment-card-svg-icon {
|
|
128
128
|
width: 2.5rem;
|
|
129
|
-
filter: var(--app-white-color-filter);
|
|
130
129
|
}
|
|
131
130
|
|
|
132
131
|
.psdk-utility-button {
|
|
@@ -134,7 +133,6 @@
|
|
|
134
133
|
border: none;
|
|
135
134
|
margin-right: 0.5rem;
|
|
136
135
|
cursor: pointer;
|
|
137
|
-
filter: var(--app-white-color-filter);
|
|
138
136
|
}
|
|
139
137
|
|
|
140
138
|
.psdk-utility-card-action-svg-icon {
|
|
@@ -151,7 +149,7 @@
|
|
|
151
149
|
}
|
|
152
150
|
|
|
153
151
|
.file-div-error {
|
|
154
|
-
border: 1px dashed var(--
|
|
152
|
+
border: 1px dashed var(--mat-sys-error);
|
|
155
153
|
width: 100%;
|
|
156
154
|
padding: 0.5rem;
|
|
157
155
|
text-align: center;
|
|
@@ -132,11 +132,12 @@ export class AttachmentComponent implements OnInit, OnDestroy {
|
|
|
132
132
|
updateSelf() {
|
|
133
133
|
const configProps: AttachmentProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as AttachmentProps;
|
|
134
134
|
const stateProps = this.pConn$.getStateProps();
|
|
135
|
-
const { value, label, required,
|
|
136
|
-
configProps;
|
|
135
|
+
const { value, label, required, disabled, readOnly, extensions, displayMode, isTableFormatter, allowMultiple, editMode } = configProps;
|
|
137
136
|
|
|
138
137
|
this.bRequired$ = this.utils.getBooleanValue(required);
|
|
139
|
-
|
|
138
|
+
if (configProps.visibility != null) {
|
|
139
|
+
this.bVisible$ = this.utils.getBooleanValue(configProps.visibility);
|
|
140
|
+
}
|
|
140
141
|
this.bDisabled$ = this.utils.getBooleanValue(disabled);
|
|
141
142
|
this.bReadonly$ = this.utils.getBooleanValue(readOnly);
|
|
142
143
|
this.allowMultiple$ = this.utils.getBooleanValue(allowMultiple);
|
|
@@ -40,38 +40,57 @@ export class QuickCreateComponent implements OnInit, OnChanges {
|
|
|
40
40
|
|
|
41
41
|
initComponent() {
|
|
42
42
|
this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as QuickCreateProps;
|
|
43
|
-
|
|
44
43
|
this.heading$ = this.configProps$.heading;
|
|
45
44
|
this.showCaseIcons$ = this.configProps$.showCaseIcons;
|
|
46
45
|
this.classFilter$ = this.configProps$.classFilter;
|
|
47
|
-
|
|
46
|
+
const cases: any = [];
|
|
47
|
+
const defaultCases: any = [];
|
|
48
48
|
const envInfo = PCore.getEnvironmentInfo();
|
|
49
|
-
if (
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
49
|
+
if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
|
|
50
|
+
envInfo.environmentInfoObject.pyCaseTypeList.forEach((casetype: any) => {
|
|
51
|
+
if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
|
|
52
|
+
defaultCases.push({
|
|
53
|
+
classname: casetype.pyWorkTypeImplementationClassName,
|
|
54
|
+
onClick: () => {
|
|
55
|
+
this.createCase(casetype.pyWorkTypeImplementationClassName);
|
|
56
|
+
},
|
|
57
|
+
...(this.showCaseIcons$ && { icon: this.utils.getImageSrc(casetype?.pxIcon, this.utils.getSDKStaticContentUrl()) }),
|
|
58
|
+
label: casetype.pyWorkTypeName
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
} else {
|
|
63
|
+
const pConnectInAppContext = PCore.createPConnect({
|
|
64
|
+
options: { context: PCore.getConstants().APP.APP }
|
|
65
|
+
}).getPConnect();
|
|
66
|
+
const pyPortalInAppContext = pConnectInAppContext.getValue('pyPortal') as any;
|
|
67
|
+
pyPortalInAppContext?.pyCaseTypesAvailableToCreate?.forEach(casetype => {
|
|
68
|
+
if (casetype.pyClassName && casetype.pyLabel) {
|
|
69
|
+
defaultCases.push({
|
|
70
|
+
classname: casetype.pyClassName,
|
|
67
71
|
onClick: () => {
|
|
68
|
-
this.createCase(
|
|
72
|
+
this.createCase(casetype.pyClassName);
|
|
69
73
|
},
|
|
70
|
-
...(this.showCaseIcons$ && { icon })
|
|
74
|
+
...(this.showCaseIcons$ && { icon: this.utils.getImageSrc(casetype?.pxIcon, this.utils.getSDKStaticContentUrl()) }),
|
|
75
|
+
label: casetype.pyLabel
|
|
71
76
|
});
|
|
72
77
|
}
|
|
73
78
|
});
|
|
74
79
|
}
|
|
80
|
+
|
|
81
|
+
/* If classFilter is not empty - filter from the list of defaultCases */
|
|
82
|
+
if (this.classFilter$?.length > 0) {
|
|
83
|
+
this.classFilter$.forEach(item => {
|
|
84
|
+
defaultCases.forEach(casetype => {
|
|
85
|
+
if (casetype.classname === item) {
|
|
86
|
+
cases.push(casetype);
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
this.cases$ = cases;
|
|
91
|
+
} else {
|
|
92
|
+
this.cases$ = defaultCases;
|
|
93
|
+
}
|
|
75
94
|
}
|
|
76
95
|
|
|
77
96
|
ngOnInit() {
|