toSignal via Gemini
This commit is contained in:
@@ -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();
|
||||
}));
|
||||
});
|
||||
@@ -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);
|
||||
};
|
||||
@@ -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> {
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user