toSignal via Gemini

This commit is contained in:
2026-08-18 07:55:54 +00:00
parent 59eb45da96
commit 993f83c786
350 changed files with 6231 additions and 9801 deletions
@@ -1,28 +1,32 @@
<h2>Regime</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 #nameElement formControlName="name" (keyup.enter)="save()" />
<input matInput #nameElement [formField]="form.name" (keyup.enter)="save()" />
</mat-form-field>
</div>
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Header</mat-label>
<textarea matInput formControlName="header"></textarea>
<textarea matInput [formField]="form.header"></textarea>
</mat-form-field>
</div>
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Prefix</mat-label>
<input matInput formControlName="prefix" />
<input matInput [formField]="form.prefix" />
</mat-form-field>
</div>
</form>
<div class="row-container">
<button mat-raised-button [disabled]="item.isFixture" color="primary" class="" (click)="save()">Save</button>
@if (!!item.id) {
<button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()">Delete</button>
<button type="button" mat-raised-button [disabled]="item().isFixture" color="primary" class="" (click)="save()">
Save
</button>
@if (!!item().id) {
<button type="button" mat-raised-button [disabled]="item().isFixture" color="warn" (click)="confirmDelete()">
Delete
</button>
}
</div>
@@ -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 } from '@angular/forms/signals';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
@@ -11,52 +11,42 @@ import { Regime } from '../../core/regime';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { RegimeService } from '../regime.service';
export interface RegimeDetailFormData {
name: string;
header: string;
prefix: string;
}
@Component({
selector: 'app-regime-detail',
templateUrl: './regime-detail.component.html',
styleUrls: ['./regime-detail.component.css'],
imports: [MatButtonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
imports: [MatButtonModule, MatFormFieldModule, MatInputModule, FormField],
})
export class RegimeDetailComponent implements OnInit, AfterViewInit {
export class RegimeDetailComponent implements AfterViewInit {
@ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
private route = inject(ActivatedRoute);
private router = inject(Router);
private dialog = inject(MatDialog);
private snackBar = inject(MatSnackBar);
private ser = inject(RegimeService);
id = input(null, { transform: (v: string | null | undefined) => (v ? +v : null) });
@ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
form: FormGroup<{
name: FormControl<string>;
header: FormControl<string>;
prefix: FormControl<string>;
}>;
itemResource = this.ser.get(this.id);
item: Regime = new Regime();
item = computed(() => this.itemResource.value() ?? new Regime());
formModel = linkedSignal({
source: this.item,
computation: (itemVal): RegimeDetailFormData => {
return {
name: itemVal.name ?? '',
header: itemVal.header ?? '',
prefix: itemVal.prefix ?? '',
};
},
});
constructor() {
// Create form
this.form = new FormGroup({
name: new FormControl<string>('', { nonNullable: true }),
header: new FormControl<string>('', { nonNullable: true }),
prefix: new FormControl<string>('', { nonNullable: true }),
});
}
ngOnInit() {
this.route.data.subscribe((value) => {
const data = value as { item: Regime };
this.showItem(data.item);
});
}
showItem(item: Regime) {
this.item = item;
this.form.setValue({
name: this.item.name ?? '',
header: this.item.header ?? '',
prefix: this.item.prefix ?? '',
});
}
form = form(this.formModel);
ngAfterViewInit() {
setTimeout(() => {
@@ -72,20 +62,20 @@ export class RegimeDetailComponent implements OnInit, AfterViewInit {
this.snackBar.open('', 'Success');
this.router.navigateByUrl('/regimes');
},
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 number).subscribe({
this.ser.delete(this.item().id as number).subscribe({
next: () => {
this.snackBar.open('', 'Success');
this.router.navigateByUrl('/regimes');
},
error: (error) => {
this.snackBar.open(error, 'Error');
error: (error: unknown) => {
this.snackBar.open(error as string, 'Error');
},
});
}
@@ -104,10 +94,12 @@ export class RegimeDetailComponent implements OnInit, AfterViewInit {
}
getItem(): Regime {
const formModel = this.form.value;
this.item.name = formModel.name ?? '';
this.item.header = formModel.header ?? '';
this.item.prefix = formModel.prefix ?? '';
return this.item;
const formModel = this.formModel();
return new Regime({
...this.item(),
name: formModel.name ?? '',
header: formModel.header ?? '',
prefix: formModel.prefix ?? '',
});
}
}
@@ -1,15 +0,0 @@
import { inject, TestBed } from '@angular/core/testing';
import { RegimeListResolver } from './regime-list-resolver.service';
describe('RegimeListResolverService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [RegimeListResolver],
});
});
it('should be created', inject([RegimeListResolver], (service: RegimeListResolver) => {
expect(service).toBeTruthy();
}));
});
@@ -1,9 +0,0 @@
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { Regime } from '../core/regime';
import { RegimeService } from './regime.service';
export const regimeListResolver: ResolveFn<Regime[]> = () => {
return inject(RegimeService).list();
};
@@ -1,16 +0,0 @@
import { DataSource } from '@angular/cdk/collections';
import { Observable, of as observableOf } from 'rxjs';
import { Regime } from '../../core/regime';
export class RegimeListDataSource extends DataSource<Regime> {
constructor(public data: Regime[]) {
super();
}
connect(): Observable<Regime[]> {
return observableOf(this.data);
}
disconnect() {}
}
@@ -5,7 +5,7 @@
Add
</a>
</h2>
<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>
@@ -1,31 +1,22 @@
import { Component, OnInit, inject } from '@angular/core';
import { Component, inject, computed } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTableModule } from '@angular/material/table';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { Regime } from '../../core/regime';
import { RegimeListDataSource } from './regime-list-datasource';
import { RegimeService } from '../regime.service';
@Component({
selector: 'app-regime-list',
templateUrl: './regime-list.component.html',
styleUrls: ['./regime-list.component.css'],
imports: [MatButtonModule, MatIconModule, MatTableModule, RouterLink],
})
export class RegimeListComponent implements OnInit {
export class RegimeListComponent {
private regimeService = inject(RegimeService);
private route = inject(ActivatedRoute);
listResource = this.regimeService.list();
list: Regime[] = [];
dataSource: RegimeListDataSource = new RegimeListDataSource(this.list);
dataSource = computed(() => this.listResource.value() ?? []);
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['name', 'header', 'prefix', 'isFixture'];
ngOnInit() {
this.route.data.subscribe((value) => {
const data = value as { list: Regime[] };
this.list = data.list;
});
this.dataSource = new RegimeListDataSource(this.list);
}
}
@@ -1,15 +0,0 @@
import { inject, TestBed } from '@angular/core/testing';
import { RegimeResolver } from './regime-resolver.service';
describe('RegimeResolver', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [RegimeResolver],
});
});
it('should be created', inject([RegimeResolver], (service: RegimeResolver) => {
expect(service).toBeTruthy();
}));
});
-10
View File
@@ -1,10 +0,0 @@
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { Regime } from '../core/regime';
import { RegimeService } from './regime.service';
export const regimeResolver: ResolveFn<Regime> = (route) => {
const id = route.paramMap.get('id');
return inject(RegimeService).get(id ? +id : null);
};
+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';
@@ -19,17 +19,15 @@ export class RegimeService {
private http = inject(HttpClient);
private log = inject(ErrorLoggerService);
get(id: number | null): Observable<Regime> {
const getUrl: string = id === null ? url : `${url}/${id}`;
return this.http
.get<Regime>(getUrl)
.pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Regime>;
get(id: Signal<number | null> | number | null): HttpResourceRef<Regime | undefined> {
return httpResource<Regime>(() => {
const idVal = typeof id === 'function' ? id() : id;
return idVal === null || idVal === undefined || isNaN(idVal) ? url : `${url}/${idVal}`;
});
}
list(): Observable<Regime[]> {
return this.http
.get<Regime[]>(`${url}/list`)
.pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Regime[]>;
list(): HttpResourceRef<Regime[] | undefined> {
return httpResource<Regime[]>(() => `${url}/list`);
}
save(regime: Regime): Observable<Regime> {
-11
View File
@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
import { authGuard } from '../auth/auth-guard.service';
import { RegimeDetailComponent } from './regime-detail/regime-detail.component';
import { regimeListResolver } from './regime-list.resolver';
import { RegimeListComponent } from './regime-list/regime-list.component';
import { regimeResolver } from './regime.resolver';
export const routes: Routes = [
{
@@ -14,9 +12,6 @@ export const routes: Routes = [
data: {
permission: 'Regimes',
},
resolve: {
list: regimeListResolver,
},
},
{
path: 'new',
@@ -25,9 +20,6 @@ export const routes: Routes = [
data: {
permission: 'Regimes',
},
resolve: {
item: regimeResolver,
},
},
{
path: ':id',
@@ -36,8 +28,5 @@ export const routes: Routes = [
data: {
permission: 'Regimes',
},
resolve: {
item: regimeResolver,
},
},
];