Consolidated commit message to v22 signals

2026-08-25 14:45:09 +00:00
parent 6403d25d3e
commit df289b20b8
443 changed files with 16058 additions and 17332 deletions
@@ -1,30 +1,34 @@
-import { Component, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, input, computed, effect, signal } from '@angular/core';
+import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatSelectModule } from '@angular/material/select';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
+import { Router, RouterModule } from '@angular/router';

 import { ProductGroup } from '../../core/product-group';
 import { Period } from '../../period/period';
-import { Recipe } from '../recipe';
-import { RecipeListDatasource } from './recipe-list-datasource';
+import { PeriodService } from '../../period/period.service';
+import { ProductGroupService } from '../../product-group/product-group.service';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { RecipeService } from '../recipe.service';

@Component({
-  selector: 'app-role-list',
+  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css'],
+
  imports: [
    MatIconModule,
    RouterModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
    MatDatepickerModule,
    MatFormFieldModule,
    MatSelectModule,
@@ -33,46 +37,88 @@ import { RecipeListDatasource } from './recipe-list-datasource';
    MatSortModule,
    MatPaginatorModule,
    MatButtonModule,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
  ],
 })
-export class RecipeListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class RecipeListComponent {
+  p = input<string>();
+  private ser = inject(RecipeService);
  private router = inject(Router);
+  private periodSer = inject(PeriodService);
+  private productGroupSer = inject(ProductGroupService);

-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
-  form: FormGroup<{
-    period: FormControl<Period>;
-    productGroup: FormControl<ProductGroup | string | null>;
-  }>;
+  pageSize = signal(50);
+  pageIndex = signal(0);
+  sortActive = signal('');
+  sortDirection = signal('');

-  productGroups: ProductGroup[] = [];
-  periods: Period[] = [];
-  periodFilter: BehaviorSubject<Period> = new BehaviorSubject<Period>(new Period());
-  productGroupFilter = new BehaviorSubject<string>('');
-  list: Recipe[] = [];
-  data: BehaviorSubject<Recipe[]> = new BehaviorSubject<Recipe[]>([]);
-  dataSource: RecipeListDatasource = new RecipeListDatasource(
-    this.productGroupFilter,
-    this.data,
-    this.paginator,
-    this.sort,
-  );
+  model = signal({
+    period: null as Period | null,
+    productGroup: null as ProductGroup | string | null,
+  });

-  period: Period = new Period();
+  form = createForm(this.model);

-  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['name', 'yield', 'date', 'source'];
+  periodsResource = this.periodSer.list();
+  periods = computed(() => this.periodsResource.value() ?? []);
+
+  productGroupsResource = this.productGroupSer.list();
+  productGroups = computed(() => this.productGroupsResource.value() ?? []);
+
+  periodFilter = computed(() => this.p() || '');
+  resource = this.ser.list(this.periodFilter);
+
+  info = computed(() => this.resource.value() ?? []);
+  sortedList = computed(() => {
+    let data = this.info() ?? [];
+
+    const pg = this.model().productGroup;
+    if (pg) {
+      const pgId = typeof pg === 'string' ? pg : pg.id;
+      data = data.filter((r) => r.productGroupId === pgId);
+    }
+
+    const active = this.sortActive();
+    const direction = this.sortDirection();
+
+    if (!active || direction === '') {
+      return data;
+    }
+
+    return [...data].sort((a, b) => {
+      const isAsc = direction === 'asc';
+      switch (active) {
+        case 'name':
+          return compare(a.sku.name, b.sku.name, isAsc);
+        case 'date':
+          return compare(a.date, b.date, isAsc);
+        case 'source':
+          return compare(a.source, b.source, isAsc);
+        default:
+          return 0;
+      }
+    });
+  });
+
+  dataSource = computed(() => {
+    const data = this.sortedList();
+    const pageIndex = this.pageIndex();
+    const pageSize = this.pageSize();
+    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  });
+
+  period = new Period();
+
+  displayedColumns = ['name', 'yield', 'steps', 'photos', 'time', 'date', 'source'];

  constructor() {
-    this.form = new FormGroup({
-      period: new FormControl(new Period(), { nonNullable: true }),
-      productGroup: new FormControl<ProductGroup | string | null>(null),
-    });
    // Listen to Period Change
-    this.form.controls.period.valueChanges.subscribe((x) => {
+    effect(() => {
+      const x = this.model().period;
+      if (!x) return;
      this.router.navigate([], {
-        relativeTo: this.route,
        queryParams: { p: x.id },
        replaceUrl: true,
        queryParamsHandling: 'merge',
@@ -81,24 +127,19 @@ export class RecipeListComponent implements OnInit {
    });
  }

-  ngOnInit() {
-    this.dataSource = new RecipeListDatasource(this.productGroupFilter, this.data, this.paginator, this.sort);
-    // this.dataSource = new RecipeListDatasource(this.validFromFilter, this.validTillFilter, this.productGroupFilter, this.data);
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Recipe[]; productGroups: ProductGroup[]; periods: Period[] };
-      this.productGroups = data.productGroups;
-      this.periods = data.periods;
-      const period = this.periods.find((x) => x.id === this.route.snapshot.queryParamMap.get('p')) || this.periods[0];
-
-      this.form.setValue({
-        period: period,
-        productGroup: '',
-      });
-      this.data.next(data.list);
-    });
+  filterProductGroup(val: string) {
+    this.model.update((m) => ({ ...m, productGroup: val }));
  }

-  filterProductGroup(val: string) {
-    this.productGroupFilter.next(val || '');
+  handlePageEvent(e: PageEvent) {
+    this.pageSize.set(e.pageSize);
+    this.pageIndex.set(e.pageIndex);
+  }
+
+  sortData(sort: Sort) {
+    this.sortActive.set(sort.active);
+    this.sortDirection.set(sort.direction);
  }
 }
+const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
+  (a < b ? -1 : 1) * (isAsc ? 1 : -1);