#style: UI Katalog
Deskripsi: - UI Katalog selesai - UI Portofolio selesai - UI Profile selesa ## NO Isuuee
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
"use client"
|
||||
|
||||
import { Stack } from "@mantine/core";
|
||||
import { Portofolio_UiView } from "../portofolio/ui_portofolio";
|
||||
import { Profile_UiView } from "../profile/ui_profile";
|
||||
import { Portofolio_UiListView } from "./ui_list_portofolio";
|
||||
import { Profile_UiView } from "./ui_profile";
|
||||
import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
|
||||
import { MODEL_PROFILE } from "../profile/model/interface";
|
||||
|
||||
@@ -18,9 +18,9 @@ export function Katalog_UiView({
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Stack mb={"lg"}>
|
||||
<Profile_UiView profile={profile as any} userLoginId={userLoginId} />
|
||||
<Portofolio_UiView
|
||||
<Portofolio_UiListView
|
||||
listPorto={listPorto as any}
|
||||
profile={profile}
|
||||
userLoginId={userLoginId}
|
||||
|
||||
146
src/app_modules/katalog/ui/ui_list_portofolio.tsx
Normal file
146
src/app_modules/katalog/ui/ui_list_portofolio.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
"use cleint";
|
||||
|
||||
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
|
||||
import {
|
||||
AccentColor,
|
||||
MainColor,
|
||||
} from "@/app_modules/component_global/color/color_pallet";
|
||||
import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { IconCaretRight, IconPencilPlus } from "@tabler/icons-react";
|
||||
import _ from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { MODEL_PORTOFOLIO } from "../portofolio/model/interface";
|
||||
import { MODEL_PROFILE } from "../profile/model/interface";
|
||||
|
||||
export function Portofolio_UiListView({
|
||||
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>
|
||||
|
||||
<Stack
|
||||
style={{
|
||||
height: "auto",
|
||||
}}
|
||||
>
|
||||
{_.isEmpty(listPorto) ? (
|
||||
<Center>
|
||||
<Text fs={"italic"} fz={"xs"} c={"gray"}>
|
||||
- Belum Ada Portofolio -
|
||||
</Text>
|
||||
</Center>
|
||||
) : (
|
||||
<Stack>
|
||||
{listPorto.map((e, i) => (
|
||||
<Paper
|
||||
shadow="sm"
|
||||
key={i}
|
||||
radius={"md"}
|
||||
onClick={() => {
|
||||
setIdPorto(e?.id);
|
||||
setLoadingPorto(true);
|
||||
router.push(RouterPortofolio.main_detail + e?.id);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: MainColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px ",
|
||||
padding: "15px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Group position="apart">
|
||||
<Text fw={"bold"} lineClamp={1} w={"80%"}>
|
||||
{e?.namaBisnis}
|
||||
</Text>
|
||||
<Stack>
|
||||
{idPorto === e?.id && loadingPorto ? (
|
||||
<ComponentGlobal_UI_Loader />
|
||||
) : (
|
||||
<IconCaretRight color="white" size={25} />
|
||||
)}
|
||||
</Stack>
|
||||
</Group>
|
||||
</Paper>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
{_.isEmpty(listPorto) ? (
|
||||
""
|
||||
) : (
|
||||
<Group position="right">
|
||||
<Text
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() =>
|
||||
router.push(
|
||||
RouterPortofolio.daftar_portofolio + profile.id,
|
||||
{ scroll: false }
|
||||
)
|
||||
}
|
||||
fw={"bold"}
|
||||
fz={"sm"}
|
||||
>
|
||||
Lihat semua
|
||||
</Text>
|
||||
</Group>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
156
src/app_modules/katalog/ui/ui_profile.tsx
Normal file
156
src/app_modules/katalog/ui/ui_profile.tsx
Normal 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 "../profile/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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user