Update Versi 1.5.27 #32
@@ -28,13 +28,13 @@ export default function UIGlobal_Drawer({
|
||||
opened: boolean;
|
||||
close: () => void;
|
||||
component:
|
||||
| {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
path: string;
|
||||
}[]
|
||||
| any[];
|
||||
| {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
path: string;
|
||||
}[]
|
||||
| any[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@@ -77,21 +77,28 @@ export default function UIGlobal_Drawer({
|
||||
</Group>
|
||||
<SimpleGrid cols={component.length < 4 ? component.length : 4}>
|
||||
{component.map((e, i) => (
|
||||
<Stack key={i} align="center" spacing={"xs"}>
|
||||
<Stack key={i} align="center" spacing={"xs"}
|
||||
onClick={() => {
|
||||
setPageId(e?.id);
|
||||
setIsLoading(true);
|
||||
router.push(e?.path, { scroll: false });
|
||||
}}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
c="white"
|
||||
onClick={() => {
|
||||
setPageId(e?.id);
|
||||
setIsLoading(true);
|
||||
router.push(e?.path, {scroll: false});
|
||||
}}
|
||||
>
|
||||
{isLoading && e?.id === pageId ? (
|
||||
{/* PAKE LOADING */}
|
||||
{/* {isLoading && e?.id === pageId ? (
|
||||
<ComponentGlobal_Loader />
|
||||
) : (
|
||||
e?.icon
|
||||
)}
|
||||
)} */}
|
||||
|
||||
|
||||
{/* GA PAKE LOADING */}
|
||||
{e?.icon}
|
||||
|
||||
</ActionIcon>
|
||||
<Text fz={"sm"} align="center" color="white">
|
||||
{e?.name}
|
||||
|
||||
@@ -13,6 +13,7 @@ export default function ComponentPortofolio_ButtonMoreNew() {
|
||||
const param = useParams<{ id: string }>()
|
||||
const [userLoginId, setUserLoginId] = useState("")
|
||||
const [authorId, setAuthorId] = useState("")
|
||||
const [mapId, setMapId] = useState(true)
|
||||
const [openDrawer, setOpenDrawer] = useState(false)
|
||||
|
||||
const listPage = [
|
||||
@@ -48,13 +49,48 @@ export default function ComponentPortofolio_ButtonMoreNew() {
|
||||
},
|
||||
];
|
||||
|
||||
const listPage2 = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Edit detail ",
|
||||
icon: <IconEdit />,
|
||||
path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Edit logo ",
|
||||
icon: <IconPhotoEdit />,
|
||||
path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Edit sosial media",
|
||||
icon: <IconId />,
|
||||
path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Edit data map",
|
||||
icon: <IconMapPin2 />,
|
||||
path: RouterMap.create + `${param.id}`,
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Custom pin map",
|
||||
icon: <IconMapPin />,
|
||||
path: RouterMap.custom_pin + `${param.id}`,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
async function funGetPortofolio() {
|
||||
try {
|
||||
const response = await apiGetOnePortofolioById(param.id, "bisnis")
|
||||
const response3 = await apiGetOnePortofolioById(param.id, "lokasi")
|
||||
const response2 = await funGetUserIdByToken()
|
||||
if (response.success) {
|
||||
setAuthorId(response.data.authorId)
|
||||
setMapId((response3.data?.mapId !== null && response3.data?.mapId !== undefined) ? true : false)
|
||||
setUserLoginId(response2)
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -80,7 +116,7 @@ export default function ComponentPortofolio_ButtonMoreNew() {
|
||||
<UIGlobal_Drawer
|
||||
opened={openDrawer}
|
||||
close={() => setOpenDrawer(false)}
|
||||
component={listPage}
|
||||
component={mapId ? listPage : listPage2}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { APIs } from "@/app/lib";
|
||||
import { AccentColor } from "@/app_modules/_global/color";
|
||||
import { defaultMapZoom } from "@/app_modules/map/lib/default_lat_long";
|
||||
import { Paper, Stack, Title, Avatar, Skeleton } from "@mantine/core";
|
||||
import { Paper, Stack, Title, Avatar, Skeleton, Text } from "@mantine/core";
|
||||
import "mapbox-gl/dist/mapbox-gl.css";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
@@ -10,6 +10,7 @@ import { IDetailPortofolioLokasi } from "../lib/type_portofolio";
|
||||
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
|
||||
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
|
||||
|
||||
export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: string }) {
|
||||
const [loading, setLoading] = useState(true)
|
||||
@@ -56,62 +57,65 @@ export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: stri
|
||||
loading ?
|
||||
<Skeleton radius={"md"} w={"100%"} h={100} />
|
||||
:
|
||||
<Map
|
||||
mapboxAccessToken={mapboxToken}
|
||||
mapStyle={"mapbox://styles/mapbox/streets-v11"}
|
||||
initialViewState={{
|
||||
latitude: Number(dataPorto?.latitude),
|
||||
longitude: Number(dataPorto?.longitude),
|
||||
zoom: defaultMapZoom,
|
||||
}}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
width: "100%",
|
||||
height: "50vh",
|
||||
borderRadius: "10px",
|
||||
}}
|
||||
attributionControl={false}
|
||||
>
|
||||
<Marker
|
||||
dataPorto?.mapId === null || dataPorto?.mapId === undefined ?
|
||||
<ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} />
|
||||
:
|
||||
<Map
|
||||
mapboxAccessToken={mapboxToken}
|
||||
mapStyle={"mapbox://styles/mapbox/streets-v11"}
|
||||
initialViewState={{
|
||||
latitude: Number(dataPorto?.latitude),
|
||||
longitude: Number(dataPorto?.longitude),
|
||||
zoom: defaultMapZoom,
|
||||
}}
|
||||
style={{
|
||||
color: "red",
|
||||
width: 40,
|
||||
cursor: "pointer",
|
||||
width: "100%",
|
||||
height: "50vh",
|
||||
borderRadius: "10px",
|
||||
}}
|
||||
latitude={Number(dataPorto?.latitude)}
|
||||
longitude={Number(dataPorto?.longitude)}
|
||||
anchor="bottom"
|
||||
offset={[0, 0]}
|
||||
scale={1}
|
||||
onClick={() => {
|
||||
setOpenDrawer(true);
|
||||
}}
|
||||
pitchAlignment="auto"
|
||||
attributionControl={false}
|
||||
>
|
||||
<Stack spacing={0} align="center">
|
||||
<Avatar
|
||||
src={
|
||||
dataPorto?.pinId === null
|
||||
? APIs.GET({ fileId: String(dataPorto?.logoId) })
|
||||
: APIs.GET({ fileId: String(dataPorto?.pinId) })
|
||||
}
|
||||
alt="Logo"
|
||||
style={{
|
||||
border: `2px solid ${AccentColor.softblue}`,
|
||||
backgroundColor: "white",
|
||||
borderRadius: "100%",
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</Marker>
|
||||
<Marker
|
||||
style={{
|
||||
color: "red",
|
||||
width: 40,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
latitude={Number(dataPorto?.latitude)}
|
||||
longitude={Number(dataPorto?.longitude)}
|
||||
anchor="bottom"
|
||||
offset={[0, 0]}
|
||||
scale={1}
|
||||
onClick={() => {
|
||||
setOpenDrawer(true);
|
||||
}}
|
||||
pitchAlignment="auto"
|
||||
>
|
||||
<Stack spacing={0} align="center">
|
||||
<Avatar
|
||||
src={
|
||||
dataPorto?.pinId === null
|
||||
? APIs.GET({ fileId: String(dataPorto?.logoId) })
|
||||
: APIs.GET({ fileId: String(dataPorto?.pinId) })
|
||||
}
|
||||
alt="Logo"
|
||||
style={{
|
||||
border: `2px solid ${AccentColor.softblue}`,
|
||||
backgroundColor: "white",
|
||||
borderRadius: "100%",
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</Marker>
|
||||
|
||||
<NavigationControl />
|
||||
<ScaleControl position="top-left" />
|
||||
<AttributionControl
|
||||
style={{ color: "black" }}
|
||||
customAttribution="Map design by PT. Bali Interaktif Perkasa"
|
||||
/>
|
||||
</Map>
|
||||
<NavigationControl />
|
||||
<ScaleControl position="top-left" />
|
||||
<AttributionControl
|
||||
style={{ color: "black" }}
|
||||
customAttribution="Map design by PT. Bali Interaktif Perkasa"
|
||||
/>
|
||||
</Map>
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user