Project Collaboration
## feat - Buat proyek baru - Tampilan list data pada beranda - Partisipasi user lain ### No issuee
This commit is contained in:
@@ -6,13 +6,16 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_gl
|
||||
import { Card, Center, Title, Stack, Grid, Text } from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { MODEL_COLLABORATION } from "../../model/interface";
|
||||
|
||||
export default function ComponentColab_CardSectionData({
|
||||
colabId,
|
||||
path,
|
||||
data,
|
||||
}: {
|
||||
colabId?: any;
|
||||
path?: any;
|
||||
data?: MODEL_COLLABORATION;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
|
||||
@@ -30,7 +33,7 @@ export default function ComponentColab_CardSectionData({
|
||||
>
|
||||
<Center px={"md"} mb={"lg"}>
|
||||
<Title order={5} lineClamp={1}>
|
||||
Judul Proyek{" "}
|
||||
{data?.title ? data.title : "Judul Proyek"}
|
||||
</Title>
|
||||
</Center>
|
||||
<Stack spacing={"xs"}>
|
||||
@@ -44,7 +47,11 @@ export default function ComponentColab_CardSectionData({
|
||||
<Text fz={"xs"}>:</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text fz={"xs"}>Industri</Text>
|
||||
<Text fz={"xs"} lineClamp={1}>
|
||||
{data?.ProjectCollaborationMaster_Industri.name
|
||||
? data?.ProjectCollaborationMaster_Industri?.name
|
||||
: "Industri"}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
@@ -59,7 +66,7 @@ export default function ComponentColab_CardSectionData({
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text fz={"xs"} lineClamp={1}>
|
||||
Lokasi dari proyek{" "}
|
||||
{data?.lokasi ? data?.lokasi : "Lokasi dari proyek"}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
@@ -69,10 +76,9 @@ export default function ComponentColab_CardSectionData({
|
||||
Tujuan proyek
|
||||
</Text>
|
||||
<Text lineClamp={3} fz={"xs"}>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
|
||||
repudiandae nostrum temporibus velit possimus, voluptate inventore
|
||||
recusandae hic ipsa praesentium deserunt, fuga asperiores
|
||||
doloremque amet incidunt explicabo ea eius earum.
|
||||
{data?.purpose
|
||||
? data?.purpose
|
||||
: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores odio nihil in animi expedita, suscipit excepturi pariatur totam esse officiis enim cumque. Quidem, facere aliquam. Sunt laboriosam incidunt iste amet"}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
@@ -20,13 +20,13 @@ export default function ComponentColab_CardSectionHeaderAuthorName({
|
||||
authorName?: string;
|
||||
tglPublish?: Date;
|
||||
isPembatas?: boolean;
|
||||
jumlah_partisipan?: number;
|
||||
jumlah_partisipan?: any[]
|
||||
}) {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card.Section px={"md"} pb={"md"}>
|
||||
<Card.Section px={"md"}>
|
||||
<Stack spacing={"xs"}>
|
||||
<Grid>
|
||||
<Grid.Col
|
||||
@@ -60,11 +60,13 @@ export default function ComponentColab_CardSectionHeaderAuthorName({
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"content"}>
|
||||
<Stack justify="center" h={"100%"}>
|
||||
<Text c={"gray"} fz={"xs"}>
|
||||
{jumlah_partisipan
|
||||
? jumlah_partisipan + " " + "partisipan"
|
||||
: 0 + " " + "partisipan"}
|
||||
</Text>
|
||||
{tglPublish ? (
|
||||
<Text c={"gray"} fz={"xs"}>
|
||||
{new Intl.DateTimeFormat("id-ID").format(tglPublish)}
|
||||
</Text>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import { Stack, Divider, Center, Text, Grid, Card } from "@mantine/core";
|
||||
import { IconUsersGroup } from "@tabler/icons-react";
|
||||
|
||||
export default function ComponentColab_JumlahPartisipan({
|
||||
jumlah,
|
||||
}: {
|
||||
jumlah?: any[];
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Card.Section px={"md"}>
|
||||
<Stack>
|
||||
<Divider />
|
||||
<Center>
|
||||
<Grid>
|
||||
<Grid.Col span={"content"}>
|
||||
<Text c={"gray"} fz={"xs"} fw={"bold"}>
|
||||
{jumlah?.length ? jumlah?.length : 0}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text c={"gray"} fz={"xs"} fw={"bold"}>
|
||||
Partisipan
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Center>
|
||||
</Stack>
|
||||
</Card.Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Stack, Divider, Center, Text, Grid } from "@mantine/core";
|
||||
import { IconUsersGroup } from "@tabler/icons-react";
|
||||
|
||||
export default function ComponentColab_JumlahPartisipan() {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Divider />
|
||||
<Center>
|
||||
<Grid >
|
||||
<Grid.Col span={"content"}>
|
||||
<Text c={"gray"} fz={"xs"} fw={"bold"}>
|
||||
12
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text c={"gray"} fz={"xs"} fw={"bold"}>
|
||||
Partisipan
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Center>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +1,20 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { Stack, Box, Center, Title, Grid, Text } from "@mantine/core";
|
||||
import ComponentColab_AuthorNameOnHeader from "../header_author_name";
|
||||
import { MODEL_COLLABORATION } from "../../model/interface";
|
||||
|
||||
export default function ComponentColab_DetailData() {
|
||||
export default function ComponentColab_DetailData({
|
||||
data,
|
||||
}: {
|
||||
data?: MODEL_COLLABORATION;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Center px={"md"} mb={"lg"} >
|
||||
<Title order={4}>Judul Proyek </Title>
|
||||
<Center px={"md"} mb={"lg"}>
|
||||
<Title order={4}>{data?.title ? data.title : "Judul Proyek"}</Title>
|
||||
</Center>
|
||||
<Stack spacing={"sm"}>
|
||||
<Grid>
|
||||
@@ -22,7 +27,11 @@ export default function ComponentColab_DetailData() {
|
||||
<Text fz={"sm"}>:</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text fz={"sm"}>Industri</Text>
|
||||
<Text fz={"sm"}>
|
||||
{data?.ProjectCollaborationMaster_Industri.name
|
||||
? data.ProjectCollaborationMaster_Industri.name
|
||||
: "Industri"}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
@@ -37,7 +46,7 @@ export default function ComponentColab_DetailData() {
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text fz={"sm"} lineClamp={1}>
|
||||
Lokasi dari proyek{" "}
|
||||
{data?.lokasi ? data.lokasi : " Lokasi dari proyek"}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
@@ -46,22 +55,14 @@ export default function ComponentColab_DetailData() {
|
||||
<Text fw={"bold"} fz={"sm"}>
|
||||
Tujuan proyek
|
||||
</Text>
|
||||
<Text fz={"sm"}>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
|
||||
repudiandae nostrum temporibus velit possimus, voluptate
|
||||
inventore recusandae hic ipsa praesentium deserunt, fuga
|
||||
asperiores doloremque amet incidunt explicabo ea eius earum.
|
||||
</Text>
|
||||
<Text fz={"sm"}>{data?.purpose ? data?.purpose : "-"}</Text>
|
||||
</Stack>
|
||||
<Stack spacing={5}>
|
||||
<Text fw={"bold"} fz={"sm"}>
|
||||
Keutungan
|
||||
</Text>
|
||||
<Text fz={"sm"}>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam
|
||||
repudiandae nostrum temporibus velit possimus, voluptate
|
||||
inventore recusandae hic ipsa praesentium deserunt, fuga
|
||||
asperiores doloremque amet incidunt explicabo ea eius earum.
|
||||
{data?.benefit ? data?.benefit : "-"}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
@@ -69,4 +70,4 @@ export default function ComponentColab_DetailData() {
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,29 +1,113 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { Paper, Center, Title, ScrollArea, Box, Stack } from "@mantine/core";
|
||||
import {
|
||||
Paper,
|
||||
Center,
|
||||
Title,
|
||||
ScrollArea,
|
||||
Box,
|
||||
Stack,
|
||||
Text,
|
||||
Divider,
|
||||
Button,
|
||||
} from "@mantine/core";
|
||||
import ComponentColab_AuthorNameOnHeader from "../header_author_name";
|
||||
import {
|
||||
MODEL_COLLABORATION_MASTER,
|
||||
MODEL_COLLABORATION_PARTISIPASI,
|
||||
} from "../../model/interface";
|
||||
import _ from "lodash";
|
||||
import { useState } from "react";
|
||||
import colab_funCreatePartisipan from "../../fun/create/fun_create_partisipan_by_user_id";
|
||||
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";
|
||||
|
||||
export default function ComponentColab_DetailListPartisipasiUser({
|
||||
listPartisipan,
|
||||
userLoginId,
|
||||
authorId,
|
||||
colabId,
|
||||
cekPartisipan,
|
||||
}: {
|
||||
listPartisipan?: MODEL_COLLABORATION_PARTISIPASI[];
|
||||
userLoginId?: string;
|
||||
authorId?: string;
|
||||
colabId?: string;
|
||||
cekPartisipan?: boolean;
|
||||
}) {
|
||||
const [apply, setApply] = useState(false);
|
||||
const [data, setData] = useState(listPartisipan);
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default function ComponentColab_DetailListPartisipasiUser() {
|
||||
return (
|
||||
<>
|
||||
<Paper withBorder p={"md"}>
|
||||
<Center mb={"xl"}>
|
||||
<Title order={4}>Partispasi User (12)</Title>
|
||||
</Center>{" "}
|
||||
<ScrollArea h={400}>
|
||||
<Box h={400}>
|
||||
<Stack>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Box key={i}>
|
||||
<ComponentColab_AuthorNameOnHeader isPembatas={true} />
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</ScrollArea>
|
||||
</Paper>
|
||||
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
|
||||
<Stack>
|
||||
{userLoginId !== authorId ? (
|
||||
<Center>
|
||||
<Button
|
||||
radius={"xl"}
|
||||
disabled={cekPartisipan ? true : false}
|
||||
color={cekPartisipan ? "green" : "blue"}
|
||||
onClick={() => {
|
||||
onJoin();
|
||||
}}
|
||||
>
|
||||
{cekPartisipan ? "Telah Berpartisipasi" : "Partisipasi"}
|
||||
</Button>
|
||||
</Center>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<Paper withBorder p={"md"}>
|
||||
<Stack spacing={"xl"}>
|
||||
<Center>
|
||||
<Title order={5}>Partispasi User ({data?.length})</Title>
|
||||
</Center>{" "}
|
||||
<ScrollArea h={data?.length === 0 ? 30 : 400}>
|
||||
<Box>
|
||||
<Stack>
|
||||
{data?.length === 0 ? (
|
||||
<Center>
|
||||
<Text fz={"xs"} fw={"bold"} c={"gray"}>
|
||||
Tidak ada partisipan
|
||||
</Text>
|
||||
</Center>
|
||||
) : (
|
||||
data?.map((e, i) => (
|
||||
<Box key={i}>
|
||||
<ComponentColab_AuthorNameOnHeader
|
||||
isPembatas={true}
|
||||
authorName={e?.User.Profile.name}
|
||||
imagesId={e?.User?.Profile?.imagesId}
|
||||
profileId={e?.User?.Profile?.id}
|
||||
/>
|
||||
</Box>
|
||||
))
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</ScrollArea>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user