Create Proyek Kolaborasi

# feat - Create proyek - Edit proyek - User lain join proyek - Buat gruo diskusi ## No issue
2024-04-25 12:13:08 +08:00
parent d3ea37d854
commit 2929459e95
51 changed files with 997 additions and 248 deletions
--- a/src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
+++ b/src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  Stack,
+  Grid,
+  Avatar,
+  Divider,
+  Text,
+  Group,
+  ActionIcon,
+  Drawer,
+  ScrollArea,
+  Title,
+  Paper,
+  Button,
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import moment from "moment";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { IconEyeCheck, IconZoomCheck } from "@tabler/icons-react";
+import { useDisclosure } from "@mantine/hooks";
+
+export default function ComponentColab_AuthorNameOnListPartisipan({
+  author,
+  isPembatas,
+  deskripsi,
+}: {
+  author?: MODEL_USER;
+  isPembatas?: boolean;
+  deskripsi?: string;
+}) {
+  const router = useRouter();
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <>
+      <Drawer
+        opened={opened}
+        onClose={close}
+        position="bottom"
+        size={"40vh"}
+        withCloseButton={false}
+      >
+        <Stack>
+          <Title order={6}>Deskripsi Diri</Title>
+          <Paper withBorder p={"xs"}>
+            <ScrollArea h={"20vh"} scrollbarSize={2}>
+              <Text>{deskripsi}</Text>
+            </ScrollArea>
+          </Paper>
+          <Button radius={"xl"} onClick={close}>
+            Tutup
+          </Button>
+        </Stack>
+      </Drawer>
+
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (author?.Profile.id) {
+                router.push(RouterProfile.katalog + author?.Profile.id);
+              } else {
+                ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+              }
+            }}
+          >
+            <Avatar
+              size={30}
+              sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
+              radius={"xl"}
+              bg={"gray.1"}
+              src={
+                author?.Profile.imagesId
+                  ? RouterProfile.api_foto_profile + author?.Profile.imagesId
+                  : "/aset/global/avatar.png"
+              }
+            />
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Stack justify="center" h={"100%"}>
+              <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                {author?.Profile.name ? author?.Profile.name : "Nama author"}
+              </Text>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col span={"content"}>
+            <Stack justify="center" h={"100%"}>
+              {deskripsi ? (
+                <ActionIcon
+                  onClick={() => open()}
+                  radius={"xl"}
+                  variant="transparent"
+                >
+                  <IconZoomCheck />
+                </ActionIcon>
+              ) : (
+                "Invalid Data"
+              )}
+            </Stack>
+          </Grid.Col>
+        </Grid>
+        {isPembatas ? <Divider /> : ""}
+      </Stack>
+    </>
+  );
+}
--- a/src/app_modules/colab/component/detail/list_partisipasi_user.tsx
+++ b/src/app_modules/colab/component/detail/list_partisipasi_user.tsx
@@ -10,6 +10,9 @@ import {
  Text,
  Divider,
  Button,
+  Drawer,
+  Textarea,
+  Group,
 } from "@mantine/core";
 import ComponentColab_AuthorNameOnHeader from "../header_author_name";
 import {
@@ -22,6 +25,8 @@ import colab_funCreatePartisipan from "../../fun/create/fun_create_partisipan_by
 import colab_getListPartisipanById from "../../fun/get/get_list_partisipan_by_id";
 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 { useDisclosure } from "@mantine/hooks";
+import ComponentColab_AuthorNameOnListPartisipan from "./header_author_list_partisipan";

 export default function ComponentColab_DetailListPartisipasiUser({
  listPartisipan,
@@ -38,26 +43,57 @@ export default function ComponentColab_DetailListPartisipasiUser({
 }) {
  const [apply, setApply] = useState(false);
  const [data, setData] = useState(listPartisipan);
+  const [opened, { open, close }] = useDisclosure(false);
+  const [deskripsi, setDeskripsi] = useState("");

  async function onJoin() {
-    await colab_funCreatePartisipan(colabId as any, userLoginId as any).then(
-      async (res) => {
-        if (res.status === 201) {
-          await colab_getListPartisipanById(colabId as any).then((val) => {
-            setApply(true);
-            setData(val as any);
-            ComponentGlobal_NotifikasiBerhasil(res.message);
-          });
-        } else {
-          ComponentGlobal_NotifikasiGagal(res.message);
-        }
+    await colab_funCreatePartisipan(
+      colabId as any,
+      userLoginId as any,
+      deskripsi
+    ).then(async (res) => {
+      if (res.status === 201) {
+        await colab_getListPartisipanById(colabId as any).then((val) => {
+          setApply(true);
+          close();
+          setData(val as any);
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+        });
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
      }
-    );
+    });
  }

  return (
    <>
-      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+      <Drawer
+        opened={opened}
+        onClose={close}
+        position="bottom"
+        size={"30vh"}
+        withCloseButton={false}
+      >
+        <Stack>
+          <Textarea
+            label="Deskripsi Diri"
+            placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
+            minRows={4}
+            onChange={(val) => {
+              setDeskripsi(val.currentTarget.value);
+            }}
+          />
+          <Group position="center">
+            <Button radius={"xl"} onClick={() => close()}>
+              Batal
+            </Button>
+            <Button radius={"xl"} color="green" onClick={() => onJoin()}>
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Drawer>
+
      <Stack>
        {userLoginId !== authorId ? (
          <Center>
@@ -66,7 +102,8 @@ export default function ComponentColab_DetailListPartisipasiUser({
              disabled={cekPartisipan ? true : false}
              color={cekPartisipan ? "green" : "blue"}
              onClick={() => {
-                onJoin();
+                // onJoin();
+                open();
              }}
            >
              {cekPartisipan ? "Telah Berpartisipasi" : "Partisipasi"}
@@ -93,11 +130,10 @@ export default function ComponentColab_DetailListPartisipasiUser({
                  ) : (
                    data?.map((e, i) => (
                      <Box key={i}>
-                        <ComponentColab_AuthorNameOnHeader
+                        <ComponentColab_AuthorNameOnListPartisipan
                          isPembatas={true}
-                          authorName={e?.User.Profile.name}
-                          imagesId={e?.User?.Profile?.imagesId}
-                          profileId={e?.User?.Profile?.id}
+                          author={e.User}
+                          deskripsi={e.deskripsi_diri}
                        />
                      </Box>
                    ))
--- a/src/app_modules/colab/component/header_tamplate.tsx
+++ b/src/app_modules/colab/component/header_tamplate.tsx
@@ -33,7 +33,7 @@ export default function ComponentColab_HeaderTamplate({
 }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
-  if (loading) return <ComponentGlobal_V2_LoadingPage />;
+  // if (loading) return <ComponentGlobal_V2_LoadingPage />;

  return (
    <>
@@ -47,6 +47,7 @@ export default function ComponentColab_HeaderTamplate({
            <ActionIcon variant="transparent" disabled></ActionIcon>
          ) : (
            <ActionIcon
+              loading={loading ? true : false}
              variant="transparent"
              onClick={() => {
                setLoading(true);
--- a/src/app_modules/colab/component/is_empty_data.tsx
+++ b/src/app_modules/colab/component/is_empty_data.tsx
@@ -5,7 +5,7 @@ import { Center } from "@mantine/core";
 export default function ComponentColab_IsEmptyData({ text }: { text: string }) {
  return (
    <>
-      <Center h={"50vh"} fz={"sm"} c="gray" fw={"bold"}>
+      <Center h={"50vh"} fz={"sm"} c="gray" fw={"bold"} style={{zIndex: 1}}>
        {text}
      </Center>
    </>