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/roles/role-detail/role-detail.component.html
+17 -12
View File
@@ -1,27 +1,32 @@
<h2>Role</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="two-col">
<div formArrayName="permissions" class="col">
<div class="col">
<h3>Permissions</h3>
@for (p of item.permissions; track p; let i = $index) {
<div class="row-container" [formGroupName]="i">
<mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
@for (p of form.permissions; track p; let i = $index) {
<div class="row-container">
<mat-checkbox
[formField]="p.enabled"
[disabled]="impliedPermissions().has(p.id().value())"
class="flex-auto"
>{{ p.name().value() }}</mat-checkbox
>
</div>
}
</div>
<div formArrayName="includedRoles" class="col">
<div class="col">
<h3>Includes Roles</h3>
@for (r of item.includedRoles; track r; let i = $index) {
<div class="row-container" [formGroupName]="i">
<mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
@for (r of form.includedRoles; track r; let i = $index) {
<div class="row-container">
<mat-checkbox [formField]="r.enabled" class="flex-auto">{{ r.name().value() }}</mat-checkbox>
</div>
}
</div>
@@ -29,6 +34,6 @@
</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/roles/role-detail/role-detail.component.ts
+53 -125
View File
@@ -1,5 +1,5 @@
import { AfterViewInit, Component, ElementRef, OnDestroy, 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';
@@ -7,89 +7,58 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject, takeUntil } from 'rxjs';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { Role } from '../role';
import { RoleService } from '../role.service';
export interface RoleDetailFormData {
name: string;
permissions: { id: string; name: string; enabled: boolean }[];
includedRoles: { id: string; name: string; enabled: boolean }[];
}
@Component({
selector: 'app-role-detail',
templateUrl: './role-detail.component.html',
styleUrls: ['./role-detail.component.css'],
imports: [MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
imports: [MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, FormField],
})
export class RoleDetailComponent implements OnInit, AfterViewInit, OnDestroy {
export class RoleDetailComponent 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(RoleService);
id = input(null, { transform: (v: string | null | undefined) => v ?? null });
private destroyed$ = new Subject<void>();
itemResource = this.ser.get(this.id);
@ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
form: FormGroup<{
name: FormControl<string>;
permissions: FormArray<
FormGroup<{
permission: FormControl<boolean>;
}>
>;
includedRoles: FormArray<
FormGroup<{
role: FormControl<boolean>;
}>
>;
}>;
item = computed(() => this.itemResource.value() ?? new Role());
formModel = linkedSignal({
source: this.item,
computation: (itemVal): RoleDetailFormData => {
return {
name: itemVal.name,
permissions: itemVal.permissions.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
includedRoles: itemVal.includedRoles.map((x) => ({ id: x.id ?? '', name: x.name, enabled: x.enabled })),
};
},
});
item: Role = new Role();
form = form(this.formModel);
constructor() {
// Create form
this.form = new FormGroup({
name: new FormControl<string>('', { nonNullable: true }),
permissions: new FormArray<FormGroup<{ permission: FormControl<boolean> }>>([]),
includedRoles: new FormArray<FormGroup<{ role: FormControl<boolean> }>>([]),
impliedPermissions = computed(() => {
const implied = new Set<string>();
const includedRoles = this.formModel().includedRoles;
this.item().includedRoles.forEach((roleOpt, idx) => {
if (includedRoles[idx]?.enabled) {
(roleOpt.permissionIds || []).forEach((pid) => implied.add(pid));
}
});
}
ngOnInit() {
this.route.data.subscribe((value) => {
const data = value as { item: Role };
this.item = data.item;
this.form.controls.name.setValue(this.item.name);
this.form.controls.permissions.clear();
this.item.permissions.forEach((x) =>
this.form.controls.permissions.push(
new FormGroup({
permission: new FormControl<boolean>(x.enabled, { nonNullable: true }),
}),
),
);
this.form.controls.includedRoles.clear();
this.item.includedRoles.forEach((x) =>
this.form.controls.includedRoles.push(
new FormGroup({
role: new FormControl<boolean>(x.enabled, { nonNullable: true }),
}),
),
);
// Rebind listeners (important when route data changes)
this.destroyed$.next();
// When included roles change, recompute locks
this.form.controls.includedRoles.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(() => {
this.applyIncludedRolePermissionLocks();
});
// Apply initial locks immediately
this.applyIncludedRolePermissionLocks();
});
}
return implied;
});
ngAfterViewInit() {
setTimeout(() => {
@@ -99,63 +68,26 @@ export class RoleDetailComponent implements OnInit, AfterViewInit, OnDestroy {
}, 0);
}
ngOnDestroy(): void {
this.destroyed$.next();
this.destroyed$.complete();
}
private applyIncludedRolePermissionLocks(): void {
// 1) collect all permission IDs implied by enabled included roles
const implied = new Set<string>();
this.item.includedRoles.forEach((roleOpt, idx) => {
const checked = this.form.controls.includedRoles.at(idx).controls.role.value;
if (checked) {
(roleOpt.permissionIds || []).forEach((pid) => implied.add(pid));
}
});
// 2) apply to permission checkboxes
this.item.permissions.forEach((perm, idx) => {
const ctrl = this.form.controls.permissions.at(idx).controls.permission;
const isImplied = implied.has(perm.id as string);
const isDirect = perm.enabled === true; // from backend: direct assignment
if (isImplied) {
// must be checked + disabled
ctrl.setValue(true, { emitEvent: false });
ctrl.disable({ emitEvent: false });
} else {
// not implied -> enable checkbox
ctrl.enable({ emitEvent: false });
// restore to direct-enabled state (so user sees what is explicitly on the role)
ctrl.setValue(isDirect, { emitEvent: false });
}
});
}
save() {
this.ser.saveOrUpdate(this.getItem()).subscribe({
next: () => {
this.snackBar.open('', 'Success');
this.router.navigateByUrl('/roles');
},
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('/roles');
},
error: (error) => {
this.snackBar.open(error, 'Error');
error: (error: unknown) => {
this.snackBar.open(error as string, 'Error');
},
});
}
@@ -174,24 +106,20 @@ export class RoleDetailComponent implements OnInit, AfterViewInit, OnDestroy {
}
getItem(): Role {
const formModel = this.form.value;
this.item.name = formModel.name ?? '';
const permArray = this.form.controls.permissions;
this.item.permissions.forEach((p, index) => {
// If disabled, keep p.enabled as it was originally direct (don’t accidentally mark direct)
if (permArray.at(index).controls.permission.disabled) {
// leave p.enabled unchanged
return;
}
p.enabled = permArray.at(index).controls.permission.value;
const formModel = this.formModel();
const implied = this.impliedPermissions();
const currentItem = this.item();
return new Role({
...currentItem,
name: formModel.name ?? '',
permissions: currentItem.permissions.map((p, index) => ({
...p,
enabled: implied.has(p.id as string) ? p.enabled : (formModel.permissions[index]?.enabled ?? false),
})),
includedRoles: currentItem.includedRoles.map((r, index) => ({
...r,
enabled: formModel.includedRoles[index]?.enabled ?? false,
})),
});
// this.item.permissions.forEach((item, index) => {
// item.enabled = permArray.controls[index].value.permission ?? false;
// });
const includeArray = this.form.controls.includedRoles;
this.item.includedRoles.forEach((r, index) => {
r.enabled = includeArray.controls[index]?.value.role ?? false;
});
return this.item;
}
}