feat(i18n): bilingual language + roles selectors in user dialogs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

APP/src/app/features/members/components/create-user-dialog/create-user-dialog.component.html

@@ -18,6 +18,7 @@
         <kendo-multiselect
           formControlName="roles"
           [data]="roleOptions"
+          textField="label" valueField="value" [valuePrimitive]="true"
           placeholder="Select role(s)">
         </kendo-multiselect>
       </kendo-formfield>
@@ -26,7 +27,7 @@
         <kendo-label text="Language"></kendo-label>
         <kendo-dropdownlist
           formControlName="languagePreference"
-          [data]="langOptions" textField="text" valueField="value"
+          [data]="langOptions" textField="label" valueField="value"
           [valuePrimitive]="true">
         </kendo-dropdownlist>
       </kendo-formfield>

APP/src/app/features/members/components/create-user-dialog/create-user-dialog.component.ts

@@ -8,7 +8,8 @@ import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import { MemberListItemDto, memberDisplayName } from '../../models/member.model';
-import { CreateUserRequest, CreateUserResult, ALL_ROLES } from '../../../users/models/user.model';
+import { CreateUserRequest, CreateUserResult } from '../../../users/models/user.model';
+import { LANGUAGE_OPTIONS, ROLE_OPTIONS } from '../../../../shared/i18n/option-lists';
 import { UserApiService } from '../../../users/services/user-api.service';
 
 @Component({
@@ -32,11 +33,8 @@ export class CreateUserDialogComponent implements OnInit {
   isLoading = false;
   errorMessage = '';
 
-  readonly roleOptions: string[] = [...ALL_ROLES];
+  readonly roleOptions = ROLE_OPTIONS;
-  readonly langOptions = [
+  readonly langOptions = LANGUAGE_OPTIONS;
-    { text: 'English', value: 'en' },
-    { text: '中文',     value: 'zh-TW' },
-  ];
 
   get memberName(): string { return memberDisplayName(this.member); }
 

APP/src/app/features/users/components/create-user-dialog/create-user-dialog.component.html

@@ -12,6 +12,7 @@
     <kendo-formfield>
       <kendo-label text="Roles *"></kendo-label>
       <kendo-multiselect formControlName="roles" [data]="roleOptions"
+        textField="label" valueField="value" [valuePrimitive]="true"
         placeholder="Select roles"></kendo-multiselect>
       <kendo-formerror>At least one role is required.</kendo-formerror>
     </kendo-formfield>
@@ -19,7 +20,7 @@
     <kendo-formfield>
       <kendo-label text="Language"></kendo-label>
       <kendo-dropdownlist formControlName="languagePreference"
-        [data]="langOptions" textField="text" valueField="value"
+        [data]="langOptions" textField="label" valueField="value"
         [valuePrimitive]="true">
       </kendo-dropdownlist>
     </kendo-formfield>

APP/src/app/features/users/components/create-user-dialog/create-user-dialog.component.ts

@@ -6,7 +6,8 @@ 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 { CreateUserRequest, ALL_ROLES } from '../../models/user.model';
+import { CreateUserRequest } from '../../models/user.model';
+import { LANGUAGE_OPTIONS, ROLE_OPTIONS } from '../../../../shared/i18n/option-lists';
 
 @Component({
   selector: 'app-create-user-dialog',
@@ -22,11 +23,8 @@ export class CreateUserDialogComponent {
   @Output() cancelled = new EventEmitter<void>();
 
   form: FormGroup;
-  readonly roleOptions: string[] = [...ALL_ROLES];
+  readonly roleOptions = ROLE_OPTIONS;
-  readonly langOptions = [
+  readonly langOptions = LANGUAGE_OPTIONS;
-    { text: 'English', value: 'en' },
-    { text: '中文',     value: 'zh-TW' },
-  ];
 
   constructor(private fb: FormBuilder) {
     this.form = this.fb.group({

APP/src/app/features/users/components/edit-user-dialog/edit-user-dialog.component.html

@@ -12,13 +12,14 @@
     <kendo-formfield>
       <kendo-label text="Roles *"></kendo-label>
       <kendo-multiselect formControlName="roles" [data]="roleOptions"
+        textField="label" valueField="value" [valuePrimitive]="true"
         placeholder="Select roles"></kendo-multiselect>
     </kendo-formfield>
 
     <kendo-formfield>
       <kendo-label text="Language"></kendo-label>
       <kendo-dropdownlist formControlName="languagePreference"
-        [data]="langOptions" textField="text" valueField="value"
+        [data]="langOptions" textField="label" valueField="value"
         [valuePrimitive]="true">
       </kendo-dropdownlist>
     </kendo-formfield>

APP/src/app/features/users/components/edit-user-dialog/edit-user-dialog.component.ts

@@ -6,7 +6,8 @@ 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';
+import { UserDto, UpdateUserRequest } from '../../models/user.model';
+import { LANGUAGE_OPTIONS, ROLE_OPTIONS } from '../../../../shared/i18n/option-lists';
 
 @Component({
   selector: 'app-edit-user-dialog',
@@ -23,11 +24,8 @@ export class EditUserDialogComponent implements OnInit {
   @Output() cancelled = new EventEmitter<void>();
 
   form!: FormGroup;
-  readonly roleOptions: string[] = [...ALL_ROLES];
+  readonly roleOptions = ROLE_OPTIONS;
-  readonly langOptions = [
+  readonly langOptions = LANGUAGE_OPTIONS;
-    { text: 'English', value: 'en' },
-    { text: '中文',     value: 'zh-TW' },
-  ];
 
   constructor(private fb: FormBuilder) {}