tanshu/barker
1
0
Fork 0
Code Issues 1 Pull Requests Releases 4 Activity

toSignal via Gemini

Browse Source
This commit is contained in:
tanshu
2026-08-18 07:55:54 +00:00
parent 59eb45da96
commit 993f83c786
350 changed files with 6231 additions and 9801 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html
+13 -10
View File
@@ -1,40 +1,43 @@
<h2>Modifier</h2>
<form [formGroup]="form" class="flex-col">
<form class="flex-col">
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Name</mat-label>
<input matInput #name formControlName="name" />
<input matInput #name [formField]="form.name" />
</mat-form-field>
</div>
<div class="row-container">
<mat-checkbox formControlName="showInBill">Show In Bill?</mat-checkbox>
<mat-checkbox [formField]="form.showInBill">Show In Bill?</mat-checkbox>
</div>
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Price</mat-label>
<input matInput type="number" formControlName="price" />
<input matInput type="number" [formField]="form.price" />
</mat-form-field>
</div>
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Category</mat-label>
<mat-select formControlName="modifierCategory">
@for (mc of modifierCategories; track mc) {
<mat-select [formField]="form.modifierCategory">
@for (mc of modifierCategories(); track mc) {
<mat-option [value]="mc.id">
{{ mc.name }}
</mat-option>
}
</mat-select>
@for (error of form.modifierCategory().errors(); track error) {
<mat-error>{{ error.message }}</mat-error>
}
</mat-form-field>
</div>
<div class="row-container">
<mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
<mat-checkbox [formField]="form.isActive">Is Active?</mat-checkbox>
</div>
</form>
<div class="row-container">
<button mat-raised-button color="primary" class="" (click)="save()">Save</button>
@if (!!item.id) {
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
<button type="button" mat-raised-button color="primary" [disabled]="form().invalid()" (click)="save()">Save</button>
@if (!!item().id) {
<button type="button" mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
}
</div>
bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts
+49 -56
View File
@@ -1,5 +1,5 @@
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { AfterViewInit, Component, ElementRef, ViewChild, computed, inject, linkedSignal, input } from '@angular/core';
import { form, FormField, required } from '@angular/forms/signals';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatOptionModule } from '@angular/material/core';
@@ -12,73 +12,64 @@ import { ActivatedRoute, Router } from '@angular/router';
import { Modifier } from '../../core/modifier';
import { ModifierCategory } from '../../core/modifier-category';
import { ModifierCategoryService } from '../../modifier-categories/modifier-category.service';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { ModifierService } from '../modifier.service';
export interface ModifierDetailFormData {
name: string;
showInBill: boolean;
price: number;
modifierCategory: string;
isActive: boolean;
}
@Component({
selector: 'app-modifier-detail',
templateUrl: './modifier-detail.component.html',
styleUrls: ['./modifier-detail.component.css'],
imports: [
MatButtonModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatOptionModule,
MatSelectModule,
ReactiveFormsModule,
FormField,
],
})
export class ModifierDetailComponent implements OnInit, AfterViewInit {
export class ModifierDetailComponent implements AfterViewInit {
@ViewChild('name', { static: true }) nameElement?: ElementRef;
private modifierCategoryService = inject(ModifierCategoryService);
private route = inject(ActivatedRoute);
private router = inject(Router);
private dialog = inject(MatDialog);
private snackBar = inject(MatSnackBar);
private ser = inject(ModifierService);
id = input(null, { transform: (v: string | null | undefined) => v ?? null });
@ViewChild('name', { static: true }) nameElement?: ElementRef;
form: FormGroup<{
name: FormControl<string>;
showInBill: FormControl<boolean>;
price: FormControl<number>;
modifierCategory: FormControl<string>;
isActive: FormControl<boolean>;
}>;
modifierCategoriesResource = this.modifierCategoryService.list();
modifierCategories = computed(() => this.modifierCategoriesResource.value() ?? []);
modifierCategories: ModifierCategory[] = [];
item: Modifier = new Modifier();
itemResource = this.ser.get(this.id);
constructor() {
// Create form
this.form = new FormGroup({
name: new FormControl<string>('', { nonNullable: true }),
showInBill: new FormControl<boolean>(true, { nonNullable: true }),
price: new FormControl<number>(0, { nonNullable: true }),
modifierCategory: new FormControl<string>('', { nonNullable: true }),
isActive: new FormControl<boolean>(true, { nonNullable: true }),
});
}
item = computed(() => this.itemResource.value() ?? new Modifier());
formModel = linkedSignal({
source: this.item,
computation: (itemVal): ModifierDetailFormData => {
return {
name: itemVal.name ?? '',
showInBill: itemVal.showInBill,
price: itemVal.price ?? 0,
isActive: itemVal.isActive,
modifierCategory: itemVal.modifierCategory ? (itemVal.modifierCategory.id as string) : '',
};
},
});
ngOnInit() {
this.route.data.subscribe((value) => {
const data = value as { item: Modifier; modifierCategories: ModifierCategory[] };
this.modifierCategories = data.modifierCategories;
this.showItem(data.item);
});
}
showItem(item: Modifier) {
this.item = item;
this.form.setValue({
name: this.item.name ?? '',
showInBill: this.item.showInBill,
price: this.item.price ?? 0,
isActive: this.item.isActive,
modifierCategory: this.item.modifierCategory ? (this.item.modifierCategory.id as string) : '',
});
}
form = form(this.formModel, (schema) => {
required(schema.modifierCategory, { message: 'Modifier Category is required' });
});
ngAfterViewInit() {
setTimeout(() => {
@@ -94,20 +85,20 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
this.snackBar.open('', 'Success');
this.router.navigateByUrl('/modifiers');
},
error: (error) => {
this.snackBar.open(error, 'Error');
error: (error: unknown) => {
this.snackBar.open(error as string, 'Error');
},
});
}
delete() {
this.ser.delete(this.item.id as string).subscribe({
this.ser.delete(this.item().id as string).subscribe({
next: () => {
this.snackBar.open('', 'Success');
this.router.navigateByUrl('/modifiers');
},
error: (error) => {
this.snackBar.open(error, 'Error');
error: (error: unknown) => {
this.snackBar.open(error as string, 'Error');
},
});
}
@@ -126,12 +117,14 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
}
getItem(): Modifier {
const formModel = this.form.value;
this.item.name = formModel.name ?? '';
this.item.showInBill = formModel.showInBill ?? false;
this.item.price = formModel.price ?? 0;
this.item.isActive = formModel.isActive ?? true;
this.item.modifierCategory = new ModifierCategory({ id: formModel.modifierCategory });
return this.item;
const formModel = this.formModel();
return new Modifier({
...this.item(),
name: formModel.name ?? '',
showInBill: formModel.showInBill ?? false,
price: formModel.price ?? 0,
isActive: formModel.isActive ?? true,
modifierCategory: new ModifierCategory({ id: formModel.modifierCategory }),
});
}
}
bookie/src/app/modifiers/modifier-list.resolver.spec.ts
-15
View File
@@ -1,15 +0,0 @@
import { inject, TestBed } from '@angular/core/testing';
import { ModifierListResolver } from './modifier-list-resolver.service';
describe('ModifierListResolver', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ModifierListResolver],
});
});
it('should be created', inject([ModifierListResolver], (service: ModifierListResolver) => {
expect(service).toBeTruthy();
}));
});
bookie/src/app/modifiers/modifier-list.resolver.ts
-9
View File
@@ -1,9 +0,0 @@
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { Modifier } from '../core/modifier';
import { ModifierService } from './modifier.service';
export const modifierListResolver: ResolveFn<Modifier[]> = () => {
return inject(ModifierService).list();
};
bookie/src/app/modifiers/modifier-list/modifier-list-datasource.ts
-50
View File
@@ -1,50 +0,0 @@
import { DataSource } from '@angular/cdk/collections';
import { merge, Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { Modifier } from '../../core/modifier';
import { ModifierCategory } from '../../core/modifier-category';
export class ModifierListDataSource extends DataSource<Modifier> {
public data: Modifier[];
public viewData: Modifier[];
private filterValue: string;
constructor(
private readonly filter: Observable<string>,
private readonly dataObs: Observable<Modifier[]>,
) {
super();
this.data = [];
this.viewData = [];
this.filterValue = '';
this.filter = filter.pipe(
tap((x) => {
this.filterValue = x;
}),
);
this.dataObs = dataObs.pipe(
tap((x) => {
this.data = x;
}),
);
}
connect(): Observable<Modifier[]> {
const dataMutations = [this.dataObs, this.filter];
return merge(...dataMutations).pipe(
map(() => {
this.viewData = this.getFilteredData([...this.data]);
return this.viewData;
}),
);
}
disconnect() {}
private getFilteredData(data: Modifier[]): Modifier[] {
const filter = this.filterValue === undefined ? '' : this.filterValue;
return data.filter((x) => (x.modifierCategory as ModifierCategory).id === filter || filter === '');
}
}
bookie/src/app/modifiers/modifier-list/modifier-list.component.html
+4 -4
View File
@@ -5,13 +5,13 @@
Add
</a>
</h2>
<form [formGroup]="form" class="flex-col">
<form class="flex-col">
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Modifier Category</mat-label>
<mat-select formControlName="modifierCategory" (selectionChange)="filterOn($event)">
<mat-select (selectionChange)="filterOn($event)">
<mat-option>-- All Categories --</mat-option>
@for (mc of modifierCategories; track mc) {
@for (mc of modifierCategories(); track mc.id) {
<mat-option [value]="mc.id">
{{ mc.name }}
</mat-option>
@@ -20,7 +20,7 @@
</mat-form-field>
</div>
</form>
<mat-table #table [dataSource]="dataSource" aria-label="Elements">
<mat-table #table [dataSource]="dataSource()" aria-label="Elements">
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
bookie/src/app/modifiers/modifier-list/modifier-list.component.ts
+23 -41
View File
@@ -1,18 +1,15 @@
import { CurrencyPipe } from '@angular/common';
import { Component, OnInit, inject } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { Component, inject, computed, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatSelectChange, MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { RouterLink } from '@angular/router';
import { Modifier } from '../../core/modifier';
import { ModifierCategory } from '../../core/modifier-category';
import { ModifierListDataSource } from './modifier-list-datasource';
import { ModifierCategoryService } from '../../modifier-categories/modifier-category.service';
import { ModifierService } from '../modifier.service';
@Component({
selector: 'app-modifier-list',
@@ -21,52 +18,37 @@ import { ModifierListDataSource } from './modifier-list-datasource';
imports: [
CurrencyPipe,
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatOptionModule,
MatSelectModule,
MatTableModule,
ReactiveFormsModule,
RouterLink,
],
})
export class ModifierListComponent implements OnInit {
private route = inject(ActivatedRoute);
private router = inject(Router);
export class ModifierListComponent {
private modifierService = inject(ModifierService);
private modifierCategoryService = inject(ModifierCategoryService);
// @ViewChild('table', { static: true }) table?: MatTable<Modifier>;
filter = new BehaviorSubject<string>('');
data: BehaviorSubject<Modifier[]> = new BehaviorSubject<Modifier[]>([]);
dataSource: ModifierListDataSource = new ModifierListDataSource(this.filter, this.data);
form: FormGroup<{
modifierCategory: FormControl<string | null>;
}>;
modifierCategoriesResource = this.modifierCategoryService.list();
listResource = this.modifierService.list();
modifierCategories = computed(() => this.modifierCategoriesResource.value() ?? []);
filter = signal<string>('');
dataSource = computed(() => {
const items = this.listResource.value() ?? [];
const cat = this.filter();
if (cat) {
return items.filter((x) => x.modifierCategory?.id === cat);
}
return items;
});
list: Modifier[] = [];
modifierCategories: ModifierCategory[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns: string[] = ['name', 'showInBill', 'price', 'isActive', 'modifierCategory'];
constructor() {
this.form = new FormGroup({
modifierCategory: new FormControl<string | null>(''),
});
this.data.subscribe((data: Modifier[]) => {
this.list = data;
});
}
filterOn(val: MatSelectChange) {
this.filter.next(val.value);
}
ngOnInit() {
this.route.data.subscribe((value) => {
const data = value as { list: Modifier[]; modifierCategories: ModifierCategory[] };
this.data.next(data.list);
this.modifierCategories = data.modifierCategories;
});
this.dataSource = new ModifierListDataSource(this.filter, this.data);
filterOn(val: MatSelectChange): void {
this.filter.set(val.value);
}
}
bookie/src/app/modifiers/modifier.resolver.spec.ts
-15
View File
@@ -1,15 +0,0 @@
import { inject, TestBed } from '@angular/core/testing';
import { ModifierResolver } from './modifier-resolver.service';
describe('ModifierResolver', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ModifierResolver],
});
});
it('should be created', inject([ModifierResolver], (service: ModifierResolver) => {
expect(service).toBeTruthy();
}));
});
bookie/src/app/modifiers/modifier.resolver.ts
-10
View File
@@ -1,10 +0,0 @@
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { Modifier } from '../core/modifier';
import { ModifierService } from './modifier.service';
export const modifierResolver: ResolveFn<Modifier> = (route) => {
const id = route.paramMap.get('id');
return inject(ModifierService).get(id);
};
bookie/src/app/modifiers/modifier.service.ts
+9 -11
View File
@@ -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 ModifierService {
private http = inject(HttpClient);
private log = inject(ErrorLoggerService);
get(id: string | null): Observable<Modifier> {
const getUrl: string = id === null ? url : `${url}/${id}`;
return this.http
.get<Modifier>(getUrl)
.pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Modifier>;
get(id: Signal<string | null> | string | null): HttpResourceRef<Modifier | undefined> {
return httpResource<Modifier>(() => {
const idVal = typeof id === 'function' ? id() : id;
return idVal === null || idVal === undefined ? url : `${url}/${idVal}`;
});
}
list(): Observable<Modifier[]> {
return this.http
.get<Modifier[]>(`${url}/list`)
.pipe(catchError(this.log.handleError(serviceName, 'getList'))) as Observable<Modifier[]>;
list(): HttpResourceRef<Modifier[] | undefined> {
return httpResource<Modifier[]>(() => `${url}/list`);
}
save(modifier: Modifier): Observable<Modifier> {
bookie/src/app/modifiers/modifiers.routes.ts
-15
View File
@@ -1,11 +1,8 @@
import { Routes } from '@angular/router';
import { authGuard } from '../auth/auth-guard.service';
import { modifierCategoryListResolver } from '../modifier-categories/modifier-category-list.resolver';
import { ModifierDetailComponent } from './modifier-detail/modifier-detail.component';
import { modifierListResolver } from './modifier-list.resolver';
import { ModifierListComponent } from './modifier-list/modifier-list.component';
import { modifierResolver } from './modifier.resolver';
export const routes: Routes = [
{
@@ -15,10 +12,6 @@ export const routes: Routes = [
data: {
permission: 'Modifiers',
},
resolve: {
list: modifierListResolver,
modifierCategories: modifierCategoryListResolver,
},
},
{
path: 'new',
@@ -27,10 +20,6 @@ export const routes: Routes = [
data: {
permission: 'Modifiers',
},
resolve: {
item: modifierResolver,
modifierCategories: modifierCategoryListResolver,
},
},
{
path: ':id',
@@ -39,9 +28,5 @@ export const routes: Routes = [
data: {
permission: 'Modifiers',
},
resolve: {
item: modifierResolver,
modifierCategories: modifierCategoryListResolver,
},
},
];