WIP

2026-06-24 18:45:22 -07:00
parent e908e35530
commit 9dbb1d38d8
14 changed files with 312 additions and 0 deletions
@@ -0,0 +1,22 @@
+// ── Ministries ────────────────────────────────────────────────────
+export interface MinistryDto {
+  id: number;
+  name_en: string;
+  name_zh: string | null;
+  description_en: string | null;
+  description_zh: string | null;
+  isActive: boolean;
+  sortOrder: number;
+  /** Display-only bilingual label, computed in the API service. */
+  label?: string;
+}
+export interface CreateMinistryRequest {
+  name_en: string;
+  name_zh: string | null;
+  description_en: string | null;
+  description_zh: string | null;
+  sortOrder: number;
+}
+export interface UpdateMinistryRequest extends CreateMinistryRequest {
+  isActive: boolean;
+}
@@ -0,0 +1,55 @@
+<div class="page">
+  <ng-template appPageHeaderActions>
+    <label class="inactive-toggle">
+      <input type="checkbox" [(ngModel)]="includeInactive" (change)="load()" /> Show inactive
+    </label>
+    <button kendoButton themeColor="primary" (click)="openAdd()">+ Add</button>
+  </ng-template>
+
+  <kendo-grid [data]="data" [loading]="isLoading">
+    <kendo-grid-column field="sortOrder" title="#" [width]="60"></kendo-grid-column>
+    <kendo-grid-column field="name_en" title="Name (EN)"></kendo-grid-column>
+    <kendo-grid-column field="name_zh" title="名稱 (中)"></kendo-grid-column>
+    <kendo-grid-column field="isActive" title="Active" [width]="90">
+      <ng-template kendoGridCellTemplate let-m>{{ m.isActive ? 'Yes' : 'No' }}</ng-template>
+    </kendo-grid-column>
+    <kendo-grid-column title="Actions" [width]="160">
+      <ng-template kendoGridCellTemplate let-m>
+        <button kendoButton fillMode="flat" (click)="openEdit(m)">Edit</button>
+        <button kendoButton fillMode="flat" *ngIf="m.isActive" (click)="deactivate(m)">Deactivate</button>
+      </ng-template>
+    </kendo-grid-column>
+  </kendo-grid>
+
+  <kendo-dialog *ngIf="showDialog" [title]="editing ? 'Edit Ministry' : 'Add Ministry'" (close)="showDialog=false" [width]="480" [maxWidth]="'95vw'">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
+      <label class="flex flex-col gap-1">
+        Name (EN) *
+        <kendo-textbox [(ngModel)]="form.name_en"></kendo-textbox>
+      </label>
+      <label class="flex flex-col gap-1">
+        名稱 (中)
+        <kendo-textbox [(ngModel)]="form.name_zh"></kendo-textbox>
+      </label>
+      <label class="flex flex-col gap-1">
+        Description (EN)
+        <kendo-textbox [(ngModel)]="form.description_en"></kendo-textbox>
+      </label>
+      <label class="flex flex-col gap-1">
+        說明 (中)
+        <kendo-textbox [(ngModel)]="form.description_zh"></kendo-textbox>
+      </label>
+      <label class="flex flex-col gap-1">
+        Sort order
+        <kendo-numerictextbox [(ngModel)]="form.sortOrder" [format]="'n0'" [decimals]="0" [min]="0"></kendo-numerictextbox>
+      </label>
+      <label *ngIf="editing" class="flex items-center gap-2 md:col-span-2">
+        <input type="checkbox" [(ngModel)]="form.isActive" /> Active
+      </label>
+    </div>
+    <kendo-dialog-actions>
+      <button kendoButton (click)="showDialog=false">Cancel</button>
+      <button kendoButton themeColor="primary" [disabled]="!form.name_en" (click)="save()">Save</button>
+    </kendo-dialog-actions>
+  </kendo-dialog>
+</div>
@@ -0,0 +1,12 @@
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.inactive-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+}
@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { GridModule } from '@progress/kendo-angular-grid';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { DialogsModule } from '@progress/kendo-angular-dialog';
+import { MinistryApiService } from '../../services/ministry-api.service';
+import {
+  MinistryDto, CreateMinistryRequest, UpdateMinistryRequest,
+} from '../../models/ministry.model';
+import { PageHeaderActionsDirective } from '../../../../shared/directives/page-header-actions.directive';
+
+@Component({
+  selector: 'app-ministries-page',
+  standalone: true,
+  imports: [CommonModule, FormsModule, GridModule, InputsModule, ButtonsModule, DialogsModule, PageHeaderActionsDirective],
+  templateUrl: './ministries-page.component.html',
+  styleUrls: ['./ministries-page.component.scss'],
+})
+export class MinistriesPageComponent implements OnInit {
+  data: MinistryDto[] = [];
+  isLoading = false;
+  includeInactive = false;
+
+  showDialog = false;
+  editing: MinistryDto | null = null;
+  form: UpdateMinistryRequest = this.blankForm();
+
+  constructor(private api: MinistryApiService) {}
+
+  ngOnInit(): void { this.load(); }
+
+  load(): void {
+    this.isLoading = true;
+    this.api.getAll(this.includeInactive).subscribe({
+      next: rows => { this.data = rows; this.isLoading = false; },
+      error: () => { this.isLoading = false; },
+    });
+  }
+
+  openAdd(): void { this.editing = null; this.form = this.blankForm(); this.showDialog = true; }
+
+  openEdit(m: MinistryDto): void {
+    this.editing = m;
+    this.form = {
+      name_en: m.name_en, name_zh: m.name_zh,
+      description_en: m.description_en, description_zh: m.description_zh,
+      isActive: m.isActive, sortOrder: m.sortOrder,
+    };
+    this.showDialog = true;
+  }
+
+  save(): void {
+    if (this.editing) {
+      this.api.update(this.editing.id, this.form).subscribe(() => { this.showDialog = false; this.load(); });
+    } else {
+      const create: CreateMinistryRequest = {
+        name_en: this.form.name_en, name_zh: this.form.name_zh,
+        description_en: this.form.description_en, description_zh: this.form.description_zh,
+        sortOrder: this.form.sortOrder,
+      };
+      this.api.create(create).subscribe(() => { this.showDialog = false; this.load(); });
+    }
+  }
+
+  deactivate(m: MinistryDto): void {
+    if (!confirm(`Deactivate "${m.name_en}"?`)) return;
+    this.api.deactivate(m.id).subscribe(() => this.load());
+  }
+
+  private blankForm(): UpdateMinistryRequest {
+    return { name_en: '', name_zh: null, description_en: null, description_zh: null, isActive: true, sortOrder: 0 };
+  }
+}
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable, map } from 'rxjs';
+import { bilingual } from '../../../shared/i18n/bilingual';
+import { ApiConfigService } from '../../../core/services/api-config.service';
+import {
+  MinistryDto, CreateMinistryRequest, UpdateMinistryRequest,
+} from '../models/ministry.model';
+
+@Injectable({ providedIn: 'root' })
+export class MinistryApiService {
+  private readonly endpoint: string;
+  constructor(private http: HttpClient, apiConfig: ApiConfigService) {
+    this.endpoint = apiConfig.getApiUrl('ministries');
+  }
+
+  getAll(includeInactive = false): Observable<MinistryDto[]> {
+    const params = new HttpParams().set('includeInactive', includeInactive);
+    return this.http.get<MinistryDto[]>(this.endpoint, { params }).pipe(
+      map(list => list.map(m => ({ ...m, label: bilingual(m.name_en, m.name_zh) }))),
+    );
+  }
+  create(request: CreateMinistryRequest): Observable<{ id: number }> {
+    return this.http.post<{ id: number }>(this.endpoint, request);
+  }
+  update(id: number, request: UpdateMinistryRequest): Observable<void> {
+    return this.http.put<void>(`${this.endpoint}/${id}`, request);
+  }
+  deactivate(id: number): Observable<void> {
+    return this.http.delete<void>(`${this.endpoint}/${id}`);
+  }
+}