Update Versi 1.5.27 #32
@@ -1,12 +1,5 @@
|
||||
import { CreateDonasiNew } from "@/app_modules/donasi";
|
||||
|
||||
|
||||
export default async function Page() {
|
||||
// const masterKategori = await Donasi_getMasterKategori();
|
||||
// const masterDurasi = await Donasi_getMasterDurasi();
|
||||
|
||||
return (
|
||||
// <CreateDonasi masterKategori={masterKategori} masterDurasi={masterDurasi} />
|
||||
<CreateDonasiNew />
|
||||
);
|
||||
return <CreateDonasiNew />;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,8 @@
|
||||
import { EditDonasi, EditDonasiNew } from "@/app_modules/donasi";
|
||||
import { Donasi_getMasterDurasi, Donasi_getMasterKategori } from "@/app_modules/donasi/fun";
|
||||
import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
|
||||
|
||||
export default async function Page({ params }: { params: { id: string } }) {
|
||||
// const dataDonasi = await Donasi_getOneById(params.id)
|
||||
// const masterKategori = await Donasi_getMasterKategori()
|
||||
// const masterDurasi = await Donasi_getMasterDurasi()
|
||||
import { EditDonasiNew } from "@/app_modules/donasi";
|
||||
|
||||
export default async function Page() {
|
||||
return (
|
||||
<>
|
||||
{/* <EditDonasi dataDonasi={dataDonasi as any} masterKategori={masterKategori} masterDurasi={masterDurasi} /> */}
|
||||
<EditDonasiNew />
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { DIRECTORY_ID } from "@/app/lib";
|
||||
import { IRealtimeData } from "@/app/lib/global_state";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { MainColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
|
||||
import {
|
||||
ComponentGlobal_BoxUploadImage,
|
||||
ComponentGlobal_ButtonUploadFileImage,
|
||||
} from "@/app_modules/_global/component";
|
||||
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
|
||||
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
|
||||
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
|
||||
@@ -11,27 +15,25 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/noti
|
||||
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
|
||||
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
|
||||
import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
import {
|
||||
AspectRatio,
|
||||
Button,
|
||||
FileButton,
|
||||
Group,
|
||||
Center,
|
||||
Image,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Textarea,
|
||||
Textarea
|
||||
} from "@mantine/core";
|
||||
import { IconCamera, IconUpload } from "@tabler/icons-react";
|
||||
import { IconPhoto } from "@tabler/icons-react";
|
||||
import { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
|
||||
import { gs_donasi_hot_menu, gs_donasi_tabs_posting } from "../global_state";
|
||||
import { MODEL_DONASI_TEMPORARY } from "../model/interface";
|
||||
import { IRealtimeData } from "@/app/lib/global_state";
|
||||
import { WibuRealtime } from "wibu-pkg";
|
||||
import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
|
||||
import { gs_donasi_hot_menu } from "../global_state";
|
||||
import { MODEL_DONASI_TEMPORARY } from "../model/interface";
|
||||
|
||||
export default function CreateCeritaPenggalangDonasi({
|
||||
dataTemporary,
|
||||
@@ -80,9 +82,11 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
file: file as File,
|
||||
dirId: DIRECTORY_ID.donasi_cerita_image,
|
||||
});
|
||||
|
||||
if (!uploadImage.success) {
|
||||
setLoading(false);
|
||||
return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await Donasi_funCreate({
|
||||
@@ -122,21 +126,21 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
scroll: false,
|
||||
});
|
||||
}
|
||||
setLoading(false);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setLoading(false);
|
||||
clientLogger.error("Error create cerita donasi", error);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={50} px={"xl"} py={"md"}>
|
||||
<Stack spacing={50} px={"xl"} pb={"md"}>
|
||||
{/* <pre>{JSON.stringify(dataTempo, null, 2)}</pre> */}
|
||||
<Stack spacing={"sm"}>
|
||||
<ComponentGlobal_BoxInformation informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
|
||||
<ComponentGlobal_BoxInformation informasi="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
|
||||
|
||||
<Stack spacing={5}>
|
||||
<Textarea
|
||||
@@ -145,10 +149,10 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
backgroundColor: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red
|
||||
color: MainColor.red,
|
||||
},
|
||||
}}
|
||||
autosize
|
||||
@@ -157,7 +161,7 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
withAsterisk
|
||||
label="Pembukaan"
|
||||
placeholder="Pembuka cerita"
|
||||
maxLength={300}
|
||||
maxLength={500}
|
||||
onChange={(val) =>
|
||||
setData({
|
||||
...data,
|
||||
@@ -166,7 +170,7 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
}
|
||||
/>
|
||||
<ComponentGlobal_InputCountDown
|
||||
maxInput={300}
|
||||
maxInput={500}
|
||||
lengthInput={data.pembukaan.length}
|
||||
/>
|
||||
</Stack>
|
||||
@@ -178,10 +182,10 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
backgroundColor: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red
|
||||
color: MainColor.red,
|
||||
},
|
||||
}}
|
||||
autosize
|
||||
@@ -190,7 +194,7 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
withAsterisk
|
||||
label="Cerita"
|
||||
placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
|
||||
maxLength={300}
|
||||
maxLength={1000}
|
||||
onChange={(val) =>
|
||||
setData({
|
||||
...data,
|
||||
@@ -199,7 +203,7 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
}
|
||||
/>
|
||||
<ComponentGlobal_InputCountDown
|
||||
maxInput={300}
|
||||
maxInput={1000}
|
||||
lengthInput={data.cerita.length}
|
||||
/>
|
||||
</Stack>
|
||||
@@ -217,59 +221,33 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<Stack justify="center" align="center" h={"100%"}>
|
||||
<IconUpload color={MainColor.white} />
|
||||
<Text fz={10} fs={"italic"} c={MainColor.white} fw={"bold"}>
|
||||
Upload Gambar
|
||||
</Text>
|
||||
<IconPhoto size={100} />
|
||||
</Stack>
|
||||
)}
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
|
||||
{/* Upload Foto */}
|
||||
<Group position="center">
|
||||
<FileButton
|
||||
onChange={async (files: any) => {
|
||||
try {
|
||||
const buffer = URL.createObjectURL(
|
||||
new Blob([new Uint8Array(await files.arrayBuffer())])
|
||||
);
|
||||
setImg(buffer);
|
||||
setFile(files);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}}
|
||||
accept="image/png,image/jpeg"
|
||||
>
|
||||
{(props) => (
|
||||
<Button
|
||||
{...props}
|
||||
leftIcon={<IconCamera color="black" />}
|
||||
radius={50}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload Gambar
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Group>
|
||||
<Center>
|
||||
<ComponentGlobal_ButtonUploadFileImage
|
||||
onSetFile={setFile}
|
||||
onSetImage={setImg}
|
||||
/>
|
||||
</Center>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack spacing={"sm"}>
|
||||
<ComponentGlobal_BoxInformation informasi="Lengkapi nama bank dan rekening di bawah untuk mempermudah admin jika penggalangan dana ini telah di publish!" />
|
||||
<ComponentGlobal_BoxInformation informasi="Pastikan Anda mengisi nama bank dan nomor rekening dengan benar. Informasi ini akan membantu admin memverifikasi dan memproses penggalangan dana Anda dengan cepat dan tepat setelah penggalangan dana dipublikasikan." />
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
backgroundColor: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red
|
||||
color: MainColor.red,
|
||||
},
|
||||
}}
|
||||
withAsterisk
|
||||
@@ -289,10 +267,10 @@ export default function CreateCeritaPenggalangDonasi({
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
backgroundColor: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red
|
||||
color: MainColor.red,
|
||||
},
|
||||
}}
|
||||
withAsterisk
|
||||
|
||||
@@ -2,13 +2,26 @@
|
||||
import { DIRECTORY_ID } from "@/app/lib";
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { MainColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
|
||||
import {
|
||||
ComponentGlobal_BoxUploadImage,
|
||||
ComponentGlobal_ButtonUploadFileImage,
|
||||
} from "@/app_modules/_global/component";
|
||||
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
|
||||
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
|
||||
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
|
||||
import { AspectRatio, Button, FileButton, Group, Image, Select, Stack, Text, TextInput, } from "@mantine/core";
|
||||
import { IconCamera, IconUpload } from "@tabler/icons-react";
|
||||
import {
|
||||
AspectRatio,
|
||||
Button,
|
||||
Center,
|
||||
Image,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { IconPhoto } from "@tabler/icons-react";
|
||||
import { useAtom } from "jotai";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
@@ -16,279 +29,290 @@ import { useState } from "react";
|
||||
import Donasi_funCreateTemporary from "../fun/create/fun_create_donasi_temporary";
|
||||
import { gs_donasi_tabs_posting } from "../global_state";
|
||||
import { apiGetMasterDonasi } from "../lib/api_donasi";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
|
||||
export default function CreateDonasiNew() {
|
||||
const router = useRouter();
|
||||
const [loadingMaster, setLoadingMaster] = useState(true)
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
const [kategori, setKategori] = useState<any[]>([]);
|
||||
const [durasi, setDurasi] = useState<any[]>([]);
|
||||
const [data, setData] = useState({
|
||||
kategoriId: "",
|
||||
title: "",
|
||||
target: "",
|
||||
durasiId: "",
|
||||
});
|
||||
const [targetDana, setTargetDana] = useState("");
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [img, setImg] = useState<any | null>();
|
||||
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
|
||||
gs_donasi_tabs_posting
|
||||
);
|
||||
const router = useRouter();
|
||||
const [loadingMaster, setLoadingMaster] = useState(true);
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
const [kategori, setKategori] = useState<any[]>([]);
|
||||
const [durasi, setDurasi] = useState<any[]>([]);
|
||||
const [data, setData] = useState({
|
||||
kategoriId: "",
|
||||
title: "",
|
||||
target: "",
|
||||
durasiId: "",
|
||||
});
|
||||
const [targetDana, setTargetDana] = useState("");
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [img, setImg] = useState<any | null>();
|
||||
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
|
||||
gs_donasi_tabs_posting
|
||||
);
|
||||
|
||||
async function onGetMaster() {
|
||||
try {
|
||||
setLoadingMaster(true)
|
||||
const responseKategori = await apiGetMasterDonasi("?cat=kategori")
|
||||
const responseDurasi = await apiGetMasterDonasi("?cat=durasi")
|
||||
if (responseKategori.success) {
|
||||
setKategori(responseKategori.data)
|
||||
}
|
||||
if (responseDurasi.success) {
|
||||
setDurasi(responseDurasi.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingMaster(false)
|
||||
async function onGetMaster() {
|
||||
try {
|
||||
setLoadingMaster(true);
|
||||
const responseKategori = await apiGetMasterDonasi("?cat=kategori");
|
||||
const responseDurasi = await apiGetMasterDonasi("?cat=durasi");
|
||||
if (responseKategori.success) {
|
||||
setKategori(responseKategori.data);
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
onGetMaster()
|
||||
}, [])
|
||||
|
||||
async function onCreate() {
|
||||
const body = {
|
||||
donasiMaster_KategoriId: data.kategoriId,
|
||||
donasiMaster_DurasiId: data.durasiId,
|
||||
title: data.title,
|
||||
target: targetDana,
|
||||
};
|
||||
|
||||
if (_.values(body).includes(""))
|
||||
return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const uploadImage = await funGlobal_UploadToStorage({
|
||||
file: file as File,
|
||||
dirId: DIRECTORY_ID.donasi_image,
|
||||
});
|
||||
if (!uploadImage.success) {
|
||||
setLoading(false);
|
||||
return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
}
|
||||
|
||||
const res = await Donasi_funCreateTemporary({
|
||||
data: body as any,
|
||||
fileId: uploadImage.data.id,
|
||||
});
|
||||
if (res.status === 201) {
|
||||
setTabsPostingDonasi("Review");
|
||||
router.push(RouterDonasi.create_cerita_penggalang + `${res.donasiId}`);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
if (responseDurasi.success) {
|
||||
setDurasi(responseDurasi.data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingMaster(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"md"} px={"xl"}>
|
||||
<ComponentGlobal_BoxInformation informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita Penggalangan Dana!" />
|
||||
<Select
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red
|
||||
},
|
||||
dropdown: {
|
||||
backgroundColor: MainColor.white
|
||||
}
|
||||
}}
|
||||
label="Kategori"
|
||||
placeholder={loadingMaster ? "Loading..." : "Pilih kategori penggalangan dana"}
|
||||
withAsterisk
|
||||
data={kategori.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name,
|
||||
}))}
|
||||
onChange={(val: string) =>
|
||||
setData({
|
||||
...data,
|
||||
kategoriId: val,
|
||||
})
|
||||
}
|
||||
useShallowEffect(() => {
|
||||
onGetMaster();
|
||||
}, []);
|
||||
|
||||
async function onCreate() {
|
||||
const body = {
|
||||
donasiMaster_KategoriId: data.kategoriId,
|
||||
donasiMaster_DurasiId: data.durasiId,
|
||||
title: data.title,
|
||||
target: targetDana,
|
||||
};
|
||||
|
||||
if (_.values(body).includes(""))
|
||||
return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const uploadImage = await funGlobal_UploadToStorage({
|
||||
file: file as File,
|
||||
dirId: DIRECTORY_ID.donasi_image,
|
||||
});
|
||||
|
||||
if (!uploadImage.success) {
|
||||
setLoading(false);
|
||||
ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await Donasi_funCreateTemporary({
|
||||
data: body as any,
|
||||
fileId: uploadImage.data.id,
|
||||
});
|
||||
|
||||
if (res.status === 201) {
|
||||
setTabsPostingDonasi("Review");
|
||||
router.push(RouterDonasi.create_cerita_penggalang + `${res.donasiId}`);
|
||||
} else {
|
||||
setLoading(false);
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
setLoading(false);
|
||||
clientLogger.error("Error create donasi", error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"md"} px={"xl"}>
|
||||
<ComponentGlobal_BoxInformation informasi="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
|
||||
<Select
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
},
|
||||
dropdown: {
|
||||
backgroundColor: MainColor.white,
|
||||
},
|
||||
}}
|
||||
label="Kategori"
|
||||
placeholder={
|
||||
loadingMaster ? "Loading..." : "Pilih kategori penggalangan dana"
|
||||
}
|
||||
withAsterisk
|
||||
data={kategori.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name,
|
||||
}))}
|
||||
onChange={(val: string) =>
|
||||
setData({
|
||||
...data,
|
||||
kategoriId: val,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<Stack>
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
},
|
||||
}}
|
||||
withAsterisk
|
||||
label="Judul Donasi"
|
||||
placeholder="Contoh: Renovasi Masjid pada kampung, dll"
|
||||
maxLength={100}
|
||||
onChange={(val) => {
|
||||
setData({ ...data, title: val.target.value });
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
},
|
||||
}}
|
||||
icon={<Text fw={"bold"}>Rp.</Text>}
|
||||
min={0}
|
||||
withAsterisk
|
||||
label="Target Dana"
|
||||
placeholder="0"
|
||||
value={data.target}
|
||||
onChange={(val) => {
|
||||
const match = val.currentTarget.value
|
||||
.replace(/\./g, "")
|
||||
.match(/^[0-9]+$/);
|
||||
|
||||
if (val.currentTarget.value === "")
|
||||
return setData({
|
||||
...data,
|
||||
target: 0 + "",
|
||||
});
|
||||
if (!match?.[0]) return null;
|
||||
|
||||
const nilai = val.currentTarget.value.replace(/\./g, "");
|
||||
const target = Intl.NumberFormat("id-ID").format(+nilai);
|
||||
|
||||
setTargetDana(nilai);
|
||||
setData({
|
||||
...data,
|
||||
target,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
},
|
||||
dropdown: {
|
||||
backgroundColor: MainColor.white,
|
||||
},
|
||||
}}
|
||||
label="Durasi"
|
||||
placeholder={
|
||||
loadingMaster ? "Loading..." : "Jangka waktu penggalangan dana"
|
||||
}
|
||||
withAsterisk
|
||||
data={durasi.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name + " " + `hari`,
|
||||
}))}
|
||||
onChange={(val: string) => setData({ ...data, durasiId: val })}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<ComponentGlobal_BoxUploadImage>
|
||||
{img ? (
|
||||
<AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
|
||||
<Image
|
||||
style={{ maxHeight: 250 }}
|
||||
alt="Foto"
|
||||
height={250}
|
||||
src={img}
|
||||
/>
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<Stack justify="center" align="center" h={"100%"}>
|
||||
<IconPhoto size={100} />
|
||||
</Stack>
|
||||
)}
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
|
||||
<Center>
|
||||
<ComponentGlobal_ButtonUploadFileImage
|
||||
onSetFile={setFile}
|
||||
onSetImage={setImg}
|
||||
/>
|
||||
</Center>
|
||||
|
||||
<Stack>
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red
|
||||
}
|
||||
}}
|
||||
withAsterisk
|
||||
label="Judul Donasi"
|
||||
placeholder="Contoh: Renovasi Masjid pada kampung, dll"
|
||||
maxLength={100}
|
||||
onChange={(val) => {
|
||||
setData({ ...data, title: val.target.value });
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red
|
||||
}
|
||||
}}
|
||||
icon={<Text fw={"bold"}>Rp.</Text>}
|
||||
min={0}
|
||||
withAsterisk
|
||||
label="Target Dana"
|
||||
placeholder="0"
|
||||
value={data.target}
|
||||
onChange={(val) => {
|
||||
const match = val.currentTarget.value
|
||||
.replace(/\./g, "")
|
||||
.match(/^[0-9]+$/);
|
||||
|
||||
if (val.currentTarget.value === "")
|
||||
return setData({
|
||||
...data,
|
||||
target: 0 + "",
|
||||
});
|
||||
if (!match?.[0]) return null;
|
||||
|
||||
const nilai = val.currentTarget.value.replace(/\./g, "");
|
||||
const target = Intl.NumberFormat("id-ID").format(+nilai);
|
||||
|
||||
setTargetDana(nilai);
|
||||
setData({
|
||||
...data,
|
||||
target,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red
|
||||
},
|
||||
dropdown: {
|
||||
backgroundColor: MainColor.white
|
||||
}
|
||||
}}
|
||||
label="Durasi"
|
||||
placeholder={loadingMaster ? "Loading..." : "Jangka waktu penggalangan dana"}
|
||||
withAsterisk
|
||||
data={durasi.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name + " " + `hari`,
|
||||
}))}
|
||||
onChange={(val: string) => setData({ ...data, durasiId: val })}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<ComponentGlobal_BoxUploadImage>
|
||||
{img ? (
|
||||
<AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
|
||||
<Image
|
||||
style={{ maxHeight: 250 }}
|
||||
alt="Foto"
|
||||
height={250}
|
||||
src={img}
|
||||
/>
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<Stack justify="center" align="center" h={"100%"}>
|
||||
<IconUpload color={MainColor.white} />
|
||||
<Text fz={10} fs={"italic"} c={MainColor.white} fw={"bold"}>
|
||||
Upload Gambar
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
|
||||
{/* Upload Foto */}
|
||||
<Group position="center">
|
||||
<FileButton
|
||||
onChange={async (files: any) => {
|
||||
try {
|
||||
const buffer = URL.createObjectURL(
|
||||
new Blob([new Uint8Array(await files.arrayBuffer())])
|
||||
);
|
||||
setImg(buffer);
|
||||
setFile(files);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}}
|
||||
accept="image/png,image/jpeg"
|
||||
>
|
||||
{(props) => (
|
||||
<Button
|
||||
{...props}
|
||||
leftIcon={<IconCamera color="black" />}
|
||||
radius={50}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload Gambar
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
disabled={_.values(data).includes("") || file === null ? true : false}
|
||||
loaderPosition="center"
|
||||
loading={isLoading ? true : false}
|
||||
my={"lg"}
|
||||
radius={"xl"}
|
||||
onClick={() => onCreate()}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
{/* Upload Foto */}
|
||||
{/* <Group position="center">
|
||||
<FileButton
|
||||
onChange={async (files: any) => {
|
||||
try {
|
||||
const buffer = URL.createObjectURL(
|
||||
new Blob([new Uint8Array(await files.arrayBuffer())])
|
||||
);
|
||||
setImg(buffer);
|
||||
setFile(files);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}}
|
||||
accept="image/png,image/jpeg"
|
||||
>
|
||||
Selanjutnya
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
{(props) => (
|
||||
<Button
|
||||
{...props}
|
||||
leftIcon={<IconCamera color="black" />}
|
||||
radius={50}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload Gambar
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Group> */}
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
disabled={_.values(data).includes("") || !file}
|
||||
loaderPosition="center"
|
||||
loading={isLoading ? true : false}
|
||||
my={"lg"}
|
||||
radius={"xl"}
|
||||
onClick={() => onCreate()}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Selanjutnya
|
||||
</Button>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { DIRECTORY_ID } from "@/app/lib";
|
||||
import { MainColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import {
|
||||
ComponentGlobal_BoxUploadImage,
|
||||
ComponentGlobal_ButtonUploadFileImage,
|
||||
ComponentGlobal_LoadImageCustom,
|
||||
} from "@/app_modules/_global/component";
|
||||
import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
|
||||
@@ -15,16 +16,15 @@ import {
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
|
||||
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
|
||||
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
import {
|
||||
AspectRatio,
|
||||
Button,
|
||||
Center,
|
||||
FileButton,
|
||||
Image,
|
||||
Stack,
|
||||
Textarea,
|
||||
} from "@mantine/core";
|
||||
import { IconCamera } from "@tabler/icons-react";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
@@ -60,9 +60,11 @@ export default function EditCeritaPenggalangDonasi({
|
||||
file: file as File,
|
||||
dirId: DIRECTORY_ID.donasi_cerita_image,
|
||||
});
|
||||
|
||||
if (!uploadImage.success) {
|
||||
setLoading(false);
|
||||
ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
return;
|
||||
}
|
||||
|
||||
const deleteImage = await funGlobal_DeleteFileById({
|
||||
@@ -70,7 +72,7 @@ export default function EditCeritaPenggalangDonasi({
|
||||
});
|
||||
if (!deleteImage.success) {
|
||||
setLoading(false);
|
||||
ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama");
|
||||
clientLogger.error("Gagal hapus gambar lama");
|
||||
}
|
||||
|
||||
const res = await Donasi_funUpdateCerita({
|
||||
@@ -80,7 +82,6 @@ export default function EditCeritaPenggalangDonasi({
|
||||
if (res.status === 200) {
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
router.back();
|
||||
setLoading(false);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
setLoading(false);
|
||||
@@ -93,14 +94,14 @@ export default function EditCeritaPenggalangDonasi({
|
||||
if (res.status === 200) {
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
router.back();
|
||||
setLoading(false);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setLoading(false);
|
||||
clientLogger.error("Error update cerita penggalangan", error);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -114,6 +115,7 @@ export default function EditCeritaPenggalangDonasi({
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
maxLength={500}
|
||||
autosize
|
||||
minRows={2}
|
||||
maxRows={7}
|
||||
@@ -137,11 +139,11 @@ export default function EditCeritaPenggalangDonasi({
|
||||
/>
|
||||
<ComponentGlobal_InputCountDown
|
||||
lengthInput={data.pembukaan.length}
|
||||
maxInput={300}
|
||||
maxInput={500}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<Stack spacing={0}>
|
||||
<ComponentGlobal_BoxUploadImage>
|
||||
{updateImage ? (
|
||||
<AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
|
||||
@@ -163,34 +165,10 @@ export default function EditCeritaPenggalangDonasi({
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
|
||||
<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"}
|
||||
leftIcon={<IconCamera />}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
<ComponentGlobal_ButtonUploadFileImage
|
||||
onSetFile={setFile}
|
||||
onSetImage={setUpdateImage}
|
||||
/>
|
||||
</Center>
|
||||
</Stack>
|
||||
|
||||
@@ -201,6 +179,7 @@ export default function EditCeritaPenggalangDonasi({
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
maxLength={1000}
|
||||
autosize
|
||||
minRows={2}
|
||||
maxRows={7}
|
||||
@@ -224,11 +203,12 @@ export default function EditCeritaPenggalangDonasi({
|
||||
/>
|
||||
<ComponentGlobal_InputCountDown
|
||||
lengthInput={data.cerita.length}
|
||||
maxInput={300}
|
||||
maxInput={1000}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
my={"lg"}
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
@@ -247,7 +227,6 @@ export default function EditCeritaPenggalangDonasi({
|
||||
Update
|
||||
</Button>
|
||||
</Stack>
|
||||
{/* <pre> {JSON.stringify(value.pembukaan, null, 2)}</pre> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,32 @@
|
||||
"use client";
|
||||
import { DIRECTORY_ID } from "@/app/lib";
|
||||
import { MainColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import { ComponentGlobal_BoxUploadImage, ComponentGlobal_LoadImageCustom, } from "@/app_modules/_global/component";
|
||||
import {
|
||||
ComponentGlobal_BoxUploadImage,
|
||||
ComponentGlobal_ButtonUploadFileImage,
|
||||
ComponentGlobal_LoadImageCustom,
|
||||
} from "@/app_modules/_global/component";
|
||||
import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
|
||||
import { funGlobal_DeleteFileById, funGlobal_UploadToStorage, } from "@/app_modules/_global/fun";
|
||||
import { ComponentGlobal_NotifikasiBerhasil, ComponentGlobal_NotifikasiPeringatan, } from "@/app_modules/_global/notif_global";
|
||||
import { AspectRatio, Button, Center, FileButton, Image, Select, Stack, Text, TextInput, } from "@mantine/core";
|
||||
import {
|
||||
funGlobal_DeleteFileById,
|
||||
funGlobal_UploadToStorage,
|
||||
} from "@/app_modules/_global/fun";
|
||||
import {
|
||||
ComponentGlobal_NotifikasiBerhasil,
|
||||
ComponentGlobal_NotifikasiPeringatan,
|
||||
} from "@/app_modules/_global/notif_global";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
import {
|
||||
AspectRatio,
|
||||
Button,
|
||||
Center,
|
||||
Image,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { IconCamera } from "@tabler/icons-react";
|
||||
import _ from "lodash";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
@@ -17,171 +36,183 @@ import { MODEL_DONASI } from "../../model/interface";
|
||||
import SkeletonEditDonasi from "./skeleton_edit_donasi";
|
||||
|
||||
export default function EditDonasiNew() {
|
||||
const router = useRouter();
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
const [data, setData] = useState<MODEL_DONASI>();
|
||||
const [kategori, setKategori] = useState<any[]>([]);
|
||||
const [durasi, setDurasi] = useState<any[]>([]);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [updateImage, setUpdateImage] = useState<any | null>();
|
||||
const [newTarget, setNewTarget] = useState("");
|
||||
const [loadingMaster, setLoadingMaster] = useState(true)
|
||||
const param = useParams<{ id: string }>();
|
||||
const [loadingData, setLoadingData] = useState(true)
|
||||
const router = useRouter();
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
const [data, setData] = useState<MODEL_DONASI>();
|
||||
const [kategori, setKategori] = useState<any[]>([]);
|
||||
const [durasi, setDurasi] = useState<any[]>([]);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [updateImage, setUpdateImage] = useState<any | null>();
|
||||
const [newTarget, setNewTarget] = useState("");
|
||||
const [loadingMaster, setLoadingMaster] = useState(true);
|
||||
const param = useParams<{ id: string }>();
|
||||
const [loadingData, setLoadingData] = useState(true);
|
||||
|
||||
|
||||
async function onGetMaster() {
|
||||
try {
|
||||
setLoadingMaster(true)
|
||||
const responseKategori = await apiGetMasterDonasi("?cat=kategori")
|
||||
const responseDurasi = await apiGetMasterDonasi("?cat=durasi")
|
||||
if (responseKategori.success) {
|
||||
setKategori(responseKategori.data)
|
||||
}
|
||||
if (responseDurasi.success) {
|
||||
setDurasi(responseDurasi.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingMaster(false)
|
||||
async function onGetMaster() {
|
||||
try {
|
||||
setLoadingMaster(true);
|
||||
const responseKategori = await apiGetMasterDonasi("?cat=kategori");
|
||||
const responseDurasi = await apiGetMasterDonasi("?cat=durasi");
|
||||
if (responseKategori.success) {
|
||||
setKategori(responseKategori.data);
|
||||
}
|
||||
}
|
||||
|
||||
async function onGetData() {
|
||||
try {
|
||||
setLoadingData(true)
|
||||
const response = await apiGetOneDonasiById(param.id, "semua")
|
||||
if (response.success) {
|
||||
setData(response.data)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingData(false)
|
||||
if (responseDurasi.success) {
|
||||
setDurasi(responseDurasi.data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoadingMaster(false);
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
onGetMaster()
|
||||
onGetData()
|
||||
}, [])
|
||||
|
||||
async function onUpdate() {
|
||||
setLoading(true);
|
||||
const body = {
|
||||
id: data?.id,
|
||||
donasiMaster_KategoriId: data?.DonasiMaster_Ketegori.id,
|
||||
donasiMaster_DurasiId: data?.DonasiMaster_Durasi.id,
|
||||
title: data?.title,
|
||||
target: data?.target,
|
||||
};
|
||||
|
||||
if (_.values(body).includes(""))
|
||||
return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
|
||||
|
||||
try {
|
||||
if (file !== null) {
|
||||
const uploadImage = await funGlobal_UploadToStorage({
|
||||
file: file as File,
|
||||
dirId: DIRECTORY_ID.donasi_image,
|
||||
});
|
||||
if (!uploadImage.success) {
|
||||
setLoading(false);
|
||||
ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
}
|
||||
|
||||
const deleteImage = await funGlobal_DeleteFileById({
|
||||
fileId: String(data?.imageId),
|
||||
});
|
||||
if (!deleteImage.success) {
|
||||
setLoading(false);
|
||||
ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama");
|
||||
}
|
||||
|
||||
const res = await Donasi_funUpdateDonasi({
|
||||
data: body as any,
|
||||
fileId: uploadImage.data.id,
|
||||
});
|
||||
if (res.status === 200) {
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
router.back();
|
||||
setLoading(false);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiPeringatan(res.message);
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
const res = await Donasi_funUpdateDonasi({
|
||||
data: body as any,
|
||||
});
|
||||
if (res.status === 200) {
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
router.back();
|
||||
setLoading(false);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiPeringatan(res.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
async function onGetData() {
|
||||
try {
|
||||
setLoadingData(true);
|
||||
const response = await apiGetOneDonasiById(param.id, "semua");
|
||||
if (response.success) {
|
||||
setData(response.data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingData(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
loadingData ? <SkeletonEditDonasi />
|
||||
:
|
||||
<Stack spacing={"md"} px={"sm"}>
|
||||
<Select
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
label="Kategori"
|
||||
placeholder={loadingMaster ? "Loading..." : "Pilih kategori penggalangan dana"}
|
||||
value={data?.DonasiMaster_Ketegori.id}
|
||||
withAsterisk
|
||||
data={kategori.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name,
|
||||
}))}
|
||||
onChange={(val) =>
|
||||
setData({
|
||||
...(data as any),
|
||||
DonasiMaster_Ketegori: {
|
||||
id: val,
|
||||
},
|
||||
})
|
||||
}
|
||||
useShallowEffect(() => {
|
||||
onGetMaster();
|
||||
onGetData();
|
||||
}, []);
|
||||
|
||||
async function onUpdate() {
|
||||
setLoading(true);
|
||||
const body = {
|
||||
id: data?.id,
|
||||
donasiMaster_KategoriId: data?.DonasiMaster_Ketegori.id,
|
||||
donasiMaster_DurasiId: data?.DonasiMaster_Durasi.id,
|
||||
title: data?.title,
|
||||
target: data?.target,
|
||||
};
|
||||
|
||||
if (_.values(body).includes(""))
|
||||
return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
|
||||
|
||||
try {
|
||||
if (file != null) {
|
||||
const uploadImage = await funGlobal_UploadToStorage({
|
||||
file: file as File,
|
||||
dirId: DIRECTORY_ID.donasi_image,
|
||||
});
|
||||
|
||||
if (!uploadImage.success) {
|
||||
setLoading(false);
|
||||
ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
return;
|
||||
}
|
||||
|
||||
const deleteImage = await funGlobal_DeleteFileById({
|
||||
fileId: String(data?.imageId),
|
||||
dirId: DIRECTORY_ID.donasi_image,
|
||||
});
|
||||
|
||||
if (!deleteImage.success) {
|
||||
setLoading(false);
|
||||
clientLogger.error("Gagal hapus gambar lama");
|
||||
}
|
||||
|
||||
const res = await Donasi_funUpdateDonasi({
|
||||
data: body as any,
|
||||
fileId: uploadImage.data.id,
|
||||
});
|
||||
|
||||
if (res.status === 200) {
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
router.back();
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiPeringatan(res.message);
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
const res = await Donasi_funUpdateDonasi({
|
||||
data: body as any,
|
||||
});
|
||||
|
||||
if (res.status === 200) {
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
router.back();
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiPeringatan(res.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
setLoading(false);
|
||||
clientLogger.error("Error update data donasi", error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{loadingData ? (
|
||||
<SkeletonEditDonasi />
|
||||
) : (
|
||||
<Stack spacing={"md"} px={"sm"}>
|
||||
<Select
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
label="Kategori"
|
||||
placeholder={
|
||||
loadingMaster ? "Loading..." : "Pilih kategori penggalangan dana"
|
||||
}
|
||||
value={data?.DonasiMaster_Ketegori.id}
|
||||
withAsterisk
|
||||
data={kategori.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name,
|
||||
}))}
|
||||
onChange={(val) =>
|
||||
setData({
|
||||
...(data as any),
|
||||
DonasiMaster_Ketegori: {
|
||||
id: val,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<Stack>
|
||||
<ComponentGlobal_BoxUploadImage>
|
||||
{updateImage ? (
|
||||
<AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
|
||||
<Image
|
||||
style={{ maxHeight: 250 }}
|
||||
alt="Foto"
|
||||
height={250}
|
||||
src={updateImage}
|
||||
/>
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<Stack align="center" justify="center" p={"xs"} h={"100%"}>
|
||||
<ComponentGlobal_LoadImageCustom
|
||||
fileId={String(data?.imageId)}
|
||||
height={200}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
|
||||
<Stack>
|
||||
<ComponentGlobal_BoxUploadImage>
|
||||
{updateImage ? (
|
||||
<AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
|
||||
<Image
|
||||
style={{ maxHeight: 250 }}
|
||||
alt="Foto"
|
||||
height={250}
|
||||
src={updateImage}
|
||||
/>
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<Stack align="center" justify="center" p={"xs"} h={"100%"}>
|
||||
<ComponentGlobal_LoadImageCustom
|
||||
fileId={String(data?.imageId)}
|
||||
height={200}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
<Center>
|
||||
<ComponentGlobal_ButtonUploadFileImage
|
||||
onSetFile={setFile}
|
||||
onSetImage={setUpdateImage}
|
||||
/>
|
||||
</Center>
|
||||
|
||||
<Center>
|
||||
{/* <Center>
|
||||
<FileButton
|
||||
onChange={async (files: any | null) => {
|
||||
try {
|
||||
@@ -210,127 +241,127 @@ export default function EditDonasiNew() {
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
</Center>
|
||||
</Stack>
|
||||
</Center> */}
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
withAsterisk
|
||||
label="Judul Donasi"
|
||||
placeholder="Contoh: Renovasi Masjid pada kampung, dll"
|
||||
value={data?.title}
|
||||
maxLength={100}
|
||||
error={
|
||||
data?.title === "" ? (
|
||||
<ComponentGlobal_ErrorInput text="Masukan judul" />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
onChange={(val) =>
|
||||
setData({
|
||||
...data as any,
|
||||
title: val.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Stack>
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
withAsterisk
|
||||
label="Judul Donasi"
|
||||
placeholder="Contoh: Renovasi Masjid pada kampung, dll"
|
||||
value={data?.title}
|
||||
maxLength={100}
|
||||
error={
|
||||
data?.title === "" ? (
|
||||
<ComponentGlobal_ErrorInput text="Masukan judul" />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
onChange={(val) =>
|
||||
setData({
|
||||
...(data as any),
|
||||
title: val.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
icon={<Text fw={"bold"}>Rp.</Text>}
|
||||
min={0}
|
||||
withAsterisk
|
||||
label="Target Dana"
|
||||
placeholder="0"
|
||||
value={newTarget ? newTarget : data?.target}
|
||||
error={
|
||||
data?.target === "" || data?.target === "0" ? (
|
||||
<ComponentGlobal_ErrorInput text="Masukan target dana" />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
onChange={(val) => {
|
||||
const match = val.currentTarget.value
|
||||
.replace(/\./g, "")
|
||||
.match(/^[0-9]+$/);
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
icon={<Text fw={"bold"}>Rp.</Text>}
|
||||
min={0}
|
||||
withAsterisk
|
||||
label="Target Dana"
|
||||
placeholder="0"
|
||||
value={newTarget ? newTarget : data?.target}
|
||||
error={
|
||||
data?.target === "" || data?.target === "0" ? (
|
||||
<ComponentGlobal_ErrorInput text="Masukan target dana" />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
onChange={(val) => {
|
||||
const match = val.currentTarget.value
|
||||
.replace(/\./g, "")
|
||||
.match(/^[0-9]+$/);
|
||||
|
||||
if (val.currentTarget.value === "") {
|
||||
setData({
|
||||
...data as any,
|
||||
target: 0 + "",
|
||||
});
|
||||
setNewTarget("0");
|
||||
}
|
||||
if (val.currentTarget.value === "") {
|
||||
setData({
|
||||
...(data as any),
|
||||
target: 0 + "",
|
||||
});
|
||||
setNewTarget("0");
|
||||
}
|
||||
|
||||
if (!match?.[0]) return null;
|
||||
if (!match?.[0]) return null;
|
||||
|
||||
const nilai = val.currentTarget.value.replace(/\./g, "");
|
||||
const target = Intl.NumberFormat("id-ID").format(+nilai);
|
||||
const nilai = val.currentTarget.value.replace(/\./g, "");
|
||||
const target = Intl.NumberFormat("id-ID").format(+nilai);
|
||||
|
||||
setNewTarget(target);
|
||||
setNewTarget(target);
|
||||
|
||||
setData({
|
||||
...data as any,
|
||||
target: nilai,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
label="Durasi"
|
||||
placeholder={loadingMaster ? "Loading..." : "Jangka waktu penggalangan dana"}
|
||||
withAsterisk
|
||||
value={data?.DonasiMaster_Durasi.id}
|
||||
data={durasi.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name + " " + `hari`,
|
||||
}))}
|
||||
onChange={(val) =>
|
||||
setData({
|
||||
...(data as any),
|
||||
DonasiMaster_Durasi: {
|
||||
id: val,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Button
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
disabled={data?.title === "" || data?.target === "0" ? true : false}
|
||||
loaderPosition="center"
|
||||
loading={isLoading ? true : false}
|
||||
my={"lg"}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onUpdate();
|
||||
}}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
}
|
||||
|
||||
</>
|
||||
);
|
||||
setData({
|
||||
...(data as any),
|
||||
target: nilai,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
styles={{
|
||||
label: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
label="Durasi"
|
||||
placeholder={
|
||||
loadingMaster ? "Loading..." : "Jangka waktu penggalangan dana"
|
||||
}
|
||||
withAsterisk
|
||||
value={data?.DonasiMaster_Durasi.id}
|
||||
data={durasi.map((e) => ({
|
||||
value: e.id,
|
||||
label: e.name + " " + `hari`,
|
||||
}))}
|
||||
onChange={(val) =>
|
||||
setData({
|
||||
...(data as any),
|
||||
DonasiMaster_Durasi: {
|
||||
id: val,
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
<Button
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
disabled={data?.title === "" || data?.target === "0" ? true : false}
|
||||
loaderPosition="center"
|
||||
loading={isLoading ? true : false}
|
||||
my={"lg"}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onUpdate();
|
||||
}}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</Stack>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,10 +12,10 @@ export default function SkeletonEditDonasi() {
|
||||
</Stack>
|
||||
|
||||
<Stack align="center">
|
||||
{[...Array(5)].map((_, index) => (
|
||||
{[...Array(3)].map((_, index) => (
|
||||
<CustomSkeleton key={index} height={40} width={"100%"} my={"xs"} />
|
||||
))}
|
||||
<CustomSkeleton height={40} width={"100%"} radius={"lg"} mt={30} />
|
||||
<CustomSkeleton height={40} width={"100%"} radius={"xl"} mt={30} />
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -33,6 +33,8 @@ import TampilanRupiahDonasi from "../../component/tampilan_rupiah";
|
||||
import { Donasi_funUpdateStatusInvoice } from "../../fun/update/fun_update_status_invoice";
|
||||
import { gs_donasi_hot_menu } from "../../global_state";
|
||||
import { MODEL_DONASI_INVOICE } from "../../model/interface";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
import { ComponentGlobal_ButtonUploadFileImage } from "@/app_modules/_global/component";
|
||||
|
||||
export default function Donasi_InvoiceProses({
|
||||
dataInvoice,
|
||||
@@ -55,7 +57,8 @@ export default function Donasi_InvoiceProses({
|
||||
|
||||
if (!uploadImage.success) {
|
||||
setLoading(false);
|
||||
return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await Donasi_funUpdateStatusInvoice({
|
||||
@@ -64,15 +67,6 @@ export default function Donasi_InvoiceProses({
|
||||
fileId: uploadImage.data.id,
|
||||
});
|
||||
if (res.status === 200) {
|
||||
// const dataNotif: any = {
|
||||
// appId: res.data?.Donasi?.id as any,
|
||||
// userId: res.data?.Donasi?.authorId as any,
|
||||
// pesan: res.data?.Donasi?.title as any,
|
||||
// status: res.data?.DonasiMaster_StatusInvoice?.name,
|
||||
// kategoriApp: "DONASI",
|
||||
// title: "Donatur melakukan transfer",
|
||||
// };
|
||||
|
||||
const dataNotifikasi: IRealtimeData = {
|
||||
appId: res.data?.Donasi?.id as any,
|
||||
status: res.data?.DonasiMaster_StatusInvoice?.name as any,
|
||||
@@ -87,22 +81,22 @@ export default function Donasi_InvoiceProses({
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
WibuRealtime.setData({
|
||||
type: "notification",
|
||||
pushNotificationTo: "ADMIN",
|
||||
});
|
||||
WibuRealtime.setData({
|
||||
type: "notification",
|
||||
pushNotificationTo: "ADMIN",
|
||||
});
|
||||
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
setActive(2);
|
||||
router.push(RouterDonasi.proses_transaksi + `${invoice.id}`);
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setLoading(false);
|
||||
clientLogger.error("Error upload data invoice", error);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -259,35 +253,9 @@ export default function Donasi_InvoiceProses({
|
||||
>
|
||||
<Stack spacing={"sm"}>
|
||||
<Center>
|
||||
<FileButton
|
||||
onChange={async (files: any | null) => {
|
||||
try {
|
||||
// const buffer = URL.createObjectURL(
|
||||
// new Blob([new Uint8Array(await files.arrayBuffer())])
|
||||
// );
|
||||
// console.log(buffer, "ini buffer");
|
||||
|
||||
setFile(files);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}}
|
||||
accept="image/png,image/jpeg"
|
||||
>
|
||||
{(props) => (
|
||||
<Button
|
||||
{...props}
|
||||
radius={"xl"}
|
||||
leftIcon={<IconCamera />}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
)}
|
||||
</FileButton>
|
||||
<ComponentGlobal_ButtonUploadFileImage onSetFile={setFile} />
|
||||
</Center>
|
||||
|
||||
{file ? (
|
||||
<Center>
|
||||
<Group spacing={"xs"}>
|
||||
|
||||
@@ -17,6 +17,7 @@ import { useState } from "react";
|
||||
import { Donasi_funCreateInvoice } from "../../fun/create/fun_create_invoice";
|
||||
import { gs_donasi_hot_menu, gs_proses_donasi } from "../../global_state";
|
||||
import { WibuRealtime } from "wibu-pkg";
|
||||
import { clientLogger } from "@/util/clientLogger";
|
||||
|
||||
export default function Donasi_MetodePembayaran({
|
||||
listBank,
|
||||
@@ -35,47 +36,51 @@ export default function Donasi_MetodePembayaran({
|
||||
const [activeHotMenu, setActiveHotMenu] = useAtom(gs_donasi_hot_menu);
|
||||
|
||||
async function onProses() {
|
||||
const body = {
|
||||
donasiId: donasiId,
|
||||
donasiMaster_BankId: pilihBank,
|
||||
nominal: prosesDonasi.nominal,
|
||||
authorId: authorId,
|
||||
};
|
||||
|
||||
|
||||
const res = await Donasi_funCreateInvoice(body);
|
||||
if (res.status === 200) {
|
||||
|
||||
const dataNotifikasi: IRealtimeData = {
|
||||
appId: res.data?.Donasi?.id as any,
|
||||
status: res.data?.DonasiMaster_StatusInvoice?.name as any,
|
||||
userId: res.data?.Donasi?.authorId as any,
|
||||
pesan: res.data?.Donasi?.title as any,
|
||||
kategoriApp: "DONASI",
|
||||
title: "Donatur membuat invoice donasi",
|
||||
try {
|
||||
setLoading(true);
|
||||
const body = {
|
||||
donasiId: donasiId,
|
||||
donasiMaster_BankId: pilihBank,
|
||||
nominal: prosesDonasi.nominal,
|
||||
authorId: authorId,
|
||||
};
|
||||
|
||||
const notif = await notifikasiToAdmin_funCreate({
|
||||
data: dataNotifikasi as any,
|
||||
});
|
||||
const res = await Donasi_funCreateInvoice(body);
|
||||
if (res.status === 200) {
|
||||
const dataNotifikasi: IRealtimeData = {
|
||||
appId: res.data?.Donasi?.id as any,
|
||||
status: res.data?.DonasiMaster_StatusInvoice?.name as any,
|
||||
userId: res.data?.Donasi?.authorId as any,
|
||||
pesan: res.data?.Donasi?.title as any,
|
||||
kategoriApp: "DONASI",
|
||||
title: "Donatur membuat invoice donasi",
|
||||
};
|
||||
|
||||
if (notif.status === 201) {
|
||||
WibuRealtime.setData({
|
||||
type: "notification",
|
||||
pushNotificationTo: "ADMIN",
|
||||
const notif = await notifikasiToAdmin_funCreate({
|
||||
data: dataNotifikasi as any,
|
||||
});
|
||||
|
||||
setLoading(true);
|
||||
setActiveHotMenu(2);
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
setProsesDonasi({
|
||||
...prosesDonasi,
|
||||
nominal: "",
|
||||
});
|
||||
router.push(RouterDonasi.invoice + `${res.data?.id}`);
|
||||
if (notif.status === 201) {
|
||||
WibuRealtime.setData({
|
||||
type: "notification",
|
||||
pushNotificationTo: "ADMIN",
|
||||
});
|
||||
|
||||
setActiveHotMenu(2);
|
||||
ComponentGlobal_NotifikasiBerhasil(res.message);
|
||||
setProsesDonasi({
|
||||
...prosesDonasi,
|
||||
nominal: "",
|
||||
});
|
||||
router.push(RouterDonasi.invoice + `${res.data?.id}`);
|
||||
}
|
||||
} else {
|
||||
setLoading(false);
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
}
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
} catch (error) {
|
||||
setLoading(false);
|
||||
clientLogger.error("Error proses donasi:", error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,6 @@ export default async function notifikasiToAdmin_funCreate({
|
||||
}: {
|
||||
data: MODEL_NOTIFIKASI;
|
||||
}) {
|
||||
|
||||
const getAdmin = await prisma.user.findMany({
|
||||
where: {
|
||||
active: true,
|
||||
|
||||
Reference in New Issue
Block a user