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

# Forum Created

Browse Source 
## feat
- CRUD Forum
- CRD Koment
- Tampilan forum profile
### No issue
This commit is contained in:
Bagasbanuna02
2024-03-15 10:27:06 +08:00
parent 7baceafa80
commit a77d728a5f
40 changed files with 1999 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/app_modules/forum/component/button_more.tsx
View File

@@ -1,172 +0,0 @@
"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>
</>
);
}

27
src/app_modules/forum/component/author_name_on_detail.tsx → src/app_modules/forum/component/header/detail_author_header_name.tsx
View File

@@ -21,27 +21,27 @@ import {
IconMessageCircle,
} from "@tabler/icons-react";
import { IconCircle } from "@tabler/icons-react";
import ButtonMore from "./button_more";
import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
import ComponentForum_DetailMoreButton from "../more_button/detail_more_button";
export default function ComponentForum_AuthorNameOnDetail({
forumId,
export default function ComponentForum_DetailOnHeaderAuthorName({
authorId,
postingId,
imagesId,
authorName,
username,
tglPublish,
isPembatas,
tipe,
}: {
forumId?: string;
authorId?: string
postingId?: string;
imagesId?: string;
authorName?: string;
username?: string;
tglPublish?: Date;
isPembatas?: boolean;
tipe: string
}) {
const router = useRouter();
const skrng = new Date();
return (
<>
<Stack spacing={"xs"}>
@@ -49,8 +49,8 @@ export default function ComponentForum_AuthorNameOnDetail({
<Grid.Col
span={"content"}
onClick={() => {
if (forumId) {
router.push(RouterForum.forumku + forumId);
if (authorId) {
router.push(RouterForum.forumku + authorId);
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
@@ -74,7 +74,7 @@ export default function ComponentForum_AuthorNameOnDetail({
{authorName ? authorName : "Nama author "}
</Text>
<Text lineClamp={1} fz={"xs"} c={"gray"}>
{username ? username : "@username "}
{username ? `@${username}` : "@username "}
</Text>
</Stack>
@@ -104,7 +104,10 @@ export default function ComponentForum_AuthorNameOnDetail({
</Stack> */}
</Grid.Col>
<Grid.Col span={"content"}>
<ButtonMore id={forumId} tipe="posting"/>
<ComponentForum_DetailMoreButton
postingId={postingId}
authorId={authorId}
/>
</Grid.Col>
</Grid>
{isPembatas ? <Divider /> : ""}

15
src/app_modules/forum/component/header/header_tamplate.tsx
View File

@@ -1,6 +1,15 @@
"use client";
import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
import {
Header,
Group,
ActionIcon,
Text,
Title,
Center,
Loader,
} from "@mantine/core";
import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
@@ -23,6 +32,9 @@ export default function ComponentForum_HeaderTamplate({
bg?: any;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
if (loading) return <ComponentGlobal_V2_LoadingPage />;
return (
<>
<Header
@@ -37,6 +49,7 @@ export default function ComponentForum_HeaderTamplate({
<ActionIcon
variant="transparent"
onClick={() => {
setLoading(true);
if (route === null || route === undefined) {
return router.back();
} else {

132
src/app_modules/forum/component/header/komentar_author_header_name.tsx Normal file
View File

@@ -0,0 +1,132 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { Stack, Grid, Avatar, Divider, Text, Group } 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 ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
import ComponentForum_KomentarButtonMore from "../more_button/komentar_button_more";
export default function ComponentForum_KomentarAuthorNameOnHeader({
userId,
komentarId,
imagesId,
authorName,
tglPublish,
isPembatas,
isMoreButton,
setKomentar,
postingId,
}: {
userId?: string;
komentarId?: string;
imagesId?: string;
authorName?: string;
tglPublish?: Date;
isPembatas?: boolean;
isMoreButton?: boolean;
setKomentar?: any;
postingId?: string
}) {
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Grid>
<Grid.Col
span={"content"}
onClick={() => {
if (userId) {
router.push(RouterForum.forumku + userId);
} 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"}>
{tglPublish
? tglPublish.toLocaleDateString(["id-ID"], {
day: "numeric",
month: "short",
})
: new Date().toLocaleDateString(["id-ID"], {
day: "numeric",
month: "short",
})}
<IconCircle
size={5}
color="gray"
style={{ marginLeft: "5px" }}
/>
</Text>
</Group>
{isMoreButton ? (
<Group position="right">
<ComponentForum_KomentarButtonMore
userId={userId}
komentarId={komentarId}
setKomentar={setKomentar}
postingId={postingId}
/>
</Group>
) : (
""
)}
</Group>
</Grid.Col>
</Grid>
{isPembatas ? <Divider /> : ""}
</Stack>
</>
);
}

54
src/app_modules/forum/component/author_header_name.tsx → src/app_modules/forum/component/header/posting_author_header_name.tsx
View File

@@ -1,21 +1,7 @@
"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 { Stack, Grid, Avatar, Divider, Text, Group } from "@mantine/core";
import { useRouter } from "next/navigation";
import moment from "moment";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
@@ -32,29 +18,26 @@ 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";
import ComponentForum_PostingButtonMore from "../more_button/posting_button_more";
export default function ComponentForum_AuthorNameOnHeader({
forumId,
export default function ComponentForum_PostingAuthorNameOnHeader({
authorId,
postingId,
imagesId,
authorName,
username,
tglPublish,
isPembatas,
tipe,
isMoreButton,
}: {
forumId?: string;
authorId?: string;
postingId?: 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"}>
@@ -62,8 +45,8 @@ export default function ComponentForum_AuthorNameOnHeader({
<Grid.Col
span={"content"}
onClick={() => {
if (forumId) {
router.push(RouterForum.forumku + forumId);
if (authorId) {
router.push(RouterForum.forumku + authorId);
} else {
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
}
@@ -104,11 +87,15 @@ export default function ComponentForum_AuthorNameOnHeader({
<Group position="center" spacing={"xs"}>
<Group spacing={3}>
<Text c={"gray"} fz={"sm"}>
{skrng.toLocaleDateString(["id-ID"], {
// dateStyle: "medium",
day: "numeric",
month: "short",
})}
{tglPublish
? tglPublish.toLocaleDateString(["id-ID"], {
day: "numeric",
month: "short",
})
: new Date().toLocaleDateString(["id-ID"], {
day: "numeric",
month: "short",
})}
<IconCircle
size={5}
color="gray"
@@ -118,7 +105,10 @@ export default function ComponentForum_AuthorNameOnHeader({
</Group>
{isMoreButton ? (
<Group position="right">
<ButtonMore id={forumId} tipe={tipe} />
<ComponentForum_PostingButtonMore
authorId={authorId}
postingId={postingId as any}
/>
</Group>
) : (
""

98
src/app_modules/forum/component/main_card_view.tsx Normal file
View File

@@ -0,0 +1,98 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { Stack, Card, Group, ActionIcon, Divider, Text } from "@mantine/core";
import { IconMessageCircle } from "@tabler/icons-react";
import ComponentForum_PostingAuthorNameOnHeader from "./header/posting_author_header_name";
import { MODEL_FORUM_POSTING } from "../model/interface";
import { useState } from "react";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useAtom } from "jotai";
import { gs_forum_total_komentar } from "../global_state";
import { forum_countOneTotalKomentarById } from "../fun/count/count_one_total_komentar_by_id";
export default function ComponentForum_MainCardView({
data,
setLoadingKomen,
setLoadingDetail,
}: {
data: MODEL_FORUM_POSTING[];
setLoadingKomen: any;
setLoadingDetail: any;
}) {
const router = useRouter();
return (
<>
<Stack>
{data.map((e, i) => (
<Card key={i}>
<Card.Section>
<ComponentForum_PostingAuthorNameOnHeader
authorName={e?.Author?.Profile?.name}
imagesId={e?.Author?.Profile?.imagesId}
tglPublish={e?.createdAt}
isMoreButton={true}
authorId={e?.Author?.id}
postingId={e?.id}
/>
</Card.Section>
<Card.Section
sx={{ zIndex: 0 }}
p={"sm"}
onClick={() => {
// console.log("halaman forum");
setLoadingDetail(true);
router.push(RouterForum.main_detail + e.id);
}}
>
<Stack spacing={"xs"}>
<Text fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: e.diskusi }} />
</Text>
</Stack>
</Card.Section>
<Card.Section>
<Stack>
<Group spacing={"xs"} px={"sm"}>
<ActionIcon
// loading={loadingKomen ? true : false}
variant="transparent"
sx={{ zIndex: 1 }}
onClick={() => {
setLoadingKomen(true);
router.push(RouterForum.komentar + e.id);
}}
>
<IconMessageCircle color="gray" size={25} />
</ActionIcon>
{/* <TotalKomentar postingId={e?.id} /> */}
<Text c={"gray"}>{e?._count}</Text>
</Group>
<Divider />
</Stack>
</Card.Section>
</Card>
))}
</Stack>
</>
);
}
function TotalKomentar({ postingId }: { postingId: string }) {
const [value, setValue] = useState(0)
useShallowEffect(() => {
forum_countOneTotalKomentarById(postingId).then((res) => {
setValue(res);
});
}, [postingId]);
return (
<>
<Text c={"gray"}>{value}</Text>
</>
);
}

203
src/app_modules/forum/component/more_button/detail_more_button.tsx Normal file
View File

@@ -0,0 +1,203 @@
"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, useShallowEffect } 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";
import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
export default function ComponentForum_DetailMoreButton({
authorId,
postingId,
}: {
authorId: any;
postingId?: any;
}) {
const router = useRouter();
const [opened, { open, close }] = useDisclosure(false);
const [openDel, setOpenDel] = useState(false);
const [userLoginId, setUserLoginId] = useState("");
// loading
const [loadingEdit, setLoadingEdit] = useState(false);
const [loadingReport, setLoadingReport] = useState(false);
// if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
useShallowEffect(() => {
getUserLoginId();
}, []);
async function getUserLoginId() {
const getUserLoginId = await User_getUserId();
setUserLoginId(getUserLoginId);
}
return (
<>
<Drawer
// className={classes.radiusCustom}
opened={opened}
onClose={close}
withCloseButton={false}
overlayProps={{ opacity: 0.1, blur: 1 }}
position="bottom"
size={"auto"}
>
<Stack>
{userLoginId != authorId ? (
""
) : (
<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);
router.push(RouterForum.edit_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconEdit color={loadingEdit ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
{loadingEdit ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
</Stack>
)}
{userLoginId == authorId ? (
""
) : (
<Grid
onClick={() => {
setLoadingReport(true);
router.push(RouterForum.report_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconFlag3 color={loadingReport ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingReport ? "gray" : "black"}>
Laporkan posting
</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}
>
<ButtonDelete postingId={postingId} setOpenDel={setOpenDel} />
</Modal>
<ActionIcon variant="transparent" onClick={() => open()}>
<IconDots size={20} />
</ActionIcon>
</>
);
}
function ButtonDelete({
postingId,
setOpenDel,
}: {
postingId?: string;
setOpenDel: any;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
if (loading) return <ComponentGlobal_V2_LoadingPage />;
async function onDelete() {
setOpenDel(false);
await forum_funDeletePostingById(postingId as any).then((res) => {
if (res.status === 200) {
ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
setLoading(true);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}
return (
<>
<Stack>
<Title order={6}>Yakin menghapus posting ini ?</Title>
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenDel(false)}>
Batal
</Button>
<Button
loaderPosition="center"
loading={loading ? true : false}
color="red"
radius={"xl"}
onClick={() => {
onDelete();
}}
>
Hapus
</Button>
</Group>
</Stack>
</>
);
}

229
src/app_modules/forum/component/more_button/komentar_button_more.tsx Normal file
View File

@@ -0,0 +1,229 @@
"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, useShallowEffect } 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";
import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { forum_funDeleteKomentarById } from "../../fun/delete/fun_delete_komentar_by_id";
import { forum_getKomentarById } from "../../fun/get/get_komentar_by_id";
export default function ComponentForum_KomentarButtonMore({
userId,
komentarId,
setKomentar,
postingId,
}: {
userId: any;
komentarId: any;
setKomentar?: any;
postingId?: string;
}) {
const router = useRouter();
const [opened, { open, close }] = useDisclosure(false);
const [openDel, setOpenDel] = useState(false);
const [userLoginId, setUserLoginId] = useState("");
// loading
const [loadingEdit, setLoadingEdit] = useState(false);
const [loadingReport, setLoadingReport] = useState(false);
// if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
useShallowEffect(() => {
getUserLoginId();
}, []);
async function getUserLoginId() {
const getUserLoginId = await User_getUserId();
setUserLoginId(getUserLoginId);
}
return (
<>
<Drawer
// className={classes.radiusCustom}
opened={opened}
onClose={close}
withCloseButton={false}
overlayProps={{ opacity: 0.1, blur: 1 }}
position="bottom"
size={"auto"}
>
<Stack>
{userLoginId != userId ? (
""
) : (
<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);
router.push(RouterForum.edit_komentar + komentarId);
}}
>
<Grid.Col span={"content"}>
<IconEdit color={loadingEdit ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingEdit ? "gray" : "black"}>
Edit komentar
</Text>{" "}
{loadingEdit ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid> */}
</Stack>
)}
{userLoginId == userId ? (
""
) : (
<Grid
onClick={() => {
setLoadingReport(true);
router.push(RouterForum.report_komentar + komentarId);
}}
>
<Grid.Col span={"content"}>
<IconFlag3 color={loadingReport ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingReport ? "gray" : "black"}>
Laporkan komentar
</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}
>
<ButtonDelete
komentarId={komentarId}
setOpenDel={setOpenDel}
setKomentar={setKomentar}
postingId={postingId}
/>
</Modal>
<ActionIcon variant="transparent" onClick={() => open()}>
<IconDots size={20} />
</ActionIcon>
</>
);
}
function ButtonDelete({
komentarId,
setOpenDel,
setKomentar,
postingId,
}: {
komentarId?: string;
setOpenDel: any;
setKomentar?: any;
postingId?: string;
}) {
const [loading, setLoading] = useState(false);
if (loading) return <ComponentGlobal_V2_LoadingPage />;
async function onDelete() {
await forum_funDeleteKomentarById(komentarId as any).then(async (res) => {
if (res.status === 200) {
await forum_getKomentarById(postingId as any).then((val) => {
setKomentar(val);
setOpenDel(false);
setLoading(true);
ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
});
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
// await forum_funDeletePostingById(komentarId as any).then((res) => {
// if (res.status === 200) {
// ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
// } else {
// ComponentGlobal_NotifikasiGagal(res.message);
// }
// });
}
return (
<>
<Stack>
<Title order={6}>Yakin menghapus komentar ini ?</Title>
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenDel(false)}>
Batal
</Button>
<Button
loaderPosition="center"
loading={loading ? true : false}
color="red"
radius={"xl"}
onClick={() => {
onDelete();
}}
>
Hapus
</Button>
</Group>
</Stack>
</>
);
}

199
src/app_modules/forum/component/more_button/posting_button_more.tsx Normal file
View File

@@ -0,0 +1,199 @@
"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, useShallowEffect } 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";
import { User_getUserId } from "@/app_modules/fun_global/get_user_token";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
export default function ComponentForum_PostingButtonMore({
authorId,
postingId,
}: {
authorId: any;
postingId?: any;
}) {
const router = useRouter();
const [opened, { open, close }] = useDisclosure(false);
const [openDel, setOpenDel] = useState(false);
const [userLoginId, setUserLoginId] = useState("");
// loading
const [loadingEdit, setLoadingEdit] = useState(false);
const [loadingReport, setLoadingReport] = useState(false);
// if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
useShallowEffect(() => {
getUserLoginId();
}, []);
async function getUserLoginId() {
const getUserLoginId = await User_getUserId();
setUserLoginId(getUserLoginId);
}
return (
<>
<Drawer
// className={classes.radiusCustom}
opened={opened}
onClose={close}
withCloseButton={false}
overlayProps={{ opacity: 0.1, blur: 1 }}
position="bottom"
size={"auto"}
>
<Stack>
{userLoginId != authorId ? (
""
) : (
<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);
router.push(RouterForum.edit_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconEdit color={loadingEdit ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
{loadingEdit ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
</Stack>
)}
{userLoginId == authorId ? (
""
) : (
<Grid
onClick={() => {
setLoadingReport(true);
router.push(RouterForum.report_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconFlag3 color={loadingReport ? "gray" : "black"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingReport ? "gray" : "black"}>
Laporkan posting
</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}
>
<ButtonDelete postingId={postingId} setOpenDel={setOpenDel} />
</Modal>
<ActionIcon variant="transparent" onClick={() => open()}>
<IconDots size={20} />
</ActionIcon>
</>
);
}
function ButtonDelete({
postingId,
setOpenDel,
}: {
postingId?: string;
setOpenDel: any;
}) {
const [loading, setLoading] = useState(false);
async function onDelete() {
setOpenDel(false);
await forum_funDeletePostingById(postingId as any).then((res) => {
if (res.status === 200) {
ComponentGlobal_NotifikasiBerhasil(`Postingan Terhapus`, 2000);
setLoading(true)
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}
return (
<>
<Stack>
<Title order={6}>Yakin menghapus posting ini ?</Title>
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenDel(false)}>
Batal
</Button>
<Button
loaderPosition="center"
loading={loading ? true : false}
color="red"
radius={"xl"}
onClick={() => {
onDelete();
}}
>
Hapus
</Button>
</Group>
</Stack>
</>
);
}