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

fix layout forum

Browse Source
This commit is contained in:
Bagasbanuna02
2025-03-14 15:39:26 +08:00
parent cd294581f5
commit da6a9b0892
10 changed files with 149 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/dev/forum/main/layout.tsx
View File

@@ -9,7 +9,6 @@ export default async function Layout({
}) { }) {
const userLoginId = await funGetUserIdByToken(); const userLoginId = await funGetUserIdByToken();
return ( return (
<> <>
<LayoutForum_Main userLoginId={userLoginId}>{children}</LayoutForum_Main> <LayoutForum_Main userLoginId={userLoginId}>{children}</LayoutForum_Main>

2
src/app_modules/_global/ui/V2_layout_tamplate.tsx
View File

@@ -134,7 +134,7 @@ export function UI_NewChildren({ children }: { children: ReactNode }) {
const { classes } = useStyles(); const { classes } = useStyles();
return ( return (
<Box className={classes.content}> <Box className={classes.content}>
<Container size="xl" pt={"md"}> <Container size="xs" py={"xs"}>
{children} {children}
</Container> </Container>
</Box> </Box>

18
src/app_modules/forum/detail/layout.tsx
View File

@@ -1,8 +1,11 @@
"use client"; "use client";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2"; import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"; import UI_NewLayoutTamplate, {
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"; UI_NewChildren,
UI_NewHeader,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import React, { useState } from "react"; import React, { useState } from "react";
@@ -19,13 +22,20 @@ export default function LayoutForum_Detail({
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate title="Postingan" posotion={"left"} /> <UIGlobal_LayoutHeaderTamplate title="Postingan" posotion={"left"} />
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Postingan" posotion={"left"} />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

2
src/app_modules/forum/detail/main_detail.tsx
View File

@@ -165,7 +165,7 @@ export default function Forum_MainDetail({
) : ( ) : (
<Box> <Box>
<ScrollOnly <ScrollOnly
height={"60vh"} height={"70vh"}
renderLoading={() => ( renderLoading={() => (
<Center mt={"lg"}> <Center mt={"lg"}>
<Loader color={"yellow"} /> <Loader color={"yellow"} />

8
src/app_modules/forum/forumku/index.tsx
View File

@@ -5,11 +5,7 @@ import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
import { MODEL_USER } from "@/app_modules/home/model/interface"; import { MODEL_USER } from "@/app_modules/home/model/interface";
import { RouterForum } from "@/lib/router_hipmi/router_forum"; import { RouterForum } from "@/lib/router_hipmi/router_forum";
import { clientLogger } from "@/util/clientLogger"; import { clientLogger } from "@/util/clientLogger";
import { import { Center, Loader, Stack } from "@mantine/core";
Center,
Loader,
Stack
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash"; import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader"; import { ScrollOnly } from "next-scroll-loader";
@@ -123,7 +119,7 @@ export default function Forum_Forumku({
) : ( ) : (
// --- Main component --- // // --- Main component --- //
<ScrollOnly <ScrollOnly
height={dataPosting.length < 5 ? "75vh" : "100vh"} height={"75vh"}
renderLoading={() => ( renderLoading={() => (
<Center mt={"lg"}> <Center mt={"lg"}>
<Loader color={"yellow"} /> <Loader color={"yellow"} />

18
src/app_modules/forum/forumku/layout.tsx
View File

@@ -1,7 +1,12 @@
"use client"; "use client";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"; import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"; import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UI_NewLayoutTamplate, {
UI_NewHeader,
UI_NewChildren,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import { IconX } from "@tabler/icons-react"; import { IconX } from "@tabler/icons-react";
import React from "react"; import React from "react";
@@ -12,13 +17,20 @@ export default function LayoutForum_Forumku({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate title={"Forum"} iconLeft={<IconX />} /> <UIGlobal_LayoutHeaderTamplate title="Forumku" iconLeft={<IconX />} />
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title={"Forum"} iconLeft={<IconX />} />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }

18
src/app_modules/forum/main/beranda.tsx
View File

@@ -3,7 +3,15 @@
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create"; import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import { RouterForum } from "@/lib/router_hipmi/router_forum"; import { RouterForum } from "@/lib/router_hipmi/router_forum";
import { clientLogger } from "@/util/clientLogger"; import { clientLogger } from "@/util/clientLogger";
import { Affix, Center, Loader, Stack, TextInput, rem } from "@mantine/core"; import {
Affix,
Box,
Center,
Loader,
Stack,
TextInput,
rem,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash"; import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader"; import { ScrollOnly } from "next-scroll-loader";
@@ -15,6 +23,7 @@ import { Forum_ComponentIsDataEmpty } from "../component/other_component";
import { Forum_SkeletonCard } from "../component/skeleton_view"; import { Forum_SkeletonCard } from "../component/skeleton_view";
import { MODEL_FORUM_POSTING } from "../model/interface"; import { MODEL_FORUM_POSTING } from "../model/interface";
import mqtt_client from "@/util/mqtt_client"; import mqtt_client from "@/util/mqtt_client";
import { AccentColor } from "@/app_modules/_global/color";
export default function Forum_Beranda({ export default function Forum_Beranda({
userLoginId, userLoginId,
@@ -155,7 +164,7 @@ export default function Forum_Beranda({
<ComponentGlobal_CreateButton path={RouterForum.create} /> <ComponentGlobal_CreateButton path={RouterForum.create} />
<Stack spacing={"xl"}> <Stack>
<TextInput <TextInput
disabled={!data} disabled={!data}
radius={"xl"} radius={"xl"}
@@ -171,8 +180,10 @@ export default function Forum_Beranda({
<Forum_ComponentIsDataEmpty /> <Forum_ComponentIsDataEmpty />
) : ( ) : (
// --- Main component --- // // --- Main component --- //
<Box
>
<ScrollOnly <ScrollOnly
height="85vh" height="80vh"
renderLoading={() => ( renderLoading={() => (
<Center mt={"lg"}> <Center mt={"lg"}>
<Loader color={"yellow"} /> <Loader color={"yellow"} />
@@ -193,6 +204,7 @@ export default function Forum_Beranda({
/> />
)} )}
</ScrollOnly> </ScrollOnly>
</Box>
)} )}
</Stack> </Stack>
</> </>

68
src/app_modules/forum/main/layout.tsx
View File

@@ -1,18 +1,21 @@
"use client"; "use client";
import { RouterForum } from "@/lib/router_hipmi/router_forum";
import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component"; import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader"; import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"; import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"; import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
import UI_NewLayoutTamplate, {
UI_NewChildren,
UI_NewHeader,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { MODEL_USER } from "@/app_modules/home/model/interface"; import { MODEL_USER } from "@/app_modules/home/model/interface";
import { ActionIcon, Avatar } from "@mantine/core"; import { RouterForum } from "@/lib/router_hipmi/router_forum";
import { clientLogger } from "@/util/clientLogger";
import { ActionIcon, Avatar, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import React, { useState } from "react"; import React, { useState } from "react";
import { useShallowEffect } from "@mantine/hooks";
import { apiGetUserById } from "@/app_modules/_global/lib/api_user";
import { clientLogger } from "@/util/clientLogger";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
export default function LayoutForum_Main({ export default function LayoutForum_Main({
userLoginId, userLoginId,
@@ -45,13 +48,56 @@ export default function LayoutForum_Main({
return ( return (
<> <>
<UIGlobal_LayoutTamplate <UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header
title="Forum"
iconRight={
!data ? (
<CustomSkeleton height={30} width={30} circle />
) : (
<ActionIcon
radius={"xl"}
variant="transparent"
onClick={() => {
setIsLoading(true);
router.push(RouterForum.forumku + data?.id);
}}
>
{isLoading ? (
<Avatar
size={30}
radius={"100%"}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
}}
>
<ComponentGlobal_Loader variant="dots" />
</Avatar>
) : (
<ComponentGlobal_LoaderAvatar
fileId={data.Profile.imageId as any}
sizeAvatar={30}
/>
)}
</ActionIcon>
)
}
/>
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
{/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate <UIGlobal_LayoutHeaderTamplate
title="Forum" title="Forum"
iconRight={ iconRight={
!data ? ( !data ? (
<CustomSkeleton height={30} width={30} circle/> <CustomSkeleton height={30} width={30} circle />
) : ( ) : (
<ActionIcon <ActionIcon
radius={"xl"} radius={"xl"}
@@ -86,7 +132,7 @@ export default function LayoutForum_Main({
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
</> </>
); );
} }

20
src/app_modules/forum/report/komentar/layout.tsx
View File

@@ -1,7 +1,9 @@
"use client"; "use client";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"; import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"; import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren } from "@/app_modules/_global/ui/V2_layout_tamplate";
import React from "react"; import React from "react";
export default function LayoutForum_ReportKomentar({ export default function LayoutForum_ReportKomentar({
@@ -11,20 +13,20 @@ export default function LayoutForum_ReportKomentar({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate title="Mengumpulkan Informasi Komentar" /> <UIGlobal_LayoutHeaderTamplate title="Mengumpulkan Informasi Komentar" />
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
{/* <AppComponentGlobal_LayoutTamplate
header={ <UI_NewLayoutTamplate>
<ComponentForum_HeaderRataKiri title="Mengumpulkan Informasi Komentar"/> <UI_NewHeader>
} <Component_Header title="Mengumpulkan Informasi Komentar" />
> </UI_NewHeader>
{children} <UI_NewChildren>{children}</UI_NewChildren>
</AppComponentGlobal_LayoutTamplate> */} </UI_NewLayoutTamplate>
</> </>
); );
} }

18
src/app_modules/forum/report/posting/layout.tsx
View File

@@ -1,7 +1,10 @@
"use client"; "use client";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate"; import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate"; import UI_NewLayoutTamplate, {
UI_NewChildren,
UI_NewHeader,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import React from "react"; import React from "react";
export default function LayoutForum_ReportPosting({ export default function LayoutForum_ReportPosting({
@@ -11,15 +14,20 @@ export default function LayoutForum_ReportPosting({
}) { }) {
return ( return (
<> <>
<UIGlobal_LayoutTamplate {/* <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate title="Informasi Report Posting" /> <UIGlobal_LayoutHeaderTamplate title="Informasi Report Posting" />
} }
> >
{children} {children}
</UIGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Informasi Report Posting" />
</UI_NewHeader>
<UI_NewChildren>{children}</UI_NewChildren>
</UI_NewLayoutTamplate>
</> </>
); );
} }