tanshu/brewman
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Consolidated commit message to v22 signals

Browse Source
This commit is contained in:
tanshu
2026-08-25 14:45:09 +00:00
parent 6403d25d3e
commit df289b20b8
443 changed files with 16058 additions and 17332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
overlord/src/app/user/user-detail/user-detail.component.html
+37 -30
View File
@@ -1,33 +1,40 @@
<h2>User</h2>
<form [formGroup]="form" class="flex flex-col wrapped">
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Name</mat-label>
<input matInput #nameElement formControlName="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'" />
<mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
</mat-form-field>
</div>
<div class="row-container">
<mat-checkbox formControlName="lockedOut" class="flex-auto">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="flex flex-row justify-around content-start items-start">
<mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
</div>
}
</div>
</form>
@if (itemResource.isLoading()) {
<app-skeleton-loader type="card" [count]="1" />
<app-skeleton-loader type="line" [count]="10" />
} @else if (itemResource.error()) {
<app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
} @else {
<form class="flex flex-col wrapped" [formRoot]="form">
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Name</mat-label>
<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 [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 [formField]="form.lockedOut" class="flex-auto">Is Locked Out?</mat-checkbox>
</div>
<mat-divider></mat-divider>
<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" (click)="save()">Save</button>
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
</div>
<div class="row-container">
<button mat-raised-button color="primary" (click)="save()">Save</button>
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
</div>
}
overlord/src/app/user/user-detail/user-detail.component.ts
+50 -67
View File
@@ -1,5 +1,5 @@
import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { Component, inject, input, computed, linkedSignal, afterNextRender } from '@angular/core';
import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialog } from '@angular/material/dialog';
@@ -8,96 +8,80 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Router } from '@angular/router';
import { Router } from '@angular/router';
import { User } from '../../core/user';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.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: [
ReactiveFormsModule,
FormField,
FormRoot,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatCheckboxModule,
MatDividerModule,
MatButtonModule,
SkeletonLoaderComponent,
ErrorStateComponent,
],
})
export class UserDetailComponent implements OnInit, AfterViewInit {
private route = inject(ActivatedRoute);
export class UserDetailComponent {
id = input(null, { transform: (v: string | null | undefined) => v ?? null });
private router = inject(Router);
private snackBar = inject(MatSnackBar);
private dialog = inject(MatDialog);
private ser = inject(UserService);
@ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
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 => ({
name: itemVal.name ?? '',
password: '',
lockedOut: itemVal.lockedOut,
roles: itemVal.roles.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
}),
});
form = createForm(this.formModel);
hide = true;
constructor() {
this.hide = true;
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> }>>([]),
afterNextRender(() => {
this.form().focusBoundControl();
// this.form.name().focusBoundControl();
});
}
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(null);
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() {
setTimeout(() => {
this.nameElement.nativeElement.focus();
}, 0);
}
save() {
if (this.route.snapshot.paramMap.get('id') === 'me') {
if (this.id() === 'me') {
this.ser.updateMe(this.getItem()).subscribe({
next: () => {
this.snackBar.open('', 'Success');
this.router.navigateByUrl('/');
},
error: (error) => {
this.snackBar.open(error, 'Danger');
this.snackBar.open(error as string, 'Danger');
},
});
} else {
@@ -107,20 +91,20 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
this.router.navigateByUrl('/users');
},
error: (error) => {
this.snackBar.open(error, 'Danger');
this.snackBar.open(error as string, 'Danger');
},
});
}
}
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, 'Danger');
this.snackBar.open(error as string, 'Danger');
},
});
}
@@ -139,14 +123,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;
}
}