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

fix: Map

Browse Source 
deskripsi:
- fix map pada edit dan custom pin: tidak menggunakan use server lagi tapi API
This commit is contained in:
Bagasbanuna02
2025-05-26 15:24:16 +08:00
parent 3b06f1c91a
commit f23defd972
11 changed files with 174 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/app/api/map/[id]/portofolio/route.ts Normal file
View File

@@ -0,0 +1,53 @@
import { NextResponse } from "next/server";
import { prisma } from "@/lib";
import backendLogger from "@/util/backendLogger";
export { GET };
async function GET(request: Request, { params }: { params: { id: string } }) {
if (request.method !== "GET") {
return NextResponse.json(
{
success: false,
message: "Method not allowed",
},
{ status: 405 }
);
}
try {
const { id } = params;
const data = await prisma.businessMaps.findUnique({
where: {
portofolioId: id,
},
include: {
Portofolio: {
select: {
id: true,
logoId: true,
},
},
},
});
return NextResponse.json(
{
success: true,
message: "Berhasil mendapatkan data pin map",
data: data,
},
{ status: 200 }
);
} catch (error) {
backendLogger.error("Error get pin map", error);
return NextResponse.json(
{
success: false,
message: "Gagal mendapatkan data pin map",
reason: (error as Error).message,
},
{ status: 500 }
);
}
}

2
src/app/dev/(user)/map/create/[id]/page.tsx
View File

@@ -1,6 +1,6 @@
import { Map_CreateNewPin } from "@/app_modules/map/view";
export default async function Page() {
export default function Page() {
return (
<>
<Map_CreateNewPin />

12
src/app/dev/(user)/map/custom-pin/[id]/page.tsx
View File

@@ -1,16 +1,10 @@
import { map_funGetOneBusinessMapByPortofolioId } from "@/app_modules/map/fun/get/fun_get_one_by_portofolio_id";
import { Map_CustomPin } from "@/app_modules/map/view";
export default async function Page({ params }: { params: { id: string } }) {
const portofolioId = params.id;
const dataMap = await map_funGetOneBusinessMapByPortofolioId({
portofolioId: portofolioId,
});
const mapboxToken = process.env.MAPBOX_TOKEN!;
export default function Page() {
return (
<>
<Map_CustomPin dataMap={dataMap} />
<Map_CustomPin mapboxToken={mapboxToken} />
</>
);
}

9
src/app/dev/(user)/map/edit/[id]/page.tsx
View File

@@ -1,13 +1,10 @@
import { map_funGetOneBusinessMapByPortofolioId } from "@/app_modules/map/fun/get/fun_get_one_by_portofolio_id";
import { Map_EditPin } from "@/app_modules/map/view";
export default async function Page({ params }: { params: { id: string } }) {
const portofolioId = params.id;
const dataMap = await map_funGetOneBusinessMapByPortofolioId({portofolioId: portofolioId})
const mapboxToken = process.env.MAPBOX_TOKEN!;
export default function Page() {
return (
<>
<Map_EditPin portofolioId={portofolioId} dataMap={dataMap} />
<Map_EditPin mapboxToken={mapboxToken} />
</>
);
}

5
src/app/dev/(user)/map/main/page.tsx
View File

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

2
src/app/dev/(user)/map/splash/page.tsx
View File

@@ -1,7 +1,7 @@
import { Map_Splash } from "@/app_modules/map/view";
export default async function Page() {
export default function Page() {
return (
<>
<Map_Splash />

2
src/app_modules/map/_component/button/comp_button_update_data_map.tsx
View File

@@ -92,7 +92,7 @@ export function ComponentMap_ButtonUpdateDataMap({
loading={isLoading}
mb={"xl"}
style={{ transition: "0.5s" }}
disabled={data.namePin === "" || file === null}
disabled={data.namePin === "" || data.imageId === null}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"

33
src/app_modules/map/lib/api_map.ts
View File

@@ -28,3 +28,36 @@ export const apiGetOneMapById = async (path: string) => {
});
return await response.json().catch(() => null);
};
export const apiGetOneMapByPortofolioId = async ({ id }: { id: string }) => {
try {
// Fetch token from cookie
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
if (!token) {
console.error("No token found");
return null;
}
const response = await fetch(`/api/map/${id}/portofolio`, {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (!response.ok) {
const errorData = await response.json().catch(() => null);
console.error("Failed to get one map by portofolio id", response.statusText, errorData);
throw new Error(errorData?.message || "Failed to get one map by portofolio id");
}
// Return the JSON response
const data = await response.json();
return data;
} catch (error) {
console.error("Error get one map by portofolio id", error);
throw error; // Re-throw the error to handle it in the calling function
}
};

37
src/app_modules/map/ui/ui_edit_map.tsx
View File

@@ -161,43 +161,6 @@ export function UiMap_EditMap({
onSetImage={setImg}
/>
</Center>
{/* <Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile,
3000
);
} else {
setImg(buffer);
setFile(files);
}
} catch (error) {
console.log(error);
}
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
{...props}
radius={"xl"}
leftIcon={<IconCamera />}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
)}
</FileButton>
</Center> */}
</Stack>
<ComponentMap_ButtonUpdateDataMap data={data as any} file={file} />

45
src/app_modules/map/view/custom_pin.tsx
View File

@@ -1,26 +1,53 @@
"use client";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UI_NewLayoutTamplate, {
UI_NewChildren,
UI_NewHeader,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import { UiMap_CustomPin } from "../ui";
import { apiGetOneMapByPortofolioId } from "../lib/api_map";
import { useParams } from "next/navigation";
import { useState } from "react";
import { useShallowEffect } from "@mantine/hooks";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { ComponentGlobal_BoxInformation } from "@/app_modules/_global/component";
const mapboxToken = process.env.MAPBOX_TOKEN!;
export async function Map_CustomPin({ dataMap }: { dataMap: any }) {
export function Map_CustomPin({ mapboxToken }: { mapboxToken: string }) {
const { id } = useParams();
const [data, setData] = useState<any | null>();
useShallowEffect(() => {
onLoadData();
}, []);
async function onLoadData() {
try {
const response = await apiGetOneMapByPortofolioId({ id: id as string });
if (response.success) {
setData(response.data);
} else {
setData(null);
}
} catch (error) {
setData(null);
console.error("Error get one map by portofolio id", error);
}
}
return (
<>
{/* <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Custom Pin" />}
>
<UiMap_CustomPin mapboxToken={mapboxToken} dataMap={dataMap} />
</UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Custom Pin" />
</UI_NewHeader>
<UI_NewChildren>
<UiMap_CustomPin mapboxToken={mapboxToken} dataMap={dataMap} />
{data === undefined ? (
<CustomSkeleton height={400} />
) : !data ? (
<ComponentGlobal_BoxInformation informasi="Data tidak ditemukan" />
) : (
<UiMap_CustomPin mapboxToken={mapboxToken} dataMap={data} />
)}
</UI_NewChildren>
</UI_NewLayoutTamplate>
</>

66
src/app_modules/map/view/edit.tsx
View File

@@ -1,36 +1,54 @@
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { UiMap_CreatePin } from "../ui/ui_create_pin";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { UiMap_EditPin } from "../ui";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren } from "@/app_modules/_global/ui/V2_layout_tamplate";
"use client";
const mapboxToken = process.env.MAPBOX_TOKEN!;
export async function Map_EditPin({
portofolioId,
dataMap,
}: {
portofolioId: string;
dataMap: any
}) {
if (!mapboxToken)
return <ComponentGlobal_IsEmptyData text="Mapbox token not found" />;
import { ComponentGlobal_BoxInformation } from "@/app_modules/_global/component";
import { Component_Header } from "@/app_modules/_global/component/new/component_header";
import UI_NewLayoutTamplate, {
UI_NewChildren,
UI_NewHeader,
} from "@/app_modules/_global/ui/V2_layout_tamplate";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import { apiGetOneMapByPortofolioId } from "../lib/api_map";
import { UiMap_EditPin } from "../ui";
export function Map_EditPin({ mapboxToken }: { mapboxToken: string }) {
const { id } = useParams();
const [data, setData] = useState<any | null>();
useShallowEffect(() => {
onLoadData();
}, []);
async function onLoadData() {
try {
const response = await apiGetOneMapByPortofolioId({ id: id as string });
if (response.success) {
setData(response.data);
} else {
setData(null);
}
} catch (error) {
setData(null);
console.error("Error get one map by portofolio id", error);
}
}
return (
<>
{/* <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Edit Pin" />}
>
<UiMap_EditPin mapboxToken={mapboxToken} dataMap={dataMap} />
</UIGlobal_LayoutTamplate> */}
<UI_NewLayoutTamplate>
<UI_NewHeader>
<Component_Header title="Edit Pin" />
</UI_NewHeader>
<UI_NewChildren>
<UiMap_EditPin mapboxToken={mapboxToken} dataMap={dataMap} />
{data === undefined ? (
<CustomSkeleton height={400} />
) : !data ? (
<ComponentGlobal_BoxInformation informasi="Data tidak ditemukan" />
) : (
<UiMap_EditPin mapboxToken={mapboxToken} dataMap={data} />
)}
</UI_NewChildren>
</UI_NewLayoutTamplate>
</>