@pega/angular-sdk-overrides 0.25.6 → 0.25.7
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/rich-text-editor/rich-text-editor.component.html +4 -17
- package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.ts +30 -0
- package/lib/field/rich-text/rich-text.component.html +2 -0
- package/lib/field/rich-text/rich-text.component.scss +172 -0
- package/lib/field/rich-text/rich-text.component.ts +2 -0
- package/lib/infra/Containers/flow-container/flow-container.component.html +1 -1
- package/lib/infra/Containers/flow-container/flow-container.component.ts +2 -0
- package/lib/template/self-service-case-view/self-service-case-view.component.html +63 -61
- package/lib/template/self-service-case-view/self-service-case-view.component.scss +9 -2
- package/lib/template/wss-nav-bar/wss-nav-bar.component.scss +0 -1
- package/lib/widget/file-utility/file-utility.component.ts +24 -8
- package/lib/widget/todo/todo.component.ts +1 -1
- package/package.json +1 -1
|
@@ -1,32 +1,19 @@
|
|
|
1
1
|
<div [attr.data-test-id]="testId">
|
|
2
2
|
<label [ngClass]="{ 'label-required': required === true }" class="rich-text-label">{{ label }}</label>
|
|
3
|
+
|
|
3
4
|
<div class="rich-text-editor" *ngIf="!readonly">
|
|
4
5
|
<editor
|
|
5
6
|
[formControl]="richText"
|
|
6
7
|
[attr.disabled]="disabled"
|
|
7
8
|
[initialValue]="value"
|
|
8
|
-
[init]="
|
|
9
|
-
base_url: '/tinymce',
|
|
10
|
-
suffix: '.min',
|
|
11
|
-
menubar: false,
|
|
12
|
-
placeholder,
|
|
13
|
-
statusbar: false,
|
|
14
|
-
min_height: 130,
|
|
15
|
-
plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
|
|
16
|
-
autoresize_bottom_margin: 0,
|
|
17
|
-
toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
|
|
18
|
-
toolbar_location: 'bottom',
|
|
19
|
-
content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
|
|
20
|
-
branding: false,
|
|
21
|
-
paste_data_images: true,
|
|
22
|
-
file_picker_types: 'image',
|
|
23
|
-
file_picker_callback: filePickerCallback
|
|
24
|
-
}"
|
|
9
|
+
[init]="editorConfig"
|
|
25
10
|
(onBlur)="blur()"
|
|
26
11
|
(onChange)="change($event)"
|
|
27
12
|
></editor>
|
|
13
|
+
|
|
28
14
|
<p *ngIf="richText.invalid" [ngClass]="'text-editor-error'">{{ info }}</p>
|
|
29
15
|
</div>
|
|
16
|
+
|
|
30
17
|
<div *ngIf="readonly">
|
|
31
18
|
<div class="readonly-richtext-editor" style="margin: 10px 5px" [innerHTML]="value || '--'"></div>
|
|
32
19
|
</div>
|
|
@@ -27,6 +27,7 @@ export class RichTextEditorComponent implements OnChanges {
|
|
|
27
27
|
@Output() onChange: EventEmitter<any> = new EventEmitter();
|
|
28
28
|
|
|
29
29
|
richText = new FormControl();
|
|
30
|
+
editorConfig: any = {};
|
|
30
31
|
|
|
31
32
|
ngOnChanges() {
|
|
32
33
|
if (this.required) {
|
|
@@ -42,6 +43,35 @@ export class RichTextEditorComponent implements OnChanges {
|
|
|
42
43
|
if (this.value) {
|
|
43
44
|
this.richText.setValue(this.value);
|
|
44
45
|
}
|
|
46
|
+
|
|
47
|
+
const themeElement = document.querySelector('.dark') || document.body;
|
|
48
|
+
let textColor = getComputedStyle(themeElement).getPropertyValue('--mat-sys-on-surface').trim();
|
|
49
|
+
if (!textColor) textColor = '#000000';
|
|
50
|
+
|
|
51
|
+
this.editorConfig = {
|
|
52
|
+
base_url: '/tinymce',
|
|
53
|
+
suffix: '.min',
|
|
54
|
+
menubar: false,
|
|
55
|
+
placeholder: this.placeholder,
|
|
56
|
+
statusbar: false,
|
|
57
|
+
min_height: 130,
|
|
58
|
+
plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
|
|
59
|
+
autoresize_bottom_margin: 0,
|
|
60
|
+
toolbar: this.disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
|
|
61
|
+
toolbar_location: 'bottom',
|
|
62
|
+
content_style: `
|
|
63
|
+
body {
|
|
64
|
+
font-family: Helvetica, Arial, sans-serif;
|
|
65
|
+
font-size: 14px;
|
|
66
|
+
color: ${textColor} !important;
|
|
67
|
+
background: transparent !important;
|
|
68
|
+
}
|
|
69
|
+
`,
|
|
70
|
+
branding: false,
|
|
71
|
+
paste_data_images: true,
|
|
72
|
+
file_picker_types: 'image',
|
|
73
|
+
file_picker_callback: this.filePickerCallback
|
|
74
|
+
};
|
|
45
75
|
}
|
|
46
76
|
|
|
47
77
|
filePickerCallback = cb => {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<div *ngIf="displayMode$; else noDisplayMode">
|
|
2
2
|
<component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$, isHtml$: true }"></component-mapper>
|
|
3
3
|
</div>
|
|
4
|
+
|
|
4
5
|
<ng-template #noDisplayMode>
|
|
5
6
|
<div *ngIf="!bReadonly$; else noEdit">
|
|
6
7
|
<div *ngIf="bVisible$">
|
|
@@ -13,6 +14,7 @@
|
|
|
13
14
|
</div>
|
|
14
15
|
</div>
|
|
15
16
|
</ng-template>
|
|
17
|
+
|
|
16
18
|
<ng-template #noEdit>
|
|
17
19
|
<div *ngIf="bVisible$ !== false">
|
|
18
20
|
<component-mapper name="RichTextEditor" [props]="{ label: label$, value: value$, readonly: true, testId }" [parent]="this"></component-mapper>
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
|
|
3
|
+
:host {
|
|
4
|
+
display: block;
|
|
5
|
+
background-color: var(--mat-sys-surface, #fff);
|
|
6
|
+
color: var(--mat-sys-on-surface, #000);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
::ng-deep {
|
|
10
|
+
.tox-tinymce {
|
|
11
|
+
border: 1px solid var(--mat-sys-outline, #ccc) !important;
|
|
12
|
+
border-radius: 4px !important;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.tox-edit-area__iframe {
|
|
16
|
+
background-color: transparent !important;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.tox .tox-toolbar,
|
|
20
|
+
.tox .tox-toolbar__primary,
|
|
21
|
+
.tox .tox-editor-header {
|
|
22
|
+
background-color: var(--mat-sys-surface-container-high, #f0f0f0) !important;
|
|
23
|
+
border-bottom: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.tox .tox-tbtn {
|
|
27
|
+
color: var(--mat-sys-on-surface-variant, #555) !important;
|
|
28
|
+
background: transparent !important;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.tox .tox-tbtn svg {
|
|
32
|
+
fill: var(--mat-sys-on-surface-variant, #555) !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.tox .tox-tbtn:hover {
|
|
36
|
+
background: var(--mat-sys-hover-state-layer-opacity, rgba(0, 0, 0, 0.05)) !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.tox .tox-tbtn--enabled,
|
|
40
|
+
.tox .tox-tbtn--enabled:hover {
|
|
41
|
+
background: var(--mat-sys-secondary-container, #e8def8) !important;
|
|
42
|
+
color: var(--mat-sys-on-secondary-container, #1d192b) !important;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.tox .tox-tbtn--enabled svg {
|
|
46
|
+
fill: var(--mat-sys-on-secondary-container, #1d192b) !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.tox .tox-tbtn--select {
|
|
50
|
+
background-color: transparent !important;
|
|
51
|
+
margin: 2px 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.tox .tox-tbtn__select-label {
|
|
55
|
+
color: var(--mat-sys-on-surface, #000) !important;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.tox .tox-tbtn__select-chevron svg {
|
|
59
|
+
fill: var(--mat-sys-on-surface-variant, #555) !important;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.tox .tox-tbtn--select:hover {
|
|
63
|
+
background-color: var(--mat-sys-hover-state-layer-opacity, rgba(0, 0, 0, 0.05)) !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.tox .tox-statusbar {
|
|
67
|
+
background-color: var(--mat-sys-surface-container-high, #f0f0f0) !important;
|
|
68
|
+
border-top: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
|
|
69
|
+
color: var(--mat-sys-on-surface-variant, #555) !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.tox .tox-dialog {
|
|
73
|
+
background-color: var(--mat-sys-surface-container, #fff) !important;
|
|
74
|
+
color: var(--mat-sys-on-surface, #000) !important;
|
|
75
|
+
border: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
|
|
76
|
+
box-shadow: 0 4px 12px var(--mat-sys-shadow, rgba(0, 0, 0, 0.2)) !important;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.tox .tox-dialog__header {
|
|
80
|
+
background-color: var(--mat-sys-surface-container, #fff) !important;
|
|
81
|
+
color: var(--mat-sys-on-surface, #000) !important;
|
|
82
|
+
border-bottom: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.tox .tox-dialog__footer {
|
|
86
|
+
background-color: var(--mat-sys-surface-container, #fff) !important;
|
|
87
|
+
border-top: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.tox .tox-dialog-wrap__backdrop {
|
|
91
|
+
background-color: var(--mat-sys-scrim, rgba(0, 0, 0, 0.5)) !important;
|
|
92
|
+
opacity: 0.6;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.tox .tox-dialog__body input,
|
|
96
|
+
.tox .tox-dialog__body textarea,
|
|
97
|
+
.tox .tox-dialog__body select {
|
|
98
|
+
background-color: transparent !important;
|
|
99
|
+
color: var(--mat-sys-on-surface, #000) !important;
|
|
100
|
+
border: 1px solid var(--mat-sys-outline, #ccc) !important;
|
|
101
|
+
border-radius: 4px !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.tox .tox-label {
|
|
105
|
+
color: var(--mat-sys-on-surface-variant, #555) !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.tox .tox-button--icon--hover:hover {
|
|
109
|
+
background-color: var(--mat-sys-hover-state-layer-opacity) !important;
|
|
110
|
+
color: var(--mat-sys-on-surface) !important;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.tox .tox-dialog__footer .tox-button {
|
|
114
|
+
background-color: var(--mat-sys-primary, #6200ee) !important;
|
|
115
|
+
color: var(--mat-sys-on-primary, #fff) !important;
|
|
116
|
+
border: none !important;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.tox .tox-dialog__footer .tox-button--secondary {
|
|
120
|
+
background-color: transparent !important;
|
|
121
|
+
color: var(--mat-sys-primary, #6200ee) !important;
|
|
122
|
+
border: 1px solid var(--mat-sys-outline, #ccc) !important;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
::ng-deep {
|
|
127
|
+
.tox .tox-menu {
|
|
128
|
+
background-color: var(--mat-sys-surface-container, #2e334f) !important;
|
|
129
|
+
border: 1px solid var(--mat-sys-outline-variant, #404562) !important;
|
|
130
|
+
box-shadow: 0 4px 10px var(--mat-sys-shadow, rgba(0, 0, 0, 0.3)) !important;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.tox .tox-collection__item {
|
|
134
|
+
color: var(--mat-sys-on-surface, #dde1ff) !important;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.tox .tox-collection__item--active {
|
|
138
|
+
background-color: var(--mat-sys-secondary-container, #810081) !important;
|
|
139
|
+
color: var(--mat-sys-on-secondary-container, #ffd7f5) !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.tox .tox-collection__item-icon svg {
|
|
143
|
+
fill: var(--mat-sys-on-surface, #dde1ff) !important;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.tox .tox-collection__item-accessory {
|
|
147
|
+
color: var(--mat-sys-on-surface-variant, #c0c5e7) !important;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.tox .tox-swatches__picker-btn {
|
|
151
|
+
border-color: var(--mat-sys-outline-variant) !important;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.tox .tox-listbox {
|
|
155
|
+
background-color: transparent !important;
|
|
156
|
+
border: 1px solid var(--mat-sys-outline, #8a8faf) !important;
|
|
157
|
+
color: var(--mat-sys-on-surface, #dde1ff) !important;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.tox .tox-listbox__select-chevron svg {
|
|
161
|
+
fill: var(--mat-sys-on-surface-variant, #c0c5e7) !important;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.tox .tox-listbox__select-label {
|
|
165
|
+
color: var(--mat-sys-on-surface, #dde1ff) !important;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.tox .tox-listboxfield .tox-listbox--select {
|
|
169
|
+
background-color: transparent !important;
|
|
170
|
+
color: var(--mat-sys-on-surface, #dde1ff) !important;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
@@ -47,6 +47,7 @@ export class RichTextComponent extends FieldBase {
|
|
|
47
47
|
fieldOnChange(editorValue: any) {
|
|
48
48
|
const oldVal = this.value$ ?? '';
|
|
49
49
|
const newVal = editorValue?.editor?.getBody()?.innerHTML ?? '';
|
|
50
|
+
|
|
50
51
|
const isValueChanged = newVal.toString() !== oldVal.toString();
|
|
51
52
|
|
|
52
53
|
if (isValueChanged || this.status === 'error') {
|
|
@@ -61,6 +62,7 @@ export class RichTextComponent extends FieldBase {
|
|
|
61
62
|
|
|
62
63
|
fieldOnBlur(editorValue: any) {
|
|
63
64
|
const oldVal = this.value$ ?? '';
|
|
65
|
+
|
|
64
66
|
const isValueChanged = editorValue.toString() !== oldVal.toString();
|
|
65
67
|
|
|
66
68
|
if (isValueChanged) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<div style="text-align: left" class="psdk-flow-container-top">
|
|
2
2
|
<div *ngIf="!bShowConfirm">
|
|
3
3
|
<div *ngIf="!todo_showTodo$">
|
|
4
|
-
<h2>{{ containerName$ }}</h2>
|
|
4
|
+
<h2 *ngIf="!isMultiStep">{{ containerName$ }}</h2>
|
|
5
5
|
<div *ngIf="banners?.length">
|
|
6
6
|
<component-mapper name="AlertBanner" [props]="{ banners }"></component-mapper>
|
|
7
7
|
</div>
|
|
@@ -70,6 +70,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
|
|
|
70
70
|
// itemKey: string = ""; // JA - this is what Nebula/Constellation uses to pass to finishAssignment, navigateToStep
|
|
71
71
|
|
|
72
72
|
pConnectOfActiveContainerItem;
|
|
73
|
+
isMultiStep: any;
|
|
73
74
|
|
|
74
75
|
constructor(
|
|
75
76
|
injector: Injector,
|
|
@@ -281,6 +282,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
|
|
|
281
282
|
// this.containerName$ = oWorkMeta["name"];
|
|
282
283
|
if (bLoadChildren && oWorkData) {
|
|
283
284
|
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);
|
|
284
286
|
}
|
|
285
287
|
|
|
286
288
|
// turn off spinner
|
|
@@ -1,75 +1,77 @@
|
|
|
1
|
-
<div
|
|
2
|
-
<div
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
<
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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>
|
|
17
19
|
</div>
|
|
18
|
-
|
|
19
|
-
<div class="psdk-case-view"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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>
|
|
26
30
|
</div>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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>
|
|
38
40
|
</div>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
+
|
|
42
56
|
<div *ngFor="let kid of arChildren$">
|
|
43
57
|
<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'"
|
|
49
59
|
>
|
|
50
|
-
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
|
|
60
|
+
<component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
|
|
51
61
|
</div>
|
|
52
62
|
</div>
|
|
53
|
-
</div>
|
|
54
63
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
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>
|
|
66
68
|
</div>
|
|
67
69
|
</div>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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>
|
|
73
75
|
</div>
|
|
74
76
|
</div>
|
|
75
77
|
</div>
|
|
@@ -117,9 +117,16 @@ button {
|
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
.psdk-self-service-case-view-header {
|
|
120
|
+
height: 50px;
|
|
120
121
|
display: flex;
|
|
121
|
-
justify-content: space-
|
|
122
|
+
justify-content: space-between;
|
|
122
123
|
align-items: center;
|
|
123
|
-
margin: 10px;
|
|
124
124
|
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;
|
|
125
132
|
}
|
|
@@ -4,13 +4,17 @@ import { MatButtonModule } from '@angular/material/button';
|
|
|
4
4
|
import { MatInputModule } from '@angular/material/input';
|
|
5
5
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
6
6
|
import download from 'downloadjs';
|
|
7
|
+
import debounce from 'lodash.debounce';
|
|
8
|
+
|
|
7
9
|
import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
|
|
8
10
|
import { Utils } from '@pega/angular-sdk-components';
|
|
9
11
|
import { ComponentMapperComponent } from '@pega/angular-sdk-components';
|
|
12
|
+
import { getResolvedConstantValue } from '@pega/angular-sdk-components';
|
|
10
13
|
|
|
11
14
|
interface FileUtilityProps {
|
|
12
15
|
// If any, enter additional props that only exist on this component
|
|
13
16
|
label?: string;
|
|
17
|
+
caseId?: string;
|
|
14
18
|
}
|
|
15
19
|
|
|
16
20
|
@Component({
|
|
@@ -62,6 +66,8 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
|
|
|
62
66
|
closeSvgIcon$ = '';
|
|
63
67
|
|
|
64
68
|
currentCaseID = '';
|
|
69
|
+
debouncedGetAttachments: any;
|
|
70
|
+
attachSubId;
|
|
65
71
|
|
|
66
72
|
addAttachmentsActions: any;
|
|
67
73
|
|
|
@@ -77,7 +83,9 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
|
|
|
77
83
|
|
|
78
84
|
const configProps: FileUtilityProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
|
|
79
85
|
|
|
80
|
-
|
|
86
|
+
const { caseId, label } = configProps;
|
|
87
|
+
|
|
88
|
+
this.lu_name$ = label ?? '';
|
|
81
89
|
this.lu_icon$ = 'paper-clip';
|
|
82
90
|
|
|
83
91
|
this.closeSvgIcon$ = this.utils.getImageSrc('times', this.utils.getSDKStaticContentUrl());
|
|
@@ -100,15 +108,23 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
|
|
|
100
108
|
this.removeFileFromList$ = { onClick: this.removeFileFromList.bind(this) };
|
|
101
109
|
this.removeLinksFromList$ = { onClick: this.removeLinksFromList.bind(this) };
|
|
102
110
|
|
|
111
|
+
this.debouncedGetAttachments = debounce(this.refreshAttachments.bind(this), 1000);
|
|
112
|
+
|
|
103
113
|
this.updateSelf();
|
|
104
114
|
|
|
105
115
|
this.createModalButtons();
|
|
106
116
|
|
|
107
|
-
PCore.
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
'
|
|
111
|
-
|
|
117
|
+
const caseID = caseId ?? getResolvedConstantValue(this.pConn$, PCore.getConstants().CASE_INFO.CASE_INFO_ID);
|
|
118
|
+
|
|
119
|
+
const attachSubObject = {
|
|
120
|
+
matcher: 'ATTACHMENTS',
|
|
121
|
+
criteria: {
|
|
122
|
+
ID: caseID
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
this.attachSubId = PCore.getMessagingServiceManager().subscribe(attachSubObject, this.debouncedGetAttachments, this.pConn$.getContextName());
|
|
126
|
+
|
|
127
|
+
this.debouncedGetAttachments();
|
|
112
128
|
}
|
|
113
129
|
|
|
114
130
|
ngOnDestroy(): void {
|
|
@@ -116,7 +132,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
|
|
|
116
132
|
this.angularPConnectData.unsubscribeFn();
|
|
117
133
|
}
|
|
118
134
|
|
|
119
|
-
PCore.
|
|
135
|
+
PCore.getMessagingServiceManager().unsubscribe(this.attachSubId);
|
|
120
136
|
}
|
|
121
137
|
|
|
122
138
|
// Callback passed when subscribing to store change
|
|
@@ -136,7 +152,7 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
|
|
|
136
152
|
}
|
|
137
153
|
}
|
|
138
154
|
|
|
139
|
-
onAttachFiles(files) {
|
|
155
|
+
onAttachFiles(files: any[] = []) {
|
|
140
156
|
const attachmentUtils = PCore.getAttachmentUtils();
|
|
141
157
|
const caseID = this.pConn$.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
|
|
142
158
|
|
|
@@ -129,7 +129,7 @@ export class TodoComponent implements OnInit, OnDestroy {
|
|
|
129
129
|
DATA_PAGES: { D__PY_MY_WORK_LIST }
|
|
130
130
|
}
|
|
131
131
|
} = PCore.getConstants();
|
|
132
|
-
updateWorkList(
|
|
132
|
+
updateWorkList(this.pConn$, getMappedValue(D__PY_MY_WORK_LIST));
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
updateToDo() {
|