# Project Collaboration
## feat - Tampilan beranda & detailnya - Tampilan status & detailnya - Tampilan partisipasi & detailnya - Tampilan grup diskusi & detailnya ### No issue
This commit is contained in:
@@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
|
||||
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
|
||||
import { Card, Center, Title, Stack, Grid, Text } from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ComponentColab_CardSectionData({
|
||||
colabId,
|
||||
path,
|
||||
}: {
|
||||
colabId?: any;
|
||||
path?: any;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card.Section
|
||||
px={"md"}
|
||||
onClick={() => {
|
||||
if (path) {
|
||||
router.push(path + colabId);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiPeringatan("Path tidak ditemukan");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Center px={"md"} mb={"lg"}>
|
||||
<Title order={5} lineClamp={1}>
|
||||
Judul Proyek{" "}
|
||||
</Title>
|
||||
</Center>
|
||||
<Stack spacing={"xs"}>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<Text fw={"bold"} fz={"xs"}>
|
||||
Industri
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={1}>
|
||||
<Text fz={"xs"}>:</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text fz={"xs"}>Industri</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<Text fw={"bold"} fz={"xs"}>
|
||||
Lokasi
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={1}>
|
||||
<Text fz={"xs"}>:</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text fz={"xs"} lineClamp={1}>
|
||||
Lokasi dari proyek{" "}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Stack spacing={5}>
|
||||
<Text fw={"bold"} fz={"xs"}>
|
||||
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.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card.Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
|
||||
import { Avatar, Card, Divider, Grid, Stack, Text } from "@mantine/core";
|
||||
import ComponentColab_AuthorNameOnHeader from "../header_author_name";
|
||||
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function ComponentColab_CardSectionHeaderAuthorName({
|
||||
profileId,
|
||||
imagesId,
|
||||
authorName,
|
||||
tglPublish,
|
||||
isPembatas,
|
||||
jumlah_partisipan,
|
||||
}: {
|
||||
profileId?: string;
|
||||
imagesId?: string;
|
||||
authorName?: string;
|
||||
tglPublish?: Date;
|
||||
isPembatas?: boolean;
|
||||
jumlah_partisipan?: number;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card.Section px={"md"} pb={"md"}>
|
||||
<Stack spacing={"xs"}>
|
||||
<Grid>
|
||||
<Grid.Col
|
||||
span={"content"}
|
||||
onClick={() => {
|
||||
if (profileId) {
|
||||
router.push(RouterProfile.katalog + profileId);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
size={30}
|
||||
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
|
||||
radius={"xl"}
|
||||
bg={"gray.1"}
|
||||
src={
|
||||
imagesId
|
||||
? RouterProfile.api_foto_profile + imagesId
|
||||
: "/aset/global/avatar.png"
|
||||
}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack justify="center" h={"100%"}>
|
||||
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
|
||||
{authorName ? authorName : "Nama author"}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"content"}>
|
||||
<Stack justify="center" h={"100%"}>
|
||||
<Text c={"gray"} fz={"xs"}>
|
||||
{jumlah_partisipan
|
||||
? jumlah_partisipan + " " + "partisipan"
|
||||
: 0 + " " + "partisipan"}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
{isPembatas ? <Divider /> : ""}
|
||||
</Stack>
|
||||
</Card.Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import { Center, Button } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ComponentColab_ButtonPartisipasi() {
|
||||
const [apply, setApply] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Center>
|
||||
<Button
|
||||
radius={"xl"}
|
||||
color={apply ? "green" : "blue"}
|
||||
onClick={() => {
|
||||
setApply(true);
|
||||
}}
|
||||
>
|
||||
{apply ? "Telah Berpartisipasi" : "Partisipasi"}
|
||||
</Button>
|
||||
</Center>
|
||||
</>
|
||||
);
|
||||
}
|
||||
72
src/app_modules/colab/component/detail/detail_data.tsx
Normal file
72
src/app_modules/colab/component/detail/detail_data.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
"use client"
|
||||
|
||||
import { Stack, Box, Center, Title, Grid, Text } from "@mantine/core";
|
||||
import ComponentColab_AuthorNameOnHeader from "../header_author_name";
|
||||
|
||||
export default function ComponentColab_DetailData() {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Box>
|
||||
<Center px={"md"} mb={"lg"} >
|
||||
<Title order={4}>Judul Proyek </Title>
|
||||
</Center>
|
||||
<Stack spacing={"sm"}>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<Text fw={"bold"} fz={"sm"}>
|
||||
Industri
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={1}>
|
||||
<Text fz={"sm"}>:</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text fz={"sm"}>Industri</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<Text fw={"bold"} fz={"sm"}>
|
||||
Lokasi
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={1}>
|
||||
<Text fz={"sm"}>:</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text fz={"sm"} lineClamp={1}>
|
||||
Lokasi dari proyek{" "}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Stack spacing={5}>
|
||||
<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>
|
||||
</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.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client"
|
||||
|
||||
import { Paper, Center, Title, ScrollArea, Box, Stack } from "@mantine/core";
|
||||
import ComponentColab_AuthorNameOnHeader from "../header_author_name";
|
||||
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
72
src/app_modules/colab/component/header_author_name.tsx
Normal file
72
src/app_modules/colab/component/header_author_name.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
|
||||
import { Stack, Grid, Avatar, Divider, Text, Group } from "@mantine/core";
|
||||
import { useRouter } from "next/navigation";
|
||||
import moment from "moment";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
|
||||
|
||||
export default function ComponentColab_AuthorNameOnHeader({
|
||||
profileId,
|
||||
imagesId,
|
||||
authorName,
|
||||
tglPublish,
|
||||
isPembatas,
|
||||
}: {
|
||||
profileId?: string;
|
||||
imagesId?: string;
|
||||
authorName?: string;
|
||||
tglPublish?: Date;
|
||||
isPembatas?: boolean;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<>
|
||||
<Stack spacing={"xs"}>
|
||||
<Grid>
|
||||
<Grid.Col
|
||||
span={"content"}
|
||||
onClick={() => {
|
||||
if (profileId) {
|
||||
router.push(RouterProfile.katalog + profileId);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
size={30}
|
||||
sx={{ borderStyle: "solid", borderWidth: "0.5px" }}
|
||||
radius={"xl"}
|
||||
bg={"gray.1"}
|
||||
src={
|
||||
imagesId
|
||||
? RouterProfile.api_foto_profile + imagesId
|
||||
: "/aset/global/avatar.png"
|
||||
}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Stack justify="center" h={"100%"}>
|
||||
<Text lineClamp={1} fz={"sm"} fw={"bold"}>
|
||||
{authorName ? authorName : "Nama author"}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"content"}>
|
||||
<Stack justify="center" h={"100%"}>
|
||||
{tglPublish ? (
|
||||
<Text c={"gray"} fz={"xs"}>
|
||||
{new Intl.DateTimeFormat("id-ID").format(tglPublish)}
|
||||
</Text>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
{isPembatas ? <Divider /> : ""}
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
82
src/app_modules/colab/component/header_tamplate.tsx
Normal file
82
src/app_modules/colab/component/header_tamplate.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
|
||||
import {
|
||||
Header,
|
||||
Group,
|
||||
ActionIcon,
|
||||
Text,
|
||||
Title,
|
||||
Center,
|
||||
Loader,
|
||||
} from "@mantine/core";
|
||||
import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ComponentColab_HeaderTamplate({
|
||||
hideBack,
|
||||
changeIconBack,
|
||||
route,
|
||||
route2,
|
||||
title,
|
||||
icon,
|
||||
bg,
|
||||
}: {
|
||||
hideBack?: boolean;
|
||||
changeIconBack?: any;
|
||||
route?: any;
|
||||
route2?: any;
|
||||
title: string;
|
||||
icon?: any;
|
||||
bg?: any;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
if (loading) return <ComponentGlobal_V2_LoadingPage />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
height={50}
|
||||
sx={{ borderStyle: "none" }}
|
||||
bg={bg === null ? "" : bg}
|
||||
>
|
||||
<Group h={50} position="apart" px={"md"}>
|
||||
{hideBack ? (
|
||||
<ActionIcon variant="transparent" disabled></ActionIcon>
|
||||
) : (
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
if (route === null || route === undefined) {
|
||||
return router.back();
|
||||
} else {
|
||||
return router.push(route);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{changeIconBack ? changeIconBack : <IconChevronLeft />}
|
||||
</ActionIcon>
|
||||
)}
|
||||
<Title order={5}>{title}</Title>
|
||||
{(() => {
|
||||
if (route2 === null || route2 === undefined) {
|
||||
return <ActionIcon disabled variant="transparent"></ActionIcon>;
|
||||
} else {
|
||||
return (
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
onClick={() => router.push(route2)}
|
||||
>
|
||||
{icon}
|
||||
</ActionIcon>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
</Group>
|
||||
</Header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
22
src/app_modules/colab/component/noted_box.tsx
Normal file
22
src/app_modules/colab/component/noted_box.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { Center, Grid, Group, Paper, Text, Title } from "@mantine/core";
|
||||
|
||||
export default function ComponentColab_NotedBox({
|
||||
informasi,
|
||||
}: {
|
||||
informasi: string;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Paper bg={"blue.3"} p={10}>
|
||||
<Group>
|
||||
<Text fz={10} fs={"italic"}>
|
||||
<Text span inherit c={"red"}>
|
||||
*{" "}
|
||||
</Text>
|
||||
{informasi}
|
||||
</Text>
|
||||
</Group>
|
||||
</Paper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user