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

#style:

Browse Source 
- UI Project Collaboration
## No Issue
This commit is contained in:
Bagasbanuna02
2024-07-18 16:36:31 +08:00
parent b67303d28b
commit 8fa3f0332d
48 changed files with 1140 additions and 1071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/dev/colab/detail/group/[id]/page.tsx
View File

@@ -1,7 +1,5 @@
import adminColab_getOneRoomChatById from "@/app_modules/admin/colab/fun/get/get_one_room_chat_by_id";
import { Colab_GroupChatView } from "@/app_modules/colab";
import ColabViewChat from "@/app_modules/colab/detail/chat";
import colab_V2getListMessageByRoomId from "@/app_modules/colab/fun/chat/get_message_by_room_id";
import colab_getMessageByRoomId from "@/app_modules/colab/fun/get/room_chat/get_message_by_room_id";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";

24
src/app/dev/colab/detail/grup/[id]/layout.tsx
View File

@@ -1,24 +0,0 @@
import prisma from "@/app/lib/prisma";
import { LayoutColab_DetailGrupDiskusi } from "@/app_modules/colab";
import colab_getListAnggotaByRoomId from "@/app_modules/colab/fun/get/room_chat/get_list_anggota_by_room_id";
import React from "react";
export default async function Layout({
children,
params,
}: {
children: React.ReactNode;
params: { id: string };
}) {
let roomId = params.id;
const dataRoom = await colab_getListAnggotaByRoomId(roomId);
return (
<>
<LayoutColab_DetailGrupDiskusi dataRoom={dataRoom as any}>
{children}
</LayoutColab_DetailGrupDiskusi>
</>
);
}

20
src/app/dev/colab/detail/grup/[id]/page.tsx
View File

@@ -1,20 +0,0 @@
import { Colab_DetailGrupDiskusi } from "@/app_modules/colab";
import colab_getMessageByRoomId from "@/app_modules/colab/fun/get/room_chat/get_message_by_room_id";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import _ from "lodash";
export default async function Page({ params }: { params: { id: string } }) {
let roomId = params.id;
const userLoginId = await user_getOneUserId();
let listMsg = await colab_getMessageByRoomId({ page: 1, roomId: roomId });
return (
<>
<Colab_DetailGrupDiskusi
roomId={roomId}
listMsg={listMsg}
userLoginId={userLoginId}
/>
</>
);
}

9
src/app/dev/colab/detail/main_detail/[id]/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

6
src/app/dev/colab/detail/proyek/saya/[id]/layout.tsx
View File

@@ -1,6 +1,4 @@
import { LayoutColab_DetailProyekSaya } from "@/app_modules/colab";
import colab_getOneCollaborationById from "@/app_modules/colab/fun/get/get_one_by_id";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import React from "react";
export default async function Layout({
@@ -11,11 +9,11 @@ export default async function Layout({
params: { id: string };
}) {
let colabId = params.id;
const dataColab = await colab_getOneCollaborationById(colabId)
return (
<>
<LayoutColab_DetailProyekSaya dataColab={dataColab as any}>
<LayoutColab_DetailProyekSaya colabId={colabId}>
{children}
</LayoutColab_DetailProyekSaya>
</>

2
src/app/dev/colab/main/beranda/page.tsx
View File

@@ -3,7 +3,7 @@ import colab_getListAllProyek from "@/app_modules/colab/fun/get/get_list_all_pro
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
export default async function Page() {
const listData = await colab_getListAllProyek();
const listData = await colab_getListAllProyek({page: 1});
const userLoginId = await user_getOneUserId();
return (

9
src/app/dev/colab/main/grup/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

2
src/app/dev/colab/main/grup/page.tsx
View File

@@ -2,7 +2,7 @@ import colab_getListRoomChatByAuthorId from "@/app_modules/colab/fun/get/room_ch
import Colab_GrupDiskus from "@/app_modules/colab/main/grup";
export default async function Page() {
const listRoom = await colab_getListRoomChatByAuthorId();
const listRoom = await colab_getListRoomChatByAuthorId({page: 1});
return (
<>

9
src/app/dev/colab/main/proyek/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

8
src/app/dev/colab/main/proyek/page.tsx
View File

@@ -1,10 +1,10 @@
import { Colab_Proyek } from "@/app_modules/colab";
import colab_getListPartisipasiProyekByAuthorId from "@/app_modules/colab/fun/get/get_list_partisipasi_proyek_by_author_id";
import colab_getListAllProyekSayaByAuthorId from "@/app_modules/colab/fun/get/get_list_proyek_saya_by_author_id";
import colab_getListPartisipasiProyekByAuthorId from "@/app_modules/colab/fun/get/pasrtisipan/get_list_partisipasi_proyek_by_author_id";
import colab_getListAllProyekSayaByAuthorId from "@/app_modules/colab/fun/get/pasrtisipan/get_list_proyek_saya_by_author_id";
export default async function Page() {
const listPartisipasiProyek = (await colab_getListPartisipasiProyekByAuthorId()).data;
const listProyekSaya = (await colab_getListAllProyekSayaByAuthorId()).data;
const listPartisipasiProyek = await colab_getListPartisipasiProyekByAuthorId({page: 1})
const listProyekSaya = await colab_getListAllProyekSayaByAuthorId({page: 1})
return (
<>

53
src/app_modules/colab/component/card_view/card_beranda.tsx Normal file
View File

@@ -0,0 +1,53 @@
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { Card, Stack } from "@mantine/core";
import { MODEL_COLLABORATION } from "../../model/interface";
import ComponentColab_CardSectionData from "./card_section_data";
import ComponentColab_CardSectionHeaderAuthorName from "./card_section_header_author_name";
import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
import { useRouter } from "next/navigation";
import { useState } from "react";
export function ComponentColab_CardBeranda({
data,
userLoginId,
}: {
data: MODEL_COLLABORATION;
userLoginId: string;
}) {
const router = useRouter();
const [loadingCreate, setLoadingCreate] = useState(false);
return (
<>
<Card
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
>
<Stack>
<ComponentColab_CardSectionHeaderAuthorName
authorName={data?.Author?.Profile?.name}
imagesId={data?.Author?.Profile?.imagesId}
profileId={data?.Author?.Profile?.id}
isAuthor={userLoginId === data.Author.id ? true : false}
colabId={data.id}
/>
<ComponentColab_CardSectionData
colabId={data.id}
path={RouterColab.main_detail}
data={data}
/>
<ComponentColab_JumlahPartisipan
jumlah={data.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
</>
);
}

34
src/app_modules/colab/component/card_view/card_proyek_saya.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { Card, Stack } from "@mantine/core";
import ComponentColab_CardSectionData from "./card_section_data";
import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
import { MODEL_COLLABORATION } from "../../model/interface";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
export function ComponentColab_CardProyekSaya({data, path}: {data: MODEL_COLLABORATION, path: string}) {
return (
<>
<Card
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
}}
>
<Stack>
<ComponentColab_CardSectionData
colabId={data.id}
path={path}
data={data}
/>
<ComponentColab_JumlahPartisipan
jumlah={data.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
</>
);
}

5
src/app_modules/colab/component/card_view/card_section_data.tsx
View File

@@ -1,11 +1,8 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { Card, Center, Title, Stack, Grid, Text } from "@mantine/core";
import { Card, Center, Grid, Stack, Text, Title } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_COLLABORATION } from "../../model/interface";
export default function ComponentColab_CardSectionData({

27
src/app_modules/colab/component/card_view/card_section_header_author_name.tsx
View File

@@ -19,6 +19,7 @@ import { IconDots, IconEdit } from "@tabler/icons-react";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { useDisclosure } from "@mantine/hooks";
import { useState } from "react";
import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
export default function ComponentColab_CardSectionHeaderAuthorName({
profileId,
@@ -93,10 +94,20 @@ function ButtonAction({
colabId: string;
}) {
const router = useRouter();
const [opened, setOpened] = useState(false);
const [openDrawe, setOpenDrawer] = useState(false);
const listPage = [
{
id: "1",
name: "Edit Proyek",
icon: <IconEdit />,
path: RouterColab.edit + colabId,
},
];
return (
<>
<Menu
{/* <Menu
opened={opened}
onChange={setOpened}
position="left-start"
@@ -122,7 +133,17 @@ function ButtonAction({
Edit
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Menu> */}
<ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
{isAuthor ? <IconDots size={20} color="white" /> : ""}
</ActionIcon>
<UIGlobal_Drawer
opened={openDrawe}
close={() => setOpenDrawer(false)}
component={listPage}
/>
</>
);
}

49
src/app_modules/colab/component/card_view/card_semua_partisipan.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { Card, Stack } from "@mantine/core";
import {
MODEL_COLLABORATION,
MODEL_COLLABORATION_PARTISIPASI,
} from "../../model/interface";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import ComponentColab_CardSectionData from "./card_section_data";
import ComponentColab_CardSectionHeaderAuthorName from "./card_section_header_author_name";
import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
export function ComponentColab_CardSemuaPartisipan({
data,
path,
}: {
data: MODEL_COLLABORATION_PARTISIPASI;
path: string;
}) {
return (
<>
<Card
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
borderRadius: "10px",
border: `2px solid ${AccentColor.blue}`,
color: "white",
marginBottom: "15px",
}}
>
<Stack>
<ComponentColab_CardSectionHeaderAuthorName
authorName={data?.ProjectCollaboration.Author.Profile.name}
imagesId={data?.ProjectCollaboration.Author.Profile.imagesId}
profileId={data?.ProjectCollaboration.Author.Profile.id}
/>
<ComponentColab_CardSectionData
colabId={data?.ProjectCollaboration.id}
path={path}
data={data?.ProjectCollaboration}
/>
<ComponentColab_JumlahPartisipan
jumlah={data?.ProjectCollaboration.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
</>
);
}

62
src/app_modules/colab/component/card_view/crad_grup.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { Paper, Grid, Stack, Center, Loader, Text } from "@mantine/core";
import { IconChevronRight } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
export function ComponentColab_CardGrup({ data }: { data: any }) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [idRoom, setIdRoom] = useState("");
return (
<>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
onClick={() => {
router.push(
RouterColab.group_chat + data?.ProjectCollaboration_RoomChat.id,
{ scroll: false }
);
setIdRoom(data?.ProjectCollaboration_RoomChat.id);
setLoading(true);
}}
>
<Grid align="center" h={"100%"}>
<Grid.Col span={"auto"}>
<Stack spacing={0}>
<Text fw={"bold"} lineClamp={1}>
{data?.ProjectCollaboration_RoomChat?.name}
</Text>
<Text fz={"xs"} c={"white"}>
{
data?.ProjectCollaboration_RoomChat
?.ProjectCollaboration_AnggotaRoomChat.length
}{" "}
Anggota
</Text>
</Stack>
</Grid.Col>
<Grid.Col span={"content"}>
<Center>
{data?.ProjectCollaboration_RoomChat?.id === idRoom ? (
<ComponentGlobal_Loader />
) : (
<IconChevronRight color="white" />
)}
</Center>
</Grid.Col>
</Grid>
</Paper>
</>
);
}

80
src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
View File

@@ -1,27 +1,26 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import {
Stack,
Grid,
Avatar,
Divider,
Text,
Group,
ActionIcon,
Drawer,
ScrollArea,
Title,
Paper,
Button,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import moment from "moment";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import { IconEyeCheck, IconZoomCheck } from "@tabler/icons-react";
import {
ActionIcon,
Avatar,
Button,
Divider,
Drawer,
Grid,
Group,
Paper,
ScrollArea,
Stack,
Text,
Title,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconFileCheck } from "@tabler/icons-react";
import { IconCaretRight, IconX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
export default function ComponentColab_AuthorNameOnListPartisipan({
author,
@@ -41,19 +40,52 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
opened={opened}
onClose={close}
position="bottom"
size={"40vh"}
size={"auto"}
withCloseButton={false}
styles={{
content: {
padding: 0,
position: "absolute",
margin: "auto",
backgroundColor: "transparent",
left: 0,
right: 0,
width: 500,
},
body: {
backgroundColor: AccentColor.darkblue,
borderTop: `2px solid ${AccentColor.blue}`,
borderRight: `1px solid ${AccentColor.blue}`,
borderLeft: `1px solid ${AccentColor.blue}`,
borderRadius: "20px 20px 0px 0px",
color: "white",
paddingBottom: "5%",
},
}}
>
<Stack>
<Title order={6}>Deskripsi Diri</Title>
<Paper withBorder p={"xs"}>
<Group position="apart">
<Title order={5}>Deskripsi Diri</Title>
<ActionIcon onClick={close} variant="transparent">
<IconX color="white" />
</ActionIcon>
</Group>
<Paper
p={"xs"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
color: "white",
}}
>
<ScrollArea h={"20vh"} scrollbarSize={2}>
<Text>{deskripsi}</Text>
</ScrollArea>
</Paper>
<Button radius={"xl"} onClick={close}>
{/* <Button radius={"xl"} onClick={close}>
Tutup
</Button>
</Button> */}
</Stack>
</Drawer>
@@ -96,7 +128,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
radius={"xl"}
variant="transparent"
>
<IconFileCheck color={opened ? "blue" : "gray"}/>
<IconCaretRight color={opened ? "blue" : "gray"} />
</ActionIcon>
) : (
""

104
src/app_modules/colab/component/detail/list_partisipasi_user.tsx
View File

@@ -1,31 +1,34 @@
"use client";
import {
Paper,
Center,
Title,
ScrollArea,
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import {
ActionIcon,
Box,
Button,
Center,
Drawer,
Group,
Paper,
ScrollArea,
Stack,
Text,
Divider,
Button,
Drawer,
Textarea,
Group,
Title
} from "@mantine/core";
import ComponentColab_AuthorNameOnHeader from "../header_author_name";
import {
MODEL_COLLABORATION_MASTER,
MODEL_COLLABORATION_PARTISIPASI,
} from "../../model/interface";
import _ from "lodash";
import { useDisclosure } from "@mantine/hooks";
import { IconX } from "@tabler/icons-react";
import { useState } from "react";
import colab_funCreatePartisipan from "../../fun/create/fun_create_partisipan_by_user_id";
import colab_getListPartisipanByColabId from "../../fun/get/get_list_partisipan_by_id";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { useDisclosure } from "@mantine/hooks";
import {
MODEL_COLLABORATION_PARTISIPASI
} from "../../model/interface";
import ComponentColab_AuthorNameOnListPartisipan from "./header_author_list_partisipan";
export default function ComponentColab_DetailListPartisipasiUser({
@@ -71,11 +74,37 @@ export default function ComponentColab_DetailListPartisipasiUser({
opened={opened}
onClose={close}
position="bottom"
size={"30vh"}
size={"auto"}
withCloseButton={false}
styles={{
content: {
padding: 0,
position: "absolute",
margin: "auto",
backgroundColor: "transparent",
left: 0,
right: 0,
width: 500,
},
body: {
backgroundColor: AccentColor.darkblue,
borderTop: `2px solid ${AccentColor.blue}`,
borderRight: `1px solid ${AccentColor.blue}`,
borderLeft: `1px solid ${AccentColor.blue}`,
borderRadius: "20px 20px 0px 0px",
color: "white",
paddingBottom: "5%",
},
}}
>
<Stack>
<Stack spacing={"xs"}>
<Group position="right">
<ActionIcon onClick={close} variant="transparent">
<IconX color="white" />
</ActionIcon>
</Group>
<Textarea
maxLength={300}
label="Deskripsi Diri"
placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
minRows={4}
@@ -83,11 +112,21 @@ export default function ComponentColab_DetailListPartisipasiUser({
setDeskripsi(val.currentTarget.value);
}}
/>
<Group position="center">
<Button radius={"xl"} onClick={() => close()}>
<Group position="apart">
{/* <Button radius={"xl"} onClick={() => close()}>
Batal
</Button>
<Button radius={"xl"} color="green" onClick={() => onJoin()}>
</Button> */}
<ComponentGlobal_InputCountDown lengthInput={deskripsi?.length} maxInput={300}/>
<Button
disabled={!deskripsi}
radius={"xl"}
color="yellow"
bg={MainColor.yellow}
onClick={() => onJoin()}
style={{
transition: "0.5s"
}}
>
Simpan
</Button>
</Group>
@@ -100,11 +139,9 @@ export default function ComponentColab_DetailListPartisipasiUser({
<Button
radius={"xl"}
disabled={cekPartisipan ? true : false}
color={cekPartisipan ? "green" : "blue"}
onClick={() => {
// onJoin();
open();
}}
color={cekPartisipan ? "green" : "yellow"}
onClick={open}
// bg={MainColor.yellow}
>
{cekPartisipan ? "Telah Berpartisipasi" : "Partisipasi"}
</Button>
@@ -113,7 +150,16 @@ export default function ComponentColab_DetailListPartisipasiUser({
""
)}
<Paper withBorder p={"md"}>
<Paper
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: AccentColor.blue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
>
<Stack spacing={"xl"}>
<Center>
<Title order={5}>Partispasi User ({data?.length})</Title>

11
src/app_modules/colab/component/header_author_name.tsx
View File

@@ -22,7 +22,9 @@ export default function ComponentColab_AuthorNameOnHeader({
const router = useRouter();
return (
<>
<Stack spacing={"xs"}>
<Stack spacing={"xs"} style={{
color: "white"
}}>
<Grid>
<Grid.Col
span={"content"}
@@ -56,8 +58,11 @@ export default function ComponentColab_AuthorNameOnHeader({
<Grid.Col span={"content"}>
<Stack justify="center" h={"100%"}>
{tglPublish ? (
<Text c={"gray"} fz={"xs"}>
{new Intl.DateTimeFormat("id-ID").format(tglPublish)}
<Text fz={"xs"}>
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "medium"
}).format(tglPublish)}
</Text>
) : (
""

2
src/app_modules/colab/create/index.tsx
View File

@@ -39,7 +39,7 @@ export default function Colab_Create({
});
return (
<>
<Stack px={"sm"}>
<Stack px={"sm"} py={"md"}>
<TextInput
maxLength={100}
styles={{

6
src/app_modules/colab/create/layout.tsx
View File

@@ -1,10 +1,8 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import React from "react";
import ComponentColab_HeaderTamplate from "../component/header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import React from "react";
export default function LayoutColab_Create({
children,

341
src/app_modules/colab/detail/chat/index.tsx
View File

@@ -1,341 +0,0 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { evnPesan } from "@/util/evn";
import mqtt_client from "@/util/mqtt_client";
import {
ActionIcon,
Box,
Center,
Grid,
Group,
Loader,
Paper,
Stack,
Text,
Textarea,
Title
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import {
IconChevronLeft,
IconCircle,
IconInfoSquareRounded,
IconSend,
} from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import useInfiniteScroll, {
ScrollDirection,
ScrollDirectionBooleanState,
} from "react-easy-infinite-scroll-hook";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
import {
MODEL_COLLABORATION_MESSAGE,
MODEL_COLLABORATION_ROOM_CHAT,
} from "../../model/interface";
const list = Array(100).fill(0);
export default function ColabViewChat({
userLoginId,
listMsg,
dataRoom,
}: {
userLoginId: string;
listMsg: MODEL_COLLABORATION_MESSAGE[];
dataRoom?: MODEL_COLLABORATION_ROOM_CHAT | any;
}) {
// Tamplate app layout
const router = useRouter();
const [loadingBack, setLoadingBack] = useState(false);
const [loadingInfo, setLoadingInfo] = useState(false);
// State message
const [msg, setMsg] = useState("");
const [data, setData] = useState(listMsg);
// State infinite scroll
const [isLoading, setIsLoading] = useState(false);
const [totalPage, setTotalPage] = useState(1);
const [hasMore, setHasMore] = useState<ScrollDirectionBooleanState>({
up: true,
down: false,
});
const [topik, setTopic] = useState("");
useShallowEffect(() => {
evnPesan.on(topik, (msgg) => {
let dd: any[] = _.clone(data);
const a = [...dd, JSON.parse(msgg)];
// console.log(dd.length);
setData(a);
});
}, [data]);
// Kirim pesan
async function onSend() {
// console.log(JSON.stringify(data[0], null, 2));
const kiriman = {
id: "clw8glvt4000j12efrecoubug",
createdAt: "2024-05-15T23:35:05.032Z",
isActive: true,
message: msg,
isFile: false,
User: {
id: "clvag8xt10007134j8sapm46n",
Profile: {
id: "clvajdger000g134jhhhg21c4",
name: "malikkurosaki",
},
},
};
mqtt_client.publish("pesan", JSON.stringify(kiriman));
// await colab_funCreateMessageByUserId(msg, dataRoom.id).then(async (res) => {
// if (res.status === 200) {
// const newData = await colab_getMessageByRoomId({
// roomId: dataRoom?.id,
// page: 1,
// });
// setData(newData as any);
// setHasMore({ up: true });
setMsg("");
// } else {
// ComponentGlobal_NotifikasiGagal(res.message);
// }
// });
}
const next = async (direction: ScrollDirection) => {
try {
setIsLoading(true);
await new Promise((a) => setTimeout(a, 500));
const newData = await colab_getMessageByRoomId({
roomId: dataRoom?.id,
page: totalPage + 1,
});
setTotalPage(totalPage + 1);
// console.log(newData, "loading baru");
if (_.isEmpty(newData)) {
setHasMore({ up: false });
} else {
const d: any =
direction === "down" ? [...data, ...newData] : [...newData, ...data];
setData(d);
}
} finally {
setIsLoading(false);
}
};
const ref: any = useInfiniteScroll({
next,
rowCount: data.length,
hasMore,
scrollThreshold: 0.1,
});
return (
<>
<Box h={"100vh"}>
{/* Header */}
<Box
style={{
zIndex: 99,
}}
w={"100%"}
pos={"fixed"}
top={0}
h={"7vh"}
>
<Stack bg={"gray.2"} h={"100%"} justify="center" px={"sm"}>
<Grid grow gutter={"lg"}>
<Grid.Col span={2}>
<ActionIcon
loading={loadingBack ? true : false}
variant="transparent"
radius={"xl"}
onClick={() => {
setLoadingBack(true);
router.back();
}}
>
<IconChevronLeft />
</ActionIcon>
</Grid.Col>
<Grid.Col span={8}>
<Center>
<Title order={5} lineClamp={1}>
{dataRoom?.name}
</Title>
</Center>
</Grid.Col>
<Grid.Col span={2}>
<Group position="right">
<ActionIcon
loading={loadingInfo ? true : false}
variant="transparent"
radius={"xl"}
onClick={() => {
setLoadingInfo(true);
router.push(RouterColab.info_grup + dataRoom?.id);
}}
>
<IconInfoSquareRounded />
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</Stack>
</Box>
{/* Main View */}
<Box pos={"static"}>
<Box
style={{
height: "7vh",
display: "flex",
flexDirection: "column-reverse",
}}
/>
{/* Chat View */}
<Box h={"82vh"} px={"xs"}>
<Stack justify="flex-end" h={"100%"}>
<div
ref={ref as any}
style={{
overflowY: "auto",
}}
>
{isLoading && (
<Center>
<Loader size={20} color="gray" />
</Center>
)}
{_.isEmpty(data) ? (
<ComponentColab_IsEmptyData text="Belum ada pesan" />
) : (
data.map((e, i) => (
<Box key={i}>
{userLoginId === e?.User?.id ? (
<Group position="right">
<Paper key={e?.id} bg={"blue.2"} p={"sm"} mt={"sm"}>
<Stack spacing={0}>
<Text lineClamp={1} fw={"bold"} fz={"xs"}>
{e?.User?.Profile?.name}
</Text>
<div
dangerouslySetInnerHTML={{ __html: e?.message }}
/>
<Group spacing={"xs"}>
<Text fz={7}>
{/* {new Intl.DateTimeFormat("id-ID", {
timeStyle: "medium",
}).format(e.createdAt)} */}
</Text>
<IconCircle size={3} />
<Text fz={7}>
{/* {new Intl.DateTimeFormat("id-ID", {
dateStyle: "medium",
}).format(e.createdAt)} */}
</Text>
</Group>
</Stack>
</Paper>
</Group>
) : (
<Group>
<Paper key={e?.id} bg={"cyan.2"} p={"sm"} mt={"sm"}>
<Stack spacing={0}>
<Text lineClamp={1} fw={"bold"} fz={"xs"}>
{e?.User?.Profile?.name}
</Text>
<div
dangerouslySetInnerHTML={{ __html: e?.message }}
/>
<Group spacing={"xs"}>
<Text fz={7}>
{/* {new Intl.DateTimeFormat("id-ID", {
timeStyle: "medium",
}).format(e.createdAt)} */}
</Text>
<IconCircle size={3} />
<Text fz={7}>
{/* {new Intl.DateTimeFormat("id-ID", {
dateStyle: "medium",
}).format(e.createdAt)} */}
</Text>
</Group>
</Stack>
</Paper>
</Group>
)}
</Box>
))
)}
</div>
</Stack>
</Box>
<Box
style={{
height: "11vh",
}}
/>
</Box>
{/* Footer */}
<Box
style={{
zIndex: 98,
}}
w={"100%"}
pos={"fixed"}
bottom={0}
h={"10vh"}
bg={"gray.2"}
>
<Stack justify="center" h={"100%"} px={"sm"}>
<Grid align="center">
<Grid.Col span={"auto"}>
<Textarea
value={msg}
minRows={1}
radius={"md"}
placeholder="Ketik pesan anda..."
onChange={(val) => {
setMsg(val.currentTarget.value);
}}
/>
</Grid.Col>
<Grid.Col span={"content"}>
<ActionIcon
disabled={msg ? false : true}
variant="filled"
bg={"cyan"}
radius={"xl"}
size={"xl"}
onClick={() => {
onSend();
}}
>
<IconSend size={20} />
</ActionIcon>
</Grid.Col>
</Grid>
</Stack>
</Box>
</Box>
</>
);
}

406
src/app_modules/colab/detail/group/index.tsx
View File

@@ -1,51 +1,48 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import mqtt_client from "@/util/mqtt_client";
import {
ActionIcon,
Box,
Button,
Card,
Center,
Code,
Container,
Grid,
Group,
Header,
Loader,
Paper,
ScrollArea,
rem,
Stack,
Text,
Textarea,
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import {
IconChevronLeft,
IconCircle,
IconInfoSquareRounded,
IconSend,
} from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
import router from "next/router";
import { useRef, useState } from "react";
import { useState } from "react";
import useInfiniteScroll, {
ScrollDirection,
} from "react-easy-infinite-scroll-hook";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
import {
MODEL_COLLABORATION_MESSAGE,
MODEL_COLLABORATION_ROOM_CHAT,
} from "../../model/interface";
import _ from "lodash";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
import { useShallowEffect } from "@mantine/hooks";
import mqtt_client from "@/util/mqtt_client";
import useInfiniteScroll, {
ScrollDirection,
} from "react-easy-infinite-scroll-hook";
import toast from "react-simple-toasts";
import colab_getOneMessageById from "../../fun/get/room_chat/get_one_message_by_id";
import { MODEL_USER } from "@/app_modules/home/model/interface";
import { evnPesan } from "@/util/evn";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
export default function Colab_GroupChatView({
userLoginId,
@@ -169,168 +166,184 @@ export default function Colab_GroupChatView({
return (
<>
<Box h={"100vh"}>
{/* Header */}
<Box
style={{
zIndex: 99,
}}
w={"100%"}
pos={"fixed"}
top={0}
h={50}
>
<Stack bg={"gray.2"} h={50} justify="center" px={"sm"}>
<Grid grow gutter={"lg"}>
<Grid.Col span={2}>
<ActionIcon
loading={loadingBack ? true : false}
variant="transparent"
radius={"xl"}
onClick={() => {
setLoadingBack(true);
router.back();
}}
>
<IconChevronLeft />
</ActionIcon>
</Grid.Col>
<Grid.Col span={8}>
<Center>
<Title order={5} lineClamp={1}>
{selectRoom?.name}
</Title>
</Center>
</Grid.Col>
<Grid.Col span={2}>
<Group position="right">
<Box
w={"100%"}
h={"100%"}
style={{
overflowY: "auto",
overflowX: "auto",
backgroundColor: MainColor.black,
position: "fixed",
}}
>
<Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
{/* Header */}
<Box
h={"8vh"}
style={{
zIndex: 10,
}}
w={"100%"}
pos={"sticky"}
top={0}
bg={MainColor.darkblue}
>
<Stack h={50} justify="center" px={"sm"}>
<Grid grow gutter={"lg"}>
<Grid.Col span={2}>
<ActionIcon
loading={loadingInfo ? true : false}
variant="transparent"
radius={"xl"}
onClick={() => {
setLoadingInfo(true);
router.push(RouterColab.info_grup + selectRoom.id);
setLoadingBack(true);
router.back();
}}
>
<IconInfoSquareRounded />
{loadingBack ? (
<ComponentGlobal_Loader />
) : (
<IconChevronLeft color="white" />
)}
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</Stack>
</Box>
{/* Main View */}
<Box py={"xs"} px={"xs"} pos={"static"}>
{/* Batas atas */}
<Box
style={{
height: 50,
}}
/>
{/* Chat View */}
<Box h={"80vh"}>
<Stack justify="flex-end" h={"100%"}>
<div
ref={ref as any}
style={{
overflowY: "auto",
}}
>
{isLoading && (
</Grid.Col>
<Grid.Col span={8}>
<Center>
<Loader size={20} color="gray" />
<Title c={"white"} order={5} lineClamp={1}>
{selectRoom?.name}
</Title>
</Center>
)}
{_.isEmpty(data) ? (
<ComponentColab_IsEmptyData text="Belum ada pesan" />
) : (
data.map((e, i) => (
<Box key={i}>
{userLoginId === e?.User?.id ? (
<Group position="right">
<Paper key={e?.id} bg={"blue.2"} p={"sm"} mt={"sm"}>
<Stack spacing={0}>
<Text lineClamp={1} fw={"bold"} fz={"xs"}>
{e?.User?.Profile?.name}
</Text>
<div
dangerouslySetInnerHTML={{ __html: e?.message }}
/>
{/* <Group spacing={"xs"}>
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "medium",
}).format(e.createdAt)}
</Text>
<IconCircle size={3} />
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "medium",
}).format(e.createdAt)}
</Text>
</Group> */}
</Stack>
</Paper>
</Group>
</Grid.Col>
<Grid.Col span={2}>
<Group position="right">
<ActionIcon
variant="transparent"
radius={"xl"}
onClick={() => {
setLoadingInfo(true);
router.push(RouterColab.info_grup + selectRoom.id, {scroll: false});
}}
>
{loadingInfo ? (
<ComponentGlobal_Loader />
) : (
<Group>
<Paper key={e?.id} bg={"cyan.2"} p={"sm"} mt={"sm"}>
<Stack spacing={0}>
<Text lineClamp={1} fw={"bold"} fz={"xs"}>
{e?.User?.Profile?.name}
</Text>
<div
dangerouslySetInnerHTML={{ __html: e?.message }}
/>
{/* <Group spacing={"xs"}>
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "medium",
}).format(e.createdAt)}
</Text>
<IconCircle size={3} />
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "medium",
}).format(e.createdAt)}
</Text>
</Group> */}
</Stack>
</Paper>
</Group>
<IconInfoSquareRounded color="white" />
)}
</Box>
))
)}
</div>
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</Stack>
</Box>
{/* Batas bawah */}
{/* Main View */}
<Box
py={"xs"}
px={"xs"}
pos={"static"}
style={{ zIndex: 0 }}
h={"82vh"}
>
{/* Chat View */}
<Box h={"100%"}>
<Stack justify="flex-end" h={"100%"}>
<div
ref={ref as any}
style={{
overflowY: "auto",
}}
>
{_.isEmpty(data) ? (
isLoading ? (
<Center>
<Loader size={20} color="yellow" />
</Center>
) : (
<ComponentColab_IsEmptyData text="Belum ada pesan" />
)
) : (
data.map((e, i) => (
<Box key={i}>
{userLoginId === e?.User?.id ? (
<Group position="right">
<Paper key={e?.id} bg={"blue.2"} p={"sm"} mt={"sm"}>
<Stack spacing={0}>
<Text lineClamp={1} fw={"bold"} fz={"xs"}>
{e?.User?.Profile?.name}
</Text>
<div
dangerouslySetInnerHTML={{
__html: e?.message,
}}
/>
{/* <Group spacing={"xs"}>
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "medium",
}).format(e.createdAt)}
</Text>
<IconCircle size={3} />
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "medium",
}).format(e.createdAt)}
</Text>
</Group> */}
</Stack>
</Paper>
</Group>
) : (
<Group>
<Paper key={e?.id} bg={"cyan.2"} p={"sm"} mt={"sm"}>
<Stack spacing={0}>
<Text lineClamp={1} fw={"bold"} fz={"xs"}>
{e?.User?.Profile?.name}
</Text>
<div
dangerouslySetInnerHTML={{
__html: e?.message,
}}
/>
{/* <Group spacing={"xs"}>
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "medium",
}).format(e.createdAt)}
</Text>
<IconCircle size={3} />
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "medium",
}).format(e.createdAt)}
</Text>
</Group> */}
</Stack>
</Paper>
</Group>
)}
</Box>
))
)}
</div>
</Stack>
</Box>
</Box>
{/* Footer */}
<Box
style={{
position: "relative",
bottom: 0,
height: "10vh",
zIndex: 10,
// borderRadius: "20px 20px 0px 0px",
borderTop: `2px solid ${AccentColor.blue}`,
borderRight: `1px solid ${AccentColor.blue}`,
borderLeft: `1px solid ${AccentColor.blue}`,
}}
/>
</Box>
{/* Footer */}
<Box
style={{
zIndex: 98,
}}
w={"100%"}
pos={"fixed"}
bottom={0}
h={"10vh"}
bg={"gray.2"}
>
{/* <Button
bg={AccentColor.darkblue}
>
{/* <Button
onClick={() => {
const d: { [key: string]: any } = _.clone(data[0]);
setData([...data, d]);
@@ -338,34 +351,39 @@ export default function Colab_GroupChatView({
>
KIzRIM PESAN
</Button> */}
<Stack justify="center" h={"100%"} px={"sm"}>
<Grid align="center">
<Grid.Col span={"auto"}>
<Textarea
minRows={1}
radius={"md"}
placeholder="Ketik pesan anda..."
value={msg}
onChange={(val) => setMsg(val.currentTarget.value)}
/>
</Grid.Col>
<Grid.Col span={"content"}>
<ActionIcon
disabled={msg === "" ? true : false}
variant="filled"
bg={"cyan"}
radius={"xl"}
size={"xl"}
onClick={() => {
onSend();
}}
>
<IconSend size={20} />
</ActionIcon>
</Grid.Col>
</Grid>
</Stack>
</Box>
<Stack justify="center" h={"100%"} px={"sm"}>
<Grid align="center">
<Grid.Col span={"auto"}>
<Textarea
minRows={1}
radius={"md"}
placeholder="Ketik pesan anda..."
value={msg}
onChange={(val) => setMsg(val.currentTarget.value)}
/>
</Grid.Col>
<Grid.Col span={"content"}>
<ActionIcon
disabled={msg === "" ? true : false}
variant="filled"
bg={AccentColor.softblue}
color={"cyan"}
radius={"xl"}
size={"xl"}
onClick={() => {
onSend();
}}
style={{
transition: "0.5s",
}}
>
<IconSend size={20} />
</ActionIcon>
</Grid.Col>
</Grid>
</Stack>
</Box>
</Container>
</Box>
</>
);

28
src/app_modules/colab/detail/grup/index.tsx
View File

@@ -1,44 +1,30 @@
"use client";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import mqtt_client from "@/util/mqtt_client";
import {
ActionIcon,
Affix,
Badge,
Box,
Button,
Center,
Flex,
Grid,
Group,
Loader,
Paper,
ScrollArea,
Stack,
Text,
TextInput,
Textarea,
Transition,
rem,
rem
} from "@mantine/core";
import {
useScrollIntoView,
useShallowEffect,
useWindowScroll,
useShallowEffect
} from "@mantine/hooks";
import { useAtom } from "jotai";
import { useCallback, useState } from "react";
import { gs_colab_pesan } from "../../global_state";
import { IconArrowUp, IconCircle, IconSend } from "@tabler/icons-react";
import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
import { IconCircle, IconSend } from "@tabler/icons-react";
import _ from "lodash";
import { useState } from "react";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
import mqtt_client from "@/util/mqtt_client";
import useInfiniteScroll, {
ScrollDirection,
} from "react-easy-infinite-scroll-hook";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
export default function Colab_DetailGrupDiskusi({
roomId,

40
src/app_modules/colab/detail/info_grup/index.tsx
View File

@@ -6,6 +6,9 @@ import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
import ComponentColab_DetailData from "../../component/detail/detail_data";
import ComponentColab_AuthorNameOnListPartisipan from "../../component/detail/header_author_list_partisipan";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
export default function Colab_DetailInfoGrup({
dataRoom,
@@ -14,11 +17,11 @@ export default function Colab_DetailInfoGrup({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentColab_HeaderTamplate title="Info Grup" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Info Grup" />}
>
{<InfoGroup dataRoom={dataRoom} />}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}
@@ -26,14 +29,37 @@ export default function Colab_DetailInfoGrup({
function InfoGroup({ dataRoom }: { dataRoom: MODEL_COLLABORATION_ROOM_CHAT }) {
return (
<>
<Stack px={"xs"}>
<Stack
px={"xs"}
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
>
<ComponentColab_DetailData data={dataRoom.ProjectCollaboration} />
<Paper p={"xs"} withBorder>
<Paper
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: AccentColor.blue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
>
<Stack>
<Title order={6}>Anggota Grup</Title>
{dataRoom.ProjectCollaboration_AnggotaRoomChat.map((e,i) => (
{dataRoom.ProjectCollaboration_AnggotaRoomChat.map((e, i) => (
<Box key={i}>
<ComponentColab_AuthorNameOnListPartisipan author={e.User} isPembatas={true} />
<ComponentColab_AuthorNameOnListPartisipan
author={e.User}
// isPembatas={true}
/>
</Box>
))}
</Stack>

31
src/app_modules/colab/detail/main_detail/index.tsx
View File

@@ -1,22 +1,12 @@
"use client";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import {
Box,
Button,
Center,
Grid,
Paper,
ScrollArea,
Stack,
Text,
Title,
Stack
} from "@mantine/core";
import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
import { useState } from "react";
import ComponentColab_ButtonPartisipasi from "../../component/detail/button_partisipasi";
import ComponentColab_DetailListPartisipasiUser from "../../component/detail/list_partisipasi_user";
import ComponentColab_DetailData from "../../component/detail/detail_data";
import ComponentColab_DetailListPartisipasiUser from "../../component/detail/list_partisipasi_user";
import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
import { MODEL_COLLABORATION } from "../../model/interface";
export default function Colab_MainDetail({
@@ -32,7 +22,18 @@ export default function Colab_MainDetail({
}) {
return (
<>
<Stack px={5} spacing={"xl"}>
<Stack
px={5}
spacing={"xl"}
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
>
<ComponentColab_AuthorNameOnHeader
tglPublish={new Date()}
authorName={dataColab?.Author?.Profile?.name}

12
src/app_modules/colab/detail/main_detail/layout.tsx
View File

@@ -5,6 +5,8 @@ import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_l
import { IconEdit } from "@tabler/icons-react";
import React from "react";
import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
export default function LayoutColab_MainDetail({
children,
@@ -17,17 +19,17 @@ export default function LayoutColab_MainDetail({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentColab_HeaderTamplate
<UIGlobal_LayoutHeaderTamplate
title="Detail"
icon={isAuthor ? <IconEdit /> : ""}
route2={isAuthor ? RouterColab.edit + colabId : ""}
// icon={isAuthor ? <IconEdit /> : ""}
// route2={isAuthor ? RouterColab.edit + colabId : ""}
/>
}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

18
src/app_modules/colab/detail/proyek/partisipasi/index.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
import ComponentColab_DetailListPartisipasiUser from "@/app_modules/colab/component/detail/list_partisipasi_user";
import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
@@ -15,7 +16,18 @@ export default function Colab_DetailPartisipasiProyek({
}) {
return (
<>
<Stack px={5} spacing={"xl"}>
<Stack
px={5}
spacing={"xl"}
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
>
{/* <pre>{JSON.stringify(dataColab, null,2)}</pre> */}
<ComponentColab_AuthorNameOnHeader
authorName={dataColab?.Author.Profile.name}
@@ -24,7 +36,9 @@ export default function Colab_DetailPartisipasiProyek({
tglPublish={dataColab?.createdAt}
/>
<ComponentColab_DetailData data={dataColab} />
<ComponentColab_DetailListPartisipasiUser listPartisipan={listPartisipan} />
<ComponentColab_DetailListPartisipasiUser
listPartisipan={listPartisipan}
/>
</Stack>
</>
);

8
src/app_modules/colab/detail/proyek/partisipasi/layout.tsx
View File

@@ -2,6 +2,8 @@
import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
export default function LayoutColab_DetailPartisipasiProyek({
children,
@@ -10,11 +12,11 @@ export default function LayoutColab_DetailPartisipasiProyek({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentColab_HeaderTamplate title="Detail Partisipan" />}
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Detail Partisipan" />}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

93
src/app_modules/colab/detail/proyek/saya/index.tsx
View File

@@ -1,9 +1,15 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
import ComponentColab_AuthorNameOnListPartisipan from "@/app_modules/colab/component/detail/header_author_list_partisipan";
import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
import ComponentColab_IsEmptyData from "@/app_modules/colab/component/is_empty_data";
import colab_funCreateRoomChat from "@/app_modules/colab/fun/create/fun_create_room_chat";
import { gs_colab_hot_menu } from "@/app_modules/colab/global_state";
@@ -11,10 +17,8 @@ import {
MODEL_COLLABORATION,
MODEL_COLLABORATION_PARTISIPASI,
} from "@/app_modules/colab/model/interface";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import {
ActionIcon,
Button,
Checkbox,
Drawer,
@@ -28,6 +32,7 @@ import {
Title,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconX } from "@tabler/icons-react";
import { useAtom } from "jotai";
import _ from "lodash";
import { useRouter } from "next/navigation";
@@ -42,7 +47,18 @@ export default function Colab_DetailProyekSaya({
}) {
return (
<>
<Stack px={5} spacing={"xl"}>
<Stack
px={5}
spacing={"xl"}
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
>
<ComponentColab_DetailData data={dataColab} />
<CheckBoxPartisipan
listPartisipan={listPartisipan}
@@ -119,22 +135,31 @@ function CheckBoxPartisipan({
<>
<Stack>
{/* <pre>{JSON.stringify(listPartisipan,null,2)}</pre> */}
<Paper withBorder shadow="lg" p={"sm"}>
<Paper
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: AccentColor.blue,
color: "white",
borderRadius: "10px",
marginBottom: "20px",
padding: "15px",
}}
>
{/* {JSON.stringify(value, null, 2)} */}
<Stack>
<Stack spacing={5}>
<Text c={"red"} fz={10}>
*
<Text px={"xs"} span inherit c={"gray"}>
<Text px={"xs"} span inherit c={"white"}>
Pilih user yang akan menjadi tim proyek anda
</Text>
</Text>
<Text c={"red"} fz={10}>
{/* <Text c={"red"} fz={10}>
*
<Text px={"xs"} span inherit c={"gray"}>
<Text px={"xs"} span inherit c={"white"}>
Room chat dapat dibentuk jika ada 2 user yang dipilih
</Text>
</Text>
</Text> */}
</Stack>
<ScrollArea h={400} offsetScrollbars>
<Checkbox.Group value={value} onChange={setValue}>
@@ -185,10 +210,8 @@ function ButtonAction({
if (nameRoom === "")
return ComponentGlobal_NotifikasiPeringatan("Isi Nama Grup");
await colab_funCreateRoomChat(nameRoom, value, colabId).then((res) => {
console.log(res);
if (res.status === 201) {
setLoading(true);
close();
ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
setHotMenu(4);
router.push(RouterColab.grup_diskusi);
@@ -206,6 +229,11 @@ function ButtonAction({
onClick={() => {
open();
}}
bg={MainColor.yellow}
color="yellow"
style={{
transition: "0.5s",
}}
>
Buat Ruang Diskusi{" "}
</Button>
@@ -214,11 +242,36 @@ function ButtonAction({
opened={opened}
onClose={close}
position="bottom"
size={150}
size={"auto"}
withCloseButton={false}
styles={{
content: {
padding: 0,
position: "absolute",
margin: "auto",
backgroundColor: "transparent",
left: 0,
right: 0,
width: 500,
},
body: {
backgroundColor: AccentColor.darkblue,
borderTop: `2px solid ${AccentColor.blue}`,
borderRight: `1px solid ${AccentColor.blue}`,
borderLeft: `1px solid ${AccentColor.blue}`,
borderRadius: "20px 20px 0px 0px",
color: "white",
paddingBottom: "5%",
},
}}
>
<Stack>
<Title order={6}>Nama Grup Diskusi</Title>
<Group position="apart">
<Title order={6}>Nama Grup Diskusi</Title>
<ActionIcon onClick={close} variant="transparent">
<IconX color="white" />
</ActionIcon>
</Group>
<TextInput
placeholder="Masukan nama grup diskusi .."
radius={"xl"}
@@ -226,16 +279,18 @@ function ButtonAction({
setNameRoom(val.currentTarget.value);
}}
/>
<Group grow>
<Button radius={"xl"} onClick={close}>
Batal
</Button>
<Group position="right">
<Button
disabled={!nameRoom}
loaderPosition="center"
loading={loading ? true : false}
radius={"xl"}
color="green"
color="yellow"
bg={MainColor.yellow}
onClick={() => onSave()}
style={{
transition: "0.5s",
}}
>
Simpan
</Button>

48
src/app_modules/colab/detail/proyek/saya/layout.tsx
View File

@@ -4,30 +4,58 @@ import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import ComponentColab_HeaderTamplate from "@/app_modules/colab/component/header_tamplate";
import { MODEL_COLLABORATION } from "@/app_modules/colab/model/interface";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import { AppShell } from "@mantine/core";
import { IconEdit } from "@tabler/icons-react";
import React from "react";
import { ActionIcon, AppShell } from "@mantine/core";
import { IconDotsVertical, IconEdit } from "@tabler/icons-react";
import React, { useState } from "react";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
export default function LayoutColab_DetailProyekSaya({
children,
dataColab,
colabId,
}: {
children: React.ReactNode;
dataColab: MODEL_COLLABORATION;
colabId: string
}) {
const [openDrawer, setOpenDrawer] = useState(false);
const listPage = [
{
id: "1",
name: "Edit Proyek",
icon: <IconEdit />,
path: RouterColab.edit + colabId,
},
];
return (
<>
<AppComponentGlobal_LayoutTamplate
<UIGlobal_LayoutTamplate
header={
<ComponentColab_HeaderTamplate
<UIGlobal_LayoutHeaderTamplate
title="Proyek Saya"
icon={<IconEdit />}
route2={RouterColab.edit + dataColab?.id}
customButtonRight={
<ActionIcon
variant="transparent"
onClick={() => setOpenDrawer(true)}
>
<IconDotsVertical />
</ActionIcon>
}
/>
}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
<UIGlobal_Drawer
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={listPage}
/>
</>
);
}

108
src/app_modules/colab/edit/index.tsx
View File

@@ -18,6 +18,8 @@ import colab_funEditById from "../fun/edit/fun_edit_by_id";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
export default function Colab_Edit({
selectedData,
@@ -29,9 +31,15 @@ export default function Colab_Edit({
const [value, setValue] = useState(selectedData);
return (
<>
<Stack px={"sm"}>
<Stack px={"sm"} py={"md"}>
{/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
<TextInput
maxLength={100}
styles={{
label: {
color: "white",
},
}}
label="Judul"
withAsterisk
placeholder="Masukan judul proyek"
@@ -45,6 +53,12 @@ export default function Colab_Edit({
/>
<TextInput
maxLength={100}
styles={{
label: {
color: "white",
},
}}
label="Lokasi"
withAsterisk
placeholder="Masukan lokasi proyek"
@@ -58,6 +72,11 @@ export default function Colab_Edit({
/>
<Select
styles={{
label: {
color: "white",
},
}}
placeholder="Pilih kategori industri"
label="Pilih Industri"
withAsterisk
@@ -97,32 +116,55 @@ export default function Colab_Edit({
}}
/> */}
<Textarea
label="Tujuan Proyek"
placeholder="Masukan tujuan proyek"
withAsterisk
minRows={5}
value={value.purpose}
onChange={(val) =>
setValue({
...value,
purpose: val.currentTarget.value,
})
}
/>
<Stack spacing={5}>
<Textarea
styles={{
label: {
color: "white",
},
}}
label="Tujuan Proyek"
placeholder="Masukan tujuan proyek"
withAsterisk
minRows={5}
value={value.purpose}
onChange={(val) =>
setValue({
...value,
purpose: val.currentTarget.value,
})
}
/>
<ComponentGlobal_InputCountDown
lengthInput={value.purpose.length}
maxInput={500}
/>
</Stack>
<Stack spacing={5}>
<Textarea
styles={{
label: {
color: "white",
},
}}
label="Keuntungan "
placeholder="Masukan keuntungan dalam proyek"
minRows={5}
value={value.benefit}
onChange={(val) =>
setValue({
...value,
benefit: val.currentTarget.value,
})
}
/>
<ComponentGlobal_InputCountDown
lengthInput={value.benefit.length}
maxInput={500}
/>
</Stack>
<Textarea
label="Keuntungan "
placeholder="Masukan keuntungan dalam proyek"
minRows={5}
value={value.benefit}
onChange={(val) =>
setValue({
...value,
benefit: val.currentTarget.value,
})
}
/>
<ButtonAction value={value as any} />
</Stack>
</>
@@ -159,11 +201,25 @@ function ButtonAction({ value }: { value: any }) {
return (
<>
<Button
disabled={
!value.title ||
!value.lokasi ||
!value.purpose ||
!value.benefit ||
value.projectCollaborationMaster_IndustriId === 0
? true
: false
}
loaderPosition="center"
loading={loading ? true : false}
mt={"xl"}
radius={"xl"}
onClick={() => onUpdate()}
bg={MainColor.yellow}
color={"yellow"}
style={{
transition: "0.5s",
}}
>
Update
</Button>

6
src/app_modules/colab/edit/layout.tsx
View File

@@ -3,6 +3,8 @@
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import React from "react";
import ComponentColab_HeaderTamplate from "../component/header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
export default function LayoutColab_Edit({
children,
@@ -11,9 +13,9 @@ export default function LayoutColab_Edit({
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate header={<ComponentColab_HeaderTamplate title="Edit Proyek" />}>
<UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Proyek" />}>
{children}
</AppComponentGlobal_LayoutTamplate>
</UIGlobal_LayoutTamplate>
</>
);
}

11
src/app_modules/colab/fun/get/get_list_all_proyek.ts
View File

@@ -2,8 +2,17 @@
import prisma from "@/app/lib/prisma";
export default async function colab_getListAllProyek() {
export default async function colab_getListAllProyek({
page,
}: {
page: number;
}) {
const takeData = 3;
const skipData = page * takeData - takeData;
const data = await prisma.projectCollaboration.findMany({
take: takeData,
skip: skipData,
orderBy: {
createdAt: "desc",
},

25
src/app_modules/colab/fun/get/get_list_partisipasi_proyek_by_author_id.ts → src/app_modules/colab/fun/get/pasrtisipan/get_list_partisipasi_proyek_by_author_id.ts
View File

@@ -3,16 +3,30 @@
import prisma from "@/app/lib/prisma";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
export default async function colab_getListPartisipasiProyekByAuthorId() {
const AuthorId = await user_getOneUserId();
export default async function colab_getListPartisipasiProyekByAuthorId({
page,
}: {
page: number;
}) {
const authorId = await user_getOneUserId();
const get = await prisma.projectCollaboration_Partisipasi.findMany({
const takeData = 5;
const skipData = page * takeData - takeData;
const data = await prisma.projectCollaboration_Partisipasi.findMany({
take: takeData,
skip: skipData,
orderBy: {
createdAt: "desc",
},
where: {
userId: AuthorId,
userId: authorId,
isActive: true,
AND: {
ProjectCollaboration: {
isActive: true,
},
},
},
select: {
id: true,
@@ -42,6 +56,5 @@ export default async function colab_getListPartisipasiProyekByAuthorId() {
},
});
if (!get) return { status: 400, message: "Gagal mengambil data" };
return { data: get, status: 200, message: "Berhasil mengambil data" };
return data;
}

21
src/app_modules/colab/fun/get/get_list_proyek_saya_by_author_id.ts → src/app_modules/colab/fun/get/pasrtisipan/get_list_proyek_saya_by_author_id.ts
View File

@@ -3,11 +3,21 @@
import prisma from "@/app/lib/prisma";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
export default async function colab_getListAllProyekSayaByAuthorId() {
const AuthorId = await user_getOneUserId();
const get = await prisma.projectCollaboration.findMany({
export default async function colab_getListAllProyekSayaByAuthorId({
page,
}: {
page: number;
}) {
const authorId = await user_getOneUserId();
const takeData = 5;
const skipData = page * takeData - takeData;
const data = await prisma.projectCollaboration.findMany({
take: takeData,
skip: skipData,
orderBy: { createdAt: "desc" },
where: { userId: AuthorId, isActive: true },
where: { userId: authorId, isActive: true },
select: {
id: true,
isActive: true,
@@ -31,6 +41,5 @@ export default async function colab_getListAllProyekSayaByAuthorId() {
},
});
if (!get) return { status: 400, message: "Gagal mengambil data" };
return { data: get, status: 200, message: "Berhasil mengambil data" };
return data;
}

37
src/app_modules/colab/fun/get/room_chat/get_list_room_by_author_id.ts
View File

@@ -3,10 +3,14 @@
import prisma from "@/app/lib/prisma";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
export default async function colab_getListRoomChatByAuthorId() {
export default async function colab_getListRoomChatByAuthorId({page}: {page: number}) {
const userLoginId = await user_getOneUserId();
const takeData = 10;
const skipData = page * takeData - takeData;
const listRoom = await prisma.projectCollaboration_AnggotaRoomChat.findMany({
take: takeData,
skip: skipData,
orderBy: {
createdAt: "desc",
},
@@ -32,34 +36,5 @@ export default async function colab_getListRoomChatByAuthorId() {
// console.log(listRoom);
return listRoom;
// const get = await prisma.projectCollaboration_RoomChat.findMany({
// where: {
// userId: userLoginId,
// AND: [
// {
// ProjectCollaboration_AnggotaRoomChat: {
// every: {
// userId: userLoginId,
// },
// },
// },
// ],
// },
// select: {
// id: true,
// name: true,
// // isActive: true,
// // Author: true,
// // userId: true,
// // ProjectCollaboration: true,
// // projectCollaborationId: true,
// ProjectCollaboration_AnggotaRoomChat: {
// select: {
// userId: true,
// User: true,
// },
// },
// },
// });
// return get;
}

108
src/app_modules/colab/main/beranda.tsx
View File

@@ -1,22 +1,20 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import {
ActionIcon,
Affix,
Card,
Stack,
rem
} from "@mantine/core";
import { useWindowScroll } from "@mantine/hooks";
import { IconPencilPlus } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentColab_CardSectionData from "../component/card_view/card_section_data";
import ComponentColab_CardSectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
import ComponentColab_JumlahPartisipan from "../component/card_view/card_section_jumlah_partisipan";
import { MODEL_COLLABORATION } from "../model/interface";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { event_getListAllPublish } from "@/app_modules/event/fun/get/get_list_all_publish";
import {
Box,
Center,
Loader
} from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import { ComponentColab_CardBeranda } from "../component/card_view/card_beranda";
import { MODEL_COLLABORATION } from "../model/interface";
import colab_getListAllProyek from "../fun/get/get_list_all_proyek";
export default function Colab_Beranda({
listData,
@@ -25,57 +23,47 @@ export default function Colab_Beranda({
listData: MODEL_COLLABORATION[];
userLoginId: string;
}) {
const router = useRouter();
const [scroll, scrollTo] = useWindowScroll();
const [loadingCreate, setLoadingCreate] = useState(false);
const [data, setData] = useState(listData);
const [activePage, setActivePage] = useState(1);
return (
<>
{/* <Affix position={{ bottom: rem(150), right: rem(30) }}>
<ActionIcon
loading={loadingCreate ? true : false}
opacity={scroll.y > 0 ? 0.5 : ""}
style={{
transition: "0.5s",
}}
size={"xl"}
radius={"xl"}
variant="transparent"
bg={"blue"}
onClick={() => {
setLoadingCreate(true);
router.push(RouterColab.create);
}}
>
<IconPencilPlus color="white" />
</ActionIcon>
</Affix> */}
<Box>
<ComponentGlobal_CreateButton path={RouterColab.create} />
<ComponentGlobal_CreateButton path={RouterColab.create} />
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
<Box>
<ScrollOnly
height="82vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await colab_getListAllProyek({
page: activePage + 1,
});
{/* <pre>{JSON.stringify(listData, null, 2)}</pre> */}
setActivePage((val) => val + 1);
{listData.map((e, i) => (
<Card key={e.id} withBorder shadow="lg" mb={"sm"} radius={"md"}>
<Stack>
<ComponentColab_CardSectionHeaderAuthorName
authorName={e?.Author?.Profile?.name}
imagesId={e?.Author?.Profile?.imagesId}
profileId={e?.Author?.Profile?.id}
isAuthor={userLoginId === e.Author.id ? true : false}
colabId={e.id}
/>
<ComponentColab_CardSectionData
colabId={e.id}
path={RouterColab.main_detail}
data={e}
/>
<ComponentColab_JumlahPartisipan
jumlah={e.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
))}
return loadData;
}}
>
{(item) => (
<ComponentColab_CardBeranda
data={item}
userLoginId={userLoginId}
/>
)}
</ScrollOnly>
</Box>
)}
</Box>
</>
);
}

87
src/app_modules/colab/main/grup/index.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import {
Box,
Center,
Grid,
Group,
@@ -21,64 +22,52 @@ import {
import { useState } from "react";
import _ from "lodash";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import { ComponentColab_CardGrup } from "../../component/card_view/crad_grup";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { ScrollOnly } from "next-scroll-loader";
import colab_getListAllProyek from "../../fun/get/get_list_all_proyek";
import colab_getListRoomChatByAuthorId from "../../fun/get/room_chat/get_list_room_by_author_id";
export default function Colab_GrupDiskus({
listRoom,
}: {
listRoom?: MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[];
listRoom: MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[];
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [idRoom, setIdRoom] = useState("");
if (_.isEmpty(listRoom))
return <ComponentColab_IsEmptyData text="Tidak Ada Data" />;
const [data, setData] = useState(listRoom);
const [activePage, setActivePage] = useState(1);
return (
<>
<Stack>
{listRoom?.map((e, i) => (
<Paper
key={i}
withBorder
shadow="lg"
p={"md"}
onClick={() => {
router.push(
RouterColab.group_chat + e?.ProjectCollaboration_RoomChat.id
);
setIdRoom(e?.ProjectCollaboration_RoomChat.id);
setLoading(true);
}}
>
<Grid align="center" h={"100%"}>
<Grid.Col span={"auto"}>
<Stack spacing={0}>
<Text fw={"bold"} lineClamp={1}>
{e?.ProjectCollaboration_RoomChat?.name}
</Text>
<Text fz={"xs"} c={"gray"}>
{
e?.ProjectCollaboration_RoomChat
?.ProjectCollaboration_AnggotaRoomChat.length
}{" "}
Anggota
</Text>
</Stack>
</Grid.Col>
<Grid.Col span={"content"}>
<Center>
{e?.ProjectCollaboration_RoomChat?.id === idRoom ? (
<Loader color="gray" size={20} />
) : (
<IconChevronRight color="gray" />
)}
<Box>
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
<Box>
<ScrollOnly
height="82vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
</Grid.Col>
</Grid>
</Paper>
))}
</Stack>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await colab_getListRoomChatByAuthorId({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => <ComponentColab_CardGrup data={item} />}
</ScrollOnly>
</Box>
)}
</Box>
</>
);
}

26
src/app_modules/colab/main/layout.tsx
View File

@@ -66,18 +66,18 @@ export default function LayoutColab_Main({
path: RouterColab.grup_diskusi,
icon: <IconMessages />,
},
{
id: 5,
name: "Notifikasi",
path: RouterColab.notifikasi,
icon: cekNotif ? (
<Indicator processing color="orange">
<IconBell />
</Indicator>
) : (
<IconBell />
),
},
// {
// id: 5,
// name: "Notifikasi",
// path: RouterColab.notifikasi,
// icon: cekNotif ? (
// <Indicator processing color="orange">
// <IconBell />
// </Indicator>
// ) : (
// <IconBell />
// ),
// },
];
return (
@@ -90,7 +90,7 @@ export default function LayoutColab_Main({
/>
}
footer={
<SimpleGrid cols={4} h={"9vh"} mx={"xs"}>
<SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"}>
{listFooter.map((e) => (
<Stack key={e.id} align="center" justify="center" spacing={0}>
<ActionIcon

28
src/app_modules/colab/main/proyek/index.tsx
View File

@@ -11,6 +11,7 @@ import {
MODEL_COLLABORATION,
MODEL_COLLABORATION_PARTISIPASI,
} from "../../model/interface";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
export default function Colab_Proyek({
listPartisipasiUser,
@@ -43,15 +44,36 @@ export default function Colab_Proyek({
];
return (
<Tabs variant="pills" value={activeTab} onTabChange={setActiveTab}>
<Tabs
variant="pills"
value={activeTab}
onTabChange={setActiveTab}
styles={{
tabsList: {
backgroundColor: MainColor.darkblue,
position: "sticky",
top: 0,
zIndex: 99,
},
}}
>
<Stack>
<Tabs.List grow>
{listTabs.map((e) => (
<Tabs.Tab
key={e.id}
value={e.value}
bg={activeTab === e.value ? "blue" : "gray.2"}
fw={activeTab === e.value ? "bold" : "normal"}
fw={"bold"}
c={"black"}
style={{
transition: "0.5s",
backgroundColor:
activeTab === e.value ? MainColor.yellow : "white",
border:
activeTab === e.value
? `1px solid ${AccentColor.yellow}`
: `1px solid white`,
}}
>
<Stack align="center" justify="center" spacing={0}>
{e.icon}

75
src/app_modules/colab/main/proyek/partisipasi.tsx
View File

@@ -1,50 +1,57 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { Card, Stack } from "@mantine/core";
import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
import ComponentColab_JumlahPartisipan from "../../component/card_view/card_section_jumlah_partisipan";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { Box, Center, Loader } from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import { ComponentColab_CardSemuaPartisipan } from "../../component/card_view/card_semua_partisipan";
import colab_getListPartisipasiProyekByAuthorId from "../../fun/get/pasrtisipan/get_list_partisipasi_proyek_by_author_id";
import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
export default function Colab_PartisipasiProyek({
listPartisipasiUser,
}: {
listPartisipasiUser: MODEL_COLLABORATION_PARTISIPASI[];
}) {
if (_.isEmpty(listPartisipasiUser))
return <ComponentColab_IsEmptyData text="Tidak ikut berpartisipasi" />;
const [data, setData] = useState(listPartisipasiUser);
const [activePage, setActivePage] = useState(1);
return (
<>
{listPartisipasiUser.map((e, i) => (
<Card
key={i}
withBorder
shadow="lg"
mb={"lg"}
radius={"md"}
style={{ borderColor: "indigo", borderWidth: "0.5px" }}
>
<Stack>
<ComponentColab_CardSectionHeaderAuthorName
authorName={e?.ProjectCollaboration.Author.Profile.name}
imagesId={e?.ProjectCollaboration.Author.Profile.imagesId}
profileId={e?.ProjectCollaboration.Author.Profile.id}
/>
<ComponentColab_CardSectionData
colabId={e?.ProjectCollaboration.id}
path={RouterColab.detail_partisipasi_proyek}
data={e?.ProjectCollaboration}
/>
<ComponentColab_JumlahPartisipan
jumlah={e?.ProjectCollaboration.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
))}
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<Box>
<ScrollOnly
height="73vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await colab_getListPartisipasiProyekByAuthorId({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentColab_CardSemuaPartisipan
data={item}
path={RouterColab.detail_partisipasi_proyek}
/>
)}
</ScrollOnly>
</Box>
)}
</>
);
}

64
src/app_modules/colab/main/proyek/saya.tsx
View File

@@ -1,46 +1,62 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { Card, Stack } from "@mantine/core";
import { Box, Card, Center, Loader, Stack } from "@mantine/core";
import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
import ComponentColab_JumlahPartisipan from "../../component/card_view/card_section_jumlah_partisipan";
import { MODEL_COLLABORATION } from "../../model/interface";
import _ from "lodash";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import { useState } from "react";
import { ComponentColab_CardProyekSaya } from "../../component/card_view/card_proyek_saya";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { event_getAllDraft } from "@/app_modules/event/fun/get/status/get_all_draft";
import { ScrollOnly } from "next-scroll-loader";
import colab_getListAllProyekSayaByAuthorId from "../../fun/get/pasrtisipan/get_list_proyek_saya_by_author_id";
export default function Colab_ProyekSaya({
listProyekSaya,
}: {
listProyekSaya: MODEL_COLLABORATION[];
}) {
if (_.isEmpty(listProyekSaya))
return <ComponentColab_IsEmptyData text="Tidak ada data" />;
const [data, setData] = useState(listProyekSaya);
const [activePage, setActivePage] = useState(1);
return (
<>
{listProyekSaya.map((e, i) => (
<Card
key={i}
withBorder
shadow="lg"
mb={"lg"}
radius={"md"}
style={{ borderColor: "violet", borderWidth: "0.5px" }}
>
<Stack>
<ComponentColab_CardSectionData
colabId={e.id}
path={RouterColab.detail_proyek_saya}
data={e}
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<Box >
<ScrollOnly
height="73vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await colab_getListAllProyekSayaByAuthorId({
page: activePage + 1,
});
setActivePage((val) => val + 1);
/>
<ComponentColab_JumlahPartisipan
jumlah={e.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
))}
return loadData;
}}
>
{(item) => (
<ComponentColab_CardProyekSaya
data={item}
path={RouterColab.detail_proyek_saya}
/>
)}
</ScrollOnly>
</Box>
)}
</>
);
}

1
src/app_modules/event/fun/get/get_list_all_publish.ts
View File

@@ -6,6 +6,7 @@ import _ from "lodash";
export async function event_getListAllPublish({ page }: { page: number }) {
const takeData = 10;
const skipData = page * takeData - takeData;
const data = await prisma.event.findMany({
take: takeData,
skip: skipData,

47
src/app_modules/event/main/beranda.tsx
View File

@@ -1,47 +1,20 @@
"use client";
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
import {
ActionIcon,
Affix,
Avatar,
Badge,
Box,
Button,
Card,
Center,
Divider,
Grid,
Group,
Image,
Loader,
Paper,
Skeleton,
Stack,
Text,
Title,
rem,
} from "@mantine/core";
import moment from "moment";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MODEL_EVENT } from "../model/interface";
import ComponentEvent_BoxListStatus from "../component/box_list_status";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
import _ from "lodash";
import { IconCirclePlus, IconPencilPlus } from "@tabler/icons-react";
import ComponentEvent_IsEmptyData from "../component/is_empty_data";
import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
import ComponentGlobal_CardLoadingOverlay from "@/app_modules/_global/loading_card";
import { event_getListAllPublish } from "../fun/get/get_list_all_publish";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import ComponentVote_CardViewPublish from "@/app_modules/vote/component/card_view_publish";
import { vote_getAllListPublish } from "@/app_modules/vote/fun/get/get_all_list_publish";
import {
Box,
Center,
Loader
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import { ComponentEvent_CardBeranda } from "../component/card_view/card_beranda";
import { event_getListAllPublish } from "../fun/get/get_list_all_publish";
import { MODEL_EVENT } from "../model/interface";
export default function Event_Beranda({
dataEvent,

14
src/app_modules/event/main/status_page/draft.tsx
View File

@@ -1,18 +1,14 @@
"use client";
import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
import { Box, Center, Group, Loader, Paper, Stack, Text, Title } from "@mantine/core";
import moment from "moment";
import { useRouter } from "next/navigation";
import { MODEL_EVENT } from "../../model/interface";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { Box, Center, Loader } from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import ComponentEvent_BoxListStatus from "../../component/box_list_status";
import _ from "lodash";
import ComponentEvent_IsEmptyData from "../../component/is_empty_data";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { ScrollOnly } from "next-scroll-loader";
import { event_getAllReview } from "../../fun/get/status/get_all_review";
import { event_getAllDraft } from "../../fun/get/status/get_all_draft";
import { MODEL_EVENT } from "../../model/interface";
export default function Event_StatusDraft({
listDraft,

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

@@ -30,7 +30,7 @@ export default function LayoutForum_Main({
<UIGlobal_LayoutTamplate
header={
<UIGlobal_LayoutHeaderTamplate
title="FORUM"
title="Forum"
iconRight={
<ActionIcon
radius={"xl"}

2
src/app_modules/job/main/layout.tsx
View File

@@ -49,7 +49,7 @@ export default function LayoutJob_Main({
<UIGlobal_LayoutTamplate
header={
<UIGlobal_LayoutHeaderTamplate
title="JOB"
title="Job"
routerLeft={RouterHome.main_home}
/>
}