#style:

- UI Project Collaboration ## No Issue
2024-07-18 16:36:31 +08:00
parent b67303d28b
commit 8fa3f0332d
48 changed files with 1140 additions and 1071 deletions
--- a/src/app_modules/colab/component/card_view/card_beranda.tsx
+++ b/src/app_modules/colab/component/card_view/card_beranda.tsx
@@ -0,0 +1,53 @@
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { Card, Stack } from "@mantine/core";
+import { MODEL_COLLABORATION } from "../../model/interface";
+import ComponentColab_CardSectionData from "./card_section_data";
+import ComponentColab_CardSectionHeaderAuthorName from "./card_section_header_author_name";
+import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentColab_CardBeranda({
+  data,
+  userLoginId,
+}: {
+  data: MODEL_COLLABORATION;
+  userLoginId: string;
+}) {
+  const router = useRouter();
+  const [loadingCreate, setLoadingCreate] = useState(false);
+  
+  return (
+    <>
+      <Card
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+      >
+        <Stack>
+          <ComponentColab_CardSectionHeaderAuthorName
+            authorName={data?.Author?.Profile?.name}
+            imagesId={data?.Author?.Profile?.imagesId}
+            profileId={data?.Author?.Profile?.id}
+            isAuthor={userLoginId === data.Author.id ? true : false}
+            colabId={data.id}
+          />
+          <ComponentColab_CardSectionData
+            colabId={data.id}
+            path={RouterColab.main_detail}
+            data={data}
+          />
+          <ComponentColab_JumlahPartisipan
+            jumlah={data.ProjectCollaboration_Partisipasi}
+          />
+        </Stack>
+      </Card>
+    </>
+  );
+}
--- a/src/app_modules/colab/component/card_view/card_proyek_saya.tsx
+++ b/src/app_modules/colab/component/card_view/card_proyek_saya.tsx
@@ -0,0 +1,34 @@
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { Card, Stack } from "@mantine/core";
+import ComponentColab_CardSectionData from "./card_section_data";
+import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
+import { MODEL_COLLABORATION } from "../../model/interface";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+
+export function ComponentColab_CardProyekSaya({data, path}: {data: MODEL_COLLABORATION, path: string}) {
+    return (
+      <>
+        <Card
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            borderRadius: "10px",
+            border: `2px solid ${AccentColor.blue}`,
+            color: "white",
+            marginBottom: "15px",
+          }}
+        >
+          <Stack>
+            <ComponentColab_CardSectionData
+              colabId={data.id}
+              path={path}
+              data={data}
+            />
+            <ComponentColab_JumlahPartisipan
+              jumlah={data.ProjectCollaboration_Partisipasi}
+            />
+          </Stack>
+        </Card>
+      </>
+    );
+}
--- a/src/app_modules/colab/component/card_view/card_section_data.tsx
+++ b/src/app_modules/colab/component/card_view/card_section_data.tsx
@@ -1,11 +1,8 @@
 "use client";

-import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { Card, Center, Title, Stack, Grid, Text } from "@mantine/core";
+import { Card, Center, Grid, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
 import { MODEL_COLLABORATION } from "../../model/interface";

 export default function ComponentColab_CardSectionData({
--- a/src/app_modules/colab/component/card_view/card_section_header_author_name.tsx
+++ b/src/app_modules/colab/component/card_view/card_section_header_author_name.tsx
@@ -19,6 +19,7 @@ import { IconDots, IconEdit } from "@tabler/icons-react";
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import { useDisclosure } from "@mantine/hooks";
 import { useState } from "react";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";

 export default function ComponentColab_CardSectionHeaderAuthorName({
  profileId,
@@ -93,10 +94,20 @@ function ButtonAction({
  colabId: string;
 }) {
  const router = useRouter();
-  const [opened, setOpened] = useState(false);
+  const [openDrawe, setOpenDrawer] = useState(false);
+
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit Proyek",
+      icon: <IconEdit />,
+      path: RouterColab.edit + colabId,
+    },
+  ];
+
  return (
    <>
-      <Menu
+      {/* <Menu
        opened={opened}
        onChange={setOpened}
        position="left-start"
@@ -122,7 +133,17 @@ function ButtonAction({
            Edit
          </Menu.Item>
        </Menu.Dropdown>
-      </Menu>
+      </Menu> */}
+
+      <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
+        {isAuthor ? <IconDots size={20} color="white" /> : ""}
+      </ActionIcon>
+
+      <UIGlobal_Drawer
+        opened={openDrawe}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
    </>
  );
 }
--- a/src/app_modules/colab/component/card_view/card_semua_partisipan.tsx
+++ b/src/app_modules/colab/component/card_view/card_semua_partisipan.tsx
@@ -0,0 +1,49 @@
+import { Card, Stack } from "@mantine/core";
+import {
+  MODEL_COLLABORATION,
+  MODEL_COLLABORATION_PARTISIPASI,
+} from "../../model/interface";
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import ComponentColab_CardSectionData from "./card_section_data";
+import ComponentColab_CardSectionHeaderAuthorName from "./card_section_header_author_name";
+import ComponentColab_JumlahPartisipan from "./card_section_jumlah_partisipan";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+
+export function ComponentColab_CardSemuaPartisipan({
+  data,
+  path,
+}: {
+  data: MODEL_COLLABORATION_PARTISIPASI;
+  path: string;
+}) {
+  return (
+    <>
+      <Card
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
+      >
+        <Stack>
+          <ComponentColab_CardSectionHeaderAuthorName
+            authorName={data?.ProjectCollaboration.Author.Profile.name}
+            imagesId={data?.ProjectCollaboration.Author.Profile.imagesId}
+            profileId={data?.ProjectCollaboration.Author.Profile.id}
+          />
+          <ComponentColab_CardSectionData
+            colabId={data?.ProjectCollaboration.id}
+            path={path}
+            data={data?.ProjectCollaboration}
+          />
+          <ComponentColab_JumlahPartisipan
+            jumlah={data?.ProjectCollaboration.ProjectCollaboration_Partisipasi}
+          />
+        </Stack>
+      </Card>
+    </>
+  );
+}
--- a/src/app_modules/colab/component/card_view/crad_grup.tsx
+++ b/src/app_modules/colab/component/card_view/crad_grup.tsx
@@ -0,0 +1,62 @@
+import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Paper, Grid, Stack, Center, Loader, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function ComponentColab_CardGrup({ data }: { data: any }) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [idRoom, setIdRoom] = useState("");
+
+  return (
+    <>
+      <Paper
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+          borderRadius: "10px",
+          marginBottom: "20px",
+          padding: "15px",
+        }}
+        onClick={() => {
+          router.push(
+            RouterColab.group_chat + data?.ProjectCollaboration_RoomChat.id,
+            { scroll: false }
+          );
+          setIdRoom(data?.ProjectCollaboration_RoomChat.id);
+          setLoading(true);
+        }}
+      >
+        <Grid align="center" h={"100%"}>
+          <Grid.Col span={"auto"}>
+            <Stack spacing={0}>
+              <Text fw={"bold"} lineClamp={1}>
+                {data?.ProjectCollaboration_RoomChat?.name}
+              </Text>
+              <Text fz={"xs"} c={"white"}>
+                {
+                  data?.ProjectCollaboration_RoomChat
+                    ?.ProjectCollaboration_AnggotaRoomChat.length
+                }{" "}
+                Anggota
+              </Text>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col span={"content"}>
+            <Center>
+              {data?.ProjectCollaboration_RoomChat?.id === idRoom ? (
+                <ComponentGlobal_Loader />
+              ) : (
+                <IconChevronRight color="white" />
+              )}
+            </Center>
+          </Grid.Col>
+        </Grid>
+      </Paper>
+    </>
+  );
+}
--- a/src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
+++ b/src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
@@ -1,27 +1,26 @@
 "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 { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
-import { IconEyeCheck, IconZoomCheck } from "@tabler/icons-react";
+import {
+  ActionIcon,
+  Avatar,
+  Button,
+  Divider,
+  Drawer,
+  Grid,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconFileCheck } from "@tabler/icons-react";
+import { IconCaretRight, IconX } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";

 export default function ComponentColab_AuthorNameOnListPartisipan({
  author,
@@ -41,19 +40,52 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
        opened={opened}
        onClose={close}
        position="bottom"
-        size={"40vh"}
+        size={"auto"}
        withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
      >
        <Stack>
-          <Title order={6}>Deskripsi Diri</Title>
-          <Paper withBorder p={"xs"}>
+          <Group position="apart">
+            <Title order={5}>Deskripsi Diri</Title>
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
+          <Paper
+            p={"xs"}
+            style={{
+              backgroundColor: AccentColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px ",
+              color: "white",
+            }}
+          >
            <ScrollArea h={"20vh"} scrollbarSize={2}>
              <Text>{deskripsi}</Text>
            </ScrollArea>
          </Paper>
-          <Button radius={"xl"} onClick={close}>
+          {/* <Button radius={"xl"} onClick={close}>
            Tutup
-          </Button>
+          </Button> */}
        </Stack>
      </Drawer>

@@ -96,7 +128,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
                  radius={"xl"}
                  variant="transparent"
                >
-                  <IconFileCheck color={opened ? "blue" : "gray"}/>
+                  <IconCaretRight color={opened ? "blue" : "gray"} />
                </ActionIcon>
              ) : (
                ""
--- a/src/app_modules/colab/component/detail/list_partisipasi_user.tsx
+++ b/src/app_modules/colab/component/detail/list_partisipasi_user.tsx
@@ -1,31 +1,34 @@
 "use client";

 import {
-  Paper,
-  Center,
-  Title,
-  ScrollArea,
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import {
+  ActionIcon,
  Box,
+  Button,
+  Center,
+  Drawer,
+  Group,
+  Paper,
+  ScrollArea,
  Stack,
  Text,
-  Divider,
-  Button,
-  Drawer,
  Textarea,
-  Group,
+  Title
 } from "@mantine/core";
-import ComponentColab_AuthorNameOnHeader from "../header_author_name";
-import {
-  MODEL_COLLABORATION_MASTER,
-  MODEL_COLLABORATION_PARTISIPASI,
-} from "../../model/interface";
-import _ from "lodash";
+import { useDisclosure } from "@mantine/hooks";
+import { IconX } from "@tabler/icons-react";
 import { useState } from "react";
 import colab_funCreatePartisipan from "../../fun/create/fun_create_partisipan_by_user_id";
 import colab_getListPartisipanByColabId from "../../fun/get/get_list_partisipan_by_id";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { useDisclosure } from "@mantine/hooks";
+import {
+  MODEL_COLLABORATION_PARTISIPASI
+} from "../../model/interface";
 import ComponentColab_AuthorNameOnListPartisipan from "./header_author_list_partisipan";

 export default function ComponentColab_DetailListPartisipasiUser({
@@ -71,11 +74,37 @@ export default function ComponentColab_DetailListPartisipasiUser({
        opened={opened}
        onClose={close}
        position="bottom"
-        size={"30vh"}
+        size={"auto"}
        withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
      >
-        <Stack>
+        <Stack spacing={"xs"}>
+          <Group position="right">
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
          <Textarea
+          maxLength={300}
            label="Deskripsi Diri"
            placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
            minRows={4}
@@ -83,11 +112,21 @@ export default function ComponentColab_DetailListPartisipasiUser({
              setDeskripsi(val.currentTarget.value);
            }}
          />
-          <Group position="center">
-            <Button radius={"xl"} onClick={() => close()}>
+          <Group position="apart">
+            {/* <Button radius={"xl"} onClick={() => close()}>
              Batal
-            </Button>
-            <Button radius={"xl"} color="green" onClick={() => onJoin()}>
+            </Button> */}
+            <ComponentGlobal_InputCountDown lengthInput={deskripsi?.length} maxInput={300}/>
+            <Button
+              disabled={!deskripsi}
+              radius={"xl"}
+              color="yellow"
+              bg={MainColor.yellow}
+              onClick={() => onJoin()}
+              style={{
+                transition: "0.5s"
+              }}
+            >
              Simpan
            </Button>
          </Group>
@@ -100,11 +139,9 @@ export default function ComponentColab_DetailListPartisipasiUser({
            <Button
              radius={"xl"}
              disabled={cekPartisipan ? true : false}
-              color={cekPartisipan ? "green" : "blue"}
-              onClick={() => {
-                // onJoin();
-                open();
-              }}
+              color={cekPartisipan ? "green" : "yellow"}
+              onClick={open}
+              // bg={MainColor.yellow}
            >
              {cekPartisipan ? "Telah Berpartisipasi" : "Partisipasi"}
            </Button>
@@ -113,7 +150,16 @@ export default function ComponentColab_DetailListPartisipasiUser({
          ""
        )}

-        <Paper withBorder p={"md"}>
+        <Paper
+          style={{
+            border: `2px solid ${AccentColor.softblue}`,
+            backgroundColor: AccentColor.blue,
+            color: "white",
+            borderRadius: "10px",
+            marginBottom: "20px",
+            padding: "15px",
+          }}
+        >
          <Stack spacing={"xl"}>
            <Center>
              <Title order={5}>Partispasi User ({data?.length})</Title>
--- a/src/app_modules/colab/component/header_author_name.tsx
+++ b/src/app_modules/colab/component/header_author_name.tsx
@@ -22,7 +22,9 @@ export default function ComponentColab_AuthorNameOnHeader({
  const router = useRouter();
  return (
    <>
-      <Stack spacing={"xs"}>
+      <Stack spacing={"xs"} style={{
+        color: "white"
+      }}>
        <Grid>
          <Grid.Col
            span={"content"}
@@ -56,8 +58,11 @@ export default function ComponentColab_AuthorNameOnHeader({
          <Grid.Col span={"content"}>
            <Stack justify="center" h={"100%"}>
              {tglPublish ? (
-                <Text c={"gray"} fz={"xs"}>
-                  {new Intl.DateTimeFormat("id-ID").format(tglPublish)}
+                <Text fz={"xs"}>
+                  {new Intl.DateTimeFormat("id-ID", {
+                    dateStyle: "medium"
+
+                  }).format(tglPublish)}
                </Text>
              ) : (
                ""