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

Collaboration: Room chat

Browse Source 
# feat
- chatting antar user
- lihat info grup
## No issue
This commit is contained in:
Bagasbanuna02
2024-04-29 10:30:59 +08:00
parent 2929459e95
commit 2a4d2951af
25 changed files with 366 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app_modules/auth/fun/fun_edit_aktivasi_kode_otp_by_id.ts
View File

@@ -3,7 +3,7 @@
import prisma from "@/app/lib/prisma";
export async function auth_funEditAktivasiKodeOtpById(otpId: string) {
console.log(otpId);
// console.log(otpId);
const updt = await prisma.kodeOtp.update({
where: {
id: otpId,

2
src/app_modules/auth/fun/fun_login.ts
View File

@@ -5,7 +5,7 @@ import { randomOTP } from "./rondom_otp";
export async function auth_funLogin(nomor: string) {
const codeOtp = randomOTP();
console.log(nomor)
// console.log(nomor)
try {
const res = await fetch(

3
src/app_modules/auth/register/view.tsx
View File

@@ -81,6 +81,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
await auth_funEditAktivasiKodeOtpById(dataOtp.id).then((val) => {
if (val.status === 200) {
ComponentGlobal_NotifikasiBerhasil(res.message);
setLoading(true);
router.push(RouterHome.main_home);
} else {
ComponentGlobal_NotifikasiPeringatan(val.message);
@@ -94,7 +95,6 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
return (
<>
{/* <pre>{JSON.stringify(dataOtp,null,2)}</pre> */}
<Center>
@@ -140,7 +140,6 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
color={"teal"}
onClick={() => {
onRegistarsi();
setLoading(true);
}}
>
<Text>DAFTAR</Text>

3
src/app_modules/auth/validasi/view.tsx
View File

@@ -88,6 +88,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
if (val.status === 200) {
if (res.role === "1") {
ComponentGlobal_NotifikasiBerhasil(res.message);
setLoading(true);
router.push(RouterHome.main_home);
} else {
router.push(RouterAdminDashboard.splash_admin);
@@ -105,7 +106,6 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
return (
<>
<Center h={"100vh"}>
<Stack px={"lg"} spacing={"xl"} w={{ base: 400 }} justify="center">
<Center>
@@ -143,7 +143,6 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
color={"teal"}
onClick={() => {
onVerifikasi();
setLoading(true);
}}
>
<Text>VERIFIKASI</Text>

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

@@ -98,7 +98,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
<IconZoomCheck />
</ActionIcon>
) : (
"Invalid Data"
""
)}
</Stack>
</Grid.Col>

1
src/app_modules/colab/component/header_tamplate.tsx
View File

@@ -47,6 +47,7 @@ export default function ComponentColab_HeaderTamplate({
<ActionIcon variant="transparent" disabled></ActionIcon>
) : (
<ActionIcon
radius={"xl"}
loading={loading ? true : false}
variant="transparent"
onClick={() => {

0
src/app_modules/colab/create/create_room/index.tsx
View File

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

@@ -3,6 +3,7 @@
import {
ActionIcon,
Affix,
Badge,
Box,
Button,
Grid,
@@ -20,12 +21,13 @@ import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
import { useAtom } from "jotai";
import { useState } from "react";
import { gs_colab_pesan } from "../../global_state";
import { IconArrowUp, IconSend } from "@tabler/icons-react";
import { IconArrowUp, IconCircle, IconSend } from "@tabler/icons-react";
import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
import _ from "lodash";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
import mqtt_client from "@/util/mqtt_client";
export default function Colab_DetailGrupDiskusi({
roomId,
@@ -40,17 +42,29 @@ export default function Colab_DetailGrupDiskusi({
const [obrolan, setObrolan] = useState<any[]>(listMsg);
const [scroll, scrollTo] = useWindowScroll();
async function onSend() {
scrollTo({ y: -0 });
useShallowEffect(() => {
mqtt_client.subscribe(roomId);
// await colab_funCreateMessageByUserId(pesan, roomId).then(async (res) => {
// if (res.status === 200) {
// await colab_getMessageByRoomId(roomId).then((val) => setObrolan(val));
// setPesan("");
// } else {
// ComponentGlobal_NotifikasiGagal(res.message);
// }
// });
mqtt_client.on("message", (data: any, msg: any) => {
onList(setObrolan);
});
}, [setObrolan]);
async function onList(setObrolan: any) {
await colab_getMessageByRoomId(roomId).then((val) =>
setObrolan(_.reverse(val))
);
}
async function onSend() {
await colab_funCreateMessageByUserId(pesan, roomId).then(async (res) => {
if (res.status === 200) {
mqtt_client.publish(roomId, pesan);
setPesan("");
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}
// if (_.isEmpty(listMsg))
@@ -58,8 +72,9 @@ export default function Colab_DetailGrupDiskusi({
return (
<>
<Box h={"78vh"}>
<ScrollArea h={"78vh"} scrollbarSize={2}>
<Box h={"79vh"}>
{/* <pre>{JSON.stringify(listMsg.map((e) => e.createdAt), null,2)}</pre> */}
<ScrollArea h={"79vh"} scrollbarSize={2}>
<Box>
{_.isEmpty(obrolan) ? (
<ComponentColab_IsEmptyData text="Belum Ada Pesan" />
@@ -71,10 +86,23 @@ export default function Colab_DetailGrupDiskusi({
<Group position="right">
<Paper key={e.id} bg={"blue.2"} p={"sm"}>
<Stack spacing={0}>
<Text fw={"bold"} fz={"xs"}>
<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>
@@ -82,10 +110,23 @@ export default function Colab_DetailGrupDiskusi({
<Group position="left">
<Paper key={e.id} bg={"cyan.2"} p={"sm"} mr={"lg"}>
<Stack spacing={0}>
<Text fw={"bold"} fz={"xs"}>
<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>
@@ -112,16 +153,18 @@ export default function Colab_DetailGrupDiskusi({
<Textarea
minRows={1}
radius={"md"}
placeholder="Pesan..."
placeholder="Ketik pesan anda..."
value={pesan}
onChange={(val) => setPesan(val.currentTarget.value)}
/>
</Grid.Col>
<Grid.Col span={"content"}>
<ActionIcon
variant="outline"
disabled={pesan === "" ? true : false}
variant="filled"
bg={"cyan"}
radius={"xl"}
size={"lg"}
size={"xl"}
onClick={() => {
onSend();
}}

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

@@ -8,22 +8,39 @@ import {
Footer,
Grid,
Group,
Header,
Stack,
Text,
TextInput,
Textarea,
Title,
} from "@mantine/core";
import React, { useState } from "react";
import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
import { IconPlane, IconSend } from "@tabler/icons-react";
import {
IconChevronLeft,
IconInfoSquareRounded,
IconPlane,
IconSend,
} from "@tabler/icons-react";
import { useAtom } from "jotai";
import { gs_colab_pesan } from "../../global_state";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
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>
@@ -38,11 +55,68 @@ export default function LayoutColab_DetailGrupDiskusi({
top={0}
h={50}
>
<ComponentColab_HeaderTamplate title="Room Chat" bg={"gray.2"} />
{/* <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 p={"sm"} pos={"static"} h={"80vh"}>
<Box p={"sm"} pos={"static"}>
<Box
style={{
height: 50,

44
src/app_modules/colab/detail/info_grup/index.tsx Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import { Box, Paper, Stack, Text, Title } from "@mantine/core";
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";
export default function Colab_DetailInfoGrup({
dataRoom,
}: {
dataRoom: MODEL_COLLABORATION_ROOM_CHAT;
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentColab_HeaderTamplate title="Info Grup" />}
>
{<InfoGroup dataRoom={dataRoom} />}
</AppComponentGlobal_LayoutTamplate>
</>
);
}
function InfoGroup({ dataRoom }: { dataRoom: MODEL_COLLABORATION_ROOM_CHAT }) {
return (
<>
<Stack px={"xs"}>
<ComponentColab_DetailData data={dataRoom.ProjectCollaboration} />
<Paper p={"xs"} withBorder>
<Stack>
<Title order={6}>Anggota Grup</Title>
{dataRoom.ProjectCollaboration_AnggotaRoomChat.map((e,i) => (
<Box key={i}>
<ComponentColab_AuthorNameOnListPartisipan author={e.User} isPembatas={true} />
</Box>
))}
</Stack>
</Paper>
</Stack>
</>
);
}

17
src/app_modules/colab/fun/get/room_chat/get_list_anggota_by_room_id.ts
View File

@@ -3,22 +3,35 @@
import prisma from "@/app/lib/prisma";
export default async function colab_getListAnggotaByRoomId(roomId: string) {
const get = await prisma.projectCollaboration_RoomChat.findMany({
const get = await prisma.projectCollaboration_RoomChat.findFirst({
where: {
id: roomId,
},
select: {
id: true,
name: true,
ProjectCollaboration: true,
ProjectCollaboration: {
select: {
id: true,
isActive: true,
title: true,
lokasi: true,
purpose: true,
benefit: true,
createdAt: true,
ProjectCollaborationMaster_Industri: true,
},
},
ProjectCollaboration_AnggotaRoomChat: {
select: {
User: {
select: {
id: true,
Profile: {
select: {
id: true,
name: true,
imagesId: true
},
},
},

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

@@ -5,8 +5,9 @@ import prisma from "@/app/lib/prisma";
export default async function colab_getMessageByRoomId(roomId: string) {
const getList = await prisma.projectCollaboration_Message.findMany({
orderBy: {
createdAt: "asc",
createdAt: "desc",
},
take : 8,
where: {
projectCollaboration_RoomChatId: roomId,
},

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

@@ -23,6 +23,7 @@ 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";
import Colab_DetailInfoGrup from "./detail/info_grup";
export {
Colab_Beranda,
@@ -50,4 +51,5 @@ export {
Colab_NotifikasiView,
Colab_DetailProyekSaya,
LayoutColab_DetailProyekSaya,
Colab_DetailInfoGrup,
};

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

@@ -29,6 +29,7 @@ export default function Colab_GrupDiskus({
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [idRoom, setIdRoom] = useState("");
if (_.isEmpty(listRoom))
return <ComponentColab_IsEmptyData text="Tidak Ada Data" />;
@@ -46,6 +47,7 @@ export default function Colab_GrupDiskus({
router.push(
RouterColab.detail_grup + e?.ProjectCollaboration_RoomChat.id
);
setIdRoom(e?.ProjectCollaboration_RoomChat.id);
setLoading(true);
}}
>
@@ -66,7 +68,7 @@ export default function Colab_GrupDiskus({
</Grid.Col>
<Grid.Col span={"content"}>
<Center>
{loading ? (
{e?.ProjectCollaboration_RoomChat.id === idRoom ? (
<Loader color="gray" size={20} />
) : (
<IconChevronRight color="gray" />