Apply .gitignore cleanup
This commit is contained in:
admin
218
frontend/app/(protected)/rfas/new/page.jsx
Executable file → Normal file
218
frontend/app/(protected)/rfas/new/page.jsx
Executable file → Normal file
@@ -1,110 +1,110 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { api } from "@/lib/api";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function RfaNew() {
|
||||
const router = useRouter();
|
||||
const [draftId, setDraftId] = React.useState(null);
|
||||
const [saving, setSaving] = React.useState(false);
|
||||
const [savedAt, setSavedAt] = React.useState(null);
|
||||
const [error, setError] = React.useState("");
|
||||
const [form, setForm] = React.useState({
|
||||
title: "", code: "", discipline: "", due_date: "", description: ""
|
||||
});
|
||||
const [errs, setErrs] = React.useState({});
|
||||
|
||||
// simple validate (client)
|
||||
const validate = (f) => {
|
||||
const e = {};
|
||||
if (!f.title?.trim()) e.title = "กรุณากรอกชื่อเรื่อง";
|
||||
if (!f.due_date) e.due_date = "กรุณากำหนดวันที่ครบกำหนด";
|
||||
return e;
|
||||
};
|
||||
|
||||
// debounce autosave
|
||||
const tRef = React.useRef(0);
|
||||
React.useEffect(() => {
|
||||
clearTimeout(tRef.current);
|
||||
tRef.current = window.setTimeout(async () => {
|
||||
const e = validate(form);
|
||||
setErrs(e); // แสดง error ทันที (soft)
|
||||
try {
|
||||
setSaving(true);
|
||||
if (!draftId) {
|
||||
// create draft
|
||||
const res = await api("/rfas", { method: "POST", body: { ...form, status: "draft" } });
|
||||
setDraftId(res.id);
|
||||
} else {
|
||||
// update draft
|
||||
await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "draft" } });
|
||||
}
|
||||
setSavedAt(new Date());
|
||||
} catch (err) {
|
||||
setError(err.message || "บันทึกฉบับร่างไม่สำเร็จ");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, 800);
|
||||
return () => clearTimeout(tRef.current);
|
||||
}, [form, draftId]);
|
||||
|
||||
const onSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const eobj = validate(form);
|
||||
setErrs(eobj);
|
||||
if (Object.keys(eobj).length) return;
|
||||
try {
|
||||
setSaving(true);
|
||||
const id = draftId
|
||||
? (await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
|
||||
: (await api("/rfas", { method: "POST", body: { ...form, status: "submitted" } })).id;
|
||||
router.replace(`/rfas`); // หรือไปหน้า detail `/rfas/${id}`
|
||||
} catch (err) {
|
||||
setError(err.message || "ส่งคำขอไม่สำเร็จ");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="p-5 space-y-4 bg-white rounded-2xl">
|
||||
<div className="text-lg font-semibold">สร้าง RFA</div>
|
||||
{error && <div className="text-sm text-red-600">{error}</div>}
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="text-sm">ชื่อเรื่อง *</label>
|
||||
<Input value={form.title} onChange={(e)=>setForm(f=>({...f, title:e.target.value}))}/>
|
||||
{errs.title && <div className="mt-1 text-xs text-red-600">{errs.title}</div>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">รหัส (ถ้ามี)</label>
|
||||
<Input value={form.code} onChange={(e)=>setForm(f=>({...f, code:e.target.value}))}/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">สาขา/หมวด (Discipline)</label>
|
||||
<Input value={form.discipline} onChange={(e)=>setForm(f=>({...f, discipline:e.target.value}))}/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">กำหนดส่ง *</label>
|
||||
<input type="date" className="w-full p-2 border rounded-xl" value={form.due_date}
|
||||
onChange={(e)=>setForm(f=>({...f, due_date:e.target.value}))}/>
|
||||
{errs.due_date && <div className="mt-1 text-xs text-red-600">{errs.due_date}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">รายละเอียด</label>
|
||||
<textarea rows={5} className="w-full p-2 border rounded-xl"
|
||||
value={form.description} onChange={(e)=>setForm(f=>({...f, description:e.target.value}))}/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button type="submit" disabled={saving}>ส่งเพื่อพิจารณา</Button>
|
||||
<span className="text-sm opacity-70">
|
||||
{saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { api } from "@/lib/api";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function RfaNew() {
|
||||
const router = useRouter();
|
||||
const [draftId, setDraftId] = React.useState(null);
|
||||
const [saving, setSaving] = React.useState(false);
|
||||
const [savedAt, setSavedAt] = React.useState(null);
|
||||
const [error, setError] = React.useState("");
|
||||
const [form, setForm] = React.useState({
|
||||
title: "", code: "", discipline: "", due_date: "", description: ""
|
||||
});
|
||||
const [errs, setErrs] = React.useState({});
|
||||
|
||||
// simple validate (client)
|
||||
const validate = (f) => {
|
||||
const e = {};
|
||||
if (!f.title?.trim()) e.title = "กรุณากรอกชื่อเรื่อง";
|
||||
if (!f.due_date) e.due_date = "กรุณากำหนดวันที่ครบกำหนด";
|
||||
return e;
|
||||
};
|
||||
|
||||
// debounce autosave
|
||||
const tRef = React.useRef(0);
|
||||
React.useEffect(() => {
|
||||
clearTimeout(tRef.current);
|
||||
tRef.current = window.setTimeout(async () => {
|
||||
const e = validate(form);
|
||||
setErrs(e); // แสดง error ทันที (soft)
|
||||
try {
|
||||
setSaving(true);
|
||||
if (!draftId) {
|
||||
// create draft
|
||||
const res = await api("/rfas", { method: "POST", body: { ...form, status: "draft" } });
|
||||
setDraftId(res.id);
|
||||
} else {
|
||||
// update draft
|
||||
await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "draft" } });
|
||||
}
|
||||
setSavedAt(new Date());
|
||||
} catch (err) {
|
||||
setError(err.message || "บันทึกฉบับร่างไม่สำเร็จ");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, 800);
|
||||
return () => clearTimeout(tRef.current);
|
||||
}, [form, draftId]);
|
||||
|
||||
const onSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const eobj = validate(form);
|
||||
setErrs(eobj);
|
||||
if (Object.keys(eobj).length) return;
|
||||
try {
|
||||
setSaving(true);
|
||||
const id = draftId
|
||||
? (await api(`/rfas/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
|
||||
: (await api("/rfas", { method: "POST", body: { ...form, status: "submitted" } })).id;
|
||||
router.replace(`/rfas`); // หรือไปหน้า detail `/rfas/${id}`
|
||||
} catch (err) {
|
||||
setError(err.message || "ส่งคำขอไม่สำเร็จ");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="p-5 space-y-4 bg-white rounded-2xl">
|
||||
<div className="text-lg font-semibold">สร้าง RFA</div>
|
||||
{error && <div className="text-sm text-red-600">{error}</div>}
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="text-sm">ชื่อเรื่อง *</label>
|
||||
<Input value={form.title} onChange={(e)=>setForm(f=>({...f, title:e.target.value}))}/>
|
||||
{errs.title && <div className="mt-1 text-xs text-red-600">{errs.title}</div>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">รหัส (ถ้ามี)</label>
|
||||
<Input value={form.code} onChange={(e)=>setForm(f=>({...f, code:e.target.value}))}/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">สาขา/หมวด (Discipline)</label>
|
||||
<Input value={form.discipline} onChange={(e)=>setForm(f=>({...f, discipline:e.target.value}))}/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">กำหนดส่ง *</label>
|
||||
<input type="date" className="w-full p-2 border rounded-xl" value={form.due_date}
|
||||
onChange={(e)=>setForm(f=>({...f, due_date:e.target.value}))}/>
|
||||
{errs.due_date && <div className="mt-1 text-xs text-red-600">{errs.due_date}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">รายละเอียด</label>
|
||||
<textarea rows={5} className="w-full p-2 border rounded-xl"
|
||||
value={form.description} onChange={(e)=>setForm(f=>({...f, description:e.target.value}))}/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button type="submit" disabled={saving}>ส่งเพื่อพิจารณา</Button>
|
||||
<span className="text-sm opacity-70">
|
||||
{saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
268
frontend/app/(protected)/rfas/page.jsx
Executable file → Normal file
268
frontend/app/(protected)/rfas/page.jsx
Executable file → Normal file
@@ -1,135 +1,135 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { useRouter, usePathname, useSearchParams } from "next/navigation";
|
||||
import { apiGet } from "@/lib/api";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
|
||||
export default function RFAsPage() {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const sp = useSearchParams();
|
||||
|
||||
// params from URL
|
||||
const [q, setQ] = React.useState(sp.get("q") || "");
|
||||
const status = sp.get("status") || "All";
|
||||
const overdue = sp.get("overdue") === "1";
|
||||
const page = Number(sp.get("page") || 1);
|
||||
const pageSize = Number(sp.get("pageSize") || 20);
|
||||
const sort = sp.get("sort") || "updated_at:desc";
|
||||
|
||||
const setParams = (patch) => {
|
||||
const curr = Object.fromEntries(sp.entries());
|
||||
const next = { ...curr, ...patch };
|
||||
// normalize
|
||||
if (!next.q) delete next.q;
|
||||
if (!next.status || next.status === "All") delete next.status;
|
||||
if (!next.overdue || next.overdue === "0") delete next.overdue;
|
||||
if (!next.page || Number(next.page) === 1) delete next.page;
|
||||
if (!next.pageSize || Number(next.pageSize) === 20) delete next.pageSize;
|
||||
if (!next.sort || next.sort === "updated_at:desc") delete next.sort;
|
||||
const usp = new URLSearchParams(next).toString();
|
||||
router.replace(`${pathname}${usp ? `?${usp}` : ""}`);
|
||||
};
|
||||
|
||||
const [rows, setRows] = React.useState([]);
|
||||
const [total, setTotal] = React.useState(0);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [error, setError] = React.useState("");
|
||||
|
||||
// fetch whenever URL params change
|
||||
React.useEffect(() => {
|
||||
setLoading(true); setError("");
|
||||
apiGet("/rfas", {
|
||||
q, status: status !== "All" ? status : undefined,
|
||||
overdue: overdue ? 1 : undefined, page, pageSize, sort
|
||||
}).then((res) => {
|
||||
// expected: { data: [...], page, pageSize, total }
|
||||
setRows(res.data || []);
|
||||
setTotal(res.total || 0);
|
||||
}).catch((e) => {
|
||||
setError(e.message || "โหลดข้อมูลไม่สำเร็จ");
|
||||
}).finally(() => setLoading(false));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [sp]);
|
||||
|
||||
const pages = Math.max(1, Math.ceil(total / pageSize));
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
placeholder="ค้นหา (รหัส/ชื่อเรื่อง/ผู้รับผิดชอบ)"
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
|
||||
/>
|
||||
<select
|
||||
className="border rounded-xl p-2"
|
||||
value={status}
|
||||
onChange={(e) => setParams({ status: e.target.value, page: 1 })}
|
||||
>
|
||||
<option>All</option><option>Pending</option><option>Review</option><option>Approved</option><option>Closed</option>
|
||||
</select>
|
||||
<label className="text-sm flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={overdue}
|
||||
onChange={(e) => setParams({ overdue: e.target.checked ? "1" : "0", page: 1 })}
|
||||
/>
|
||||
Overdue
|
||||
</label>
|
||||
<Button onClick={() => setParams({ q, page: 1 })}>ค้นหา</Button>
|
||||
</div>
|
||||
|
||||
<Card className="rounded-2xl border-0">
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-white sticky top-0 border-b">
|
||||
<tr className="text-left">
|
||||
<th className="py-2 px-3">รหัส</th>
|
||||
<th className="py-2 px-3">ชื่อเรื่อง</th>
|
||||
<th className="py-2 px-3">สถานะ</th>
|
||||
<th className="py-2 px-3">กำหนดส่ง</th>
|
||||
<th className="py-2 px-3">ผู้รับผิดชอบ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <tr><td className="py-6 px-3" colSpan={5}>กำลังโหลด…</td></tr>}
|
||||
{error && !loading && <tr><td className="py-6 px-3 text-red-600" colSpan={5}>{error}</td></tr>}
|
||||
{!loading && !error && rows.length === 0 && <tr><td className="py-6 px-3 opacity-70" colSpan={5}>ไม่พบข้อมูล</td></tr>}
|
||||
{!loading && !error && rows.map((r) => (
|
||||
<tr key={r.id} className="border-b hover:bg-gray-50">
|
||||
<td className="py-2 px-3 font-mono">{r.code || r.id}</td>
|
||||
<td className="py-2 px-3">{r.title}</td>
|
||||
<td className="py-2 px-3">{r.status}</td>
|
||||
<td className="py-2 px-3">{r.due_date || "—"}</td>
|
||||
<td className="py-2 px-3">{r.owner_name || "—"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-3 py-2 text-sm border-t">
|
||||
<span>ทั้งหมด {total} รายการ</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setParams({ page: Math.max(1, page - 1) })}
|
||||
disabled={page <= 1}
|
||||
>ย้อนกลับ</Button>
|
||||
<span>หน้า {page}/{pages}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setParams({ page: Math.min(pages, page + 1) })}
|
||||
disabled={page >= pages}
|
||||
>ถัดไป</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { useRouter, usePathname, useSearchParams } from "next/navigation";
|
||||
import { apiGet } from "@/lib/api";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
|
||||
export default function RFAsPage() {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const sp = useSearchParams();
|
||||
|
||||
// params from URL
|
||||
const [q, setQ] = React.useState(sp.get("q") || "");
|
||||
const status = sp.get("status") || "All";
|
||||
const overdue = sp.get("overdue") === "1";
|
||||
const page = Number(sp.get("page") || 1);
|
||||
const pageSize = Number(sp.get("pageSize") || 20);
|
||||
const sort = sp.get("sort") || "updated_at:desc";
|
||||
|
||||
const setParams = (patch) => {
|
||||
const curr = Object.fromEntries(sp.entries());
|
||||
const next = { ...curr, ...patch };
|
||||
// normalize
|
||||
if (!next.q) delete next.q;
|
||||
if (!next.status || next.status === "All") delete next.status;
|
||||
if (!next.overdue || next.overdue === "0") delete next.overdue;
|
||||
if (!next.page || Number(next.page) === 1) delete next.page;
|
||||
if (!next.pageSize || Number(next.pageSize) === 20) delete next.pageSize;
|
||||
if (!next.sort || next.sort === "updated_at:desc") delete next.sort;
|
||||
const usp = new URLSearchParams(next).toString();
|
||||
router.replace(`${pathname}${usp ? `?${usp}` : ""}`);
|
||||
};
|
||||
|
||||
const [rows, setRows] = React.useState([]);
|
||||
const [total, setTotal] = React.useState(0);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [error, setError] = React.useState("");
|
||||
|
||||
// fetch whenever URL params change
|
||||
React.useEffect(() => {
|
||||
setLoading(true); setError("");
|
||||
apiGet("/rfas", {
|
||||
q, status: status !== "All" ? status : undefined,
|
||||
overdue: overdue ? 1 : undefined, page, pageSize, sort
|
||||
}).then((res) => {
|
||||
// expected: { data: [...], page, pageSize, total }
|
||||
setRows(res.data || []);
|
||||
setTotal(res.total || 0);
|
||||
}).catch((e) => {
|
||||
setError(e.message || "โหลดข้อมูลไม่สำเร็จ");
|
||||
}).finally(() => setLoading(false));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [sp]);
|
||||
|
||||
const pages = Math.max(1, Math.ceil(total / pageSize));
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
placeholder="ค้นหา (รหัส/ชื่อเรื่อง/ผู้รับผิดชอบ)"
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
|
||||
/>
|
||||
<select
|
||||
className="border rounded-xl p-2"
|
||||
value={status}
|
||||
onChange={(e) => setParams({ status: e.target.value, page: 1 })}
|
||||
>
|
||||
<option>All</option><option>Pending</option><option>Review</option><option>Approved</option><option>Closed</option>
|
||||
</select>
|
||||
<label className="text-sm flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={overdue}
|
||||
onChange={(e) => setParams({ overdue: e.target.checked ? "1" : "0", page: 1 })}
|
||||
/>
|
||||
Overdue
|
||||
</label>
|
||||
<Button onClick={() => setParams({ q, page: 1 })}>ค้นหา</Button>
|
||||
</div>
|
||||
|
||||
<Card className="rounded-2xl border-0">
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-white sticky top-0 border-b">
|
||||
<tr className="text-left">
|
||||
<th className="py-2 px-3">รหัส</th>
|
||||
<th className="py-2 px-3">ชื่อเรื่อง</th>
|
||||
<th className="py-2 px-3">สถานะ</th>
|
||||
<th className="py-2 px-3">กำหนดส่ง</th>
|
||||
<th className="py-2 px-3">ผู้รับผิดชอบ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <tr><td className="py-6 px-3" colSpan={5}>กำลังโหลด…</td></tr>}
|
||||
{error && !loading && <tr><td className="py-6 px-3 text-red-600" colSpan={5}>{error}</td></tr>}
|
||||
{!loading && !error && rows.length === 0 && <tr><td className="py-6 px-3 opacity-70" colSpan={5}>ไม่พบข้อมูล</td></tr>}
|
||||
{!loading && !error && rows.map((r) => (
|
||||
<tr key={r.id} className="border-b hover:bg-gray-50">
|
||||
<td className="py-2 px-3 font-mono">{r.code || r.id}</td>
|
||||
<td className="py-2 px-3">{r.title}</td>
|
||||
<td className="py-2 px-3">{r.status}</td>
|
||||
<td className="py-2 px-3">{r.due_date || "—"}</td>
|
||||
<td className="py-2 px-3">{r.owner_name || "—"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-3 py-2 text-sm border-t">
|
||||
<span>ทั้งหมด {total} รายการ</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setParams({ page: Math.max(1, page - 1) })}
|
||||
disabled={page <= 1}
|
||||
>ย้อนกลับ</Button>
|
||||
<span>หน้า {page}/{pages}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setParams({ page: Math.min(pages, page + 1) })}
|
||||
disabled={page >= pages}
|
||||
>ถัดไป</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user