fix(apbdes): integrate new APBDes API with admin UI
- Update API schema to support name, deskripsi, and jumlah fields - Enhance state management with additional form fields - Add input fields for name, description, and total amount in create/edit pages - Display description and total amount in detail page - Fix APBDes component order in landing page - Update TypeScript types and Prisma schema integration API Changes: - POST /api/landingpage/apbdes/create: Added optional fields (name, deskripsi, jumlah) - PUT /api/landingpage/apbdes/🆔 Added optional fields (name, deskripsi, jumlah) Admin UI Changes: - create/page.tsx: Add TextInput for name, deskripsi, and jumlah - edit/page.tsx: Add TextInput for name, deskripsi, and jumlah; improve reset functionality - [id]/page.tsx: Display deskripsi and jumlah if available - page.tsx: Minor formatting fix - _state/apbdes.ts: Update Zod schema and default form with new fields Landing Page: - Move Apbdes component to top of stack for better visibility Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
@@ -19,6 +19,9 @@ const ApbdesItemSchema = z.object({
|
||||
|
||||
const ApbdesFormSchema = z.object({
|
||||
tahun: z.number().int().min(2000, "Tahun tidak valid"),
|
||||
name: z.string().optional(),
|
||||
deskripsi: z.string().optional(),
|
||||
jumlah: z.string().optional(),
|
||||
imageId: z.string().min(1, "Gambar wajib diunggah"),
|
||||
fileId: z.string().min(1, "File wajib diunggah"),
|
||||
items: z.array(ApbdesItemSchema).min(1, "Minimal ada 1 item"),
|
||||
@@ -27,6 +30,9 @@ const ApbdesFormSchema = z.object({
|
||||
// --- Default Form ---
|
||||
const defaultApbdesForm = {
|
||||
tahun: new Date().getFullYear(),
|
||||
name: "",
|
||||
deskripsi: "",
|
||||
jumlah: "",
|
||||
imageId: "",
|
||||
fileId: "",
|
||||
items: [] as z.infer<typeof ApbdesItemSchema>[],
|
||||
@@ -244,6 +250,9 @@ const apbdes = proxy({
|
||||
this.id = data.id;
|
||||
this.form = {
|
||||
tahun: data.tahun || new Date().getFullYear(),
|
||||
name: data.name || "",
|
||||
deskripsi: data.deskripsi || "",
|
||||
jumlah: data.jumlah || "",
|
||||
imageId: data.imageId || "",
|
||||
fileId: data.fileId || "",
|
||||
items: (data.items || []).map((item: any) => ({
|
||||
|
||||
@@ -79,6 +79,9 @@ function EditAPBDes() {
|
||||
// Simpan data original untuk reset form
|
||||
const [originalData, setOriginalData] = useState({
|
||||
tahun: 0,
|
||||
name: '',
|
||||
deskripsi: '',
|
||||
jumlah: '',
|
||||
imageId: '',
|
||||
fileId: '',
|
||||
imageUrl: '',
|
||||
@@ -103,6 +106,9 @@ function EditAPBDes() {
|
||||
// Simpan data original untuk reset
|
||||
setOriginalData({
|
||||
tahun: data.tahun || new Date().getFullYear(),
|
||||
name: data.name || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
jumlah: data.jumlah || '',
|
||||
imageId: data.imageId || '',
|
||||
fileId: data.fileId || '',
|
||||
imageUrl: data.image?.link || '',
|
||||
@@ -112,6 +118,9 @@ function EditAPBDes() {
|
||||
// Set form dengan data lama (termasuk imageId dan fileId)
|
||||
apbdesState.edit.form = {
|
||||
tahun: data.tahun || new Date().getFullYear(),
|
||||
name: data.name || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
jumlah: data.jumlah || '',
|
||||
imageId: data.imageId || '',
|
||||
fileId: data.fileId || '',
|
||||
items: (data.items || []).map((item: any) => ({
|
||||
@@ -238,9 +247,12 @@ function EditAPBDes() {
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
// Reset ke data original (tahun, imageId, fileId)
|
||||
// Reset ke data original (tahun, name, deskripsi, jumlah, imageId, fileId)
|
||||
apbdesState.edit.form = {
|
||||
tahun: originalData.tahun,
|
||||
name: originalData.name,
|
||||
deskripsi: originalData.deskripsi,
|
||||
jumlah: originalData.jumlah,
|
||||
imageId: originalData.imageId,
|
||||
fileId: originalData.fileId,
|
||||
items: [...apbdesState.edit.form.items], // keep existing items
|
||||
@@ -249,11 +261,11 @@ function EditAPBDes() {
|
||||
// Reset preview ke data original
|
||||
setPreviewImage(originalData.imageUrl || null);
|
||||
setPreviewDoc(originalData.fileUrl || null);
|
||||
|
||||
|
||||
// Reset file uploads
|
||||
setImageFile(null);
|
||||
setDocFile(null);
|
||||
|
||||
|
||||
// Reset new item form
|
||||
setNewItem({
|
||||
kode: '',
|
||||
@@ -263,7 +275,7 @@ function EditAPBDes() {
|
||||
level: 1,
|
||||
tipe: 'pendapatan',
|
||||
});
|
||||
|
||||
|
||||
toast.info('Form dikembalikan ke data awal');
|
||||
};
|
||||
|
||||
@@ -288,6 +300,33 @@ function EditAPBDes() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Header Form */}
|
||||
<TextInput
|
||||
label="Nama APBDes"
|
||||
placeholder="Contoh: APBDes Tahun 2025"
|
||||
value={apbdesState.edit.form.name}
|
||||
onChange={(e) =>
|
||||
(apbdesState.edit.form.name = e.target.value)
|
||||
}
|
||||
description="Opsional - akan diisi otomatis jika kosong"
|
||||
/>
|
||||
<TextInput
|
||||
label="Deskripsi"
|
||||
placeholder="Deskripsi APBDes (opsional)"
|
||||
value={apbdesState.edit.form.deskripsi}
|
||||
onChange={(e) =>
|
||||
(apbdesState.edit.form.deskripsi = e.target.value)
|
||||
}
|
||||
description="Opsional"
|
||||
/>
|
||||
<TextInput
|
||||
label="Jumlah Total"
|
||||
placeholder="Contoh: Rp 1.000.000.000"
|
||||
value={apbdesState.edit.form.jumlah}
|
||||
onChange={(e) =>
|
||||
(apbdesState.edit.form.jumlah = e.target.value)
|
||||
}
|
||||
description="Opsional - total keseluruhan anggaran"
|
||||
/>
|
||||
<NumberInput
|
||||
label="Tahun"
|
||||
value={apbdesState.edit.form.tahun || new Date().getFullYear()}
|
||||
|
||||
@@ -94,7 +94,7 @@ function DetailAPBDes() {
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Nama APBDes</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data.name || '-'}
|
||||
{data.name || `APBDes Tahun ${data.tahun}`}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -105,6 +105,24 @@ function DetailAPBDes() {
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{data.deskripsi && (
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data.deskripsi}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{data.jumlah && (
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Jumlah Total</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data.jumlah}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Gambar</Text>
|
||||
{data.image?.link ? (
|
||||
|
||||
@@ -117,9 +117,9 @@ function CreateAPBDes() {
|
||||
toast.success("Berhasil menambahkan APBDes");
|
||||
resetForm();
|
||||
router.push("/admin/landing-page/apbdes");
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
console.error("Gagal submit:", error);
|
||||
toast.error("Gagal menyimpan data");
|
||||
toast.error(error?.message || "Gagal menyimpan data");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
@@ -334,6 +334,27 @@ function CreateAPBDes() {
|
||||
</Stack>
|
||||
|
||||
{/* Form Header */}
|
||||
<TextInput
|
||||
label="Nama APBDes"
|
||||
placeholder="Contoh: APBDes Tahun 2025"
|
||||
value={stateAPBDes.create.form.name}
|
||||
onChange={(e) => (stateAPBDes.create.form.name = e.target.value)}
|
||||
description="Opsional - akan diisi otomatis jika kosong"
|
||||
/>
|
||||
<TextInput
|
||||
label="Deskripsi"
|
||||
placeholder="Deskripsi APBDes (opsional)"
|
||||
value={stateAPBDes.create.form.deskripsi}
|
||||
onChange={(e) => (stateAPBDes.create.form.deskripsi = e.target.value)}
|
||||
description="Opsional"
|
||||
/>
|
||||
<TextInput
|
||||
label="Jumlah Total"
|
||||
placeholder="Contoh: Rp 1.000.000.000"
|
||||
value={stateAPBDes.create.form.jumlah}
|
||||
onChange={(e) => (stateAPBDes.create.form.jumlah = e.target.value)}
|
||||
description="Opsional - total keseluruhan anggaran"
|
||||
/>
|
||||
<NumberInput
|
||||
label="Tahun"
|
||||
value={stateAPBDes.create.form.tahun || new Date().getFullYear()}
|
||||
|
||||
@@ -45,7 +45,7 @@ function APBDes() {
|
||||
function ListAPBDes({ search }: { search: string }) {
|
||||
const listState = useProxy(apbdes);
|
||||
const router = useRouter();
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
|
||||
const { data, page, totalPages, loading, load } = listState.findMany;
|
||||
|
||||
|
||||
@@ -17,6 +17,9 @@ type APBDesItemInput = {
|
||||
|
||||
type FormCreate = {
|
||||
tahun: number;
|
||||
name?: string;
|
||||
deskripsi?: string;
|
||||
jumlah?: string;
|
||||
imageId: string;
|
||||
fileId: string;
|
||||
items: APBDesItemInput[];
|
||||
@@ -48,7 +51,9 @@ export default async function apbdesCreate(context: Context) {
|
||||
const apbdes = await prisma.aPBDes.create({
|
||||
data: {
|
||||
tahun: body.tahun,
|
||||
name: `APBDes Tahun ${body.tahun}`,
|
||||
name: body.name || `APBDes Tahun ${body.tahun}`,
|
||||
deskripsi: body.deskripsi,
|
||||
jumlah: body.jumlah,
|
||||
imageId: body.imageId,
|
||||
fileId: body.fileId,
|
||||
},
|
||||
|
||||
@@ -47,7 +47,13 @@ export default async function apbdesFindMany(context: Context) {
|
||||
include: {
|
||||
image: true,
|
||||
file: true,
|
||||
items: true,
|
||||
items: {
|
||||
where: { isActive: true },
|
||||
orderBy: { kode: "asc" },
|
||||
include: {
|
||||
parent: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
prisma.aPBDes.count({ where }),
|
||||
|
||||
@@ -48,11 +48,14 @@ export default async function apbdesFindUnique(context: Context) {
|
||||
include: {
|
||||
items: {
|
||||
where: { isActive: true },
|
||||
orderBy: { kode: 'asc' }
|
||||
orderBy: { kode: 'asc' },
|
||||
include: {
|
||||
parent: true, // Include parent item for hierarchy
|
||||
},
|
||||
},
|
||||
image: true,
|
||||
file: true
|
||||
}
|
||||
file: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!result || !result.isActive) {
|
||||
|
||||
@@ -33,6 +33,9 @@ const APBDes = new Elysia({
|
||||
.post("/create", apbdesCreate, {
|
||||
body: t.Object({
|
||||
tahun: t.Number(),
|
||||
name: t.Optional(t.String()),
|
||||
deskripsi: t.Optional(t.String()),
|
||||
jumlah: t.Optional(t.String()),
|
||||
imageId: t.String(),
|
||||
fileId: t.String(),
|
||||
items: t.Array(ApbdesItemSchema),
|
||||
@@ -44,6 +47,9 @@ const APBDes = new Elysia({
|
||||
params: t.Object({ id: t.String() }),
|
||||
body: t.Object({
|
||||
tahun: t.Number(),
|
||||
name: t.Optional(t.String()),
|
||||
deskripsi: t.Optional(t.String()),
|
||||
jumlah: t.Optional(t.String()),
|
||||
imageId: t.String(),
|
||||
fileId: t.String(),
|
||||
items: t.Array(ApbdesItemSchema),
|
||||
|
||||
@@ -15,6 +15,9 @@ type APBDesItemInput = {
|
||||
|
||||
type FormUpdateBody = {
|
||||
tahun: number;
|
||||
name?: string;
|
||||
deskripsi?: string;
|
||||
jumlah?: string;
|
||||
imageId: string;
|
||||
fileId: string;
|
||||
items: APBDesItemInput[];
|
||||
@@ -79,6 +82,9 @@ export default async function apbdesUpdate(context: Context) {
|
||||
where: { id },
|
||||
data: {
|
||||
tahun: body.tahun,
|
||||
name: body.name || `APBDes Tahun ${body.tahun}`,
|
||||
deskripsi: body.deskripsi,
|
||||
jumlah: body.jumlah,
|
||||
imageId: body.imageId,
|
||||
fileId: body.fileId,
|
||||
},
|
||||
|
||||
@@ -150,13 +150,13 @@ export default function Page() {
|
||||
<Box id="page-root">
|
||||
<Stack bg={colors.grey[1]} gap={0}>
|
||||
<LandingPage />
|
||||
<Apbdes />
|
||||
<Penghargaan />
|
||||
<Layanan />
|
||||
<Potensi />
|
||||
<DesaAntiKorupsi />
|
||||
<Kepuasan />
|
||||
<SDGS />
|
||||
<Apbdes />
|
||||
<Prestasi />
|
||||
<ScrollToTopButton />
|
||||
<NewsReaderLanding />
|
||||
|
||||
Reference in New Issue
Block a user