upd: map

Deskripsi;
- error url get di api
- api pada bussines map

No Issues

src/app/api/new/home/route.ts

@@ -1,6 +1,7 @@
 import { prisma } from "@/app/lib";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
 
 
 // GET DATA HOME

src/app/api/new/map/[id]/route.ts

@@ -0,0 +1,76 @@
+import { prisma } from "@/app/lib";
+import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
+
+export async function GET(request: Request, context: { params: { id: string } }) {
+   try {
+      const { id } = context.params
+      const data = await prisma.businessMaps.findUnique({
+         where: {
+            id: id,
+         },
+         select: {
+            namePin: true,
+            latitude: true,
+            longitude: true,
+            pinId: true,
+            imageId: true,
+            Author: {
+               select: {
+                  Profile: {
+                     select: {
+                        id: true,
+                        name: true,
+                        imageId: true,
+                     }
+                  }
+               }
+            },
+            Portofolio: {
+               select: {
+                  id: true,
+                  alamatKantor: true,
+                  tlpn: true,
+                  deskripsi: true,
+                  namaBisnis: true,
+                  MasterBidangBisnis: {
+                     select: {
+                        name: true,
+                     },
+                  },
+               },
+            },
+         }
+      });
+
+      const dataLokasi = {
+         namePin: data?.namePin,
+         latitude: data?.latitude,
+         longitude: data?.longitude,
+         pinId: data?.pinId,
+         imageId: data?.imageId,
+      }
+
+      const dataAuthor = {
+         id: data?.Author?.Profile?.id,
+         name: data?.Author?.Profile?.name,
+         imageId: data?.Author?.Profile?.imageId,
+      }
+
+      const dataBisnis = {
+         id: data?.Portofolio?.id,
+         alamatKantor: data?.Portofolio?.alamatKantor,
+         tlpn: data?.Portofolio?.tlpn,
+         deskripsi: data?.Portofolio?.deskripsi,
+         namaBisnis: data?.Portofolio?.namaBisnis,
+         bidangBisnis: data?.Portofolio?.MasterBidangBisnis?.name,
+      }
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", dataLokasi, dataAuthor, dataBisnis }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/api/new/map/route.ts

@@ -0,0 +1,40 @@
+import { prisma } from "@/app/lib";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
+
+
+// GET ALL DATA MAP
+export async function GET(request: Request) {
+   try {
+      const data = await prisma.businessMaps.findMany({
+         where: {
+            isActive: true,
+         },
+         select: {
+            id: true,
+            namePin: true,
+            latitude: true,
+            longitude: true,
+            pinId: true,
+            Portofolio: {
+               select: {
+                  logoId: true,
+               }
+            }
+         }
+      });
+
+      const dataFix = data.map((v: any) => ({
+         ..._.omit(v, ["Portofolio"]),
+         logoId: v.Portofolio.logoId
+      }))
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/api/new/portofolio/[id]/route.ts

@@ -1,6 +1,7 @@
 import { prisma } from "@/app/lib";
 import { NextResponse } from "next/server";
 import fs from "fs";
+export const dynamic = "force-dynamic";
 
 
 

src/app/api/new/portofolio/route.ts

@@ -1,5 +1,6 @@
 import { prisma } from "@/app/lib";
 import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
 
 
 // GET  ALL DATA PORTOFOLIO BY PROFILE ID

src/app/api/new/user/route.ts

@@ -1,5 +1,6 @@
 import { prisma } from "@/app/lib";
 import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
 
 
 // GET ONE DATA USER PROFILE BY PROFILE ID

src/app/dev/map/main/page.tsx

@@ -1,13 +1,13 @@
-import { map_funGetAllMap } from "@/app_modules/map/fun/get/fun_get_all_map";
+import { Map_ViewNew } from "@/app_modules/map/view/main_view_new";
-import { Map_View } from "@/app_modules/map/view";
 
 const mapboxToken = process.env.MAPBOX_TOKEN!;
 export default async function Page() {
-  const dataMap = await map_funGetAllMap();
+  // const dataMap = await map_funGetAllMap();
 
   return (
     <>
-      <Map_View mapboxToken={mapboxToken} dataMap={dataMap} />
+      {/* <Map_View mapboxToken={mapboxToken} dataMap={dataMap} /> */}
+      <Map_ViewNew mapboxToken={mapboxToken} />
     </>
   );
 }

src/app_modules/map/_component/detail_data.tsx

@@ -74,7 +74,7 @@ export function ComponentMap_DetailData({
               <IconPhoneCall />
             </Grid.Col>
             <Grid.Col span={"auto"}>
-              <Text>+{data?.Portofolio.tlpn}</Text>
+              <Text>{data?.Portofolio.tlpn}</Text>
             </Grid.Col>
           </Grid>
           <Grid>

src/app_modules/map/_component/drawer_new.tsx

@@ -0,0 +1,206 @@
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { ComponentGlobal_LoaderAvatar } from "@/app_modules/_global/component";
+import { ActionIcon, Box, Button, Drawer, Grid, Group, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconBuildingSkyscraper, IconListDetails, IconMapPin, IconPhoneCall, IconX } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { apiGetOneMapById } from "../lib/api_map";
+import { IDataMap, IDataMapDetailAuthor, IDataMapDetailBisnis } from "../lib/type_map";
+import { ComponentMap_LoadImageMap } from "./comp_load_image_map";
+import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
+
+
+
+
+
+// SALAHHHHHHHH ---- HARUS ULANGG
+export function ComponentMap_DrawerDetailDataNew({ opened, close, mapId, }: { opened: boolean; close: () => void; mapId: string }) {
+   const router = useRouter();
+   const [dataLokasi, setDataLokasi] = useState<IDataMap>()
+   const [dataAuthor, setDataAuthor] = useState<IDataMapDetailAuthor>()
+   const [dataBisnis, setDataBisnis] = useState<IDataMapDetailBisnis>()
+   const [loading, setLoading] = useState(false)
+
+   useShallowEffect(() => {
+      onLoadData();
+   }, []);
+
+   async function onLoadData() {
+      try {
+         setLoading(true)
+         const response = await apiGetOneMapById(mapId)
+         if (response.success) {
+            setDataLokasi(response.dataLokasi)
+            setDataAuthor(response.dataAuthor)
+            setDataBisnis(response.dataBisnis)
+         }
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   return (
+      <>
+         <Drawer
+            opened={opened}
+            onClose={() => close()}
+            position={"bottom"}
+            size={"auto"}
+            withCloseButton={false}
+            styles={{
+               content: {
+                  padding: 0,
+                  position: "absolute",
+                  margin: "auto",
+                  backgroundColor: "transparent",
+                  left: 0,
+                  right: 0,
+                  width: 500,
+               },
+               body: {
+                  backgroundColor: AccentColor.darkblue,
+                  borderTop: `2px solid ${AccentColor.blue}`,
+                  borderRight: `1px solid ${AccentColor.blue}`,
+                  borderLeft: `1px solid ${AccentColor.blue}`,
+                  borderRadius: "20px 20px 0px 0px",
+                  color: "white",
+                  paddingBottom: "5%",
+               },
+            }}
+         >
+            <Stack spacing={"xs"}>
+               <Group position="apart">
+                  <Title order={5}>
+                     {dataLokasi?.namePin ? (
+                        dataLokasi?.namePin
+                     ) : (
+                        <Skeleton radius={"xl"} w={100} />
+                     )}
+                  </Title>
+                  <ActionIcon onClick={close} variant="transparent">
+                     <IconX color="white" />
+                  </ActionIcon>
+               </Group>
+
+
+
+
+
+               {
+                  loading ?
+                     <ComponentMap_SkeletonDrawerDetailData /> :
+                     <Stack mt={"lg"} spacing={"xl"} px={"md"}>
+                        <Grid align="flex-start" justify="space-around">
+                           <Grid.Col span={"content"} style={{ minHeight: 50 }}>
+                              <ActionIcon
+                                 radius={"xl"}
+                                 variant="transparent"
+                              // onClick={() => onCheckProfile()}
+                              >
+                                 <ComponentGlobal_LoaderAvatar
+                                    fileId={dataAuthor?.imageId as any}
+                                 />
+                              </ActionIcon>
+                           </Grid.Col>
+                           <Grid.Col span={"auto"} style={{ minHeight: 50 }}>
+                              <Stack justify="center" h={30}>
+                                 <Text
+                                    fw={"bold"}
+                                    fz={"sm"}
+                                    lineClamp={1}
+                                 // onClick={() => onCheckProfile()}
+                                 >
+                                    {dataAuthor?.name}
+                                 </Text>
+                              </Stack>
+                           </Grid.Col>
+                        </Grid>
+
+
+
+                        <ComponentMap_LoadImageMap fileId={String(dataLokasi?.imageId)} />
+
+                        <Box>
+                           <Grid>
+                              <Grid.Col span={2}>
+                                 <IconBuildingSkyscraper />
+                              </Grid.Col>
+                              <Grid.Col span={"auto"}>
+                                 <Text>{dataBisnis?.namaBisnis}</Text>
+                              </Grid.Col>
+                           </Grid>
+                           <Grid>
+                              <Grid.Col span={2}>
+                                 <IconListDetails />
+                              </Grid.Col>
+                              <Grid.Col span={"auto"}>
+                                 <Text>{dataBisnis?.bidangBisnis}</Text>
+                              </Grid.Col>
+                           </Grid>
+                           <Grid>
+                              <Grid.Col span={2}>
+                                 <IconPhoneCall />
+                              </Grid.Col>
+                              <Grid.Col span={"auto"}>
+                                 <Text>+{dataBisnis?.tlpn}</Text>
+                              </Grid.Col>
+                           </Grid>
+                           <Grid>
+                              <Grid.Col span={2}>
+                                 <IconMapPin />
+                              </Grid.Col>
+                              <Grid.Col span={"auto"}>
+                                 <Text>{dataBisnis?.alamatKantor}</Text>
+                              </Grid.Col>
+                           </Grid>
+                        </Box>
+
+                        <Group grow position={"apart"}>
+                           <Button
+                              onClick={() => {
+                                 router.push(
+                                    RouterPortofolio.main_detail + dataBisnis?.id, { scroll: false, }
+                                 );
+                              }}
+                              loaderPosition="center"
+                              radius={"xl"}
+                              bg={MainColor.yellow}
+                              color="yellow"
+                              c={"black"}
+                           >
+                              Detail
+                           </Button>
+
+                           <Button
+                              radius={"xl"}
+                              bg={MainColor.yellow}
+                              color="yellow"
+                              c={"black"}
+                              onClick={() => {
+                                 window.open(
+                                    `https://maps.google.com?q=${dataLokasi?.latitude},${dataLokasi?.longitude}`,
+                                    "_blank",
+                                    "width=800,height=600,noopener,noreferrer"
+                                 );
+                              }}
+                           >
+                              Buka Maps
+                           </Button>
+                        </Group>
+                     </Stack>
+               }
+
+
+
+
+
+
+            </Stack>
+         </Drawer>
+      </>
+   );
+}

src/app_modules/map/lib/api_map.ts

@@ -0,0 +1,9 @@
+export const apiGetAllMap = async (path?: string) => {
+   const response = await fetch(`/api/new/map${(path) ? path : ''}`)
+   return await response.json().catch(() => null)
+}
+
+export const apiGetOneMapById = async (path: string) => {
+   const response = await fetch(`/api/new/map/${path}`);
+   return await response.json().catch(() => null);
+}

src/app_modules/map/lib/type_map.ts

@@ -0,0 +1,24 @@
+export interface IDataMap {
+   id: string
+   namePin: string
+   latitude: string
+   longitude: string
+   pinId: string
+   logoId: string
+   imageId: string
+}
+
+export interface IDataMapDetailAuthor {
+   id: string
+   name: string
+   imageId: string
+}
+
+export interface IDataMapDetailBisnis {
+   id: string
+   alamatKantor: string
+   tlpn: string
+   deskripsi: string
+   namaBisnis: string
+   bidangBisnis: string
+}

src/app_modules/map/ui/ui_map_new.tsx

@@ -0,0 +1,120 @@
+"use client";
+import { APIs } from "@/app/lib";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { Avatar, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import "mapbox-gl/dist/mapbox-gl.css";
+import { useState } from "react";
+import Map, { AttributionControl, Marker, NavigationControl, ScaleControl, } from "react-map-gl";
+import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "../_component";
+import { apiGetAllMap } from "../lib/api_map";
+import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
+import { IDataMap } from "../lib/type_map";
+
+export function UiMap_MapBoxViewNew({ mapboxToken, }: { mapboxToken: string }) {
+   const [mapId, setMapId] = useState("");
+   const [openDrawer, setOpenDrawer] = useState(false);
+   const [data, setData] = useState<IDataMap[]>([]);
+   const [loading, setLoading] = useState(false);
+
+   useShallowEffect(() => {
+      onLoadData();
+   }, []);
+
+   async function onLoadData() {
+      try {
+         setLoading(true)
+         const response = await apiGetAllMap()
+         if (response.success) {
+            setData(response.data)
+         }
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setLoading(false)
+      }
+   }
+
+   if (!mapboxToken)
+      return <ComponentGlobal_IsEmptyData text="Mapbox token not found" />;
+
+   return (
+      <>
+         <Stack style={{ borderRadius: "10px" }}>
+            {
+               loading ?
+                  <></> :
+                  <Map
+                     mapboxAccessToken={mapboxToken}
+                     mapStyle={"mapbox://styles/mapbox/streets-v11"}
+                     initialViewState={{
+                        latitude: defaultLatLong[0],
+                        longitude: defaultLatLong[1],
+                        zoom: defaultMapZoom,
+                     }}
+                     style={{
+                        cursor: "pointer",
+                        width: "auto",
+                        height: "90vh",
+                        borderRadius: "5px",
+                     }}
+                     attributionControl={false}
+                  >
+                     {data.map((e, i) => (
+                        <Stack key={i}>
+                           <Marker
+                              style={{
+                                 width: 40,
+                                 cursor: "pointer",
+                              }}
+                              latitude={Number(e.latitude)}
+                              longitude={Number(e.longitude)}
+                              anchor="bottom"
+                              offset={[0, 0]}
+                              scale={1}
+                           >
+                              <Stack
+                                 spacing={0}
+                                 align="center"
+                                 onClick={() => {
+                                    setMapId(e.id);
+                                    setOpenDrawer(true);
+                                 }}
+                              >
+                                 <Avatar
+                                    alt="Logo"
+                                    style={{
+                                       border: `2px solid ${AccentColor.softblue}`,
+                                       borderRadius: "100%",
+                                       backgroundColor: "white",
+                                    }}
+                                    src={
+                                       e.pinId === null
+                                          ? APIs.GET({ fileId: e.logoId })
+                                          : APIs.GET({ fileId: e.pinId })
+                                    }
+                                 />
+                              </Stack>
+                           </Marker>
+                        </Stack>
+                     ))}
+
+                     <NavigationControl />
+                     <ScaleControl position="top-left" />
+                     <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
+                  </Map>
+            }
+         </Stack>
+
+         <ComponentMap_DrawerDetailData
+            opened={openDrawer}
+            close={() => setOpenDrawer(false)}
+            mapId={mapId}
+            component={<ComponentMap_DetailData mapId={mapId} />}
+         />
+
+         {/* <ComponentMap_DrawerDetailDataNew opened={openDrawer} close={() => setOpenDrawer(false)} mapId={mapId}/> */}
+      </>
+   );
+}

src/app_modules/map/view/main_view_new.tsx

@@ -0,0 +1,13 @@
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ComponentMap_Header } from "../_component";
+import { UiMap_MapBoxViewNew } from "../ui/ui_map_new";
+
+export async function Map_ViewNew({ mapboxToken }: { mapboxToken: string }) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate header={<ComponentMap_Header />}>
+        <UiMap_MapBoxViewNew mapboxToken={mapboxToken} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}