build frontend ใหม่ ผ่านทั้ง dev และ proc
This commit is contained in:
@@ -1,96 +1,96 @@
|
||||
+ "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 TransmittalsPage() {
|
||||
+ const router = useRouter();
|
||||
+ const pathname = usePathname();
|
||||
+ const sp = useSearchParams();
|
||||
+
|
||||
+ const [q, setQ] = React.useState(sp.get("q") || "");
|
||||
+ const page = Number(sp.get("page") || 1);
|
||||
+ const pageSize = Number(sp.get("pageSize") || 20);
|
||||
+ const sort = sp.get("sort") || "sent_date:desc";
|
||||
+
|
||||
+ const setParams = (patch) => {
|
||||
+ const curr = Object.fromEntries(sp.entries());
|
||||
+ const next = { ...curr, ...patch };
|
||||
+ if (!next.q) delete next.q;
|
||||
+ 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 === "sent_date: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("");
|
||||
+
|
||||
+ React.useEffect(() => {
|
||||
+ setLoading(true); setError("");
|
||||
+ apiGet("/transmittals", { q, page, pageSize, sort })
|
||||
+ .then((res) => { 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="ค้นหา Transmittal (เลขที่/เรื่อง/ถึงใคร)"
|
||||
+ value={q}
|
||||
+ onChange={(e) => setQ(e.target.value)}
|
||||
+ onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
|
||||
+ />
|
||||
+ <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>
|
||||
+ </tr>
|
||||
+ </thead>
|
||||
+ <tbody>
|
||||
+ {loading && <tr><td className="py-6 px-3" colSpan={4}>กำลังโหลด…</td></tr>}
|
||||
+ {error && !loading && <tr><td className="py-6 px-3 text-red-600" colSpan={4}>{error}</td></tr>}
|
||||
+ {!loading && !error && rows.length === 0 && <tr><td className="py-6 px-3 opacity-70" colSpan={4}>ไม่พบข้อมูล</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.number || r.id}</td>
|
||||
+ <td className="py-2 px-3">{r.subject}</td>
|
||||
+ <td className="py-2 px-3">{r.to_party}</td>
|
||||
+ <td className="py-2 px-3">{r.sent_date || "—"}</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 TransmittalsPage() {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const sp = useSearchParams();
|
||||
|
||||
const [q, setQ] = React.useState(sp.get("q") || "");
|
||||
const page = Number(sp.get("page") || 1);
|
||||
const pageSize = Number(sp.get("pageSize") || 20);
|
||||
const sort = sp.get("sort") || "sent_date:desc";
|
||||
|
||||
const setParams = (patch) => {
|
||||
const curr = Object.fromEntries(sp.entries());
|
||||
const next = { ...curr, ...patch };
|
||||
if (!next.q) delete next.q;
|
||||
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 === "sent_date: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("");
|
||||
|
||||
React.useEffect(() => {
|
||||
setLoading(true); setError("");
|
||||
apiGet("/transmittals", { q, page, pageSize, sort })
|
||||
.then((res) => { 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="ค้นหา Transmittal (เลขที่/เรื่อง/ถึงใคร)"
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && setParams({ q, page: 1 })}
|
||||
/>
|
||||
<Button onClick={() => setParams({ q, page: 1 })}>ค้นหา</Button>
|
||||
</div>
|
||||
<Card className="border-0 rounded-2xl">
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="sticky top-0 bg-white border-b">
|
||||
<tr className="text-left">
|
||||
<th className="px-3 py-2">เลขที่</th>
|
||||
<th className="px-3 py-2">เรื่อง</th>
|
||||
<th className="px-3 py-2">ถึง</th>
|
||||
<th className="px-3 py-2">วันที่ส่ง</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && <tr><td className="px-3 py-6" colSpan={4}>กำลังโหลด…</td></tr>}
|
||||
{error && !loading && <tr><td className="px-3 py-6 text-red-600" colSpan={4}>{error}</td></tr>}
|
||||
{!loading && !error && rows.length === 0 && <tr><td className="px-3 py-6 opacity-70" colSpan={4}>ไม่พบข้อมูล</td></tr>}
|
||||
{!loading && !error && rows.map((r) => (
|
||||
<tr key={r.id} className="border-b hover:bg-gray-50">
|
||||
<td className="px-3 py-2 font-mono">{r.number || r.id}</td>
|
||||
<td className="px-3 py-2">{r.subject}</td>
|
||||
<td className="px-3 py-2">{r.to_party}</td>
|
||||
<td className="px-3 py-2">{r.sent_date || "—"}</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