264 lines
8.6 KiB
Markdown
264 lines
8.6 KiB
Markdown
# Task: Frontend Schema v1.6.0 Adaptation
|
|
|
|
**Status:** ✅ Completed
|
|
**Priority:** P1 (High - Breaking Changes)
|
|
**Estimated Effort:** 2-3 days
|
|
**Dependencies:** TASK-BE-015 (Backend Migration)
|
|
**Owner:** Frontend Team
|
|
|
|
---
|
|
|
|
## 📋 Overview
|
|
|
|
อัพเดท Frontend Types, Services และ Forms ให้รองรับ Schema v1.6.0
|
|
|
|
---
|
|
|
|
## 🎯 Objectives
|
|
|
|
- [x] Update TypeScript Interfaces/Types
|
|
- [x] Update Form Components (field names)
|
|
- [x] Update API Service Calls
|
|
- [x] Update List/Table Columns
|
|
- [x] Verify E2E functionality
|
|
|
|
---
|
|
|
|
## 📊 Business Rule Changes Analysis
|
|
|
|
### 1. Correspondence Revisions ⚠️ UI IMPACT
|
|
|
|
| Change | Old Field | New Field | Business Rule |
|
|
| ---------- | --------- | --------- | --------------------------------------- |
|
|
| **Rename** | `title` | `subject` | Form label เปลี่ยนจาก "หัวเรื่อง" เป็น "เรื่อง" |
|
|
| **Add** | - | `body` | เพิ่ม Rich Text Editor สำหรับเนื้อความ |
|
|
| **Add** | - | `remarks` | เพิ่ม Textarea สำหรับหมายเหตุ |
|
|
| **Add** | - | `dueDate` | เพิ่ม Date Picker สำหรับกำหนดส่ง |
|
|
|
|
**UI Impact:**
|
|
- Correspondence Form: เพิ่ม 3 fields ใหม่
|
|
- Correspondence List: เปลี่ยน column header
|
|
- Correspondence Detail: แสดง body และ remarks
|
|
|
|
### 2. Correspondence Recipients ⚠️ RELATION CHANGE
|
|
|
|
| Before | After | Business Rule |
|
|
| ------------------------ | ---------------------- | -------------------------- |
|
|
| Recipients ผูกกับ Revision | Recipients ผูกกับ Master | ผู้รับคงที่ตลอด Revisions ทั้งหมด |
|
|
|
|
**UI Impact:**
|
|
- ย้าย Recipients Selection ออกจาก Revision Form
|
|
- ไปอยู่ใน Master Correspondence Form แทน
|
|
- Recipients จะไม่เปลี่ยนเมื่อสร้าง New Revision
|
|
|
|
### 3. RFA System 🔄 ARCHITECTURE CHANGE
|
|
|
|
| Change | Description | Business Rule |
|
|
| ---------------- | -------------------------- | -------------------------------------------- |
|
|
| **Shared ID** | RFA.id = Correspondence.id | สร้าง Correspondence ก่อน แล้ว RFA ใช้ ID เดียวกัน |
|
|
| **Subject** | `title` → `subject` | เหมือนกับ Correspondence |
|
|
| **Body/Remarks** | เพิ่ม fields ใหม่ | เหมือนกับ Correspondence |
|
|
| **Due Date** | เพิ่ม field | กำหนดวันที่ต้องตอบกลับ |
|
|
|
|
**UI Impact:**
|
|
- RFA Form: เพิ่ม body, remarks, dueDate
|
|
- RFA Creation Flow: อาจต้อง adjust การ submit
|
|
|
|
### 4. RFA Items ⚠️ API CHANGE
|
|
|
|
| Before | After | Impact |
|
|
| ------------------------ | --------------- | ------------------------------------------- |
|
|
| `rfaRevCorrespondenceId` | `rfaRevisionId` | เปลี่ยน property name ใน API request/response |
|
|
|
|
---
|
|
|
|
## 🛠️ Implementation Steps
|
|
|
|
### 1. Update TypeScript Types
|
|
|
|
```typescript
|
|
// lib/types/correspondence.ts
|
|
|
|
// BEFORE
|
|
interface CorrespondenceRevision {
|
|
title: string;
|
|
// ...
|
|
}
|
|
|
|
// AFTER
|
|
interface CorrespondenceRevision {
|
|
subject: string; // renamed from title
|
|
body?: string; // NEW
|
|
remarks?: string; // NEW
|
|
dueDate?: string; // NEW
|
|
schemaVersion?: number; // NEW
|
|
// ...
|
|
}
|
|
|
|
// Move recipients to master level
|
|
interface Correspondence {
|
|
// ...existing fields
|
|
recipients: CorrespondenceRecipient[]; // MOVED from revision
|
|
}
|
|
```
|
|
|
|
```typescript
|
|
// lib/types/rfa.ts
|
|
|
|
// BEFORE
|
|
interface RfaRevision {
|
|
correspondenceId: number;
|
|
title: string;
|
|
// ...
|
|
}
|
|
|
|
// AFTER
|
|
interface RfaRevision {
|
|
// correspondenceId: REMOVED
|
|
subject: string; // renamed from title
|
|
body?: string; // NEW
|
|
remarks?: string; // NEW
|
|
dueDate?: string; // NEW
|
|
// ...
|
|
}
|
|
|
|
// BEFORE
|
|
interface RfaItem {
|
|
rfaRevCorrespondenceId: number;
|
|
// ...
|
|
}
|
|
|
|
// AFTER
|
|
interface RfaItem {
|
|
rfaRevisionId: number; // renamed
|
|
// ...
|
|
}
|
|
```
|
|
|
|
### 2. Update Form Components
|
|
|
|
```typescript
|
|
// app/(dashboard)/correspondences/new/page.tsx
|
|
// app/(dashboard)/correspondences/[id]/edit/page.tsx
|
|
|
|
// CHANGES:
|
|
// 1. Rename form field: title → subject
|
|
// 2. Add new fields: body, remarks, dueDate
|
|
// 3. Move recipients to master section (not revision)
|
|
|
|
<FormField name="subject" label="เรื่อง" required /> {/* was: title */}
|
|
<FormField name="body" label="เนื้อความ" type="richtext" /> {/* NEW */}
|
|
<FormField name="remarks" label="หมายเหตุ" type="textarea" /> {/* NEW */}
|
|
<FormField name="dueDate" label="กำหนดส่ง" type="date" /> {/* NEW */}
|
|
```
|
|
|
|
### 3. Update List Columns
|
|
|
|
```typescript
|
|
// components/correspondence/correspondence-list.tsx
|
|
|
|
const columns = [
|
|
// BEFORE: { header: 'หัวเรื่อง', accessorKey: 'title' }
|
|
// AFTER:
|
|
{ header: 'เรื่อง', accessorKey: 'subject' },
|
|
{ header: 'กำหนดส่ง', accessorKey: 'dueDate' }, // NEW column
|
|
];
|
|
```
|
|
|
|
### 4. Update API Services
|
|
|
|
```typescript
|
|
// lib/services/correspondence.service.ts
|
|
// lib/services/rfa.service.ts
|
|
|
|
// Update DTO property names in API calls
|
|
// Ensure field mapping matches backend changes
|
|
```
|
|
|
|
---
|
|
|
|
## 🗂️ Files to Modify
|
|
|
|
### Types
|
|
|
|
| File | Status | Changes |
|
|
| ----------------------------- | ------ | --------------------------------------- |
|
|
| `lib/types/correspondence.ts` | ✅ | title→subject, add body/remarks/dueDate |
|
|
| `lib/types/rfa.ts` | ✅ | Same + remove correspondenceId |
|
|
|
|
### Forms
|
|
|
|
| File | Status | Changes |
|
|
| ---------------------------------------------------- | ------ | ---------------------- |
|
|
| `app/(dashboard)/correspondences/new/page.tsx` | ✅ | Add new fields, rename |
|
|
| `app/(dashboard)/correspondences/[id]/edit/page.tsx` | ✅ | Same |
|
|
| `app/(dashboard)/rfas/new/page.tsx` | ✅ | Add new fields, rename |
|
|
| `app/(dashboard)/rfas/[id]/edit/page.tsx` | ✅ | Same |
|
|
|
|
### Lists/Tables
|
|
|
|
| File | Status | Changes |
|
|
| --------------------------------------------------- | ------ | ------------- |
|
|
| `components/correspondence/correspondence-list.tsx` | ✅ | Column rename |
|
|
| `components/rfa/rfa-list.tsx` | ✅ | Column rename |
|
|
|
|
### Services
|
|
|
|
| File | Status | Changes |
|
|
| ---------------------------------------- | ------ | ----------- |
|
|
| `lib/services/correspondence.service.ts` | ✅ | DTO mapping |
|
|
| `lib/services/rfa.service.ts` | ✅ | DTO mapping |
|
|
|
|
---
|
|
|
|
## ✅ Verification
|
|
|
|
### Manual Testing
|
|
|
|
1. **Correspondence Flow:**
|
|
- [ ] Create new correspondence → verify subject, body, remarks saved
|
|
- [ ] Edit existing → verify field display correctly
|
|
- [ ] List view shows "เรื่อง" column
|
|
|
|
2. **RFA Flow:**
|
|
- [ ] Create new RFA → verify new fields
|
|
- [ ] Add RFA Items → verify API works with new field names
|
|
- [ ] Due date displays and functions correctly
|
|
|
|
3. **Recipients:**
|
|
- [ ] Recipients assigned at master level
|
|
- [ ] Creating new revision doesn't reset recipients
|
|
|
|
### E2E Tests
|
|
|
|
```bash
|
|
pnpm test:e2e -- --grep "correspondence"
|
|
pnpm test:e2e -- --grep "rfa"
|
|
```
|
|
|
|
---
|
|
|
|
## 📚 Related Documents
|
|
|
|
- [TASK-BE-015](./TASK-BE-015-schema-v160-migration.md) - Backend Migration
|
|
- [Schema v1.6.0](../07-database/lcbp3-v1.6.0-schema.sql)
|
|
- [CHANGELOG v1.6.0](../../CHANGELOG.md)
|
|
|
|
---
|
|
|
|
## 🚨 Risks & Mitigation
|
|
|
|
| Risk | Impact | Mitigation |
|
|
| ---------------------- | ------ | ---------------------------- |
|
|
| Field name mismatch | High | Coordinate with backend team |
|
|
| Form validation errors | Medium | Test all forms thoroughly |
|
|
| List display issues | Low | Update column configs |
|
|
|
|
---
|
|
|
|
## 📌 Notes
|
|
|
|
- ต้องรอ Backend deploy ก่อน จึงจะ test ได้
|
|
- Recipients logic change อาจส่งผลต่อ business flow
|
|
- Consider feature flag for gradual rollout
|