[CLAUDE] FE-Admin: PE Thao tác 2-panel workspace + Panel 1 read-only picker + Section 5 disabled
Chunk 1/3 — restructure leaf "Thao tác" (Pe_*_Create) từ page tạo header riêng
sang workspace 2-panel mirror pattern HĐ Thầu phụ ContractCreatePage:
Panel 1 (320px): list pure picker (KHÔNG inline edit/delete per Q1 user) +
sticky "+ Thêm mới" bottom button.
Panel 2 (1fr): empty state | mode=new <PeHeaderForm> | <PeDetailTabs
mode="workspace"> (5 section, Section 5 Ý kiến 4PB DISABLED
per Q5 user — nhập ở leaf "Duyệt").
Workflow Panel + Approvals + History KHÔNG render trong workspace (Q1) — chỉ
hiện ở leaf "Danh sách" + "Duyệt" giữ nguyên 3-panel hiện tại (Q3).
URL: /purchase-evaluations/workspace?type={1|2}[&id=...][&mode=new][&q=][&phase=]
Menu resolver Pe_*_Create: /purchase-evaluations/new?type=N → /workspace?type=N.
Route mới /workspace; route /new giữ tồn tại cho deep-link "Sửa header" button.
Files:
+ fe-admin/src/components/pe/PeListPanel.tsx (~180 LOC) — pure picker reuseable
+ fe-admin/src/components/pe/PeHeaderForm.tsx (~210 LOC) — extract header form
+ fe-admin/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx (~120 LOC)
~ fe-admin/src/components/pe/PeDetailTabs.tsx — add mode prop + Section 5 hint
~ fe-admin/src/components/Layout.tsx — resolver Pe_*_Create map workspace
~ fe-admin/src/App.tsx — route /purchase-evaluations/workspace
Verify: npm run build pass · dotnet test 83 vẫn pass (54 Domain + 29 Infra).
fe-user mirror = Chunk 2.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
pqhuy1987
140
fe-admin/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx
Normal file
140
fe-admin/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
// Workspace 2-panel cho leaf "Thao tác" Pe_*_Create (Type A=DuyetNcc / B=
|
||||
// DuyetNccPhuongAn). Pattern mirror HĐ Thầu phụ ContractCreatePage:
|
||||
// Panel 1 (320px): list pure picker (read-only, không edit/delete) + sticky
|
||||
// "+ Thêm mới" bottom button (Q1 user 2026-05-07).
|
||||
// Panel 2 (1fr): empty state · mode=new <PeHeaderForm> · else
|
||||
// <PeDetailTabs mode="workspace"> (5 section + Section 5
|
||||
// Ý kiến 4PB DISABLED — Q5: nhập ở leaf "Duyệt").
|
||||
//
|
||||
// URL: /purchase-evaluations/workspace?type={1|2}[&id=...][&mode=new][&q=][&phase=]
|
||||
// Workflow Panel + Approvals + History KHÔNG render ở workspace (Q1 — chỉ
|
||||
// hiện ở leaf Danh sách + Duyệt vẫn 3-panel).
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import { toast } from 'sonner'
|
||||
import { ClipboardCheck } from 'lucide-react'
|
||||
import { EmptyState } from '@/components/EmptyState'
|
||||
import { PeDetailTabs } from '@/components/pe/PeDetailTabs'
|
||||
import { PeListPanel } from '@/components/pe/PeListPanel'
|
||||
import { PeHeaderForm } from '@/components/pe/PeHeaderForm'
|
||||
import { api } from '@/lib/api'
|
||||
import { getErrorMessage } from '@/lib/apiError'
|
||||
import {
|
||||
PurchaseEvaluationType,
|
||||
PurchaseEvaluationTypeLabel,
|
||||
type PeDetailBundle,
|
||||
} from '@/types/purchaseEvaluation'
|
||||
|
||||
export function PurchaseEvaluationWorkspacePage() {
|
||||
const navigate = useNavigate()
|
||||
const qc = useQueryClient()
|
||||
const [sp, setSp] = useSearchParams()
|
||||
const typeFilter = sp.get('type') ? Number(sp.get('type')) : PurchaseEvaluationType.DuyetNcc
|
||||
const search = sp.get('q') ?? ''
|
||||
const phase = sp.get('phase') ?? ''
|
||||
const selectedId = sp.get('id')
|
||||
const mode = sp.get('mode') // 'new' | null
|
||||
|
||||
const detail = useQuery({
|
||||
queryKey: ['pe-detail', selectedId],
|
||||
queryFn: async () => (await api.get<PeDetailBundle>(`/purchase-evaluations/${selectedId}`)).data,
|
||||
enabled: !!selectedId,
|
||||
})
|
||||
|
||||
const del = useMutation({
|
||||
mutationFn: async (id: string) => api.delete(`/purchase-evaluations/${id}`),
|
||||
onSuccess: () => {
|
||||
toast.success('Đã xóa phiếu.')
|
||||
setParams({ id: null })
|
||||
qc.invalidateQueries({ queryKey: ['pe-list'] })
|
||||
},
|
||||
onError: e => toast.error(getErrorMessage(e)),
|
||||
})
|
||||
|
||||
function setParams(updates: Record<string, string | null>) {
|
||||
const next = new URLSearchParams(sp)
|
||||
for (const [k, v] of Object.entries(updates)) {
|
||||
if (v == null || v === '') next.delete(k)
|
||||
else next.set(k, v)
|
||||
}
|
||||
// Search input gõ liên tục → replace (không spam history); pick/mode → push
|
||||
const replace = Object.keys(updates).length === 1 && updates.q !== undefined
|
||||
setSp(next, { replace })
|
||||
}
|
||||
|
||||
const headerTitle = `${PurchaseEvaluationTypeLabel[typeFilter]} — Thao tác`
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-4rem)] flex-col">
|
||||
<header className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-slate-200 bg-white px-6 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardCheck className="h-5 w-5 text-slate-500" />
|
||||
<h1 className="text-base font-semibold tracking-tight text-slate-900">{headerTitle}</h1>
|
||||
</div>
|
||||
<div className="text-[12px] text-slate-500">
|
||||
Workspace 2-panel — Workflow + Duyệt ở menu “Duyệt”.
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[320px_1fr]">
|
||||
{/* Panel 1: List pure picker + sticky create */}
|
||||
<PeListPanel
|
||||
typeFilter={typeFilter}
|
||||
selectedId={selectedId}
|
||||
search={search}
|
||||
phase={phase}
|
||||
onSelect={id => setParams({ id, mode: null })}
|
||||
onSearchChange={q => setParams({ q })}
|
||||
onPhaseChange={p => setParams({ phase: p })}
|
||||
showCreateButton
|
||||
onCreate={() => setParams({ mode: 'new', id: null })}
|
||||
/>
|
||||
|
||||
{/* Panel 2: Empty | Header form | Detail tabs (workspace mode) */}
|
||||
<main className="hidden overflow-y-auto bg-slate-50 p-6 lg:block">
|
||||
{/* Empty: chưa pick + chưa create */}
|
||||
{!selectedId && mode !== 'new' && (
|
||||
<EmptyState
|
||||
icon={ClipboardCheck}
|
||||
title="Chọn phiếu hoặc tạo mới"
|
||||
description='Chọn 1 phiếu ở danh sách trái để nhập liệu, hoặc bấm "+ Thêm mới" ở dưới.'
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Mode "new": header form */}
|
||||
{mode === 'new' && (
|
||||
<PeHeaderForm
|
||||
defaultType={typeFilter}
|
||||
onSaved={(newId, t) => setParams({ id: newId, mode: null, type: String(t) })}
|
||||
onCancel={() => setParams({ mode: null })}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Mode "edit": detail tabs (workspace = no workflow + Section 5 disabled) */}
|
||||
{selectedId && detail.isLoading && (
|
||||
<div className="text-sm text-slate-500">Đang tải…</div>
|
||||
)}
|
||||
{selectedId && detail.data && (
|
||||
<PeDetailTabs
|
||||
evaluation={detail.data}
|
||||
onBack={() => setParams({ id: null })}
|
||||
onDelete={() => del.mutate(detail.data!.id)}
|
||||
mode="workspace"
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Mobile fallback: nếu không lg, redirect về detail page */}
|
||||
{selectedId && (
|
||||
<div className="lg:hidden">
|
||||
{/* Quick UX: tap row khi mobile sẽ navigate fullpage detail */}
|
||||
<button
|
||||
onClick={() => navigate(`/purchase-evaluations/${selectedId}`)}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user