upd: donasi
Deskripsi: - api donasi saya No Issues
This commit is contained in:
amel
@@ -0,0 +1,83 @@
|
||||
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
|
||||
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
|
||||
import { ComponentGlobal_LoadImageCustom } from "@/app_modules/_global/component";
|
||||
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
|
||||
import { Badge, Card, Grid, Group, Progress, Stack, Text } from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { IDataAllDonasiSaya } from "../../lib/type_donasi";
|
||||
import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
|
||||
import TampilanRupiahDonasi from "../tampilan_rupiah";
|
||||
|
||||
export function ComponentDonasi_CardInvoiceNew({ data, }: { data: IDataAllDonasiSaya; }) {
|
||||
const router = useRouter();
|
||||
|
||||
async function onCekInvoice() {
|
||||
if (data.donasiMaster_StatusInvoiceId === "1") {
|
||||
return router.push(RouterDonasi.detail_donasi_saya + `${data?.id}`);
|
||||
} else {
|
||||
if (data.donasiMaster_StatusInvoiceId === "2") {
|
||||
return router.push(RouterDonasi.proses_transaksi + `${data?.id}`);
|
||||
} else {
|
||||
if (data.donasiMaster_StatusInvoiceId === "3") {
|
||||
return router.push(RouterDonasi.invoice + `${data?.id}`);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal("Gagal Melihat Invoice");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
style={{
|
||||
backgroundColor: AccentColor.blue,
|
||||
border: `2px solid ${AccentColor.darkblue}`,
|
||||
padding: "15px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "10px",
|
||||
color: "white",
|
||||
marginBottom: "15px",
|
||||
}}
|
||||
onClick={() => onCekInvoice()}
|
||||
>
|
||||
<Stack>
|
||||
<Grid>
|
||||
<Grid.Col span={5}>
|
||||
<Stack spacing={5}>
|
||||
<Stack spacing={0}>
|
||||
<Text fz={"xs"} fw={"bold"} truncate>
|
||||
{data.title}
|
||||
</Text>
|
||||
<ComponentDonasi_TampilanHitungMundur
|
||||
durasi={data.durasiDonasi}
|
||||
publishTime={data.publishTime}
|
||||
textSize={10}
|
||||
/>
|
||||
</Stack>
|
||||
<Progress value={+data.progres} color="orange" />
|
||||
<Group position="apart">
|
||||
<Stack spacing={0}>
|
||||
<Text fz={10}>Donasi Saya</Text>
|
||||
<Text fz={10} fw={"bold"} c={"orange"} truncate>
|
||||
<TampilanRupiahDonasi nominal={+data.nominal} />
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Badge size="xs" variant="filled" color="yellow">
|
||||
<Text>{data.nameStatusInvoice}</Text>
|
||||
</Badge>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={7}>
|
||||
<ComponentGlobal_LoadImageCustom
|
||||
height={150}
|
||||
fileId={data.imageId}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
|
||||
import { Box, Grid, Group, Skeleton, Stack } from "@mantine/core";
|
||||
import { Box, Grid, Skeleton } from "@mantine/core";
|
||||
|
||||
export default function SkeletonDonasi() {
|
||||
return <>
|
||||
|
||||
32
src/app_modules/donasi/component/skeleton_donasi_saya.tsx
Normal file
32
src/app_modules/donasi/component/skeleton_donasi_saya.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
|
||||
import { Box, Grid, Skeleton } from "@mantine/core";
|
||||
|
||||
export default function SkeletonDonasiSaya() {
|
||||
return <>
|
||||
<Box>
|
||||
{[...Array(3)].map((_, index) => (
|
||||
<ComponentGlobal_CardStyles key={index}>
|
||||
<Grid>
|
||||
<Grid.Col span={6}>
|
||||
<Box>
|
||||
{[...Array(4)].map((_, index) => (
|
||||
<Box key={index} py={5}>
|
||||
<Grid align="center">
|
||||
<Grid.Col span={12}>
|
||||
<Skeleton w={"100%"} h={15} />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Skeleton w={"100%"} height={100} radius="md" />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</ComponentGlobal_CardStyles>
|
||||
))}
|
||||
</Box >
|
||||
</>;
|
||||
}
|
||||
@@ -6,4 +6,9 @@ export const apiGetAllDonasi = async (path?: string) => {
|
||||
export const apiGetMasterDonasi = async (path?: string) => {
|
||||
const response = await fetch(`/api/new/donasi/master${(path) ? path : ''}`)
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
|
||||
export const apiGetAllDonasiSaya = async (path?: string) => {
|
||||
const response = await fetch(`/api/new/donasi/invoice${(path) ? path : ''}`)
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
@@ -7,4 +7,17 @@ export interface IDataAllDonasi {
|
||||
terkumpul: string
|
||||
target: string
|
||||
nameDonasiDurasi: string
|
||||
}
|
||||
|
||||
export interface IDataAllDonasiSaya {
|
||||
id: string
|
||||
nominal: string
|
||||
donasiMaster_StatusInvoiceId: string
|
||||
nameStatusInvoice: string
|
||||
donasiId: string
|
||||
title: string
|
||||
publishTime: Date
|
||||
progres: string
|
||||
imageId: string
|
||||
durasiDonasi: string
|
||||
}
|
||||
72
src/app_modules/donasi/main/donasi_saya_new.tsx
Normal file
72
src/app_modules/donasi/main/donasi_saya_new.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
|
||||
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
|
||||
import { Box, Center } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import _ from "lodash";
|
||||
import { ScrollOnly } from "next-scroll-loader";
|
||||
import { useState } from "react";
|
||||
import { ComponentDonasi_CardInvoiceNew } from "../component/card_view/card_invoice_new";
|
||||
import SkeletonDonasiSaya from "../component/skeleton_donasi_saya";
|
||||
import { apiGetAllDonasiSaya } from "../lib/api_donasi";
|
||||
import { IDataAllDonasiSaya } from "../lib/type_donasi";
|
||||
|
||||
export default function DonasiSayaNew() {
|
||||
const [data, setData] = useState<IDataAllDonasiSaya[]>([]);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
async function getDataDonasiSaya() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiGetAllDonasiSaya(`?page=1`)
|
||||
if (response.success) {
|
||||
setData(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
getDataDonasiSaya()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
{
|
||||
loading ?
|
||||
<SkeletonDonasiSaya />
|
||||
:
|
||||
_.isEmpty(data) ? (
|
||||
<ComponentGlobal_IsEmptyData />
|
||||
) : (
|
||||
<ScrollOnly
|
||||
height="82vh"
|
||||
renderLoading={() => (
|
||||
<Center>
|
||||
<ComponentGlobal_Loader size={25} />
|
||||
</Center>
|
||||
)}
|
||||
data={data}
|
||||
setData={setData}
|
||||
moreData={async () => {
|
||||
const pageNew = activePage + 1
|
||||
const loadData = await apiGetAllDonasiSaya(`?page=${pageNew}`)
|
||||
setActivePage((val) => val + 1);
|
||||
|
||||
return loadData.data;
|
||||
}}
|
||||
>
|
||||
{(item) => <ComponentDonasi_CardInvoiceNew data={item} />}
|
||||
</ScrollOnly>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user