build frontend ใหม่ ผ่านทั้ง dev และ proc
This commit is contained in:
@@ -1,108 +1,108 @@
|
||||
+ "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 TransmittalNew() {
|
||||
+ 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({
|
||||
+ subject: "", number: "", to_party: "", sent_date: "", description: ""
|
||||
+ });
|
||||
+ const [errs, setErrs] = React.useState({});
|
||||
+
|
||||
+ const validate = (f) => {
|
||||
+ const e = {};
|
||||
+ if (!f.subject?.trim()) e.subject = "กรุณากรอกเรื่อง (Subject)";
|
||||
+ if (!f.to_party?.trim()) e.to_party = "กรุณาระบุผู้รับ (To)";
|
||||
+ if (!f.sent_date) e.sent_date = "กรุณาระบุวันที่ส่ง";
|
||||
+ return e;
|
||||
+ };
|
||||
+
|
||||
+ const tRef = React.useRef(0);
|
||||
+ React.useEffect(() => {
|
||||
+ clearTimeout(tRef.current);
|
||||
+ tRef.current = window.setTimeout(async () => {
|
||||
+ const e = validate(form);
|
||||
+ setErrs(e);
|
||||
+ try {
|
||||
+ setSaving(true);
|
||||
+ if (!draftId) {
|
||||
+ const res = await api("/transmittals", { method: "POST", body: { ...form, status: "draft" } });
|
||||
+ setDraftId(res.id);
|
||||
+ } else {
|
||||
+ await api(`/transmittals/${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(`/transmittals/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
|
||||
+ : (await api("/transmittals", { method: "POST", body: { ...form, status: "submitted" } })).id;
|
||||
+ router.replace(`/transmittals`);
|
||||
+ } catch (err) {
|
||||
+ setError(err.message || "ส่ง Transmittal ไม่สำเร็จ");
|
||||
+ } finally {
|
||||
+ setSaving(false);
|
||||
+ }
|
||||
+ };
|
||||
+
|
||||
+ return (
|
||||
+ <form onSubmit={onSubmit} className="space-y-4 rounded-2xl p-5 bg-white">
|
||||
+ <div className="text-lg font-semibold">สร้าง Transmittal</div>
|
||||
+ {error && <div className="text-sm text-red-600">{error}</div>}
|
||||
+ <div className="grid md:grid-cols-2 gap-3">
|
||||
+ <div>
|
||||
+ <label className="text-sm">เรื่อง (Subject) *</label>
|
||||
+ <Input value={form.subject} onChange={(e)=>setForm(f=>({...f, subject:e.target.value}))}/>
|
||||
+ {errs.subject && <div className="text-xs text-red-600 mt-1">{errs.subject}</div>}
|
||||
+ </div>
|
||||
+ <div>
|
||||
+ <label className="text-sm">เลขที่ (ถ้ามี)</label>
|
||||
+ <Input value={form.number} onChange={(e)=>setForm(f=>({...f, number:e.target.value}))}/>
|
||||
+ </div>
|
||||
+ <div>
|
||||
+ <label className="text-sm">ถึง (To) *</label>
|
||||
+ <Input value={form.to_party} onChange={(e)=>setForm(f=>({...f, to_party:e.target.value}))}/>
|
||||
+ {errs.to_party && <div className="text-xs text-red-600 mt-1">{errs.to_party}</div>}
|
||||
+ </div>
|
||||
+ <div>
|
||||
+ <label className="text-sm">วันที่ส่ง *</label>
|
||||
+ <input type="date" className="border rounded-xl p-2 w-full" value={form.sent_date}
|
||||
+ onChange={(e)=>setForm(f=>({...f, sent_date:e.target.value}))}/>
|
||||
+ {errs.sent_date && <div className="text-xs text-red-600 mt-1">{errs.sent_date}</div>}
|
||||
+ </div>
|
||||
+ </div>
|
||||
+ <div>
|
||||
+ <label className="text-sm">รายละเอียด</label>
|
||||
+ <textarea rows={5} className="border rounded-xl p-2 w-full"
|
||||
+ 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}>ส่ง Transmittal</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 TransmittalNew() {
|
||||
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({
|
||||
subject: "", number: "", to_party: "", sent_date: "", description: ""
|
||||
});
|
||||
const [errs, setErrs] = React.useState({});
|
||||
|
||||
const validate = (f) => {
|
||||
const e = {};
|
||||
if (!f.subject?.trim()) e.subject = "กรุณากรอกเรื่อง (Subject)";
|
||||
if (!f.to_party?.trim()) e.to_party = "กรุณาระบุผู้รับ (To)";
|
||||
if (!f.sent_date) e.sent_date = "กรุณาระบุวันที่ส่ง";
|
||||
return e;
|
||||
};
|
||||
|
||||
const tRef = React.useRef(0);
|
||||
React.useEffect(() => {
|
||||
clearTimeout(tRef.current);
|
||||
tRef.current = window.setTimeout(async () => {
|
||||
const e = validate(form);
|
||||
setErrs(e);
|
||||
try {
|
||||
setSaving(true);
|
||||
if (!draftId) {
|
||||
const res = await api("/transmittals", { method: "POST", body: { ...form, status: "draft" } });
|
||||
setDraftId(res.id);
|
||||
} else {
|
||||
await api(`/transmittals/${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(`/transmittals/${draftId}`, { method: "PATCH", body: { ...form, status: "submitted" } })).id || draftId
|
||||
: (await api("/transmittals", { method: "POST", body: { ...form, status: "submitted" } })).id;
|
||||
router.replace(`/transmittals`);
|
||||
} catch (err) {
|
||||
setError(err.message || "ส่ง Transmittal ไม่สำเร็จ");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="space-y-4 rounded-2xl p-5 bg-white">
|
||||
<div className="text-lg font-semibold">สร้าง Transmittal</div>
|
||||
{error && <div className="text-sm text-red-600">{error}</div>}
|
||||
<div className="grid md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-sm">เรื่อง (Subject) *</label>
|
||||
<Input value={form.subject} onChange={(e)=>setForm(f=>({...f, subject:e.target.value}))}/>
|
||||
{errs.subject && <div className="text-xs text-red-600 mt-1">{errs.subject}</div>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">เลขที่ (ถ้ามี)</label>
|
||||
<Input value={form.number} onChange={(e)=>setForm(f=>({...f, number:e.target.value}))}/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">ถึง (To) *</label>
|
||||
<Input value={form.to_party} onChange={(e)=>setForm(f=>({...f, to_party:e.target.value}))}/>
|
||||
{errs.to_party && <div className="text-xs text-red-600 mt-1">{errs.to_party}</div>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">วันที่ส่ง *</label>
|
||||
<input type="date" className="border rounded-xl p-2 w-full" value={form.sent_date}
|
||||
onChange={(e)=>setForm(f=>({...f, sent_date:e.target.value}))}/>
|
||||
{errs.sent_date && <div className="text-xs text-red-600 mt-1">{errs.sent_date}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm">รายละเอียด</label>
|
||||
<textarea rows={5} className="border rounded-xl p-2 w-full"
|
||||
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}>ส่ง Transmittal</Button>
|
||||
<span className="text-sm opacity-70">
|
||||
{saving ? "กำลังบันทึก…" : savedAt ? `บันทึกล่าสุด ${savedAt.toLocaleTimeString()}` : "ยังไม่เคยบันทึก"}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user