Create Proyek Kolaborasi

# feat
- Create proyek
- Edit proyek
- User lain join proyek
- Buat gruo diskusi
## No issue

src/app_modules/colab/detail/grup/index.tsx

@@ -6,8 +6,11 @@ import {
   Box,
   Button,
   Grid,
+  Group,
+  Paper,
   ScrollArea,
   Stack,
+  Text,
   TextInput,
   Textarea,
   Transition,
@@ -18,22 +21,91 @@ import { useAtom } from "jotai";
 import { useState } from "react";
 import { gs_colab_pesan } from "../../global_state";
 import { IconArrowUp, 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";
 
-export default function Colab_DetailGrupDiskusi() {
+export default function Colab_DetailGrupDiskusi({
+  roomId,
+  listMsg,
+  userLoginId,
+}: {
+  roomId: string;
+  listMsg: any[];
+  userLoginId: string;
+}) {
   const [pesan, setPesan] = useState("");
-  const [obrolan, setObrolan] = useState<string[]>([]);
+  const [obrolan, setObrolan] = useState<any[]>(listMsg);
   const [scroll, scrollTo] = useWindowScroll();
 
   async function onSend() {
-    // setObrolan(pesan); 
-    setPesan("")
+    scrollTo({ y: -0 });
+
+    // 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);
+    //   }
+    // });
   }
 
+  // if (_.isEmpty(listMsg))
+  //   return <ComponentColab_IsEmptyData text="Belum Ada Pesan" />;
+
   return (
     <>
-      <ScrollArea>{obrolan}</ScrollArea>
+      <Box h={"78vh"}>
+        <ScrollArea h={"78vh"} scrollbarSize={2}>
+          <Box>
+            {_.isEmpty(obrolan) ? (
+              <ComponentColab_IsEmptyData text="Belum Ada Pesan" />
+            ) : (
+              <Stack>
+                {obrolan.map((e) => (
+                  <Box key={e.id}>
+                    {e?.User.id === userLoginId ? (
+                      <Group position="right">
+                        <Paper key={e.id} bg={"blue.2"} p={"sm"}>
+                          <Stack spacing={0}>
+                            <Text fw={"bold"} fz={"xs"}>
+                              {e.User.Profile.name}
+                            </Text>
+                            <Text>{e.message}</Text>
+                          </Stack>
+                        </Paper>
+                      </Group>
+                    ) : (
+                      <Group position="left">
+                        <Paper key={e.id} bg={"cyan.2"} p={"sm"} mr={"lg"}>
+                          <Stack spacing={0}>
+                            <Text fw={"bold"} fz={"xs"}>
+                              {e.User.Profile.name}
+                            </Text>
+                            <Text>{e.message}</Text>
+                          </Stack>
+                        </Paper>
+                      </Group>
+                    )}
+                  </Box>
+                ))}
+              </Stack>
+            )}
+          </Box>
+        </ScrollArea>
+      </Box>
 
-      <Affix position={{ bottom: rem(10) }} w={"100%"}>
+      <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"}>

src/app_modules/colab/detail/grup/layout.tsx

@@ -3,6 +3,7 @@
 import {
   ActionIcon,
   AppShell,
+  Box,
   Center,
   Footer,
   Grid,
@@ -16,50 +17,47 @@ import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
 import { 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";
 
 export default function LayoutColab_DetailGrupDiskusi({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const [pesan, setPesan] = useState("");
-
-  async function onSend() {
-    console.log(pesan);
-  }
   return (
     <>
-      <AppShell
-        header={<ComponentColab_HeaderTamplate title="Nama Grup Diskusi" />}
-        // footer={
-        //   <Footer height={60}>
-        //     <Stack justify="center" h={"100%"} px={"sm"}>
-        //       <Grid align="center">
-        //         <Grid.Col span={"auto"}>
-        //           <Textarea
-        //             minRows={1}
-        //             radius={"md"}
-        //             placeholder="Pesan..."
-        //             onChange={(val) => setPesan(val.currentTarget.value)}
-        //           />
-        //         </Grid.Col>
-        //         <Grid.Col span={"content"}>
-        //           <ActionIcon
-        //             variant="outline"
-        //             radius={"xl"}
-        //             size={"lg"}
-        //             onClick={() => onSend()}
-        //           >
-        //             <IconSend size={20} />
-        //           </ActionIcon>
-        //         </Grid.Col>
-        //       </Grid>
-        //     </Stack>
-        //   </Footer>
-        // }
-      >
-        {children}
-      </AppShell>
+      <Box>
+        {/* Header */}
+        <Box
+          style={{
+            zIndex: 99,
+          }}
+          w={"100%"}
+          bg={"black"}
+          pos={"fixed"}
+          top={0}
+          h={50}
+        >
+          <ComponentColab_HeaderTamplate title="Room Chat" bg={"gray.2"} />
+        </Box>
+
+        {/* Children */}
+        <Box p={"sm"} pos={"static"} h={"80vh"}>
+          <Box
+            style={{
+              height: 50,
+            }}
+          ></Box>
+          <Stack>
+            {children}
+            <Box
+              style={{
+                height: "10vh",
+              }}
+            ></Box>
+          </Stack>
+        </Box>
+      </Box>
     </>
   );
 }

src/app_modules/colab/detail/main_detail/layout.tsx

@@ -9,9 +9,11 @@ import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 export default function LayoutColab_MainDetail({
   children,
   colabId,
+  isAuthor,
 }: {
   children: React.ReactNode;
   colabId: string;
+  isAuthor: boolean;
 }) {
   return (
     <>
@@ -19,8 +21,8 @@ export default function LayoutColab_MainDetail({
         header={
           <ComponentColab_HeaderTamplate
             title="Detail"
-            icon={<IconEdit />}
-            route2={RouterColab.edit + colabId}
+            icon={isAuthor ? <IconEdit /> : ""}
+            route2={isAuthor ? RouterColab.edit + colabId : ""}
           />
         }
       >

src/app_modules/colab/detail/proyek/saya/index.tsx

@@ -2,13 +2,16 @@
 
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 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 colab_funCreateRoomChat from "@/app_modules/colab/fun/create/fun_create_room_chat";
 import { gs_colab_hot_menu } from "@/app_modules/colab/global_state";
 import {
   MODEL_COLLABORATION,
   MODEL_COLLABORATION_PARTISIPASI,
 } from "@/app_modules/colab/model/interface";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import {
   Button,
   Checkbox,
@@ -39,7 +42,10 @@ export default function Colab_DetailProyekSaya({
     <>
       <Stack px={5} spacing={"xl"}>
         <ComponentColab_DetailData data={dataColab} />
-        <CheckBoxPartisipan listPartisipan={listPartisipan} />
+        <CheckBoxPartisipan
+          listPartisipan={listPartisipan}
+          colabId={dataColab.id}
+        />
       </Stack>
     </>
   );
@@ -47,13 +53,12 @@ export default function Colab_DetailProyekSaya({
 
 function CheckBoxPartisipan({
   listPartisipan,
+  colabId,
 }: {
   listPartisipan: MODEL_COLLABORATION_PARTISIPASI[];
+  colabId: string;
 }) {
-  const router = useRouter();
   const [value, setValue] = useState<string[]>([]);
-  const [opened, { open, close }] = useDisclosure(false);
-  const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu);
 
   const listCheck = [
     {
@@ -108,56 +113,94 @@ function CheckBoxPartisipan({
     },
   ];
 
-  async function onSave() {
-    close();
-    ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Grup");
-    setHotMenu(4);
-    router.push(RouterColab.grup_diskusi);
-  }
-
   return (
     <>
       <Stack>
         {/* <pre>{JSON.stringify(listPartisipan,null,2)}</pre> */}
         <Paper withBorder shadow="lg" p={"sm"}>
-          <Text c={"red"} fz={10}>
-            *
-            <Text px={"xs"} span inherit c={"gray"}>
-              Pilih user yang akan menjadi tim proyek anda
-            </Text>
-          </Text>
-          <ScrollArea h={400}>
-            <Checkbox.Group value={value} onChange={setValue}>
-              <Stack mt="xs">
-                {listPartisipan.map((e, i) => (
-                  <Grid key={e.id} align="center">
-                    <Grid.Col span={"content"}>
-                      <Checkbox value={e.id.toString()} />
-                    </Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <ComponentColab_AuthorNameOnHeader
-                        isPembatas={true}
-                        authorName={e?.User.Profile.name}
-                        profileId={e?.User.Profile.id}
-                        imagesId={e?.User.Profile.imagesId}
-                      />
-                    </Grid.Col>
-                  </Grid>
-                ))}
-              </Stack>
-            </Checkbox.Group>
-          </ScrollArea>
+          {/* {JSON.stringify(value, null, 2)} */}
+          <Stack>
+            <Stack spacing={5}>
+              <Text c={"red"} fz={10}>
+                *
+                <Text px={"xs"} span inherit c={"gray"}>
+                  Pilih user yang akan menjadi tim proyek anda
+                </Text>
+              </Text>
+              <Text c={"red"} fz={10}>
+                *
+                <Text px={"xs"} span inherit c={"gray"}>
+                  Room chat dapat dibentuk jika ada 2 user yang dipilih
+                </Text>
+              </Text>
+            </Stack>
+            <ScrollArea h={400} offsetScrollbars>
+              <Checkbox.Group value={value} onChange={setValue}>
+                <Stack mt="xs">
+                  {listPartisipan.map((e, i) => (
+                    <Grid key={e.id} align="center">
+                      <Grid.Col span={"content"}>
+                        <Checkbox value={e.User.id} />
+                      </Grid.Col>
+                      <Grid.Col span={"auto"}>
+                        <ComponentColab_AuthorNameOnListPartisipan
+                          isPembatas={true}
+                          author={e.User}
+                          deskripsi={e.deskripsi_diri}
+                        />
+                      </Grid.Col>
+                    </Grid>
+                  ))}
+                </Stack>
+              </Checkbox.Group>
+            </ScrollArea>
+          </Stack>
         </Paper>
-        <Button
-          radius={"xl"}
-          disabled={_.isEmpty(value) ? true : false}
-          onClick={() => {
-            open();
-          }}
-        >
-          Buat Ruang Diskusi{" "}
-        </Button>
+        <ButtonAction value={value} colabId={colabId} />
       </Stack>
+    </>
+  );
+}
+
+function ButtonAction({
+  value,
+  colabId,
+}: {
+  value: string[];
+  colabId: string;
+}) {
+  const router = useRouter();
+  const [opened, { open, close }] = useDisclosure(false);
+  const [hotMenu, setHotMenu] = useAtom(gs_colab_hot_menu);
+  const [nameRoom, setNameRoom] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function onSave() {
+    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);
+      } else {
+        ComponentGlobal_NotifikasiGagal("Gagal Membuat Grup")
+      }
+    });
+  }
+
+  return (
+    <>
+      <Button
+        radius={"xl"}
+        // disabled={value.length >= 2 ? false : true}
+        onClick={() => {
+          open();
+        }}
+      >
+        Buat Ruang Diskusi{" "}
+      </Button>
 
       <Drawer
         opened={opened}
@@ -168,12 +211,24 @@ function CheckBoxPartisipan({
       >
         <Stack>
           <Title order={6}>Nama Grup Diskusi</Title>
-          <TextInput placeholder="Masukan nama grup diskusi .." radius={"xl"} />
+          <TextInput
+            placeholder="Masukan nama grup diskusi .."
+            radius={"xl"}
+            onChange={(val) => {
+              setNameRoom(val.currentTarget.value);
+            }}
+          />
           <Group grow>
             <Button radius={"xl"} onClick={close}>
               Batal
             </Button>
-            <Button radius={"xl"} color="green" onClick={() => onSave()}>
+            <Button
+              loaderPosition="center"
+              loading={loading ? true : false}
+              radius={"xl"}
+              color="green"
+              onClick={() => onSave()}
+            >
               Simpan
             </Button>
           </Group>

src/app_modules/colab/detail/proyek/saya/layout.tsx

@@ -1,20 +1,33 @@
 "use client";
 
+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/component_global/component_layout_tamplate";
 import { AppShell } from "@mantine/core";
 import { IconEdit } from "@tabler/icons-react";
 import React from "react";
 
 export default function LayoutColab_DetailProyekSaya({
   children,
+  dataColab,
 }: {
   children: React.ReactNode;
+  dataColab: MODEL_COLLABORATION;
 }) {
   return (
     <>
-      <AppShell header={<ComponentColab_HeaderTamplate title="Proyek Saya" />}>
+      <AppComponentGlobal_LayoutTamplate
+        header={
+          <ComponentColab_HeaderTamplate
+            title="Proyek Saya"
+            icon={<IconEdit />}
+            route2={RouterColab.edit + dataColab?.id}
+          />
+        }
+      >
         {children}
-      </AppShell>
+      </AppComponentGlobal_LayoutTamplate>
     </>
   );
 }