fix: admin collaboration

deskripsi:
- fix: pengambilan data use server menjadi API
This commit is contained in:
2025-06-11 16:43:38 +08:00
parent 153917a483
commit 039ffc57b1
4 changed files with 273 additions and 223 deletions

View File

@@ -4,136 +4,143 @@ import _ from "lodash";
import { NextResponse } from "next/server"; import { NextResponse } from "next/server";
export async function GET(request: Request) { export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const search = searchParams.get("search");
const page = searchParams.get("page");
const takeData = 1;
const skipData = Number(page) * takeData - takeData;
const { searchParams } = new URL(request.url); try {
const search = searchParams.get("search"); let fixData;
const page = searchParams.get("page");
const takeData = 10
const skipData = Number(page) * takeData - takeData;
try { if (!page) {
let fixData; fixData = await prisma.projectCollaboration_RoomChat.findMany({
orderBy: {
if (!page) { createdAt: "desc",
fixData = await prisma.projectCollaboration_RoomChat.findMany({
orderBy: {
createdAt: "desc",
},
where: {
isActive: true,
},
select: {
id: true,
createdAt: true,
isActive: true,
name: true,
ProjectCollaboration_AnggotaRoomChat: {
select: {
User: {
select: {
id: true,
Profile: true,
},
},
},
},
ProjectCollaboration: {
select: {
id: true,
isActive: true,
title: true,
lokasi: true,
purpose: true,
benefit: true,
createdAt: true,
report: true,
Author: {
select: {
id: true,
Profile: {
select: {
name: true,
},
},
},
},
ProjectCollaborationMaster_Industri: true,
},
},
},
});
} else {
const data = await prisma.projectCollaboration_RoomChat.findMany({
take: takeData,
skip: skipData,
orderBy: {
createdAt: "desc",
},
where: {
isActive: true,
},
select: {
id: true,
createdAt: true,
isActive: true,
name: true,
ProjectCollaboration_AnggotaRoomChat: {
select: {
User: {
select: {
id: true,
Profile: true,
},
},
},
},
ProjectCollaboration: {
select: {
id: true,
isActive: true,
title: true,
lokasi: true,
purpose: true,
benefit: true,
createdAt: true,
report: true,
Author: {
select: {
id: true,
Profile: {
select: {
name: true,
},
},
},
},
ProjectCollaborationMaster_Industri: true,
},
},
},
});
const nCount = await prisma.projectCollaboration_RoomChat.count({
where: {
isActive: true,
},
})
fixData = {
data: data,
nPage: _.ceil(nCount / takeData)
}
}
} catch (error) {
backendLogger.error("Error get data collaboration group >>", error);
return NextResponse.json({
success: false,
message: "Error get data collaboration group",
reason: (error as Error).message
}, },
{ status: 500 } where: {
) isActive: true,
},
select: {
id: true,
createdAt: true,
isActive: true,
name: true,
ProjectCollaboration_AnggotaRoomChat: {
select: {
User: {
select: {
id: true,
Profile: true,
},
},
},
},
ProjectCollaboration: {
select: {
id: true,
isActive: true,
title: true,
lokasi: true,
purpose: true,
benefit: true,
createdAt: true,
report: true,
Author: {
select: {
id: true,
Profile: {
select: {
name: true,
},
},
},
},
ProjectCollaborationMaster_Industri: true,
},
},
},
});
} else {
const data = await prisma.projectCollaboration_RoomChat.findMany({
take: takeData,
skip: skipData,
orderBy: {
createdAt: "desc",
},
where: {
isActive: true,
},
select: {
id: true,
createdAt: true,
isActive: true,
name: true,
ProjectCollaboration_AnggotaRoomChat: {
select: {
User: {
select: {
id: true,
Profile: true,
},
},
},
},
ProjectCollaboration: {
select: {
id: true,
isActive: true,
title: true,
lokasi: true,
purpose: true,
benefit: true,
createdAt: true,
report: true,
Author: {
select: {
id: true,
Profile: {
select: {
name: true,
},
},
},
},
ProjectCollaborationMaster_Industri: true,
},
},
},
});
const nCount = await prisma.projectCollaboration_RoomChat.count({
where: {
isActive: true,
},
});
fixData = {
data: data,
nPage: _.ceil(nCount / takeData),
};
} }
}
return NextResponse.json(
{
success: true,
message: "Success get data collaboration group",
data: fixData,
},
{ status: 200 }
);
} catch (error) {
backendLogger.error("Error get data collaboration group >>", error);
return NextResponse.json(
{
success: false,
message: "Error get data collaboration group",
reason: (error as Error).message,
},
{ status: 500 }
);
}
}

View File

@@ -6,7 +6,7 @@ export default async function Page() {
return ( return (
<> <>
<AdminColab_TableGroup listGroup={listGroup as any} /> <AdminColab_TableGroup />
</> </>
); );
} }

View File

@@ -71,7 +71,7 @@ const apiGetAdminCollaborationRoomById = async ({
search, search,
}: { }: {
page: string; page: string;
search: string; search?: string;
}) => { }) => {
const { token } = await fetch("/api/get-cookie").then((res) => res.json()); const { token } = await fetch("/api/get-cookie").then((res) => res.json());
if (!token) return await token.json().catch(() => null); if (!token) return await token.json().catch(() => null);

View File

@@ -14,8 +14,9 @@ import {
Stack, Stack,
Table, Table,
Text, Text,
Title Title,
} from "@mantine/core"; } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconCircleDot } from "@tabler/icons-react"; import { IconCircleDot } from "@tabler/icons-react";
import { useState } from "react"; import { useState } from "react";
import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component"; import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
@@ -23,28 +24,25 @@ import Admin_DetailButton from "../../_admin_global/_component/button/detail_but
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate"; import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint"; import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/comp_pagination_breakpoint";
import ComponentAdminColab_DetailData from "../component/detail_data"; import ComponentAdminColab_DetailData from "../component/detail_data";
import adminColab_getListAllGroupChat from "../fun/get/get_list_all_group_chat";
import adminColab_getOneRoomChatById from "../fun/get/get_one_room_chat_by_id"; import adminColab_getOneRoomChatById from "../fun/get/get_one_room_chat_by_id";
import { apiGetAdminCollaborationRoomById } from "../lib/api_fetch_admin_collaboration";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
export default function AdminColab_TableGroup({ export default function AdminColab_TableGroup() {
listGroup,
}: {
listGroup: any;
}) {
return ( return (
<> <>
<Stack> <Stack>
<ComponentAdminGlobal_HeaderTamplate name="Project Collaboration" /> <ComponentAdminGlobal_HeaderTamplate name="Project Collaboration" />
<TableMenu listGroup={listGroup} /> <TableMenu />
</Stack> </Stack>
</> </>
); );
} }
function TableMenu({ listGroup }: { listGroup: any }) { function TableMenu() {
const [data, setData] = useState<MODEL_COLLABORATION_ROOM_CHAT[]>( const [data, setData] = useState<MODEL_COLLABORATION_ROOM_CHAT[] | null>(
listGroup.data null
); );
const [isNPage, setNPage] = useState(listGroup.nPage); const [isNPage, setNPage] = useState(1);
const [activePage, setActivePage] = useState(1); const [activePage, setActivePage] = useState(1);
const [idProject, setIdProject] = useState(""); const [idProject, setIdProject] = useState("");
@@ -52,14 +50,37 @@ function TableMenu({ listGroup }: { listGroup: any }) {
const [loadingDetail, setLoadingDetail] = useState(false); const [loadingDetail, setLoadingDetail] = useState(false);
const [detailData, setDetailData] = useState<MODEL_COLLABORATION_ROOM_CHAT>(); const [detailData, setDetailData] = useState<MODEL_COLLABORATION_ROOM_CHAT>();
useShallowEffect(() => {
onLoadData();
}, [activePage]);
async function onLoadData() {
try {
const response = await apiGetAdminCollaborationRoomById({
page: `${activePage}`,
});
if (response?.success && response?.data?.data) {
setData(response.data.data);
setNPage(response.data.nPage || 1);
} else {
console.error("Invalid data format recieved", response);
setData([]);
}
} catch (error) {
console.error("Error get data table reject", error);
setData([]);
}
}
// PAGINATION dan No awal data di tampilkan // PAGINATION dan No awal data di tampilkan
let noAwal = activePage * 5 - 4; let noAwal = activePage * 5 - 4;
async function onLoad(pindahPage: any) { // async function onLoad(pindahPage: any) {
const load = await adminColab_getListAllGroupChat({ page: pindahPage }); // const load = await adminColab_getListAllGroupChat({ page: pindahPage });
setActivePage(pindahPage); // setActivePage(pindahPage);
setData(load.data as any); // setData(load.data as any);
setNPage(load.nPage); // setNPage(load.nPage);
} // }
async function onDetailData(roomId: string) { async function onDetailData(roomId: string) {
setLoadingDetail(true); setLoadingDetail(true);
@@ -75,46 +96,63 @@ function TableMenu({ listGroup }: { listGroup: any }) {
}); });
} }
const tableRow = data.map((e, i) => ( const tableRow = () => {
<tr key={i} style={{ color: AdminColor.white }}> if (!Array.isArray(data) || data.length === 0) {
{/* <td> return (
<tr>
<td colSpan={12}>
<Center>
<Text color="gray">Tidak ada data</Text>
</Center>
</td>
</tr>
);
}
return data.map((e, i) => (
<tr key={i} style={{ color: AdminColor.white }}>
{/* <td>
<Center c={AdminColor.white}>{noAwal++}</Center> <Center c={AdminColor.white}>{noAwal++}</Center>
</td> */} </td> */}
<td> <td>
<Box w={150}> <Box w={150}>
<Text lineClamp={1}> <Text lineClamp={1}>
{e?.ProjectCollaboration?.Author?.Profile?.name} {e?.ProjectCollaboration?.Author?.Profile?.name}
</Text> </Text>
</Box> </Box>
</td> </td>
<td> <td>
<Box w={150}> <Box w={150}>
<Text lineClamp={1}>{e?.name}</Text> <Text lineClamp={1}>{e?.name}</Text>
</Box> </Box>
</td> </td>
<td> <td>
<Box w={150}> <Box w={150}>
<Text> <Text>
{e?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name} {
</Text> e?.ProjectCollaboration?.ProjectCollaborationMaster_Industri
</Box> ?.name
</td> }
<td> </Text>
<Center> </Box>
<Text>{e?.ProjectCollaboration_AnggotaRoomChat.length}</Text> </td>
</Center> <td>
</td> <Center>
<td> <Text>{e?.ProjectCollaboration_AnggotaRoomChat.length}</Text>
<Center> </Center>
<Stack> </td>
<Admin_DetailButton <td>
path={`/dev/admin/colab/detail/group/${e.id}`} <Center>
/> <Stack>
</Stack> <Admin_DetailButton
</Center> path={`/dev/admin/colab/detail/group/${e.id}`}
</td> />
</tr> </Stack>
)); </Center>
</td>
</tr>
));
};
return ( return (
<> <>
@@ -124,44 +162,49 @@ function TableMenu({ listGroup }: { listGroup: any }) {
color={AdminColor.softBlue} color={AdminColor.softBlue}
component={<></>} component={<></>}
/> />
<Paper p={"md"} bg={AdminColor.softBlue}>
<Stack> {!data ? (
<ScrollArea h={"65vh"}> <CustomSkeleton height={"80vh"} width={"100%"} />
<Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}> ) : (
<thead> <Paper p={"md"} bg={AdminColor.softBlue}>
<tr> <Stack>
{/* <th> <ScrollArea h={"65vh"}>
<Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
<thead>
<tr>
{/* <th>
<Center c={AdminColor.white}>No</Center> <Center c={AdminColor.white}>No</Center>
</th> */} </th> */}
<th> <th>
<Text c={AdminColor.white}>Admin Room</Text> <Text c={AdminColor.white}>Admin Room</Text>
</th> </th>
<th> <th>
<Text c={AdminColor.white}>Nama Group</Text> <Text c={AdminColor.white}>Nama Group</Text>
</th> </th>
<th> <th>
<Text c={AdminColor.white}>Industri</Text> <Text c={AdminColor.white}>Industri</Text>
</th> </th>
<th> <th>
<Center c={AdminColor.white}>Anggota Group</Center> <Center c={AdminColor.white}>Anggota Group</Center>
</th> </th>
<th> <th>
<Center c={AdminColor.white}>Aksi</Center> <Center c={AdminColor.white}>Aksi</Center>
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody>{tableRow}</tbody> <tbody>{tableRow()}</tbody>
</Table> </Table>
</ScrollArea> </ScrollArea>
<Admin_V3_ComponentPaginationBreakpoint <Admin_V3_ComponentPaginationBreakpoint
total={isNPage} total={isNPage}
value={activePage} value={activePage}
onChange={(val) => { onChange={(val) => {
onLoad(val); setActivePage(val);
}} }}
/> />
</Stack> </Stack>
</Paper> </Paper>
)}
</Stack> </Stack>
<Modal <Modal