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

Fix: Upload image

Browse Source 
- Upload image berita ke server wibu
- Tampilan detail image di ambil dari server wibu
## No issue
This commit is contained in:
Bagasbanuna02
2024-10-21 09:30:44 +08:00
parent 5ff74b00f5
commit 360ba267ec
66 changed files with 1528 additions and 821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/app_modules/donasi/create/create_cerita_penggalang.tsx
View File

@@ -1,41 +1,40 @@
"use client";
import { DIRECTORY_ID } from "@/app/lib";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_BoxUploadImage } 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 {
ComponentGlobal_WarningMaxUpload,
maksimalUploadFile,
} from "@/app_modules/_global/component/waring_popup";
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
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 notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
import mqtt_client from "@/util/mqtt_client";
import {
AspectRatio,
Button,
Center,
FileButton,
Group,
Image,
Paper,
Stack,
Text,
TextInput,
Textarea,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { IconCamera, IconUpload } from "@tabler/icons-react";
import { useAtom } from "jotai";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
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 { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import mqtt_client from "@/util/mqtt_client";
import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
export default function CreateCeritaPenggalangDonasi({
dataTemporary,
userId,
@@ -51,7 +50,7 @@ export default function CreateCeritaPenggalangDonasi({
);
const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
const [create, setCreate] = useState({
const [data, setData] = useState({
pembukaan: "",
cerita: "",
namaBank: "",
@@ -59,61 +58,77 @@ export default function CreateCeritaPenggalangDonasi({
});
const [temporary, setTemporary] = useState(dataTemporary);
const [file, setFile] = useState<File | null>(null);
const [imageCerita, setImageCerita] = useState<any | null>();
const [img, setImg] = useState<any | null>();
async function onCreate() {
if (_.values(create).includes("")) return NotifPeringatan("Lengkapin Data");
if (!file) return NotifPeringatan("Lengkapi Gambar");
const gambar = new FormData();
gambar.append("file", file as any);
if (_.values(data).includes(""))
return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
const body = {
id: temporary.id,
title: temporary.title,
target: temporary.target,
imagesId: temporary.imagesId,
donasiMaster_KategoriId: temporary.donasiMaster_KategoriId,
donasiMaster_DurasiId: temporary.donasiMaster_DurasiId,
authorId: userId,
namaBank: create.namaBank,
rekening: create.rekening,
namaBank: data.namaBank,
rekening: data.rekening,
imageId: temporary.imageId,
CeritaDonasi: {
pembukaan: create.pembukaan,
cerita: create.cerita,
pembukaan: data.pembukaan,
cerita: data.cerita,
},
};
const res = await Donasi_funCreate(body as any, gambar);
if (res.status === 201) {
const dataNotif: any = {
appId: res.data?.id as any,
status: res.data?.DonasiMaster_Status?.name as any,
userId: res.data?.authorId as any,
pesan: res.data?.title as any,
kategoriApp: "DONASI",
title: "Donasi baru",
};
const notif = await notifikasiToAdmin_funCreate({
data: dataNotif as any,
try {
setLoading(true);
const uploadImage = await funGlobal_UploadToStorage({
file: file as File,
dirId: DIRECTORY_ID.donasi_cerita_image,
});
if (!uploadImage.success) {
setLoading(false);
return ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
}
const res = await Donasi_funCreate({
data: body as any,
fileId: uploadImage.data.id,
});
if (notif.status === 201) {
mqtt_client.publish(
"ADMIN",
JSON.stringify({
count: 1,
})
);
setLoading(true);
setTabsPostingDonasi("Review");
setDonasiHotMenu(1);
ComponentGlobal_NotifikasiBerhasil(res.message);
router.push(RouterDonasi.main_galang_dana, { scroll: false });
if (res.status === 201) {
const dataNotif: any = {
appId: res.data?.id as any,
status: res.data?.DonasiMaster_Status?.name as any,
userId: res.data?.authorId as any,
pesan: res.data?.title as any,
kategoriApp: "DONASI",
title: "Donasi baru",
};
const notif = await notifikasiToAdmin_funCreate({
data: dataNotif as any,
});
if (notif.status === 201) {
mqtt_client.publish(
"ADMIN",
JSON.stringify({
count: 1,
})
);
setTabsPostingDonasi("Review");
setDonasiHotMenu(1);
ComponentGlobal_NotifikasiBerhasil(res.message);
router.push(RouterDonasi.main_galang_dana, { scroll: false });
}
setLoading(false);
} else {
ComponentGlobal_NotifikasiGagal(res.message);
setLoading(false);
}
} else {
ComponentGlobal_NotifikasiGagal(res.message);
} catch (error) {
console.log(error);
}
}
return (
@@ -138,15 +153,15 @@ export default function CreateCeritaPenggalangDonasi({
placeholder="Pembuka cerita"
maxLength={300}
onChange={(val) =>
setCreate({
...create,
setData({
...data,
pembukaan: val.target.value,
})
}
/>
<ComponentGlobal_InputCountDown
maxInput={300}
lengthInput={create.pembukaan.length}
lengthInput={data.pembukaan.length}
/>
</Stack>
@@ -165,32 +180,49 @@ export default function CreateCeritaPenggalangDonasi({
placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
maxLength={300}
onChange={(val) =>
setCreate({
...create,
setData({
...data,
cerita: val.target.value,
})
}
/>
<ComponentGlobal_InputCountDown
maxInput={300}
lengthInput={create.cerita.length}
lengthInput={data.cerita.length}
/>
</Stack>
<Stack spacing={"xs"}>
<Center>
<Stack spacing={5}>
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
<Image
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
alt="Foto"
height={250}
src={img}
/>
</AspectRatio>
) : (
<Stack justify="center" align="center" h={"100%"}>
<IconUpload color="white" />
<Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
Upload Gambar
</Text>
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
{/* Upload Foto */}
<Group position="center">
<FileButton
onChange={async (files: any | null) => {
onChange={async (files: any) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > maksimalUploadFile) {
ComponentGlobal_WarningMaxUpload({});
} else {
setImageCerita(buffer);
setFile(files);
}
setImg(buffer);
setFile(files);
} catch (error) {
console.log(error);
}
@@ -200,42 +232,17 @@ export default function CreateCeritaPenggalangDonasi({
{(props) => (
<Button
{...props}
radius={"xl"}
leftIcon={<IconCamera />}
leftIcon={<IconCamera color="black" />}
radius={50}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
Upload Gambar
</Button>
)}
</FileButton>
</Center>
{imageCerita ? (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<Image
alt="Foto"
src={imageCerita ? imageCerita : "/aset/no-img.png"}
maw={200}
/>
</Paper>
</AspectRatio>
) : (
<Center>
<Text fs={"italic"} fz={10} c={"white"}>
Upload poster atau gambar penggalangan !
</Text>
</Center>
)}
</Group>
</Stack>
</Stack>
@@ -252,8 +259,8 @@ export default function CreateCeritaPenggalangDonasi({
label="Nama Bank"
maxLength={50}
onChange={(val) => {
setCreate({
...create,
setData({
...data,
namaBank: _.upperCase(val.target.value),
});
}}
@@ -269,8 +276,8 @@ export default function CreateCeritaPenggalangDonasi({
label="Nomor rekening"
maxLength={100}
onChange={(val) => {
setCreate({
...create,
setData({
...data,
rekening: val.target.value,
});
}}
@@ -280,9 +287,7 @@ export default function CreateCeritaPenggalangDonasi({
style={{
transition: "0.5s",
}}
disabled={
_.values(create).includes("") || file === null ? true : false
}
disabled={_.values(data).includes("") || file === null ? true : false}
loaderPosition="center"
loading={isLoading ? true : false}
w={"100%"}

148
src/app_modules/donasi/create/create_donasi.tsx
View File

@@ -4,32 +4,27 @@ import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
AspectRatio,
Button,
Center,
FileButton,
Group,
Image,
Paper,
Select,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { IconCamera, IconUpload } from "@tabler/icons-react";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { DIRECTORY_ID } from "@/app/lib";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import {
ComponentGlobal_WarningMaxUpload,
maksimalUploadFile,
} from "@/app_modules/_global/component/waring_popup";
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 _ from "lodash";
import { useState } from "react";
import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
import Donasi_funCreateTemporary from "../fun/create/fun_create_donasi_temporary";
import { gs_donasi_tabs_posting } from "../global_state";
import { MODEL_DONASI_ALL_MASTER } from "../model/interface";
@@ -46,7 +41,7 @@ export default function CreateDonasi({
const [kategori, setKategori] = useState(masterKategori);
const [durasi, setDurasi] = useState(masterDurasi);
const [create, setCreate] = useState({
const [data, setData] = useState({
kategoriId: "",
title: "",
target: "",
@@ -54,34 +49,48 @@ export default function CreateDonasi({
});
const [targetDana, setTargetDana] = useState("");
const [file, setFile] = useState<File | null>(null);
const [imageDonasi, setImageDonasi] = useState<any | null>();
const [img, setImg] = useState<any | null>();
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
async function onCreate() {
setLoading(true);
const body = {
donasiMaster_KategoriId: create.kategoriId,
donasiMaster_DurasiId: create.durasiId,
title: create.title,
donasiMaster_KategoriId: data.kategoriId,
donasiMaster_DurasiId: data.durasiId,
title: data.title,
target: targetDana,
};
if (_.values(body).includes("")) return NotifPeringatan("Lengkapin Data");
if (!file) return NotifPeringatan("Lengkapi Gambar");
if (_.values(body).includes(""))
return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
const gambar = new FormData();
gambar.append("file", file as any);
try {
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");
}
await Donasi_funCreateTemporary(body as any, gambar).then((res) => {
const res = await Donasi_funCreateTemporary({
data: body as any,
fileId: uploadImage.data.id,
});
if (res.status === 201) {
setLoading(true);
setTabsPostingDonasi("Review");
router.push(RouterDonasi.create_cerita_penggalang + `${res.donasiId}`);
setLoading(false);
} else {
return ComponentGlobal_NotifikasiGagal(res.message);
ComponentGlobal_NotifikasiGagal(res.message);
setLoading(false);
}
});
} catch (error) {
console.log(error);
}
}
return (
@@ -102,8 +111,8 @@ export default function CreateDonasi({
label: e.name,
}))}
onChange={(val: string) =>
setCreate({
...create,
setData({
...data,
kategoriId: val,
})
}
@@ -121,7 +130,7 @@ export default function CreateDonasi({
placeholder="Contoh: Renovasi Masjid pada kampung, dll"
maxLength={100}
onChange={(val) => {
setCreate({ ...create, title: val.target.value });
setData({ ...data, title: val.target.value });
}}
/>
<TextInput
@@ -135,7 +144,7 @@ export default function CreateDonasi({
withAsterisk
label="Target Dana"
placeholder="0"
value={create.target}
value={data.target}
onChange={(val) => {
// console.log(val.currentTarget.value, "nilai");
const match = val.currentTarget.value
@@ -143,8 +152,8 @@ export default function CreateDonasi({
.match(/^[0-9]+$/);
if (val.currentTarget.value === "")
return setCreate({
...create,
return setData({
...data,
target: 0 + "",
});
if (!match?.[0]) return null;
@@ -153,8 +162,8 @@ export default function CreateDonasi({
const target = Intl.NumberFormat("id-ID").format(+nilai);
setTargetDana(nilai);
setCreate({
...create,
setData({
...data,
target,
});
}}
@@ -172,25 +181,41 @@ export default function CreateDonasi({
value: e.id,
label: e.name + " " + `hari`,
}))}
onChange={(val: string) => setCreate({ ...create, durasiId: val })}
onChange={(val: string) => setData({ ...data, durasiId: val })}
/>
</Stack>
<Stack>
<Center>
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
<Image
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
alt="Foto"
height={250}
src={img}
/>
</AspectRatio>
) : (
<Stack justify="center" align="center" h={"100%"}>
<IconUpload color="white" />
<Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
Upload Gambar
</Text>
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
{/* Upload Foto */}
<Group position="center">
<FileButton
onChange={async (files: any | null) => {
onChange={async (files: any) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > maksimalUploadFile) {
ComponentGlobal_WarningMaxUpload({});
} else {
setImageDonasi(buffer);
setFile(files);
}
setImg(buffer);
setFile(files);
} catch (error) {
console.log(error);
}
@@ -200,49 +225,24 @@ export default function CreateDonasi({
{(props) => (
<Button
{...props}
radius={"xl"}
leftIcon={<IconCamera />}
leftIcon={<IconCamera color="black" />}
radius={50}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
Upload Gambar
</Button>
)}
</FileButton>
</Center>
{imageDonasi ? (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<Image
alt="Foto"
src={imageDonasi ? imageDonasi : "/aset/no-img.png"}
maw={200}
/>
</Paper>
</AspectRatio>
) : (
<Center>
<Text fs={"italic"} fz={10} c={"white"}>
Upload poster atau gambar penggalangan !
</Text>
</Center>
)}
</Group>
</Stack>
<Button
style={{
transition: "0.5s",
}}
disabled={
_.values(create).includes("") || file === null ? true : false
}
disabled={_.values(data).includes("") || file === null ? true : false}
loaderPosition="center"
loading={isLoading ? true : false}
my={"lg"}

4
src/app_modules/donasi/create/layout.tsx
View File

@@ -12,7 +12,9 @@ export default function LayoutCreateDonasi({
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" />}
header={
<UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" hideButtonLeft />
}
>
{children}
</UIGlobal_LayoutTamplate>