Fix tampilan dashboard admin donasi & event

This commit is contained in:
2025-01-24 17:29:31 +08:00
parent 074337bae1
commit ab0623fb26
10 changed files with 3585 additions and 145 deletions

View File

@@ -21,6 +21,7 @@ import {
Button,
Center,
Image,
Skeleton,
Stack,
TextInput,
Textarea,
@@ -32,6 +33,7 @@ import { useState } from "react";
import { donasi_funUpdateKabar } from "../../fun";
import { MODEL_DONASI_KABAR } from "../../model/interface";
import { clientLogger } from "@/util/clientLogger";
import SkeletonEditDonasi from "../../edit/edit_donasi/skeleton_edit_donasi";
export function Donasi_ViewEditKabar({
dataKabar,
@@ -104,108 +106,116 @@ export function Donasi_ViewEditKabar({
} catch (error) {
setLoading(false);
clientLogger.error("Error update donasi", error);
} finally {
setLoading(false);
}
}
return (
<>
<Stack px={"lg"} pb={"lg"}>
<ComponentGlobal_BoxInformation informasi="Gambar tidak wajib di isi ! Hanya upload jika di butuhkan." />
{isLoading ? (
<SkeletonEditDonasi />
) : (
<>
<ComponentGlobal_BoxInformation informasi="Gambar tidak wajib di isi ! Hanya upload jika di butuhkan." />
<TextInput
maxLength={100}
styles={{
label: {
color: "white",
},
}}
label="Judul"
withAsterisk
placeholder="Masukan judul kabar"
value={data.title}
onChange={(val) => {
setData({
...data,
title: _.startCase(val.target.value),
});
}}
/>
<Textarea
maxLength={1000}
styles={{
label: {
color: "white",
},
}}
label="Deskripsi"
withAsterisk
placeholder="Masukan deskripsi kabar"
autosize
maxRows={10}
minRows={2}
value={data.deskripsi}
onChange={(val) => {
setData({
...data,
deskripsi: val.target.value,
});
}}
/>
<ComponentGlobal_InputCountDown
lengthInput={data.deskripsi.length}
maxInput={1000}
/>
<Stack spacing={5}>
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
<Image
style={{ maxHeight: 250 }}
alt="Foto"
height={250}
src={img}
/>
</AspectRatio>
) : data.imageId === null ? (
<Stack justify="center" align="center" h={"100%"}>
<IconPhoto size={100} />
</Stack>
) : (
<Stack justify="center" align="center" h={"100%"} p={"sm"}>
<ComponentGlobal_LoadImageCustom
fileId={data.imageId}
height={200}
/>
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
{/* Upload Foto */}
<Center>
<ComponentGlobal_ButtonUploadFileImage
onSetFile={setFile}
onSetImage={setImg}
<TextInput
maxLength={100}
styles={{
label: {
color: "white",
},
}}
label="Judul"
withAsterisk
placeholder="Masukan judul kabar"
value={data.title}
onChange={(val) => {
setData({
...data,
title: _.startCase(val.target.value),
});
}}
/>
<Textarea
maxLength={1000}
styles={{
label: {
color: "white",
},
}}
label="Deskripsi"
withAsterisk
placeholder="Masukan deskripsi kabar"
autosize
maxRows={10}
minRows={2}
value={data.deskripsi}
onChange={(val) => {
setData({
...data,
deskripsi: val.target.value,
});
}}
/>
<ComponentGlobal_InputCountDown
lengthInput={data.deskripsi.length}
maxInput={1000}
/>
</Center>
</Stack>
<Button
style={{
transition: "0.5s",
}}
disabled={_.values(data).includes("") ? true : false}
radius={"xl"}
mt={"lg"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
loading={isLoading}
loaderPosition="center"
onClick={() => onUpdate()}
>
Simpan
</Button>
<Stack spacing={5}>
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
<Image
style={{ maxHeight: 250 }}
alt="Foto"
height={250}
src={img}
/>
</AspectRatio>
) : data.imageId === null ? (
<Stack justify="center" align="center" h={"100%"}>
<IconPhoto size={100} />
</Stack>
) : (
<Stack justify="center" align="center" h={"100%"} p={"sm"}>
<ComponentGlobal_LoadImageCustom
fileId={data.imageId}
height={200}
/>
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
{/* Upload Foto */}
<Center>
<ComponentGlobal_ButtonUploadFileImage
onSetFile={setFile}
onSetImage={setImg}
/>
</Center>
</Stack>
<Button
style={{
transition: "0.5s",
}}
disabled={_.values(data).includes("") ? true : false}
radius={"xl"}
mt={"lg"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
loading={isLoading}
loaderPosition="center"
onClick={() => onUpdate()}
>
Simpan
</Button>
</>
)}
</Stack>
</>
);