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

Admin Collaboration Done

Browse Source 
# feat
- Detail Project
- Report Project
## No Issuue
This commit is contained in:
Bagasbanuna02
2024-05-10 15:16:09 +08:00
parent c34f9a9b75
commit dc41a5f9af
47 changed files with 2110 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

315
src/app_modules/colab/detail/group/index.tsx Normal file
View File

@@ -0,0 +1,315 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import {
ActionIcon,
Box,
Center,
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_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";
export default function Colab_GroupChatView({
userLoginId,
listMsg,
selectRoom,
}: {
userLoginId: string;
listMsg: any;
selectRoom: MODEL_COLLABORATION_ROOM_CHAT;
}) {
const router = useRouter();
const [loadingBack, setLoadingBack] = useState(false);
const [loadingInfo, setLoadingInfo] = useState(false);
const [msg, setMsg] = useState("");
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 newData = await colab_getMessageByRoomId({
roomId: selectRoom?.id,
page: totalPage + 1,
});
setTotalPage(totalPage + 1);
// console.log(newData, "loading baru");
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);
});
}
async function onSend() {
await colab_funCreateMessageByUserId(msg, selectRoom.id).then(
async (res) => {
if (res.status === 200) {
mqtt_client.publish(selectRoom.id, msg);
setMsg("");
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
}
);
}
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">
<ActionIcon
loading={loadingInfo ? true : false}
variant="transparent"
radius={"xl"}
onClick={() => {
setLoadingInfo(true);
router.push(RouterColab.info_grup + selectRoom.id);
}}
>
<IconInfoSquareRounded />
</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 && (
<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>
{/* Batas bawah */}
<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..."
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>
</Box>
</>
);
}

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

@@ -82,17 +82,8 @@ export default function Colab_DetailGrupDiskusi({
hasMore: { up: isGet },
scrollThreshold: 0.1,
initialScroll: { top: 100 },
// initialScroll: { top : -1 },
// onScroll() {
// scrollTo({ y: 100 });
// },
});
// const setRef = useCallback((node: any) => {
// if (node) ref.current = node._outerRef
// }, [ref]);
useShallowEffect(() => {
mqtt_client.subscribe(roomId);
@@ -118,12 +109,12 @@ export default function Colab_DetailGrupDiskusi({
return (
<>
<Box h={"80vh"}>
<Box h={"80vh"} bg={"blue.1"}>
<Stack justify="flex-end" h={"100%"}>
<div
ref={ref as any}
style={{
overflow: "scroll",
// overflow: "scroll",
overflowY: "auto",
// height: "100vh",
// justifyContent: "flex-end",

37
src/app_modules/colab/detail/notifikasi/index.tsx Normal file
View File

@@ -0,0 +1,37 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
import { Center, Stack } from "@mantine/core";
import { MODEL_COLLABORATION_NOTIFIKSI } from "../../model/interface";
import ComponentColab_NotedBox from "../../component/noted_box";
import ComponentColab_DetailData from "../../component/detail/detail_data";
export default function Colab_DetailNotifikasi({
data,
}: {
data: MODEL_COLLABORATION_NOTIFIKSI;
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentColab_HeaderTamplate title="Detail Notifikasi" />}
>
<DetailNotif data={data} />
</AppComponentGlobal_LayoutTamplate>
</>
);
}
function DetailNotif({ data }: { data?: MODEL_COLLABORATION_NOTIFIKSI }) {
return (
<>
<Stack px={"sm"}>
<ComponentColab_NotedBox
informasi={data?.ProjectCollaboration.report as any}
/>
<ComponentColab_DetailData data={data?.ProjectCollaboration} />
</Stack>
</>
);
}

20
src/app_modules/colab/fun/edit/fun_is_read_by_id.ts Normal file
View File

@@ -0,0 +1,20 @@
"use server";
import prisma from "@/app/lib/prisma";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { revalidatePath } from "next/cache";
export default async function colab_funUpdateIsReadByNotifId(notifId: string) {
const updtRead = await prisma.projectCollaboration_Notifikasi.update({
where: {
id: notifId,
},
data: {
isRead: true,
},
});
if (!updtRead) return { status: 400, message: "Gagal Update" };
revalidatePath(RouterColab.notifikasi);
return { status: 200, message: "Berhasil Udpate" };
}

24
src/app_modules/colab/fun/get/cek_notifikasi.ts Normal file
View File

@@ -0,0 +1,24 @@
"use server";
import prisma from "@/app/lib/prisma";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
export default async function colab_CekNotifikasi() {
const authorId = await user_getOneUserId();
const cekNotif = await prisma.projectCollaboration_Notifikasi.findMany({
where: {
userId: authorId,
isRead: false,
},
select: {
isRead: true,
},
});
if (cekNotif.length > 0) {
return true;
} else {
return false;
}
}

31
src/app_modules/colab/fun/get/get_list_notifikasi_by_user_id.ts Normal file
View File

@@ -0,0 +1,31 @@
"use server";
import prisma from "@/app/lib/prisma";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
export default async function colab_getListNotifikasiByUserId() {
const authorId = await user_getOneUserId();
const get = await prisma.projectCollaboration_Notifikasi.findMany({
orderBy: {
createdAt: "desc",
},
where: {
userId: authorId,
},
select: {
id:true,
createdAt: true,
isRead: true,
note: true,
ProjectCollaboration: {
select: {
id: true,
report: true,
},
},
},
});
return get;
}

46
src/app_modules/colab/fun/get/get_one_notifikasi_by_id.ts Normal file
View File

@@ -0,0 +1,46 @@
"use server";
import prisma from "@/app/lib/prisma";
export default async function colab_getOneNotifikasiById({
notifId,
}: {
notifId: string;
}) {
const get = await prisma.projectCollaboration_Notifikasi.findFirst({
where: {
id: notifId,
},
select: {
id: true,
createdAt: true,
note: true,
ProjectCollaboration: {
select: {
id: true,
isActive: true,
title: true,
lokasi: true,
purpose: true,
benefit: true,
createdAt: true,
report: true,
Author: {
select: {
id: true,
Profile: true,
},
},
ProjectCollaborationMaster_Industri: true,
ProjectCollaboration_Partisipasi: {
where: {
isActive: true,
},
},
},
},
},
});
return get;
}

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

@@ -3,13 +3,15 @@
import prisma from "@/app/lib/prisma";
import _ from "lodash";
export default async function colab_getMessageByRoomId(
roomId: string,
page: number
) {
// console.log(page)
const lewat = page * 5 - 5;
const ambil = 5;
export default async function colab_getMessageByRoomId({
roomId,
page,
}: {
roomId: string;
page: number;
}) {
const lewat = page * 6 - 6;
const ambil = 6;
const getList = await prisma.projectCollaboration_Message.findMany({
orderBy: {
createdAt: "desc",
@@ -39,7 +41,5 @@ export default async function colab_getMessageByRoomId(
},
});
const dataRevers = _.reverse(getList);
return getList;
}

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

@@ -24,6 +24,8 @@ 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";
import Colab_DetailNotifikasi from "./detail/notifikasi";
import Colab_GroupChatView from "./detail/group";
export {
Colab_Beranda,
@@ -52,4 +54,6 @@ export {
Colab_DetailProyekSaya,
LayoutColab_DetailProyekSaya,
Colab_DetailInfoGrup,
Colab_DetailNotifikasi,
Colab_GroupChatView,
};

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

@@ -45,7 +45,7 @@ export default function Colab_GrupDiskus({
p={"md"}
onClick={() => {
router.push(
RouterColab.detail_grup + e?.ProjectCollaboration_RoomChat.id
RouterColab.group_chat + e?.ProjectCollaboration_RoomChat.id
);
setIdRoom(e?.ProjectCollaboration_RoomChat.id);
setLoading(true);
@@ -55,12 +55,12 @@ export default function Colab_GrupDiskus({
<Grid.Col span={"auto"}>
<Stack spacing={0}>
<Text fw={"bold"} lineClamp={1}>
{e.ProjectCollaboration_RoomChat.name}
{e?.ProjectCollaboration_RoomChat?.name}
</Text>
<Text fz={"xs"} c={"gray"}>
{
e.ProjectCollaboration_RoomChat
.ProjectCollaboration_AnggotaRoomChat.length
e?.ProjectCollaboration_RoomChat
?.ProjectCollaboration_AnggotaRoomChat.length
}{" "}
Anggota
</Text>
@@ -68,7 +68,7 @@ export default function Colab_GrupDiskus({
</Grid.Col>
<Grid.Col span={"content"}>
<Center>
{e?.ProjectCollaboration_RoomChat.id === idRoom ? (
{e?.ProjectCollaboration_RoomChat?.id === idRoom ? (
<Loader color="gray" size={20} />
) : (
<IconChevronRight color="gray" />

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

@@ -7,6 +7,7 @@ import {
Center,
Footer,
Grid,
Indicator,
Loader,
Stack,
Text,
@@ -32,8 +33,10 @@ import { useTimeout } from "@mantine/hooks";
export default function LayoutColab_Main({
children,
cekNotif,
}: {
children: React.ReactNode;
cekNotif: boolean;
}) {
const router = useRouter();
const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu);
@@ -70,7 +73,13 @@ export default function LayoutColab_Main({
id: 5,
name: "Notifikasi",
path: RouterColab.notifikasi,
icon: <IconBell />,
icon: cekNotif ? (
<Indicator processing color="orange">
<IconBell />
</Indicator>
) : (
<IconBell />
),
},
];

69
src/app_modules/colab/main/pemberitahuan/index.tsx
View File

@@ -1,14 +1,73 @@
"use client";
import { Center, Text, Title } from "@mantine/core";
import {
ActionIcon,
Center,
Group,
Paper,
Stack,
Text,
Title,
} from "@mantine/core";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import _ from "lodash";
import { MODEL_COLLABORATION_NOTIFIKSI } from "../../model/interface";
import { IconChevronRight } from "@tabler/icons-react";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import colab_funUpdateIsReadByNotifId from "../../fun/edit/fun_is_read_by_id";
export default function Colab_NotifikasiView() {
export default function Colab_NotifikasiView({
listNotifikasi,
}: {
listNotifikasi?: MODEL_COLLABORATION_NOTIFIKSI[];
}) {
const router = useRouter();
const [notifId, setNotifId] = useState("");
if (_.isEmpty(listNotifikasi))
return <ComponentColab_IsEmptyData text="Tidak ada data" />;
async function onRead(notifId: string) {
await colab_funUpdateIsReadByNotifId(notifId).then((res) => {
if (res.status === 200) {
setNotifId(notifId);
router.push(RouterColab.detail_notifikasi + notifId);
} else {
console.log(``);
}
});
}
return (
<>
<Center>
<ComponentColab_IsEmptyData text="Cooming Soon" />
</Center>
<Stack>
{listNotifikasi?.map((e, i) => (
<Paper
key={i}
bg={e?.isRead ? "gray.1" : "gray.4"}
p={"md"}
onClick={() => {
onRead(e?.id);
}}
>
<Group position="apart">
<Stack spacing={0} w={"80%"}>
<Text fw={"bold"} fz={"xs"} lineClamp={1}>
{e.note}
</Text>
<Text lineClamp={1}>{e.ProjectCollaboration.report}</Text>
</Stack>
<ActionIcon
variant="transparent"
loading={e?.id === notifId ? true : false}
>
<IconChevronRight />
</ActionIcon>
</Group>
</Paper>
))}
</Stack>
</>
);
}

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

@@ -18,6 +18,7 @@ export interface MODEL_COLLABORATION {
lokasi: string;
purpose: string;
benefit: string;
report: string;
jumlah_partisipan: number;
ProjectCollaborationMaster_Industri: MODEL_COLLABORATION_MASTER;
projectCollaborationMaster_IndustriId: number;
@@ -59,3 +60,13 @@ export interface MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT {
ProjectCollaboration_RoomChat: MODEL_COLLABORATION_ROOM_CHAT;
projectCollaboration_RoomChatId: string;
}
export interface MODEL_COLLABORATION_NOTIFIKSI {
id: string;
isRead: boolean;
isActive: boolean;
createdAt: Date;
updatedAt: Date;
note: string;
ProjectCollaboration: MODEL_COLLABORATION;
}