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

# feat:

Browse Source 
- Deskripsi:
- Notifikasi collaboration
## Issue: Scroll dari chat akan di ubah dengan package yang mas malik buat
This commit is contained in:
Bagasbanuna02
2024-07-29 10:07:52 +08:00
parent 01114e8405
commit 810ce1c00d
42 changed files with 892 additions and 997 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/app_modules/colab/component/button/button_update_beranda.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { Affix, rem, Center, Button } from "@mantine/core";
import { useState } from "react";
import colab_getListAllProyek from "../../fun/get/get_list_all_proyek";
export function ComponentColab_ButtonUpdateBeranda({
onLoad,
setIsNewPost,
}: {
onLoad: (val: any) => void;
setIsNewPost: any;
}) {
const [isLoading, setIsLoading] = useState(false);
async function onLoadData() {
const loadData = await colab_getListAllProyek({ page: 1 });
onLoad(loadData);
setIsNewPost(false);
}
return (
<>
<Affix position={{ top: rem(70) }} w={"100%"}>
<Center>
<Button
style={{
transition: "0.5s",
border: `1px solid ${AccentColor.skyblue}`,
backgroundColor: AccentColor.softblue,
}}
loaderPosition="center"
loading={isLoading ? true : false}
radius={"xl"}
opacity={0.8}
onClick={() => {
onLoadData();
}}
>
Update Beranda
</Button>
</Center>
</Affix>
</>
);
}

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

@@ -128,7 +128,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
radius={"xl"}
variant="transparent"
>
<IconCaretRight color={opened ? "blue" : "gray"} />
<IconCaretRight color={"white"} />
</ActionIcon>
) : (
""

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

@@ -19,18 +19,17 @@ import {
Stack,
Text,
Textarea,
Title
Title,
} from "@mantine/core";
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 {
MODEL_COLLABORATION_PARTISIPASI
} from "../../model/interface";
import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
import ComponentColab_AuthorNameOnListPartisipan from "./header_author_list_partisipan";
import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
import mqtt_client from "@/util/mqtt_client";
export default function ComponentColab_DetailListPartisipasiUser({
listPartisipan,
userLoginId,
@@ -50,22 +49,43 @@ export default function ComponentColab_DetailListPartisipasiUser({
const [deskripsi, setDeskripsi] = useState("");
async function onJoin() {
await colab_funCreatePartisipan(
const res = await colab_funCreatePartisipan(
colabId as any,
userLoginId as any,
deskripsi
).then(async (res) => {
if (res.status === 201) {
await colab_getListPartisipanByColabId(colabId as any).then((val) => {
setApply(true);
close();
setData(val as any);
ComponentGlobal_NotifikasiBerhasil(res.message);
});
} else {
ComponentGlobal_NotifikasiGagal(res.message);
);
if (res.status === 201) {
const dataNotif = {
appId: res?.data?.ProjectCollaboration?.id,
userId: res?.data?.ProjectCollaboration?.userId,
pesan: res?.data?.ProjectCollaboration?.title,
status: "Partisipan Project",
kategoriApp: "COLLABORATION",
title: "Partisipan baru telah bergabung !",
};
const createNotifikasi = await notifikasiToUser_funCreate({
data: dataNotif as any,
});
if (createNotifikasi.status === 201) {
mqtt_client.publish(
"USER",
JSON.stringify({
userId: dataNotif.userId,
count: 1,
})
);
}
});
const resList = await colab_getListPartisipanByColabId(colabId as any);
setApply(true);
close();
setData(resList as any);
ComponentGlobal_NotifikasiBerhasil(res.message);
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
}
return (
@@ -104,7 +124,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
</ActionIcon>
</Group>
<Textarea
maxLength={300}
maxLength={300}
label="Deskripsi Diri"
placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
minRows={4}
@@ -116,7 +136,10 @@ export default function ComponentColab_DetailListPartisipasiUser({
{/* <Button radius={"xl"} onClick={() => close()}>
Batal
</Button> */}
<ComponentGlobal_InputCountDown lengthInput={deskripsi?.length} maxInput={300}/>
<ComponentGlobal_InputCountDown
lengthInput={deskripsi?.length}
maxInput={300}
/>
<Button
disabled={!deskripsi}
radius={"xl"}
@@ -124,7 +147,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
bg={MainColor.yellow}
onClick={() => onJoin()}
style={{
transition: "0.5s"
transition: "0.5s",
}}
>
Simpan

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

@@ -1,29 +1,18 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import {
Button,
NumberInput,
Select,
Stack,
Text,
TextInput,
Textarea,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import {
MODEL_COLLABORATION,
MODEL_COLLABORATION_MASTER,
} from "../model/interface";
import colab_funCreateProyek from "../fun/create/fun_create_proyek";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import _ from "lodash";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { 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 { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import colab_funCreateProyek from "../fun/create/fun_create_proyek";
import { MODEL_COLLABORATION_MASTER } from "../model/interface";
import mqtt_client from "@/util/mqtt_client";
import { useHookstate } from "@hookstate/core";
import { useGsCollabCreate } from "../global_state/state";
export default function Colab_Create({
listIndustri,
@@ -40,7 +29,7 @@ export default function Colab_Create({
});
return (
<>
<Stack px={"sm"} py={"md"}>
<Stack px={"xl"} py={"md"}>
<TextInput
maxLength={100}
styles={{
@@ -176,7 +165,12 @@ function ButtonAction({ value }: { value: any }) {
const [loading, setLoading] = useState(false);
async function onSave() {
// console.log(value.jumlah_partisipan);
mqtt_client.publish(
"Colab_create",
JSON.stringify({ isNewPost: true, count: 1 })
);
console.log(value.jumlah_partisipan);
if (value.title === "")
return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
if (value.lokasi === "")
@@ -188,15 +182,6 @@ function ButtonAction({ value }: { value: any }) {
const res = await colab_funCreateProyek(value);
if (res.status === 201) {
// const dataNotif: any = {
// appId: res.data?.id as any,
// kategoriApp: "VOTING",
// status: create.data?.MasterStatus?.name as any,
// userId: create.data?.authorId as any,
// pesan: create.data?.title as any,
// title: "Job baru",
// };
setLoading(true);
router.back();
ComponentGlobal_NotifikasiBerhasil(res.message);
@@ -223,9 +208,12 @@ function ButtonAction({ value }: { value: any }) {
loading={loading ? true : false}
mt={"xl"}
radius={"xl"}
onClick={() => onSave()}
onClick={() => {
onSave();
}}
bg={MainColor.yellow}
color={"yellow"}
c={"black"}
style={{
transition: "0.5s",
}}

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

@@ -387,35 +387,4 @@ export default function Colab_GroupChatView({
</Box>
</>
);
// return (
// <Stack bg={"dark"}>
// <Button
// onClick={() => {
// const dd = _.clone(data[0]);
// dd.message = "apa kabar";
// console.log(dd);
// mqtt_client.publish(selectRoom.id, JSON.stringify(dd));
// }}
// >
// kirim pesan
// </Button>
// <div
// ref={ref as any}
// style={{
// overflowY: "auto",
// }}
// >
// {data.map((v, k) => (
// <Stack key={k}>
// <Card withBorder shadow="md" mt={"md"}>
// <Code>
// <pre>{JSON.stringify(v, null, 2)}</pre>
// </Code>
// </Card>
// </Stack>
// ))}
// </div>
// </Stack>
// );
}

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

@@ -1,199 +1,347 @@
"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,
Affix,
Box,
Center,
Container,
Flex,
Grid,
Group,
Loader,
Paper,
rem,
Stack,
Text,
Textarea,
rem
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import {
useShallowEffect
} from "@mantine/hooks";
import { IconCircle, IconSend } from "@tabler/icons-react";
IconChevronLeft,
IconCircle,
IconInfoSquareRounded,
IconSend,
} from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
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 {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { ScrollOnly } from "next-scroll-loader";
export default function Colab_DetailGrupDiskusi({
roomId,
listMsg,
userLoginId,
listMsg,
selectRoom,
dataUserLogin,
roomId,
}: {
roomId: string;
listMsg?: any[];
userLoginId: string;
listMsg: any;
selectRoom: MODEL_COLLABORATION_ROOM_CHAT;
dataUserLogin: MODEL_USER;
roomId: string;
}) {
const [msg, setMsg] = useState("");
const [data, setData] = useState<any[]>(listMsg as any);
const [page, setPage] = useState(1);
const [newMessage, setNewMessage] = useState<any>();
const [data, setData] = useState<any[]>(listMsg);
const [totalPage, setTotalPage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
const [isGet, setIsGet] = useState(true);
const [newMessageId, setIdMessage] = useState("");
// const next = async (direction: ScrollDirection) => {
// try {
// setIsLoading(true);
// await new Promise((a) => setTimeout(a, 100));
const [activePage, setActivePage] = useState(1);
// setPage(page + 1);
// const newData = await colab_getMessageByRoomId(roomId, page + 1);
// console.log(newData);
// if (_.isEmpty(newData)) {
// setIsGet(false);
// } else {
// setData((prev) => (direction === "up" ? [...newData, ...prev] : []));
// async function onSend() {
// await colab_funCreateMessageByUserId(msg, selectRoom.id).then(
// async (res) => {
// if (res.status === 200) {
// setIdMessage(res.data?.id as any);
// setMsg("");
// const kiriman: MODEL_COLLABORATION_MESSAGE = {
// createdAt: new Date(),
// id: newMessageId,
// isActive: true,
// message: msg,
// isFile: false,
// updatedAt: new Date(),
// userId: dataUserLogin.id,
// User: {
// id: dataUserLogin.id,
// Profile: {
// id: dataUserLogin.Profile?.id as any,
// name: dataUserLogin.Profile?.name as any,
// },
// },
// };
// mqtt_client.publish(selectRoom.id, JSON.stringify(kiriman));
// } else {
// ComponentGlobal_NotifikasiGagal(res.message);
// }
// }
// } finally {
// setIsLoading(false);
// }
// };
// );
// }
// const ref = useInfiniteScroll({
// next,
// rowCount: data.length,
// hasMore: { up: isGet },
// scrollThreshold: 0.1,
// initialScroll: { top: 100 },
// });
// useShallowEffect(() => {
// mqtt_client.subscribe(selectRoom.id);
// // mqtt_client.on("message", (topic: any, message: any) => {
// // onList(message.toString());
// // });
useShallowEffect(() => {
mqtt_client.subscribe(roomId);
// mqtt_client.on("message", (topic: any, message: any) => {
// let dd = _.clone(data);
// const a = [...dd, JSON.parse(message)];
// // console.log(dd.length);
// setData(a);
// });
// }, [data]);
mqtt_client.on("message", (data: any, msg: any) => {
onList(setData);
});
}, [setData]);
async function onList(setData: any) {
await colab_getMessageByRoomId({ page: page, roomId: roomId }).then((val) =>
setData(val)
);
}
async function onSend() {
await colab_funCreateMessageByUserId(msg, roomId).then(async (res) => {
if (res.status === 200) {
mqtt_client.publish(roomId, msg);
setMsg("");
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}
// async function onList(message: any) {
// const kiriman: MODEL_COLLABORATION_MESSAGE = {
// createdAt: new Date(),
// id: newMessageId,
// isActive: true,
// message: message,
// isFile: false,
// updatedAt: new Date(),
// userId: dataUserLogin.id,
// User: {
// id: dataUserLogin.id,
// Profile: {
// id: dataUserLogin.Profile?.id as any,
// name: dataUserLogin.Profile?.name as any,
// },
// },
// };
// const dataLama = _.clone(data);
// setData([...dataLama, { ...kiriman }]);
// }
return (
<>
<Box h={"80vh"} bg={"blue.1"}>
<Stack justify="flex-end" h={"100%"}>
<div
style={{
// overflow: "scroll",
overflowY: "auto",
// height: "100vh",
// justifyContent: "flex-end",
// flexDirection: "column",
// display: "flex",
}}
>
{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 }}
/>
<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 */}
<HeaderGrup selectRoom={selectRoom} />
<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>
{/* Main View */}
<Box
py={"xs"}
px={"xs"}
pos={"static"}
style={{ zIndex: 0 }}
h={"82vh"}
>
{/* Chat View */}
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<Box bg={"red"}>
<ScrollOnly
height="80vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
</Box>
))
data={data}
setData={setData}
moreData={async () => {
let loadData = await colab_getMessageByRoomId({
roomId: roomId,
page: 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<Flex >{item.message}</Flex>
// <Flex bg={"cyan"} align={"flex-end"}>
// {userLoginId === item?.User?.id ? (
// <Group position="right">
// <Paper
// key={item?.id}
// bg={"blue.2"}
// p={"sm"}
// mt={"sm"}
// >
// <Stack spacing={0}>
// <Text lineClamp={1} fw={"bold"} fz={"xs"}>
// {item?.User?.Profile?.name}
// </Text>
// <div
// dangerouslySetInnerHTML={{
// __html: item?.message,
// }}
// />
// </Stack>
// </Paper>
// </Group>
// ) : (
// <Group>
// <Paper
// key={item?.id}
// bg={"cyan.2"}
// p={"sm"}
// mt={"sm"}
// >
// <Stack spacing={0}>
// <Text lineClamp={1} fw={"bold"} fz={"xs"}>
// {item?.User?.Profile?.name}
// </Text>
// <div
// dangerouslySetInnerHTML={{
// __html: item?.message,
// }}
// />
// </Stack>
// </Paper>
// </Group>
// )}
// </Flex>
)}
</ScrollOnly>
</Box>
)}
{/* {isLoading && (
</Box>
{/* Footer */}
<FooterGrup msg={msg} setMsg={setMsg} />
</Container>
</Box>
</>
);
}
function HeaderGrup({
selectRoom,
}: {
selectRoom: MODEL_COLLABORATION_ROOM_CHAT;
}) {
const router = useRouter();
const [loadingBack, setLoadingBack] = useState(false);
const [loadingInfo, setLoadingInfo] = useState(false);
return (
<>
<Box
h={"8vh"}
style={{
zIndex: 10,
}}
w={"100%"}
pos={"sticky"}
top={0}
bg={MainColor.darkblue}
>
<Stack h={"100%"} justify="center" px={"sm"}>
<Grid grow gutter={"lg"}>
<Grid.Col span={2}>
<ActionIcon
variant="transparent"
radius={"xl"}
onClick={() => {
setLoadingBack(true);
router.back();
}}
>
{loadingBack ? (
<ComponentGlobal_Loader />
) : (
<IconChevronLeft color="white" />
)}
</ActionIcon>
</Grid.Col>
<Grid.Col span={8}>
<Center>
<Loader variant="bars" size={20} color="gray" />
<Title c={"white"} order={5} lineClamp={1}>
{selectRoom?.name}
</Title>
</Center>
)} */}
</div>
</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 />
) : (
<IconInfoSquareRounded color="white" />
)}
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</Stack>
</Box>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
</>
);
}
<Affix
bg={"gray.2"}
h={"10vh"}
position={{ bottom: rem(0) }}
w={"100%"}
zIndex={99}
p={"xs"}
function FooterGrup({
msg,
setMsg,
}: {
msg: string;
setMsg: (val: any) => any;
}) {
async function onSend() {
console.log(msg);
}
return (
<>
<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}`,
}}
bg={AccentColor.darkblue}
>
<Stack justify="center" h={"100%"} px={"sm"}>
<Grid align="center">
@@ -210,11 +358,15 @@ export default function Colab_DetailGrupDiskusi({
<ActionIcon
disabled={msg === "" ? true : false}
variant="filled"
bg={"cyan"}
bg={AccentColor.softblue}
color={"cyan"}
radius={"xl"}
size={"xl"}
onClick={() => {
onSend();
onSend()
}}
style={{
transition: "0.5s",
}}
>
<IconSend size={20} />
@@ -222,216 +374,7 @@ export default function Colab_DetailGrupDiskusi({
</Grid.Col>
</Grid>
</Stack>
</Affix>
</Box>
</>
);
// "use client";
// import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
// import {
// ActionIcon,
// Box,
// Button,
// Card,
// Center,
// Code,
// Grid,
// Group,
// Header,
// Loader,
// Paper,
// ScrollArea,
// Stack,
// Text,
// Textarea,
// Title,
// } from "@mantine/core";
// import {
// IconChevronLeft,
// IconCircle,
// IconInfoSquareRounded,
// IconSend,
// } from "@tabler/icons-react";
// import { useRouter } from "next/navigation";
// import router from "next/router";
// import { useRef, useState } from "react";
// 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/component_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";
// const list = Array(100).fill(0);
// export default function ColabViewChat({
// userLoginId,
// listMsg,
// dataRoom,
// }: {
// userLoginId: string;
// listMsg: any;
// dataRoom?: MODEL_COLLABORATION_ROOM_CHAT;
// }) {
// // 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);
// const [ls, setLs] = useState(list);
// const viewport = useRef<HTMLDivElement>(null);
// const scrollBottom = () => {
// viewport.current?.scrollTo({
// top: viewport.current.scrollHeight,
// behavior: "smooth",
// });
// };
// // Kirim pesan
// async function onSend() {
// setMsg("");
// setLs([...[msg], ...ls]);
// scrollBottom();
// }
// 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",
// }}
// />
// {/* Chat View */}
// <Box h={"83vh"} bg={"blue"}>
// <ScrollArea h={"100%"} viewportRef={viewport}>
// {ls.map((e, i) => (
// <Text key={i}>{`${e + 1 + i++}`}</Text>
// ))}
// </ScrollArea>
// </Box>
// <Box
// style={{
// height: "10vh",
// }}
// />
// </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
// 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>
// </>
// );
// }
}

125
src/app_modules/colab/detail/grup/layout.tsx
View File

@@ -1,125 +0,0 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import {
ActionIcon,
Box,
Center,
Grid,
Group,
Header,
Stack,
Title
} from "@mantine/core";
import {
IconChevronLeft,
IconInfoSquareRounded
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
export default function LayoutColab_DetailGrupDiskusi({
children,
dataRoom,
}: {
children: React.ReactNode;
dataRoom: MODEL_COLLABORATION_ROOM_CHAT;
}) {
const router = useRouter();
const [loadingBack, setLoadingBack] = useState(false);
const [loadingInfo, setLoadingInfo] = useState(false);
return (
<>
<Box>
{/* Header */}
<Box
style={{
zIndex: 99,
}}
w={"100%"}
bg={"black"}
pos={"fixed"}
top={0}
h={50}
>
{/* <ComponentColab_HeaderTamplate
title={dataRoom.name + " " + "fwf wfwe efewf wef"}
bg={"gray.2"}
icon={<IconInfoSquareRounded />}
route2={RouterColab.info_grup + dataRoom?.id}
/> */}
<Header height={50} sx={{ borderStyle: "none" }} bg={"gray.2"}>
<Stack 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}>
{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>
{/* <Group position="apart" px={"sm"} h={"100%"}>
<ActionIcon>
<IconChevronLeft />
</ActionIcon>
<Box w={width > 375 ? 300 : 200}>
<Text truncate>ff fsafsdfdaf sadsadf asdfda ewfw wefewf</Text>
</Box>
<ActionIcon>
<IconInfoSquareRounded />
</ActionIcon>
</Group> */}
</Header>
</Box>
{/* Children */}
<Box py={"xs"} px={"xs"} pos={"static"}>
<Box
style={{
height: 50,
}}
></Box>
<Stack>
{children}
<Box
style={{
height: "10vh",
}}
></Box>
</Stack>
</Box>
</Box>
</>
);
}

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

@@ -17,6 +17,7 @@ import {
MODEL_COLLABORATION,
MODEL_COLLABORATION_PARTISIPASI,
} from "@/app_modules/colab/model/interface";
import { notifikasiToUser_CreateGroupCollaboration } from "@/app_modules/notifikasi/fun/create/create_notif_to_user_collaboration";
import {
ActionIcon,
Button,
@@ -37,6 +38,8 @@ import { useAtom } from "jotai";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import mqtt_client from "@/util/mqtt_client";
export default function Colab_DetailProyekSaya({
dataColab,
@@ -78,59 +81,6 @@ function CheckBoxPartisipan({
}) {
const [value, setValue] = useState<string[]>([]);
const listCheck = [
{
id: 1,
value: "satu",
label: "Satu",
},
{
id: 2,
value: "dua",
label: "Dua",
},
{
id: 3,
value: "tiga",
label: "Tiga",
},
{
id: 4,
value: "empat",
label: "Empat",
},
{
id: 5,
value: "lima",
label: "Lima",
},
{
id: 6,
value: "enam",
label: "Enam",
},
{
id: 7,
value: "tujuh",
label: "Tujuh",
},
{
id: 8,
value: "delapan",
label: "Delapan",
},
{
id: 9,
value: "sembilan",
label: "Sembilan",
},
{
id: 10,
value: "sepuluh",
label: "Sepuluh",
},
];
return (
<>
<Stack>
@@ -208,17 +158,29 @@ function ButtonAction({
async function onSave() {
if (nameRoom === "")
return ComponentGlobal_NotifikasiPeringatan("Isi Nama Grup");
await colab_funCreateRoomChat(nameRoom, value, colabId).then((res) => {
if (res.status === 201) {
setLoading(true);
ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
setHotMenu(4);
router.push(RouterColab.grup_diskusi);
} else {
ComponentGlobal_NotifikasiGagal("Gagal Membuat Grup");
return ComponentGlobal_NotifikasiPeringatan("Lengkapi Nama Grup");
// await notifikasiToUser_CreateGroupCollaboration({ colabId: colabId });
const res = await colab_funCreateRoomChat(nameRoom, value, colabId);
if (res.status === 201) {
for (let a of value) {
mqtt_client.publish(
"USER",
JSON.stringify({
userId: a,
count: 1,
})
);
}
});
setLoading(true);
ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
setHotMenu(4);
router.push(RouterColab.grup_diskusi);
} else {
ComponentGlobal_NotifikasiGagal("Gagal Membuat Grup");
}
}
return (
@@ -231,6 +193,7 @@ function ButtonAction({
}}
bg={MainColor.yellow}
color="yellow"
c={"black"}
style={{
transition: "0.5s",
}}
@@ -286,6 +249,7 @@ function ButtonAction({
loading={loading ? true : false}
radius={"xl"}
color="yellow"
c={"black"}
bg={MainColor.yellow}
onClick={() => onSave()}
style={{

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

@@ -1,25 +1,18 @@
"use client";
import {
Stack,
TextInput,
Select,
Textarea,
Button,
Text,
} from "@mantine/core";
import { 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 { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { Button, Select, Stack, Textarea, TextInput } from "@mantine/core";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { useState } from "react";
import colab_funEditById from "../fun/edit/fun_edit_by_id";
import {
MODEL_COLLABORATION,
MODEL_COLLABORATION_MASTER,
} from "../model/interface";
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,
@@ -31,7 +24,7 @@ export default function Colab_Edit({
const [value, setValue] = useState(selectedData);
return (
<>
<Stack px={"sm"} py={"md"}>
<Stack px={"xl"} py={"md"}>
{/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
<TextInput
maxLength={100}
@@ -217,6 +210,7 @@ function ButtonAction({ value }: { value: any }) {
onClick={() => onUpdate()}
bg={MainColor.yellow}
color={"yellow"}
c={"black"}
style={{
transition: "0.5s",
}}

19
src/app_modules/colab/fun/create/fun_create_partisipan_by_user_id.ts
View File

@@ -13,11 +13,24 @@ export default async function colab_funCreatePartisipan(
data: {
projectCollaborationId: colabId,
userId: userId,
deskripsi_diri: deskripsi
deskripsi_diri: deskripsi,
},
select: {
ProjectCollaboration: {
select: {
id: true,
title: true,
userId: true,
},
},
},
});
if (!create) return { status: 400, message: "Gagal menambahkan partisipan" };
revalidatePath(RouterColab.main_detail + colabId);
return { status: 201, message: "Berhasil menambahkan partisipan" };
}
return {
data: create,
status: 201,
message: "Berhasil menambahkan partisipan",
};
}

14
src/app_modules/colab/fun/create/fun_create_room_chat.ts
View File

@@ -32,6 +32,20 @@ export default async function colab_funCreateRoomChat(
if (!createAnggota)
return { status: 400, message: "Gagal Menambah Anggota" };
const createdNotifikasi = await prisma.notifikasi.create({
data: {
userId: v,
appId: createRoom.id,
status: "Collaboration Group",
title: "Grup Kolaborasi Baru",
pesan: createRoom.name,
kategoriApp: "COLLABORATION",
userRoleId: "1",
},
});
if (!createdNotifikasi)
return { status: 400, message: "Gagal mengirim notifikasi" };
}
const createForAuthor =

8
src/app_modules/colab/global_state/state.ts Normal file
View File

@@ -0,0 +1,8 @@
import { hookstate, useHookstate } from "@hookstate/core";
const gs_colab_create = hookstate<boolean>(false);
export function useGsCollabCreate(){
const state = useHookstate(gs_colab_create);
const value = state.get();
return [value, state.set] as const
}

2
src/app_modules/colab/index.ts
View File

@@ -19,7 +19,6 @@ import Colab_DetailPartisipasiProyek from "./detail/proyek/partisipasi";
import LayoutColab_DetailPartisipasiProyek from "./detail/proyek/partisipasi/layout";
import Colab_GrupDiskus from "./main/grup";
import Colab_DetailGrupDiskusi from "./detail/grup";
import LayoutColab_DetailGrupDiskusi from "./detail/grup/layout";
import Colab_NotifikasiView from "./main/pemberitahuan";
import Colab_DetailProyekSaya from "./detail/proyek/saya";
import LayoutColab_DetailProyekSaya from "./detail/proyek/saya/layout";
@@ -49,7 +48,6 @@ export {
LayoutColab_DetailPartisipasiProyek,
Colab_GrupDiskus,
Colab_DetailGrupDiskusi,
LayoutColab_DetailGrupDiskusi,
Colab_NotifikasiView,
Colab_DetailProyekSaya,
LayoutColab_DetailProyekSaya,

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

@@ -1,20 +1,19 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
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 mqtt_client from "@/util/mqtt_client";
import { Affix, Box, Button, Center, Loader, rem } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
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";
import { MODEL_COLLABORATION } from "../model/interface";
import { ComponentColab_ButtonUpdateBeranda } from "../component/button/button_update_beranda";
export default function Colab_Beranda({
listData,
@@ -26,9 +25,30 @@ export default function Colab_Beranda({
const [data, setData] = useState(listData);
const [activePage, setActivePage] = useState(1);
const [isNewPost, setIsNewPost] = useState(false);
useShallowEffect(() => {
mqtt_client.subscribe("Colab_create");
mqtt_client.on("message", (topic, message) => {
if (topic === "Colab_create") {
setIsNewPost(JSON.parse(message.toString()).isNewPost);
}
});
}, []);
return (
<>
<Box>
{isNewPost && (
<ComponentColab_ButtonUpdateBeranda
onLoad={(val) => {
setData(val);
}}
setIsNewPost={setIsNewPost}
/>
)}
<ComponentGlobal_CreateButton path={RouterColab.create} />
{_.isEmpty(data) ? (

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

@@ -1,33 +1,19 @@
"use client";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import {
Box,
Center,
Grid,
Group,
Loader,
Paper,
Stack,
Text,
Title,
Loader
} from "@mantine/core";
import ComponentColab_AuthorNameOnHeader from "../../component/header_author_name";
import { IconChevronCompactRight, IconChevronRight } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import {
MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT,
MODEL_COLLABORATION_ROOM_CHAT,
} from "../../model/interface";
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 { useState } from "react";
import { ComponentColab_CardGrup } from "../../component/card_view/crad_grup";
import colab_getListRoomChatByAuthorId from "../../fun/get/room_chat/get_list_room_by_author_id";
import {
MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT
} from "../../model/interface";
export default function Colab_GrupDiskus({
listRoom,