Fix: Image donasi
Deksripsi: - Tampilan image dari server wibu - Upload image ke server wibu ## No Issue
This commit is contained in:
@@ -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>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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 />} */}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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}`);
|
||||
|
||||
3
src/app_modules/donasi/component/index.ts
Normal file
3
src/app_modules/donasi/component/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { Donasi_ComponentButtonDeleteDonasiById } from "./button/comp_button_delete_donasi_by_id";
|
||||
|
||||
export { Donasi_ComponentButtonDeleteDonasiById };
|
||||
@@ -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],
|
||||
},
|
||||
}),
|
||||
});
|
||||
}
|
||||
@@ -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],
|
||||
},
|
||||
}),
|
||||
});
|
||||
}
|
||||
@@ -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],
|
||||
},
|
||||
}),
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user