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

#style: UI Katalog

Browse Source 
Desc:
- Tampilan UI katalog selesai diubah
## No Issuee
This commit is contained in:
Bagasbanuna02
2024-07-10 10:11:43 +08:00
parent 9068631c33
commit 5f620c030b
29 changed files with 722 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/dev/katalog/[id]/layout.tsx
View File

@@ -1,10 +1,29 @@
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import { KatalogLayout } from "@/app_modules/katalog/main";
import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
export default async function Layout({
children,
params,
}: {
children: any;
params: { id: string };
}) {
const profileId = params.id;
const dataProfile = await Profile_getOneProfileAndUserById(profileId)
const authorId = dataProfile?.userId;
const userLoginId = await user_getOneUserId();
export default async function Layout({ children, params }: { children: any, params: {id: string} }) {
// const a = atob(params.id.toString())
return (
<>
<KatalogLayout profileId={params.id}>{children}</KatalogLayout>
<KatalogLayout
profileId={profileId}
userLoginId={userLoginId}
authorId={authorId as any}
>
{children}
</KatalogLayout>
</>
);
}

9
src/app/dev/katalog/[id]/loading.tsx
View File

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

28
src/app/dev/katalog/[id]/page.tsx
View File

@@ -1,37 +1,21 @@
import prisma from "@/app/lib/prisma";
import { KatalogView } from "@/app_modules/katalog/main";
import { url } from "inspector";
import { unsealData } from "iron-session";
import _ from "lodash";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { funGetUserProfile } from "@/app_modules/fun_global/get_user_profile";
import yaml from "yaml";
import fs from "fs";
import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import { Profile_getOneById } from "@/app_modules/katalog/profile/fun/get/get_one_profile";
import { Katalog_MainView } from "@/app_modules/katalog";
import { funGetListPortofolio } from "@/app_modules/katalog/portofolio/fun/get/get_list_portofolio";
import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
import { user_getOneByUserId } from "@/app_modules/home/fun/get/get_one_user_by_id";
const config = yaml.parse(fs.readFileSync("config.yaml").toString());
export default async function Page({ params }: { params: { id: string } }) {
let profileId = params.id;
const authorId = await user_getOneUserId();
const dataUser = await user_getOneByUserId(authorId)
const userLoginId = await user_getOneUserId();
const listPorto = await funGetListPortofolio(profileId);
const dataProfile = await Profile_getOneProfileAndUserById(profileId);
// await new Promise((a, b) => {
// setTimeout(a, 1000);
// });
return (
<>
<KatalogView
<Katalog_MainView
profile={dataProfile as any}
listPorto={listPorto as any}
userLoginId={authorId}
userLoginId={userLoginId}
/>
</>
);

4
src/app_modules/auth/index.ts
View File

@@ -2,12 +2,12 @@ import SplashScreen from "./splash/view";
import Login from "./login/view";
import Validasi from "./validasi/view";
import Register from "./register/view";
import User_Logout from "./logout/view";
import Component_Logout from "./logout/view";
export {
SplashScreen,
Login,
Validasi,
Register,
User_Logout as Logout,
Component_Logout as Logout,
};

106
src/app_modules/auth/logout/view.tsx
View File

@@ -1,6 +1,14 @@
"use client";
import { ActionIcon, Button, Group, Modal, Stack, Title } from "@mantine/core";
import {
ActionIcon,
Button,
Group,
Modal,
Stack,
Text,
Title,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import { useAtom } from "jotai";
import { gs_kodeId, gs_nomor, gs_otp } from "../state/state";
@@ -12,13 +20,13 @@ import { auth_Logout } from "../fun/fun_logout";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
import { useState } from "react";
import ComponentGlobal_UI_Modal from "@/app_modules/component_global/ui/ui_modal";
export default function User_Logout() {
export default function Component_Logout() {
const router = useRouter();
const [opened, { toggle }] = useDisclosure(false);
const [opened, setOpened] = useState(false);
const [kodeId, setKodeId] = useAtom(gs_kodeId);
const [loading, setLoading] = useState(false);
const [loading2, setLoading2] = useState(false);
async function onClickLogout() {
// await auth_Logout(kodeId).then((res) => {
@@ -36,50 +44,52 @@ export default function User_Logout() {
return (
<>
<Modal opened={opened} onClose={toggle} centered withCloseButton={false}>
<Stack>
<Title order={6}>Anda yakin ingin keluar ?</Title>
<Group align="center" position="center">
<Button
onClick={() => {
setLoading(false);
toggle();
}}
radius={50}
>
Batal
</Button>
<Button
loaderPosition="center"
loading={loading2 ? true : false}
radius={50}
bg={Warna.merah}
color="red"
onClick={() => {
setLoading2(true);
onClickLogout();
}}
>
Keluar
</Button>
</Group>
</Stack>
</Modal>
{/* <ActionIcon variant="transparent">
<IconLogout color={Warna.merah} onClick={toggle} />
</ActionIcon> */}
<Button
loading={loading ? true : false}
loaderPosition="center"
radius={"xl"}
color={"red"}
onClick={() => {
setLoading(true);
toggle();
}}
>
Logout
</Button>
<ComponentGlobal_UI_Modal
title={"Anda yakin ingin keluar ?"}
buttonKiri={
<Button
onClick={() => {
setLoading(false);
setOpened(false);
}}
radius={50}
>
Batal
</Button>
}
buttonKanan={
<Button
loaderPosition="center"
loading={loading ? true : false}
radius={50}
bg={Warna.merah}
color="red"
onClick={() => {
setLoading(true);
onClickLogout();
}}
>
Keluar
</Button>
}
opened={opened}
close={() => setOpened(false)}
/>
<Stack align="center" spacing={"xs"}>
<ActionIcon
variant="transparent"
c="white"
onClick={() => {
setOpened(true);
}}
>
<IconLogout color="red" />
</ActionIcon>
<Text fw={"bold"} align="center" color="red">
Keluar
</Text>
</Stack>
</>
);
}

2
src/app_modules/auth/register/view.tsx
View File

@@ -66,7 +66,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
if (val.status === 200) {
ComponentGlobal_NotifikasiBerhasil(res.message);
setLoading(true);
router.push(RouterHome.main_home);
router.push(RouterHome.main_home, { scroll: false });
} else {
ComponentGlobal_NotifikasiPeringatan(val.message);
}

2
src/app_modules/auth/validasi/view.tsx
View File

@@ -48,7 +48,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
if (res.role === "1") {
ComponentGlobal_NotifikasiBerhasil(res.message);
setLoading(true);
router.push(RouterHome.main_home);
router.push(RouterHome.main_home, {scroll: false});
} else {
router.push(RouterAdminDashboard.splash_admin);
}

22
src/app_modules/component_global/ui/ui_drawer.tsx
View File

@@ -12,6 +12,12 @@ import { MainColor, AccentColor } from "../color/color_pallet";
import React from "react";
import { useRouter } from "next/navigation";
interface MODEL_DRAWER {
id: string;
name: string;
icon: string;
path: string;
}
export default function ComponentGlobal_UI_Drawer({
opened,
close,
@@ -19,7 +25,7 @@ export default function ComponentGlobal_UI_Drawer({
}: {
opened: boolean;
close: () => void;
component: any[];
component: MODEL_DRAWER[] | any[];
}) {
const router = useRouter();
return (
@@ -32,10 +38,16 @@ export default function ComponentGlobal_UI_Drawer({
withCloseButton={false}
styles={{
content: {
padding: 0,
position: "absolute",
margin: "auto",
backgroundColor: "transparent",
left: 0,
right: 0,
width: 500,
},
body: {
backgroundColor: MainColor.darkblue,
backgroundColor: AccentColor.darkblue,
borderTop: `2px solid ${AccentColor.blue}`,
borderRight: `1px solid ${AccentColor.blue}`,
borderLeft: `1px solid ${AccentColor.blue}`,
@@ -51,7 +63,7 @@ export default function ComponentGlobal_UI_Drawer({
<IconX color="white" />
</ActionIcon>
</Group>
<SimpleGrid cols={4}>
<SimpleGrid cols={component.length < 4 ? component.length : 4}>
{component.map((e, i) => (
<Stack key={i} align="center" spacing={"xs"}>
<ActionIcon
@@ -61,7 +73,9 @@ export default function ComponentGlobal_UI_Drawer({
>
{e.icon}
</ActionIcon>
<Text color="white">{e.name}</Text>
<Text align="center" color="white">
{e.name}
</Text>
</Stack>
))}
</SimpleGrid>

3
src/app_modules/component_global/ui/ui_layout_tamplate.tsx
View File

@@ -27,11 +27,12 @@ export default function LayoutGlobal_UI_Tamplate({
h={"100%"}
style={{
overflowY: "auto",
overflowX: "auto",
backgroundColor: MainColor.black,
position: "fixed",
}}
>
<Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
<Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue} >
<BackgroundImage
src={"/aset/global/main_background.png"}
h={"100vh"}

4
src/app_modules/home/user_non_active/index.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { Logout } from "@/app_modules/auth";
import User_Logout from "@/app_modules/auth/logout/view";
import Component_Logout from "@/app_modules/auth/logout/view";
import { Center, Group, Skeleton, Stack, Text, Title } from "@mantine/core";
export default function Home_UserNotActive() {
@@ -44,7 +44,7 @@ export default function Home_UserNotActive() {
<Title order={4} c={"gray"}>
Tunggu Konfirmasi Admin !
</Title>
<User_Logout />
<Component_Logout />
</Stack>
</Center>
</>

4
src/app_modules/job/detail/draft/layout.tsx
View File

@@ -14,7 +14,7 @@ import {
} from "@mantine/core";
import React from "react";
import ComponentJob_HeaderTamplate from "../../component/header_tamplate";
import { IconDots, IconEdit, IconX } from "@tabler/icons-react";
import { IconDots, IconDotsVertical, IconEdit, IconX } from "@tabler/icons-react";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
@@ -54,7 +54,7 @@ export default function LayoutJob_DetailDraft({
title="Detail Draft"
iconRight={
<ActionIcon variant="transparent" onClick={() => open()}>
<IconDots color="white" />
<IconDotsVertical color="white" />
</ActionIcon>
}
// routerRight={}

44
src/app_modules/katalog/component/button_header_right.tsx Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import ComponentGlobal_UI_Drawer from "@/app_modules/component_global/ui/ui_drawer";
import { ActionIcon, Box } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import {
IconDots,
IconDotsVertical,
IconEdit,
IconPhotoEdit,
IconPolaroid,
} from "@tabler/icons-react";
import { ComponentKatalog_DrawerKatalog } from "./drawer_katalog";
export function ComponentKatalog_ButtonHeaderRight({
profileId,
userLoginId,
authorId,
}: {
profileId: string;
userLoginId: string;
authorId: string;
}) {
const [opened, { open, close }] = useDisclosure();
return (
<>
{authorId !== userLoginId ? (
<ActionIcon disabled variant="transparent"></ActionIcon>
) : (
<ActionIcon c="white" variant="transparent" onClick={() => open()}>
<IconDotsVertical />
</ActionIcon>
)}
<ComponentKatalog_DrawerKatalog
opened={opened}
close={() => close()}
profileId={profileId}
/>
</>
);
}

118
src/app_modules/katalog/component/drawer_katalog.tsx Normal file
View File

@@ -0,0 +1,118 @@
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import Component_Logout from "@/app_modules/auth/logout/view";
import { AccentColor } from "@/app_modules/component_global/color/color_pallet";
import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
import {
ActionIcon,
Drawer,
Group,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import {
IconEdit,
IconLogout,
IconLogout2,
IconPhotoEdit,
IconPolaroid,
IconX,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
export function ComponentKatalog_DrawerKatalog({
opened,
close,
profileId,
}: {
opened: boolean;
close: () => void;
profileId: string;
}) {
const router = useRouter();
const [pageId, setPageId] = useState("");
const [isLoading, setIsLoading] = useState(false);
const listPage = [
{
id: "1",
name: "Edit profile",
icon: <IconEdit />,
path: RouterProfile.edit + profileId,
},
{
id: "2",
name: "Ubah Foto Profile",
icon: <IconPhotoEdit />,
path: RouterProfile.update_foto_profile + profileId,
},
{
id: "3",
name: "Ubah Latar Belakang",
icon: <IconPolaroid />,
path: RouterProfile.update_foto_background + profileId,
},
];
return (
<>
<Drawer
opened={opened}
onClose={() => close()}
position={"bottom"}
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 spacing={"xs"}>
<Group position="right">
<ActionIcon onClick={close} variant="transparent">
<IconX color="white" />
</ActionIcon>
</Group>
<SimpleGrid cols={4}>
{listPage.map((e, i) => (
<Stack key={i} align="center" spacing={"xs"}>
<ActionIcon
variant="transparent"
c="white"
onClick={() => {
router.push(e.path);
setPageId(e?.id);
setIsLoading(true)
}}
>
{isLoading && e.id === pageId ? <ComponentGlobal_UI_Loader /> : e.icon}
</ActionIcon>
<Text align="center" color="white">
{e.name}
</Text>
</Stack>
))}
<Component_Logout />
</SimpleGrid>
</Stack>
</Drawer>
</>
);
}

3
src/app_modules/katalog/index.ts
View File

@@ -1,3 +1,4 @@
import HeaderTransparent from "./component/header_transparent";
export {HeaderTransparent as headerTransparent}
export { HeaderTransparent as headerTransparent };
export { Katalog_MainView } from "./view_katalog";

2
src/app_modules/katalog/main/index.ts
View File

@@ -1,4 +1,4 @@
import KatalogView from "./view";
import KatalogView from "./view_katalog";
import KatalogLayout from "./layout";
export {KatalogView, KatalogLayout}

103
src/app_modules/katalog/main/layout.tsx
View File

@@ -1,103 +1,38 @@
"use client";
import { Logout } from "@/app_modules/auth";
import {
ActionIcon,
AppShell,
Group,
Header,
Text,
Title,
} from "@mantine/core";
import {
IconUserSearch,
IconAward,
IconQrcode,
IconArrowLeft,
IconPencilPlus,
IconChevronLeft,
IconDashboard,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import ComponentKatalog_HeaderTamplate from "../component/header_tamplate";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { RouterHome } from "@/app/lib/router_hipmi/router_home";
import { title } from "process";
import { RouterAdminDashboard } from "@/app/lib/router_hipmi/router_admin";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import LayoutGlobal_UI_HeaderTamplate from "@/app_modules/component_global/ui/ui_header_tamplate";
import LayoutGlobal_UI_Tamplate from "@/app_modules/component_global/ui/ui_layout_tamplate";
import { ComponentKatalog_ButtonHeaderRight } from "../component/button_header_right";
export default function KatalogLayout({
children,
profileId,
userLoginId,
authorId,
}: {
children: any;
profileId: any;
userLoginId: string;
authorId: string;
}) {
const router = useRouter();
return (
<>
<AppComponentGlobal_LayoutTamplate
<LayoutGlobal_UI_Tamplate
header={
<Header height={50} sx={{ borderStyle: "none" }} bg={"black"}>
<Group h={50} position="apart" px={"md"}>
<ActionIcon
variant="transparent"
onClick={() => {
router.back();
}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5} c={"white"}>
Katalog
</Title>
<ActionIcon variant="transparent" disabled></ActionIcon>
{/* <ActionIcon
variant="transparent"
onClick={() => router.push(RouterAdminDashboard.splash_admin)}
>
<IconDashboard />
</ActionIcon> */}
</Group>
</Header>
<LayoutGlobal_UI_HeaderTamplate
title="KATALOG"
customButtonRight={
<ComponentKatalog_ButtonHeaderRight
profileId={profileId}
userLoginId={userLoginId}
authorId={authorId as any}
/>
}
/>
}
>
{children}
</AppComponentGlobal_LayoutTamplate>
</>
);
return (
<>
<AppShell
header={
<Header height={50} sx={{ borderStyle: "none" }} bg={"black"}>
<Group h={50} position="apart" px={"md"}>
<ActionIcon
variant="transparent"
onClick={() => {
router.back();
}}
>
<IconChevronLeft />
</ActionIcon>
<Title order={5} c={"white"}>
Katalog
</Title>
<ActionIcon variant="transparent" disabled></ActionIcon>
{/* <ActionIcon
variant="transparent"
onClick={() => router.push(RouterAdminDashboard.splash_admin)}
>
<IconDashboard />
</ActionIcon> */}
</Group>
</Header>
}
>
{children}
</AppShell>
</LayoutGlobal_UI_Tamplate>
</>
);
}

49
src/app_modules/katalog/main/view.tsx
View File

@@ -1,49 +0,0 @@
"use client";
import { Warna } from "@/app/lib/warna";
import {
ActionIcon,
BackgroundImage,
Box,
Center,
Flex,
Grid,
Group,
Image,
Paper,
Stack,
Text,
} from "@mantine/core";
import { ProfileView } from "../profile";
import { ListPortofolioView } from "../portofolio";
import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
import { MODEL_PORTOFOLIO_Lama } from "@/app_modules/model_global/portofolio";
import User_Logout from "@/app_modules/auth/logout/view";
import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
import { MODEL_PROFILE } from "../profile/model/interface";
export default function KatalogView({
profile,
listPorto,
userLoginId,
}: {
profile: MODEL_PROFILE;
listPorto: MODEL_PORTOFOLIO;
userLoginId: string;
}) {
return (
<>
<Stack>
<ProfileView profile={profile as any} userLoginId={userLoginId} />
<ListPortofolioView
listPorto={listPorto as any}
profile={profile}
userLoginId={userLoginId}
/>
<Stack my={"lg"} w={"100%"}>
{profile?.User.id === userLoginId ? <User_Logout /> : ""}
</Stack>
</Stack>
</>
);
}

33
src/app_modules/katalog/main/view_katalog.tsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import Component_Logout from "@/app_modules/auth/logout/view";
import {
Stack
} from "@mantine/core";
import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
import { Portofolio_UiView } from "../portofolio/ui_portofolio";
import { MODEL_PROFILE } from "../profile/model/interface";
import { Profile_UiView } from "../profile/ui_profile";
export default function KatalogView({
profile,
listPorto,
userLoginId,
}: {
profile: MODEL_PROFILE;
listPorto: MODEL_PORTOFOLIO;
userLoginId: string;
}) {
return (
<>
<Stack>
<Profile_UiView profile={profile as any} userLoginId={userLoginId} />
<Portofolio_UiView
listPorto={listPorto as any}
profile={profile}
userLoginId={userLoginId}
/>
</Stack>
</>
);
}

24
src/app_modules/katalog/portofolio/create/view.tsx
View File

@@ -1,8 +1,11 @@
"use client";
import { myConsole } from "@/app/fun/my_console";
import { ApiHipmi } from "@/app/lib/api";
import { Warna } from "@/app/lib/warna";
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import {
BIDANG_BISNIS_OLD,
MODEL_PORTOFOLIO_OLD,
@@ -16,25 +19,16 @@ import {
Paper,
Select,
Stack,
Text,
TextInput,
Textarea,
Title,
Textarea
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import _ from "lodash";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-simple-toasts";
import funCreatePortofolio from "../fun/fun_create_portofolio";
import { IconCamera } from "@tabler/icons-react";
import ComponentKatalog_NotedBox from "../../component/noted_box";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { NotifPeringatan } from "@/app_modules/donasi/component/notifikasi/notif_peringatan";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
import funCreatePortofolio from "../fun/fun_create_portofolio";
export default function CreatePortofolio({
bidangBisnis,

1
src/app_modules/katalog/portofolio/list_view/view.tsx
View File

@@ -42,7 +42,6 @@ export default function ListPortofolioView({
userLoginId: string;
}) {
const router = useRouter();
// const [porto, setPorto] = useState(listPorto);
const [loading, setLoading] = useState(false);
const [loadingPorto, setLoadingPorto] = useState(false);
const [idPorto, setIdPorto] = useState("");

141
src/app_modules/katalog/portofolio/ui_portofolio.tsx Normal file
View File

@@ -0,0 +1,141 @@
import { useRouter } from "next/navigation";
import { MODEL_PROFILE } from "../profile/model/interface";
import { MODEL_PORTOFOLIO } from "./model/interface";
import { useState } from "react";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { Warna } from "@/app/lib/warna";
import {
Paper,
Stack,
Group,
ActionIcon,
Title,
Box,
ScrollArea,
Center,
SimpleGrid,
Grid,
Loader,
Text,
} from "@mantine/core";
import { IconPencilPlus, IconCaretRight } from "@tabler/icons-react";
import _ from "lodash";
import {
AccentColor,
MainColor,
} from "@/app_modules/component_global/color/color_pallet";
import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
export function Portofolio_UiView({
listPorto,
profile,
userLoginId,
}: {
listPorto: MODEL_PORTOFOLIO[];
profile: MODEL_PROFILE;
userLoginId: string;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [loadingPorto, setLoadingPorto] = useState(false);
const [idPorto, setIdPorto] = useState("");
return (
<>
<Box
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Stack spacing={"sm"}>
<Group position="apart">
<ActionIcon variant="transparent" disabled></ActionIcon>
<Title order={4}>Portofolio</Title>
{profile?.User.id === userLoginId ? (
<ActionIcon
variant="transparent"
onClick={() => {
router.push(RouterPortofolio.create + `${profile.id}`);
setLoading(true);
}}
>
{loading ? (
<ComponentGlobal_UI_Loader />
) : (
<IconPencilPlus color={AccentColor.yellow} />
)}
</ActionIcon>
) : (
<ActionIcon variant="transparent" disabled></ActionIcon>
)}
</Group>
<Box
h={
_.isEmpty(listPorto)
? 50
: listPorto.length === 1
? 100
: listPorto.length === 2
? 150
: 200
}
>
<ScrollArea h={"100%"} scrollbarSize={10}>
{_.isEmpty(listPorto) ? (
<Center>
<Text fs={"italic"} fz={"xs"} c={"gray"}>
- Belum Ada Portofolio -
</Text>
</Center>
) : (
<SimpleGrid
cols={4}
spacing="md"
breakpoints={[
{ maxWidth: "md", cols: 3, spacing: "md" },
{ maxWidth: "sm", cols: 2, spacing: "sm" },
{ maxWidth: "xs", cols: 1, spacing: "sm" },
]}
>
{listPorto.map((e, i) => (
<Paper
shadow="sm"
key={i}
bg={"gray.5"}
radius={"md"}
onClick={() => {
setIdPorto(e?.id);
setLoadingPorto(true);
router.push(`/dev/portofolio/main/${e?.id}/`);
}}
>
<Grid align="center" p={"sm"}>
<Grid.Col span={"auto"}>
<Text fw={"bold"} lineClamp={1}>
{e?.namaBisnis}
</Text>
</Grid.Col>
<Grid.Col span={"content"}>
<Stack>
{idPorto === e?.id && loadingPorto ? (
<Loader color="gray" size={25} />
) : (
<IconCaretRight color="black" size={25} />
)}
</Stack>
</Grid.Col>
</Grid>
</Paper>
))}
</SimpleGrid>
)}
</ScrollArea>
</Box>
</Stack>
</Box>
</>
);
}

14
src/app_modules/katalog/profile/edit/view.tsx
View File

@@ -1,25 +1,17 @@
"use client";
import { myConsole } from "@/app/fun/my_console";
import { ApiHipmi } from "@/app/lib/api";
import { Warna } from "@/app/lib/warna";
import { Button, Loader, Select, Stack, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useAtom } from "jotai";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import toast from "react-simple-toasts";
import funEditProfile from "../fun/fun_edit_profile";
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import { MODEL_PROFILE } from "../model/interface";
import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { validRegex } from "../../component/regular_expressions";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
import { MODEL_PROFILE } from "../model/interface";
export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
const router = useRouter();

27
src/app_modules/katalog/profile/fun/get/get_one_user_profile.ts
View File

@@ -8,21 +8,18 @@ export async function Profile_getOneProfileAndUserById(profileId: string) {
id: profileId,
},
select: {
userId: true,
User: true,
id: true,
name: true,
email: true,
alamat: true,
jenisKelamin: true,
imagesId: true,
imagesBackgroundId: true,
ImageProfile: true,
ImagesBackground: true
}
userId: true,
User: true,
id: true,
name: true,
email: true,
alamat: true,
jenisKelamin: true,
imagesId: true,
imagesBackgroundId: true,
ImageProfile: true,
ImagesBackground: true,
},
});
// console.log(data)
return data;

16
src/app_modules/katalog/profile/index.ts
View File

@@ -2,18 +2,12 @@ import ProfileLayout from "./create/layout";
import CreateProfile from "./create/view";
import EditProfileLayout from "./edit/layout";
import EditProfileView from "./edit/view";
import ProfileView from "./main/view_profile";
import UploadFotoProfile from "./upload/foto_profile";
import UploadFotoProfileLayout from "./upload/foto_profile/layout"
import ProfileView from "./main/view";
import Profile_UpdateFotoBackground from "./upload/foto_background";
import LayoutProfile_UpdateFotoBackground from "./upload/foto_background/layout";
import UploadFotoProfileLayout from "./upload/foto_profile/layout";
export {
ProfileLayout,
CreateProfile,
EditProfileView,
EditProfileLayout,
UploadFotoProfile,
UploadFotoProfileLayout,
ProfileView
CreateProfile, EditProfileLayout, EditProfileView, ProfileLayout, ProfileView, UploadFotoProfile,
UploadFotoProfileLayout
};

11
src/app_modules/katalog/profile/main/view.tsx → src/app_modules/katalog/profile/main/view_profile.tsx
View File

@@ -31,6 +31,7 @@ import { useState } from "react";
import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { MODEL_PROFILE } from "../model/interface";
import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
export default function ProfileView({
profile,
@@ -44,16 +45,14 @@ export default function ProfileView({
const [loadingBG, setLoadingBG] = useState(false);
const [loadingEdit, setLoadingEdit] = useState(false);
// const [data, setData] = useState(profile);
// useShallowEffect(() => {
// funGetUserProfile(user.id ?? "").then(setProfile as any);
// }, []);
// if (!profile) return <></>;
return (
<>
{/* <pre>{JSON.stringify(profile, null,2)}</pre> */}
<Paper px={"md"} py={"sm"} bg={"gray.1"} shadow="lg" withBorder>
<Paper px={"md"} py={"sm"} shadow="lg" style={{
backgroundColor: MainColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
}}>
{/* Background dan foto */}
{/* Upload Background Profile */}

156
src/app_modules/katalog/profile/ui_profile.tsx Normal file
View File

@@ -0,0 +1,156 @@
"use client";
import {
MainColor,
AccentColor,
} from "@/app_modules/component_global/color/color_pallet";
import {
Avatar,
Box,
Center,
Group,
Image,
Paper,
Stack,
Text,
ThemeIcon,
} from "@mantine/core";
import { MODEL_PROFILE } from "./model/interface";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import {
IconBrandGmail,
IconGenderFemale,
IconGenderMale,
IconHome,
IconPhone,
} from "@tabler/icons-react";
export function Profile_UiView({
profile,
userLoginId,
}: {
profile: MODEL_PROFILE;
userLoginId: string;
}) {
const router = useRouter();
const [loadingPP, setLoadingPP] = useState(false);
const [loadingBG, setLoadingBG] = useState(false);
const [loadingEdit, setLoadingEdit] = useState(false);
const listInformation = [
{
icon: <IconPhone />,
value: profile?.User.nomor,
},
{
icon: <IconBrandGmail />,
value: profile?.email,
},
{
icon: <IconHome />,
value: profile?.alamat,
},
{
icon:
profile.jenisKelamin === "Laki-laki" ? (
<IconGenderMale />
) : (
<IconGenderFemale />
),
value: profile?.jenisKelamin,
},
];
return (
<>
<Stack
spacing={0}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Box>
<Image
radius={"sm"}
height={200}
alt="Background"
src={
profile?.ImagesBackground.url
? RouterProfile.api_url_background +
`${profile?.ImagesBackground.url}`
: "/aset/no-image.png"
}
/>
<Box
sx={{
position: "relative",
bottom: 60,
margin: "auto",
width: "100%",
marginBottom: -30,
}}
>
<Center>
<Avatar
bg={"gray.2"}
sx={{
borderStyle: "solid",
borderColor: "gray",
borderWidth: "0.5px",
}}
src={
profile?.ImageProfile?.url
? RouterProfile.api_url_foto +
`${profile?.ImageProfile.url}`
: "/aset/global/avatar.png"
}
size={100}
radius={"100%"}
/>
</Center>
<Stack align="center" c={"white"} mt={"xs"} spacing={0}>
<Text fw={"bold"} lineClamp={1}>
{profile?.name}
</Text>
<Text fs={"italic"} fz={"sm"} lineClamp={1}>
@{profile?.User?.username}
</Text>
</Stack>
</Box>
</Box>
<Box>
<Stack spacing={"xs"}>
{listInformation.map((e, i) => (
<Group key={i} align="flex-start">
<ThemeIcon
style={{
backgroundColor: "transparent",
}}
>
{e.icon}
</ThemeIcon>
<Box w={"85%"} >
<Text fw={"bold"}>{e?.value}</Text>
</Box>
</Group>
))}
</Stack>
</Box>
{/* <pre
style={{
color: "white",
}}
>
{JSON.stringify(profile, null, 2)}
</pre> */}
</Stack>
</>
);
}

31
src/app_modules/katalog/ui/ui_katalog.tsx Normal file
View File

@@ -0,0 +1,31 @@
"use client"
import { Stack } from "@mantine/core";
import { Portofolio_UiView } from "../portofolio/ui_portofolio";
import { Profile_UiView } from "../profile/ui_profile";
import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
import { MODEL_PROFILE } from "../profile/model/interface";
export function Katalog_UiView({
profile,
listPorto,
userLoginId,
}: {
profile: MODEL_PROFILE;
listPorto: MODEL_PORTOFOLIO;
userLoginId: string;
}) {
return (
<>
<Stack>
<Profile_UiView profile={profile as any} userLoginId={userLoginId} />
<Portofolio_UiView
listPorto={listPorto as any}
profile={profile}
userLoginId={userLoginId}
/>
</Stack>
</>
);
}

23
src/app_modules/katalog/view_katalog.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { MODEL_PORTOFOLIO } from "./portofolio/model/interface";
import { MODEL_PROFILE } from "./profile/model/interface";
import { Katalog_UiView } from "./ui/ui_katalog";
export async function Katalog_MainView({
profile,
listPorto,
userLoginId,
}: {
profile: MODEL_PROFILE;
listPorto: MODEL_PORTOFOLIO;
userLoginId: string;
}) {
return (
<>
<Katalog_UiView
listPorto={listPorto}
profile={profile}
userLoginId={userLoginId}
/>
</>
);
}

133
src/app_modules/zCoba/index.tsx
View File

@@ -2,36 +2,16 @@
import {
ActionIcon,
Affix,
BackgroundImage,
Box,
Button,
Center,
Group,
LoadingOverlay,
Paper,
ScrollArea,
SimpleGrid,
Skeleton,
Stack,
Text,
rem,
Stack
} from "@mantine/core";
import { useState } from "react";
import useInfiniteScroll, {
ScrollDirection,
} from "react-easy-infinite-scroll-hook";
import { createItems, loadMore } from "./utils";
import { v4 as uuidv4 } from "uuid";
import { useShallowEffect } from "@mantine/hooks";
import { ScrollOnly } from "next-scroll-loader";
import { IconPencilPlus } from "@tabler/icons-react";
import _ from "lodash";
import ComponentGlobal_V2_LoadingPage from "../component_global/loading_page_v2";
import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
import { Icon123, IconPencilPlus, IconX } from "@tabler/icons-react";
import { AccentColor, MainColor } from "../component_global/color/color_pallet";
const newData = Array(20)
.fill(0)
@@ -56,49 +36,16 @@ const data2 = [
];
export default function Coba_TestLoading() {
// const [data, setData] = useState<any[]>(newData);
// const [isLoading, setIsLoading] = useState(false);
// return (
// <>
// <ScrollOnly
// height="90vh"
// data={data}
// setData={setData}
// moreData={async () => {
// const newData = Array.from(
// { length: 50 },
// (_, i) => i + data.length + 1
// );
// await new Promise((resolve) => setTimeout(resolve, 2000));
// return newData;
// }}
// >
// {(item) => <div style={{height: 50}}> {item}</div>}
// </ScrollOnly>
// </>
// );
const [data, setData] = useState(data2);
const [openDrawer, setOpenDrawer] = useState(false);
return (
<>
<LayoutGlobal_UI_Tamplate>
<CreateButton />
{/* <CreateButton /> */}
<Button onClick={() => setOpenDrawer(true)}>Click</Button>
</LayoutGlobal_UI_Tamplate>
</>
);
return (
<>
<Box h={"100%"} bg={"blue"}>
{Array(50)
.fill(0)
.map((e, i) => (
<Text key={i}>{i + 1}</Text>
))}
<ComponentGlobal_V2_LoadingPage />
</Box>
</>
);
@@ -174,71 +121,3 @@ function CreateButton() {
</>
);
}
function BackgroundImageComponent() {
const footer = (
<SimpleGrid cols={4}>
{Array.from({ length: 4 }).map((e, i) => (
<Center key={i} h={"10vh"}>
<Stack align="center" c={"white"} spacing={0}>
<ActionIcon>
<IconX color="white" />
</ActionIcon>
<Text>Apa</Text>
</Stack>
</Center>
))}
</SimpleGrid>
);
return (
<>
<BackgroundImage src={"/aset/global/main_background.png"} h={"100vh"}>
{/* Header */}
<Box
h={"8vh"}
style={{
zIndex: 98,
}}
w={"100%"}
pos={"sticky"}
top={0}
>
<LayoutGlobal_UI_HeaderTamplate title="Coba" />
</Box>
{/* Children */}
<Box h={"82vh"} pos={"static"}>
<ScrollArea h={"100%"} px={"md"}>
{Array.from({ length: 10 }).map((e, i) => (
<Box bg={"blue"} key={i} mb={"md"} py={"lg"}>
{i + 1}
</Box>
))}
</ScrollArea>
</Box>
{/* Footer */}
<Box style={{ position: "relative", bottom: 0 }} bg={"red"}>
<Box
style={{
zIndex: 1,
borderRadius: "20px 20px 0px 0px",
borderTop: `2px solid ${AccentColor.blue}`,
borderRight: `1px solid ${AccentColor.blue}`,
borderLeft: `1px solid ${AccentColor.blue}`,
position: "absolute",
width: "100%",
backgroundColor: MainColor.darkblue,
}}
color="blue"
// pos={"fixed"}
// bottom={0}
h={"10vh"}
>
{footer}
</Box>
</Box>
</BackgroundImage>
</>
);
}