feat(i18n): bilingual gender/status dropdowns on member form + members page

APP/src/app/features/members/components/member-form-dialog/member-form-dialog.component.html

@@ -38,9 +38,9 @@
               <kendo-dropdownlist
                 formControlName="gender"
                 [data]="genderOptions"
-                textField="text" valueField="value"
+                textField="label" valueField="value"
                 [valuePrimitive]="true"
-                [defaultItem]="{ text: '-- Select --', value: null }">
+                [defaultItem]="{ label: '-- Select --/請選擇', value: null }">
               </kendo-dropdownlist>
             </kendo-formfield>
 
@@ -51,7 +51,8 @@
 
             <kendo-formfield>
               <kendo-label text="Status *"></kendo-label>
-              <kendo-dropdownlist formControlName="status" [data]="statusOptions">
+              <kendo-dropdownlist formControlName="status" [data]="statusOptions"
+                textField="label" valueField="value" [valuePrimitive]="true">
               </kendo-dropdownlist>
             </kendo-formfield>
 

APP/src/app/features/members/components/member-form-dialog/member-form-dialog.component.ts

@@ -9,6 +9,7 @@ import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import { LayoutModule } from '@progress/kendo-angular-layout';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { MemberDto, CreateMemberRequest } from '../../models/member.model';
+import { GENDER_OPTIONS, MEMBER_STATUS_OPTIONS } from '../../../../shared/i18n/option-lists';
 
 @Component({
   selector: 'app-member-form-dialog',
@@ -27,12 +28,8 @@ export class MemberFormDialogComponent implements OnInit {
   form!: FormGroup;
   isEditMode = false;
 
-  readonly statusOptions = ['Member', 'Visitor', 'Inactive', 'Former'];
+  readonly statusOptions = MEMBER_STATUS_OPTIONS;
-  readonly genderOptions = [
+  readonly genderOptions = GENDER_OPTIONS;
-    { text: 'Male',   value: 'M' },
-    { text: 'Female', value: 'F' },
-    { text: 'Other',  value: 'Other' },
-  ];
   readonly langOptions = [
     { text: 'English', value: 'en' },
     { text: '中文',     value: 'zh-TW' },

APP/src/app/features/members/pages/members-page/members-page.component.html

@@ -17,7 +17,7 @@
     <kendo-dropdownlist
       [(ngModel)]="filterStatus"
       [data]="statusOptions"
-      [defaultItem]="'All Status'"
+      textField="label" valueField="value" [valuePrimitive]="true"
       (valueChange)="onSearch()"
       style="width: 160px">
     </kendo-dropdownlist>

APP/src/app/features/members/pages/members-page/members-page.component.ts

@@ -13,6 +13,7 @@ import {
   MemberListItemDto, MemberDto, CreateMemberRequest,
   PagedResult, memberDisplayName
 } from '../../models/member.model';
+import { MEMBER_STATUS_OPTIONS } from '../../../../shared/i18n/option-lists';
 
 @Component({
   selector: 'app-members-page',
@@ -36,7 +37,10 @@ export class MembersPageComponent implements OnInit {
   // Filters
   searchText = '';
   filterStatus = '';
-  readonly statusOptions = ['', 'Member', 'Visitor', 'Inactive', 'Former'];
+  readonly statusOptions = [
+    { value: '', label: 'All Status/全部狀態' },
+    ...MEMBER_STATUS_OPTIONS,
+  ];
 
   // Dialogs
   showMemberDialog = false;