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/users/user-detail/user-detail.component.html
+10 -10
View File
@@ -1,32 +1,32 @@
<h2>User</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" />
<input matInput #nameElement [formField]="form.name" />
</mat-form-field>
</div>
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Password</mat-label>
<input matInput formControlName="password" [type]="hide ? 'password' : 'text'" />
<input matInput [formField]="form.password" [type]="hide ? 'password' : 'text'" />
<mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
</mat-form-field>
</div>
<div class="row-container">
<mat-checkbox formControlName="lockedOut">Is Locked Out?</mat-checkbox>
<mat-checkbox [formField]="form.lockedOut">Is Locked Out?</mat-checkbox>
</div>
<mat-divider></mat-divider>
<div formArrayName="roles">
@for (r of item.roles; track r; let i = $index) {
<div [formGroupName]="i" class="row-container">
<mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
<div>
@for (r of form.roles; track r; let i = $index) {
<div class="row-container">
<mat-checkbox [formField]="r.enabled" class="flex-auto">{{ r.name().value() }}</mat-checkbox>
</div>
}
</div>
</form>
<div class="row-container">
<button mat-raised-button color="primary" class="" (click)="save()">Save</button>
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
<button type="button" mat-raised-button color="primary" class="" (click)="save()">Save</button>
<button type="button" mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
</div>
bookie/src/app/users/user-detail/user-detail.component.ts
+43 -61
View File
@@ -1,5 +1,5 @@
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
import { FormArray, 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 { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialog } from '@angular/material/dialog';
@@ -14,74 +14,57 @@ import { User } from '../../core/user';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { UserService } from '../user.service';
export interface UserDetailFormData {
name: string;
password: string;
lockedOut: boolean;
roles: { id: string; name: string; enabled: boolean }[];
}
@Component({
selector: 'app-user-detail',
templateUrl: './user-detail.component.html',
styleUrls: ['./user-detail.component.css'],
imports: [
MatButtonModule,
MatCheckboxModule,
MatDividerModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
ReactiveFormsModule,
FormField,
],
})
export class UserDetailComponent implements OnInit, AfterViewInit {
export class UserDetailComponent implements AfterViewInit {
@ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
private route = inject(ActivatedRoute);
private router = inject(Router);
private snackBar = inject(MatSnackBar);
private dialog = inject(MatDialog);
private ser = inject(UserService);
id = input(null, { transform: (v: string | null | undefined) => v ?? null });
@ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
form: FormGroup<{
name: FormControl<string | null>;
password: FormControl<string | null>;
lockedOut: FormControl<boolean>;
roles: FormArray<
FormGroup<{
role: FormControl<boolean>;
}>
>;
}>;
itemResource = this.ser.get(this.id);
item: User = new User();
hide: boolean;
item = computed(() => this.itemResource.value() ?? new User());
formModel = linkedSignal({
source: this.item,
computation: (itemVal): UserDetailFormData => {
return {
name: itemVal.name ?? '',
password: '',
lockedOut: itemVal.lockedOut,
roles: itemVal.roles.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
};
},
});
form = form(this.formModel);
hide = true;
constructor() {
this.hide = true;
// Create form
this.form = new FormGroup({
name: new FormControl<string | null>(null),
password: new FormControl<string | null>(null),
lockedOut: new FormControl<boolean>(false, { nonNullable: true }),
roles: new FormArray<FormGroup<{ role: FormControl<boolean> }>>([]),
});
}
ngOnInit() {
this.route.data.subscribe((value) => {
const data = value as { item: User };
this.showItem(data.item);
});
}
showItem(item: User) {
this.item = item;
this.form.controls.name.setValue(item.name);
this.form.controls.password.setValue('');
this.form.controls.lockedOut.setValue(item.lockedOut);
this.form.controls.roles.clear();
this.item.roles.forEach((x) =>
this.form.controls.roles.push(
new FormGroup({
role: new FormControl<boolean>(x.enabled, { nonNullable: true }),
}),
),
);
}
ngAfterViewInit() {
@@ -96,26 +79,26 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
this.ser.saveOrUpdate(this.getItem()).subscribe({
next: () => {
this.snackBar.open('', 'Success');
if ((this.item.id as string) === 'me') {
if ((this.item().id as string) === 'me') {
this.router.navigateByUrl('/');
} else {
this.router.navigateByUrl('/users');
}
},
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('/users');
},
error: (error) => {
this.snackBar.open(error, 'Error');
error: (error: unknown) => {
this.snackBar.open(error as string, 'Error');
},
});
}
@@ -134,14 +117,13 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
}
getItem(): User {
const formModel = this.form.value;
this.item.name = formModel.name ?? '';
this.item.password = formModel.password ?? '';
this.item.lockedOut = formModel.lockedOut ?? true;
const array = this.form.controls.roles;
this.item.roles.forEach((item, index) => {
item.enabled = array.controls[index].value.role ?? false;
const formModel = this.formModel();
return new User({
...this.item(),
name: formModel.name ?? '',
password: formModel.password ?? '',
lockedOut: formModel.lockedOut ?? true,
roles: formModel.roles.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
});
return this.item;
}
}
bookie/src/app/users/user-list.resolver.spec.ts
-15
View File
@@ -1,15 +0,0 @@
import { inject, TestBed } from '@angular/core/testing';
import { UserListResolver } from './user-list-resolver.service';
describe('UserListResolver', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [UserListResolver],
});
});
it('should be created', inject([UserListResolver], (service: UserListResolver) => {
expect(service).toBeTruthy();
}));
});
bookie/src/app/users/user-list.resolver.ts
-9
View File
@@ -1,9 +0,0 @@
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { User } from '../core/user';
import { UserService } from './user.service';
export const userListResolver: ResolveFn<User[]> = () => {
return inject(UserService).list();
};
bookie/src/app/users/user-list/user-list-datasource.ts
-16
View File
@@ -1,16 +0,0 @@
import { DataSource } from '@angular/cdk/collections';
import { Observable, of as observableOf } from 'rxjs';
import { User } from '../../core/user';
export class UserListDataSource extends DataSource<User> {
constructor(public data: User[]) {
super();
}
connect(): Observable<User[]> {
return observableOf(this.data);
}
disconnect() {}
}
bookie/src/app/users/user-list/user-list.component.html
+1 -1
View File
@@ -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>
bookie/src/app/users/user-list/user-list.component.ts
+6 -16
View File
@@ -1,32 +1,22 @@
import { Component, OnInit, inject } from '@angular/core';
import { Component, computed, inject } 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 { User } from '../../core/user';
import { LocalTimePipe } from '../../shared/local-time.pipe';
import { UserListDataSource } from './user-list-datasource';
import { UserService } from '../user.service';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css'],
imports: [LocalTimePipe, MatButtonModule, MatIconModule, MatTableModule, RouterLink],
})
export class UserListComponent implements OnInit {
export class UserListComponent {
private userService = inject(UserService);
private route = inject(ActivatedRoute);
listResource = this.userService.list();
dataSource: UserListDataSource = new UserListDataSource([]);
list: User[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
dataSource = computed(() => this.listResource.value() ?? []);
displayedColumns = ['name', 'lockedOut', 'roles', 'last'];
ngOnInit() {
this.route.data.subscribe((value) => {
const data = value as { list: User[] };
this.list = data.list;
});
this.dataSource = new UserListDataSource(this.list);
}
}
bookie/src/app/users/user.resolver.spec.ts
-15
View File
@@ -1,15 +0,0 @@
import { inject, TestBed } from '@angular/core/testing';
import { UserResolver } from './user-resolver.service';
describe('UserResolver', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [UserResolver],
});
});
it('should be created', inject([UserResolver], (service: UserResolver) => {
expect(service).toBeTruthy();
}));
});
bookie/src/app/users/user.resolver.ts
-10
View File
@@ -1,10 +0,0 @@
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { User } from '../core/user';
import { UserService } from './user.service';
export const userResolver: ResolveFn<User> = (route) => {
const id = route.paramMap.get('id');
return inject(UserService).get(id);
};
bookie/src/app/users/user.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';
@@ -19,17 +19,15 @@ export class UserService {
private http = inject(HttpClient);
private log = inject(ErrorLoggerService);
get(id: string | null): Observable<User> {
const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
return this.http
.get<User>(getUrl)
.pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<User>;
get(id: Signal<string | null> | string | null): HttpResourceRef<User | undefined> {
return httpResource<User>(() => {
const idVal = typeof id === 'function' ? id() : id;
return idVal === null || idVal === undefined ? url : `${url}/${idVal}`;
});
}
list(): Observable<User[]> {
return this.http
.get<User[]>(`${url}/list`)
.pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<User[]>;
list(): HttpResourceRef<User[] | undefined> {
return httpResource<User[]>(() => `${url}/list`);
}
save(user: User): Observable<User> {
bookie/src/app/users/users.routes.ts
-11
View File
@@ -2,9 +2,7 @@ import { Routes } from '@angular/router';
import { authGuard } from '../auth/auth-guard.service';
import { UserDetailComponent } from './user-detail/user-detail.component';
import { userListResolver } from './user-list.resolver';
import { UserListComponent } from './user-list/user-list.component';
import { userResolver } from './user.resolver';
export const routes: Routes = [
{
@@ -14,9 +12,6 @@ export const routes: Routes = [
data: {
permission: 'Users',
},
resolve: {
list: userListResolver,
},
},
{
path: 'new',
@@ -25,16 +20,10 @@ export const routes: Routes = [
data: {
permission: 'Users',
},
resolve: {
item: userResolver,
},
},
{
path: ':id',
component: UserDetailComponent,
canActivate: [authGuard],
resolve: {
item: userResolver,
},
},
];