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

31
src/app_modules/donasi/component/card_view/card_publish.tsx
View File

@@ -1,21 +1,11 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import {
ComponentGlobal_CardLoadingOverlay,
ComponentGlobal_CardStyles,
ComponentGlobal_LoadImageCustom,
} from "@/app_modules/_global/component";
import {
AspectRatio,
Card,
Grid,
Image,
Paper,
Progress,
Stack,
Text,
} from "@mantine/core";
import { Grid, Progress, Stack, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
@@ -43,18 +33,13 @@ export default function ComponentDonasi_CardPublish({
>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${data.imagesId}`}
radius={"xs"}
/>
</Paper>
</AspectRatio>
<Grid.Col span={6}>
<ComponentGlobal_LoadImageCustom
fileId={data.imageId}
height={150}
/>
</Grid.Col>
<Grid.Col span={5}>
<Grid.Col span={6}>
<Stack spacing={"xs"}>
<Stack spacing={0}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>

61
src/app_modules/donasi/component/card_view/card_status.tsx
View File

@@ -1,6 +1,10 @@
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
import {
ComponentGlobal_CardLoadingOverlay,
ComponentGlobal_CardStyles,
ComponentGlobal_LoadImageCustom,
} from "@/app_modules/_global/component";
import {
AspectRatio,
Card,
@@ -23,39 +27,24 @@ export function ComponentDonasi_CardStatus({
}) {
const router = useRouter();
const [visible, setVisible] = useState(false);
const [donasiId, setDonasiId] = useState("");
return (
<>
<Card
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
}}
onClick={() => {
<ComponentGlobal_CardStyles
onClickHandler={() => {
setVisible(true);
setDonasiId(data.id);
router.push(path + `${data.id}`);
}}
>
<Stack>
<Grid>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"sm"} bg={"gray.1"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${data.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
<Grid.Col span={6}>
<ComponentGlobal_LoadImageCustom
fileId={data.imageId}
height={100}
/>
</Grid.Col>
<Grid.Col span={5}>
<Grid.Col span={6}>
<Stack spacing={"xs"}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
{data.title}
@@ -74,12 +63,24 @@ export function ComponentDonasi_CardStatus({
</Grid>
{/* {width > 575 ? "" : <Divider />} */}
</Stack>
{visible && donasiId !== "" ? (
<ComponentGlobal_CardLoadingOverlay />
) : (
""
)}
</Card>
{visible && <ComponentGlobal_CardLoadingOverlay />}
</ComponentGlobal_CardStyles>
{/* <Card
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
}}
onClick={() => {
setVisible(true);
router.push(path + `${data.id}`);
}}
>
</Card> */}
</>
);
}

62
src/app_modules/donasi/component/detail_galang_dana/detail_data_donasi.tsx
View File

@@ -1,19 +1,16 @@
"use client";
import {
MainColor
} from "@/app_modules/_global/color/color_pallet";
import {
ComponentGlobal_CardStyles,
ComponentGlobal_LoadImageLandscape,
} from "@/app_modules/_global/component";
import { Group, Stack, Text, Title } from "@mantine/core";
import { useRouter } from "next/navigation";
import { MODEL_DONASI } from "../../model/interface";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
Stack,
AspectRatio,
Paper,
Title,
Group,
Image,
Text,
} from "@mantine/core";
import TampilanRupiahDonasi from "../tampilan_rupiah";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
export default function ComponentDonasi_DetailDataGalangDana({
donasi,
@@ -23,28 +20,9 @@ export default function ComponentDonasi_DetailDataGalangDana({
const router = useRouter();
return (
<>
<Stack
style={{
paddingInline: "15px",
paddingBottom: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
>
<ComponentGlobal_CardStyles>
<Stack>
<AspectRatio
ratio={1 / 1}
mx={"sm"}
mah={300}
>
<Image
alt="Foto"
src={RouterDonasi.api_image + `${donasi.imageDonasi.url}`}
radius={"sm"}
/>
</AspectRatio>
<ComponentGlobal_LoadImageLandscape fileId={donasi.imageId} />
<Stack spacing={0}>
<Title order={4}>{donasi.title}</Title>
<Text fz={10}>Durasi: {donasi.DonasiMaster_Durasi.name} hari</Text>
@@ -53,24 +31,30 @@ export default function ComponentDonasi_DetailDataGalangDana({
<Group position="apart">
<Stack spacing={0}>
<Text fz={12}>Dana dibutuhkan</Text>
<Title order={4} style={{
color: MainColor.yellow
}}>
<Title
order={4}
style={{
color: MainColor.yellow,
}}
>
<TampilanRupiahDonasi nominal={+donasi.target} />
</Title>
</Stack>
<Stack spacing={0}>
<Text fz={12}>Kategori</Text>
<Title order={4} style={{
color: MainColor.yellow
}}>
<Title
order={4}
style={{
color: MainColor.yellow,
}}
>
{donasi.DonasiMaster_Ketegori.name}
</Title>
</Stack>
</Group>
</Stack>
</Stack>
</Stack>
</ComponentGlobal_CardStyles>
</>
);
}

24
src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx
View File

@@ -30,6 +30,10 @@ import { MODEL_DONASI } from "../../model/interface";
import { NotifPeringatan } from "../notifikasi/notif_peringatan";
import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
import TampilanRupiahDonasi from "../tampilan_rupiah";
import {
ComponentGlobal_CardStyles,
ComponentGlobal_LoadImageLandscape,
} from "@/app_modules/_global/component";
export function ComponentDonasi_DetailDataMain({
donasi,
@@ -47,23 +51,9 @@ export function ComponentDonasi_DetailDataMain({
return (
<>
<Stack
style={{
padding: "15px",
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
color: "white",
}}
>
<ComponentGlobal_CardStyles>
<Stack>
<AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
<Image
alt="Foto"
src={RouterDonasi.api_image + `${donasi?.imageDonasi?.url}`}
radius={"sm"}
/>
</AspectRatio>
<ComponentGlobal_LoadImageLandscape fileId={donasi.imageId} />
<Stack spacing={0} mt={"lg"}>
<Title order={4}>{donasi?.title}</Title>
@@ -179,7 +169,7 @@ export function ComponentDonasi_DetailDataMain({
</Grid.Col>
</Grid>
</Stack>
</Stack>
</ComponentGlobal_CardStyles>
</>
);
}

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>

12
src/app_modules/donasi/detail/detail_main/cerita_penggalang/index.tsx
View File

@@ -1,10 +1,9 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_LoadImageLandscape } from "@/app_modules/_global/component";
import { MODEL_CERITA_DONASI } from "@/app_modules/donasi/model/interface";
import { Box, Image, Stack, Text } from "@mantine/core";
import moment from "moment";
import { Stack, Text } from "@mantine/core";
import { useState } from "react";
export default function CeritaPenggalangDonasi({
@@ -33,11 +32,8 @@ export default function CeritaPenggalangDonasi({
</Text>
<Text fw={"bold"}> #HaloOrangBaik</Text>
<Text>{data.pembukaan}</Text>
<Image
radius={"sm"}
alt="Foto"
src={RouterDonasi.api_image_cerita + `${data.imageCeritaDonasi.url}`}
/>
<ComponentGlobal_LoadImageLandscape fileId={data.imageId} />
<Text>{data.cerita}</Text>
</Stack>
</>

19
src/app_modules/donasi/detail/detail_main/penggalang_dana/index.tsx
View File

@@ -2,39 +2,24 @@
import { pathAssetImage, RouterImagePreview } from "@/app/lib";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import {
ComponentGlobal_CardStyles,
ComponentGlobal_LoaderAvatar,
} from "@/app_modules/_global/component";
import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/card_publish";
import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
import {
MODEL_DONASI,
MODEL_DONASI_INFO_PENGGALANG,
MODEL_DONASI_INFO_PENGGALANG
} from "@/app_modules/donasi/model/interface";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import {
ActionIcon,
AspectRatio,
Box,
Center,
Divider,
Grid,
Group,
Image,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
Title,
Title
} from "@mantine/core";
import { useViewportSize } from "@mantine/hooks";
import { IconBrandGmail, IconMoodSmile, IconPhone } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";

65
src/app_modules/donasi/fun/create/fun_create_donasi.ts
View File

@@ -1,26 +1,28 @@
"use server";
import fs from "fs";
import prisma from "@/app/lib/prisma";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { revalidatePath } from "next/cache";
import { MODEL_DONASI } from "../../model/interface";
import { Donasi_funDeleteTemporaryCreate } from "../delete/fun_delete_temporary_create";
import { v4 } from "uuid";
import _ from "lodash";
import { revalidatePath } from "next/cache";
export async function Donasi_funCreate(req: MODEL_DONASI, file: FormData) {
const body = req;
export async function Donasi_funCreate({
data,
fileId,
}: {
data: MODEL_DONASI;
fileId: string;
}) {
const dataDonasi = await prisma.donasi.create({
data: {
target: body.target,
title: body.title,
donasiMaster_DurasiId: body.donasiMaster_DurasiId,
donasiMaster_KategoriId: body.donasiMaster_KategoriId,
imagesId: body.imagesId,
authorId: body.authorId,
namaBank: body.namaBank,
rekening: body.rekening,
target: data.target,
title: data.title,
donasiMaster_DurasiId: data.donasiMaster_DurasiId,
donasiMaster_KategoriId: data.donasiMaster_KategoriId,
authorId: data.authorId,
namaBank: data.namaBank,
rekening: data.rekening,
imageId: data.imageId,
},
select: {
id: true,
@@ -35,42 +37,19 @@ export async function Donasi_funCreate(req: MODEL_DONASI, file: FormData) {
});
if (!dataDonasi) return { status: 400, message: "Gagal disimpan" };
await Donasi_funDeleteTemporaryCreate(body.id);
const dataImage: any = file.get("file");
const fileName = dataImage.name;
const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
const fRandomName = v4(fileName) + "." + fileExtension;
const uploadImageCerita = await prisma.images.create({
data: {
url: fRandomName,
},
select: {
id: true,
url: true,
},
});
if (!uploadImageCerita)
return { status: 400, message: "Gagal upload gambar" };
const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
fs.writeFileSync(
`./public/donasi/image_cerita/${uploadImageCerita.url}`,
uploadFolder
);
await Donasi_funDeleteTemporaryCreate(data.id);
const dataCerita = await prisma.donasi_Cerita.create({
data: {
donasiId: dataDonasi.id,
pembukaan: body.CeritaDonasi.pembukaan,
cerita: body.CeritaDonasi.cerita,
imagesId: uploadImageCerita.id,
pembukaan: data.CeritaDonasi.pembukaan,
cerita: data.CeritaDonasi.cerita,
imageId: fileId,
},
});
if (!dataCerita) return { status: 400, message: "Gagal simpan data cerita" };
revalidatePath("/dev/donasi/main/galang_dana");
revalidatePath(RouterDonasi.penggalang_dana);
return {
data: dataDonasi,
status: 201,

42
src/app_modules/donasi/fun/create/fun_create_donasi_temporary.ts
View File

@@ -1,10 +1,7 @@
"use server";
import fs from "fs";
import prisma from "@/app/lib/prisma";
import { MODEL_DONASI, MODEL_DONASI_TEMPORARY } from "../../model/interface";
import _ from "lodash";
import { v4 } from "uuid";
import { MODEL_DONASI } from "../../model/interface";
interface Model_Temporary {
kategoriId: "";
@@ -13,34 +10,13 @@ interface Model_Temporary {
durasiId: "";
}
export default async function Donasi_funCreateTemporary(
data: MODEL_DONASI,
file: FormData
) {
// console.log(data, "ini data")
// console.log(file, "ini file nya")
const dataImage: any = file.get("file");
const fileName = dataImage.name;
const fileExtension = _.lowerCase(dataImage.name.split(".").pop());
const fRandomName = v4(fileName) + "." + fileExtension;
const uploadTemporary = await prisma.images.create({
data: {
url: fRandomName,
},
select: {
id: true,
url: true,
},
});
if (!uploadTemporary) return { status: 400, message: "Gagal upload gambar" };
const uploadFolder = Buffer.from(await dataImage.arrayBuffer());
fs.writeFileSync(
`./public/donasi/image/${uploadTemporary.url}`,
uploadFolder
);
export default async function Donasi_funCreateTemporary({
data,
fileId,
}: {
data: MODEL_DONASI;
fileId: string;
}) {
const res = await prisma.donasi_TemporaryCreate.create({
data: {
@@ -48,7 +24,7 @@ export default async function Donasi_funCreateTemporary(
target: data.target,
donasiMaster_KategoriId: data.donasiMaster_KategoriId,
donasiMaster_DurasiId: data.donasiMaster_DurasiId,
imagesId: uploadTemporary.id,
imageId: fileId,
},
});

4
src/app_modules/donasi/fun/get/get_author_by_id.ts
View File

@@ -21,6 +21,9 @@ export async function Donasi_getAuthorById(authorId: string) {
},
},
Donasi: {
orderBy: {
createdAt: "desc",
},
where: {
donasiMaster_StatusDonasiId: "1",
},
@@ -46,6 +49,7 @@ export async function Donasi_getAuthorById(authorId: string) {
DonasiMaster_Ketegori: true,
DonasiMaster_Durasi: true,
DonasiMaster_Status: true,
imageId: true,
},
},
},

1
src/app_modules/donasi/fun/get/get_cerita_penggalang.ts
View File

@@ -13,6 +13,7 @@ export default async function Donasi_getCeritaByDonasiId(donasiId: string) {
cerita: true,
imageCeritaDonasi: true,
createdAt: true,
imageId: true,
},
});
return data;

21
src/app_modules/donasi/fun/get/get_list_beranda.tsx
View File

@@ -17,28 +17,15 @@ export async function donasi_funGetAllPublish({ page }: { page: number }) {
donasiMaster_StatusDonasiId: "1",
active: true,
},
select: {
id: true,
title: true,
target: true,
active: true,
createdAt: true,
updatedAt: true,
publishTime: true,
catatan: true,
progres: true,
terkumpul: true,
authorId: true,
imagesId: true,
donasiMaster_KategoriId: true,
donasiMaster_DurasiId: true,
donasiMaster_StatusDonasiId: true,
include: {
Author: true,
imageDonasi: true,
CeritaDonasi: true,
DonasiMaster_Ketegori: true,
DonasiMaster_Durasi: true,
DonasiMaster_Status: true,
Donasi_Invoice: true,
Donasi_Kabar: true,
Donasi_PencairanDana: true,
},
});

22
src/app_modules/donasi/fun/get/get_one_donasi_by_id.ts
View File

@@ -7,30 +7,16 @@ export async function Donasi_getOneById(donasiId: string) {
where: {
id: donasiId,
},
select: {
id: true,
title: true,
target: true,
active: true,
createdAt: true,
updatedAt: true,
publishTime: true,
catatan: true,
authorId: true,
progres: true,
terkumpul: true,
imagesId: true,
namaBank: true,
rekening: true,
donasiMaster_KategoriId: true,
donasiMaster_DurasiId: true,
donasiMaster_StatusDonasiId: true,
include: {
Author: true,
imageDonasi: true,
CeritaDonasi: true,
DonasiMaster_Ketegori: true,
DonasiMaster_Durasi: true,
DonasiMaster_Status: true,
Donasi_Invoice: true,
Donasi_Kabar: true,
Donasi_PencairanDana: true,
},
});

1
src/app_modules/donasi/fun/get/get_temporary_create.ts
View File

@@ -8,5 +8,6 @@ export async function Donasi_getTemporaryCreate(id: string) {
id: id,
},
});
return data;
}

1
src/app_modules/donasi/fun/get/status/get_all_status_publish.ts
View File

@@ -33,6 +33,7 @@ export async function donasi_funGetAllStatusPublish({
publishTime: true,
DonasiMaster_Durasi: true,
terkumpul: true,
imageId: true,
},
});
return data;

5
src/app_modules/donasi/model/interface.ts
View File

@@ -29,6 +29,7 @@ export interface MODEL_DONASI {
DonasiMaster_Ketegori: MODEL_DONASI_ALL_MASTER;
DonasiMaster_Durasi: MODEL_DONASI_ALL_MASTER;
DonasiMaster_Status: MODEL_DONASI_ALL_MASTER;
imageId: string
}
export interface MODEL_CERITA_DONASI {
@@ -41,6 +42,7 @@ export interface MODEL_CERITA_DONASI {
imagesId: string;
imageCeritaDonasi: MODEL_IMAGES;
donasiId: string;
imageId: string
}
export interface MODEL_DONASI_ALL_MASTER {
@@ -61,6 +63,7 @@ export interface MODEL_DONASI_TEMPORARY {
imagesId: string;
donasiMaster_KategoriId: string;
donasiMaster_DurasiId: string;
imageId: string
}
export interface MODEL_DONASI_INFO_PENGGALANG {
@@ -85,6 +88,7 @@ export interface MODEL_DONASI_INVOICE {
Donasi: MODEL_DONASI;
DonasiMaster_Bank: MODEL_DONASI_NAMA_BANK;
DonasiMaster_StatusInvoice: MODEL_DONASI_ALL_MASTER;
imageId: string
}
export interface MODEL_DONASI_NAMA_BANK {
@@ -115,6 +119,7 @@ export interface MODEL_DONASI_KABAR {
imagesId: string;
Donasi: MODEL_DONASI;
ImagesKabar: MODEL_IMAGES;
imageId: string
}
export interface MODEL_DONASI_NOTIF {