Create Proyek Kolaborasi

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

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>