Skip to content

Commit 800cf9f

Browse files
sha4besha4be
authored
Standalone command bar and many other changes
Standalone command bar and amy other changes
2 parents 59755f3 + f039844 commit 800cf9f

File tree

42 files changed

+846
-1348
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+846
-1348
lines changed

‎_legacy/src/ng-generate/components/shared/methods/interfaces/config.ts.template‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎libs/schematic/generators/ng-generate/components/card/index.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,9 @@ export function generateCard(cardSchema: Schema): Rule {
5151
insertVersionIntoPathRule(),
5252
setTemplateOptionValuesRule(),
5353
...generateGeneralFilesRules(),
54-
...cardSpecificGeneration(),
54+
generateCardComponent(options),
55+
generateExportCardDialog(options),
5556
...addAndUpdateConfigurationFilesRule(),
5657
formatAllFilesRule(),
5758
]);
5859
}
59-
60-
function cardSpecificGeneration(): Array<Rule> {
61-
return [generateCardComponent(options), generateExportCardDialog(options)];
62-
}

‎libs/schematic/generators/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.html.template‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<mat-toolbar data-test="toolbar" class="toolbar" #componentsContainer>
22
<div *ngIf="isMultipleSelectionEnabled" data-test="toolbar-number-of-items" class="command-bar-number-of-items">{{ selection.selected.length > 0 ? (selection.selected.length + ' / ') : '' }}{{ totalItems }}</div>
33
<% if (options.hasSearchBar) { %>
4-
<mat-form-field data-test="search-form-field-<%= options.componentType %>" *ngIf="!isInCollapsedMenu('search-form-field-<%= options.componentType %>')" appearance="fill" #toolbarComp>
5-
<mat-label data-test="search-label">{{ 'search' | transloco }}</mat-label>
4+
<mat-form-field class="search-input" data-test="search-form-field-<%= options.componentType %>" *ngIf="!isInCollapsedMenu('search-form-field-<%= options.componentType %>')" appearance="fill" #toolbarComp>
65
<input
76
#searchInput
87
data-test="search-input"
98
matInput
109
[formControl]="filterService.searchString"
1110
type="text"
11+
placeholder="{{ 'search' | transloco }}"
1212
(keyup.enter)="triggerReloadFilter()"
1313
(focus)="searchFocused = true"
1414
(blur)="searchFocused = false"/>
@@ -36,8 +36,7 @@
3636
<% if (options.componentType === 'table' && options.hasSearchBar) { %>
3737
<ng-container *ngIf="hasAdvancedSearch">
3838
<mat-form-field data-test="form-field-select" *ngIf="!isInCollapsedMenu('form-field-select')" appearance="fill" #toolbarComp>
39-
<mat-label data-test="select-label">{{ 'advancedSearch' | transloco }}</mat-label>
40-
<mat-select data-test="select" [formControl]="filterService.selectedStringColumn">
39+
<mat-select data-test="select" [formControl]="filterService.selectedStringColumn" placeholder="{{ 'advancedSearch' | transloco }}">
4140
<mat-option [value]="filterService.advancedSearchAllValue">{{ 'allTextFields' | transloco }}</mat-option>
4241
<mat-option *ngFor="let searchField of filterService.stringColumns" [value]="searchField">
4342
<span>{{ '<%= options.translationPath %>' + searchField + '.preferredName' | transloco }}</span>
@@ -189,11 +188,11 @@
189188

190189
<% if (options.componentType === 'table' && options.hasSearchBar) { %>
191190
<mat-menu data-test="column-menu" #configurationMenu="matMenu" class="column-menu">
192-
<<%= dasherize(name) %>-config-menu
191+
<esmf-config-menu
193192
[isOpenedFromMatMenu]="true"
194193
#configurationMenuComponent
195194
(configChangedEvent)="triggerSetConfiguration($event)"
196-
></<%= dasherize(name) %>-config-menu>
195+
></esmf-config-menu>
197196
</mat-menu>
198197
<% } %>
199198

@@ -243,8 +242,7 @@
243242
<% if (options.componentType === 'table' && options.hasSearchBar) { %>
244243
<ng-container *ngIf="hasAdvancedSearch">
245244
<mat-form-field data-test="form-field-select" id="form-field-select" *ngIf="!isInCollapsedMenu('form-field-select')" appearance="fill" #toolbarComp>
246-
<mat-label data-test="select-label">{{ 'advancedSearch' | transloco }}</mat-label>
247-
<mat-select data-test="select" [formControl]="filterService.selectedStringColumn">
245+
<mat-select data-test="select" [formControl]="filterService.selectedStringColumn" placeholder="{{ 'advancedSearch' | transloco }}">
248246
<mat-option [value]="filterService.advancedSearchAllValue">{{ 'allTextFields' | transloco }}</mat-option>
249247
<mat-option *ngFor="let searchField of filterService.stringColumns" [value]="searchField">
250248
<span>{{ '<%= options.translationPath %>' + searchField + '.preferredName' | transloco }}</span>
@@ -261,8 +259,7 @@
261259
<ng-container *ngIf="hasAdvancedSearch">
262260
<div mat-menu-item *ngIf="isInCollapsedMenu('form-field-select')">
263261
<mat-form-field data-test="form-field-select" id="form-field-select" appearance="fill">
264-
<mat-label data-test="select-label">{{ 'advancedSearch' | transloco }}</mat-label>
265-
<mat-select data-test="select" [formControl]="filterService.selectedStringColumn">
262+
<mat-select data-test="select" [formControl]="filterService.selectedStringColumn" placeholder="{{ 'advancedSearch' | transloco }}">
266263
<mat-option [value]="filterService.advancedSearchAllValue">{{ 'allTextFields' | transloco }}</mat-option>
267264
<mat-option *ngFor="let searchField of filterService.stringColumns" [value]="searchField">
268265
<span>{{ '<%= options.translationPath %>' + searchField + '.preferredName' | transloco }}</span>

‎libs/schematic/generators/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.scss.template‎

Lines changed: 102 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,108 @@
11
/** <%= options.generationDisclaimerText %> **/
2+
.js-sdk-command-bar {
3+
.toolbar {
4+
font-size: inherit;
5+
align-items: center;
6+
max-width: unset;
27

3-
<% if (options.componentType === 'card' && options.addCommandBar) { %>
4-
.sorting-content {
8+
.command-bar-number-of-items {
59
display: flex;
6-
align-items: center;
7-
cursor: pointer;
8-
padding-right: 20px;
910
}
10-
<% } %>
1111

12-
mat-toolbar {
13-
overflow: hidden;
14-
}
12+
mat-toolbar {
13+
overflow: hidden;
14+
}
15+
16+
.mat-mdc-menu-panel {
17+
max-width: max-content !important;
18+
}
19+
20+
.mat-mdc-form-field {
21+
padding-top: 20px;
22+
margin-right: 8px;
23+
}
24+
25+
<% if (options.componentType === 'card' && options.addCommandBar) { %>
26+
.sorting-content {
27+
display: flex;
28+
align-items: center;
29+
cursor: pointer;
30+
padding-right: 20px;
31+
}
32+
<% } %>
33+
34+
.command-bar-number-of-items {
35+
margin-right: 10px;
36+
}
37+
38+
.padding-40 {
39+
padding:40px;
40+
}
41+
42+
.filter-options-container {
43+
overflow-y: auto;
44+
min-height: 100px;
45+
max-height: 200px;
46+
}
47+
48+
.filter-actions-container {
49+
text-align: right;
50+
padding: 6px;
51+
52+
.filter-apply-btn {
53+
margin-left: 10px;
54+
}
55+
}
56+
57+
::ng-deep {
58+
.advanced-search-option-description {
59+
position: relative;
60+
float: left;
61+
font-size: 10px;
62+
line-height: 1;
63+
top: -12px;
64+
white-space: break-spaces;
65+
}
66+
67+
& .resizing {
68+
-moz-user-select: none;
69+
-ms-user-select: none;
70+
user-select: none;
71+
cursor: e-resize;
72+
}
1573

16-
.padding-40 { padding:40px; }
74+
& .handle {
75+
width: 15px;
76+
position: absolute;
77+
top: 0;
78+
right: 0;
79+
height: 100%;
80+
cursor: col-resize;
81+
opacity: 0;
82+
transition: all 0.2s ease-in;
83+
84+
&:after {
85+
content: '';
86+
display: block;
87+
width: 1px;
88+
height: 100%;
89+
z-index: 1;
90+
background: linear-gradient(0, rgba(255, 255, 255, 1) 0%, rgba(157, 157, 157, 1) 49%, rgba(255, 255, 255, 1) 100%);
91+
transition: all 0.5ms ease-in;
92+
}
93+
}
94+
95+
.mat-mdc-menu-panel {
96+
max-width: max-content !important;
97+
}
98+
99+
.mat-list-item-content {
100+
flex-direction: row !important;
101+
}
102+
103+
.mat-pseudo-checkbox {
104+
margin-right: 10px;
105+
}
106+
}
107+
}
108+
}

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

Lines changed: 58 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
/** <%= options.generationDisclaimerText %> **/
2-
import {Component, EventEmitter, Input, Output, ViewChild, AfterViewInit, ElementRef, HostListener, QueryList, ViewChildren, TemplateRef} from '@angular/core';
2+
<%
3+
var addConfigMenu = options.componentType === 'table' && options.hasSearchBar;
4+
%>
5+
6+
import {Component, EventEmitter, Input, Output, ViewChild, AfterViewInit, inject, ElementRef, HostListener, QueryList, ViewChildren, TemplateRef, ViewEncapsulation} from '@angular/core';
37
import {SelectionModel} from "@angular/cdk/collections";
48
import { MatDialog } from '@angular/material/dialog';
59

@@ -15,32 +19,63 @@ import { MatDialog } from '@angular/material/dialog';
1519
import {<%= classify(name) %>CardValues} from './<%= dasherize(name) %>.component';
1620
<% } %>
1721

18-
<% if (options.componentType === 'table' && options.hasSearchBar) { %>
19-
import {Config} from "./<%= dasherize(name) %>.component";
20-
import {<%= classify(name) %>ConfigMenuComponent} from './<%= dasherize(name) %>-config-menu.component';
22+
<% if (addConfigMenu) { %>
23+
import {Config, EsmfConfigMenuComponent} from '@esmf/semantic-ui-schematic';
2124
<% } %>
25+
import {MatToolbar} from '@angular/material/toolbar';
26+
import {MatError, MatFormField, MatHint} from '@angular/material/form-field';
27+
import {MatLabel} from '@angular/material/form-field';
28+
import {ReactiveFormsModule} from '@angular/forms';
29+
import {MatIcon} from '@angular/material/icon';
30+
import {MatSelectModule} from '@angular/material/select';
31+
import {MatTooltip} from '@angular/material/tooltip';
32+
import {MatMenuModule} from '@angular/material/menu';
33+
import {MatIconButton} from '@angular/material/button';
34+
import {MatInput} from '@angular/material/input';
2235

2336
@Component({
2437
selector: '<%= dasherize(name) %>-command-bar',
38+
imports: [
39+
<% if (addConfigMenu) { %>
40+
EsmfConfigMenuComponent,
41+
<% } %>
42+
MatToolbar,
43+
MatFormField,
44+
MatLabel,
45+
ReactiveFormsModule,
46+
MatError,
47+
MatHint,
48+
MatIcon,
49+
MatSelectModule,
50+
MatTooltip,
51+
MatMenuModule,
52+
MatIconButton,
53+
MatInput
54+
],
2555
templateUrl: './<%= dasherize(name) %>-command-bar.component.html',
2656
styleUrls: ['./<%= dasherize(name) %>-command-bar.component.scss'],
27-
standalone: false
57+
encapsulation: ViewEncapsulation.None,
58+
host: {class: 'js-sdk-command-bar' }
2859
})
2960
export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
61+
private dialog = inject(MatDialog);
62+
<% if (options.hasFilters || (options.componentType === 'card' && options.addCommandBar)) { %>
63+
public filterService = inject(<%= classify(name) %>FilterService);
64+
<% } %>
3065
@Input() isMultipleSelectionEnabled = true;
3166
@Input() isToolbarActionsEnabled = true;
3267
@Input() selection = new SelectionModel<any>(this.isMultipleSelectionEnabled, []);
3368
@Input() totalItems = 0;
3469
@Input() searchFocused = false;
35-
@Input() allowedCharacters: string = '';
36-
@Input() minNumberCharacters: number = 2;
37-
@Input() maxNumberCharacters: number = 50;
70+
@Input() allowedCharacters = '';
71+
@Input() minNumberCharacters = 2;
72+
@Input() maxNumberCharacters = 50;
3873
@Input() searchHint?: string;
39-
@Input() <%= options.localStorageKeyConfig %>: string = '';
74+
@Input() <%= options.localStorageKeyConfig %> = '';
4075

41-
<% if (options.componentType === 'table' && options.hasSearchBar) { %>
42-
@Input() configs: Array<Config> = [];
43-
@Input() hasAdvancedSearch: boolean = this.filterService.stringColumns.length > 1;
76+
<% if (addConfigMenu) { %>
77+
@Input() configs: Config[] = [];
78+
@Input() hasAdvancedSearch = this.filterService.stringColumns.length > 1;
4479
<% } %>
4580

4681
@Output() applyFilters = new EventEmitter<void>();
@@ -51,9 +86,9 @@ export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
5186
@Output() customCommandBarActionEvent = new EventEmitter<any>();
5287
<% } %>
5388

54-
<% if (options.componentType === 'table' && options.hasSearchBar) { %>
55-
@Output() setConfiguration = new EventEmitter<Array<Config>>();
56-
@ViewChild(<%= classify(name) %>ConfigMenuComponent) private configurationComponent!: <%= classify(name) %>ConfigMenuComponent;
89+
<% if (addConfigMenu) { %>
90+
@Output() setConfiguration = new EventEmitter<Config[]>();
91+
@ViewChild(EsmfConfigMenuComponent) private configurationComponent!: EsmfConfigMenuComponent;
5792
<% } %>
5893

5994
<% if (options.componentType === 'card') { %>
@@ -72,11 +107,11 @@ export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
72107
hiddenComponents: any[] = [];
73108
initialCompWidths : any[]= [];
74109

75-
constructor(<% if (options.hasFilters || (options.componentType === 'card' && options.addCommandBar)) { %>public filterService: <%= classify(name) %>FilterService,<% } %> public dialog: MatDialog) {
76-
<% if (options.componentType === 'card') { %>
77-
this.filterService.sortedProperty = this.<%= camelize(name) %>CardValues[0];
78-
<% } %>
79-
}
110+
<% if (options.componentType === 'card') { %>
111+
constructor() {
112+
this.filterService.sortedProperty = this.<%= camelize(name) %>CardValues[0];
113+
}
114+
<% } %>
80115

81116
<% for(let property of propValues) { %>
82117
<% if ((options.isEnumQuickFilter && property.isEnum) || (options.isDateQuickFilter && property.isDate) ) { %>
@@ -111,7 +146,7 @@ export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
111146
}
112147
<% } %>
113148

114-
<% if (options.componentType === 'table' && options.hasSearchBar) { %>
149+
<% if (addConfigMenu) { %>
115150
triggerInitOpenedConfigurationDialog(): void {
116151
this.configurationComponent.keyLocalStorage = this.<%= options.localStorageKeyConfig %>;
117152
this.configurationComponent.configs.splice(0, this.configurationComponent.configs.length);
@@ -175,9 +210,9 @@ export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
175210
return this.hiddenComponents.includes(id);
176211
}
177212

178-
<% if (options.componentType === 'table' && options.hasSearchBar) { %>
213+
<% if (addConfigMenu) { %>
179214
openSettingsFromCollapsed() {
180-
const configMenuDialogRef = this.dialog.open(<%= classify(name) %>ConfigMenuComponent,{
215+
const configMenuDialogRef = this.dialog.open(EsmfConfigMenuComponent, {
181216
data: { configs: this.configs, keyLocalStorage: this.<%= options.localStorageKeyConfig %>},
182217
}
183218
);

‎libs/schematic/generators/ng-generate/components/shared/generators/directives/index.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

0 commit comments

Comments
 (0)