diff --git a/src/app/home/_layout/_components/profile-menu.component.ts b/src/app/home/_layout/_components/profile-menu.component.ts index e85f5e31..acdb043d 100644 --- a/src/app/home/_layout/_components/profile-menu.component.ts +++ b/src/app/home/_layout/_components/profile-menu.component.ts @@ -1,12 +1,12 @@ -import {NgClass, UpperCasePipe} from '@angular/common'; +import {UpperCasePipe} from '@angular/common'; import {Component, computed, inject} from '@angular/core'; import {RouterLink, RouterLinkActive} from '@angular/router'; -import {AppIsLightColorPipe} from '@home-shared/components/color/app-is-light-color.pipe'; +import {AppTextColorByBackgroundDirective} from '@home-shared/components/color/app-text-color-by-background.directive'; import {FullScreenService} from '@home-shared/services/fullscreen.service'; import {QrCodeService} from '@home-shared/services/qr-code.service'; import {MyUserService} from '@home-shared/services/user/my-user.service'; -import {NgbDropdown, NgbDropdownButtonItem, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle} from '@ng-bootstrap/ng-bootstrap'; import {TranslocoPipe} from '@jsverse/transloco'; +import {NgbDropdown, NgbDropdownButtonItem, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle} from '@ng-bootstrap/ng-bootstrap'; import {AuthService} from '@shared/services/auth/auth.service'; import {loggerOf, s_from} from 'dfts-helper'; import {BiComponent} from 'dfx-bootstrap-icons'; @@ -23,10 +23,8 @@ import {ThemePickerComponent} from './theme-picker.component'; style="width: 32px; height: 32px" class="rounded-circle me-2 d-inline-flex align-items-center justify-content-center" [style.background-color]="user.color" - [ngClass]="{ - 'text-white': !(user.color | isLightColor), - 'text-dark': user.color | isLightColor, - }" + app-text-color-by-background + [color]="user.color" > {{ user.firstname | s_cut: 1 : '' | uppercase }}{{ user.surname | s_cut: 1 : '' | uppercase }} @@ -102,8 +100,7 @@ import {ThemePickerComponent} from './theme-picker.component'; TranslocoPipe, DfxCutPipe, UpperCasePipe, - AppIsLightColorPipe, - NgClass, + AppTextColorByBackgroundDirective, ], selector: 'app-profile-menu', }) diff --git a/src/app/home/_shared/components/color/app-adjust-dark-mode-color.pipe.ts b/src/app/home/_shared/components/color/app-adjust-dark-mode-color.pipe.ts index 01bb74ce..c606244f 100644 --- a/src/app/home/_shared/components/color/app-adjust-dark-mode-color.pipe.ts +++ b/src/app/home/_shared/components/color/app-adjust-dark-mode-color.pipe.ts @@ -9,6 +9,6 @@ import {Theme} from '@shared/services/theme.service'; }) export class AppAdjustDarkModeColor implements PipeTransform { transform(color: string | null | undefined, theme: Theme['id']): string | null | undefined { - return color && theme === 'dark' ? tinycolor(color).desaturate(60).toHexString() : color; + return color && theme === 'dark' ? tinycolor(color).desaturate(40).toHexString() : color; } } diff --git a/src/app/home/_shared/components/color/app-text-color-by-background.directive.ts b/src/app/home/_shared/components/color/app-text-color-by-background.directive.ts new file mode 100644 index 00000000..b1d7cd77 --- /dev/null +++ b/src/app/home/_shared/components/color/app-text-color-by-background.directive.ts @@ -0,0 +1,25 @@ +import {computed, Directive, inject, input} from '@angular/core'; +import {AppAdjustDarkModeColor} from '@home-shared/components/color/app-adjust-dark-mode-color.pipe'; +import {AppIsLightColorPipe} from '@home-shared/components/color/app-is-light-color.pipe'; +import {ThemeService} from '@shared/services/theme.service'; + +@Directive({ + selector: '[app-text-color-by-background]', + standalone: true, + host: { + '[class.text-white]': 'textWhite()', + '[class.text-dark]': 'textBlack()', + '[class.text-body-emphasis]': 'textEmphasis()', + }, +}) +export class AppTextColorByBackgroundDirective { + color = input.required(); + + adjustDarkMode = new AppAdjustDarkModeColor(); + isLightColor = new AppIsLightColorPipe(); + theme = inject(ThemeService).currentTheme; + + textWhite = computed(() => this.color() && !this.isLightColor.transform(this.adjustDarkMode.transform(this.color(), this.theme().id))); + textBlack = computed(() => this.color() && this.isLightColor.transform(this.adjustDarkMode.transform(this.color(), this.theme().id))); + textEmphasis = computed(() => !this.color()); +} diff --git a/src/app/home/_shared/components/color/color-picker.component.ts b/src/app/home/_shared/components/color/color-picker.component.ts index 2c390b36..a812787e 100644 --- a/src/app/home/_shared/components/color/color-picker.component.ts +++ b/src/app/home/_shared/components/color/color-picker.component.ts @@ -1,15 +1,14 @@ -import {NgClass} from '@angular/common'; import {booleanAttribute, ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output, signal} from '@angular/core'; import {AppAdjustDarkModeColor} from '@home-shared/components/color/app-adjust-dark-mode-color.pipe'; +import {AppTextColorByBackgroundDirective} from '@home-shared/components/color/app-text-color-by-background.directive'; import {TranslocoPipe} from '@jsverse/transloco'; import {NgbPopover, NgbTooltip} from '@ng-bootstrap/ng-bootstrap'; +import {ThemeService} from '@shared/services/theme.service'; -import {BiComponent} from 'dfx-bootstrap-icons'; - -import {AppIsLightColorPipe} from './app-is-light-color.pipe'; import {systemColors} from '@shared/system-colors'; -import {ThemeService} from '@shared/services/theme.service'; + +import {BiComponent} from 'dfx-bootstrap-icons'; @Component({ template: ` @@ -25,11 +24,8 @@ import {ThemeService} from '@shared/services/theme.service'; [disabled]="disabled" [style.background-color]="color | adjustDarkModeColor: theme.id" [style.border-color]="color | adjustDarkModeColor: theme.id" - [ngClass]="{ - 'text-white': !(color | adjustDarkModeColor: theme.id | isLightColor) && color, - 'text-dark': (color | adjustDarkModeColor: theme.id | isLightColor) && color, - 'text-body-emphasis': !color, - }" + app-text-color-by-background + [color]="color" [autoClose]="'outside'" [ngbPopover]="popContent" (mousedown)="showColorPicker.set(!showColorPicker())" @@ -77,7 +73,7 @@ import {ThemeService} from '@shared/services/theme.service'; standalone: true, selector: 'app-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, - imports: [TranslocoPipe, BiComponent, NgbPopover, NgClass, AppIsLightColorPipe, NgbTooltip, AppAdjustDarkModeColor], + imports: [TranslocoPipe, BiComponent, NgbPopover, NgbTooltip, AppAdjustDarkModeColor, AppTextColorByBackgroundDirective], }) export class AppColorPicker { @Input() color?: string | null; diff --git a/src/app/home/_shared/services/pagination.ts b/src/app/home/_shared/services/pagination.ts index aaa3122a..24e41586 100644 --- a/src/app/home/_shared/services/pagination.ts +++ b/src/app/home/_shared/services/pagination.ts @@ -1,92 +1,118 @@ import {HttpParams} from '@angular/common/http'; -import {inject, signal, Signal, WritableSignal} from '@angular/core'; +import {DestroyRef, effect, inject, signal, Signal, WritableSignal} from '@angular/core'; import {toSignal} from '@angular/core/rxjs-interop'; import {ActivatedRoute, Router} from '@angular/router'; -import {map} from 'rxjs'; +import {map, merge, Subscription} from 'rxjs'; -import {n_from} from 'dfts-helper'; -import {SortDirection} from 'dfx-bootstrap-table'; +import {loggerOf, n_from} from 'dfts-helper'; +import {NgbPaginator, NgbSort, SortDirection} from 'dfx-bootstrap-table'; export interface PageableDto { - /** - * @format int32 - * @min 0 - */ - page?: number; - /** - * @format int32 - * @min 1 - */ - size?: number; - sort?: string; + page: number; + size: number; + sort: { + direction: SortDirection; + name: string; + }; query?: string; } export function getPaginationParams(options: PageableDto): HttpParams { let params = new HttpParams(); - params = params.append('page', options.page ?? 0); - params = params.append('size', options.size ?? 10); - if (options.sort) { - params = params.append('sort', options.sort); - } + params = params.append('page', options.page); + params = params.append('size', options.size); + params = params.append( + 'sort', + `${options.sort.name},${options.sort.direction.length > 0 ? options.sort.direction : DEFAULT_SORT_DIRECTION}`, + ); if (options.query && options.query.length > 0) { params = params.append('query', options.query); } return params; } -export function getSortParam(active?: string, direction: 'asc' | 'desc' | '' = ''): string | undefined { - return active && direction !== '' ? `${active},${direction}` : undefined; -} +const DEFAULT_SORT_DIRECTION = 'desc'; +const DEFAULT_PAGE_SIZE = 20; + +const lumber = loggerOf('pagination'); -export function injectPagination( - defaultSortBy: string, - defaultSortDirection: SortDirection = 'desc', -): { - params: Signal<{page: number; size: number; sort: string; direction: SortDirection}>; +export function injectPagination({ + defaultSortBy, + defaultSortDirection, + defaultPageSize, + paginator, + sort, +}: { + defaultSortBy: string; + defaultSortDirection?: SortDirection; + defaultPageSize?: number; + paginator: Signal; + sort: Signal; +}): { + params: Signal; totalElements: WritableSignal; loading: WritableSignal; - activatedRoute: ActivatedRoute; - updateParams: (queryParams: {size: number; page: number; sort: string; direction: SortDirection}) => void; } { const activatedRoute = inject(ActivatedRoute); const router = inject(Router); - const params = toSignal( + let subscription: Subscription | undefined; + inject(DestroyRef).onDestroy(() => { + subscription?.unsubscribe(); + }); + + effect(() => { + const _paginator = paginator(); + const _sort = sort(); + + subscription?.unsubscribe(); + + subscription = merge(_paginator.page, _sort.sortChange).subscribe(() => { + const queryParams = { + size: _paginator.pageSize, + page: _paginator.pageIndex, + sort: _sort.active, + direction: _sort.direction, + }; + lumber.log('updatePaginationParams', 'new params', queryParams); + void router.navigate([], { + relativeTo: activatedRoute, + queryParamsHandling: 'merge', + queryParams, + }); + }); + }); + + const loading = signal(true); + const totalElements = signal(0); + + const params: Signal = toSignal( activatedRoute.queryParamMap.pipe( map((it) => ({ page: it.get('page') ? n_from(it.get('page')) : 0, - size: it.get('size') ? n_from(it.get('size')) : 20, - sort: it.get('sort') ?? defaultSortBy, - direction: (it.get('direction') as SortDirection | undefined) ?? defaultSortDirection, + size: it.get('size') ? n_from(it.get('size')) : defaultPageSize ?? DEFAULT_PAGE_SIZE, + sort: { + name: it.get('sort') ?? defaultSortBy, + direction: (it.get('direction') as SortDirection | undefined) ?? defaultSortDirection ?? DEFAULT_SORT_DIRECTION, + }, })), ), { initialValue: { page: 0, - size: 20, - sort: defaultSortBy, - direction: defaultSortDirection, + size: defaultPageSize ?? DEFAULT_PAGE_SIZE, + sort: { + name: defaultSortBy, + direction: defaultSortDirection ?? DEFAULT_SORT_DIRECTION, + }, }, }, ); - const loading = signal(true); - const totalElements = signal(0); - - const updateParams = (queryParams: {size: number; page: number; sort: string; direction: string}): void => - void router.navigate([], { - relativeTo: activatedRoute, - queryParamsHandling: 'merge', - queryParams, - }); - return { params, loading, totalElements, - activatedRoute, - updateParams, }; } diff --git a/src/app/home/_shared/services/qr-code.service.ts b/src/app/home/_shared/services/qr-code.service.ts index 03d81734..0f1e0761 100644 --- a/src/app/home/_shared/services/qr-code.service.ts +++ b/src/app/home/_shared/services/qr-code.service.ts @@ -1,9 +1,9 @@ -import {computed, inject, Injectable, signal} from '@angular/core'; +import {inject, Injectable, signal} from '@angular/core'; import {Router} from '@angular/router'; import {st_set} from 'dfts-helper'; -export interface qrCodeData { +interface qrCodeData { data: string; text: string; info: string; @@ -17,7 +17,7 @@ export class QrCodeService { private _data = signal(undefined); - data = computed(() => this._data()); + data = this._data.asReadonly(); openQRCodePage(props: qrCodeData): void { st_set('qr-code-data', props); diff --git a/src/app/home/bills/bills.component.ts b/src/app/home/bills/bills.component.ts index c11fd9b4..a13b7e1c 100644 --- a/src/app/home/bills/bills.component.ts +++ b/src/app/home/bills/bills.component.ts @@ -1,5 +1,5 @@ import {AsyncPipe, DatePipe} from '@angular/common'; -import {AfterViewInit, ChangeDetectionStrategy, Component, computed, inject, ViewChild} from '@angular/core'; +import {ChangeDetectionStrategy, Component, computed, inject, viewChild} from '@angular/core'; import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop'; import {ReactiveFormsModule} from '@angular/forms'; import {RouterLink} from '@angular/router'; @@ -7,7 +7,7 @@ import {RouterLink} from '@angular/router'; import {ScrollableToolbarComponent} from '@home-shared/components/scrollable-toolbar.component'; import {Download} from '@home-shared/services/download.service'; import {injectFilter} from '@home-shared/services/filter'; -import {getSortParam, injectPagination} from '@home-shared/services/pagination'; +import {injectPagination} from '@home-shared/services/pagination'; import {TranslocoPipe} from '@jsverse/transloco'; import {NgbCollapse, NgbTooltip} from '@ng-bootstrap/ng-bootstrap'; import {NgSelectModule} from '@ng-select/ng-select'; @@ -21,7 +21,7 @@ import {DfxPaginationModule, DfxSortModule, DfxTableModule, NgbPaginator, NgbSor import {DfxCurrencyCentPipe, injectIsMobile, StopPropagationDirective} from 'dfx-helper'; import {derivedFrom} from 'ngxtension/derived-from'; -import {debounceTime, map, merge, Observable, pipe, switchMap, tap} from 'rxjs'; +import {debounceTime, map, Observable, pipe, switchMap, tap} from 'rxjs'; import {ProductGroupsService} from '../products/_services/product-groups.service'; import {ProductsService} from '../products/_services/products.service'; @@ -176,8 +176,8 @@ import {UnpaidReasonsService} from './_services/unpaid-reasons.service'; ngb-sort [hover]="true" [dataSource]="dataSource()" - [ngbSortActive]="pagination.params().sort" - [ngbSortDirection]="pagination.params().direction" + [ngbSortActive]="pagination.params().sort.name" + [ngbSortDirection]="pagination.params().sort.direction" > {{ 'HOME_ORDER_CREATED_AT' | transloco }} @@ -258,7 +258,10 @@ import {UnpaidReasonsService} from './_services/unpaid-reasons.service'; RouterLink, DatePipe, AsyncPipe, + ReactiveFormsModule, NgbTooltip, + NgSelectModule, + NgbCollapse, DfxTableModule, DfxSortModule, DfxPaginationModule, @@ -268,26 +271,26 @@ import {UnpaidReasonsService} from './_services/unpaid-reasons.service'; AppBillPaymentStateBadgeComponent, AppBillRefreshButtonComponent, AppProgressBarComponent, - NgSelectModule, - ReactiveFormsModule, - NgbCollapse, ScrollableToolbarComponent, StopPropagationDirective, ], }) -export class BillsComponent implements AfterViewInit { - lumber = loggerOf('AllBills'); +export class BillsComponent { + #lumber = loggerOf('AllBills'); - private billsService = inject(BillsService); + #billsService = inject(BillsService); isMobile = injectIsMobile(); - pagination = injectPagination('createdAt', 'desc'); + private paginator = viewChild.required(NgbPaginator); + private sort = viewChild.required(NgbSort); - download$?: Observable; + pagination = injectPagination({ + defaultSortBy: 'createdAt', + paginator: this.paginator, + sort: this.sort, + }); - @ViewChild(NgbSort, {static: true}) sort!: NgbSort; - @ViewChild(NgbPaginator, {static: true}) paginator!: NgbPaginator; columnsToDisplay = ['createdAt', 'price', 'unpaidReason.name', 'waiter.name', 'table.tableGroup.name', 'actions']; filter = injectFilter( @@ -309,12 +312,8 @@ export class BillsComponent implements AfterViewInit { this.pagination.loading.set(true); }), switchMap(([options, filter]) => - this.billsService.getAllPaginated( - { - page: options.page, - size: options.size, - sort: getSortParam(options.sort, options.direction), - }, + this.#billsService.getAllPaginated( + options, filter?.tableIds, filter?.tableGroupIds, filter?.productIds, @@ -323,17 +322,17 @@ export class BillsComponent implements AfterViewInit { filter?.unpaidReasonId, ), ), - tap(() => { + map((it) => { this.pagination.loading.set(false); - }), - tap((it) => { this.pagination.totalElements.set(it.numberOfItems); + return it.data; }), - map((it) => it.data), ), {initialValue: []}, ); + download$?: Observable; + tables = toSignal(inject(TablesService).getAllWithoutExtra$(), {initialValue: []}); tableGroups = toSignal(inject(TableGroupsService).getAll$(), {initialValue: []}); products = toSignal(inject(ProductsService).getAll$(), {initialValue: []}); @@ -343,24 +342,11 @@ export class BillsComponent implements AfterViewInit { unpaidReasonsFilter = computed(() => [{id: -1, reason: 'Bezahlt'}, ...this.unpaidReasons()]); constructor() { - this.billsService.triggerRefresh.pipe(takeUntilDestroyed()).subscribe(() => { + this.#billsService.triggerRefresh.pipe(takeUntilDestroyed()).subscribe(() => { this.pagination.loading.set(true); }); } - ngAfterViewInit(): void { - merge(this.paginator.page, this.sort.sortChange).subscribe(() => { - const params = { - size: this.paginator.pageSize, - page: this.paginator.pageIndex, - sort: this.sort.active, - direction: this.sort.direction, - }; - this.lumber.log('updatePaginationParams', 'new params', params); - this.pagination.updateParams(params); - }); - } - customTableSearch(term: string, item: GetTableWithGroupResponse): boolean { term = term.toLowerCase().trim(); return ( @@ -371,6 +357,6 @@ export class BillsComponent implements AfterViewInit { } exportCsv(): void { - this.download$ = this.billsService.download$(); + this.download$ = this.#billsService.download$(); } } diff --git a/src/app/home/orders/orders/orders.component.html b/src/app/home/orders/orders/orders.component.html index 73e5c1cb..bca28db3 100644 --- a/src/app/home/orders/orders/orders.component.html +++ b/src/app/home/orders/orders/orders.component.html @@ -140,8 +140,8 @@

{{ 'NAV_ORDERS' | transloco }}

ngb-sort [hover]="true" [dataSource]="dataSource()" - [ngbSortDirection]="pagination.params().direction" - [ngbSortActive]="pagination.params().sort" + [ngbSortActive]="pagination.params().sort.name" + [ngbSortDirection]="pagination.params().sort.direction" > diff --git a/src/app/home/orders/orders/orders.component.ts b/src/app/home/orders/orders/orders.component.ts index 53a5496b..1dcc71c5 100644 --- a/src/app/home/orders/orders/orders.component.ts +++ b/src/app/home/orders/orders/orders.component.ts @@ -1,6 +1,6 @@ import {SelectionModel} from '@angular/cdk/collections'; import {AsyncPipe, DatePipe} from '@angular/common'; -import {AfterViewInit, ChangeDetectionStrategy, Component, inject, ViewChild} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject, viewChild} from '@angular/core'; import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop'; import {ReactiveFormsModule} from '@angular/forms'; import {RouterLink} from '@angular/router'; @@ -11,7 +11,7 @@ import {injectConfirmDialog} from '@home-shared/components/question-dialog.compo import {ScrollableToolbarComponent} from '@home-shared/components/scrollable-toolbar.component'; import {Download} from '@home-shared/services/download.service'; import {injectFilter} from '@home-shared/services/filter'; -import {getSortParam, injectPagination} from '@home-shared/services/pagination'; +import {injectPagination} from '@home-shared/services/pagination'; import {NgbCollapse, NgbDropdownItem, NgbTooltip} from '@ng-bootstrap/ng-bootstrap'; import {NgSelectModule} from '@ng-select/ng-select'; import {TranslocoPipe} from '@jsverse/transloco'; @@ -25,7 +25,7 @@ import {DfxPaginationModule, DfxSortModule, DfxTableModule, NgbPaginator, NgbSor import {injectIsMobile, StopPropagationDirective} from 'dfx-helper'; import {derivedFrom} from 'ngxtension/derived-from'; -import {debounceTime, forkJoin, map, merge, Observable, pipe, switchMap, tap} from 'rxjs'; +import {debounceTime, forkJoin, map, Observable, pipe, switchMap, tap} from 'rxjs'; import {ProductGroupsService} from '../../products/_services/product-groups.service'; import {ProductsService} from '../../products/_services/products.service'; @@ -48,12 +48,12 @@ import {OrdersService} from '../orders.service'; ReactiveFormsModule, NgbTooltip, NgbCollapse, + NgSelectModule, DfxTableModule, DfxSortModule, DfxPaginationModule, TranslocoPipe, BiComponent, - NgSelectModule, AppOrderStateBadgeComponent, AppOrderRefreshButtonComponent, ScrollableToolbarComponent, @@ -64,24 +64,26 @@ import {OrdersService} from '../orders.service'; StopPropagationDirective, ], }) -export class OrdersComponent implements AfterViewInit { - private confirmDialog = injectConfirmDialog(); - private ordersService = inject(OrdersService); - - pagination = injectPagination('createdAt', 'desc'); +export class OrdersComponent { + #confirmDialog = injectConfirmDialog(); + #ordersService = inject(OrdersService); isMobile = injectIsMobile(); lumber = loggerOf('AllOrders'); - @ViewChild(NgbSort) sort!: NgbSort; - @ViewChild(NgbPaginator) paginator!: NgbPaginator; + private paginator = viewChild.required(NgbPaginator); + private sort = viewChild.required(NgbSort); + + pagination = injectPagination({ + defaultSortBy: 'createdAt', + paginator: this.paginator, + sort: this.sort, + }); columnsToDisplay = ['select', 'orderNumber', 'state', 'table.tableGroup.name', 'waiter.name', 'createdAt', 'actions']; selection = new SelectionModel(true, [], false, (a, b) => a.id === b.id); - download$?: Observable; - filter = injectFilter( injectCustomFormBuilder().group({ tableIds: [new Array()], @@ -100,12 +102,8 @@ export class OrdersComponent implements AfterViewInit { this.pagination.loading.set(true); }), switchMap(([options, filter]) => - this.ordersService.getAllPaginated( - { - page: options.page, - size: options.size, - sort: getSortParam(options.sort, options.direction), - }, + this.#ordersService.getAllPaginated( + options, filter?.tableIds, filter?.tableGroupIds, filter?.productIds, @@ -122,6 +120,8 @@ export class OrdersComponent implements AfterViewInit { {initialValue: []}, ); + download$?: Observable; + tables = toSignal(inject(TablesService).getAllWithoutExtra$(), {initialValue: []}); tableGroups = toSignal(inject(TableGroupsService).getAll$(), {initialValue: []}); products = toSignal(inject(ProductsService).getAll$(), {initialValue: []}); @@ -129,24 +129,11 @@ export class OrdersComponent implements AfterViewInit { waiters = toSignal(inject(OrganisationWaitersService).getAll$(), {initialValue: []}); constructor() { - this.ordersService.triggerRefresh.pipe(takeUntilDestroyed()).subscribe(() => { + this.#ordersService.triggerRefresh.pipe(takeUntilDestroyed()).subscribe(() => { this.pagination.loading.set(true); }); } - ngAfterViewInit(): void { - merge(this.paginator.page, this.sort.sortChange).subscribe(() => { - const params = { - size: this.paginator.pageSize, - page: this.paginator.pageIndex, - sort: this.sort.active, - direction: this.sort.direction, - }; - this.lumber.log('updatePaginationParams', 'new params', params); - this.pagination.updateParams(params); - }); - } - customTableSearch(term: string, item: GetTableWithGroupResponse): boolean { term = term.toLowerCase().trim().replace(/\s/g, ''); const groupName = item.group.name.toLowerCase().trim().replace(/\s/g, ''); @@ -155,13 +142,13 @@ export class OrdersComponent implements AfterViewInit { } exportCsv(): void { - this.download$ = this.ordersService.download$(); + this.download$ = this.#ordersService.download$(); } printAllTest(): void { - void this.confirmDialog('Testbestellung aufgeben?').then((result) => { + void this.#confirmDialog('Testbestellung aufgeben?').then((result) => { if (result) { - this.ordersService.printAllTest(); + this.#ordersService.printAllTest(); } }); } @@ -176,7 +163,7 @@ export class OrdersComponent implements AfterViewInit { this.lumber.info('requeueOrders', 'Opening requeue question dialog'); this.lumber.info('requeueOrders', 'Selected entities:', this.selection.selected); const selected = this.selection.selected.slice(); - void this.confirmDialog( + void this.#confirmDialog( 'HOME_ORDER_REQUEUE', `
  1. ${s_imploder() .mappedSource(selected, (it) => it.orderNumber) @@ -186,7 +173,7 @@ export class OrdersComponent implements AfterViewInit { if (result) { const observables: Observable[] = []; for (const it of selected) { - observables.push(this.ordersService.requeueOrder$(it.id)); + observables.push(this.#ordersService.requeueOrder$(it.id)); } forkJoin(observables).subscribe(); } diff --git a/src/app/home/products/products.layout.ts b/src/app/home/products/products.layout.ts index 09589ec8..1893c830 100644 --- a/src/app/home/products/products.layout.ts +++ b/src/app/home/products/products.layout.ts @@ -1,9 +1,11 @@ import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {toSignal} from '@angular/core/rxjs-interop'; -import {RouterLink, RouterOutlet} from '@angular/router'; -import {AppTextWithColorIndicatorComponent} from '@home-shared/components/color/app-text-with-color-indicator.component'; -import {NgbNav, NgbNavItem, NgbNavLink} from '@ng-bootstrap/ng-bootstrap'; +import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; +import {AppAdjustDarkModeColor} from '@home-shared/components/color/app-adjust-dark-mode-color.pipe'; +import {AppTextColorByBackgroundDirective} from '@home-shared/components/color/app-text-color-by-background.directive'; import {TranslocoPipe} from '@jsverse/transloco'; +import {NgbNav, NgbNavItem, NgbNavLink} from '@ng-bootstrap/ng-bootstrap'; +import {ThemeService} from '@shared/services/theme.service'; import {injectParams} from 'ngxtension/inject-params'; import {ProductGroupsService} from './_services/product-groups.service'; @@ -14,14 +16,19 @@ import {ProductGroupsService} from './_services/product-groups.service';
    • - {{ 'ALL' | transloco }} + {{ 'ALL' | transloco }}
      • @for (productGroup of productGroups(); track productGroup.id) {
    • - - + + {{ productGroup.name }} - +
      • } @@ -30,15 +37,25 @@ import {ProductGroupsService} from './_services/product-groups.service'; `, - styles: '', selector: 'app-products-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [RouterLink, TranslocoPipe, NgbNav, NgbNavItem, NgbNavLink, RouterOutlet, AppTextWithColorIndicatorComponent], + imports: [ + RouterLink, + TranslocoPipe, + NgbNav, + NgbNavItem, + NgbNavLink, + RouterOutlet, + AppAdjustDarkModeColor, + AppTextColorByBackgroundDirective, + RouterLinkActive, + ], }) export class ProductsLayout { activeId = injectParams('id'); productGroups = toSignal(inject(ProductGroupsService).getAll$(), { initialValue: [], }); + currentTheme = inject(ThemeService).currentTheme; } diff --git a/src/app/home/start/start.component.ts b/src/app/home/start/start.component.ts index 88ac7f6a..5d7ea36b 100644 --- a/src/app/home/start/start.component.ts +++ b/src/app/home/start/start.component.ts @@ -64,7 +64,10 @@ export class StartComponent { this.#ordersService.getAllPaginated({ page: 0, size: 8, - sort: 'createdAt,desc', + sort: { + name: 'createdAt', + direction: 'desc', + }, }), ), map((it) => it.data), diff --git a/src/app/home/tables/tables.layout.ts b/src/app/home/tables/tables.layout.ts index 9dbe0cca..4da2f2eb 100644 --- a/src/app/home/tables/tables.layout.ts +++ b/src/app/home/tables/tables.layout.ts @@ -1,9 +1,11 @@ import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {toSignal} from '@angular/core/rxjs-interop'; -import {RouterLink, RouterOutlet} from '@angular/router'; -import {AppTextWithColorIndicatorComponent} from '@home-shared/components/color/app-text-with-color-indicator.component'; -import {NgbNav, NgbNavItem, NgbNavLink} from '@ng-bootstrap/ng-bootstrap'; +import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; +import {AppAdjustDarkModeColor} from '@home-shared/components/color/app-adjust-dark-mode-color.pipe'; +import {AppTextColorByBackgroundDirective} from '@home-shared/components/color/app-text-color-by-background.directive'; import {TranslocoPipe} from '@jsverse/transloco'; +import {NgbNav, NgbNavItem, NgbNavLink} from '@ng-bootstrap/ng-bootstrap'; +import {ThemeService} from '@shared/services/theme.service'; import {injectParams} from 'ngxtension/inject-params'; import {TableGroupsService} from './_services/table-groups.service'; @@ -14,18 +16,21 @@ import {TableGroupsService} from './_services/table-groups.service';
      • - {{ 'ALL' | transloco }} + {{ 'ALL' | transloco }}
        • @for (tableGroup of tableGroups(); track tableGroup.id) {
      • - - + + {{ tableGroup.name }} - -
        {{ tableGroup.tables.length }} -
        +
        • } @@ -37,11 +42,22 @@ import {TableGroupsService} from './_services/table-groups.service'; selector: 'app-tables-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [RouterLink, TranslocoPipe, NgbNav, NgbNavItem, NgbNavLink, RouterOutlet, AppTextWithColorIndicatorComponent], + imports: [ + RouterLink, + TranslocoPipe, + NgbNav, + NgbNavItem, + NgbNavLink, + RouterOutlet, + AppTextColorByBackgroundDirective, + RouterLinkActive, + AppAdjustDarkModeColor, + ], }) export class TablesLayout { activeId = injectParams('id'); tableGroups = toSignal(inject(TableGroupsService).getAll$(), { initialValue: [], }); + currentTheme = inject(ThemeService).currentTheme; } diff --git a/src/styles.scss b/src/styles.scss index de3f2b55..79469463 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -61,6 +61,14 @@ td:has(> div.form-check) { white-space: nowrap; } +.tab-active { + box-shadow: + 0 0 inset, + 0 -4px dodgerblue inset, + 0 0 inset, + 0 0 inset; +} + /* Blur */ .unblur, .card:hover .blur,