KB-21F6
table-module-complete-report.md
3 min read Revision 1
Table Module Complete Report
Date: 2026-03-05 PR: #442 — feat: DirectusTable complete + all pages migrated to Nuxt UI Merge Commit: abf7ebd Net Change: -402 lines (432 added, 834 removed)
Assembly Gate
- UTable → Wrapped in DirectusTable.vue
- UTooltip → Insert mark tooltips
- UPopover → Column descriptions
- UBadge → Status badges, proposals
- UCheckbox → Diagram tab step checkboxes
- UPagination → Table pagination
- UModal → Proposal + WCR popups
- UInput → Search fields
- USelect/USelectMenu → Filters
- UTextarea → Proposal description
- UButton → Refresh, submit, pagination fallback
Phase 1 — DirectusTable Improvements
- raw
<input>→ UInput (search) - raw
<select>→ USelect (filters) - custom div → UPopover (column descriptions)
- title attr → UTooltip (insert marks)
- opacity 0 → 0.3 (always-visible marks)
- custom buttons → UPagination + UButton
- custom span → UBadge (proposals)
Phase 2 — Page Migrations
| Page | Before | After | Lines saved |
|---|---|---|---|
| ProposalPopup.vue | Custom absolute div | UModal + USelect + UTextarea | ~50 |
| InlineWcrPopup.vue | Custom absolute div | UModal + USelect + UTextarea | ~40 |
| modules/index.vue | Card layout | DirectusTable | ~50 |
| current-tasks/index.vue | Custom 217-line table | DirectusTable | ~150 |
| approval-desk/index.vue | Custom 333-line table | UTable + USelectMenu + UCheckbox | ~90 |
| ProcessRegistryView.vue | Custom 389-line table | UTable + UInput + USelect | ~70 |
| [id].vue diagram | raw checkbox | UCheckbox | ~2 |
Note: Diagram tab compact table keeps minimal custom <table> — UTable v2 lacks per-row class API for done/current/pending row coloring.
CI Results
- build: PASS (2m17s, 2m28s)
- Quality Gate: PASS (31s, 29s)
- E2E Smoke Test: PASS (2m16s, 2m22s)
- Deploy Firebase Hosting: PASS (1m51s)
- Pass Gate: PASS
- guard: PASS
- check-critical-files: PASS
Production Verification
| Check | Result |
|---|---|
| V1: /knowledge/workflows → 200 | PASS |
| V2: /knowledge/workflows/1?tab=matrix → 200 | PASS |
| V3: /knowledge/workflows/1?tab=diagram → 200 | PASS |
| V4: /knowledge/workflows/1?tab=wcr → 200 | PASS |
| V5: /knowledge/modules → 200 | PASS |
| V6: Workflows list renders data | PASS — Quy trinh duyệt công việc |
| V7: Matrix tab has marks CSS | PASS — dt-row-mark, dt-col-mark present |
| V8: Modules page loads | PASS |
| V9: test-all-connections 20/20 | PASS |