+
Product
- @for (p of itemProducts | async; track p) {
+ @for (p of itemProducts(); track p) {
{{ p.name }}
}
@@ -74,21 +74,21 @@
Quantity
-
+
Sale Price
-
+
- Print in Bill?
+ Print in Bill?
-
+
-
+
Item
@@ -127,10 +127,10 @@
Action
-
@@ -142,8 +142,8 @@
-
+
@if (!!item.id) {
-
+
}
diff --git a/bookie/src/app/bundles/bundle-detail/bundle-detail.component.ts b/bookie/src/app/bundles/bundle-detail/bundle-detail.component.ts
index 6b5a60d..05834c2 100644
--- a/bookie/src/app/bundles/bundle-detail/bundle-detail.component.ts
+++ b/bookie/src/app/bundles/bundle-detail/bundle-detail.component.ts
@@ -1,6 +1,18 @@
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CurrencyPipe } from '@angular/common';
+import {
+ AfterViewInit,
+ Component,
+ ElementRef,
+ ViewChild,
+ inject,
+ computed,
+ signal,
+ effect,
+ debounced,
+ linkedSignal,
+ input,
+} from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -13,24 +25,39 @@ import { MatSelectModule } from '@angular/material/select';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
-import { of as observableOf, BehaviorSubject, debounceTime, distinctUntilChanged, Observable, switchMap } from 'rxjs';
import { MenuCategory } from '../../core/menu-category';
import { ProductQuery } from '../../core/product-query';
import { SaleCategory } from '../../core/sale-category';
+import { MenuCategoryService } from '../../menu-category/menu-category.service';
import { ProductService } from '../../product/product.service';
+import { SaleCategoryService } from '../../sale-category/sale-category.service';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { Bundle, BundleItem } from '../bundle';
import { BundleService } from '../bundle.service';
-import { BundleDetailDatasource } from './bundle-detail-datasource';
import { BundleDetailDialogComponent } from './bundle-detail-dialog.component';
+export interface BundleDetailFormData {
+ name: string;
+ units: string;
+ salePrice: number;
+ menuCategory: string;
+ saleCategory: string;
+ hasHappyHour: boolean;
+ isNotAvailable: boolean;
+ addRow: {
+ itemId: ProductQuery | string;
+ quantity: number;
+ salePrice: number;
+ printInBill: boolean;
+ };
+}
+
@Component({
selector: 'app-bundle-detail',
templateUrl: './bundle-detail.component.html',
styleUrls: ['./bundle-detail.component.css'],
imports: [
- AsyncPipe,
CurrencyPipe,
MatAutocompleteModule,
MatButtonModule,
@@ -41,95 +68,113 @@ import { BundleDetailDialogComponent } from './bundle-detail-dialog.component';
MatOptionModule,
MatSelectModule,
MatTableModule,
- ReactiveFormsModule,
+ FormField,
],
})
-export class BundleDetailComponent implements OnInit, AfterViewInit {
+export class BundleDetailComponent implements AfterViewInit {
+ @ViewChild('name', { static: true }) nameElement?: ElementRef;
+ private menuCategoryService = inject(MenuCategoryService);
+ private saleCategoryService = inject(SaleCategoryService);
private route = inject(ActivatedRoute);
private router = inject(Router);
private dialog = inject(MatDialog);
private snackBar = inject(MatSnackBar);
private ser = inject(BundleService);
private productSer = inject(ProductService);
+ id = input(null, { transform: (v: string | null | undefined) => v ?? null });
- @ViewChild('name', { static: true }) nameElement?: ElementRef;
+ saleCategoriesResource = this.saleCategoryService.list();
- form: FormGroup<{
- // Bundle header fields
- name: FormControl
;
- units: FormControl;
- salePrice: FormControl;
- menuCategory: FormControl;
- saleCategory: FormControl;
- hasHappyHour: FormControl;
- isNotAvailable: FormControl;
+ menuCategoriesResource = this.menuCategoryService.list(undefined);
- // Item add row
- addRow: FormGroup<{
- itemId: FormControl;
- quantity: FormControl;
- salePrice: FormControl;
- printInBill: FormControl;
- }>;
- }>;
+ itemResource = this.ser.get(this.id);
- menuCategories: MenuCategory[] = [];
- saleCategories: SaleCategory[] = [];
- public items$ = new BehaviorSubject([]);
- dataSource: BundleDetailDatasource = new BundleDetailDatasource(this.items$);
+ formModel = linkedSignal({
+ source: () => this.menuCategoriesResource.value(),
+ computation: (menuCategoriesVal): BundleDetailFormData => {
+ if (menuCategoriesVal) {
+ return {
+ name: this.item.name ?? '',
+ units: this.item.units ?? '',
+ salePrice: Number(this.item.salePrice ?? 0),
+ menuCategory: this.item.menuCategory?.id ?? '',
+ saleCategory: this.item.saleCategory?.id ?? '',
+ hasHappyHour: this.item.hasHappyHour ?? false,
+ isNotAvailable: this.item.isNotAvailable ?? false,
+
+ addRow: {
+ itemId: '',
+ quantity: 1,
+ salePrice: 0,
+ printInBill: true,
+ },
+ };
+ }
+ return {
+ name: '',
+ units: '',
+ salePrice: 0,
+ menuCategory: '',
+ saleCategory: '',
+ hasHappyHour: false,
+ isNotAvailable: false,
+ addRow: {
+ itemId: '',
+ quantity: 1,
+ salePrice: 0,
+ printInBill: true,
+ },
+ };
+ },
+ });
+
+ form = form(this.formModel);
+
+ menuCategories = signal([]);
+ saleCategories = signal([]);
+ items = signal([]);
+ dataSource = computed(() => this.items());
item: Bundle = new Bundle();
- itemProduct: ProductQuery | null = null;
- itemProducts: Observable;
+ itemProduct = signal(null);
+
+ itemIdSignal = computed(() => {
+ const x = this.formModel().addRow?.itemId;
+ return typeof x === 'string' ? x.trim() : '';
+ });
+
+ debouncedItemId = debounced(this.itemIdSignal, 150);
+
+ itemProductsResource = this.productSer.query(computed(() => this.debouncedItemId.value()));
+ itemProducts = computed(() => {
+ if (!this.debouncedItemId.value()) return [];
+ return this.itemProductsResource.value() ?? [];
+ });
displayedColumns = ['name', 'quantity', 'salePrice', 'printInBill', 'action'];
constructor() {
- this.form = new FormGroup({
- name: new FormControl('', { nonNullable: true }),
- units: new FormControl('', { nonNullable: true }),
- salePrice: new FormControl(0, { nonNullable: true }),
- menuCategory: new FormControl('', { nonNullable: true }),
- saleCategory: new FormControl('', { nonNullable: true }),
- hasHappyHour: new FormControl(false, { nonNullable: true }),
- isNotAvailable: new FormControl(false, { nonNullable: true }),
-
- addRow: new FormGroup({
- itemId: new FormControl('', { nonNullable: true }),
- quantity: new FormControl(1, { nonNullable: true }),
- salePrice: new FormControl(0, { nonNullable: true }),
- printInBill: new FormControl(true, { nonNullable: true }),
- }),
- });
- this.itemProducts = this.form.controls.addRow.controls.itemId.valueChanges.pipe(
- debounceTime(150),
- distinctUntilChanged(),
- switchMap((x) => {
- // if user types, x is string; if user selects, x is Product
- if (typeof x !== 'string') {
- return observableOf([]);
- }
- return x.trim() === '' ? observableOf([]) : this.productSer.query(x);
- }),
- );
- this.form.controls.addRow.controls.itemId.valueChanges.subscribe((x) => {
+ effect(() => {
+ const x = this.formModel().addRow?.itemId;
if (typeof x === 'string') {
- this.itemProduct = null;
+ this.itemProduct.set(null);
}
});
- }
+ effect(() => {
+ const menuCategoriesVal = this.menuCategoriesResource.value();
+ if (menuCategoriesVal) this.menuCategories.set(menuCategoriesVal);
+ const saleCategoriesVal = this.saleCategoriesResource.value();
+ if (saleCategoriesVal) this.saleCategories.set(saleCategoriesVal);
+ const itemVal = this.itemResource.value();
+ if (itemVal) {
+ this.item = itemVal;
- ngOnInit() {
- this.route.data.subscribe((value) => {
- const data = value as {
- item: Bundle;
- menuCategories: MenuCategory[];
- saleCategories: SaleCategory[];
- };
- this.menuCategories = data.menuCategories;
- this.saleCategories = data.saleCategories;
- this.showItem(data.item);
+ this.itemProduct.set(null);
+
+ this.items.set(this.item.items ?? []);
+ this.recalcBundleSalePrice();
+ }
});
}
@@ -139,8 +184,14 @@ export class BundleDetailComponent implements OnInit, AfterViewInit {
bundleSelected(event: MatAutocompleteSelectedEvent): void {
const product = event.option.value as ProductQuery;
- this.itemProduct = product;
- this.form.controls.addRow.controls.salePrice.setValue(product.price ?? 0);
+ this.itemProduct.set(product);
+ this.formModel.update((f) => ({
+ ...f,
+ addRow: {
+ ...f.addRow,
+ salePrice: product.price ?? 0,
+ },
+ }));
}
private recalcBundleSalePrice(): void {
@@ -154,34 +205,7 @@ export class BundleDetailComponent implements OnInit, AfterViewInit {
// keep model + form in sync
this.item.salePrice = Number(total.toFixed(2));
- // if the control is disabled, use patchValue
- this.form.controls.salePrice.patchValue(this.item.salePrice);
- }
-
- showItem(item: Bundle) {
- this.item = item;
-
- this.form.setValue({
- name: this.item.name ?? '',
- units: this.item.units ?? '',
- salePrice: Number(this.item.salePrice ?? 0),
- menuCategory: this.item.menuCategory?.id ?? '',
- saleCategory: this.item.saleCategory?.id ?? '',
- hasHappyHour: this.item.hasHappyHour ?? false,
- isNotAvailable: this.item.isNotAvailable ?? false,
-
- addRow: {
- itemId: '',
- quantity: 1,
- salePrice: 0,
- printInBill: true,
- },
- });
- this.itemProduct = null;
- this.form.controls.salePrice.disable({ emitEvent: false });
-
- this.items$.next(this.item.items ?? []);
- this.recalcBundleSalePrice();
+ this.formModel.update((f) => ({ ...f, salePrice: this.item.salePrice }));
}
ngAfterViewInit() {
@@ -193,17 +217,25 @@ export class BundleDetailComponent implements OnInit, AfterViewInit {
}
resetAddRow() {
- this.form.controls.addRow.reset();
- this.itemProduct = null;
+ this.formModel.update((f) => ({
+ ...f,
+ addRow: {
+ itemId: '',
+ quantity: 1,
+ salePrice: 0,
+ printInBill: true,
+ },
+ }));
+ this.itemProduct.set(null);
}
addRow() {
- const v = this.form.value.addRow;
+ const v = this.formModel().addRow;
if (!v) {
return;
}
- if (!this.itemProduct?.id) {
+ if (!this.itemProduct()?.id) {
this.snackBar.open('Please select a product', 'Error');
return;
}
@@ -223,15 +255,15 @@ export class BundleDetailComponent implements OnInit, AfterViewInit {
// name is expected from backend as "name (units)" on GET;
// for new rows we keep it blank (or you can set placeholder)
const bi = new BundleItem({
- itemId: this.itemProduct?.id,
- name: this.itemProduct?.name ?? '',
+ itemId: this.itemProduct()?.id,
+ name: this.itemProduct()?.name ?? '',
quantity,
salePrice,
printInBill: v.printInBill || false,
});
this.item.items.push(bi);
- this.items$.next(this.item.items);
+ this.items.set(this.item.items);
this.resetAddRow();
this.recalcBundleSalePrice();
@@ -250,7 +282,7 @@ export class BundleDetailComponent implements OnInit, AfterViewInit {
return;
}
Object.assign(row, result as BundleItem);
- this.items$.next(this.item.items);
+ this.items.set(this.item.items);
this.resetAddRow();
this.recalcBundleSalePrice();
});
@@ -258,7 +290,7 @@ export class BundleDetailComponent implements OnInit, AfterViewInit {
deleteRow(row: BundleItem) {
this.item.items.splice(this.item.items.indexOf(row), 1);
- this.items$.next(this.item.items);
+ this.items.set(this.item.items);
this.recalcBundleSalePrice();
}
@@ -272,8 +304,8 @@ export class BundleDetailComponent implements OnInit, AfterViewInit {
this.snackBar.open('', 'Success');
this.router.navigateByUrl('/bundles');
},
- error: (error) => {
- this.snackBar.open(error, 'Error');
+ error: (error: unknown) => {
+ this.snackBar.open(error as string, 'Error');
},
});
}
@@ -284,8 +316,8 @@ export class BundleDetailComponent implements OnInit, AfterViewInit {
this.snackBar.open('', 'Success');
this.router.navigateByUrl('/bundles');
},
- error: (error) => {
- this.snackBar.open(error, 'Error');
+ error: (error: unknown) => {
+ this.snackBar.open(error as string, 'Error');
},
});
}
@@ -304,7 +336,7 @@ export class BundleDetailComponent implements OnInit, AfterViewInit {
}
getItem(): Bundle {
- const v = this.form.value;
+ const v = this.formModel();
this.item.name = v.name ?? '';
this.item.units = v.units ?? '';
diff --git a/bookie/src/app/bundles/bundle-list.resolver.spec.ts b/bookie/src/app/bundles/bundle-list.resolver.spec.ts
deleted file mode 100644
index ce1ad04..0000000
--- a/bookie/src/app/bundles/bundle-list.resolver.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { inject, TestBed } from '@angular/core/testing';
-
-import { BundleListResolver } from './bundle-list-resolver.service';
-
-describe('BundleListResolver', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({
- providers: [BundleListResolver],
- });
- });
-
- it('should be created', inject([BundleListResolver], (service: BundleListResolver) => {
- expect(service).toBeTruthy();
- }));
-});
diff --git a/bookie/src/app/bundles/bundle-list.resolver.ts b/bookie/src/app/bundles/bundle-list.resolver.ts
deleted file mode 100644
index a79a399..0000000
--- a/bookie/src/app/bundles/bundle-list.resolver.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { Bundle } from './bundle';
-import { BundleService } from './bundle.service';
-
-export const bundleListResolver: ResolveFn = () => {
- return inject(BundleService).list();
-};
diff --git a/bookie/src/app/bundles/bundle-list/bundle-list-datasource.ts b/bookie/src/app/bundles/bundle-list/bundle-list-datasource.ts
deleted file mode 100644
index 3cc39af..0000000
--- a/bookie/src/app/bundles/bundle-list/bundle-list-datasource.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { merge, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-
-import { Bundle } from '../bundle';
-
-export class BundleListDataSource extends DataSource {
- public data: Bundle[];
- public filteredData: Bundle[];
- public search: string;
- public menuCategory: string;
-
- constructor(
- private readonly searchFilter: Observable,
- private readonly menuCategoryFilter: Observable,
- private readonly dataObs: Observable,
- ) {
- super();
- this.data = [];
- this.filteredData = [];
- this.search = '';
- this.menuCategory = '';
- }
-
- connect(): Observable {
- const dataMutations = [
- this.dataObs.pipe(
- tap((x) => {
- this.data = x;
- }),
- ),
- this.searchFilter.pipe(
- tap((x) => {
- this.search = x;
- }),
- ),
- this.menuCategoryFilter.pipe(
- tap((x) => {
- this.menuCategory = x;
- }),
- ),
- ];
-
- return merge(...dataMutations).pipe(
- map(() => this.getFilteredData(this.data, this.search, this.menuCategory)),
- tap((x) => {
- this.filteredData = x;
- }),
- );
- }
-
- disconnect() {}
-
- private getFilteredData(data: Bundle[], search: string, menuCategory: string): Bundle[] {
- const tokens = (search ?? '').toLowerCase().split(/\s+/).filter(Boolean);
-
- return data.filter((b: Bundle) => {
- const mcName = b.menuCategory?.name ?? '';
- const hay = `${b.name ?? ''} ${b.units ?? ''} ${mcName}`.toLowerCase();
-
- const matchesSearch = tokens.length === 0 || tokens.every((t) => hay.includes(t));
- const matchesMenuCategory = menuCategory === '' || (b.menuCategory?.id ?? '') === menuCategory;
-
- return matchesSearch && matchesMenuCategory;
- });
- }
-}
diff --git a/bookie/src/app/bundles/bundle-list/bundle-list.component.html b/bookie/src/app/bundles/bundle-list/bundle-list.component.html
index 8eceec2..7e97d00 100644
--- a/bookie/src/app/bundles/bundle-list/bundle-list.component.html
+++ b/bookie/src/app/bundles/bundle-list/bundle-list.component.html
@@ -1,6 +1,6 @@
-
-
+
Name
diff --git a/bookie/src/app/bundles/bundle-list/bundle-list.component.ts b/bookie/src/app/bundles/bundle-list/bundle-list.component.ts
index a09ff96..5b58072 100644
--- a/bookie/src/app/bundles/bundle-list/bundle-list.component.ts
+++ b/bookie/src/app/bundles/bundle-list/bundle-list.component.ts
@@ -1,6 +1,6 @@
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CurrencyPipe } from '@angular/common';
+import { Component, inject, computed, signal, debounced } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,21 +8,23 @@ import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, RouterModule } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { RouterModule } from '@angular/router';
-import { MenuCategory } from '../../core/menu-category';
+import { MenuCategoryService } from '../../menu-category/menu-category.service';
import { ToCsvService } from '../../shared/to-csv.service';
import { Bundle } from '../bundle';
-import { BundleListDataSource } from './bundle-list-datasource';
+import { BundleService } from '../bundle.service';
+
+export interface BundleListFormData {
+ menuCategory: string | null;
+ filter: string;
+}
@Component({
selector: 'app-bundle-list',
templateUrl: './bundle-list.component.html',
styleUrls: ['./bundle-list.component.css'],
imports: [
- AsyncPipe,
CurrencyPipe,
MatButtonModule,
MatFormFieldModule,
@@ -31,58 +33,44 @@ import { BundleListDataSource } from './bundle-list-datasource';
MatOptionModule,
MatSelectModule,
MatTableModule,
- ReactiveFormsModule,
+ FormField,
RouterModule,
],
})
-export class BundleListComponent implements OnInit {
- private route = inject(ActivatedRoute);
+export class BundleListComponent {
+ private menuCategoryService = inject(MenuCategoryService);
+ private bundleService = inject(BundleService);
private toCsv = inject(ToCsvService);
- searchFilter = new BehaviorSubject('');
- menuCategoryFilter = new BehaviorSubject('');
- data: BehaviorSubject = new BehaviorSubject([]);
- dataSource: BundleListDataSource = new BundleListDataSource(this.searchFilter, this.menuCategoryFilter, this.data);
+ menuCategoriesResource = this.menuCategoryService.list(undefined);
+ listResource = this.bundleService.list();
- form: FormGroup<{
- menuCategory: FormControl;
- filter: FormControl;
- }>;
+ menuCategoryFilter = signal('');
+
+ formModel = signal({
+ menuCategory: '',
+ filter: '',
+ });
+
+ form = form(this.formModel);
+
+ filterSignal = computed(() => this.formModel().filter);
+ debouncedFilter = debounced(this.filterSignal, 150);
+
+ dataSource = computed(() => {
+ let items = this.listResource.value() ?? [];
+ const search = this.debouncedFilter.value()?.toLowerCase() ?? '';
+ const cat = this.menuCategoryFilter();
+
+ if (search) items = items.filter((x: Bundle) => x.name.toLowerCase().includes(search));
+ if (cat) items = items.filter((x: Bundle) => x.menuCategory?.id === cat);
+ return items;
+ });
- list: Bundle[] = [];
- menuCategories: MenuCategory[] = [];
displayedColumns: string[] = ['name', 'price', 'menuCategory', 'saleCategory', 'info', 'items'];
- constructor() {
- this.form = new FormGroup({
- menuCategory: new FormControl(''),
- filter: new FormControl('', { nonNullable: true }),
- });
-
- this.data.subscribe((data: Bundle[]) => {
- this.list = data;
- });
-
- this.form.controls.filter.valueChanges.pipe(debounceTime(150), distinctUntilChanged()).subscribe((value) => {
- this.searchFilter.next(value ?? '');
- });
- }
-
filterOn(val: string) {
- this.menuCategoryFilter.next(val);
- }
-
- ngOnInit() {
- this.dataSource = new BundleListDataSource(this.searchFilter, this.menuCategoryFilter, this.data);
- this.route.data.subscribe((value) => {
- const data = value as { list: Bundle[]; menuCategories: MenuCategory[] };
- this.loadData(data.list, data.menuCategories);
- });
- }
-
- loadData(list: Bundle[], menuCategories: MenuCategory[]) {
- this.menuCategories = menuCategories;
- this.data.next(list);
+ this.menuCategoryFilter.set(val);
}
exportCsv() {
@@ -96,7 +84,7 @@ export class BundleListComponent implements OnInit {
};
// Map items to count for csv (simple)
- const csvList = this.dataSource.filteredData.map((b) => ({
+ const csvList = this.dataSource().map((b: Bundle) => ({
...b,
menuCategory: b.menuCategory?.name ?? '',
items: (b.items ?? [])
diff --git a/bookie/src/app/bundles/bundle.resolver.spec.ts b/bookie/src/app/bundles/bundle.resolver.spec.ts
deleted file mode 100644
index ff6bd4c..0000000
--- a/bookie/src/app/bundles/bundle.resolver.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { inject, TestBed } from '@angular/core/testing';
-
-import { BundleResolver } from './bundle-resolver.service';
-
-describe('BundleResolver', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({
- providers: [BundleResolver],
- });
- });
-
- it('should be created', inject([BundleResolver], (service: BundleResolver) => {
- expect(service).toBeTruthy();
- }));
-});
diff --git a/bookie/src/app/bundles/bundle.resolver.ts b/bookie/src/app/bundles/bundle.resolver.ts
deleted file mode 100644
index f555809..0000000
--- a/bookie/src/app/bundles/bundle.resolver.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { inject } from '@angular/core';
-import { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
-
-import { Bundle } from './bundle';
-import { BundleService } from './bundle.service';
-
-export const bundleResolver: ResolveFn = (route: ActivatedRouteSnapshot) => {
- const id = route.paramMap.get('id');
- return inject(BundleService).get(id);
-};
diff --git a/bookie/src/app/bundles/bundle.service.ts b/bookie/src/app/bundles/bundle.service.ts
index 79dcae9..8ff2660 100644
--- a/bookie/src/app/bundles/bundle.service.ts
+++ b/bookie/src/app/bundles/bundle.service.ts
@@ -1,5 +1,5 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpHeaders, httpResource, HttpResourceRef } from '@angular/common/http';
+import { Injectable, Signal, inject } from '@angular/core';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@@ -18,17 +18,15 @@ export class BundleService {
private http = inject(HttpClient);
private log = inject(ErrorLoggerService);
- list(): Observable {
- return this.http
- .get(`${url}/list`)
- .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable;
+ list(): HttpResourceRef {
+ return httpResource(() => `${url}/list`);
}
- get(id: string | null): Observable {
- const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
- return this.http
- .get(getUrl)
- .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable;
+ get(id: Signal): HttpResourceRef {
+ return httpResource(() => {
+ const idVal = id();
+ return idVal === null ? url : `${url}/${idVal}`;
+ });
}
save(bundle: Bundle): Observable {
diff --git a/bookie/src/app/bundles/bundles.routes.ts b/bookie/src/app/bundles/bundles.routes.ts
index 3e8c316..f91c4d7 100644
--- a/bookie/src/app/bundles/bundles.routes.ts
+++ b/bookie/src/app/bundles/bundles.routes.ts
@@ -1,12 +1,8 @@
import { Routes } from '@angular/router';
import { authGuard } from '../auth/auth-guard.service';
-import { menuCategoryListResolver } from '../menu-category/menu-category-list.resolver';
-import { saleCategoryListResolver } from '../sale-category/sale-category-list.resolver';
import { BundleDetailComponent } from './bundle-detail/bundle-detail.component';
-import { bundleListResolver } from './bundle-list.resolver';
import { BundleListComponent } from './bundle-list/bundle-list.component';
-import { bundleResolver } from './bundle.resolver';
export const routes: Routes = [
{
@@ -14,31 +10,17 @@ export const routes: Routes = [
component: BundleListComponent,
canActivate: [authGuard],
data: { permission: 'Products' }, // change if you have a separate permission
- resolve: {
- list: bundleListResolver,
- menuCategories: menuCategoryListResolver,
- },
},
{
path: 'new',
component: BundleDetailComponent,
canActivate: [authGuard],
data: { permission: 'Products' },
- resolve: {
- item: bundleResolver, // returns new Bundle() because id === null (no param here)
- menuCategories: menuCategoryListResolver,
- saleCategories: saleCategoryListResolver,
- },
},
{
path: ':id',
component: BundleDetailComponent,
canActivate: [authGuard],
data: { permission: 'Products' },
- resolve: {
- item: bundleResolver,
- menuCategories: menuCategoryListResolver,
- saleCategories: saleCategoryListResolver,
- },
},
];
diff --git a/bookie/src/app/cashier-report/active-cashiers.resolver.spec.ts b/bookie/src/app/cashier-report/active-cashiers.resolver.spec.ts
deleted file mode 100644
index f34e996..0000000
--- a/bookie/src/app/cashier-report/active-cashiers.resolver.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { inject, TestBed } from '@angular/core/testing';
-
-import { ActiveCashiersResolver } from './active-cashiers-resolver.service';
-
-describe('ActiveCashiersResolver', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({
- providers: [ActiveCashiersResolver],
- });
- });
-
- it('should be created', inject([ActiveCashiersResolver], (service: ActiveCashiersResolver) => {
- expect(service).toBeTruthy();
- }));
-});
diff --git a/bookie/src/app/cashier-report/active-cashiers.resolver.ts b/bookie/src/app/cashier-report/active-cashiers.resolver.ts
deleted file mode 100644
index e9aad23..0000000
--- a/bookie/src/app/cashier-report/active-cashiers.resolver.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { User } from '../core/user';
-import { CashierReportService } from './cashier-report.service';
-
-export const activeCashiersResolver: ResolveFn = (route) => {
- const startDate = route.queryParamMap.get('startDate') ?? null;
- const finishDate = route.queryParamMap.get('finishDate') ?? null;
- return inject(CashierReportService).activeCashiers(startDate, finishDate);
-};
diff --git a/bookie/src/app/cashier-report/cashier-report-datasource.ts b/bookie/src/app/cashier-report/cashier-report-datasource.ts
deleted file mode 100644
index f87c5c8..0000000
--- a/bookie/src/app/cashier-report/cashier-report-datasource.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable, of as observableOf } from 'rxjs';
-
-import { CashierReportDisplayItem } from './cashier-report-display-item';
-
-export class CashierReportDataSource extends DataSource {
- constructor(public data: CashierReportDisplayItem[]) {
- super();
- }
-
- connect(): Observable {
- return observableOf(this.data);
- }
-
- disconnect() {}
-}
diff --git a/bookie/src/app/cashier-report/cashier-report.component.html b/bookie/src/app/cashier-report/cashier-report.component.html
index 4617a8d..0f335d3 100644
--- a/bookie/src/app/cashier-report/cashier-report.component.html
+++ b/bookie/src/app/cashier-report/cashier-report.component.html
@@ -1,15 +1,15 @@
Cashier Report
-
-