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

# fix

Browse Source 
## Deskripsi:
- Perubahan tampilan notifikasi
- Pin map sesuai logo
- Pin map bisa custom
### No Issue
This commit is contained in:
Bagasbanuna02
2024-08-23 14:15:11 +08:00
parent cae318c5e3
commit a6bb993b0d
75 changed files with 1602 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/app_modules/notifikasi/component/card_skeleton.tsx Normal file
View File

@@ -0,0 +1,62 @@
"use client";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import {
Box,
Card,
Divider,
Group,
Skeleton,
Stack,
Text,
} from "@mantine/core";
export function ComponentNotifikasi_CardSkeleton() {
return (
<>
{Array.from(new Array(10)).map((e, i) => (
<Card
key={i}
py={30}
style={{
backgroundColor: MainColor.darkblue,
color: "gray",
border: `2px solid ${AccentColor.darkblue}`,
borderRadius: "10px 10px 10px 10px",
}}
mb={"xs"}
>
<Card.Section px={"lg"}>
<Stack>
<Group position="apart">
<Skeleton h={20} w={100} radius={"xl"} />
<Skeleton h={20} w={100} radius={"xl"} />
</Group>
<Divider color="gray" />
</Stack>
</Card.Section>
<Card.Section p={"lg"}>
<Stack>
<Skeleton h={20} radius={"xl"} />
<Skeleton h={20} radius={"xl"} />
</Stack>
</Card.Section>
<Card.Section px={"lg"}>
<Stack>
<Group position="apart">
<Skeleton h={20} w={100} radius={"xl"} />
<Skeleton h={20} w={100} radius={"xl"} />
</Group>
</Stack>
</Card.Section>
</Card>
))}
</>
);
}

5
src/app_modules/notifikasi/component/index.ts Normal file
View File

@@ -0,0 +1,5 @@
import { ComponentNotifikasi_CardSkeleton } from "./card_skeleton";
import { ComponentNotifiaksi_CardView } from "./card_view";
export { ComponentNotifiaksi_CardView };
export { ComponentNotifikasi_CardSkeleton };

127
src/app_modules/notifikasi/component/ui_notifiaksi.tsx
View File

@@ -1,127 +0,0 @@
"use client";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { gs_job_hot_menu, gs_job_status } from "@/app_modules/job/global_state";
import { Box, Center } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useAtom } from "jotai";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
import { MODEL_NOTIFIKASI } from "../model/interface";
import { ComponentNotifiaksi_CardView } from "./card_view";
import {
gs_vote_hotMenu,
gs_vote_status,
} from "@/app_modules/vote/global_state";
import {
gs_event_hotMenu,
gs_event_status,
} from "@/app_modules/event/global_state";
import {
gs_donasi_hot_menu,
gs_donasi_tabs_posting,
} from "@/app_modules/donasi/global_state";
import {
gs_investas_menu,
gs_investasi_status,
} from "@/app_modules/investasi/g_state";
export function Notifikasi_UiView({
listNotifikasi,
}: {
listNotifikasi: MODEL_NOTIFIKASI[];
}) {
const [data, setData] = useState(listNotifikasi);
const [activePage, setActivePage] = useState(1);
// JOB
const [jobMenuId, setJobMenuId] = useAtom(gs_job_hot_menu);
const [jobStatus, setJobStatus] = useAtom(gs_job_status);
const [voteMenu, setVoteMenu] = useAtom(gs_vote_hotMenu);
const [voteStatus, setVoteStatus] = useAtom(gs_vote_status);
const [eventMenu, setEventMenu] = useAtom(gs_event_hotMenu);
const [eventStatus, setEventStatus] = useAtom(gs_event_status);
const [donasiMenu, setDonasiMenu] = useAtom(gs_donasi_hot_menu);
const [donasiStatus, setDonasiStatus] = useAtom(gs_donasi_tabs_posting);
const [investasiMenu, setInvestasiMenu] = useAtom(gs_investas_menu);
const [investasiStatus, setInvestasiStatus] = useAtom(gs_investasi_status);
// useShallowEffect(() => {
// onLoadData({
// onLoad(val) {
// setData(val);
// },
// });
// }, []);
// async function onLoadData({ onLoad }: { onLoad: (val: any) => void }) {
// const loadData = await notifikasi_getByUserId({ page: 1 });
// onLoad(loadData);
// }
return (
<>
<Box>
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData text="Tidak ada pemberitahuan" />
) : (
<ScrollOnly
height="92vh"
renderLoading={() => (
<Center mt={"lg"}>
<ComponentGlobal_Loader />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await notifikasi_getByUserId({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentNotifiaksi_CardView
data={item}
onLoadData={setData}
activePage={activePage}
onSetMenu={(val) => {
if (item?.kategoriApp === "JOB") {
setJobMenuId(val.menuId);
setJobStatus(val.status);
}
if (item?.kategoriApp === "VOTING") {
setVoteMenu(val.menuId);
setVoteStatus(val.status);
}
if (item?.kategoriApp === "EVENT") {
setEventMenu(val.menuId);
setEventStatus(val.status);
}
if (item?.kategoriApp === "DONASI") {
setDonasiMenu(val.menuId);
setDonasiStatus(val.status);
}
if (item?.kategoriApp === "INVESTASI") {
setInvestasiMenu(val.menuId);
setInvestasiStatus(val.status);
}
}}
/>
)}
</ScrollOnly>
)}
</Box>
</>
);
}