feat(i18n): bilingual ministry/category/status dropdowns on expense pages

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Chris Chen
2026-05-29 22:27:00 -07:00
parent fba0b63214
commit 9a94e3b09e
3 changed files with 15 additions and 11 deletions
@@ -19,11 +19,11 @@
<label class="flex flex-col gap-1">Ministry <label class="flex flex-col gap-1">Ministry
<kendo-dropdownlist <kendo-dropdownlist
[data]="ministries" [data]="ministries"
textField="name_en" textField="label"
valueField="id" valueField="id"
[valuePrimitive]="true" [valuePrimitive]="true"
[(ngModel)]="form.ministryId" [(ngModel)]="form.ministryId"
[defaultItem]="{ id: null, name_en: '-- Select ministry --' }"> [defaultItem]="{ id: null, label: '-- Select ministry --/請選擇事工' }">
</kendo-dropdownlist> </kendo-dropdownlist>
</label> </label>
@@ -31,12 +31,12 @@
<label class="flex flex-col gap-1">Category Group <label class="flex flex-col gap-1">Category Group
<kendo-dropdownlist <kendo-dropdownlist
[data]="groups" [data]="groups"
textField="name_en" textField="label"
valueField="id" valueField="id"
[valuePrimitive]="true" [valuePrimitive]="true"
[(ngModel)]="form.categoryGroupId" [(ngModel)]="form.categoryGroupId"
(valueChange)="onGroupChange($event)" (valueChange)="onGroupChange($event)"
[defaultItem]="{ id: null, name_en: '-- Select group --' }"> [defaultItem]="{ id: null, label: '-- Select group --/請選擇大類' }">
</kendo-dropdownlist> </kendo-dropdownlist>
</label> </label>
@@ -44,11 +44,11 @@
<label class="flex flex-col gap-1">Sub-Category <label class="flex flex-col gap-1">Sub-Category
<kendo-dropdownlist <kendo-dropdownlist
[data]="subs" [data]="subs"
textField="name_en" textField="label"
valueField="id" valueField="id"
[valuePrimitive]="true" [valuePrimitive]="true"
[(ngModel)]="form.subCategoryId" [(ngModel)]="form.subCategoryId"
[defaultItem]="{ id: null, name_en: '-- Select sub-category --' }" [defaultItem]="{ id: null, label: '-- Select sub-category --/請選擇子項' }"
[disabled]="!form.categoryGroupId"> [disabled]="!form.categoryGroupId">
</kendo-dropdownlist> </kendo-dropdownlist>
</label> </label>
@@ -17,11 +17,11 @@
Ministry Ministry
<kendo-dropdownlist <kendo-dropdownlist
[data]="ministries" [data]="ministries"
textField="name_en" textField="label"
valueField="id" valueField="id"
[valuePrimitive]="true" [valuePrimitive]="true"
[(ngModel)]="filter.ministryId" [(ngModel)]="filter.ministryId"
[defaultItem]="{ id: null, name_en: 'All Ministries' }"> [defaultItem]="{ id: null, label: 'All Ministries/全部事工' }">
</kendo-dropdownlist> </kendo-dropdownlist>
</label> </label>
@@ -29,8 +29,11 @@
Status Status
<kendo-dropdownlist <kendo-dropdownlist
[data]="statuses" [data]="statuses"
textField="label"
valueField="value"
[valuePrimitive]="true"
[(ngModel)]="filter.status" [(ngModel)]="filter.status"
[defaultItem]="null"> [defaultItem]="{ value: null, label: 'All Status/全部狀態' }">
</kendo-dropdownlist> </kendo-dropdownlist>
</label> </label>
@@ -7,10 +7,11 @@ import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs'; import { InputsModule } from '@progress/kendo-angular-inputs';
import { DialogsModule } from '@progress/kendo-angular-dialog'; import { DialogsModule } from '@progress/kendo-angular-dialog';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs'; import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { EXPENSE_STATUS_OPTIONS } from '../../../../shared/i18n/option-lists';
import { ExpenseApiService, ExpenseQuery } from '../../services/expense-api.service'; import { ExpenseApiService, ExpenseQuery } from '../../services/expense-api.service';
import { MinistryApiService } from '../../services/ministry-api.service'; import { MinistryApiService } from '../../services/ministry-api.service';
import { ExpenseFormDialogComponent, ExpenseFormResult } from '../../components/expense-form-dialog/expense-form-dialog.component'; import { ExpenseFormDialogComponent, ExpenseFormResult } from '../../components/expense-form-dialog/expense-form-dialog.component';
import { ExpenseListItemDto, MinistryDto, ExpenseStatus } from '../../models/expense.model'; import { ExpenseListItemDto, MinistryDto } from '../../models/expense.model';
import { switchMap, of } from 'rxjs'; import { switchMap, of } from 'rxjs';
@Component({ @Component({
@@ -31,7 +32,7 @@ export class ExpensesPageComponent implements OnInit {
loading = false; loading = false;
ministries: MinistryDto[] = []; ministries: MinistryDto[] = [];
readonly statuses: ExpenseStatus[] = ['Draft', 'PendingApproval', 'Approved', 'Paid', 'Rejected']; readonly statuses = EXPENSE_STATUS_OPTIONS;
filter: ExpenseQuery = {}; filter: ExpenseQuery = {};