Feature/tab colors

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 }}
           </strong>
@@ -102,8 +100,7 @@ import {ThemePickerComponent} from './theme-picker.component';
     TranslocoPipe,
     DfxCutPipe,
     UpperCasePipe,
-    AppIsLightColorPipe,
-    NgClass,
+    AppTextColorByBackgroundDirective,
   ],
   selector: 'app-profile-menu',
 })

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;
   }
 }

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<string | undefined | null>();
+
+  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());
+}

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;

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<NgbPaginator>;
+  sort: Signal<NgbSort>;
+}): {
+  params: Signal<PageableDto>;
   totalElements: WritableSignal<number>;
   loading: WritableSignal<boolean>;
-  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<number>(0);
+
+  const params: Signal<PageableDto> = 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<number>(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,
   };
 }

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<qrCodeData | undefined>(undefined);
 
-  data = computed(() => this._data());
+  data = this._data.asReadonly();
 
   openQRCodePage(props: qrCodeData): void {
     st_set('qr-code-data', props);