wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ( donasi )

Browse Source 
deskripsi:
- fix upload image donasi
- fix upload cerita donasi
- fix upload bukti transfer donatur
This commit is contained in:
Bagasbanuna02
2025-01-17 10:12:03 +08:00
parent 8f99658e40
commit 8934e06b9e
10 changed files with 714 additions and 744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
View File

@@ -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> */}
</>
);
}

585
src/app_modules/donasi/edit/edit_donasi/edit_donasi_new.tsx
View File

@@ -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>
)}
</>
);
}

4
src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx
View File

@@ -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>