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

#style: event ui

Browse Source
This commit is contained in:
Bagasbanuna02
2024-07-18 11:17:20 +08:00
parent 38d4d04436
commit b67303d28b
6 changed files with 167 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/dev/colab/main/beranda/loading.tsx
View File

@@ -1,9 +0,0 @@
import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
export default async function Page() {
return (
<>
<ComponentGlobal_V2_LoadingPage />
</>
);
}

106
src/app_modules/colab/create/index.tsx
View File

@@ -21,6 +21,8 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal"; import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import _ from "lodash"; import _ from "lodash";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan"; import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
export default function Colab_Create({ export default function Colab_Create({
listIndustri, listIndustri,
@@ -39,6 +41,12 @@ export default function Colab_Create({
<> <>
<Stack px={"sm"}> <Stack px={"sm"}>
<TextInput <TextInput
maxLength={100}
styles={{
label: {
color: "white",
},
}}
label="Judul" label="Judul"
withAsterisk withAsterisk
placeholder="Masukan judul proyek" placeholder="Masukan judul proyek"
@@ -51,6 +59,12 @@ export default function Colab_Create({
/> />
<TextInput <TextInput
styles={{
label: {
color: "white",
},
}}
maxLength={100}
label="Lokasi" label="Lokasi"
withAsterisk withAsterisk
placeholder="Masukan lokasi proyek" placeholder="Masukan lokasi proyek"
@@ -63,6 +77,11 @@ export default function Colab_Create({
/> />
<Select <Select
styles={{
label: {
color: "white",
},
}}
placeholder="Pilih kategori industri" placeholder="Pilih kategori industri"
label="Pilih Industri" label="Pilih Industri"
withAsterisk withAsterisk
@@ -96,30 +115,55 @@ export default function Colab_Create({
}} }}
/> */} /> */}
<Textarea <Stack spacing={5}>
label="Tujuan Proyek" <Textarea
placeholder="Masukan tujuan proyek" styles={{
withAsterisk label: {
minRows={5} color: "white",
onChange={(val) => { },
setValue({ }}
...value, maxLength={500}
purpose: val.currentTarget.value, label="Tujuan Proyek"
}); placeholder="Masukan tujuan proyek"
}} withAsterisk
/> minRows={5}
onChange={(val) => {
setValue({
...value,
purpose: val.currentTarget.value,
});
}}
/>
<ComponentGlobal_InputCountDown
lengthInput={value.purpose.length}
maxInput={500}
/>
</Stack>
<Stack spacing={5}>
<Textarea
styles={{
label: {
color: "white",
},
}}
maxLength={500}
label="Keuntungan "
placeholder="Masukan keuntungan dalam proyek"
minRows={5}
onChange={(val) => {
setValue({
...value,
benefit: val.currentTarget.value,
});
}}
/>
<ComponentGlobal_InputCountDown
lengthInput={value.benefit.length}
maxInput={500}
/>
</Stack>
<Textarea
label="Keuntungan "
placeholder="Masukan keuntungan dalam proyek"
minRows={5}
onChange={(val) => {
setValue({
...value,
benefit: val.currentTarget.value,
});
}}
/>
<ButtonAction value={value as any} /> <ButtonAction value={value as any} />
</Stack> </Stack>
</> </>
@@ -154,14 +198,30 @@ function ButtonAction({ value }: { value: any }) {
}); });
} }
// console.log(value);
return ( return (
<> <>
<Button <Button
disabled={
!value.title ||
!value.lokasi ||
!value.purpose ||
!value.benefit ||
value.projectCollaborationMaster_IndustriId === 0
? true
: false
}
loaderPosition="center" loaderPosition="center"
loading={loading ? true : false} loading={loading ? true : false}
mt={"xl"} mt={"xl"}
radius={"xl"} radius={"xl"}
onClick={() => onSave()} onClick={() => onSave()}
bg={MainColor.yellow}
color={"yellow"}
style={{
transition: "0.5s",
}}
> >
Simpan Simpan
</Button> </Button>

8
src/app_modules/colab/create/layout.tsx
View File

@@ -3,6 +3,8 @@
import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate"; import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
import React from "react"; import React from "react";
import ComponentColab_HeaderTamplate from "../component/header_tamplate"; import ComponentColab_HeaderTamplate from "../component/header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
export default function LayoutColab_Create({ export default function LayoutColab_Create({
children, children,
@@ -11,11 +13,11 @@ export default function LayoutColab_Create({
}) { }) {
return ( return (
<> <>
<AppComponentGlobal_LayoutTamplate <UIGlobal_LayoutTamplate
header={<ComponentColab_HeaderTamplate title="Tambah Proyek" />} header={<UIGlobal_LayoutHeaderTamplate title="Tambah Proyek" />}
> >
{children} {children}
</AppComponentGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate>
</> </>
); );
} }

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

@@ -1,31 +1,22 @@
"use client"; "use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab"; import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
import { import {
ActionIcon, ActionIcon,
Affix, Affix,
Card, Card,
Center,
Grid,
Paper,
Stack, Stack,
Text, rem
Textarea,
Title,
rem,
} from "@mantine/core"; } from "@mantine/core";
import { useWindowScroll } from "@mantine/hooks"; import { useWindowScroll } from "@mantine/hooks";
import { IconPencilPlus } from "@tabler/icons-react"; import { IconPencilPlus } from "@tabler/icons-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import ComponentColab_CardSectionData from "../component/card_view/card_section_data"; import ComponentColab_CardSectionData from "../component/card_view/card_section_data";
import ComponentColab_SectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
import ComponentGlobal_V2_LoadingPage from "@/app_modules/_global/loading_page_v2";
import ComponentColab_CardSectionHeaderAuthorName from "../component/card_view/card_section_header_author_name"; import ComponentColab_CardSectionHeaderAuthorName from "../component/card_view/card_section_header_author_name";
import { MODEL_COLLABORATION } from "../model/interface";
import ComponentColab_JumlahPartisipan from "../component/card_view/card_section_jumlah_partisipan"; 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";
export default function Colab_Beranda({ export default function Colab_Beranda({
listData, listData,
@@ -40,7 +31,7 @@ export default function Colab_Beranda({
return ( return (
<> <>
<Affix position={{ bottom: rem(150), right: rem(30) }}> {/* <Affix position={{ bottom: rem(150), right: rem(30) }}>
<ActionIcon <ActionIcon
loading={loadingCreate ? true : false} loading={loadingCreate ? true : false}
opacity={scroll.y > 0 ? 0.5 : ""} opacity={scroll.y > 0 ? 0.5 : ""}
@@ -58,7 +49,9 @@ export default function Colab_Beranda({
> >
<IconPencilPlus color="white" /> <IconPencilPlus color="white" />
</ActionIcon> </ActionIcon>
</Affix> </Affix> */}
<ComponentGlobal_CreateButton path={RouterColab.create} />
{/* <pre>{JSON.stringify(listData, null, 2)}</pre> */} {/* <pre>{JSON.stringify(listData, null, 2)}</pre> */}

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

@@ -9,20 +9,24 @@ import {
Footer, Footer,
Grid, Grid,
Indicator, Indicator,
SimpleGrid,
Stack, Stack,
Text Text,
} from "@mantine/core"; } from "@mantine/core";
import { import {
IconBell, IconBell,
IconHome, IconHome,
IconMessages, IconMessages,
IconUsersGroup IconUsersGroup,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import React, { useState } from "react"; import React, { useState } from "react";
import ComponentColab_HeaderTamplate from "../component/header_tamplate"; import ComponentColab_HeaderTamplate from "../component/header_tamplate";
import { gs_colab_hot_menu } from "../global_state"; import { gs_colab_hot_menu } from "../global_state";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
export default function LayoutColab_Main({ export default function LayoutColab_Main({
children, children,
@@ -78,51 +82,74 @@ export default function LayoutColab_Main({
return ( return (
<> <>
<AppComponentGlobal_LayoutTamplate <UIGlobal_LayoutTamplate
header={ header={
<ComponentColab_HeaderTamplate <UIGlobal_LayoutHeaderTamplate
title="Project Collaboration" title="Project Collaboration"
route={RouterHome.main_home} routerLeft={RouterHome.main_home}
// icon={<IconUsersGroup />}
// route2={RouterColab.proyek}
/> />
} }
footer={ footer={
<Footer height={"10vh"} bg={"black"}> <SimpleGrid cols={4} h={"9vh"} mx={"xs"}>
{/* {value} */} {listFooter.map((e) => (
<Stack justify="center" h={"100%"}> <Stack key={e.id} align="center" justify="center" spacing={0}>
<Grid> <ActionIcon
{listFooter.map((e) => ( // disabled={e.path === "" ? true : false}
<Grid.Col key={e.id} span={"auto"} pt={"md"}> variant="transparent"
<Center> c={hotMenu === e.id ? MainColor.yellow : "white"}
<Stack onClick={() => {
align="center" router.replace(e.path, {scroll: false});
spacing={0} setHotMenu(e.id);
onClick={() => { }}
router.replace(e.path); >
setHotMenu(e.id); {e.icon}
}} </ActionIcon>
> <Text
<ActionIcon c={hotMenu === e.id ? MainColor.yellow : "white"}
variant="transparent" fz={"xs"}
c={hotMenu === e.id ? "blue" : "white"} lineClamp={1}
> >
{e.icon} {e.name}
</ActionIcon> </Text>
<Text fz={10} c={hotMenu === e.id ? "blue" : "white"}> </Stack>
{e.name} ))}
</Text> </SimpleGrid>
</Stack>
</Center> // <Footer height={"10vh"} bg={"black"}>
</Grid.Col> // {/* {value} */}
))} // <Stack justify="center" h={"100%"}>
</Grid> // <Grid>
</Stack> // {listFooter.map((e) => (
</Footer> // <Grid.Col key={e.id} span={"auto"} pt={"md"}>
// <Center>
// <Stack
// align="center"
// spacing={0}
// onClick={() => {
// router.replace(e.path);
// setHotMenu(e.id);
// }}
// >
// <ActionIcon
// variant="transparent"
// c={hotMenu === e.id ? "blue" : "white"}
// >
// {e.icon}
// </ActionIcon>
// <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
// {e.name}
// </Text>
// </Stack>
// </Center>
// </Grid.Col>
// ))}
// </Grid>
// </Stack>
// </Footer>
} }
> >
{children} {children}
</AppComponentGlobal_LayoutTamplate> </UIGlobal_LayoutTamplate>
</> </>
); );
} }

10
src/app_modules/colab/splash/index.tsx
View File

@@ -1,8 +1,9 @@
"use client"; "use client";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab"; import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { Center, Image, Paper } from "@mantine/core"; import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { IconAffiliate } from "@tabler/icons-react";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { gs_colab_hot_menu } from "../global_state"; import { gs_colab_hot_menu } from "../global_state";
@@ -15,17 +16,18 @@ export default function Colab_Splash() {
setTimeout(() => { setTimeout(() => {
setHotMenu(1); setHotMenu(1);
// setStatus("Publish"); // setStatus("Publish");
router.replace(RouterColab.beranda); router.replace(RouterColab.beranda, {scroll: false});
}, 1000); }, 1000);
}, []); }, []);
return ( return (
<> <>
<Center h={"100vh"}> {/* <Center h={"100vh"}>
<Paper p={{ base: 50, md: 60, lg: 80 }}> <Paper p={{ base: 50, md: 60, lg: 80 }}>
<Image alt="logo" src={"/aset/colab/logo.png"} /> <Image alt="logo" src={"/aset/colab/logo.png"} />
</Paper> </Paper>
</Center> </Center> */}
<UIGlobal_SplashScreen icon={<IconAffiliate size={300} />} />
</> </>
); );
} }