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

Fix: User search & Event

Browse Source 
Deskripsi:
- Tampilan avatar dan username
## NO Issue
This commit is contained in:
Bagasbanuna02
2024-09-30 11:01:17 +08:00
parent b13110be6f
commit ca5c30499a
80 changed files with 1764 additions and 918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/app_modules/katalog/portofolio/component/detail_data_drawer_map.tsx
View File

@@ -1,145 +0,0 @@
"use client";
import { APIs } from "@/app/lib";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
import { ComponentMap_SkeletonDrawerDetailData } from "@/app_modules/map/_component";
import { map_funGetOneById } from "@/app_modules/map/fun/get/fun_get_one_by_id";
import { MODEL_MAP } from "@/app_modules/map/lib/interface";
import {
Box,
Button,
Grid,
Group,
Image,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import {
IconBuildingSkyscraper,
IconListDetails,
IconMapPin,
IconPhoneCall,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
const router = useRouter();
const [data, setData] = useState<MODEL_MAP>();
useShallowEffect(() => {
onLoadData(mapId);
}, [mapId]);
async function onLoadData(mapId: string) {
const res: any = await map_funGetOneById({ mapId: mapId });
setData(res);
}
if (!data) return <ComponentMap_SkeletonDrawerDetailData />;
return (
<>
<Stack mt={"lg"} spacing={"xl"} px={"md"}>
<ComponentGlobal_AuthorNameOnHeader
authorName={data?.Author?.username}
imagesId={data?.Author?.Profile?.imagesId}
profileId={data?.Author?.Profile?.id}
/>
<SimpleGrid
cols={2}
spacing={"lg"}
breakpoints={[
{ maxWidth: 980, cols: 2, spacing: "md" },
{ maxWidth: 755, cols: 1, spacing: "sm" },
{ maxWidth: 600, cols: 1, spacing: "sm" },
]}
>
<ComponentGlobal_LoadImage
maw={200}
url={APIs.GET({ fileId: data?.imageId })}
/>
{/* <Image
radius={"sm"}
mah={300}
maw={200}
alt="Photo"
src={APIs.GET + data.imageId}
/> */}
<Box>
<Grid>
<Grid.Col span={2}>
<IconBuildingSkyscraper />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{data?.Portofolio.namaBisnis}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconListDetails />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{data?.Portofolio.MasterBidangBisnis.name}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconPhoneCall />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>+{data?.Portofolio.tlpn}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconMapPin />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{data?.Portofolio.alamatKantor}</Text>
</Grid.Col>
</Grid>
</Box>
</SimpleGrid>
<SimpleGrid
cols={2}
spacing={"lg"}
breakpoints={[
{ maxWidth: 980, cols: 2, spacing: "md" },
{ maxWidth: 755, cols: 1, spacing: "sm" },
{ maxWidth: 600, cols: 1, spacing: "sm" },
]}
>
<Box />
<Group position="center">
<Button
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => {
window.open(
`https://maps.google.com?q=${data?.latitude},${data?.longitude}`,
"_blank",
"width=800,height=600,noopener,noreferrer"
);
}}
>
Buka Maps
</Button>
</Group>
</SimpleGrid>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
</Stack>
</>
);
}

1
src/app_modules/katalog/portofolio/component/index.ts
View File

@@ -1,6 +1,5 @@
import { ComponentPortofolio_ButtonEditLogoBisnis } from "./button/comp_button_edit_logo_bisnis";
import { Portofolio_ComponentButtonSelanjutnya } from "./button/comp_button_selanjutnya";
export { ComponentPortofolio_DetailDataMap } from "./detail_data_drawer_map";
export { Portofolio_ComponentButtonSelanjutnya };
export { ComponentPortofolio_ButtonEditLogoBisnis };

4
src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
View File

@@ -37,9 +37,7 @@ export default function Portofolio_EditLogoBisnis({
{img ? (
<Image maw={250} alt="Image" src={img} />
) : (
<ComponentGlobal_LoadImage
url={APIs.GET({ fileId: dataPorto.logoId })}
/>
<ComponentGlobal_LoadImage fileId={dataPorto.logoId} />
)}
<Center>

14
src/app_modules/katalog/portofolio/ui/ui_detail_data.tsx
View File

@@ -63,19 +63,7 @@ export function Portofolio_UiDetailData({
>
<Box>
<Paper>
<ComponentGlobal_LoadImage
url={APIs.GET({ fileId: dataPorto.logoId })}
/>
{/* <AspectRatio ratio={1 / 1} mah={250} mx={"auto"}>
<Image
// style={{ maxHeight: 200, margin: "auto", padding: "5px" }}
alt="Foto"
h={200}
m={"auto"}
p={"xs"}
src={APIs.GET + dataPorto.logoId }
/>
</AspectRatio> */}
<ComponentGlobal_LoadImage fileId={dataPorto.logoId} />
</Paper>
</Box>

19
src/app_modules/katalog/portofolio/ui/ui_detail_logo.tsx
View File

@@ -2,6 +2,8 @@ import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { Paper, Title, AspectRatio, Image } from "@mantine/core";
import { MODEL_PORTOFOLIO } from "../model/interface";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { APIs } from "@/app/lib";
import { Profile_ComponentLoadBackgroundImage } from "../../profile/_component";
export function Portofolio_UiDetailLogo({
dataPorto,
@@ -20,17 +22,18 @@ export function Portofolio_UiDetailLogo({
color: "white",
}}
>
<Title mb={"lg"} order={6}>Logo Bisnis</Title>
<Title mb={"lg"} order={6}>
Logo Bisnis
</Title>
<AspectRatio ratio={1 / 1}>
<Profile_ComponentLoadBackgroundImage fileId={dataPorto.logoId} />
{/* <AspectRatio ratio={1 / 1}>
<Paper>
<Image
alt="Foto"
src={RouterPortofolio.api_logo_porto + `${dataPorto?.logoId}`}
/>
<Image alt="Foto" src={APIs.GET({ fileId: dataPorto.logoId })} />
</Paper>
</AspectRatio>
</AspectRatio> */}
</Paper>
</>
);
}
}

12
src/app_modules/katalog/portofolio/ui/ui_detail_map.tsx
View File

@@ -2,10 +2,13 @@
import { APIs } from "@/app/lib";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
import {
ComponentMap_DetailData,
ComponentMap_DrawerDetailData,
} from "@/app_modules/map/_component";
import { defaultMapZoom } from "@/app_modules/map/lib/default_lat_long";
import { MODEL_MAP } from "@/app_modules/map/lib/interface";
import { Avatar, Image, Paper, Stack, Title } from "@mantine/core";
import { Avatar, Paper, Stack, Title } from "@mantine/core";
import "mapbox-gl/dist/mapbox-gl.css";
import { useState } from "react";
import {
@@ -15,7 +18,6 @@ import {
NavigationControl,
ScaleControl,
} from "react-map-gl";
import { ComponentPortofolio_DetailDataMap } from "../component";
import { MODEL_PORTOFOLIO } from "../model/interface";
export function Portofolio_UiMap({
@@ -125,9 +127,9 @@ function MapView({
opened={openDrawer}
close={() => setOpenDrawer(false)}
mapId={data.id}
component={<ComponentPortofolio_DetailDataMap mapId={data.id} />}
component={<ComponentMap_DetailData mapId={data.id} isDetail />}
/>
</>
);
}
// ComponentPortofolio_DetailDataMap;

6
src/app_modules/katalog/profile/_component/button/comp_button_update_background_profile.tsx
View File

@@ -21,12 +21,15 @@ export function Profile_ComponentButtonUpdateBackgroundProfile({
const router = useRouter();
const [loading, setLoading] = useState(false);
async function onUpdate() {
setLoading(true);
const uploadFile = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.profile_background,
});
if (!uploadFile.success)
if (!uploadFile.success) {
setLoading(false);
return ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
}
const res = await profile_funUpdateBackground({
profileId: profileId,
@@ -37,6 +40,7 @@ export function Profile_ComponentButtonUpdateBackgroundProfile({
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
setLoading(false);
ComponentGlobal_NotifikasiGagal(res.message);
}
}

6
src/app_modules/katalog/profile/_component/button/comp_button_update_photo_profile.tsx
View File

@@ -23,12 +23,15 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
const router = useRouter();
const [isLoading, setLoading] = useState(false);
async function onUpdate() {
setLoading(true);
const uploadPhoto = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.profile_foto,
});
if (!uploadPhoto.success)
if (!uploadPhoto.success) {
setLoading(false);
return ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
}
const res = await profile_funUpdatePhoto({
fileId: uploadPhoto.data.id,
@@ -39,6 +42,7 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
setLoading(false);
ComponentGlobal_NotifikasiGagal(res.message);
}
}

23
src/app_modules/katalog/profile/_component/comp_load_avatar.tsx
View File

@@ -1,20 +1,25 @@
"use client";
import { APIs } from "@/app/lib";
import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { AccentColor } from "@/app_modules/_global/color";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { Avatar, Box, Center, Image, Paper, Skeleton } from "@mantine/core";
import { Avatar, Image, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { CSSProperties, useState } from "react";
export function Profile_ComponentAvatarProfile({
url,
fileId,
style,
}: {
url: string;
fileId: string;
style?: CSSProperties;
}) {
const router = useRouter();
const [isImage, setIsImage] = useState<boolean | null>(null);
const url = APIs.GET({ fileId: fileId, size: "200" });
useShallowEffect(() => {
onLoadImage();
}, []);
@@ -70,12 +75,12 @@ export function Profile_ComponentAvatarProfile({
style={style}
radius={"50%"}
size={100}
sx={{
borderStyle: "solid",
borderWidth: "0.5px",
borderColor: "white",
}}
src={url}
onClick={() =>
router.push(routerImagePreview.main({ id: fileId }), {
scroll: false,
})
}
/>
</>
);

32
src/app_modules/katalog/profile/_component/comp_load_background.tsx
View File

@@ -1,19 +1,23 @@
"use client";
import { APIs } from "@/app/lib";
import { routerImagePreview } from "@/app/lib/router_hipmi/router_image_preview";
import { AspectRatio, Box, Center, Image, Skeleton } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import { useState } from "react";
type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
export function Profile_ComponentLoadBackgroundImage({
url,
radius,
fileId,
}: {
url: string;
radius?: IRadius;
fileId: string;
}) {
const router = useRouter();
const [isImage, setIsImage] = useState<boolean | null>(null);
const url = APIs.GET({ fileId: fileId });
useShallowEffect(() => {
onLoadImage();
}, []);
@@ -35,7 +39,7 @@ export function Profile_ComponentLoadBackgroundImage({
if (!isImage)
return (
<>
<Center h={200} bg={"white"} style={{borderRadius: "10px"}} >
<Center h={200} bg={"white"} style={{ borderRadius: "10px" }}>
<Image
alt="No Image"
maw={150}
@@ -49,7 +53,23 @@ export function Profile_ComponentLoadBackgroundImage({
return (
<>
<Image height={200} radius={radius ? radius : 0} alt="Image" src={url} />
<Image
onClick={() =>
router.push(routerImagePreview.main({ id: fileId }), {
scroll: false,
})
}
style={{
borderColor: "white",
borderStyle: "solid",
borderWidth: "1px",
borderRadius: "5px",
}}
radius={5}
height={200}
alt="Image"
src={url}
/>
</>
);
}

7
src/app_modules/katalog/ui/ui_profile.tsx
View File

@@ -68,10 +68,7 @@ export function Profile_UiView({
>
<Box>
<Profile_ComponentLoadBackgroundImage
url={APIs.GET({
fileId: profile.imageBackgroundId as string,
})}
radius="sm"
fileId={profile.imageBackgroundId as any}
/>
{/* <Image
radius={"sm"}
@@ -91,7 +88,7 @@ export function Profile_UiView({
>
<Center>
<Profile_ComponentAvatarProfile
url={APIs.GET({ fileId: profile.imageId as any, size: "200" })}
fileId={profile.imageId as any}
style={{
borderStyle: "solid",
borderColor: AccentColor.darkblue,