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

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}
/>
</>
);
}