Skip to content

Commit 38b8c80

Browse files
sha4besha4be
committed
Improve table component generation logic
1 parent bdb8038 commit 38b8c80

File tree

4 files changed

+116
-103
lines changed

4 files changed

+116
-103
lines changed

‎libs/schematic/generators/ng-generate/components/shared/methods/remote-handling/imports.ts.template‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<% if (options.customRemoteService) { %>
22
import {Custom<%= classify(name) %>Service} from './custom-<%= dasherize(name) %>.service';
3+
import {Response} from '@esmf/semantic-ui-schematic';
34
<% } else { %>
4-
import {EsmfRemoteTableService} from '@esmf/semantic-ui-schematic';
5+
import {Response, EsmfRemoteTableService} from '@esmf/semantic-ui-schematic';
56
<% } %>
67

7-
import {<%= options.aspectModel.name %>Response} from './<%= dasherize(options.name) %>.service';
88
import {AbstractArrayNode, AbstractNode, And, Eq, Limit, Query, QueryStringifier, Sort} from 'rollun-ts-rql';
9-
import {SortOptions} from "rollun-ts-rql/dist/nodes/Sort";
9+
// TODO check on working example
10+
// import {SortOptions} from "rollun-ts-rql/dist/nodes/Sort";

‎libs/schematic/generators/ng-generate/components/shared/methods/remote-handling/requestData.ts.template‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,20 +86,20 @@ private requestData() {
8686

8787
this.requestSubscription = this.tableService.requestData(this.remoteAPI, {query: rqlStringTemp})
8888
.pipe(
89-
tap((movementResponse: <%= classify(options.aspectModel.name) %>Response) => {
89+
tap((response: Response<Entity>) => {
9090
this.dataLoadError = false;
9191
this.totalItems =
92-
movementResponse.totalItems !== null && movementResponse.totalItems !== undefined
93-
? movementResponse.totalItems
94-
: movementResponse.items.length;
92+
response.totalItems !== null && response.totalItems !== undefined
93+
? response.totalItems
94+
: response.items.length;
9595
this.maxExportRows = this.totalItems;
9696

9797
<% if (options.componentType === 'card') { %>
98-
this.dataToShow = movementResponse.items;
98+
this.dataToShow = response.items;
9999
this.dataSource.data = this.dataToShow;
100100
this.paginator.length = this.dataToShow.length;
101101
<% } else { %>
102-
const dataToShow = movementResponse.items;
102+
const dataToShow = response.items;
103103
this.dataSource.setData(dataToShow);
104104
<% } %>
105105

‎libs/schematic/generators/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template‎

Lines changed: 71 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
EventEmitter,
1717
SimpleChanges,
1818
HostBinding,
19-
Inject,
2019
OnChanges,
2120
OnInit,
2221
AfterViewChecked,
@@ -27,26 +26,23 @@ import {
2726
<% if (options.enableRemoteDataHandling || options.hasSearchBar) { %>OnDestroy,<% } %>
2827
<% if (options.changeDetection) { %>ChangeDetectionStrategy,<% } %>
2928
} from '@angular/core';
30-
import { MatPaginator, MatPaginatorSelectConfig } from '@angular/material/paginator';
29+
import { MatPaginator } from '@angular/material/paginator';
3130
import { MatSort, SortDirection } from '@angular/material/sort';
3231
import { MatTable } from '@angular/material/table';
3332

3433
<% if (options.hasFilters || options.hasSearchBar) { %>
35-
import { FilterEnums, <%= options.filterServiceName %>} from './<%= cmpFileName %>-filter.service';
36-
import {EsmfChipListComponent} from '@esmf/semantic-ui-schematic';
34+
import {<%= options.filterServiceName %>} from './<%= cmpFileName %>-filter.service';
35+
import {EsmfChipListComponent, EsmfTableCellComponent} from '@esmf/semantic-ui-schematic';
3736
<% } %>
3837

3938
<% if (options.addCommandBar) { %>
4039
import {unparse} from 'papaparse';
41-
import {Action, ExportTableDialogComponent} from '<% if (options.enableVersionSupport) { %>../<% } %>../export-confirmation-dialog/export-table-dialog.component';
40+
import {Actions, Action, EsmfExportTableDialogComponent} from '@esmf/semantic-ui-schematic';
4241
<% } %>
4342

4443
import {MatDialog} from '@angular/material/dialog';
4544
import {
4645
<%= classify(options.selectedModelTypeName) %>
47-
<% if (selectedModelElementUrn !== aspectModelElementUrn && !isCollectionAspect) { %>
48-
, <%= classify(options.aspectModelTypeName) %>
49-
<% } %>
5046
<% if (options.isEnumQuickFilter) { %>
5147
, <%= enumProperties %>
5248
<% } %>
@@ -57,22 +53,19 @@ import {<%= tableDataSourceName %>} from '@esmf/semantic-ui-schematic';
5753
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
5854
<% } %>
5955

60-
<% if ([...options.customRowActions, ...options.customCommandBarActions].findIndex(element => element.includes('.')) !== -1) { %>
61-
import { MatIconRegistry } from '@angular/material/icon';
56+
<% if (hasCustomActions) { %>
57+
import {MatIcon, MatIconRegistry} from '@angular/material/icon';
58+
<% } else { %>
59+
import {MatIcon} from '@angular/material/icon';
6260
<% } %>
6361

64-
import {DomSanitizer} from '@angular/platform-browser';
62+
import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
6563
import {SelectionModel} from '@angular/cdk/collections';
66-
import { TranslocoService } from '@jsverse/transloco';
67-
import {EsmfPaginatorSelectConfigInjector} from "<% if (options.enableVersionSupport) { %>../<% } %>../../services/paginator-select-config.provider";
68-
import {EsmfLocalStorageService} from "<% if (options.enableVersionSupport) { %>../<% } %>../../services/storage.service";
64+
import {EsmfPaginatorSelectConfigInjector} from '@esmf/semantic-ui-schematic';
65+
import {EsmfLocalStorageService} from '@esmf/semantic-ui-schematic';
6966
import {<%= classify(name) %>CommandBarComponent} from "./<%= cmpFileName %>-command-bar.component";
7067
import {<%= classify(name) %>ColumnMenuComponent} from './<%= cmpFileName %>-column-menu.component';
7168

72-
<% if (options.hasSearchBar) { %>
73-
import {<%= classify(name) %>ConfigMenuComponent} from './<%= cmpFileName %>-config-menu.component';
74-
<% } %>
75-
7669
<% if (options.hasFilters) { %>
7770
import {debounceTime, filter, map, takeUntil} from 'rxjs/operators'
7871
<% } else if (options.hasSearchBar) { %>
@@ -87,10 +80,12 @@ import {<% if (options.enableRemoteDataHandling) { %>catchError, finalize, tap,
8780
<%= options.include('/remote-handling/imports.ts.template') %>
8881
<%= options.include('/remote-handling/custom-rql-filter-extensions.ts.template') %>
8982
<% } else { %>
90-
// TODO remove the commented line bellow
91-
// import {<%= classify(name) %>Service, <%= classify(aspectModelName) %>Response} from './<%= cmpFileName %>.service';
9283
import {EsmfStaticTableService} from '@esmf/semantic-ui-schematic';
9384
<% } %>
85+
import {MatMenu, MatMenuTrigger} from '@angular/material/menu';
86+
import {MatIconButton} from '@angular/material/button';
87+
import {NgClass} from '@angular/common';
88+
import {MatTooltip} from '@angular/material/tooltip';
9489

9590
<% if (options.hasSearchBar) { %>
9691
<%= options.include('/interfaces/config.ts.template') %>
@@ -116,69 +111,85 @@ export const NON_DATA_COLUMNS: <%= tableColumnsEnumName %>[] = [
116111
<%= tableColumnsEnumName %>.COLUMNS_MENU
117112
];
118113

114+
type Entity = <%= classify(options.selectedModelTypeName) %>;
115+
119116
<% if (hasCustomRowActions) { %>
120117
type RowAction = <%= customRowActionNames.join(' | ') %>;
121-
export type <%= options.aspectModelTypeName %>ActionsResolvers = Partial<Record<RowAction, (rowData: <%= options.aspectModelTypeName %>) => boolean>> | undefined;
118+
export type <%= options.aspectModelTypeName %>ActionsResolvers = Partial<Record<RowAction, (rowData: Entity) => boolean>> | undefined;
122119
<% } %>
123120

124121

125122

126123
@Component({
127124
selector: '<%= options.selector %>',
128-
imports: [EsmfChipListComponent],
125+
imports: [
126+
EsmfChipListComponent,
127+
MatPaginator,
128+
MatMenu,
129+
MatIconButton,
130+
MatSort,
131+
NgClass,
132+
MatTable,
133+
MatIcon,
134+
MatTooltip,
135+
EsmfTableCellComponent,
136+
MatMenuTrigger
137+
],
129138
templateUrl: './<%= cmpFileName %>.component.html',
130139
styleUrls: ['./<%= cmpFileName %>.component.<%= options.style %>'],
131140
providers: [
132-
<%= tableServiceName %>
141+
<%= tableServiceName %>,
142+
EsmfLocalStorageService
133143
],
134144
<% if (options.changeDetection) { %>changeDetection: ChangeDetectionStrategy.<%= options.changeDetection %>,<% } %>
135145
<% if (options.viewEncapsulation) { %>encapsulation: ViewEncapsulation.<%= options.viewEncapsulation %>,<% } else { %>encapsulation: ViewEncapsulation.None,<% } %>
136146
})
137147
export class <%= classify(name) %>Component implements OnInit, AfterViewInit, AfterViewChecked, OnChanges<% if (options.hasSearchBar || options.enableRemoteDataHandling) { %>, OnDestroy<% } %> {
138-
private tableService = inject(<%= tableServiceName %><<%= options.aspectModelTypeName %>>);
148+
<%= injections %>
149+
private tableService = inject(<%= tableServiceName %><Entity>);
139150

140151
<% if (options.hasSearchBar) { %>@Input() initialSearchString = '';<% } %>
141152
<%= customRowActionInput %>
142153
<% if (options.dateProperties) { %>@Input() tableDateFormat = 'short';<% } %>
143154
<% if (options.dateTimeStampProperties) { %>@Input() tableDateTimeFormat = 'short';<% } %>
144155
<% if (options.timeProperties) { %>@Input() tableTimeFormat = 'shortTime';<% } %>
145156

146-
@Input() data: Array<<%= options.aspectModelTypeName %>> = [];
157+
@Input() data: Entity[] = [];
147158
@Input() customTemplate?: TemplateRef<any>;
148159
@Input() searchHint?: string;
149-
@Input() showFirstLastButtons: boolean = true;
160+
@Input() showFirstLastButtons = true;
150161

151162
<%= customColumnsInput %>
152163

153-
@Input() pageSize: number = 20;
154-
@Input() pageSizeOptions: Array<number> = [5, 20, 50, 100];
164+
@Input() pageSize = 20;
165+
@Input() pageSizeOptions: number[] = [5, 20, 50, 100];
155166

156-
@Input() highlightSelectedRow: boolean = true;
167+
@Input() highlightSelectedRow = true;
157168
@Input() highlightColor = 'rgba(127, 198, 231, 0.3)';
158169
@Input() isMultipleSelectionEnabled = true;
159-
@Input() noDataMessage: string = '';
160-
@Input() dataLoadErrorMessage: string = '';
161-
@Input() visibleRowActionsIcons: number = 3;
162-
@Input() headerTooltipsOff: boolean = false;
163-
@Input() setStickRowActions: boolean = true;
164-
@Input() customTableClass: string = '';
165-
@Input() debounceTime: number = 500;
166-
@Input() minNumberCharacters: number = 2;
167-
@Input() maxNumberCharacters: number = 50;
168-
@Input() allowedCharacters: string = '';
169-
@Input() regexValidator:string = '';
170+
@Input() noDataMessage = '';
171+
@Input() dataLoadErrorMessage = '';
172+
@Input() visibleRowActionsIcons = 3;
173+
@Input() headerTooltipsOff = false;
174+
@Input() setStickRowActions = true;
175+
@Input() customTableClass = '';
176+
@Input() debounceTime = 500;
177+
@Input() minNumberCharacters = 2;
178+
@Input() maxNumberCharacters = 50;
179+
@Input() allowedCharacters = '';
180+
@Input() regexValidator = '';
170181

171182
@Input() hideColumns: <%= tableColumnsEnumName %>[] = [];
172183

173184
<% if (options.hasSearchBar) { %>@Input() hasAdvancedSearch: boolean = this.filterService.stringColumns.length > 1;<% } %>
174185
<% if (options.enableRemoteDataHandling) { %>
175-
@Input() maxExportRows: number = 5000;
186+
@Input() maxExportRows = 5000;
176187
@Input() customFilterExtension: CustomRQLFilterExtension | undefined;
177188
@Input() customOptionsExtension: CustomRQLOptionExtension | undefined;
178189
@Input() extendedCsvExporter: ExtendedCsvExporter | undefined;
179-
@Input() remoteAPI: string = '';
190+
@Input() remoteAPI = '';
180191
<% } else { %>
181-
@Input() maxExportRows: number = 0;
192+
@Input() maxExportRows = 0;
182193
<% } %>
183194

184195
<% if (hasCustomRowActions) { %>
@@ -203,18 +214,14 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
203214

204215
@ViewChild(MatSort) private sort!: MatSort;
205216
@ViewChild(MatPaginator) private paginator!: MatPaginator
206-
@ViewChild(MatTable) private table!: MatTable<<%= classify(aspectModelTypeName) %>>;
217+
@ViewChild(MatTable) private table!: MatTable<Entity>;
207218
@ViewChild(<%= classify(name) %>ColumnMenuComponent) private columMenuComponent!: <%= classify(name) %>ColumnMenuComponent;
208219

209-
<% if (options.hasSearchBar) { %>
210-
@ViewChild(<%= classify(name) %>ConfigMenuComponent) private configurationComponent!: <%= classify(name) %>ConfigMenuComponent;
211-
<% } %>
212-
213220
@ViewChild('searchInput') searchInput!: ElementRef;
214221
@ViewChild(<%= classify(name) %>CommandBarComponent) commandBar: <%= classify(name) %>CommandBarComponent;
215222

216223
@HostBinding("attr.style")
217-
public get valueAsStyle(): any {
224+
public get valueAsStyle(): SafeStyle | undefined {
218225
if(!this.highlightColor) {
219226
return;
220227
}
@@ -227,9 +234,9 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
227234
readonly <%= options.localStorageKeyConfig %> = '<%= options.localStorageKeyConfig.replace(options.localStoragePrefix, '').toLowerCase() %>';
228235
<% } %>
229236

230-
totalItems: number = 0;
237+
totalItems = 0;
231238
selection = new SelectionModel<any>(this.isMultipleSelectionEnabled, []);
232-
dataSource = new <%= tableDataSourceName %><<%= classify(aspectModelTypeName) %>>();
239+
dataSource = new <%= tableDataSourceName %><Entity>();
233240

234241
columnToSort:{sortColumnName: string, sortDirection: SortDirection} = {sortColumnName:'<%= options.defaultSortingCol %>', sortDirection : 'asc'};
235242
// The list of column names that are displayed in the table, including NON_DATA_COLUMNS
@@ -241,13 +248,12 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
241248
configs: Array<Config> = [];
242249
<% } %>
243250

244-
currentLanguage: string;
245-
filteredData: Array<<%= classify(aspectModelTypeName) %>> = [];
246-
dragging: boolean = false;
247-
customRowActionsLength: number = <%= options.customRowActions.length %>;
248-
closeColumnMenu: boolean = false;
249-
rqlString: string = '';
250-
searchFocused: boolean = false;
251+
filteredData: Entity[] = [];
252+
dragging = false;
253+
customRowActionsLength = <%= options.customRowActions.length %>;
254+
closeColumnMenu = false;
255+
rqlString = '';
256+
searchFocused = false;
251257
dataLoadError = false;
252258

253259
<% if (options.hasSearchBar) { %>
@@ -261,11 +267,11 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
261267
<% } %>
262268

263269
<% if (options.enableRemoteDataHandling) { %>
264-
private requestSubscription: Subscription = new Subscription();
270+
private requestSubscription = new Subscription();
265271
<% } %>
266272

267-
constructor(<%= commonImports %>) {
268-
<%= sharedCustomRows %>
273+
constructor(){
274+
<%= registerCustomIcons %>
269275
}
270276

271277
ngOnInit(): void {
@@ -561,7 +567,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
561567
openExportConfirmationDialog() {
562568
const dataColumns = this.displayedColumns.filter(col => this.isAvailableDataColumn(col));
563569

564-
const dialogRef = this.dialog.open(ExportTableDialogComponent, {
570+
const dialogRef = this.dialog.open(EsmfExportTableDialogComponent, {
565571
data: {
566572
<% if (options.enableRemoteDataHandling) { %>
567573
extendedCsvExporter: this.extendedCsvExporter,
@@ -576,7 +582,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
576582
dialogRef.afterClosed()
577583
.pipe(filter(e => !!e))
578584
.subscribe((event: { action: Action, exportAllPages: boolean; exportAllColumns: boolean }): void => {
579-
if (event.action === Action.cancel) {
585+
if (event.action === Actions.Cancel) {
580586
return;
581587
}
582588

@@ -648,7 +654,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
648654
<% } %>
649655

650656
setDisplayedColumns(columns: Array<Column>): void {
651-
let displayedColumnsTmp: Array<Column> = [];
657+
const displayedColumnsTmp: Column[] = [];
652658

653659
<% if (options.addRowCheckboxes) { %>
654660
if (columns[0].name !== <%= tableColumnsEnumName %>['CHECKBOX']) {
@@ -681,7 +687,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
681687
<% } %>
682688

683689
<% if (hasCustomRowActions) { %>
684-
protected isAvailableRowAction(action: RowAction, rowData: <%= options.aspectModelTypeName %>): boolean {
690+
protected isAvailableRowAction(action: RowAction, rowData: Entity): boolean {
685691
if (!this.actionResolvers || !this.actionResolvers[action]) {
686692
return true;
687693
}

0 commit comments

Comments
 (0)