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

Fix: Image donasi

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

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

@@ -1,38 +1,35 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
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_ErrorInput from "@/app_modules/_global/component/error_input";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import {
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 {
AspectRatio,
Button,
Center,
FileButton,
Image,
Paper,
Stack,
Textarea,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { useAtom } from "jotai";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { gs_donasi_tabs_posting } from "../../global_state";
import { MODEL_CERITA_DONASI } from "../../model/interface";
import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
import _ from "lodash";
import { Donasi_funUpdateCerita } from "../../fun/update/fun_update_cerita_donasi";
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
import {
ComponentGlobal_WarningMaxUpload,
maksimalUploadFile,
} from "@/app_modules/_global/component/waring_popup";
import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { MODEL_CERITA_DONASI } from "../../model/interface";
export default function EditCeritaPenggalangDonasi({
dataCerita,
@@ -41,27 +38,75 @@ export default function EditCeritaPenggalangDonasi({
}) {
const router = useRouter();
const [isLoading, setLoading] = useState(false);
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
const [value, setValue] = useState(dataCerita);
const [data, setData] = useState(dataCerita);
const [file, setFile] = useState<File | null>(null);
const [updateImage, setUpdateImage] = useState<any | null>();
async function onUpdate() {
setLoading(true);
const body = {
id: data.id,
pembukaan: data.pembukaan,
cerita: data.cerita,
};
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_cerita_image,
});
if (!uploadImage.success) {
setLoading(false);
ComponentGlobal_NotifikasiPeringatan("Gagal upload file gambar");
}
const deleteImage = await funGlobal_DeleteFileById({
fileId: data.imageId,
});
if (!deleteImage.success) {
setLoading(false);
ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama");
}
const res = await Donasi_funUpdateCerita({
data: body as any,
fileId: uploadImage.data.id,
});
if (res.status === 200) {
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
setLoading(false);
} else {
ComponentGlobal_NotifikasiGagal(res.message);
setLoading(false);
}
} else {
const res = await Donasi_funUpdateCerita({
data: body as any,
});
if (res.status === 200) {
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
setLoading(false);
} else {
ComponentGlobal_NotifikasiGagal(res.message);
setLoading(false);
}
}
} catch (error) {
console.log(error);
}
}
return (
<>
{/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
<Stack
spacing={"md"}
style={{
padding: "15px",
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
color: "white",
}}
>
<Stack px={"sm"}>
<Stack spacing={5}>
<Textarea
styles={{
@@ -75,28 +120,48 @@ export default function EditCeritaPenggalangDonasi({
withAsterisk
label="Pembukaan"
placeholder="Pembuka dari isi cerita"
value={value.pembukaan}
value={data.pembukaan}
error={
value.pembukaan === "" ? (
data.pembukaan === "" ? (
<ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
) : (
""
)
}
onChange={(val) =>
setValue({
...value,
setData({
...data,
pembukaan: val.target.value,
})
}
/>
<ComponentGlobal_InputCountDown
lengthInput={value.pembukaan.length}
lengthInput={data.pembukaan.length}
maxInput={300}
/>
</Stack>
<Stack spacing={"lg"}>
<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={data.imageId}
height={200}
/>
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
<Center>
<FileButton
onChange={async (files: any | null) => {
@@ -105,12 +170,8 @@ export default function EditCeritaPenggalangDonasi({
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > maksimalUploadFile) {
ComponentGlobal_WarningMaxUpload({});
} else {
setUpdateImage(buffer);
setFile(files);
}
setUpdateImage(buffer);
setFile(files);
} catch (error) {
console.log(error);
}
@@ -131,27 +192,6 @@ export default function EditCeritaPenggalangDonasi({
)}
</FileButton>
</Center>
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<Image
alt="Foto"
src={
updateImage
? updateImage
: RouterDonasi.api_image_cerita +
value.imageCeritaDonasi.url
}
maw={200}
/>
</Paper>
</AspectRatio>
</Stack>
<Stack spacing={5}>
@@ -167,23 +207,23 @@ export default function EditCeritaPenggalangDonasi({
withAsterisk
label="Cerita"
placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
value={value.cerita}
value={data.cerita}
error={
value.cerita === "" ? (
data.cerita === "" ? (
<ComponentGlobal_ErrorInput text="Masukan pembukaan cerita" />
) : (
""
)
}
onChange={(val) =>
setValue({
...value,
setData({
...data,
cerita: val.target.value,
})
}
/>
<ComponentGlobal_InputCountDown
lengthInput={value.cerita.length}
lengthInput={data.cerita.length}
maxInput={300}
/>
</Stack>
@@ -194,12 +234,12 @@ export default function EditCeritaPenggalangDonasi({
}}
loaderPosition="center"
loading={isLoading ? true : false}
disabled={
value.cerita === "" || value.pembukaan === "" ? true : false
}
disabled={data.cerita === "" || data.pembukaan === "" ? true : false}
w={"100%"}
radius={"xl"}
onClick={() => onUpdate(router, value, file as any)}
onClick={() => {
onUpdate();
}}
bg={MainColor.yellow}
color="yellow"
c={"black"}
@@ -211,30 +251,3 @@ export default function EditCeritaPenggalangDonasi({
</>
);
}
async function onUpdate(
router: any,
value: MODEL_CERITA_DONASI,
file: FormData
) {
// router.back();
const body = {
id: value.id,
pembukaan: value.pembukaan,
cerita: value.cerita,
imagesId: value.imageCeritaDonasi.id,
};
const gambar = new FormData();
gambar.append("file", file as any);
if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
await Donasi_funUpdateCerita(body as any, gambar).then((res) => {
if (res.status === 200) {
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}

206
src/app_modules/donasi/edit/edit_donasi/index.tsx
View File

@@ -1,35 +1,37 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
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_ErrorInput from "@/app_modules/_global/component/error_input";
import {
ComponentGlobal_WarningMaxUpload,
maksimalUploadFile,
} from "@/app_modules/_global/component/waring_popup";
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,
Paper,
Select,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconCamera } from "@tabler/icons-react";
import { useAtom } from "jotai";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
import { Donasi_funUpdateDonasi } from "../../fun/update/fun_update_donasi";
import { gs_donasi_tabs_posting } from "../../global_state";
import { MODEL_DONASI, MODEL_DONASI_ALL_MASTER } from "../../model/interface";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
export default function EditDonasi({
dataDonasi,
@@ -42,20 +44,76 @@ export default function EditDonasi({
}) {
const router = useRouter();
const [isLoading, setLoading] = useState(false);
const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
gs_donasi_tabs_posting
);
const [value, setValue] = useState(dataDonasi);
const [data, setData] = useState(dataDonasi);
const [kategori, setKategori] = useState(masterKategori);
const [durasi, setDurasi] = useState(masterDurasi);
const [file, setFile] = useState<File | null>(null);
const [updateImage, setUpdateImage] = useState<any | null>();
const [opened, { open, close }] = useDisclosure(false);
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: 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);
}
}
return (
<>
{/* <pre>{JSON.stringify(donasi, null, 2)}</pre> */}
<Stack spacing={"md"} px={"md"}>
<Select
styles={{
@@ -65,42 +123,43 @@ export default function EditDonasi({
}}
label="Kategori"
placeholder="Pilih kategori penggalangan dana"
value={value.DonasiMaster_Ketegori.id}
value={data.DonasiMaster_Ketegori.id}
withAsterisk
data={kategori.map((e) => ({
value: e.id,
label: e.name,
}))}
onChange={(val) =>
setValue({
...(value as any),
setData({
...(data as any),
DonasiMaster_Ketegori: {
id: val,
},
})
}
/>
<Stack>
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<Image
alt="Foto"
src={
updateImage
? updateImage
: RouterDonasi.api_gambar + `${value.imagesId}`
}
maw={200}
/>
</Paper>
</AspectRatio>
<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={data.imageId}
height={200}
/>
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
<Center>
<FileButton
onChange={async (files: any | null) => {
@@ -109,12 +168,8 @@ export default function EditDonasi({
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > maksimalUploadFile) {
ComponentGlobal_WarningMaxUpload({});
} else {
setUpdateImage(buffer);
setFile(files);
}
setUpdateImage(buffer);
setFile(files);
} catch (error) {
console.log(error);
}
@@ -136,6 +191,7 @@ export default function EditDonasi({
</FileButton>
</Center>
</Stack>
<Stack>
<TextInput
styles={{
@@ -146,22 +202,23 @@ export default function EditDonasi({
withAsterisk
label="Judul Donasi"
placeholder="Contoh: Renovasi Masjid pada kampung, dll"
value={value.title}
value={data.title}
maxLength={100}
error={
value.title === "" ? (
data.title === "" ? (
<ComponentGlobal_ErrorInput text="Masukan judul" />
) : (
""
)
}
onChange={(val) =>
setValue({
...value,
setData({
...data,
title: val.target.value,
})
}
/>
<TextInput
styles={{
label: {
@@ -173,9 +230,9 @@ export default function EditDonasi({
withAsterisk
label="Target Dana"
placeholder="0"
value={value.target}
value={data.target}
error={
value.target === "" || value.target === "0" ? (
data.target === "" || data.target === "0" ? (
<ComponentGlobal_ErrorInput text="Masukan target dana" />
) : (
""
@@ -187,8 +244,8 @@ export default function EditDonasi({
.match(/^[0-9]+$/);
if (val.currentTarget.value === "")
return setValue({
...value,
return setData({
...data,
target: 0 + "",
});
if (!match?.[0]) return null;
@@ -196,8 +253,8 @@ export default function EditDonasi({
const nilai = val.currentTarget.value.replace(/\./g, "");
const target = Intl.NumberFormat("id-ID").format(+nilai);
setValue({
...value,
setData({
...data,
target: target,
});
}}
@@ -211,14 +268,14 @@ export default function EditDonasi({
label="Durasi"
placeholder="Jangka waktu penggalangan dana"
withAsterisk
value={value.DonasiMaster_Durasi.id}
value={data.DonasiMaster_Durasi.id}
data={durasi.map((e) => ({
value: e.id,
label: e.name + " " + `hari`,
}))}
onChange={(val) =>
setValue({
...(value as any),
setData({
...(data as any),
DonasiMaster_Durasi: {
id: val,
},
@@ -230,13 +287,13 @@ export default function EditDonasi({
style={{
transition: "0.5s",
}}
disabled={value.title === "" || value.target === "0" ? true : false}
disabled={data.title === "" || data.target === "0" ? true : false}
loaderPosition="center"
loading={isLoading ? true : false}
my={"lg"}
radius={"xl"}
onClick={() => {
onUpdate(value, file as any, router);
onUpdate();
}}
bg={MainColor.yellow}
color="yellow"
@@ -248,28 +305,3 @@ export default function EditDonasi({
</>
);
}
async function onUpdate(value: MODEL_DONASI, file: FormData, router: any) {
const body = {
id: value.id,
donasiMaster_KategoriId: value.DonasiMaster_Ketegori.id,
donasiMaster_DurasiId: value.DonasiMaster_Durasi.id,
title: value.title,
target: value.target,
imagesId: value.imagesId,
};
const gambar = new FormData();
gambar.append("file", file as any);
if (_.values(body).includes("")) return NotifPeringatan("Lengkapi Data");
await Donasi_funUpdateDonasi(body as any, gambar).then((res) => {
if (res.status === 200) {
NotifBerhasil(res.message);
router.back();
} else {
NotifPeringatan(res.message);
}
});
}

10
src/app_modules/donasi/edit/edit_rekening/index.tsx
View File

@@ -7,10 +7,12 @@ import _ from "lodash";
import { useRouter } from "next/navigation";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { Donasi_funUpdateRekening } from "../../fun/update/fun_update_rekening";
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
import { NotifGagal } from "../../component/notifikasi/notif_gagal";
import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import {
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
} from "@/app_modules/_global/notif_global";
export default function Donasi_EditRekening({
dataDonasi,
@@ -106,9 +108,9 @@ async function onUpdate(
if (res.status === 200) {
setLoading(true);
router.back();
NotifBerhasil(res.message);
ComponentGlobal_NotifikasiBerhasil(res.message);
} else {
NotifGagal(res.message);
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}

86
src/app_modules/donasi/edit/list_kabar/index.tsx
View File

@@ -1,86 +0,0 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { Box, Button, Center, Stack } from "@mantine/core";
import { IconCirclePlus } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentDonasi_ListKabar from "../../component/card_view/ui_card_kabar";
import { MODEL_DONASI_KABAR } from "../../model/interface";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { ComponentDonasi_CardDonatur } from "../../component/card_view/ui_card_donatur";
import { donasi_funGetListDonaturById } from "../../fun/get/get_list_donatur";
import { donasi_funGetListKabarById } from "../../fun/get/get_list_kabar";
export default function ListKabarDonasi({
donasiId,
listKabar,
}: {
donasiId: string;
listKabar: MODEL_DONASI_KABAR[];
}) {
const router = useRouter();
const [data, setData] = useState(listKabar);
const [activePage, setActivePage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
return (
<>
<Stack>
<Button
loaderPosition="center"
loading={isLoading ? true : false}
leftIcon={<IconCirclePlus />}
radius={"xl"}
onClick={() => {
setIsLoading(true);
router.push(RouterDonasi.create_kabar + `${donasiId}`);
}}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Tambah Kabar
</Button>
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
<Box>
<ScrollOnly
height="85vh"
renderLoading={() => (
<Center>
<ComponentGlobal_Loader size={25} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await donasi_funGetListKabarById({
page: activePage + 1,
donasiId: donasiId,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentDonasi_ListKabar
kabar={item}
route={RouterDonasi.update_kabar}
/>
)}
</ScrollOnly>
</Box>
)}
</Stack>
</>
);
}

20
src/app_modules/donasi/edit/list_kabar/layout.tsx
View File

@@ -1,20 +0,0 @@
"use client";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutListKabarDonasi({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Daftar Kabar" />}>
{children}
</UIGlobal_LayoutTamplate>
</>
);
}

59
src/app_modules/donasi/edit/update_kabar/index.tsx
View File

@@ -1,24 +1,12 @@
"use client";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import {
Paper,
Stack,
Group,
Avatar,
Title,
Text,
AspectRatio,
Image,
Divider,
} from "@mantine/core";
import moment from "moment";
import { MODEL_DONASI_KABAR } from "../../model/interface";
ComponentGlobal_CardStyles,
ComponentGlobal_LoadImageLandscape,
} from "@/app_modules/_global/component";
import { Group, Stack, Text, Title } from "@mantine/core";
import { useState } from "react";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { MODEL_DONASI_KABAR } from "../../model/interface";
export default function UpdateKabarDonasi({
dataKabar,
@@ -28,38 +16,27 @@ export default function UpdateKabarDonasi({
const [kabar, setKabar] = useState(dataKabar);
return (
<>
<Stack
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
padding: "20px",
borderRadius: "10px",
color: "white",
marginBottom: "15px",
}}
>
<ComponentGlobal_CardStyles>
<Stack>
<Group position="right">
<Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
<Text>
{new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
kabar.createdAt
)}
</Text>
</Group>
{kabar.imageId === null ? (
""
) : (
<ComponentGlobal_LoadImageLandscape fileId={kabar.imageId} />
)}
<Title align="center" order={4}>
{kabar.title}
</Title>
{kabar.imagesId === null ? (
""
) : (
<AspectRatio ratio={16 / 9}>
<Paper radius={"md"}>
<Image
alt="Foro"
src={RouterDonasi.api_gambar_kabar + `${kabar.imagesId}`}
/>
</Paper>
</AspectRatio>
)}
<Text>{kabar.deskripsi}</Text>
</Stack>
</Stack>
</ComponentGlobal_CardStyles>
</>
);
}

115
src/app_modules/donasi/edit/update_kabar/layout.tsx
View File

@@ -1,25 +1,20 @@
"use client";
import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
import {
AppShell,
Button,
Center,
Divider,
Footer,
Group,
Header,
} from "@mantine/core";
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
ComponentGlobal_NotifikasiPeringatan,
} from "@/app_modules/_global/notif_global";
import { UIGlobal_DrawerCustom } from "@/app_modules/_global/ui";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { ActionIcon, Center, SimpleGrid, Stack, Text } from "@mantine/core";
import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import React from "react";
import FooterDonasi from "../../component/footer_close_donasi";
import ComponentDonasi_HeaderTamplate from "../../component/header_tamplate";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { Donasi_funDeleteKabar } from "../../fun/delete/fun_delete.kabar";
import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
import { NotifGagal } from "../../component/notifikasi/notif_gagal";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
export default function LayoutUpdateKabarDonasi({
children,
@@ -29,39 +24,77 @@ export default function LayoutUpdateKabarDonasi({
kabarId: string;
}) {
const router = useRouter();
const [openDrawer, setOpenDrawer] = React.useState(false);
async function onDelete() {
const res = await Donasi_funDeleteKabar(kabarId);
if (res.status === 200) {
const deleteImage = await funGlobal_DeleteFileById({
fileId: res.imageId as any,
});
if (!deleteImage.success) {
ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar ");
}
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
}
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Update Kabar" />}
footer={
<Group align="center" h={"100%"} position="center" spacing={"xl"}>
{/* <Button radius={"xl"} variant="outline" color="green">
Edit
</Button> */}
<Button
radius={"xl"}
color="red"
onClick={() => onDelete(router, kabarId)}
>
Hapus
</Button>
</Group>
header={
<UIGlobal_LayoutHeaderTamplate
title="Update Kabar"
customButtonRight={
<ActionIcon
variant="transparent"
onClick={() => setOpenDrawer(true)}
>
<IconDotsVertical color="white" />
</ActionIcon>
}
/>
}
>
{children}
</UIGlobal_LayoutTamplate>
<UIGlobal_DrawerCustom
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={
<SimpleGrid cols={2}>
<Center>
<Stack
align="center"
spacing={"xs"}
onClick={() => {
router.push(RouterDonasi.edit_kabar({ id: kabarId }), {
scroll: false,
});
}}
>
<ActionIcon variant="transparent">
<IconEdit color="white" />
</ActionIcon>
<Text color="white">Edit kabar</Text>
</Stack>
</Center>
<Center>
<Stack align="center" spacing={"xs"} onClick={() => onDelete()}>
<ActionIcon variant="transparent">
<IconTrash color="red" />
</ActionIcon>
<Text color="red">Hapus kabar</Text>
</Stack>
</Center>
</SimpleGrid>
}
/>
</>
);
}
async function onDelete(router: AppRouterInstance, kabarId: string) {
await Donasi_funDeleteKabar(kabarId).then((res) => {
if (res.status === 200) {
router.back();
NotifBerhasil(res.message);
} else {
NotifGagal(res.message);
}
});
}