From 373bb6d4a762abb589183eeed5d7324f088754da Mon Sep 17 00:00:00 2001 From: Marcelo Shima Date: Thu, 15 Feb 2024 15:42:45 -0300 Subject: [PATCH] migrate admin ui to new sort directives --- .../configuration.component.html.ejs | 113 +++++++------ .../configuration.component.ts.ejs | 38 +++-- .../app/admin/logs/logs.component.html.ejs | 156 +++++++++--------- .../app/admin/logs/logs.component.spec.ts.ejs | 6 +- .../app/admin/logs/logs.component.ts.ejs | 50 +++--- .../app/shared/sort/sort.service.ts.ejs | 21 ++- 6 files changed, 198 insertions(+), 186 deletions(-) diff --git a/generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.html.ejs b/generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.html.ejs index 31793d842c2..34cf6e6952c 100644 --- a/generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.html.ejs +++ b/generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.html.ejs @@ -17,69 +17,72 @@ limitations under the License. -%> @if (allBeans()) { -
-

Translate="configuration.title" data-cy="configurationPageHeading">__jhiTransformTranslate__('configuration.title')

- - Translate="configuration.filter">__jhiTransformTranslate__('configuration.filter') - - -

Spring configuration

+
+

Translate="configuration.title" data-cy="configurationPageHeading">__jhiTransformTranslate__('configuration.title')

- - - Sort predicate="prefix" [(ascending)]="beansAscending" (sortChange)="filterAndSortBeans()"> - - - - - - @for (bean of beans(); track $index) { - - - - - } - -
SortBy="prefix" scope="col" class="w-40"> - Translate="configuration.table.prefix">__jhiTransformTranslate__('configuration.table.prefix') - Translate="configuration.table.properties">__jhiTransformTranslate__('configuration.table.properties')
- {{ bean.prefix }} - - @for (property of bean.properties | keyvalue; track property.key) { -
-
{{ property.key }}
-
- {{ property.value | json }} -
-
- } -
+ Translate="configuration.filter">__jhiTransformTranslate__('configuration.filter') + - @for (propertySource of propertySources(); track i; let i = $index) { -
-

- {{ propertySource.name }} -

+

Spring configuration

- +
- - - + Sort [sortState]="sortState" (sortChange)="sortState.set($event)"> + + - @for (property of propertySource.properties | keyvalue; track property.key) { - - - - - } + @for (bean of beans(); track $index) { + + + + + }
PropertyValue
SortBy="prefix" scope="col" class="w-40"> + Translate="configuration.table.prefix">__jhiTransformTranslate__('configuration.table.prefix') + Translate="configuration.table.properties">__jhiTransformTranslate__('configuration.table.properties')
{{ property.key }} - {{ property.value.value }} -
+ {{ bean.prefix }} + + @for (property of bean.properties | keyvalue; track property.key) { +
+
{{ property.key }}
+
+ {{ property.value | json }} +
+
+ } +
+ + @for (propertySource of propertySources(); track i; let i = $index) { +
+

+ {{ propertySource.name }} +

+ + + + + + + + + + @for (property of propertySource.properties | keyvalue; track property.key) { + + + + + } + +
PropertyValue
{{ property.key }} + {{ property.value.value }} +
+
+ }
- } -
} diff --git a/generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.ts.ejs b/generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.ts.ejs index defe9177a44..db8eb6582b4 100644 --- a/generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/admin/configuration/configuration.component.ts.ejs @@ -16,11 +16,11 @@ See the License for the specific language governing permissions and limitations under the License. -%> -import { Component, inject, OnInit, signal } from '@angular/core'; +import { Component, computed, inject, OnInit, signal } from '@angular/core'; import SharedModule from 'app/shared/shared.module'; import { FormsModule } from '@angular/forms'; -import { SortDirective, SortByDirective } from 'app/shared/sort'; +import { SortSignalDirective, SortBySignalDirective, sortStateSignal, SortService } from 'app/shared/sort'; import { ConfigurationService } from './configuration.service'; import { Bean, PropertySource } from './configuration.model'; @@ -28,31 +28,35 @@ import { Bean, PropertySource } from './configuration.model'; standalone: true, selector: '<%= jhiPrefixDashed %>-configuration', templateUrl: './configuration.component.html', - imports: [SharedModule, FormsModule, SortDirective, SortByDirective], + imports: [SharedModule, FormsModule, SortSignalDirective, SortBySignalDirective], }) export default class ConfigurationComponent implements OnInit { allBeans = signal(undefined); - beans = signal([]); - beansFilter = ''; - beansAscending = true; + beansFilter = signal(''); propertySources = signal([]); - + sortState = sortStateSignal({ predicate: 'prefix', order: 'asc' }); + beans = computed(() => { + let data = this.allBeans() ?? []; + const beansFilter = this.beansFilter(); + if (beansFilter) { + data = data.filter(bean => bean.prefix.toLowerCase().includes(beansFilter.toLowerCase())); + } + + const { order, predicate } = this.sortState(); + if (predicate && order) { + data = data.sort(this.sortService.startSort({ predicate, order })); + } + return data; + }); + + private sortService = inject(SortService); private configurationService = inject(ConfigurationService); ngOnInit(): void { this.configurationService.getBeans().subscribe(beans => { this.allBeans.set(beans); - this.filterAndSortBeans(); }); - this.configurationService.getPropertySources().subscribe(propertySources => (this.propertySources.set(propertySources))); - } - - filterAndSortBeans(): void { - const beansAscendingValue = this.beansAscending ? -1 : 1; - const beansAscendingValueReverse = this.beansAscending ? 1 : -1; - this.beans.set(this.allBeans()! - .filter(bean => !this.beansFilter || bean.prefix.toLowerCase().includes(this.beansFilter.toLowerCase())) - .sort((a, b) => (a.prefix < b.prefix ? beansAscendingValue : beansAscendingValueReverse))); + this.configurationService.getPropertySources().subscribe(propertySources => this.propertySources.set(propertySources)); } } diff --git a/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.html.ejs b/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.html.ejs index aad3c479db6..a6b2bc6edc2 100644 --- a/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.html.ejs +++ b/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.html.ejs @@ -17,95 +17,95 @@ limitations under the License. -%> @defer (when loggers() && !isLoading()) { -
-

Translate="logs.title" data-cy="logsPageHeading">__jhiTransformTranslate__('logs.title')

+
+

Translate="logs.title" data-cy="logsPageHeading">Logs

<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%> -
- -
-<%_ } _%> +
+ +
+ <%_ } _%> -

Translate="logs.nbloggers" [translateValues]="{ total: loggers()?.length }">__jhiTransformTranslate__('logs.nbloggers', { "total": "{{ loggers()?.length }}" })

+

Translate="logs.nbloggers" [translateValues]="{ total: loggers()?.length }">__jhiTransformTranslate__('logs.nbloggers', { "total": "{{ loggers()?.length }}" })

- Translate="logs.filter">__jhiTransformTranslate__('logs.filter') - + Translate="logs.filter">__jhiTransformTranslate__('logs.filter') + - - - Sort [(predicate)]="orderProp" [(ascending)]="ascending" (sortChange)="filterAndSort()"> - - - - +
SortBy="name" scope="col">Translate="logs.table.name">__jhiTransformTranslate__('logs.table.name') SortBy="level" scope="col">Translate="logs.table.level">__jhiTransformTranslate__('logs.table.level')
+ + Sort [sortState]="sortState" (sortChange)="sortState.set($event)"> + + + + - - @for (logger of filteredAndOrderedLoggers(); track $index) { - - - + @for (logger of filteredAndOrderedLoggers(); track $index) { + + + - - } - -
SortBy="name" scope="col">Translate="logs.table.name">__jhiTransformTranslate__('logs.table.name') SortBy="level" scope="col">Translate="logs.table.level">__jhiTransformTranslate__('logs.table.level')
- {{ logger.name | slice: 0:140 }} - - +
+ {{ logger.name | slice: 0 : 140 }} + + - + - + - + - + - -
-
+ + + + } + + +
} @loading {
diff --git a/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.spec.ts.ejs b/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.spec.ts.ejs index 09861014026..1ac2bf447ee 100644 --- a/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.spec.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.spec.ts.ejs @@ -51,9 +51,9 @@ describe('LogsComponent', () => { describe('OnInit', () => { it('should set all default values correctly', () => { - expect(comp.filter).toBe(''); - expect(comp.orderProp).toBe('name'); - expect(comp.ascending).toBe(true); + expect(comp.filter()).toBe(''); + expect(comp.sortState().predicate).toBe('name'); + expect(comp.sortState().order).toBe('asc'); }); it('Should call load all on init', () => { diff --git a/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.ts.ejs b/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.ts.ejs index 985333cfce7..d385f54390c 100644 --- a/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.ts.ejs @@ -16,12 +16,12 @@ See the License for the specific language governing permissions and limitations under the License. -%> -import { Component, inject, OnInit, signal } from '@angular/core'; -import { finalize<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>, map<%_ } _%> } from 'rxjs/operators'; +import { Component, computed, inject, OnInit, signal } from '@angular/core'; +import { finalize } from 'rxjs/operators'; import SharedModule from 'app/shared/shared.module'; import { FormsModule } from '@angular/forms'; -import { SortDirective, SortByDirective } from 'app/shared/sort'; +import { SortSignalDirective, SortBySignalDirective, sortStateSignal, SortService } from 'app/shared/sort'; import { Log, LoggersResponse, Level } from './log.model'; import { LogsService } from './logs.service'; <%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%> @@ -35,21 +35,33 @@ import { GatewayRoutesService } from '../gateway/gateway-routes.service'; <%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%> providers: [GatewayRoutesService], <%_ } _%> - imports: [SharedModule, FormsModule, SortDirective, SortByDirective], + imports: [SharedModule, FormsModule, SortSignalDirective, SortBySignalDirective], }) export default class LogsComponent implements OnInit { loggers = signal(undefined); - filteredAndOrderedLoggers = signal(undefined); isLoading = signal(false); - filter = ''; - orderProp: keyof Log = 'name'; - ascending = true; + filter = signal(''); + sortState = sortStateSignal({ predicate: 'name', order: 'asc' }); + filteredAndOrderedLoggers = computed(() => { + let data = this.loggers() ?? []; + const filter = this.filter(); + if (filter) { + data = data.filter(logger => logger.name.toLowerCase().includes(filter.toLowerCase())); + } + + const { order, predicate } = this.sortState(); + if (order && predicate) { + data = data.sort(this.sortService.startSort({ order, predicate }, { predicate: 'name', order: 'asc' })); + } + return data; + }); <%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%> services: string[] = []; selectedService: string | undefined = undefined; <%_ } _%> private logsService = inject(LogsService); + private sortService = inject(SortService); <%= applicationTypeGateway && serviceDiscoveryAny ? 'private gatewayRoutesService = inject(GatewayRoutesService);' : '' %> ngOnInit(): void { @@ -70,35 +82,19 @@ export default class LogsComponent implements OnInit { } <%_ } _%> - filterAndSort(): void { - this.filteredAndOrderedLoggers.set(this.loggers()!.filter( - logger => !this.filter || logger.name.toLowerCase().includes(this.filter.toLowerCase()) - ).sort((a, b) => { - if (a[this.orderProp] < b[this.orderProp]) { - return this.ascending ? -1 : 1; - } else if (a[this.orderProp] > b[this.orderProp]) { - return this.ascending ? 1 : -1; - } else if (this.orderProp === 'level') { - return a.name < b.name ? -1 : 1; - } - return 0; - })); - } - private findAndExtractLoggers(): void { this.isLoading.set(true); this.logsService .findAll(<%= applicationTypeGateway && serviceDiscoveryAny ? 'this.selectedService' : '' %>) .pipe( finalize(() => { - this.filterAndSort(); this.isLoading.set(false); - }) + }), ) .subscribe({ next: (response: LoggersResponse) => - (this.loggers.set(Object.entries(response.loggers).map(([key, logger]) => new Log(key, logger.effectiveLevel)))), - error: () => (this.loggers.set([])), + this.loggers.set(Object.entries(response.loggers).map(([key, logger]) => new Log(key, logger.effectiveLevel))), + error: () => this.loggers.set([]), }); } diff --git a/generators/angular/templates/src/main/webapp/app/shared/sort/sort.service.ts.ejs b/generators/angular/templates/src/main/webapp/app/shared/sort/sort.service.ts.ejs index c2768c9d351..4f23e7b2eb3 100644 --- a/generators/angular/templates/src/main/webapp/app/shared/sort/sort.service.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/shared/sort/sort.service.ts.ejs @@ -17,7 +17,6 @@ limitations under the License. -%> import { Injectable } from '@angular/core'; -import { ASC, DESC } from 'app/config/navigation.constants'; import { SortState } from './sort-state'; @Injectable({ providedIn: 'root' }) @@ -27,9 +26,15 @@ export class SortService { sensitivity: 'base', }); - public startSort({ predicate, order }: Required): (a: any, b: any) => number { + public startSort({ predicate, order }: Required, fallback?: Required): (a: any, b: any) => number { const multiply = order === 'desc' ? -1 : 1; - return (a: any, b: any) => this.collator.compare(a[predicate], b[predicate]) * multiply; + return (a: any, b: any) => { + const compare = this.collator.compare(a[predicate], b[predicate]); + if (compare === 0 && fallback) { + return this.startSort(fallback)(a, b); + } + return compare * multiply; + }; } public parseSortParam(sortParam: string | undefined): SortState { @@ -40,9 +45,13 @@ export class SortService { } } return { predicate: sortParam?.length ? sortParam : undefined }; - }; + } - public buildSortParam(sortState: SortState): string[] { - return sortState.predicate && sortState.order !== undefined ? [`${sortState.predicate},${sortState.order}`] : []; + public buildSortParam({ predicate, order }: SortState, fallback?: string): string[] { + const sortParam = predicate && order ? [`${predicate},${order}`] : []; + if (fallback && predicate !== fallback) { + sortParam.push(`${fallback},asc`); + } + return sortParam; } }