wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#style:

Browse Source 
- UI Project Collaboration
## No Issue
This commit is contained in:
Bagasbanuna02
2024-07-18 16:36:31 +08:00
parent b67303d28b
commit 8fa3f0332d
48 changed files with 1140 additions and 1071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/app_modules/colab/main/beranda.tsx
View File

@@ -1,22 +1,20 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import {
ActionIcon,
Affix,
Card,
Stack,
rem
} from "@mantine/core";
import { useWindowScroll } from "@mantine/hooks";
import { IconPencilPlus } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ComponentColab_CardSectionData from "../component/card_view/card_section_data";
import ComponentColab_CardSectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
import ComponentColab_JumlahPartisipan from "../component/card_view/card_section_jumlah_partisipan";
import { MODEL_COLLABORATION } from "../model/interface";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { event_getListAllPublish } from "@/app_modules/event/fun/get/get_list_all_publish";
import {
Box,
Center,
Loader
} from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import { ComponentColab_CardBeranda } from "../component/card_view/card_beranda";
import { MODEL_COLLABORATION } from "../model/interface";
import colab_getListAllProyek from "../fun/get/get_list_all_proyek";
export default function Colab_Beranda({
listData,
@@ -25,57 +23,47 @@ export default function Colab_Beranda({
listData: MODEL_COLLABORATION[];
userLoginId: string;
}) {
const router = useRouter();
const [scroll, scrollTo] = useWindowScroll();
const [loadingCreate, setLoadingCreate] = useState(false);
const [data, setData] = useState(listData);
const [activePage, setActivePage] = useState(1);
return (
<>
{/* <Affix position={{ bottom: rem(150), right: rem(30) }}>
<ActionIcon
loading={loadingCreate ? true : false}
opacity={scroll.y > 0 ? 0.5 : ""}
style={{
transition: "0.5s",
}}
size={"xl"}
radius={"xl"}
variant="transparent"
bg={"blue"}
onClick={() => {
setLoadingCreate(true);
router.push(RouterColab.create);
}}
>
<IconPencilPlus color="white" />
</ActionIcon>
</Affix> */}
<Box>
<ComponentGlobal_CreateButton path={RouterColab.create} />
<ComponentGlobal_CreateButton path={RouterColab.create} />
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
<Box>
<ScrollOnly
height="82vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await colab_getListAllProyek({
page: activePage + 1,
});
{/* <pre>{JSON.stringify(listData, null, 2)}</pre> */}
setActivePage((val) => val + 1);
{listData.map((e, i) => (
<Card key={e.id} withBorder shadow="lg" mb={"sm"} radius={"md"}>
<Stack>
<ComponentColab_CardSectionHeaderAuthorName
authorName={e?.Author?.Profile?.name}
imagesId={e?.Author?.Profile?.imagesId}
profileId={e?.Author?.Profile?.id}
isAuthor={userLoginId === e.Author.id ? true : false}
colabId={e.id}
/>
<ComponentColab_CardSectionData
colabId={e.id}
path={RouterColab.main_detail}
data={e}
/>
<ComponentColab_JumlahPartisipan
jumlah={e.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
))}
return loadData;
}}
>
{(item) => (
<ComponentColab_CardBeranda
data={item}
userLoginId={userLoginId}
/>
)}
</ScrollOnly>
</Box>
)}
</Box>
</>
);
}

87
src/app_modules/colab/main/grup/index.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import {
Box,
Center,
Grid,
Group,
@@ -21,64 +22,52 @@ import {
import { useState } from "react";
import _ from "lodash";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import { ComponentColab_CardGrup } from "../../component/card_view/crad_grup";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { ScrollOnly } from "next-scroll-loader";
import colab_getListAllProyek from "../../fun/get/get_list_all_proyek";
import colab_getListRoomChatByAuthorId from "../../fun/get/room_chat/get_list_room_by_author_id";
export default function Colab_GrupDiskus({
listRoom,
}: {
listRoom?: MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[];
listRoom: MODEL_COLLABORATION_ANGGOTA_ROOM_CHAT[];
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [idRoom, setIdRoom] = useState("");
if (_.isEmpty(listRoom))
return <ComponentColab_IsEmptyData text="Tidak Ada Data" />;
const [data, setData] = useState(listRoom);
const [activePage, setActivePage] = useState(1);
return (
<>
<Stack>
{listRoom?.map((e, i) => (
<Paper
key={i}
withBorder
shadow="lg"
p={"md"}
onClick={() => {
router.push(
RouterColab.group_chat + e?.ProjectCollaboration_RoomChat.id
);
setIdRoom(e?.ProjectCollaboration_RoomChat.id);
setLoading(true);
}}
>
<Grid align="center" h={"100%"}>
<Grid.Col span={"auto"}>
<Stack spacing={0}>
<Text fw={"bold"} lineClamp={1}>
{e?.ProjectCollaboration_RoomChat?.name}
</Text>
<Text fz={"xs"} c={"gray"}>
{
e?.ProjectCollaboration_RoomChat
?.ProjectCollaboration_AnggotaRoomChat.length
}{" "}
Anggota
</Text>
</Stack>
</Grid.Col>
<Grid.Col span={"content"}>
<Center>
{e?.ProjectCollaboration_RoomChat?.id === idRoom ? (
<Loader color="gray" size={20} />
) : (
<IconChevronRight color="gray" />
)}
<Box>
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
<Box>
<ScrollOnly
height="82vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
</Grid.Col>
</Grid>
</Paper>
))}
</Stack>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await colab_getListRoomChatByAuthorId({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => <ComponentColab_CardGrup data={item} />}
</ScrollOnly>
</Box>
)}
</Box>
</>
);
}

26
src/app_modules/colab/main/layout.tsx
View File

@@ -66,18 +66,18 @@ export default function LayoutColab_Main({
path: RouterColab.grup_diskusi,
icon: <IconMessages />,
},
{
id: 5,
name: "Notifikasi",
path: RouterColab.notifikasi,
icon: cekNotif ? (
<Indicator processing color="orange">
<IconBell />
</Indicator>
) : (
<IconBell />
),
},
// {
// id: 5,
// name: "Notifikasi",
// path: RouterColab.notifikasi,
// icon: cekNotif ? (
// <Indicator processing color="orange">
// <IconBell />
// </Indicator>
// ) : (
// <IconBell />
// ),
// },
];
return (
@@ -90,7 +90,7 @@ export default function LayoutColab_Main({
/>
}
footer={
<SimpleGrid cols={4} h={"9vh"} mx={"xs"}>
<SimpleGrid cols={listFooter.length} h={"9vh"} mx={"xs"}>
{listFooter.map((e) => (
<Stack key={e.id} align="center" justify="center" spacing={0}>
<ActionIcon

28
src/app_modules/colab/main/proyek/index.tsx
View File

@@ -11,6 +11,7 @@ import {
MODEL_COLLABORATION,
MODEL_COLLABORATION_PARTISIPASI,
} from "../../model/interface";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
export default function Colab_Proyek({
listPartisipasiUser,
@@ -43,15 +44,36 @@ export default function Colab_Proyek({
];
return (
<Tabs variant="pills" value={activeTab} onTabChange={setActiveTab}>
<Tabs
variant="pills"
value={activeTab}
onTabChange={setActiveTab}
styles={{
tabsList: {
backgroundColor: MainColor.darkblue,
position: "sticky",
top: 0,
zIndex: 99,
},
}}
>
<Stack>
<Tabs.List grow>
{listTabs.map((e) => (
<Tabs.Tab
key={e.id}
value={e.value}
bg={activeTab === e.value ? "blue" : "gray.2"}
fw={activeTab === e.value ? "bold" : "normal"}
fw={"bold"}
c={"black"}
style={{
transition: "0.5s",
backgroundColor:
activeTab === e.value ? MainColor.yellow : "white",
border:
activeTab === e.value
? `1px solid ${AccentColor.yellow}`
: `1px solid white`,
}}
>
<Stack align="center" justify="center" spacing={0}>
{e.icon}

75
src/app_modules/colab/main/proyek/partisipasi.tsx
View File

@@ -1,50 +1,57 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { Card, Stack } from "@mantine/core";
import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
import ComponentColab_JumlahPartisipan from "../../component/card_view/card_section_jumlah_partisipan";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { Box, Center, Loader } from "@mantine/core";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import { ComponentColab_CardSemuaPartisipan } from "../../component/card_view/card_semua_partisipan";
import colab_getListPartisipasiProyekByAuthorId from "../../fun/get/pasrtisipan/get_list_partisipasi_proyek_by_author_id";
import { MODEL_COLLABORATION_PARTISIPASI } from "../../model/interface";
export default function Colab_PartisipasiProyek({
listPartisipasiUser,
}: {
listPartisipasiUser: MODEL_COLLABORATION_PARTISIPASI[];
}) {
if (_.isEmpty(listPartisipasiUser))
return <ComponentColab_IsEmptyData text="Tidak ikut berpartisipasi" />;
const [data, setData] = useState(listPartisipasiUser);
const [activePage, setActivePage] = useState(1);
return (
<>
{listPartisipasiUser.map((e, i) => (
<Card
key={i}
withBorder
shadow="lg"
mb={"lg"}
radius={"md"}
style={{ borderColor: "indigo", borderWidth: "0.5px" }}
>
<Stack>
<ComponentColab_CardSectionHeaderAuthorName
authorName={e?.ProjectCollaboration.Author.Profile.name}
imagesId={e?.ProjectCollaboration.Author.Profile.imagesId}
profileId={e?.ProjectCollaboration.Author.Profile.id}
/>
<ComponentColab_CardSectionData
colabId={e?.ProjectCollaboration.id}
path={RouterColab.detail_partisipasi_proyek}
data={e?.ProjectCollaboration}
/>
<ComponentColab_JumlahPartisipan
jumlah={e?.ProjectCollaboration.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
))}
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<Box>
<ScrollOnly
height="73vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await colab_getListPartisipasiProyekByAuthorId({
page: activePage + 1,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => (
<ComponentColab_CardSemuaPartisipan
data={item}
path={RouterColab.detail_partisipasi_proyek}
/>
)}
</ScrollOnly>
</Box>
)}
</>
);
}

64
src/app_modules/colab/main/proyek/saya.tsx
View File

@@ -1,46 +1,62 @@
"use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { Card, Stack } from "@mantine/core";
import { Box, Card, Center, Loader, Stack } from "@mantine/core";
import ComponentColab_CardSectionData from "../../component/card_view/card_section_data";
import ComponentColab_CardSectionHeaderAuthorName from "../../component/card_view/card_section_header_author_name";
import ComponentColab_JumlahPartisipan from "../../component/card_view/card_section_jumlah_partisipan";
import { MODEL_COLLABORATION } from "../../model/interface";
import _ from "lodash";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import { useState } from "react";
import { ComponentColab_CardProyekSaya } from "../../component/card_view/card_proyek_saya";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { event_getAllDraft } from "@/app_modules/event/fun/get/status/get_all_draft";
import { ScrollOnly } from "next-scroll-loader";
import colab_getListAllProyekSayaByAuthorId from "../../fun/get/pasrtisipan/get_list_proyek_saya_by_author_id";
export default function Colab_ProyekSaya({
listProyekSaya,
}: {
listProyekSaya: MODEL_COLLABORATION[];
}) {
if (_.isEmpty(listProyekSaya))
return <ComponentColab_IsEmptyData text="Tidak ada data" />;
const [data, setData] = useState(listProyekSaya);
const [activePage, setActivePage] = useState(1);
return (
<>
{listProyekSaya.map((e, i) => (
<Card
key={i}
withBorder
shadow="lg"
mb={"lg"}
radius={"md"}
style={{ borderColor: "violet", borderWidth: "0.5px" }}
>
<Stack>
<ComponentColab_CardSectionData
colabId={e.id}
path={RouterColab.detail_proyek_saya}
data={e}
{_.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<Box >
<ScrollOnly
height="73vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData}
moreData={async () => {
const loadData = await colab_getListAllProyekSayaByAuthorId({
page: activePage + 1,
});
setActivePage((val) => val + 1);
/>
<ComponentColab_JumlahPartisipan
jumlah={e.ProjectCollaboration_Partisipasi}
/>
</Stack>
</Card>
))}
return loadData;
}}
>
{(item) => (
<ComponentColab_CardProyekSaya
data={item}
path={RouterColab.detail_proyek_saya}
/>
)}
</ScrollOnly>
</Box>
)}
</>
);
}