feat: add EditUserDialogComponent

2026-05-27 14:22:13 -07:00
parent 3a5b5721e4
commit 6c3292861a
2 changed files with 88 additions and 0 deletions
@@ -0,0 +1,37 @@
+<kendo-dialog title="Edit User" (close)="onCancel()" [minWidth]="460" [width]="500">
+  <form [formGroup]="form" class="k-form k-form-vertical k-p-2">
+
+    <kendo-formfield>
+      <kendo-label text="Email *"></kendo-label>
+      <kendo-textbox formControlName="email"></kendo-textbox>
+      <kendo-formerror *ngIf="form.get('email')?.errors?.['required']">Required.</kendo-formerror>
+      <kendo-formerror *ngIf="form.get('email')?.errors?.['email']">Invalid email.</kendo-formerror>
+    </kendo-formfield>
+
+    <kendo-formfield class="k-mt-3">
+      <kendo-label text="Roles *"></kendo-label>
+      <kendo-multiselect formControlName="roles" [data]="roleOptions"
+        placeholder="Select roles"></kendo-multiselect>
+    </kendo-formfield>
+
+    <kendo-formfield class="k-mt-3">
+      <kendo-label text="Language"></kendo-label>
+      <kendo-dropdownlist formControlName="languagePreference"
+        [data]="langOptions" textField="text" valueField="value">
+      </kendo-dropdownlist>
+    </kendo-formfield>
+
+    <div class="k-d-flex k-align-items-center k-gap-2 k-mt-4">
+      <input kendoCheckBox type="checkbox" formControlName="isActive" id="isActiveCheck" />
+      <kendo-label for="isActiveCheck" text="Account Active"></kendo-label>
+    </div>
+
+  </form>
+
+  <kendo-dialog-actions>
+    <button kendoButton (click)="onCancel()">Cancel</button>
+    <button kendoButton themeColor="primary" (click)="onSubmit()" [disabled]="form.invalid">
+      Save Changes
+    </button>
+  </kendo-dialog-actions>
+</kendo-dialog>
@@ -0,0 +1,51 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { DialogsModule } from '@progress/kendo-angular-dialog';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { LabelModule } from '@progress/kendo-angular-label';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { UserDto, UpdateUserRequest, ALL_ROLES } from '../../models/user.model';
+
+@Component({
+  selector: 'app-edit-user-dialog',
+  standalone: true,
+  imports: [
+    CommonModule, ReactiveFormsModule, DialogsModule,
+    InputsModule, LabelModule, DropDownsModule, ButtonsModule
+  ],
+  templateUrl: './edit-user-dialog.component.html',
+})
+export class EditUserDialogComponent implements OnInit {
+  @Input({ required: true }) user!: UserDto;
+  @Output() saved     = new EventEmitter<UpdateUserRequest>();
+  @Output() cancelled = new EventEmitter<void>();
+
+  form!: FormGroup;
+  readonly roleOptions: string[] = [...ALL_ROLES];
+  readonly langOptions = [
+    { text: 'English', value: 'en' },
+    { text: '中文',     value: 'zh-TW' },
+  ];
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.form = this.fb.group({
+      email:              [this.user.email, [Validators.required, Validators.email]],
+      roles:              [this.user.roles, Validators.required],
+      isActive:           [this.user.isActive],
+      languagePreference: [this.user.languagePreference],
+    });
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) { this.form.markAllAsTouched(); return; }
+    this.saved.emit(this.form.value as UpdateUserRequest);
+  }
+
+  onCancel(): void {
+    this.cancelled.emit();
+  }
+}