fix: pencegahan error

Deskripsi:
- mencegah jika tidak ada data pin atau belum masukan data pin

NO Issues

src/app_modules/_global/ui/ui_drawer.tsx

@@ -28,13 +28,13 @@ export default function UIGlobal_Drawer({
   opened: boolean;
   close: () => void;
   component:
-    | {
+  | {
-        id: string;
+    id: string;
-        name: string;
+    name: string;
-        icon: string;
+    icon: string;
-        path: string;
+    path: string;
-      }[]
+  }[]
-    | any[];
+  | 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}

src/app_modules/katalog/portofolio/component/button_more_new.tsx

@@ -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}
          />
       </>
    )

src/app_modules/katalog/portofolio/ui/ui_detail_map_new.tsx

@@ -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
+                     dataPorto?.mapId === null || dataPorto?.mapId === undefined ?
-                        mapboxAccessToken={mapboxToken}
+                        <ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} /> 
-                        mapStyle={"mapbox://styles/mapbox/streets-v11"}
+                        :
-                        initialViewState={{
+                        <Map
-                           latitude: Number(dataPorto?.latitude),
+                           mapboxAccessToken={mapboxToken}
-                           longitude: Number(dataPorto?.longitude),
+                           mapStyle={"mapbox://styles/mapbox/streets-v11"}
-                           zoom: defaultMapZoom,
+                           initialViewState={{
-                        }}
+                              latitude: Number(dataPorto?.latitude),
-                        style={{
+                              longitude: Number(dataPorto?.longitude),
-                           cursor: "pointer",
+                              zoom: defaultMapZoom,
-                           width: "100%",
+                           }}
-                           height: "50vh",
-                           borderRadius: "10px",
-                        }}
-                        attributionControl={false}
-                     >
-                        <Marker
                            style={{
-                              color: "red",
-                              width: 40,
                               cursor: "pointer",
+                              width: "100%",
+                              height: "50vh",
+                              borderRadius: "10px",
                            }}
-                           latitude={Number(dataPorto?.latitude)}
+                           attributionControl={false}
-                           longitude={Number(dataPorto?.longitude)}
-                           anchor="bottom"
-                           offset={[0, 0]}
-                           scale={1}
-                           onClick={() => {
-                              setOpenDrawer(true);
-                           }}
-                           pitchAlignment="auto"
                         >
-                           <Stack spacing={0} align="center">
+                           <Marker
-                              <Avatar
+                              style={{
-                                 src={
+                                 color: "red",
-                                    dataPorto?.pinId === null
+                                 width: 40,
-                                       ? APIs.GET({ fileId: String(dataPorto?.logoId) })
+                                 cursor: "pointer",
-                                       : APIs.GET({ fileId: String(dataPorto?.pinId) })
+                              }}
-                                 }
+                              latitude={Number(dataPorto?.latitude)}
-                                 alt="Logo"
+                              longitude={Number(dataPorto?.longitude)}
-                                 style={{
+                              anchor="bottom"
-                                    border: `2px solid ${AccentColor.softblue}`,
+                              offset={[0, 0]}
-                                    backgroundColor: "white",
+                              scale={1}
-                                    borderRadius: "100%",
+                              onClick={() => {
-                                 }}
+                                 setOpenDrawer(true);
-                              />
+                              }}
-                           </Stack>
+                              pitchAlignment="auto"
-                        </Marker>
+                           >
+                              <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 />
+                           <NavigationControl />
-                        <ScaleControl position="top-left" />
+                           <ScaleControl position="top-left" />
-                        <AttributionControl
+                           <AttributionControl
-                           style={{ color: "black" }}
+                              style={{ color: "black" }}
-                           customAttribution="Map design by PT. Bali Interaktif Perkasa"
+                              customAttribution="Map design by PT. Bali Interaktif Perkasa"
-                        />
+                           />
-                     </Map>
+                        </Map>
 
                }