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

# fix

Browse Source 
- PC: Loader chat
- QC: Auth , Profile, portofolio & user search
## No Issuue
git commit -m
This commit is contained in:
Bagasbanuna02
2024-05-16 10:03:34 +08:00
parent c57e495d68
commit 66b9902d97
74 changed files with 1336 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app_modules/colab/component/noted_box.tsx
View File

@@ -11,7 +11,7 @@ export default function ComponentColab_NotedBox({
<Group>
<Text fz={10} fs={"italic"}>
<Text span inherit c={"red"}>
*{" "}
Alasan:{" "}
</Text>
{informasi}
</Text>

324
src/app_modules/colab/detail/chat/index.tsx Normal file
View File

@@ -0,0 +1,324 @@
"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 React, { 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,
ScrollDirectionBooleanState,
} 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 { List } from "react-virtualized";
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,
});
// Kirim pesan
async function onSend() {
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>
</>
);
}

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

@@ -4,7 +4,10 @@ import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import {
ActionIcon,
Box,
Button,
Card,
Center,
Code,
Grid,
Group,
Header,
@@ -25,7 +28,10 @@ import {
import { useRouter } from "next/navigation";
import router from "next/router";
import { useRef, useState } from "react";
import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
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";
@@ -36,6 +42,8 @@ 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";
export default function Colab_GroupChatView({
userLoginId,
@@ -50,61 +58,43 @@ export default function Colab_GroupChatView({
const [loadingBack, setLoadingBack] = useState(false);
const [loadingInfo, setLoadingInfo] = useState(false);
const [msg, setMsg] = useState("");
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 viewport = useRef<HTMLDivElement>(null);
const next = async (direction: ScrollDirection) => {
try {
setIsLoading(true);
await new Promise((a) => setTimeout(a, 500));
// const next = async (direction: ScrollDirection) => {
// try {
// setIsLoading(true);
// await new Promise((a) => setTimeout(a, 500));
const newData = await colab_getMessageByRoomId({
roomId: selectRoom?.id,
page: totalPage + 1,
});
setTotalPage(totalPage + 1);
// const newData = await colab_getMessageByRoomId({
// roomId: selectRoom?.id,
// page: totalPage + 1,
// });
// setTotalPage(totalPage + 1);
// console.log(newData, "loading baru");
// // console.log(newData, "loading baru");
if (_.isEmpty(newData)) {
setIsGet(false);
} else {
const d =
direction === "down" ? [...data, ...newData] : [...newData, ...data];
setData(d);
}
} finally {
setIsLoading(false);
}
};
// if (_.isEmpty(newData)) {
// setIsGet(false);
// } else {
// const d =
// direction === "down" ? [...data, ...newData] : [...newData, ...data];
// setData(d);
// }
// } finally {
// setIsLoading(false);
// }
// };
// const ref = useInfiniteScroll({
// next,
// rowCount: data.length,
// hasMore: { up: isGet },
// });
useShallowEffect(() => {
mqtt_client.subscribe(selectRoom.id);
mqtt_client.on("message", () => {
onList(setData);
});
}, [setData]);
async function onList(setData: any) {
await colab_getMessageByRoomId({
roomId: selectRoom?.id,
page: 1,
}).then((val) => {
setData(val);
setTotalPage(totalPage);
});
}
const ref = useInfiniteScroll({
next,
rowCount: data.length,
hasMore: { up: isGet },
scrollThreshold: 0.1,
});
async function onSend() {
await colab_funCreateMessageByUserId(msg, selectRoom.id).then(
@@ -112,6 +102,22 @@ export default function Colab_GroupChatView({
if (res.status === 200) {
mqtt_client.publish(selectRoom.id, msg);
setMsg("");
// const d = JSON.parse(JSON.stringify(res.data));
// setData([...data, ...[d]]);
await colab_getOneMessageById({
messageId: res.data?.id as any,
}).then((res) => {
// setNewMessage(res);
// console.log(res);
// const d = JSON.parse(JSON.stringify(res));
// setData([...data, ...[d]]);
mqtt_client.on("message", (a,b) => {
setData([...data, ...[res]])
})
});
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
@@ -119,10 +125,41 @@ export default function Colab_GroupChatView({
);
}
useShallowEffect(() => {
mqtt_client.subscribe(selectRoom.id);
// mqtt_client.on("message", (a, b) => {
// // loadDataNew(b.toString());
// // onList(b);
// onList2(newMessage);
// });
}, []);
async function onList2(dt: any) {
console.log(dt);
setData([...data, ...[dt]]);
}
// const loadDataNew = (dt: any) => {
// setData([JSON.parse(dt),...data]);
// };
async function onList(b: any) {
await colab_getMessageByRoomId({
roomId: selectRoom?.id,
page: 1,
}).then((val) => {
const d = JSON.parse(JSON.stringify(val[5]));
setData([...data, ...[d]]);
// setTotalPage(totalPage);
});
}
return (
<>
<Box h={"100vh"}>
{/* Header */}
<Box
style={{
zIndex: 99,
@@ -186,7 +223,7 @@ export default function Colab_GroupChatView({
<Box h={"80vh"}>
<Stack justify="flex-end" h={"100%"}>
<div
// ref={ref as any}
ref={ref as any}
style={{
overflowY: "auto",
}}
@@ -203,16 +240,16 @@ export default function Colab_GroupChatView({
<Box key={i}>
{userLoginId === e?.User?.id ? (
<Group position="right">
<Paper key={e.id} bg={"blue.2"} p={"sm"} mt={"sm"}>
<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}
{e?.User?.Profile?.name}
</Text>
<div
dangerouslySetInnerHTML={{ __html: e.message }}
dangerouslySetInnerHTML={{ __html: e?.message }}
/>
<Group spacing={"xs"}>
{/* <Group spacing={"xs"}>
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "medium",
@@ -224,21 +261,21 @@ export default function Colab_GroupChatView({
dateStyle: "medium",
}).format(e.createdAt)}
</Text>
</Group>
</Group> */}
</Stack>
</Paper>
</Group>
) : (
<Group>
<Paper key={e.id} bg={"cyan.2"} p={"sm"} mt={"sm"}>
<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}
{e?.User?.Profile?.name}
</Text>
<div
dangerouslySetInnerHTML={{ __html: e.message }}
dangerouslySetInnerHTML={{ __html: e?.message }}
/>
<Group spacing={"xs"}>
{/* <Group spacing={"xs"}>
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "medium",
@@ -250,7 +287,7 @@ export default function Colab_GroupChatView({
dateStyle: "medium",
}).format(e.createdAt)}
</Text>
</Group>
</Group> */}
</Stack>
</Paper>
</Group>
@@ -281,6 +318,14 @@ export default function Colab_GroupChatView({
h={"10vh"}
bg={"gray.2"}
>
{/* <Button
onClick={() => {
const d: { [key: string]: any } = _.clone(data[0]);
setData([...data, d]);
}}
>
KIzRIM PESAN
</Button> */}
<Stack justify="center" h={"100%"} px={"sm"}>
<Grid align="center">
<Grid.Col span={"auto"}>
@@ -312,4 +357,35 @@ 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>
// );
}

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

@@ -240,173 +240,212 @@ export default function Colab_DetailGrupDiskusi({
</>
);
// const [pesan, setPesan] = useState("");
// const [obrolan, setObrolan] = useState<any[]>(listMsg);
// const [scroll, scrollTo] = useWindowScroll();
// const [isLoading, setIsLoading] = useState(false);
// "use client";
// const next = async (direction: ScrollDirection) => {
// try {
// setIsLoading(true);
// await new Promise((a) => setTimeout(a, 500));
// const newData = await colab_getMessageByRoomId(roomId);
// 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";
// setObrolan((prev) =>
// direction === "up" ? [...newData, ...prev] : [...prev, ...newData]
// );
// } finally {
// setIsLoading(false);
// 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();
// }
// };
// const ref = useInfiniteScroll({
// next,
// rowCount: obrolan.length,
// hasMore: { up: true },
// });
// return (
// <>
// <Box h={"100vh"}>
// {/* Header */}
// useShallowEffect(() => {
// mqtt_client.subscribe(roomId);
// <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>
// mqtt_client.on("message", (data: any, msg: any) => {
// onList(setObrolan);
// });
// }, [setObrolan]);
// {/* Main View */}
// async function onList(setObrolan: any) {
// await colab_getMessageByRoomId(roomId).then((val) => setObrolan(val));
// }
// async function onSend() {
// await colab_funCreateMessageByUserId(pesan, roomId).then(async (res) => {
// if (res.status === 200) {
// mqtt_client.publish(roomId, pesan);
// scrollIntoView();
// setPesan("");
// } else {
// ComponentGlobal_NotifikasiGagal(res.message);
// }
// });
// }
// return (
// <>
// <Box h={"79vh"}>
// {/* <pre>{JSON.stringify(listMsg.map((e) => e.createdAt), null,2)}</pre> */}
// {/* <ScrollArea h={"79vh"} scrollbarSize={2}>
// </ScrollArea> */}
// <Box>
// {_.isEmpty(obrolan) ? (
// <ComponentColab_IsEmptyData text="Belum Ada Pesan" />
// ) : (
// <div
// ref={ref as any}
// <Box pos={"static"}>
// <Box
// style={{
// overflowY: "scroll",
// height: "80vh",
// height: "7vh",
// }}
// >
// {isLoading ? (
// <Center>
// <Loader color="gray" />
// </Center>
// ) : (
// ""
// )}
// {obrolan.map((e) => (
// <Box key={e.id} pt={"lg"}>
// {e?.User.id === userLoginId ? (
// <Group position="right" ref={targetRef as any}>
// <Paper key={e.id} bg={"blue.2"} p={"sm"}>
// <Stack spacing={0}>
// <Text lineClamp={1} fw={"bold"} fz={"xs"}>
// {e.User.Profile.name}
// </Text>
// <Text>{e.message}</Text>
// <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 position="left">
// <Paper key={e.id} bg={"cyan.2"} p={"sm"} mr={"lg"}>
// <Stack spacing={0}>
// <Text lineClamp={1} fw={"bold"} fz={10}>
// {e.User.Profile.name}
// </Text>
// <Text>{e.message}</Text>
// <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>
// )}
// </Box>
// </Box>
// />
// {/* 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>
// </>
// );
// }
// <Affix
// bg={"gray.2"}
// h={"10vh"}
// position={{ bottom: rem(0) }}
// w={"100%"}
// zIndex={99}
// p={"xs"}
// >
// <Stack justify="center" h={"100%"} px={"sm"}>
// <Grid align="center">
// <Grid.Col span={"auto"}>
// <Textarea
// minRows={1}
// radius={"md"}
// placeholder="Ketik pesan anda..."
// value={pesan}
// onChange={(val) => setPesan(val.currentTarget.value)}
// />
// </Grid.Col>
// <Grid.Col span={"content"}>
// <ActionIcon
// disabled={pesan === "" ? true : false}
// variant="filled"
// bg={"cyan"}
// radius={"xl"}
// size={"xl"}
// onClick={() => {
// onSend();
// }}
// >
// <IconSend size={20} />
// </ActionIcon>
// </Grid.Col>
// </Grid>
// </Stack>
// </Affix>
// </>
// );
}

65
src/app_modules/colab/fun/chat/get_message_by_room_id.ts Normal file
View File

@@ -0,0 +1,65 @@
"use server";
import prisma from "@/app/lib/prisma";
import _, { ceil } from "lodash";
export default async function colab_V2getListMessageByRoomId({
roomId,
page,
}: {
roomId: string;
page: number;
}) {
// console.log(page);
const lewat = page * 6 - 6;
const ambil = 6;
const awal = await prisma.projectCollaboration_Message.count({
where: {
isActive: true,
User: {
active: true,
},
},
});
const getData = await prisma.projectCollaboration_Message.findMany({
skip: lewat,
take: ambil,
orderBy: {
createdAt: "desc",
},
where: {
isActive: true,
User: {
active: true,
},
},
select: {
id: true,
createdAt: true,
isActive: true,
message: true,
isFile: true,
User: {
select: {
id: true,
Profile: {
select: {
name: true,
},
},
},
},
userId: true,
},
});
const allData = {
data: _.reverse(getData),
nPage: ceil(awal / ambil),
};
return allData;
}

24
src/app_modules/colab/fun/create/room/fun_create_message_by_user_id.ts
View File

@@ -1,7 +1,9 @@
"use server";
import prisma from "@/app/lib/prisma";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import { revalidatePath } from "next/cache";
export default async function colab_funCreateMessageByUserId(
message: string,
@@ -14,8 +16,28 @@ export default async function colab_funCreateMessageByUserId(
message: message,
projectCollaboration_RoomChatId: roomId,
},
select: {
id: true,
createdAt: true,
isActive: true,
message: true,
isFile: true,
User: {
select: {
id: true,
Profile: {
select: {
id: true,
name: true,
},
},
},
},
},
});
if (!msg) return { status: 400, message: "Pesan Gagal Dikirim" };
return { status: 200, message: "Pesan Berhasil Dikirim" };
revalidatePath(RouterColab.group_chat + roomId);
return { data: msg, status: 200, message: "Pesan Berhasil Dikirim" };
}

10
src/app_modules/colab/fun/get/room_chat/get_message_by_room_id.ts
View File

@@ -1,7 +1,9 @@
"use server";
import prisma from "@/app/lib/prisma";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import _ from "lodash";
import { revalidatePath } from "next/cache";
export default async function colab_getMessageByRoomId({
roomId,
@@ -10,8 +12,9 @@ export default async function colab_getMessageByRoomId({
roomId: string;
page: number;
}) {
const lewat = page * 6 - 6;
const ambil = 6;
const lewat = page * 10 - 10;
const ambil = 10;
const getList = await prisma.projectCollaboration_Message.findMany({
orderBy: {
createdAt: "desc",
@@ -41,8 +44,7 @@ export default async function colab_getMessageByRoomId({
},
});
const reverse = _.reverse(getList)
const reverse = _.reverse(getList);
return reverse;
}

36
src/app_modules/colab/fun/get/room_chat/get_one_message_by_id.ts Normal file
View File

@@ -0,0 +1,36 @@
"use server";
import prisma from "@/app/lib/prisma";
export default async function colab_getOneMessageById({
messageId,
}: {
messageId: string;
}) {
// console.log(messageId);
const getOne = await prisma.projectCollaboration_Message.findFirst({
where: {
id: messageId,
},
select: {
id: true,
createdAt: true,
isActive: true,
message: true,
isFile: true,
User: {
select: {
id: true,
Profile: {
select: {
id: true,
name: true,
},
},
},
},
},
});
return getOne;
}

11
src/app_modules/colab/model/interface.ts
View File

@@ -70,3 +70,14 @@ export interface MODEL_COLLABORATION_NOTIFIKSI {
note: string;
ProjectCollaboration: MODEL_COLLABORATION;
}
export interface MODEL_COLLABORATION_MESSAGE {
id: string;
isActive: boolean;
createdAt: Date;
updatedAt: Date;
userId: string;
message: string;
isFile: boolean;
User: MODEL_USER;
}