toSignal via Gemini

bookie/src/app/sales/products/products.component.html

@@ -7,7 +7,7 @@
   >
     <h3>Back</h3>
   </mat-card>
-  @for (item of list; track item) {
+  @for (item of list(); track item) {
     <mat-card
       class="flex-col square-button"
       matRipple

bookie/src/app/sales/products/products.component.ts

@@ -1,10 +1,11 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatRippleModule } from '@angular/material/core';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 import { ProductQuery } from '../../core/product-query';
+import { ProductService } from '../../product/product.service';
 import { BillService } from '../bill.service';
 
 @Component({
@@ -13,18 +14,14 @@ import { BillService } from '../bill.service';
   styleUrls: ['./products.component.sass'],
   imports: [CurrencyPipe, MatRippleModule, RouterLink, MatCardModule],
 })
-export class ProductsComponent implements OnInit {
-  private route = inject(ActivatedRoute);
+export class ProductsComponent {
+  private productService = inject(ProductService);
   private bs = inject(BillService);
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  list: ProductQuery[] = [];
+  listResource = this.productService.listIsActiveOfCategory(this.id);
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: ProductQuery[] };
-      this.list = data.list;
-    });
-  }
+  list = computed(() => this.listResource.value() ?? []);
 
   addSku(product: ProductQuery): void {
     if (product.isNotAvailable) {

bookie/src/app/sales/products/products.resolver.spec.ts

@@ -1,17 +0,0 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { inject, TestBed } from '@angular/core/testing';
-
-import { ProductsResolver } from './products-resolver.service';
-
-describe('ProductsResolver', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [],
-      providers: [ProductsResolver, provideHttpClient(withInterceptorsFromDi())],
-    });
-  });
-
-  it('should be created', inject([ProductsResolver], (service: ProductsResolver) => {
-    expect(service).toBeTruthy();
-  }));
-});

bookie/src/app/sales/products/products.resolver.ts

@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { ProductQuery } from '../../core/product-query';
-import { ProductService } from '../../product/product.service';
-
-export const productsResolver: ResolveFn<ProductQuery[]> = (route) => {
-  const id = route.paramMap.get('id') as string;
-  return inject(ProductService).listIsActiveOfCategory(id);
-};