fix admin:
- API map
This commit is contained in:
@@ -9,6 +9,7 @@ export async function adminMap_funGetAllMaps() {
|
|||||||
},
|
},
|
||||||
where: {
|
where: {
|
||||||
isActive: true,
|
isActive: true,
|
||||||
|
|
||||||
},
|
},
|
||||||
include: {
|
include: {
|
||||||
Portofolio: true,
|
Portofolio: true,
|
||||||
|
|||||||
@@ -1,13 +1,16 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { APIs } from "@/lib";
|
|
||||||
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
|
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
|
||||||
|
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
|
||||||
|
import { apiGetAllMap } from "@/app_modules/map/lib/api_map";
|
||||||
import {
|
import {
|
||||||
defaultLatLong,
|
defaultLatLong,
|
||||||
defaultMapZoom,
|
defaultMapZoom,
|
||||||
} from "@/app_modules/map/lib/default_lat_long";
|
} from "@/app_modules/map/lib/default_lat_long";
|
||||||
import { MODEL_MAP } from "@/app_modules/map/lib/interface";
|
import { IDataMap } from "@/app_modules/map/lib/type_map";
|
||||||
|
import { APIs } from "@/lib";
|
||||||
import { Avatar, Stack } from "@mantine/core";
|
import { Avatar, Stack } from "@mantine/core";
|
||||||
|
import { useShallowEffect } from "@mantine/hooks";
|
||||||
import "mapbox-gl/dist/mapbox-gl.css";
|
import "mapbox-gl/dist/mapbox-gl.css";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import Map, {
|
import Map, {
|
||||||
@@ -21,14 +24,31 @@ import { ComponentAdminMap_Drawer } from "../component";
|
|||||||
|
|
||||||
export function UiAdminMap_MapBoxView({
|
export function UiAdminMap_MapBoxView({
|
||||||
mapboxToken,
|
mapboxToken,
|
||||||
dataMap,
|
|
||||||
}: {
|
}: {
|
||||||
mapboxToken: string;
|
mapboxToken: string;
|
||||||
dataMap: MODEL_MAP[];
|
|
||||||
}) {
|
}) {
|
||||||
const [mapId, setMapId] = useState("");
|
const [mapId, setMapId] = useState("");
|
||||||
const [openDrawer, setOpenDrawer] = useState(false);
|
const [openDrawer, setOpenDrawer] = useState(false);
|
||||||
const [data, setData] = useState(dataMap);
|
const [data, setData] = useState<IDataMap[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
useShallowEffect(() => {
|
||||||
|
onLoadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
async function onLoadData() {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const response = await apiGetAllMap();
|
||||||
|
if (response) {
|
||||||
|
setData(response.data);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (!mapboxToken)
|
if (!mapboxToken)
|
||||||
return <ComponentAdminGlobal_IsEmptyData text="Mapbox token not found" />;
|
return <ComponentAdminGlobal_IsEmptyData text="Mapbox token not found" />;
|
||||||
@@ -42,6 +62,9 @@ export function UiAdminMap_MapBoxView({
|
|||||||
backgroundColor: "gray",
|
backgroundColor: "gray",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{loading ? (
|
||||||
|
<CustomSkeleton height={500} />
|
||||||
|
) : (
|
||||||
<Map
|
<Map
|
||||||
mapboxAccessToken={mapboxToken}
|
mapboxAccessToken={mapboxToken}
|
||||||
mapStyle={"mapbox://styles/mapbox/streets-v11"}
|
mapStyle={"mapbox://styles/mapbox/streets-v11"}
|
||||||
@@ -65,8 +88,8 @@ export function UiAdminMap_MapBoxView({
|
|||||||
width: 40,
|
width: 40,
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
}}
|
}}
|
||||||
latitude={e.latitude}
|
latitude={e.latitude as any}
|
||||||
longitude={e.longitude}
|
longitude={e.longitude as any}
|
||||||
anchor="bottom"
|
anchor="bottom"
|
||||||
offset={[0, 0]}
|
offset={[0, 0]}
|
||||||
scale={1}
|
scale={1}
|
||||||
@@ -88,7 +111,7 @@ export function UiAdminMap_MapBoxView({
|
|||||||
}}
|
}}
|
||||||
src={
|
src={
|
||||||
e.pinId === null
|
e.pinId === null
|
||||||
? APIs.GET({ fileId: e.Portofolio.logoId, size: "300" })
|
? APIs.GET({ fileId: e.logoId, size: "300" })
|
||||||
: APIs.GET({ fileId: e.pinId, size: "300" })
|
: APIs.GET({ fileId: e.pinId, size: "300" })
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@@ -101,6 +124,7 @@ export function UiAdminMap_MapBoxView({
|
|||||||
<ScaleControl position="top-left" />
|
<ScaleControl position="top-left" />
|
||||||
<AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
|
<AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
|
||||||
</Map>
|
</Map>
|
||||||
|
)}
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
<ComponentAdminMap_Drawer
|
<ComponentAdminMap_Drawer
|
||||||
|
|||||||
@@ -1,17 +1,14 @@
|
|||||||
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
|
import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
|
||||||
import { adminMap_funGetAllMaps } from "../fun/fun_get_all_maps";
|
|
||||||
import { UiAdminMap_MapBoxView } from "../ui";
|
import { UiAdminMap_MapBoxView } from "../ui";
|
||||||
|
|
||||||
const mapboxToken = process.env.MAPBOX_TOKEN!;
|
const mapboxToken = process.env.MAPBOX_TOKEN!;
|
||||||
export async function AdminMap_View() {
|
export async function AdminMap_View() {
|
||||||
const dataMap = await adminMap_funGetAllMaps();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ComponentAdminGlobal_HeaderTamplate name="Maps" />
|
<ComponentAdminGlobal_HeaderTamplate name="Maps" />
|
||||||
<UiAdminMap_MapBoxView
|
<UiAdminMap_MapBoxView
|
||||||
mapboxToken={mapboxToken}
|
mapboxToken={mapboxToken}
|
||||||
dataMap={dataMap as any}
|
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user