Skip to content

Commit cb1ed12

Browse files
samhere06mohas22
samhere06
and
mohas22
authored
Updated simple table manual (#287)
Co-authored-by: mohas22 <[email protected]>
1 parent 67452e9 commit cb1ed12

File tree

7 files changed

+84
-30
lines changed

7 files changed

+84
-30
lines changed

‎packages/angular-sdk-components/src/lib/_components/field/dropdown/dropdown.component.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,18 @@ export class DropdownComponent implements OnInit, OnDestroy {
134134
}
135135
}
136136

137+
set options(options: IOption[]) {
138+
this.options$ = options;
139+
if (this.displayMode$) {
140+
this.value$ = this.options$?.find(option => option.key === this.value$)?.value || this.value$;
141+
this.localizedValue = this.pConn$.getLocalizedValue(
142+
this.value$ === 'Select...' ? '' : this.value$,
143+
this.localePath,
144+
this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
145+
);
146+
}
147+
}
148+
137149
ngOnDestroy(): void {
138150
if (this.formGroup$) {
139151
this.formGroup$.removeControl(this.controlName$);
@@ -215,7 +227,7 @@ export class DropdownComponent implements OnInit, OnDestroy {
215227
if (this.theDatasource) {
216228
const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
217229
optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
218-
this.options$ = optionsList;
230+
this.options = optionsList;
219231
}
220232

221233
this.actionsApi = this.pConn$.getActionsApi();
@@ -281,7 +293,7 @@ export class DropdownComponent implements OnInit, OnDestroy {
281293
}
282294

283295
columns = preProcessColumns(columns) || [];
284-
if (!this.displayMode$ && listType !== 'associated' && typeof datasource === 'string') {
296+
if (listType !== 'associated' && typeof datasource === 'string') {
285297
this.getData(datasource, parameters, columns, context, listType);
286298
}
287299
}
@@ -312,7 +324,7 @@ export class DropdownComponent implements OnInit, OnDestroy {
312324
optionsData.push(obj);
313325
});
314326
optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
315-
this.options$ = optionsData;
327+
this.options = optionsData;
316328
});
317329
});
318330
}

‎packages/angular-sdk-components/src/lib/_components/template/field-value-list/field-value-list.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div *ngIf="displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL" class="psdk-container-labels-left">
2-
<div class="psdk-grid-label">{{ label$ }}</div>
1+
<div *ngIf="displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL" class="${label$ ? 'psdk-container-labels-left' : 'psdk-container-nolabels'}">
2+
<div *ngIf="label$" class="psdk-grid-label">{{ label$ }}</div>
33
<div class="psdk-val-labels-left">
44
<ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
55
</div>

‎packages/angular-sdk-components/src/lib/_components/template/field-value-list/field-value-list.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
align-items: start;
77
padding-block: 8px;
88
}
9+
.psdk-container-nolabels {
10+
align-items: start;
11+
padding-block: 8px;
12+
}
913
.psdk-value {
1014
margin: 8px 0px;
1115
}

‎packages/angular-sdk-components/src/lib/_components/template/simple-table-manual/helpers.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export const createMetaForTable = (fields, renderMode) => {
189189
};
190190

191191
export const filterDataByDate = (item, filterObj) => {
192-
let bKeep;
192+
let bKeep = true;
193193
let value = item[filterObj.ref] != null || item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
194194
let filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
195195

@@ -237,7 +237,7 @@ export const filterDataByDate = (item, filterObj) => {
237237
};
238238

239239
export const filterDataByCommonFields = (item, filterObj) => {
240-
let bKeep;
240+
let bKeep = true;
241241
const value = item[filterObj.ref].toLowerCase();
242242
const filterValue = filterObj.containsFilterValue.toLowerCase();
243243

‎packages/angular-sdk-components/src/lib/_components/template/simple-table-manual/simple-table-manual.component.html‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<h3 *ngIf="label" className="label" style="font-weight: bold">
44
{{ label }} <span class="results-count">{{ getResultsText() }}</span>
55
</h3>
6-
<table *ngIf="readOnlyMode || allowEditingInModal" mat-table [dataSource]="rowData" class="mat-elevation-z8" id="readonly-table" matSort>
7-
<ng-container *ngFor="let dCol of processedFields" [matColumnDef]="dCol.config.name">
6+
<table *ngIf="readOnlyMode || allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="readonly-table" matSort>
7+
<ng-container *ngFor="let dCol of processedFields; let i = index" [matColumnDef]="dCol.config.name">
88
<th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
99
<div>{{ dCol.config.label }}</div>
1010
<div class="psdk-mat-header-filter">
@@ -27,7 +27,16 @@ <h3 *ngIf="label" className="label" style="font-weight: bold">
2727
</mat-menu>
2828
</div>
2929
</th>
30-
<td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
30+
<td mat-cell *matCellDef="let element">
31+
<component-mapper
32+
[name]="element[i].getPConnect().getComponentName()"
33+
[props]="{
34+
pConn$: element[i].getPConnect(),
35+
formGroup$: formGroup$
36+
}"
37+
errorMsg="Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}"
38+
></component-mapper>
39+
</td>
3140
</ng-container>
3241
<ng-container matColumnDef="DeleteIcon">
3342
<div *ngIf="allowEditingInModal">
@@ -47,6 +56,9 @@ <h3 *ngIf="label" className="label" style="font-weight: bold">
4756
</ng-container>
4857
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
4958
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
59+
<tr class="mat-row psdk-no-records" *matNoDataRow>
60+
<td class="mat-cell" [attr.colspan]="displayedColumns.length">No Records Found.</td>
61+
</tr>
5062
</table>
5163
<table *ngIf="editableMode && !allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="editable-table">
5264
<ng-container *ngFor="let dCol of fieldDefs; let i = index">
@@ -74,9 +86,10 @@ <h3 *ngIf="label" className="label" style="font-weight: bold">
7486
</ng-container>
7587
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
7688
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
89+
<tr class="mat-row psdk-no-records" *matNoDataRow>
90+
<td class="mat-cell" [attr.colspan]="displayedColumns.length">No Records Found.</td>
91+
</tr>
7792
</table>
78-
<div class="psdk-no-records" id="no-records" *ngIf="editableMode && referenceList?.length === 0">No Records Found.</div>
79-
<div class="psdk-no-records" id="no-records" *ngIf="readOnlyMode && rowData?.data?.length === 0">No Records Found.</div>
8093
</div>
8194
<button *ngIf="showAddRowButton" mat-button color="primary" style="font-size: 16px" (click)="addRecord()">+ Add</button>
8295
</ng-container>

‎packages/angular-sdk-components/src/lib/_components/template/simple-table-manual/simple-table-manual.component.scss‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ td.mat-mdc-cell,
2424
td.mat-mdc-footer-cell {
2525
border-right: 1px solid var(--app-neutral-light-color);
2626
padding: 8px !important;
27+
min-width: 10rem;
28+
}
29+
30+
::ng-deep th.mat-mdc-header-cell:last-child,
31+
td.mat-mdc-cell:last-child {
32+
min-width: 2rem;
2733
}
2834

2935
::ng-deep .mat-mdc-button {
@@ -160,9 +166,7 @@ tr.mat-mdc-header-row {
160166

161167
.psdk-no-records {
162168
height: 56px;
163-
justify-content: center;
164-
display: flex;
165-
align-items: center;
169+
text-align: center;
166170
border: 1px solid var(--app-neutral-light-color);
167171
border-top: none;
168172
background: var(--app-form-color);

‎packages/angular-sdk-components/src/lib/_components/template/simple-table-manual/simple-table-manual.component.ts‎

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
103103
showAddRowButton: boolean;
104104
prevReferenceList: any[] = [];
105105
elementsData: MatTableDataSource<any>;
106+
originalElementsData: MatTableDataSource<any>;
106107
rawFields: any;
107108
label?: string = '';
108109
searchIcon$: string;
@@ -167,6 +168,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
167168
) {}
168169

169170
ngOnInit(): void {
171+
this.elementsData = new MatTableDataSource<any>([]);
170172
this.isInitialized = true;
171173
// First thing in initialization is registering and subscribing to the AngularPConnect service
172174
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
@@ -326,7 +328,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
326328
});
327329

328330
// for adding rows to table when editable and not modal view
329-
if (this.prevReferenceList.length !== this.referenceList.length && this.editableMode && !this.allowEditingInModal) {
331+
if (this.prevReferenceList.length !== this.referenceList.length) {
330332
this.buildElementsForTable();
331333
}
332334

@@ -374,8 +376,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
374376
}
375377

376378
sortCompare(a, b): number {
377-
let aValue = a[this.compareRef];
378-
let bValue = b[this.compareRef];
379+
let aValue = a[0][this.compareRef];
380+
let bValue = b[0][this.compareRef];
379381

380382
if (this.compareType == 'Date' || this.compareType == 'DateTime') {
381383
aValue = getSeconds(aValue);
@@ -498,17 +500,20 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
498500
// run through list of elements in path, if menu not in th path, then want to
499501
// hide (toggle) the menu
500502
const eventPath = event.path;
501-
for (let eventIndex = 0; eventIndex < eventPath.length; eventIndex++) {
502-
if (
503-
eventPath[eventIndex].className == 'psdk-modal-file-top' ||
504-
eventPath[eventIndex].tagName == 'BUTTON' ||
505-
eventPath[eventIndex].tagName == 'MAT-OPTION' ||
506-
eventPath[eventIndex].tagName == 'MAT-INPUT'
507-
) {
508-
bInPopUp = true;
509-
break;
503+
if (eventPath) {
504+
for (let eventIndex = 0; eventIndex < eventPath.length; eventIndex++) {
505+
if (
506+
eventPath[eventIndex].className == 'psdk-modal-file-top' ||
507+
eventPath[eventIndex].tagName == 'BUTTON' ||
508+
eventPath[eventIndex].tagName == 'MAT-OPTION' ||
509+
eventPath[eventIndex].tagName == 'MAT-INPUT'
510+
) {
511+
bInPopUp = true;
512+
break;
513+
}
510514
}
511515
}
516+
512517
if (!bInPopUp) {
513518
// this.bShowFilterPopover$ = false;
514519

@@ -627,7 +632,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
627632
}
628633
}
629634

630-
filterData(item: any) {
635+
filterData(element: any) {
636+
const item = element[0];
631637
let bKeep = true;
632638
for (const filterObj of this.filterByColumns) {
633639
if (filterObj.containsFilterValue != '' || filterObj.containsFilter == 'null' || filterObj.containsFilter == 'notnull') {
@@ -641,6 +647,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
641647
bKeep = filterDataByCommonFields(item, filterObj);
642648
break;
643649
}
650+
} else if (filterObj.containsFilterValue === '') {
651+
bKeep = true;
644652
}
645653

646654
// if don't keep stop filtering
@@ -653,14 +661,22 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
653661
}
654662

655663
filterSortGroupBy() {
656-
let theData = this.originalData.slice();
664+
let theData = this.originalData.slice().map((item, index) => {
665+
return [item, index];
666+
});
657667

658668
// last filter config data is global
659669
theData = theData.filter(this.filterData.bind(this));
660670

661671
// last sort config data is global
662672
theData.sort(this.sortCompare.bind(this));
663-
this.rowData.data = theData;
673+
this.rowData.data = theData.map(item => item[0]);
674+
675+
const newElements: any = new Array(this.rowData.data.length);
676+
theData.forEach((item, index) => {
677+
newElements[index] = this.originalElementsData[item[1]];
678+
});
679+
this.elementsData = newElements;
664680
}
665681

666682
_headerSortClick(event, columnData) {
@@ -959,6 +975,10 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
959975
this.referenceList.forEach((element, index) => {
960976
const data: any = [];
961977
this.rawFields?.forEach(item => {
978+
item = {
979+
...item,
980+
config: { ...item.config, label: '', displayMode: this.readOnlyMode || this.allowEditingInModal ? 'DISPLAY_ONLY' : undefined }
981+
};
962982
const referenceListData = getReferenceList(this.pConn$);
963983
const isDatapage = referenceListData.startsWith('D_');
964984
const pageReferenceValue = isDatapage ? `${referenceListData}[${index}]` : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
@@ -976,6 +996,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
976996
});
977997
eleData.push(data);
978998
});
999+
this.originalElementsData = eleData;
9791000
this.elementsData = eleData;
9801001
}
9811002
}

0 commit comments

Comments
 (0)