Fix: Image donasi

Deksripsi:
- Tampilan image dari server wibu
- Upload image ke server wibu
## No Issue
This commit is contained in:
2024-10-28 10:24:38 +08:00
parent 360ba267ec
commit 0371ca5e01
96 changed files with 1562 additions and 1528 deletions

View File

@@ -0,0 +1,88 @@
import { Button } from "@mantine/core";
import { Donasi_funDeleteDonasiById } from "../../fun/delete/fin_delete_donasi_by_id";
import { useState } from "react";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
import {
ComponentGlobal_NotifikasiPeringatan,
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
} from "@/app_modules/_global/notif_global";
import { useAtom } from "jotai";
import { gs_donasi_tabs_posting } from "../../global_state";
import { useRouter } from "next/navigation";
export function Donasi_ComponentButtonDeleteDonasiById({
donasiId,
imageCeritaId,
imageId,
}: {
donasiId: string;
imageCeritaId: string;
imageId: string;
}) {
const router = useRouter();
const [openModal, setOpenModal] = useState(false);
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
async function onDelete() {
const del = await Donasi_funDeleteDonasiById(donasiId);
if (del.status === 200) {
const deleteImageDonasi = await funGlobal_DeleteFileById({
fileId: imageId as any,
});
if (!deleteImageDonasi.success) {
ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
}
const deleteImageCerita = await funGlobal_DeleteFileById({
fileId: imageCeritaId as any,
});
if (!deleteImageCerita.success) {
ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
}
router.push(RouterDonasi.main_galang_dana);
setTabsPostingDonasi("Draft");
ComponentGlobal_NotifikasiBerhasil(del.message);
} else {
ComponentGlobal_NotifikasiGagal(del.message);
}
}
return (
<>
<Button
radius={"xl"}
color="red"
onClick={() => {
setOpenModal(true);
}}
>
Hapus Donasi
</Button>
<UIGlobal_Modal
title={"Anda yakin ingin menghapus donasi ini ?"}
opened={openModal}
close={() => setOpenModal(false)}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
buttonKanan={
<Button radius={"xl"} color="red" onClick={() => onDelete()}>
Hapus
</Button>
}
/>
</>
);
}

View File

@@ -1,18 +1,18 @@
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_LoadImageCustom,
} from "@/app_modules/_global/component";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import {
AspectRatio,
Badge,
Card,
Grid,
Group,
Image,
Paper,
Progress,
Stack,
Text,
Text
} from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
@@ -88,15 +88,10 @@ export function ComponentDonasi_CardInvoice({
</Stack>
</Grid.Col>
<Grid.Col span={7}>
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foto"
src={RouterDonasi.api_gambar + `${data.Donasi.imagesId}`}
radius={"md"}
/>
</Paper>
</AspectRatio>
<ComponentGlobal_LoadImageCustom
height={150}
fileId={data.Donasi.imageId}
/>
</Grid.Col>
</Grid>
{/* {width > 575 ? "" : <Divider />} */}

View File

@@ -1,12 +1,14 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { Paper, Stack, Text, Title } from "@mantine/core";
import moment from "moment";
import { Stack, Text, Title } from "@mantine/core";
import { MODEL_DONASI_KABAR } from "../../model/interface";
import {
ComponentGlobal_CardLoadingOverlay,
ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";
import { useRouter } from "next/navigation";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { useState } from "react";
import { MODEL_DONASI_KABAR } from "../../model/interface";
export default function ComponentDonasi_ListKabar({
kabar,
@@ -16,26 +18,25 @@ export default function ComponentDonasi_ListKabar({
route: string;
}) {
const router = useRouter();
const [visible, setVisible] = useState(false);
return (
<>
<Paper
style={{
backgroundColor: AccentColor.blue,
border: `2px solid ${AccentColor.darkblue}`,
padding: "15px",
cursor: "pointer",
borderRadius: "10px",
color: "white",
marginBottom: "10px",
<ComponentGlobal_CardStyles
onClickHandler={() => {
router.push(route + `${kabar.id}`);
setVisible(true);
}}
onClick={() => router.push(route + `${kabar.id}`)}
>
<Stack>
<Text fz={"xs"}>{moment(kabar.createdAt).format("ll")}</Text>
<Text fz={"xs"}>
{new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
kabar.createdAt
)}
</Text>
<Title order={5}>{kabar.title}</Title>
</Stack>
</Paper>
{visible && <ComponentGlobal_CardLoadingOverlay />}
</ComponentGlobal_CardStyles>
</>
);
}

View File

@@ -27,13 +27,13 @@ import { useRouter } from "next/navigation";
import { useState } from "react";
import { Donasi_findDonaturByTokenId } from "../../fun/get/get_donatur_by_token_id";
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";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
export function ComponentDonasi_DetailDataMain({
donasi,
@@ -126,7 +126,9 @@ export function ComponentDonasi_DetailDataMain({
span={"auto"}
onClick={() => {
setLoadingKabar(true);
router.push(RouterDonasi.kabar + `${donasi?.id}`);
router.push(RouterDonasi.daftar_kabar({ id: donasi.id }), {
scroll: false,
});
}}
>
<Stack spacing={"sm"} align="center">
@@ -187,7 +189,7 @@ async function onPencairanDana(
}
if (!cek) {
return NotifPeringatan("Halaman khusus donatur");
return ComponentGlobal_NotifikasiPeringatan("Halaman khusus donatur");
} else {
setLoadingPencairan(true);
router.push(RouterDonasi.pencairan_dana + `${donasi.id}`);

View File

@@ -0,0 +1,3 @@
import { Donasi_ComponentButtonDeleteDonasiById } from "./button/comp_button_delete_donasi_by_id";
export { Donasi_ComponentButtonDeleteDonasiById };

View File

@@ -1,31 +0,0 @@
import { Center, Text } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { IconAlertTriangle, IconChecklist, IconCircleCheck } from "@tabler/icons-react";
/**
*
* @param text | masukan text untuk peringatan
* @type string
* @returns notifikasi peringatan
*/
export async function NotifBerhasil(text: string) {
return notifications.show({
message: (
<Center>
<Text fw={"bold"}>{text}</Text>
</Center>
),
color: "green",
radius: "md",
autoClose: 1000,
icon: <IconCircleCheck color="white" />,
withCloseButton: false,
styles: (theme) => ({
description: { color: theme.white },
root: {
backgroundColor: theme.colors.green[7],
},
}),
});
}

View File

@@ -1,31 +0,0 @@
import { Center, Text } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { IconAlertTriangle } from "@tabler/icons-react";
/**
*
* @param text | masukan text untuk peringatan
* @type string
* @returns notifikasi peringatan
*/
export async function NotifGagal(text: string) {
return notifications.show({
message: (
<Center>
<Text fw={"bold"}>{text}</Text>
</Center>
),
color: "red",
radius: "md",
autoClose: 1000,
icon: <IconAlertTriangle color="white" />,
withCloseButton: false,
styles: (theme) => ({
description: { color: theme.white },
root: {
backgroundColor: theme.colors.red[7],
},
}),
});
}

View File

@@ -1,31 +0,0 @@
import { Center, Text } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { IconAlertTriangle } from "@tabler/icons-react";
/**
*
* @param text | masukan text untuk peringatan
* @type string
* @returns notifikasi peringatan
*/
export async function NotifPeringatan(text: string) {
return notifications.show({
message: (
<Center>
<Text fw={"bold"}>{text}</Text>
</Center>
),
color: "yellow",
radius: "md",
autoClose: 1000,
icon: <IconAlertTriangle color="white" />,
withCloseButton: false,
styles: (theme) => ({
description: { color: theme.white },
root: {
backgroundColor: theme.colors.yellow[7],
},
}),
});
}