Create dan Update

# feat
- tampilan user
- tampilan admin
## No Issue

src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx

@@ -5,6 +5,7 @@ import {
   AspectRatio,
   Button,
   Center,
+  FileButton,
   Image,
   Paper,
   Stack,
@@ -16,31 +17,37 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import toast from "react-simple-toasts";
+import { MODEL_CERITA_DONASI } from "../../model/interface";
+import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
+import _ from "lodash";
+import { Donasi_funUpdateCerita } from "../../fun/update/fun_update_cerita_donasi";
+import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 
-export default function EditCeritaPenggalangDonasi() {
+export default function EditCeritaPenggalangDonasi({
+  dataCerita,
+}: {
+  dataCerita: MODEL_CERITA_DONASI;
+}) {
   const router = useRouter();
   const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
     gs_donasi_tabs_posting
   );
-  const [value, setValue] = useState({
-    pembukaan: "",
-    cerita: "",
-  });
-  async function onUpdate() {
-    router.back();
-    toast("Berhasil update cerita")
+  const [value, setValue] = useState(dataCerita);
+  const [file, setFile] = useState<File | null>(null);
+  const [updateImage, setUpdateImage] = useState<any | null>();
 
-  }
   return (
     <>
+      {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
       <Stack spacing={"md"} px={"md"}>
         <Textarea
           autosize
           minRows={2}
-          maxRows={4}
+          maxRows={7}
           withAsterisk
           label="Pembukaan"
           placeholder="Pembuka dari isi cerita"
+          value={value.pembukaan}
           onChange={(val) =>
             setValue({
               ...value,
@@ -48,13 +55,59 @@ export default function EditCeritaPenggalangDonasi() {
             })
           }
         />
+
+        <Stack spacing={"lg"}>
+          <Center>
+            <FileButton
+              onChange={async (files: any | null) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  setUpdateImage(buffer);
+                  setFile(files);
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+              accept="image/png,image/jpeg"
+            >
+              {(props) => (
+                <Button
+                  {...props}
+                  radius={"xl"}
+                  variant="outline"
+                  w={150}
+                  leftIcon={<IconCamera />}
+                >
+                  Upload
+                </Button>
+              )}
+            </FileButton>
+          </Center>
+          <AspectRatio ratio={16 / 9}>
+            <Paper radius={"md"}>
+              <Image
+                alt="Foto"
+                src={
+                  updateImage
+                    ? updateImage
+                    : RouterDonasi.api_image_cerita +
+                      value.imageCeritaDonasi.url
+                }
+              />
+            </Paper>
+          </AspectRatio>
+        </Stack>
+
         <Textarea
           autosize
           minRows={2}
-          maxRows={10}
+          maxRows={7}
           withAsterisk
           label="Cerita"
           placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
+          value={value.cerita}
           onChange={(val) =>
             setValue({
               ...value,
@@ -63,24 +116,11 @@ export default function EditCeritaPenggalangDonasi() {
           }
         />
 
-        <Stack spacing={"xs"}>
-          <Center>
-            <Button
-              radius={"xl"}
-              variant="outline"
-              w={150}
-              leftIcon={<IconCamera />}
-            >
-              Upload
-            </Button>
-          </Center>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
-              <Image alt="Foto" src={"/aset/no-img.png"} />
-            </Paper>
-          </AspectRatio>
-        </Stack>
-        <Button w={"100%"} radius={"xl"} onClick={() => onUpdate()}>
+        <Button
+          w={"100%"}
+          radius={"xl"}
+          onClick={() => onUpdate(router, value, file as any)}
+        >
           Simpan
         </Button>
       </Stack>
@@ -88,3 +128,30 @@ export default function EditCeritaPenggalangDonasi() {
     </>
   );
 }
+
+async function onUpdate(
+  router: any,
+  value: MODEL_CERITA_DONASI,
+  file: FormData
+) {
+  // router.back();
+  const body = {
+    id: value.id,
+    pembukaan: value.pembukaan,
+    cerita: value.cerita,
+    imagesId: value.imageCeritaDonasi.id
+  };
+
+  const gambar = new FormData();
+  gambar.append("file", file as any);
+
+  if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
+  await Donasi_funUpdateCerita(body as any,gambar).then((res) => {
+    if (res.status === 200) {
+      NotifBerhasil(res.message);
+      router.back();
+    } else {
+      toast(res.message);
+    }
+  });
+}

src/app_modules/donasi/edit/edit_donasi/index.tsx

@@ -10,53 +10,109 @@ import {
   Button,
   TextInput,
   Image,
+  FileButton,
+  Modal,
+  Group,
+  Title,
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import toast from "react-simple-toasts";
+import { MODEL_DONASI, MODEL_DONASI_ALL_MASTER } from "../../model/interface";
+import { useState } from "react";
+import { Donasi_funUpdateDonasi } from "../../fun/update/fun_update_donasi";
+import { useDisclosure } from "@mantine/hooks";
+import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
+import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
+import _ from "lodash";
+import { Donasi_getOneById } from "../../fun/get/get_one_donasi_by_id";
 
-export default function EditDonasi() {
+export default function EditDonasi({
+  dataDonasi,
+  masterKategori,
+  masterDurasi,
+}: {
+  dataDonasi: MODEL_DONASI;
+  masterKategori: MODEL_DONASI_ALL_MASTER[];
+  masterDurasi: MODEL_DONASI_ALL_MASTER[];
+}) {
   const router = useRouter();
   const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
     gs_donasi_tabs_posting
   );
+  const [value, setValue] = useState(dataDonasi);
+  const [kategori, setKategori] = useState(masterKategori);
+  const [durasi, setDurasi] = useState(masterDurasi);
+  const [file, setFile] = useState<File | null>(null);
+  const [updateImage, setUpdateImage] = useState<any | null>();
+  const [opened, { open, close }] = useDisclosure(false);
 
-  async function onUpdate() {
-    router.back();
-    toast("Berhasil update data")
-  }
   return (
     <>
+      {/* <pre>{JSON.stringify(donasi, null, 2)}</pre> */}
       <Stack spacing={"md"} px={"md"}>
         <Select
           label="Kategori"
           placeholder="Pilih kategori penggalangan dana"
+          value={value.DonasiMaster_Ketegori.id}
           withAsterisk
-          data={[
-            { value: "1", label: "Medis" },
-            { value: "2", label: "Lingkungan" },
-            { value: "3", label: "Kegiatan Sosial" },
-            { value: "4", label: "Rumah Ibadah" },
-            { value: "5", label: "Bantuan Pendidikan" },
-          ]}
+          data={kategori.map((e) => ({
+            value: e.id,
+            label: e.name,
+          }))}
+          onChange={(val) =>
+            setValue({
+              ...(value as any),
+              DonasiMaster_Ketegori: {
+                id: val,
+              },
+            })
+          }
         />
         <Stack>
           <AspectRatio ratio={16 / 9}>
             <Paper radius={"md"}>
-              <Image alt="Foto" src={"/aset/no-img.png"} />
+              <Image
+                alt="Foto"
+                src={
+                  updateImage
+                    ? updateImage
+                    : RouterDonasi.api_gambar + `${value.imagesId}`
+                }
+              />
             </Paper>
           </AspectRatio>
           <Center>
-            <Button
-              radius={"xl"}
-              variant="outline"
-              w={150}
-              leftIcon={<IconCamera />}
+            <FileButton
+              onChange={async (files: any | null) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  // console.log(buffer, "ini buffer");
+                  // console.log(files, " ini file");
+                  setUpdateImage(buffer);
+                  setFile(files);
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+              accept="image/png,image/jpeg"
             >
-              Upload
-            </Button>
+              {(props) => (
+                <Button
+                  {...props}
+                  radius={"xl"}
+                  variant="outline"
+                  w={150}
+                  leftIcon={<IconCamera />}
+                >
+                  Upload
+                </Button>
+              )}
+            </FileButton>
           </Center>
         </Stack>
         <Stack>
@@ -64,28 +120,99 @@ export default function EditDonasi() {
             withAsterisk
             label="Judul Donasi"
             placeholder="Contoh: Renovasi Masjid pada kampung, dll"
+            value={value.title}
+            onChange={(val) =>
+              setValue({
+                ...value,
+                title: val.target.value,
+              })
+            }
           />
           <TextInput
             type="number"
             withAsterisk
             label="Target Dana"
             placeholder="Masukan nominal angka"
+            value={+value.target ? +value.target : ""}
+            onChange={(val) =>
+              setValue({
+                ...value,
+                target: val.target.value,
+              })
+            }
           />
           <Select
             label="Durasi"
             placeholder="Jangka waktu penggalangan dana"
             withAsterisk
-            data={[
-              { value: "30", label: "30 Hari" },
-              { value: "60", label: "60 Hari" },
-              { value: "90", label: "90 Hari" },
-            ]}
+            value={value.DonasiMaster_Durasi.id}
+            data={durasi.map((e) => ({
+              value: e.id,
+              label: e.name + " " + `hari`,
+            }))}
+            onChange={(val) =>
+              setValue({
+                ...(value as any),
+                DonasiMaster_Durasi: {
+                  id: val,
+                },
+              })
+            }
           />
         </Stack>
-        <Button my={"lg"} radius={"xl"} onClick={() => onUpdate()}>
+        <Button
+          my={"lg"}
+          radius={"xl"}
+          onClick={() => {
+            onUpdate(value, file as any, router);
+          }}
+        >
           Update
         </Button>
+        {/* <Modal opened={opened} onClose={close} withCloseButton={false} centered >
+          <ModalEdit />
+        </Modal> */}
       </Stack>
     </>
   );
 }
+
+// function ModalEdit() {
+//   return (
+//     <>
+//     <Stack>
+//       <Title order={6}>Anda yakin menyimpan data ini ?</Title>
+//     <Group position="center">
+//         <Button variant="outline" >Batal</Button>
+//         <Button>Simpan</Button>
+//       </Group>
+//     </Stack>
+
+//     </>
+//   );
+// }
+
+async function onUpdate(value: MODEL_DONASI, file: FormData, router: any) {
+  const body = {
+    id: value.id,
+    donasiMaster_KategoriId: value.DonasiMaster_Ketegori.id,
+    donasiMaster_DurasiId: value.DonasiMaster_Durasi.id,
+    title: value.title,
+    target: value.target,
+    imagesId: value.imagesId,
+  };
+
+  const gambar = new FormData();
+  gambar.append("file", file as any);
+
+  if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
+
+  await Donasi_funUpdateDonasi(body as any, gambar).then((res) => {
+    if (res.status === 200) {
+      NotifBerhasil(res.message);
+      router.back();
+    } else {
+      NotifPeringatan(res.message);
+    }
+  });
+}