# Forum
## feat - Tampilan forum - Tampilan forumku - Tampilan komentar - Tampilam posting - Tampilan Detail posting - Tampilan Edit postinf - Tampilan edit komentat - Tampilan report posting - Tampilan report komentar ### No issuee
This commit is contained in:
133
src/app_modules/forum/component/author_header_name.tsx
Normal file
133
src/app_modules/forum/component/author_header_name.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"use client";
|
||||
|
||||
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
|
||||
import {
|
||||
Stack,
|
||||
Grid,
|
||||
Avatar,
|
||||
Divider,
|
||||
Text,
|
||||
Group,
|
||||
ThemeIcon,
|
||||
ActionIcon,
|
||||
Drawer,
|
||||
Paper,
|
||||
Button,
|
||||
Modal,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import moment from "moment";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
|
||||
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
|
||||
import {
|
||||
IconCircleFilled,
|
||||
IconDots,
|
||||
IconEdit,
|
||||
IconFlag3,
|
||||
IconMessageCircle,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react";
|
||||
import { IconCircle } from "@tabler/icons-react";
|
||||
import { IoIosMore } from "react-icons/io";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { useState } from "react";
|
||||
import ButtonMore from "./button_more";
|
||||
|
||||
export default function ComponentForum_AuthorNameOnHeader({
|
||||
forumId,
|
||||
imagesId,
|
||||
authorName,
|
||||
username,
|
||||
tglPublish,
|
||||
isPembatas,
|
||||
tipe,
|
||||
isMoreButton,
|
||||
}: {
|
||||
forumId?: string;
|
||||
imagesId?: string;
|
||||
authorName?: string;
|
||||
username?: string;
|
||||
tglPublish?: Date;
|
||||
isPembatas?: boolean;
|
||||
tipe: string;
|
||||
isMoreButton?: boolean;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const skrng = new Date();
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xs"}>
|
||||
<Grid>
|
||||
<Grid.Col
|
||||
span={"content"}
|
||||
onClick={() => {
|
||||
if (forumId) {
|
||||
router.push(RouterForum.forumku + forumId);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
size={30}
|
||||
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
|
||||
radius={"xl"}
|
||||
bg={"gray.1"}
|
||||
src={
|
||||
imagesId
|
||||
? RouterProfile.api_foto_profile + imagesId
|
||||
: "/aset/global/avatar.png"
|
||||
}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack justify="center" h={"100%"}>
|
||||
<Grid>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
|
||||
{authorName
|
||||
? authorName
|
||||
: "Nama author coba di berikan panjang "}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
{/* <Grid.Col span={"auto"}>
|
||||
<Text lineClamp={1} fz={"sm"} c={"gray"}>
|
||||
{username ? username : "@username "}
|
||||
</Text>
|
||||
</Grid.Col> */}
|
||||
<Grid.Col span={"content"}></Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"content"}>
|
||||
<Group position="center" spacing={"xs"}>
|
||||
<Group spacing={3}>
|
||||
<Text c={"gray"} fz={"sm"}>
|
||||
{skrng.toLocaleDateString(["id-ID"], {
|
||||
// dateStyle: "medium",
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
})}
|
||||
<IconCircle
|
||||
size={5}
|
||||
color="gray"
|
||||
style={{ marginLeft: "5px" }}
|
||||
/>
|
||||
</Text>
|
||||
</Group>
|
||||
{isMoreButton ? (
|
||||
<Group position="right">
|
||||
<ButtonMore id={forumId} tipe={tipe} />
|
||||
</Group>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
{isPembatas ? <Divider /> : ""}
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
114
src/app_modules/forum/component/author_name_on_detail.tsx
Normal file
114
src/app_modules/forum/component/author_name_on_detail.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
|
||||
import {
|
||||
Stack,
|
||||
Grid,
|
||||
Avatar,
|
||||
Divider,
|
||||
Text,
|
||||
Group,
|
||||
ThemeIcon,
|
||||
ActionIcon,
|
||||
} from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import moment from "moment";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
|
||||
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
|
||||
import {
|
||||
IconCircleFilled,
|
||||
IconDots,
|
||||
IconMessageCircle,
|
||||
} from "@tabler/icons-react";
|
||||
import { IconCircle } from "@tabler/icons-react";
|
||||
import ButtonMore from "./button_more";
|
||||
|
||||
export default function ComponentForum_AuthorNameOnDetail({
|
||||
forumId,
|
||||
imagesId,
|
||||
authorName,
|
||||
username,
|
||||
tglPublish,
|
||||
isPembatas,
|
||||
tipe,
|
||||
}: {
|
||||
forumId?: string;
|
||||
imagesId?: string;
|
||||
authorName?: string;
|
||||
username?: string;
|
||||
tglPublish?: Date;
|
||||
isPembatas?: boolean;
|
||||
tipe: string
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const skrng = new Date();
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xs"}>
|
||||
<Grid>
|
||||
<Grid.Col
|
||||
span={"content"}
|
||||
onClick={() => {
|
||||
if (forumId) {
|
||||
router.push(RouterForum.forumku + forumId);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
size={40}
|
||||
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
|
||||
radius={"xl"}
|
||||
bg={"gray.1"}
|
||||
src={
|
||||
imagesId
|
||||
? RouterProfile.api_foto_profile + imagesId
|
||||
: "/aset/global/avatar.png"
|
||||
}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack spacing={0}>
|
||||
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
|
||||
{authorName ? authorName : "Nama author "}
|
||||
</Text>
|
||||
<Text lineClamp={1} fz={"xs"} c={"gray"}>
|
||||
{username ? username : "@username "}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
{/* <Stack justify="center" h={"100%"}>
|
||||
<Grid>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
|
||||
{authorName ? authorName : "Nama author "}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text lineClamp={1} fz={"sm"} c={"gray"}>
|
||||
{username ? username : "@username "}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Group spacing={3}>
|
||||
<IconCircle size={5} color="gray" />
|
||||
<Text c={"gray"} fz={"sm"}>
|
||||
{skrng.toLocaleDateString(["id-ID"], {
|
||||
dateStyle: "medium",
|
||||
})}
|
||||
</Text>
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack> */}
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"content"}>
|
||||
<ButtonMore id={forumId} tipe="posting"/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
{isPembatas ? <Divider /> : ""}
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
172
src/app_modules/forum/component/button_more.tsx
Normal file
172
src/app_modules/forum/component/button_more.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
|
||||
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
|
||||
import {
|
||||
Drawer,
|
||||
Stack,
|
||||
Grid,
|
||||
Button,
|
||||
Modal,
|
||||
Title,
|
||||
Group,
|
||||
ActionIcon,
|
||||
Text,
|
||||
Box,
|
||||
Center,
|
||||
Loader,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { IconTrash, IconEdit, IconFlag3, IconDots } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
import { createStyles } from "@mantine/core";
|
||||
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_forum_loading_edit_posting } from "../global_state";
|
||||
import ComponentForum_LoadingDrawer from "./loading_drawer";
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
myCustomButton: {
|
||||
...theme.fn.focusStyles(),
|
||||
},
|
||||
radiusCustom: {
|
||||
// borderRadius: "10px, 10px, 0px,0px",
|
||||
borderTopRightRadius: "10px",
|
||||
borderTopLeftRadius: "10px",
|
||||
},
|
||||
}));
|
||||
|
||||
export default function ButtonMore({ id, tipe }: { id: any; tipe: string }) {
|
||||
const router = useRouter();
|
||||
const { classes } = useStyles();
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [openDel, setOpenDel] = useState(false);
|
||||
|
||||
// loading
|
||||
const [loadingEdit, setLoadingEdit] = useState(false);
|
||||
const [loadingReport, setLoadingReport] = useState(false);
|
||||
|
||||
// if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer
|
||||
// className={classes.radiusCustom}
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
withCloseButton={false}
|
||||
overlayProps={{ opacity: 0.1, blur: 1 }}
|
||||
position="bottom"
|
||||
size={"auto"}
|
||||
>
|
||||
<Stack>
|
||||
<Grid
|
||||
onClick={() => {
|
||||
close();
|
||||
setOpenDel(true);
|
||||
}}
|
||||
>
|
||||
<Grid.Col span={"content"}>
|
||||
<IconTrash color="red" />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text c={"red"}>Hapus</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
onClick={() => {
|
||||
setLoadingEdit(true);
|
||||
if (tipe === "posting") {
|
||||
router.push(RouterForum.edit_posting + id);
|
||||
} else {
|
||||
router.push(RouterForum.edit_komentar + id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Grid.Col span={"content"}>
|
||||
<IconEdit color={loadingEdit ? "gray" : "black"} />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Group>
|
||||
<Text c={loadingEdit ? "gray" : "black"}>Edit {tipe}</Text>{" "}
|
||||
{loadingEdit ? <Loader size={"sm"} /> : ""}
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
onClick={() => {
|
||||
setLoadingReport(true);
|
||||
if (tipe === "posting") {
|
||||
router.push(RouterForum.report_posting + id);
|
||||
} else {
|
||||
router.push(RouterForum.report_komentar + id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Grid.Col span={"content"}>
|
||||
<IconFlag3 color={loadingReport ? "gray" : "black"} />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Group>
|
||||
<Text c={loadingReport ? "gray" : "black"}>
|
||||
Laporkan {tipe}
|
||||
</Text>{" "}
|
||||
{loadingReport ? <Loader size={"sm"} /> : ""}
|
||||
</Group>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Button variant="outline" radius={"xl"} onClick={close}>
|
||||
Batal
|
||||
</Button>
|
||||
</Stack>
|
||||
</Drawer>
|
||||
|
||||
<Modal
|
||||
opened={openDel}
|
||||
onClose={() => {
|
||||
setOpenDel(false);
|
||||
}}
|
||||
centered
|
||||
withCloseButton={false}
|
||||
>
|
||||
<Stack>
|
||||
<Title order={6}>Yakin menghapus {tipe} ini ?</Title>
|
||||
<Group position="center">
|
||||
<Button radius={"xl"} onClick={() => setOpenDel(false)}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
setOpenDel(false);
|
||||
if (tipe === "posting") {
|
||||
ComponentGlobal_NotifikasiBerhasil(
|
||||
"Postingan Terhapus ",
|
||||
2000
|
||||
);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiBerhasil(
|
||||
"Berhasil Hapus Komentar",
|
||||
2000
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<ActionIcon variant="transparent" onClick={() => open()}>
|
||||
<IconDots size={20} />
|
||||
</ActionIcon>
|
||||
</>
|
||||
);
|
||||
}
|
||||
30
src/app_modules/forum/component/header/header_rata_kiri.tsx
Normal file
30
src/app_modules/forum/component/header/header_rata_kiri.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { ActionIcon, Group, Header, Title } from "@mantine/core";
|
||||
import { IconX } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function ComponentForum_HeaderRataKiri({
|
||||
title,
|
||||
}: {
|
||||
title: string;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Header height={50} sx={{ borderStyle: "none" }}>
|
||||
<Group h={50} px={"md"}>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
router.back();
|
||||
}}
|
||||
>
|
||||
<IconX />
|
||||
</ActionIcon>
|
||||
<Title order={5}>{title}</Title>
|
||||
</Group>
|
||||
</Header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
69
src/app_modules/forum/component/header/header_tamplate.tsx
Normal file
69
src/app_modules/forum/component/header/header_tamplate.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
|
||||
import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ComponentForum_HeaderTamplate({
|
||||
hideBack,
|
||||
changeIconBack,
|
||||
route,
|
||||
route2,
|
||||
title,
|
||||
icon,
|
||||
bg,
|
||||
}: {
|
||||
hideBack?: boolean;
|
||||
changeIconBack?: any;
|
||||
route?: any;
|
||||
route2?: any;
|
||||
title: string;
|
||||
icon?: any;
|
||||
bg?: any;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
height={50}
|
||||
sx={{ borderStyle: "none" }}
|
||||
bg={bg === null ? "" : bg}
|
||||
>
|
||||
<Group h={50} position="apart" px={"md"}>
|
||||
{hideBack ? (
|
||||
<ActionIcon variant="transparent" disabled></ActionIcon>
|
||||
) : (
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
if (route === null || route === undefined) {
|
||||
return router.back();
|
||||
} else {
|
||||
return router.push(route);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{changeIconBack ? changeIconBack : <IconChevronLeft />}
|
||||
</ActionIcon>
|
||||
)}
|
||||
<Title order={5}>{title}</Title>
|
||||
{(() => {
|
||||
if (route2 === null || route2 === undefined) {
|
||||
return <ActionIcon disabled variant="transparent"></ActionIcon>;
|
||||
} else {
|
||||
return (
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
onClick={() => router.push(route2)}
|
||||
>
|
||||
{icon}
|
||||
</ActionIcon>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Group>
|
||||
</Header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
22
src/app_modules/forum/component/loading_drawer.tsx
Normal file
22
src/app_modules/forum/component/loading_drawer.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import { Center, Group, LoadingOverlay, Skeleton } from "@mantine/core";
|
||||
|
||||
export default function ComponentForum_LoadingDrawer() {
|
||||
const customLoad = (
|
||||
<Center h={"100vh"}>
|
||||
<Group>
|
||||
{Array(3)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Skeleton key={i} height={50} circle mb="xl" />
|
||||
))}
|
||||
</Group>
|
||||
</Center>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{customLoad}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user