#style: Tampilan home
Deskripsi: - Tampilan tamplate layout positionnya di ganti fixed ( tidak bisa di tarik ke bawah jika sudah menjadi aplikasi ) - UI Home selesai - UI User search selesai - UI Notifikasi selesai ## No issuee
This commit is contained in:
141
src/app_modules/notifikasi/component/card_view.tsx
Normal file
141
src/app_modules/notifikasi/component/card_view.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
"use client";
|
||||
|
||||
import { Badge, Card, Divider, Group, Stack, Text } from "@mantine/core";
|
||||
import { IconCheck, IconChecks } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import notifikasi_funUpdateIsReadById from "../fun/update/fun_update_is_read_by_user_id";
|
||||
import { MODEL_NOTIFIKASI } from "../model/interface";
|
||||
import { redirectDetailForumPage } from "./path/forum";
|
||||
import { redirectJobPage } from "./path/job";
|
||||
import {
|
||||
AccentColor,
|
||||
MainColor,
|
||||
} from "@/app_modules/component_global/color/color_pallet";
|
||||
import notifikasi_getByUserId from "../fun/get/get_notifiaksi_by_id";
|
||||
|
||||
export function ComponentNotifiaksi_CardView({
|
||||
data,
|
||||
onLoadData,
|
||||
activePage,
|
||||
onSetJob,
|
||||
}: {
|
||||
data: MODEL_NOTIFIKASI;
|
||||
onLoadData: (val: any) => void;
|
||||
activePage: number;
|
||||
onSetJob: (val: any) => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
style={{
|
||||
backgroundColor: data?.isRead
|
||||
? MainColor.darkblue
|
||||
: AccentColor.darkblue,
|
||||
color: data?.isRead ? "gray" : "white",
|
||||
border: data?.isRead
|
||||
? `2px solid ${AccentColor.darkblue}`
|
||||
: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px 10px 10px 10px",
|
||||
}}
|
||||
my={"xs"}
|
||||
onClick={async () => {
|
||||
data?.kategoriApp === "JOB" &&
|
||||
redirectJobPage({
|
||||
data: data,
|
||||
router: router,
|
||||
onSetPage(val) {
|
||||
onSetJob(val);
|
||||
},
|
||||
});
|
||||
|
||||
data?.kategoriApp === "FORUM" &&
|
||||
redirectDetailForumPage({
|
||||
data: data,
|
||||
router: router,
|
||||
});
|
||||
|
||||
const updateIsRead = await notifikasi_funUpdateIsReadById({
|
||||
notifId: data?.id,
|
||||
});
|
||||
|
||||
if (updateIsRead.status === 200) {
|
||||
// console.log(updateIsRead.status);
|
||||
// const loadData = await notifikasi_getByUserId({ page: activePage });
|
||||
// onLoadData(loadData);
|
||||
// console.log("berhasil load")
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* <pre>{JSON.stringify(e, null, 2)}</pre> */}
|
||||
<Card.Section p={"sm"}>
|
||||
<Stack spacing={"xs"}>
|
||||
<Group position="apart">
|
||||
<Text fw={"bold"} fz={10}>
|
||||
# {data?.kategoriApp}
|
||||
</Text>
|
||||
{data?.status ? (
|
||||
<Badge
|
||||
// fz={10}
|
||||
variant="outline"
|
||||
color={data?.isRead ? "gray" : "teal"}
|
||||
>
|
||||
{data?.status}
|
||||
</Badge>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Group>
|
||||
<Divider color={data?.isRead ? "gray" : "white"} />
|
||||
</Stack>
|
||||
</Card.Section>
|
||||
<Card.Section px={"sm"} pb={"sm"}>
|
||||
<Stack spacing={data.kategoriApp === "FORUM" ? 0 : "xs"}>
|
||||
<Text lineClamp={2} fw={"bold"}>
|
||||
{data?.title}
|
||||
</Text>
|
||||
{data.kategoriApp === "FORUM" ? (
|
||||
<div
|
||||
style={{ fontSize: 12 }}
|
||||
dangerouslySetInnerHTML={{ __html: data?.pesan }}
|
||||
/>
|
||||
) : (
|
||||
<Text lineClamp={2}>{data?.pesan}</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Card.Section>
|
||||
<Card.Section p={"sm"}>
|
||||
<Group position="apart">
|
||||
<Text fz={10} color="gray">
|
||||
{new Intl.DateTimeFormat("id-ID", {
|
||||
dateStyle: "long",
|
||||
}).format(data?.createdAt)}
|
||||
|
||||
<Text span inherit fz={10} color="gray">
|
||||
{", "}
|
||||
{new Intl.DateTimeFormat("id-ID", {
|
||||
timeStyle: "short",
|
||||
}).format(data?.createdAt)}
|
||||
</Text>
|
||||
</Text>
|
||||
{data?.isRead ? (
|
||||
<Group spacing={5}>
|
||||
<IconChecks color="gray" size={10} />
|
||||
<Text fz={10} color="gray">
|
||||
Sudah dilihat
|
||||
</Text>
|
||||
</Group>
|
||||
) : (
|
||||
<Group spacing={5}>
|
||||
<IconCheck color="gray" size={10} />
|
||||
<Text fz={10} color="gray">
|
||||
Belum dilihat
|
||||
</Text>
|
||||
</Group>
|
||||
)}
|
||||
</Group>
|
||||
</Card.Section>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
26
src/app_modules/notifikasi/component/path/forum.ts
Normal file
26
src/app_modules/notifikasi/component/path/forum.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
|
||||
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
|
||||
import { MODEL_NOTIFIKASI } from "../../model/interface";
|
||||
|
||||
export function redirectDetailForumPage({
|
||||
data,
|
||||
router,
|
||||
}: {
|
||||
data: MODEL_NOTIFIKASI;
|
||||
router: AppRouterInstance;
|
||||
}) {
|
||||
if (data.status === null) {
|
||||
const path = RouterForum.main_detail + data.appId;
|
||||
router.push(path, { scroll: false });
|
||||
}
|
||||
|
||||
if (data.status === "Report Komentar") {
|
||||
const path = RouterForum.detail_report_komentar + data.appId;
|
||||
router.push(path, { scroll: false });
|
||||
}
|
||||
|
||||
if (data.status === "Report Posting") {
|
||||
const path = RouterForum.detail_report_posting + data.appId;
|
||||
router.push(path, { scroll: false });
|
||||
}
|
||||
}
|
||||
31
src/app_modules/notifikasi/component/path/job.ts
Normal file
31
src/app_modules/notifikasi/component/path/job.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
|
||||
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
|
||||
import { MODEL_NOTIFIKASI } from "../../model/interface";
|
||||
|
||||
export function redirectJobPage({
|
||||
data,
|
||||
router,
|
||||
onSetPage,
|
||||
}: {
|
||||
data: MODEL_NOTIFIKASI;
|
||||
router: AppRouterInstance;
|
||||
onSetPage: (val: any) => void;
|
||||
}) {
|
||||
const path = RouterJob.status;
|
||||
|
||||
if (data.status === "Publish") {
|
||||
onSetPage({
|
||||
menuId: 2,
|
||||
status: data.status,
|
||||
});
|
||||
}
|
||||
|
||||
if (data.status === "Reject") {
|
||||
onSetPage({
|
||||
menuId: 2,
|
||||
status: data.status,
|
||||
});
|
||||
}
|
||||
|
||||
router.push(path, {scroll: false});
|
||||
}
|
||||
81
src/app_modules/notifikasi/component/ui_notifiaksi.tsx
Normal file
81
src/app_modules/notifikasi/component/ui_notifiaksi.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
|
||||
import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_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";
|
||||
|
||||
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);
|
||||
|
||||
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_UI_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={(val) => setData(val)}
|
||||
activePage={activePage}
|
||||
onSetJob={(val) => {
|
||||
setJobMenuId(val.menuId);
|
||||
setJobStatus(val.status);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</ScrollOnly>
|
||||
)}
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user