upd: profile dan katalog
Deskripsi: - mecah dan ganti ke api No Issues
This commit is contained in:
amel
@@ -1,2 +1,4 @@
|
||||
import ViewKatalogNew from "./view_katalog_new";
|
||||
|
||||
export { Katalog_MainView } from "./view_katalog";
|
||||
export { ViewKatalogNew }
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { IListPortofolio } from './lib/type_portofolio';
|
||||
import { apiGetPortofolioByProfile } from './lib/api_portofolio';
|
||||
import CreatePortofolio from "./create/view";
|
||||
import CreatePortofolioLayout from "./create/layout";
|
||||
import PortofolioLayout from "./ui/ui_layout";
|
||||
@@ -20,6 +22,8 @@ export {
|
||||
LayoutPortofolio_EditDataBisnis,
|
||||
LayoutPortofolio_EditLogoBisnis,
|
||||
LayoutPortofolio_EditMedsosBisnis,
|
||||
apiGetPortofolioByProfile
|
||||
};
|
||||
export type { IListPortofolio };
|
||||
export { Portofolio_ViewListDetail } from "./view/view_list_detail_portofolio";
|
||||
|
||||
|
||||
4
src/app_modules/katalog/portofolio/lib/api_portofolio.ts
Normal file
4
src/app_modules/katalog/portofolio/lib/api_portofolio.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export const apiGetPortofolioByProfile = async (path?: string) => {
|
||||
const response = await fetch(`/api/new/portofolio${(path) ? path : ''}`)
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export interface IListPortofolio {
|
||||
id: string
|
||||
id_Portofolio: string
|
||||
profileId: string
|
||||
namaBisnis: string
|
||||
}
|
||||
139
src/app_modules/katalog/ui/list_portolio_new.tsx
Normal file
139
src/app_modules/katalog/ui/list_portolio_new.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import { Box, Center, Group, Paper, Skeleton, Stack, Text, Title } from "@mantine/core";
|
||||
import { apiGetPortofolioByProfile, IListPortofolio } from "../portofolio";
|
||||
import { useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import _ from "lodash";
|
||||
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
|
||||
import { IconCaretRight } from "@tabler/icons-react";
|
||||
|
||||
export default function ListPortofolioProfileNew() {
|
||||
const router = useRouter();
|
||||
const param = useParams<{ id: string }>()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [dataPortofolio, setDataPortofolio] = useState<IListPortofolio[]>([])
|
||||
|
||||
async function getPortofolio() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiGetPortofolioByProfile(`?profile=${param.id}&page=profile`)
|
||||
if (response.success) {
|
||||
setDataPortofolio(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
getPortofolio()
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px ",
|
||||
padding: "15px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Stack spacing={"sm"}>
|
||||
<Group position="center">
|
||||
<Title order={4}>Portofolio</Title>
|
||||
</Group>
|
||||
|
||||
<Stack
|
||||
style={{
|
||||
height: "auto",
|
||||
}}
|
||||
>
|
||||
{
|
||||
loading ?
|
||||
<>
|
||||
<Skeleton height={70} radius={"md"} width={"100%"} />
|
||||
<Skeleton height={70} radius={"md"} width={"100%"} />
|
||||
</>
|
||||
:
|
||||
|
||||
_.isEmpty(dataPortofolio) ? (
|
||||
<Center>
|
||||
<Text fs={"italic"} fz={"xs"} c={"gray"}>
|
||||
- Belum Ada Portofolio -
|
||||
</Text>
|
||||
</Center>
|
||||
) : (
|
||||
<Stack>
|
||||
{dataPortofolio.map((e, i) => (
|
||||
<Paper
|
||||
shadow="sm"
|
||||
key={i}
|
||||
radius={"md"}
|
||||
onClick={() => {
|
||||
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">
|
||||
<Stack spacing={0} w={"80%"}>
|
||||
<Text fw={"bold"} lineClamp={1}>
|
||||
{e?.namaBisnis}
|
||||
</Text>
|
||||
<Text fz={10} c={MainColor.yellow}>
|
||||
#{e.id_Portofolio}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<IconCaretRight color="white" size={25} />
|
||||
</Stack>
|
||||
</Group>
|
||||
</Paper>
|
||||
))}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
loading ? <></>
|
||||
:
|
||||
_.isEmpty(dataPortofolio) ? (
|
||||
""
|
||||
) : (
|
||||
<Group position="right">
|
||||
<Text
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() =>
|
||||
router.push(
|
||||
RouterPortofolio.daftar_portofolio + param.id,
|
||||
{ scroll: false }
|
||||
)
|
||||
}
|
||||
fw={"bold"}
|
||||
fz={"sm"}
|
||||
>
|
||||
Lihat semua
|
||||
</Text>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
131
src/app_modules/katalog/ui/profile_detail.tsx
Normal file
131
src/app_modules/katalog/ui/profile_detail.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import { AccentColor } from "@/app_modules/_global/color";
|
||||
import { apiGetUserProfile, IUserProfile } from "@/app_modules/user";
|
||||
import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { IconBrandGmail, IconGenderFemale, IconGenderMale, IconHome, IconPhone } from "@tabler/icons-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { Profile_ComponentAvatarProfile, Profile_ComponentLoadBackgroundImage } from "../profile/_component";
|
||||
import SkeletonProfile from "./skeleton_profile";
|
||||
|
||||
export default function ProfileDetail() {
|
||||
const param = useParams<{ id: string }>()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [dataProfile, setDataProfile] = useState<IUserProfile>()
|
||||
const listInformation = [
|
||||
{
|
||||
icon: <IconPhone />,
|
||||
value: "+" + dataProfile?.nomor,
|
||||
},
|
||||
{
|
||||
icon: <IconBrandGmail />,
|
||||
value: dataProfile?.email,
|
||||
},
|
||||
{
|
||||
icon: <IconHome />,
|
||||
value: dataProfile?.alamat,
|
||||
},
|
||||
{
|
||||
icon:
|
||||
dataProfile?.jenisKelamin === "Laki-laki" ? (
|
||||
<IconGenderMale />
|
||||
) : (
|
||||
<IconGenderFemale />
|
||||
),
|
||||
value: dataProfile?.jenisKelamin,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
async function getProfile() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiGetUserProfile(`?profile=${param.id}`)
|
||||
if (response.success) {
|
||||
setDataProfile(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
getProfile()
|
||||
}, []);
|
||||
|
||||
return <>
|
||||
<Stack
|
||||
spacing={0}
|
||||
style={{
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px ",
|
||||
padding: "15px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
{
|
||||
loading ?
|
||||
<SkeletonProfile /> :
|
||||
<>
|
||||
<Box>
|
||||
<Profile_ComponentLoadBackgroundImage
|
||||
fileId={dataProfile?.imageBackgroundId as any}
|
||||
size={500}
|
||||
/>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
bottom: 60,
|
||||
margin: "auto",
|
||||
width: "100%",
|
||||
marginBottom: -30,
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<Profile_ComponentAvatarProfile
|
||||
fileId={dataProfile?.imageId as any}
|
||||
style={{
|
||||
borderStyle: "solid",
|
||||
borderColor: AccentColor.darkblue,
|
||||
borderWidth: "2px",
|
||||
}}
|
||||
/>
|
||||
</Center>
|
||||
<Stack align="center" c={"white"} mt={"xs"} spacing={0}>
|
||||
<Text fw={"bold"} lineClamp={1}>
|
||||
{dataProfile?.name}
|
||||
</Text>
|
||||
<Text fs={"italic"} fz={"sm"} lineClamp={1}>
|
||||
@{dataProfile?.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>
|
||||
</>
|
||||
}
|
||||
</Stack>
|
||||
</>;
|
||||
}
|
||||
42
src/app_modules/katalog/ui/skeleton_profile.tsx
Normal file
42
src/app_modules/katalog/ui/skeleton_profile.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
|
||||
|
||||
export default function SkeletonProfile() {
|
||||
return (
|
||||
<>
|
||||
<Box mb={"lg"}>
|
||||
<Skeleton height={200} radius={"md"} />
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
bottom: 60,
|
||||
width: "100%",
|
||||
marginBottom: -30,
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<Avatar radius={"50%"} size={100} bg={"gray"} />
|
||||
</Center>
|
||||
</Box>
|
||||
<Stack align="center" justify="center" spacing={"xs"}>
|
||||
<Skeleton height={15} radius={"md"} width={"50%"} />
|
||||
<Skeleton height={15} radius={"md"} width={"20%"} />
|
||||
</Stack>
|
||||
|
||||
<Box mt={"lg"}>
|
||||
{[...Array(4)].map((_, index) => (
|
||||
<Box key={index} py={5}>
|
||||
<Grid align="center">
|
||||
<Grid.Col span={1}>
|
||||
<Skeleton w={25} h={25} />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={11}>
|
||||
<Skeleton w={"100%"} h={15} />
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
20
src/app_modules/katalog/view_katalog_new.tsx
Normal file
20
src/app_modules/katalog/view_katalog_new.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
'use client'
|
||||
import { Stack } from "@mantine/core";
|
||||
import ProfileDetail from "./ui/profile_detail";
|
||||
import ListPortofolioProfileNew from "./ui/list_portolio_new";
|
||||
|
||||
export default function ViewKatalogNew() {
|
||||
return (
|
||||
<>
|
||||
<Stack mb={"lg"}>
|
||||
<ProfileDetail />
|
||||
{/* <Portofolio_UiListView
|
||||
listPorto={listPorto as any}
|
||||
profile={profile}
|
||||
userLoginId={userLoginId}
|
||||
/> */}
|
||||
<ListPortofolioProfileNew />
|
||||
</Stack>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { IUserLogin } from './lib/type_user';
|
||||
import { apiGetUserLogin } from "./lib/api_user";
|
||||
import { IUserProfile } from './lib/type_user';
|
||||
import { apiGetUserProfile } from "./lib/api_user";
|
||||
|
||||
export { apiGetUserLogin };
|
||||
export type { IUserLogin };
|
||||
export { apiGetUserProfile };
|
||||
export type { IUserProfile };
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export const apiGetUserLogin = async () => {
|
||||
const response = await fetch(`/api/new/user`)
|
||||
export const apiGetUserProfile = async (path?: string) => {
|
||||
const response = await fetch(`/api/new/user${(path) ? path : ''}`)
|
||||
return await response.json().catch(() => null)
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
export interface IUserLogin {
|
||||
export interface IUserProfile {
|
||||
id: string
|
||||
username: string
|
||||
nomor: string
|
||||
|
||||
Reference in New Issue
Block a user