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

UI Job

Browse Source 
# style
- UI Job di bagian user selesai

# fix
- Scroll data untuk beranda dan tampilan yang lain selesi

## No issue
This commit is contained in:
Bagasbanuna02
2024-07-05 16:29:54 +08:00
parent bca5a2ac15
commit ac12dd4a98
93 changed files with 2008 additions and 901 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app_modules/job/main/arsip.tsx
View File

@@ -1,16 +0,0 @@
"use client";
import ComponentJob_CardViewStatus from "../component/card_view_status";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import { MODEL_JOB } from "../model/interface";
export default function Job_Arsip({ dataJob }: { dataJob: MODEL_JOB[] }) {
return (
<>
<ComponentJob_CardViewStatus
listData={dataJob}
path={RouterJob.detail_arsip}
/>
</>
);
}

55
src/app_modules/job/main/arsip/ui_arsip.tsx Normal file
View File

@@ -0,0 +1,55 @@
"use client"
import { useState } from "react"
import { MODEL_JOB } from "../../model/interface"
import _ from "lodash";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
import { Box, Center, Loader } from "@mantine/core";
import { ScrollOnly } from "next-scroll-loader";
import ComponentJob_CardStatus from "../../component/card/card_view";
import job_getAllStatusPublish from "../../fun/get/status/get_list_publish";
import { job_getAllArsipById } from "../../fun/get/get_all_arsip";
export function Job_UI_Arsip({listData}: {listData: MODEL_JOB[]}){
const [data, setData] = useState(listData)
const [activePage, setActivePage] = useState(1);
return (
<>
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<Box >
<ScrollOnly
height="85vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await job_getAllArsipById({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentJob_CardStatus
data={item}
path={RouterJob.detail_arsip}
/>
)}
</ScrollOnly>
</Box>
)}
</>
);
}

11
src/app_modules/job/main/arsip/view_arsip.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { Box } from "@mantine/core";
import { MODEL_JOB } from "../../model/interface";
import { Job_UI_Arsip } from "./ui_arsip";
export default function Job_ViewArsip({ dataJob }: { dataJob: MODEL_JOB[] }) {
return (
<>
<Job_UI_Arsip listData={dataJob} />;
</>
);
}

120
src/app_modules/job/main/beranda.tsx
View File

@@ -1,120 +0,0 @@
"use client";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
import {
ActionIcon,
Affix,
Card,
Center,
Grid,
Image,
Loader,
Overlay,
Stack,
Text,
Title,
rem,
} from "@mantine/core";
import { IconCirclePlus, IconPencilPlus } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { MODEL_JOB } from "../model/interface";
import ComponentJob_DetailData from "../component/detail/detail_data";
import ComponentJob_CardViewStatus from "../component/card_view_status";
import _ from "lodash";
import ComponentJob_IsEmptyData from "../component/is_empty_data";
import { useState } from "react";
import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
import ComponentGlobal_CardLoadingOverlay from "@/app_modules/component_global/loading_card";
import { Job_getAllListPublish } from "../fun/get/get_list_all_publish";
export default function Job_Beranda({ listJob }: { listJob: MODEL_JOB[] }) {
const router = useRouter();
const [data, setData] = useState(listJob);
const [isLoading, setLoading] = useState(false);
const [scroll, scrollTo] = useWindowScroll();
const [visible, setVisible] = useState(false);
const [jobId, setJobId] = useState("");
useShallowEffect(() => {
onLoad({
setData(val) {
setData(val);
},
});
}, [setData]);
async function onLoad({ setData }: { setData: (val: any) => void }) {
const loadData = await Job_getAllListPublish();
setData(loadData);
}
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={() => {
setLoading(true);
router.push(RouterJob.create);
}}
>
<IconPencilPlus color="white" />
</ActionIcon>
</Affix>
{_.isEmpty(data) ? (
<ComponentJob_IsEmptyData text="Data tidak ada" />
) : (
<Stack>
{data.map((e, i) => (
<Card key={i} shadow="lg" withBorder p={30} radius={"md"}>
<Card.Section style={{ zIndex: 99 }}>
<ComponentGlobal_AuthorNameOnHeader
authorName={e.Author.Profile.name}
imagesId={e.Author.Profile.imagesId}
profileId={e.Author.Profile.id}
isPembatas={true}
/>
</Card.Section>
<Card.Section
onClick={() => {
visible ? "" : setJobId(e.id),
setVisible(true),
router.push(RouterJob.main_detail + e.id);
}}
mt={"lg"}
>
<Grid>
<Grid.Col span={"auto"}>
<Center h={"100%"}>
<Text fw={"bold"} fz={"xl"} lineClamp={1}>
{e.title}
</Text>
</Center>
</Grid.Col>
</Grid>
</Card.Section>
{visible && e.id === jobId ? (
<ComponentGlobal_CardLoadingOverlay />
) : (
""
)}
</Card>
))}
</Stack>
)}
</>
);
}

75
src/app_modules/job/main/beranda/ui_beranda.tsx Normal file
View File

@@ -0,0 +1,75 @@
"use client";
import { useState } from "react";
import { MODEL_JOB } from "../../model/interface";
import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
import { Stack, TextInput, Center, Loader } from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import ComponentJob_BerandaCardView from "../../component/beranda/card_view";
import { job_getAllListPublish } from "../../fun/get/get_all_publish";
import ComponentJob_CreateButton from "../../component/button/create_button";
export function Job_UiBeranda({ listData }: { listData: MODEL_JOB[] }) {
const [data, setData] = useState(listData);
const [activePage, setActivePage] = useState(1);
const [isSearch, setIsSearch] = useState("");
async function onSearch(text: string) {
setIsSearch(text);
const loadData = await job_getAllListPublish({
page: activePage,
search: text,
});
setData(loadData as any);
setActivePage(1);
}
return (
<>
<Stack my={1} spacing={30}>
<ComponentJob_CreateButton />
<TextInput
style={{
position: "sticky",
top: 0,
zIndex: 99,
}}
radius={"xl"}
placeholder="Pekerjaan apa yang anda cari ?"
onChange={(val) => {
onSearch(val.currentTarget.value);
}}
/>
{_.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_getAllListPublish({
page: activePage + 1,
search: isSearch,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => <ComponentJob_BerandaCardView data={item} />}
</ScrollOnly>
)}
</Stack>
</>
);
}

10
src/app_modules/job/main/beranda/view_beranda.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { MODEL_JOB } from "../../model/interface";
import { Job_UiBeranda } from "./ui_beranda";
export default function Job_ViewBeranda({ listJob }: { listJob: MODEL_JOB[] }) {
return (
<>
<Job_UiBeranda listData={listJob} />
</>
);
}

133
src/app_modules/job/main/layout.tsx
View File

@@ -1,24 +1,17 @@
"use client";
import {
ActionIcon,
AppShell,
Center,
Footer,
Grid,
Loader,
Stack,
Text,
} from "@mantine/core";
import React, { useState } from "react";
import ComponentJob_HeaderTamplate from "../component/header_tamplate";
import { IconHistory, IconHome, IconReservedLine } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import { MainColor } from "@/app_modules/component_global/color/color_pallet";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import ComponentGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import ComponentGlobal_UI_LayoutTamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import { ActionIcon, SimpleGrid, Stack, Text } from "@mantine/core";
import { IconHistory, IconHome, IconReservedLine } from "@tabler/icons-react";
import { useAtom } from "jotai";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { gs_job_hot_menu } from "../global_state";
import { RouterHome } from "@/app/lib/router_hipmi/router_home";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
export default function LayoutJob_Main({
children,
@@ -53,57 +46,79 @@ export default function LayoutJob_Main({
return (
<>
<AppComponentGlobal_LayoutTamplate
<ComponentGlobal_UI_LayoutTamplate
header={
<ComponentJob_HeaderTamplate
title="Job Vacancy"
route={RouterHome.main_home}
<ComponentGlobal_UI_HeaderTamplate
title="JOB"
routerLeft={RouterHome.main_home}
/>
}
footer={
<Footer height={"10vh"} bg={"dark"}>
<Stack justify="center" h={"100%"}>
<Grid>
{listFooter.map((e) => (
<Grid.Col
key={e.id}
span={"auto"}
pt={"md"}
onClick={() => {
// setLoading(true);
// setTimeout(() => router.replace(e.path), 3000);
router.replace(e.path);
setHotMenuId(e.id);
// setTimeout(() => setLoading(false), 1000);
}}
>
<Center>
<Stack align="center" spacing={0}>
<ActionIcon
variant="transparent"
c={hotMenuId === e.id ? "blue" : "white"}
>
{e.icon}
{/* {isLoading && hotMenuId === e.id ? (
<Loader />
) : (
e.icon
)} */}
</ActionIcon>
<Text fz={10} c={hotMenuId === e.id ? "blue" : "white"}>
{e.name}
</Text>
</Stack>
</Center>
</Grid.Col>
))}
</Grid>
</Stack>
</Footer>
<SimpleGrid cols={3} h={"10vh"} mx={"xs"}>
{listFooter.map((e, i) => (
<Stack key={i} align="center" justify="center" spacing={0}>
<ActionIcon
// disabled={e.path === "" ? true : false}
variant="transparent"
c={hotMenuId === e.id ? MainColor.yellow : "white"}
onClick={() =>
e.path === ""
? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
: (router.replace(e.path), setHotMenuId(e.id))
}
>
{e.icon}
</ActionIcon>
<Text
c={hotMenuId === e.id ? MainColor.yellow : "white"}
fz={"xs"}
lineClamp={1}
>
{e.name}
</Text>
</Stack>
))}
</SimpleGrid>
// <Stack justify="center" h={"100%"}>
// <Grid>
// {listFooter.map((e) => (
// <Grid.Col
// key={e.id}
// span={"auto"}
// pt={"md"}
// onClick={() => {
// // setLoading(true);
// // setTimeout(() => router.replace(e.path), 3000);
// router.replace(e.path);
// setHotMenuId(e.id);
// // setTimeout(() => setLoading(false), 1000);
// }}
// >
// <Center>
// <Stack align="center" spacing={0}>
// <ActionIcon
// radius={"xl"}
// variant="transparent"
// c={hotMenuId === e.id ? MainColor.yellow : "white"}
// >
// {e.icon}
// </ActionIcon>
// <Text
// fz={10}
// c={hotMenuId === e.id ? MainColor.yellow : "white"}
// >
// {e.name}
// </Text>
// </Stack>
// </Center>
// </Grid.Col>
// ))}
// </Grid>
// </Stack>
}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</ComponentGlobal_UI_LayoutTamplate>
</>
);
}

50
src/app_modules/job/main/status/draft.tsx
View File

@@ -1,17 +1,53 @@
"use client";
import { Stack, Card, Grid, Image, Text } from "@mantine/core";
import ComponentJob_CardViewStatus from "../../component/card_view_status";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import ComponentJob_CardPreview from "../../component/card_preview";
import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
import { Center, Loader } from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import ComponentJob_CardStatus from "../../component/card/card_view";
import job_getAllStatusDraft from "../../fun/get/status/get_list_draft";
export default function Job_Draft({ listDraft }: { listDraft: any }) {
const [data, setData] = useState(listDraft);
const [activePage, setActivePage] = useState(1);
return (
<>
<ComponentJob_CardViewStatus
listData={listDraft}
path={RouterJob.detail_draft}
/>
<>
{_.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_getAllStatusDraft({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentJob_CardStatus
data={item}
path={RouterJob.detail_draft}
/>
)}
</ScrollOnly>
)}
</>
</>
);
}

50
src/app_modules/job/main/status/publish.tsx
View File

@@ -1,19 +1,51 @@
"use client";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
import { Stack, Card, Grid, Image, Text } from "@mantine/core";
import ComponentJob_CardViewStatus from "../../component/card_view_status";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import ComponentJob_CardPreview from "../../component/card_preview";
import { Job_getListStatusByStatusId } from "../../fun/get/get_list_status_by_status_id";
import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
import { Center, Loader } from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import ComponentJob_CardStatus from "../../component/card/card_view";
import job_getAllStatusPublish from "../../fun/get/status/get_list_publish";
export default function Job_Publish({ listPublish }: { listPublish: any }) {
const [data, setData] = useState(listPublish);
const [activePage, setActivePage] = useState(1);
return (
<>
<ComponentJob_CardViewStatus
listData={listPublish}
path={RouterJob.detail_publish}
/>
{_.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) => (
<ComponentJob_CardStatus
data={item}
path={RouterJob.detail_publish}
/>
)}
</ScrollOnly>
)}
</>
);
}

47
src/app_modules/job/main/status/reject.tsx
View File

@@ -1,14 +1,51 @@
"use client";
import { Stack, Card, Grid, Image, Text } from "@mantine/core";
import ComponentJob_CardViewStatus from "../../component/card_view_status";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import { MODEL_JOB } from "../../model/interface";
import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
import { Center, Loader } from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import ComponentJob_CardStatus from "../../component/card/card_view";
import job_getAllStatusReject from "../../fun/get/status/get_list_reject";
export default function Job_Reject({ listReject }: { listReject: any[] }) {
const [data, setData] = useState(listReject);
const [activePage, setActivePage] = useState(1);
export default function Job_Reject({ listReject }: { listReject : MODEL_JOB[]}) {
return (
<>
<ComponentJob_CardViewStatus listData={listReject} path={RouterJob.detail_reject} />
{_.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_getAllStatusReject({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentJob_CardStatus
data={item}
path={RouterJob.detail_reject}
/>
)}
</ScrollOnly>
)}
</>
);
}

48
src/app_modules/job/main/status/review.tsx
View File

@@ -1,17 +1,51 @@
"use client";
import { Stack, Card, Grid, Image, Text } from "@mantine/core";
import ComponentJob_CardViewStatus from "../../component/card_view_status";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
import { Center, Loader } from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import ComponentJob_CardStatus from "../../component/card/card_view";
import job_getAllStatusReview from "../../fun/get/status/get_list_review";
export default function Job_Review({ listReview }: { listReview : any[]}) {
export default function Job_Review({ listReview }: { listReview: any[] }) {
const [data, setData] = useState(listReview);
const [activePage, setActivePage] = useState(1);
return (
<>
<ComponentJob_CardViewStatus
listData={listReview}
path={RouterJob.detail_review}
/>
{_.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_getAllStatusReview({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentJob_CardStatus
data={item}
path={RouterJob.detail_review}
/>
)}
</ScrollOnly>
)}
</>
);
}

57
src/app_modules/job/main/status/view.tsx → src/app_modules/job/main/status/ui_status.tsx
View File

@@ -1,16 +1,18 @@
"use client";
import { Stack, Tabs } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import Job_Publish from "./publish";
import Job_Review from "./review";
import Job_Draft from "./draft";
import Job_Reject from "./reject";
import { Tabs, Stack } from "@mantine/core";
import { useAtom } from "jotai";
import { gs_job_status } from "../../global_state";
import Job_Draft from "./draft";
import Job_Publish from "./publish";
import Job_Reject from "./reject";
import Job_Review from "./review";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function Job_Status({
export default function Job_UiStatus({
listPublish,
listReview,
listDraft,
@@ -21,7 +23,6 @@ export default function Job_Status({
listDraft: any[];
listReject: any[];
}) {
const router = useRouter();
const [tabsStatus, setTabsStatus] = useAtom(gs_job_status);
const listTabs = [
{
@@ -41,36 +42,50 @@ export default function Job_Status({
},
{
id: 4,
path: <Job_Reject listReject={listReject}/>,
path: <Job_Reject listReject={listReject} />,
value: "Reject",
},
];
return (
<>
<Tabs
color="blue"
mt={1}
color="yellow"
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>
{listTabs.map((e) => (
<Tabs.Tab
sx={
tabsStatus === e.value
? {
boxShadow:
"0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.2)",
}
: {}
}
key={e.id}
value={e.value}
bg={tabsStatus === e.value ? "blue" : "gray.1"}
fw={tabsStatus === e.value ? "bold" : "normal"}
fw={"bold"}
color={tabsStatus === e.value ? "black" : "white"}
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>

24
src/app_modules/job/main/status/view_status.tsx Normal file
View File

@@ -0,0 +1,24 @@
import Job_UiStatus from "./ui_status";
export default function Job_ViewStatus({
listPublish,
listReview,
listDraft,
listReject,
}: {
listPublish: any[];
listReview: any[];
listDraft: any[];
listReject: any[];
}) {
return (
<>
<Job_UiStatus
listPublish={listPublish}
listDraft={listDraft}
listReject={listReject}
listReview={listReview}
/>
</>
);
}