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

UI Forum untuk user

Browse Source 
- UI selesai
- Realtime dan notifikasi selesai
## No Issuee
This commit is contained in:
Bagasbanuna02
2024-07-02 17:38:13 +08:00
parent 11b5e8f722
commit bca5a2ac15
43 changed files with 719 additions and 638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app_modules/forum/component/detail_component/detail_create_komentar.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client";
import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
@@ -17,7 +17,8 @@ import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar";
import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import { useRouter } from "next/navigation";
import { MainColor } from "@/app_modules/component_global/color/color_pallet";
import mqtt_client from "@/util/mqtt_client";
export default function ComponentForum_DetailCreateKomentar({
postingId,
onSetKomentar,
@@ -41,8 +42,13 @@ export default function ComponentForum_DetailCreateKomentar({
const createComment = await forum_funCreateKomentar(postingId, value);
if (createComment.status === 201) {
const loadKomentar = await forum_funGetAllKomentarById(data.id);
onSetKomentar(loadKomentar);
// const loadKomentar = await forum_funGetAllKomentarById(data.id);
const loadData = await forum_funGetAllKomentarById({
postingId: data.id,
page: 1,
});
onSetKomentar(loadData);
setValue("");
setIsEmpty(true);
@@ -104,6 +110,8 @@ export default function ComponentForum_DetailCreateKomentar({
? true
: false
}
bg={MainColor.yellow}
color={"yellow"}
loaderPosition="center"
loading={loading ? true : false}
radius={"xl"}
@@ -112,8 +120,7 @@ export default function ComponentForum_DetailCreateKomentar({
Balas
</Button>
</Group>
<Divider />
</Stack>
</>
);
}
}

131
src/app_modules/forum/component/detail_component/detail_header.tsx
View File

@@ -44,6 +44,7 @@ import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_
import { forum_funEditStatusPostingById } from "../../fun/edit/fun_edit_status_posting_by_id";
import { forum_getOnePostingById } from "../../fun/get/get_one_posting_by_id";
import mqtt_client from "@/util/mqtt_client";
import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_DetailHeader({
data,
@@ -85,13 +86,13 @@ export default function ComponentForum_DetailHeader({
</Grid.Col>
<Grid.Col span={"auto"}>
<Stack spacing={0}>
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
<Stack spacing={3}>
<Text lineClamp={1} fz={"sm"} fw={"bold"} color="white">
{data?.Author.username ? data?.Author.username : "Nama author "}
</Text>
<Badge
w={70}
variant="light"
variant="outline"
color={
(data?.ForumMaster_StatusPosting.id as any) === 1
? "green"
@@ -153,6 +154,12 @@ function ComponentForum_DetailButtonMore_V2({
<>
<Drawer
// className={classes.radiusCustom}
styles={{
content: {
backgroundColor: MainColor.darkblue,
borderTop: `1px solid ${AccentColor.blue}`,
},
}}
opened={opened}
onClose={close}
withCloseButton={false}
@@ -162,9 +169,43 @@ function ComponentForum_DetailButtonMore_V2({
>
<Stack>
{userLoginId != authorId ? (
""
<Grid
onClick={() => {
setLoadingReport(true);
router.push(RouterForum.report_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconFlag3 color={loadingReport ? "gray" : "white"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingReport ? "gray" : "white"}>
Laporkan posting
</Text>{" "}
{loadingReport ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
) : (
<Stack>
<Grid
onClick={() => {
setLoadingEdit(true);
router.push(RouterForum.edit_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconEdit color={loadingEdit ? "gray" : "white"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingEdit ? "gray" : "white"}>Edit posting</Text>{" "}
{loadingEdit ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
<Grid
onClick={() => {
close();
@@ -173,16 +214,16 @@ function ComponentForum_DetailButtonMore_V2({
>
<Grid.Col span={"content"}>
{statusId === 1 ? (
<IconSquareRoundedX color="red" />
<IconSquareRoundedX color="orange" />
) : (
<IconSquareCheck />
<IconSquareCheck color="white" />
)}
</Grid.Col>
<Grid.Col span={"auto"}>
{statusId === 1 ? (
<Text c={"red"}>Tutup forum</Text>
<Text c={"orange"}>Tutup forum</Text>
) : (
<Text>Buka forum</Text>
<Text c={"white"}>Buka forum</Text>
)}
</Grid.Col>
</Grid>
@@ -200,56 +241,30 @@ function ComponentForum_DetailButtonMore_V2({
<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}>
<Button
bg={MainColor.yellow}
color={"yellow"}
style={{
border: `1px solid ${AccentColor.yellow}`,
}}
radius={"xl"}
onClick={close}
>
Batal
</Button>
</Stack>
</Drawer>
<Modal
styles={{
content: {
backgroundColor: MainColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
},
}}
opened={openDel}
onClose={() => {
setOpenDel(false);
@@ -261,6 +276,12 @@ function ComponentForum_DetailButtonMore_V2({
</Modal>
<Modal
styles={{
content: {
backgroundColor: MainColor.darkblue,
border: `1px solid ${AccentColor.blue}`,
},
}}
opened={openStatusClose}
onClose={() => setOpenStatusClose(false)}
centered
@@ -276,7 +297,7 @@ function ComponentForum_DetailButtonMore_V2({
/>
</Modal>
<ActionIcon variant="transparent" onClick={() => open()}>
<ActionIcon c="white" variant="transparent" onClick={() => open()}>
<IconDots size={20} />
</ActionIcon>
</>
@@ -317,7 +338,7 @@ function ButtonDelete({
return (
<>
<Stack>
<Title order={6}>Yakin menghapus posting ini ?</Title>
<Title order={6} color="white">Yakin menghapus posting ini ?</Title>
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenDel(false)}>
Batal
@@ -425,9 +446,13 @@ function ButtonStatus({
<>
<Stack>
{statusId === 1 ? (
<Title order={6}>Yakin menutup forum ini ?</Title>
<Title color="white" order={6}>
Yakin menutup forum ini ?
</Title>
) : (
<Title order={6}>Yakin membuka forum ini ?</Title>
<Title color="white" order={6}>
Yakin membuka forum ini ?
</Title>
)}
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenStatus(false)}>

112
src/app_modules/forum/component/detail_component/detail_list_komentar.tsx
View File

@@ -1,82 +1,92 @@
"use client"
"use client";
import { Stack, Center, Box, Card, Spoiler, Divider, Text } from "@mantine/core";
import {
Stack,
Center,
Box,
Card,
Spoiler,
Divider,
Text,
} from "@mantine/core";
import _ from "lodash";
import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
import { MainColor } from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_ListKomentarView({
listKomentar,
export default function ComponentForum_KomentarView({
data,
setKomentar,
postingId,
userLoginId,
}: {
listKomentar: MODEL_FORUM_KOMENTAR[];
data: MODEL_FORUM_KOMENTAR;
setKomentar: any;
postingId: string;
userLoginId: string;
}) {
return (
<>
<Stack>
{_.isEmpty(listKomentar) ? (
<Card mb={"xs"} bg={"transparent"}>
<Card.Section>
<ComponentForum_KomentarAuthorNameOnHeader
authorName={data?.Author?.username}
imagesId={data?.Author?.Profile?.imagesId}
tglPublish={data?.createdAt}
userId={data?.Author?.id}
komentarId={data?.id}
isMoreButton={true}
setKomentar={setKomentar}
postingId={postingId}
userLoginId={userLoginId}
/>
</Card.Section>
<Card.Section sx={{ zIndex: 0 }} p={"sm"}>
<Stack spacing={"xs"}>
<Text fz={"sm"} lineClamp={4} c={"white"}>
{data.komentar ? (
<Spoiler
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
>
<div dangerouslySetInnerHTML={{ __html: data.komentar }} />
</Spoiler>
) : (
""
)}
</Text>
</Stack>
</Card.Section>
<Card.Section>
<Stack>
<Divider />
</Stack>
</Card.Section>
</Card>
{/* <Stack>
{_.isEmpty(data) ? (
<Center>
<Text fw={"bold"} fz={"xs"} c={"gray"}>
<Text fw={"bold"} fz={"xs"} c={"white"}>
Belum ada komentar
</Text>
</Center>
) : (
<Box>
<Center>
<Text fz={"xs"} c={"gray"}>
<Text fw={"bold"} fz={"xs"} c={"white"}>
{" "}
Komentar
</Text>
</Center>
{listKomentar.map((e, i) => (
<Card key={i} mt={"xs"}>
<Card.Section>
<ComponentForum_KomentarAuthorNameOnHeader
authorName={e?.Author?.Profile?.name}
imagesId={e?.Author?.Profile?.imagesId}
tglPublish={e?.createdAt}
userId={e?.Author?.id}
komentarId={e?.id}
isMoreButton={true}
setKomentar={setKomentar}
postingId={postingId}
userLoginId={userLoginId}
/>
</Card.Section>
<Card.Section sx={{ zIndex: 0 }} p={"sm"}>
<Stack spacing={"xs"}>
<Text fz={"sm"} lineClamp={4}>
{e.komentar ? (
<Spoiler
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
>
<div
dangerouslySetInnerHTML={{ __html: e.komentar }}
/>
</Spoiler>
) : (
""
)}
</Text>
</Stack>
</Card.Section>
<Card.Section>
<Stack>
<Divider />
</Stack>
</Card.Section>
</Card>
{data.map((e, i) => (
))}
</Box>
)}
</Stack>
</Stack> */}
</>
);
}
}

36
src/app_modules/forum/component/detail_component/detail_view.tsx
View File

@@ -4,6 +4,10 @@ import { Card, Stack, Group, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_DetailHeader from "./detail_header";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_DetailForumView({
data,
@@ -18,7 +22,15 @@ export default function ComponentForum_DetailForumView({
}) {
return (
<>
<Card style={{ position: "relative", width: "100%" }}>
<Card
mb={"md"}
p={"xl"}
bg={MainColor.darkblue}
style={{
border: `2px solid ${AccentColor.blue}`,
}}
radius={"md"}
>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
{/* HEADER */}
@@ -33,9 +45,9 @@ export default function ComponentForum_DetailForumView({
</Card.Section>
{/* CONTENT */}
<Card.Section sx={{ zIndex: 0 }} py={"sm"}>
<Card.Section sx={{ zIndex: 0 }} p={"lg"}>
<Stack spacing={"xs"}>
<Text fz={"sm"}>
<Text fz={"sm"} color="white">
{data?.diskusi ? (
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
) : (
@@ -49,20 +61,28 @@ export default function ComponentForum_DetailForumView({
<Card.Section>
<Stack>
<Group position="apart">
<Group spacing={"xs"}>
<Group spacing={"xs"} px={"sm"}>
{(data?.ForumMaster_StatusPosting?.id as any) === 1 ? (
<IconMessageCircle color="gray" size={25} />
<IconMessageCircle color="white" size={25} />
) : (
<IconMessageCircleX color="gray" size={25} />
)}
<Text c={"gray"}>{totalKomentar}</Text>
<Text
c={
(data?.ForumMaster_StatusPosting?.id as any) === 1
? "white"
: "gray"
}
>
{totalKomentar}
</Text>
</Group>
<Group>
<Text c={"gray"} fz={"sm"}>
<Text c={"white"} fz={"sm"}>
{new Date(data?.createdAt).toLocaleTimeString()}
{/* {new Intl.RelativeTimeFormat("id", {style: "short"}).format(-1,"day")} */}
</Text>
<Text c={"gray"} fz={"sm"}>
<Text c={"white"} fz={"sm"}>
{data?.createdAt
? new Date(data?.createdAt).toLocaleDateString(["id-ID"], {
dateStyle: "medium",

134
src/app_modules/forum/component/forumku_component/forumku_more_button.tsx
View File

@@ -32,6 +32,10 @@ import _ from "lodash";
import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_by_id";
import { forum_funEditStatusPostingById } from "../../fun/edit/fun_edit_status_posting_by_id";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_ForumkuMoreButton({
authorId,
@@ -59,12 +63,15 @@ export default function ComponentForum_ForumkuMoreButton({
const [loadingEdit, setLoadingEdit] = useState(false);
const [loadingReport, setLoadingReport] = useState(false);
// if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
return (
<>
<Drawer
// className={classes.radiusCustom}
styles={{
content: {
backgroundColor: MainColor.darkblue,
borderTop: `1px solid ${AccentColor.blue}`,
},
}}
opened={opened}
onClose={close}
withCloseButton={false}
@@ -74,9 +81,43 @@ export default function ComponentForum_ForumkuMoreButton({
>
<Stack>
{userLoginId != authorId ? (
""
<Grid
onClick={() => {
setLoadingReport(true);
router.push(RouterForum.report_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconFlag3 color={loadingReport ? "gray" : "white"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingReport ? "gray" : "white"}>
Laporkan posting
</Text>{" "}
{loadingReport ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
) : (
<Stack>
<Grid
onClick={() => {
setLoadingEdit(true);
router.push(RouterForum.edit_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconEdit color={loadingEdit ? "gray" : "white"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingEdit ? "gray" : "white"}>Edit posting</Text>{" "}
{loadingEdit ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
<Grid
onClick={() => {
close();
@@ -85,16 +126,16 @@ export default function ComponentForum_ForumkuMoreButton({
>
<Grid.Col span={"content"}>
{statusId === 1 ? (
<IconSquareRoundedX color="red" />
<IconSquareRoundedX color="orange" />
) : (
<IconSquareCheck />
<IconSquareCheck color="white" />
)}
</Grid.Col>
<Grid.Col span={"auto"}>
{statusId === 1 ? (
<Text c={"red"}>Tutup forum</Text>
<Text c={"orange"}>Tutup forum</Text>
) : (
<Text>Buka forum</Text>
<Text c={"white"}>Buka forum</Text>
)}
</Grid.Col>
</Grid>
@@ -112,56 +153,30 @@ export default function ComponentForum_ForumkuMoreButton({
<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}>
<Button
bg={MainColor.yellow}
color={"yellow"}
style={{
border: `1px solid ${AccentColor.yellow}`,
}}
radius={"xl"}
onClick={close}
>
Batal
</Button>
</Stack>
</Drawer>
<Modal
styles={{
content: {
backgroundColor: MainColor.darkblue,
border: `1px solid ${AccentColor.blue}`,
},
}}
opened={openDel}
onClose={() => {
setOpenDel(false);
@@ -177,10 +192,15 @@ export default function ComponentForum_ForumkuMoreButton({
}}
allData={allData}
/>
{/* <pre>{JSON.stringify(allData, null, 2)}</pre> */}
</Modal>
<Modal
styles={{
content: {
backgroundColor: MainColor.darkblue,
border: `1px solid ${AccentColor.blue}`,
},
}}
opened={openStatusClose}
onClose={() => setOpenStatusClose(false)}
centered
@@ -245,7 +265,9 @@ function ButtonDelete({
return (
<>
<Stack>
<Title order={6}>Yakin menghapus posting ini ?</Title>
<Title c={"white"} order={6}>
Yakin menghapus posting ini ?
</Title>
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenDel(false)}>
Batal
@@ -392,8 +414,6 @@ function ButtonStatus({
},
};
console.log(updateDetail.ForumMaster_StatusPosting);
mqtt_client.publish(
"Forum_detail_ganti_status",
JSON.stringify({
@@ -410,9 +430,13 @@ function ButtonStatus({
<>
<Stack>
{statusId === 1 ? (
<Title order={6}>Yakin menutup forum ini ?</Title>
<Title c={"white"} order={6}>
Yakin menutup forum ini ?
</Title>
) : (
<Title order={6}>Yakin membuka forum ini ?</Title>
<Title c={"white"} order={6}>
Yakin membuka forum ini ?
</Title>
)}
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenStatus(false)}>

1
src/app_modules/forum/component/forumku_component/forumku_view.tsx
View File

@@ -29,7 +29,6 @@ export default function ComponentForum_ForumkuMainCardView({
return (
<>
{/* <pre>{JSON.stringify(data, null,2)}</pre> */}
<Card
mb={"md"}
p={"xl"}

18
src/app_modules/forum/component/komentar_component/komentar_author_header_name.tsx
View File

@@ -42,7 +42,7 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
isMoreButton?: boolean;
setKomentar?: any;
postingId?: string;
userLoginId: string
userLoginId: string;
}) {
const router = useRouter();
@@ -76,25 +76,17 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
<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 color="white" 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={"content"}></Grid.Col>
</Grid>
</Stack>
</Grid.Col>
<Grid.Col span={"content"}>
<Group position="center" spacing={"xs"}>
<Group spacing={3}>
<Text c={"gray"} fz={"sm"}>
<Text c={"white"} fz={"sm"}>
{tglPublish
? tglPublish.toLocaleDateString(["id-ID"], {
day: "numeric",
@@ -107,7 +99,7 @@ export default function ComponentForum_KomentarAuthorNameOnHeader({
<IconCircle
size={5}
color="gray"
color="white"
style={{ marginLeft: "5px" }}
/>
</Text>

82
src/app_modules/forum/component/komentar_component/komentar_button_more.tsx
View File

@@ -31,6 +31,10 @@ import { forum_funDeletePostingById } from "../../fun/delete/fun_delete_posting_
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_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_KomentarButtonMore({
userId,
@@ -43,7 +47,7 @@ export default function ComponentForum_KomentarButtonMore({
komentarId: any;
setKomentar?: any;
postingId?: string;
userLoginId: string
userLoginId: string;
}) {
const router = useRouter();
const [opened, { open, close }] = useDisclosure(false);
@@ -53,14 +57,19 @@ export default function ComponentForum_KomentarButtonMore({
const [loadingEdit, setLoadingEdit] = useState(false);
const [loadingReport, setLoadingReport] = useState(false);
// if (loadingEdit) return <ComponentGlobal_V2_LoadingPage />;
return (
<>
<Drawer
// className={classes.radiusCustom}
styles={{
content: {
backgroundColor: MainColor.darkblue,
borderTop: `1px solid ${AccentColor.blue}`,
borderRadius: "10px 10px 0px 0px",
},
header: {
borderRadius: "10px 10px 0px 0px",
},
}}
opened={opened}
onClose={close}
withCloseButton={false}
@@ -69,9 +78,7 @@ export default function ComponentForum_KomentarButtonMore({
size={"auto"}
>
<Stack>
{userLoginId != userId ? (
""
) : (
{userLoginId == userId ? (
<Stack>
<Grid
onClick={() => {
@@ -86,30 +93,7 @@ export default function ComponentForum_KomentarButtonMore({
<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={() => {
@@ -118,11 +102,11 @@ export default function ComponentForum_KomentarButtonMore({
}}
>
<Grid.Col span={"content"}>
<IconFlag3 color={loadingReport ? "gray" : "black"} />
<IconFlag3 color={loadingReport ? "gray" : "white"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingReport ? "gray" : "black"}>
<Text c={loadingReport ? "gray" : "white"}>
Laporkan komentar
</Text>{" "}
{loadingReport ? <Loader size={"sm"} /> : ""}
@@ -131,13 +115,27 @@ export default function ComponentForum_KomentarButtonMore({
</Grid>
)}
<Button variant="outline" radius={"xl"} onClick={close}>
<Button
bg={MainColor.yellow}
color={"yellow"}
style={{
border: `1px solid ${AccentColor.yellow}`,
}}
radius={"xl"}
onClick={close}
>
Batal
</Button>
</Stack>
</Drawer>
<Modal
styles={{
content: {
backgroundColor: MainColor.darkblue,
border: `1px solid ${AccentColor.blue}`,
},
}}
opened={openDel}
onClose={() => {
setOpenDel(false);
@@ -153,7 +151,7 @@ export default function ComponentForum_KomentarButtonMore({
/>
</Modal>
<ActionIcon variant="transparent" onClick={() => open()}>
<ActionIcon c={"white"} variant="transparent" onClick={() => open()}>
<IconDots size={20} />
</ActionIcon>
</>
@@ -188,19 +186,11 @@ function ButtonDelete({
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>
<Title order={6} c="white">Yakin menghapus komentar ini ?</Title>
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenDel(false)}>
Batal
@@ -208,7 +198,7 @@ function ButtonDelete({
<Button
loaderPosition="center"
loading={loading ? true : false}
color="orange"
color="red"
radius={"xl"}
onClick={() => {
onDelete();

106
src/app_modules/forum/component/main_component/card_more_button.tsx
View File

@@ -67,12 +67,12 @@ export default function ComponentForum_BerandaMoreButton({
return (
<>
<Drawer
// styles={{
// content: {
// backgroundColor: MainColor.darkblue,
// borderTop: `1px solid ${AccentColor.blue}`,
// },
// }}
styles={{
content: {
backgroundColor: MainColor.darkblue,
borderTop: `1px solid ${AccentColor.blue}`,
},
}}
opened={opened}
onClose={close}
withCloseButton={false}
@@ -82,7 +82,24 @@ export default function ComponentForum_BerandaMoreButton({
>
<Stack>
{userLoginId != authorId ? (
""
<Grid
onClick={() => {
setLoadingReport(true);
router.push(RouterForum.report_posting + postingId);
}}
>
<Grid.Col span={"content"}>
<IconFlag3 color={loadingReport ? "gray" : "white"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingReport ? "gray" : "white"}>
Laporkan posting
</Text>{" "}
{loadingReport ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
</Grid>
) : (
<Stack>
<Grid
@@ -92,11 +109,11 @@ export default function ComponentForum_BerandaMoreButton({
}}
>
<Grid.Col span={"content"}>
<IconEdit color={loadingEdit ? "gray" : "black"} />
<IconEdit color={loadingEdit ? "gray" : "white"} />
</Grid.Col>
<Grid.Col span={"auto"}>
<Group>
<Text c={loadingEdit ? "gray" : "black"}>Edit posting</Text>{" "}
<Text c={loadingEdit ? "gray" : "white"}>Edit posting</Text>{" "}
{loadingEdit ? <Loader size={"sm"} /> : ""}
</Group>
</Grid.Col>
@@ -109,16 +126,16 @@ export default function ComponentForum_BerandaMoreButton({
>
<Grid.Col span={"content"}>
{statusId === 1 ? (
<IconSquareRoundedX color="red" />
<IconSquareRoundedX color="orange" />
) : (
<IconSquareCheck />
<IconSquareCheck color="white" />
)}
</Grid.Col>
<Grid.Col span={"auto"}>
{statusId === 1 ? (
<Text c={"red"}>Tutup forum</Text>
<Text c={"orange"}>Tutup forum</Text>
) : (
<Text>Buka forum</Text>
<Text c={"white"}>Buka forum</Text>
)}
</Grid.Col>
</Grid>
@@ -139,36 +156,27 @@ export default function ComponentForum_BerandaMoreButton({
</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
bg={MainColor.yellow}
color={"yellow"}
style={{
border: `1px solid ${AccentColor.yellow}`,
}}
radius={"xl"}
onClick={close}
>
<Text c={"white"}>Batal</Text>
</Button>
</Stack>
</Drawer>
<Modal
styles={{
content: {
backgroundColor: MainColor.darkblue,
border: `1px solid ${AccentColor.blue}`,
},
}}
opened={openDel}
onClose={() => {
setOpenDel(false);
@@ -188,6 +196,12 @@ export default function ComponentForum_BerandaMoreButton({
</Modal>
<Modal
styles={{
content: {
backgroundColor: MainColor.darkblue,
border: `1px solid ${AccentColor.blue}`,
},
}}
opened={openStatusClose}
onClose={() => setOpenStatusClose(false)}
centered
@@ -252,7 +266,9 @@ function ButtonDelete({
return (
<>
<Stack>
<Title order={6}>Yakin menghapus posting ini ?</Title>
<Title order={6} color="white">
Yakin menghapus posting ini ?
</Title>
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenDel(false)}>
Batal
@@ -340,8 +356,6 @@ function ButtonStatus({
},
};
console.log(updateDetail);
mqtt_client.publish(
"Forum_detail_ganti_status",
JSON.stringify({
@@ -401,8 +415,6 @@ function ButtonStatus({
},
};
console.log(updateDetail.ForumMaster_StatusPosting);
mqtt_client.publish(
"Forum_detail_ganti_status",
JSON.stringify({
@@ -419,9 +431,13 @@ function ButtonStatus({
<>
<Stack>
{statusId === 1 ? (
<Title order={6}>Yakin menutup forum ini ?</Title>
<Title color={"white"} order={6}>
Yakin menutup forum ini ?
</Title>
) : (
<Title order={6}>Yakin membuka forum ini ?</Title>
<Title color={"white"} order={6}>
Yakin membuka forum ini ?
</Title>
)}
<Group position="center">
<Button radius={"xl"} onClick={() => setOpenStatus(false)}>

11
src/app_modules/forum/component/main_component/card_view.tsx
View File

@@ -1,16 +1,16 @@
"use client";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import { ActionIcon, Card, Divider, Group, Stack, Text } from "@mantine/core";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
import { ActionIcon, Card, Group, Stack, Text } from "@mantine/core";
import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_BerandaHeaderCard from "./card_header";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
export default function ComponentForum_BerandaCardView({
data,
@@ -31,7 +31,6 @@ export default function ComponentForum_BerandaCardView({
return (
<>
{/* <pre>{JSON.stringify(data, null,2)}</pre> */}
<Card
mb={"md"}
p={"xl"}