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

#style:

Browse Source 
Deskripsi:
- UI Voting bagian beranda dan status
## Noissue
This commit is contained in:
Bagasbanuna02
2024-07-12 16:02:28 +08:00
parent e744bb95fa
commit 7e21694324
50 changed files with 1222 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/app_modules/vote/main/beranda.tsx
View File

@@ -5,8 +5,10 @@ import {
ActionIcon,
Affix,
Box,
Center,
Loader,
Stack,
rem
rem,
} from "@mantine/core";
import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
import { IconPencilPlus } from "@tabler/icons-react";
@@ -15,21 +17,20 @@ import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentVote_CardViewPublish from "../component/card_view_publish";
import ComponentVote_IsEmptyData from "../component/is_empty_data";
import { Vote_getAllListPublish } from "../fun/get/get_all_list_publish";
import { vote_getAllListPublish } from "../fun/get/get_all_list_publish";
import { MODEL_VOTING } from "../model/interface";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import job_getAllStatusPublish from "@/app_modules/job/fun/get/status/get_list_publish";
import { ScrollOnly } from "next-scroll-loader";
export default function Vote_Beranda({
dataVote,
}: {
dataVote: MODEL_VOTING[];
}) {
const router = useRouter();
const [data, setData] = useState(dataVote);
const [isLoading, setIsLoading] = useState(false);
const [scroll, scrollTo] = useWindowScroll();
useShallowEffect(() => {
onLoad({
setData(val) {
@@ -39,46 +40,45 @@ export default function Vote_Beranda({
}, [setData]);
async function onLoad({ setData }: { setData: (val: any) => void }) {
const loadData = await Vote_getAllListPublish();
const loadData = await vote_getAllListPublish({ page: 1 });
setData(loadData);
}
const [activePage, setActivePage] = useState(1);
return (
<>
<Affix position={{ bottom: rem(150), right: rem(30) }}>
<ActionIcon
loading={isLoading ? true : false}
opacity={scroll.y > 0 ? 0.5 : ""}
style={{
transition: "0.5s",
}}
size={"xl"}
radius={"xl"}
variant="transparent"
bg={"blue"}
onClick={() => {
setIsLoading(true);
router.push(RouterVote.create);
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<ScrollOnly
height="85vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await vote_getAllListPublish({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
<IconPencilPlus color="white" />
</ActionIcon>
</Affix>
{_.isEmpty(data) ? (
<ComponentVote_IsEmptyData text="Tidak ada data" />
) : (
<Stack>
{data.map((e, i) => (
<Box key={i}>
<ComponentVote_CardViewPublish
path={RouterVote.main_detail}
data={e}
authorName={true}
/>
</Box>
))}
</Stack>
{(item) => (
<ComponentVote_CardViewPublish
data={item}
path={RouterVote.main_detail}
authorName={true}
/>
)}
</ScrollOnly>
)}
</>
);

102
src/app_modules/vote/main/layout.tsx
View File

@@ -6,6 +6,7 @@ import {
Center,
Footer,
Grid,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
@@ -23,6 +24,10 @@ import { gs_vote_hotMenu } from "../global_state";
import { useAtom } from "jotai";
import { RouterHome } from "@/app/lib/router_hipmi/router_home";
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 { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
export default function LayoutVote_Main({
children,
@@ -62,50 +67,75 @@ export default function LayoutVote_Main({
return (
<>
<AppComponentGlobal_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentVote_HeaderTamplate
<UIGlobal_LayoutHeaderTamplate
title="Voting"
route={RouterHome.main_home}
routerLeft={RouterHome.main_home}
/>
}
footer={
<Footer
height={"10vh"}
bg={"dark"}
sx={{ borderTop: "px solid blue" }}
>
<Stack h={"100%"} justify="center">
<Grid>
{listFooter.map((e, i) => (
<Grid.Col key={e.id} span={"auto"} pt={"md"}>
<Center
onClick={() => {
router.replace(e.path);
setHotMenu(i);
}}
>
<Stack align="center" spacing={0}>
<ActionIcon
variant="transparent"
c={hotMenu === i ? "blue" : "white"}
>
{e.icon}
</ActionIcon>
<Text fz={10} c={hotMenu === i ? "blue" : "white"}>
{e.name}
</Text>
</Stack>
</Center>
</Grid.Col>
))}
</Grid>
</Stack>
</Footer>
<SimpleGrid cols={4} h={"9vh"} mx={"xs"} >
{listFooter.map((e, i) => (
<Stack key={i} align="center" justify="center" spacing={0}>
<ActionIcon
// disabled={e.path === "" ? true : false}
variant="transparent"
c={hotMenu === e.id ? MainColor.yellow : "white"}
onClick={() =>
e.path === ""
? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
: (router.replace(e.path), setHotMenu(e.id))
}
>
{e.icon}
</ActionIcon>
<Text
c={hotMenu === e.id ? MainColor.yellow : "white"}
fz={"xs"}
lineClamp={1}
>
{e.name}
</Text>
</Stack>
))}
</SimpleGrid>
// <Footer
// height={"10vh"}
// bg={"dark"}
// sx={{ borderTop: "px solid blue" }}
// >
// <Stack h={"100%"} justify="center">
// <Grid>
// {listFooter.map((e, i) => (
// <Grid.Col key={e.id} span={"auto"} pt={"md"}>
// <Center
// onClick={() => {
// router.replace(e.path);
// setHotMenu(i);
// }}
// >
// <Stack align="center" spacing={0}>
// <ActionIcon
// variant="transparent"
// c={hotMenu === i ? "blue" : "white"}
// >
// {e.icon}
// </ActionIcon>
// <Text fz={10} c={hotMenu === i ? "blue" : "white"}>
// {e.name}
// </Text>
// </Stack>
// </Center>
// </Grid.Col>
// ))}
// </Grid>
// </Stack>
// </Footer>
}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

57
src/app_modules/vote/main/status/draft.tsx
View File

@@ -1,32 +1,59 @@
"use client";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import ComponentVote_CardViewStatus from "../../component/card_view_status";
import { MODEL_VOTING } from "../../model/interface";
import { Box, Center, Loader, Stack } from "@mantine/core";
import _ from "lodash";
import { Box, Center, Stack, Text } from "@mantine/core";
import ComponentVote_CardViewStatus from "../../component/card_view_status";
import ComponentVote_IsEmptyData from "../../component/is_empty_data";
import { MODEL_VOTING } from "../../model/interface";
import { useState } from "react";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { ScrollOnly } from "next-scroll-loader";
import { vote_getAllReview } from "../../fun/get/status/get_all_review";
import { vote_getAllDraft } from "../../fun/get/status/get_all_draft";
export default function Vote_StatusDraft({
listDraft,
}: {
listDraft: MODEL_VOTING[];
}) {
if (_.isEmpty(listDraft))
return <ComponentVote_IsEmptyData text="Tidak ada data" />;
const [data, setData] = useState(listDraft);
const [activePage, setActivePage] = useState(1);
return (
<>
<Stack>
{listDraft.map((e) => (
<Box key={e.id}>
<ComponentVote_CardViewStatus
path={RouterVote.detail_draft}
data={e}
/>
</Box>
))}
</Stack>
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<Box>
<ScrollOnly
height="75vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await vote_getAllDraft({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentVote_CardViewStatus
data={item}
path={RouterVote.detail_draft}
/>
)}
</ScrollOnly>
</Box>
)}
</>
);
}

40
src/app_modules/vote/main/status/index.tsx
View File

@@ -1,14 +1,16 @@
"use client";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { Stack, Tabs } from "@mantine/core";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { gs_vote_status } from "../../global_state";
import Vote_StatusPublish from "./publish";
import Vote_StatusReview from "./review";
import Vote_StatusDraft from "./draft";
import Vote_StatusPublish from "./publish";
import Vote_StatusReject from "./reject";
import Vote_StatusReview from "./review";
export default function Vote_Status({
listPublish,
@@ -21,7 +23,7 @@ export default function Vote_Status({
listDraft: any[];
listReject: any[];
}) {
const router = useRouter();
const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
const listTabs = [
{
@@ -45,16 +47,27 @@ export default function Vote_Status({
value: "Reject",
},
];
return (
<>
<Tabs
color="blue"
mt={1}
variant="pills"
radius={"xl"}
defaultValue={"Publish"}
value={tabsStatus}
onTabChange={setTabsStatus}
styles={{
tabsList: {
backgroundColor: MainColor.darkblue,
position: "sticky",
top: 0,
zIndex: 99,
},
panel: {
paddingTop: 10,
},
}}
>
<Stack>
<Tabs.List grow>
@@ -62,8 +75,17 @@ export default function Vote_Status({
<Tabs.Tab
key={e.id}
value={e.value}
bg={tabsStatus === e.value ? "blue" : "gray.1"}
fw={tabsStatus === e.value ? "bold" : "normal"}
fw={"bold"}
c={"black"}
style={{
transition: "0.5s",
backgroundColor:
tabsStatus === e.value ? MainColor.yellow : "white",
border:
tabsStatus === e.value
? `1px solid ${AccentColor.yellow}`
: `1px solid white`,
}}
>
{e.value}
</Tabs.Tab>

74
src/app_modules/vote/main/status/publish.tsx
View File

@@ -1,54 +1,60 @@
"use client";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import {
Avatar,
Badge,
Box,
Card,
Center,
Divider,
Grid,
Group,
Radio,
Skeleton,
Stack,
Text,
Title,
} from "@mantine/core";
import moment from "moment";
import { useRouter } from "next/navigation";
import { MODEL_VOTING } from "../../model/interface";
import ComponentVote_IsEmptyData from "../../component/is_empty_data";
import { Box, Center, Loader, Stack } from "@mantine/core";
import _ from "lodash";
import { useRouter } from "next/navigation";
import ComponentVote_CardViewPublish from "../../component/card_view_publish";
import ComponentVote_IsEmptyData from "../../component/is_empty_data";
import { MODEL_VOTING } from "../../model/interface";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import ComponentJob_CardStatus from "@/app_modules/job/component/card/card_view";
import job_getAllStatusPublish from "@/app_modules/job/fun/get/status/get_list_publish";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
export default function Vote_StatusPublish({
listPublish,
}: {
listPublish: MODEL_VOTING[];
}) {
const router = useRouter();
if (_.isEmpty(listPublish))
return (
<>
<ComponentVote_IsEmptyData text="Tidak ada data" />
</>
);
const [data, setData] = useState(listPublish);
const [activePage, setActivePage] = useState(1);
return (
<>
<Stack>
{listPublish.map((e) => (
<Box key={e.id}>
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<ScrollOnly
height="75vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await job_getAllStatusPublish({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentVote_CardViewPublish
data={e}
data={item}
path={RouterVote.detail_publish}
/>
</Box>
))}
</Stack>
)}
</ScrollOnly>
)}
</>
);
}

57
src/app_modules/vote/main/status/reject.tsx
View File

@@ -1,32 +1,57 @@
"use client";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import ComponentVote_CardViewStatus from "../../component/card_view_status";
import { MODEL_VOTING } from "../../model/interface";
import { Box, Stack } from "@mantine/core";
import ComponentVote_IsEmptyData from "../../component/is_empty_data";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { Box, Center, Loader } from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import ComponentVote_CardViewStatus from "../../component/card_view_status";
import { vote_getAllReject } from "../../fun/get/status/get_all_reject";
import { MODEL_VOTING } from "../../model/interface";
export default function Vote_StatusReject({
listReject,
}: {
listReject: MODEL_VOTING[];
}) {
if (_.isEmpty(listReject))
return <ComponentVote_IsEmptyData text="Tidak ada data" />;
const [data, setData] = useState(listReject);
const [activePage, setActivePage] = useState(1);
return (
<>
<Stack>
{listReject.map((e) => (
<Box key={e.id}>
<ComponentVote_CardViewStatus
path={RouterVote.detail_reject}
data={e}
/>
</Box>
))}
</Stack>
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<Box>
<ScrollOnly
height="75vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await vote_getAllReject({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentVote_CardViewStatus
data={item}
path={RouterVote.detail_reject}
/>
)}
</ScrollOnly>
</Box>
)}
</>
);
}

55
src/app_modules/vote/main/status/review.tsx
View File

@@ -3,31 +3,58 @@
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import ComponentVote_CardViewStatus from "../../component/card_view_status";
import { MODEL_VOTING } from "../../model/interface";
import { Box, Center, Stack, Text } from "@mantine/core";
import { Box, Center, Loader, Stack, Text } from "@mantine/core";
import _ from "lodash";
import ComponentVote_IsEmptyData from "../../component/is_empty_data";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import job_getAllStatusPublish from "@/app_modules/job/fun/get/status/get_list_publish";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import ComponentVote_CardViewPublish from "../../component/card_view_publish";
import { vote_getAllReview } from "../../fun/get/status/get_all_review";
export default function Vote_StatusReview({
listReview,
}: {
listReview: MODEL_VOTING[];
}) {
if (_.isEmpty(listReview))
return <ComponentVote_IsEmptyData text="Tidak ada data" />;
const [data, setData] = useState(listReview);
const [activePage, setActivePage] = useState(1);
return (
<>
<Stack>
{listReview.map((e) => (
<Box key={e.id}>
<ComponentVote_CardViewStatus
path={RouterVote.detail_review}
data={e}
/>
</Box>
))}
</Stack>
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<Box >
<ScrollOnly
height="75vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await vote_getAllReview({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentVote_CardViewStatus
data={item}
path={RouterVote.detail_review}
/>
)}
</ScrollOnly>
</Box>
)}
</>
);
}