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

# feat

Browse Source 
## Deskripsi:
- Edit map
- Sinkronisasi dengan data portofolio
### No Issue
This commit is contained in:
Bagasbanuna02
2024-08-15 17:46:13 +08:00
parent 059cbe6b0f
commit 34031355fe
59 changed files with 1410 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/app_modules/map/_component/detail_data.tsx
View File

@@ -1,14 +1,34 @@
"use client";
import { Skeleton, Stack, Text, Title } from "@mantine/core";
import { Suspense, useState } from "react";
import { MODEL_MAP } from "../lib/interface";
import { useShallowEffect } from "@mantine/hooks";
import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
import {
Box,
Button,
Grid,
Group,
Image,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
import { MODEL_MAP } from "../lib/interface";
import {
IconBuildingSkyscraper,
IconListDetails,
IconPhoneCall,
IconMapPin,
} from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
export function ComponentMap_DetailData({ mapId }: { mapId: string }) {
export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
const router = useRouter();
const [data, setData] = useState<MODEL_MAP>();
useShallowEffect(() => {
@@ -22,31 +42,94 @@ export function ComponentMap_DetailData({ mapId }: { mapId: string }) {
return (
<>
<Stack>
<Stack spacing={0}>
<Text>
latitude:{" "}
<Text fw={"bold"} span inherit>
{data?.latitude}
</Text>
</Text>
<Text>
longitude:{" "}
<Text fw={"bold"} span inherit>
{data?.longitude}
</Text>
</Text>
</Stack>
<Title order={4}>{data?.namePin}</Title>
{/* <Text>{data?.Author?.username}</Text> */}
<Stack mt={"lg"} spacing={"xl"}>
<ComponentGlobal_AuthorNameOnHeader
authorName={data?.Author?.username}
imagesId={data?.Author?.Profile?.imagesId}
profileId={data?.Author?.Profile?.id}
/>
<SimpleGrid
cols={2}
spacing={"lg"}
breakpoints={[
{ maxWidth: 980, cols: 2, spacing: "md" },
{ maxWidth: 755, cols: 1, spacing: "sm" },
{ maxWidth: 600, cols: 1, spacing: "sm" },
]}
>
<Image
radius={"sm"}
mah={300}
maw={200}
alt="Foto"
src={RouterMap.api_foto + data?.imagesId}
/>
<Box>
<Grid>
<Grid.Col span={2}>
<IconBuildingSkyscraper />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{data?.Portofolio.namaBisnis}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconListDetails />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{data?.Portofolio.MasterBidangBisnis.name}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconPhoneCall />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>+{data?.Portofolio.tlpn}</Text>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={2}>
<IconMapPin />
</Grid.Col>
<Grid.Col span={"auto"}>
<Text>{data?.Portofolio.alamatKantor}</Text>
</Grid.Col>
</Grid>
</Box>
</SimpleGrid>
<SimpleGrid
cols={2}
spacing={"lg"}
breakpoints={[
{ maxWidth: 980, cols: 2, spacing: "md" },
{ maxWidth: 755, cols: 1, spacing: "sm" },
{ maxWidth: 600, cols: 1, spacing: "sm" },
]}
>
<Box />
<Group position="center">
<Button
radius={"xl"}
onClick={() => {
router.push(
RouterPortofolio.main_detail + data?.Portofolio.id,
{ scroll: false }
);
}}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Detail
</Button>
</Group>
</SimpleGrid>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
</Stack>
</>

33
src/app_modules/map/_component/drawer.tsx
View File

@@ -9,13 +9,12 @@ import {
Stack,
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconX } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { Suspense, useState } from "react";
import React, { useState } from "react";
import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
import { MODEL_MAP } from "../lib/interface";
import { useShallowEffect } from "@mantine/hooks";
import { ComponentMap_DetailData } from "./detail_data";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
interface MODEL_DRAWER {
id: string;
@@ -27,15 +26,27 @@ export function ComponentMap_DrawerDetailData({
opened,
close,
mapId,
component,
}: {
opened: boolean;
close: () => void;
mapId: string;
component: React.ReactNode;
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState<MODEL_MAP>();
useShallowEffect(() => {
onLoadData(mapId);
}, [mapId]);
async function onLoadData(mapId: string) {
const res: any = await map_funGetOneById({ mapId: mapId });
if (res !== null) {
setData(res);
}
}
return (
<>
<Drawer
@@ -67,14 +78,18 @@ export function ComponentMap_DrawerDetailData({
>
<Stack spacing={"xs"}>
<Group position="apart">
<Title order={5}>Detail Map</Title>
<Title order={5}>
{data?.namePin ? (
data?.namePin
) : (
<Skeleton radius={"xl"} w={100} />
)}
</Title>
<ActionIcon onClick={close} variant="transparent">
<IconX color="white" />
</ActionIcon>
</Group>
<Suspense fallback={<ComponentGlobal_Loader />}>
<ComponentMap_DetailData mapId={mapId} />
</Suspense>
{component}
</Stack>
</Drawer>
</>

10
src/app_modules/map/_component/header.tsx
View File

@@ -25,11 +25,11 @@ export function ComponentMap_Header() {
<>
<UIGlobal_LayoutHeaderTamplate
title="Business Maps"
customButtonRight={
<ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
<IconDotsVertical color="white" />
</ActionIcon>
}
// customButtonRight={
// <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
// <IconDotsVertical color="white" />
// </ActionIcon>
// }
/>
<UIGlobal_Drawer

28
src/app_modules/map/fun/create/fun_create_pin.ts
View File

@@ -3,23 +3,47 @@
import prisma from "@/app/lib/prisma";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import _ from "lodash";
import { revalidatePath } from "next/cache";
import { v4 } from "uuid";
import fs from "fs";
export async function map_funCreatePin({ data }: { data: any }) {
const authorId = await user_getOneUserId();
// console.log(data);
const gambar: any = data.gambar.get("file");
const fileName = gambar.name;
const fileExtension = _.lowerCase(gambar.name.split(".").pop());
const fRandomName = v4(fileName) + "." + fileExtension;
const uploadImage = await prisma.images.create({
data: {
url: fRandomName,
label: "MAP_PHOTO",
},
select: {
id: true,
url: true,
},
});
if (!uploadImage) return { status: 400, message: "Gagal upload foto lokasi" };
const upload_Folder = Buffer.from(await gambar.arrayBuffer());
fs.writeFileSync(`./public/map/${uploadImage.url}`, upload_Folder);
const create = await prisma.businessMaps.create({
data: {
latitude: data.lat,
longitude: data.long,
namePin: data.namePin,
portofolioId: data?.portofolioId,
authorId: authorId,
imagesId: uploadImage.id,
},
});
if (!create) return { status: 400, message: "Gagal menambahkan" };
revalidatePath(RouterMap.main_view)
revalidatePath(RouterMap.main_view);
return { status: 200, message: "Berhasil menambahkan" };
}

71
src/app_modules/map/fun/edit/fun_edit_map.ts Normal file
View File

@@ -0,0 +1,71 @@
"use server";
import _, { update } from "lodash";
import { MODEL_MAP } from "../../lib/interface";
import { v4 } from "uuid";
import prisma from "@/app/lib/prisma";
import fs from "fs";
import { revalidatePath } from "next/cache";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
export async function map_funEditMap({
data,
file,
}: {
data: MODEL_MAP;
file: FormData;
}) {
// console.log(data, file);
const gambar: any = file.get("file");
if (gambar !== "null") {
const fileName = gambar.name;
const fileExtension = _.lowerCase(gambar.name.split(".").pop());
const fRandomName = v4(fileName) + "." + fileExtension;
const uploadImage = await prisma.images.create({
data: {
url: fRandomName,
label: "MAP_PHOTO",
},
select: {
id: true,
url: true,
},
});
if (!uploadImage)
return { status: 400, message: "Gagal upload foto lokasi" };
const upload_Folder = Buffer.from(await gambar.arrayBuffer());
fs.writeFileSync(`./public/map/${uploadImage.url}`, upload_Folder);
const updt = await prisma.businessMaps.update({
where: {
id: data.id,
},
data: {
latitude: data.latitude,
longitude: data.longitude,
namePin: data.namePin,
imagesId: uploadImage.id,
},
});
if (!updt) return { status: 400, message: "Gagal update data" };
}
const updt = await prisma.businessMaps.update({
where: {
id: data.id,
},
data: {
latitude: data.latitude,
longitude: data.longitude,
namePin: data.namePin,
},
});
if (!updt) return { status: 400, message: "Gagal update data" };
revalidatePath(RouterPortofolio.main_detail);
return { status: 200, message: "Berhasil update" };
}

26
src/app_modules/map/fun/get/fun_get_one_by_id.ts
View File

@@ -9,8 +9,15 @@ export async function map_funGetOneById({ mapId }: { mapId: string }) {
},
select: {
Author: {
include: {
Profile: true,
select: {
id: true,
username: true,
Profile: {
select: {
id: true,
imagesId: true,
},
},
},
},
id: true,
@@ -21,6 +28,21 @@ export async function map_funGetOneById({ mapId }: { mapId: string }) {
latitude: true,
longitude: true,
authorId: true,
imagesId: true,
Portofolio: {
select: {
id: true,
alamatKantor: true,
tlpn: true,
deskripsi: true,
namaBisnis: true,
MasterBidangBisnis: {
select: {
name: true,
},
},
},
},
},
});

24
src/app_modules/map/fun/get/fun_get_one_by_portofolio_id.ts Normal file
View File

@@ -0,0 +1,24 @@
"use server";
import prisma from "@/app/lib/prisma";
export async function map_funGetOneByPortofolioId({
portofolioId,
}: {
portofolioId: string;
}) {
const res = await prisma.businessMaps.findFirst({
where: {
portofolioId: portofolioId,
},
select: {
id: true,
namePin: true,
latitude: true,
longitude: true,
imagesId: true,
},
});
return res;
}

3
src/app_modules/map/lib/default_lat_long.ts
View File

@@ -1,2 +1,3 @@
export const defaultLatLong = [-8.723606930462012, 115.17496509980654];
export const defaultMapZoom = 14;
export const defaultMapZoom = 12

6
src/app_modules/map/lib/interface.ts
View File

@@ -1,4 +1,5 @@
import { MODEL_USER } from "@/app_modules/home/model/interface";
import { MODEL_PORTOFOLIO } from "@/app_modules/katalog/portofolio/model/interface";
export interface MODEL_MAP {
id: string;
@@ -9,5 +10,8 @@ export interface MODEL_MAP {
latitude: number;
longitude: number;
authorId: string;
Author: MODEL_USER
Author: MODEL_USER;
portofolioId: string;
Portofolio: MODEL_PORTOFOLIO
imagesId: string
}

3
src/app_modules/map/ui/index.ts
View File

@@ -1,3 +1,4 @@
export { UiMap_MapBoxView } from "./ui_map";
export { UiMap_SplashView } from "./ui_splash";
export { UiMap_CreatePin } from "./ui_create_pin"
export { UiMap_CreatePin } from "./ui_create_pin"
export { UiMap_EditPin } from "./ui_edit_pin"

196
src/app_modules/map/ui/ui_create_pin.tsx
View File

@@ -7,28 +7,52 @@ import {
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import {
ActionIcon,
Affix,
AspectRatio,
Box,
Button,
Center,
FileButton,
Group,
Image,
Paper,
Stack,
TextInput
Text,
TextInput,
Title,
} from "@mantine/core";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import Map, { Marker } from "react-map-gl";
import Map, {
AttributionControl,
Marker,
NavigationControl,
ScaleControl,
} from "react-map-gl";
import { map_funCreatePin } from "../fun/create/fun_create_pin";
import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { IconCamera, IconX } from "@tabler/icons-react";
export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
export function UiMap_CreatePin({
mapboxToken,
portofolioId,
}: {
mapboxToken: string;
portofolioId: string;
}) {
const [[lat, long], setLatLong] = useState([0, 0]);
const [isPin, setIsPin] = useState(false);
const [namePin, setNamePin] = useState("");
const [file, setFile] = useState<File | any>(null);
const [img, setImg] = useState<any | null>(null);
return (
<>
<Stack style={{ borderRadius: "10px" }}>
<Stack>
<Map
mapboxAccessToken={mapboxToken}
mapStyle={"mapbox://styles/mapbox/streets-v11"}
@@ -47,6 +71,7 @@ export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
setLatLong([a.lngLat.lat, a.lngLat.lng]);
setIsPin(true);
}}
attributionControl={false}
>
<Marker
style={{
@@ -67,6 +92,9 @@ export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
/>
</Stack>
</Marker>
<NavigationControl />
<ScaleControl position="top-left" />
<AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
</Map>
<Paper
@@ -78,25 +106,113 @@ export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
color: "white",
}}
>
<Stack>
<TextInput
disabled={isPin ? false : true}
style={{ transition: "0.5s" }}
styles={{ label: { color: isPin ? "white" : "gray" } }}
label="Nama Pin"
placeholder="Masukan nama pin map"
withAsterisk
onChange={(val) => {
setNamePin(_.startCase(val.currentTarget.value));
}}
/>
<ButtonSavePin
namePin={namePin}
lat={lat as any}
long={long as any}
/>
</Stack>
<TextInput
disabled={isPin ? false : true}
style={{ transition: "0.5s" }}
styles={{ label: { color: isPin ? "white" : "gray" } }}
label="Nama Pin"
placeholder="Masukan nama pin map"
withAsterisk
onChange={(val) => {
setNamePin(_.startCase(val.currentTarget.value));
}}
/>
</Paper>
<Stack>
{img ? (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<Image
radius={"sm"}
alt="Foto"
src={img ? img : "/aset/no-img.png"}
maw={200}
/>
</Paper>
</AspectRatio>
) : (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<Box
h={250}
w={200}
style={{
color: "white",
}}
>
<Stack spacing={5} justify="center" align="center" h={"100%"}>
<Title order={3}>Foto Lokasi Bisnis</Title>
<Text fs={"italic"} fz={10} align="center">
Upload foto lokasi bisnis anda untuk ditampilkan dalam
detail map
</Text>
</Stack>
</Box>
</Paper>
</AspectRatio>
)}
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > 2000000) {
ComponentGlobal_NotifikasiPeringatan(
"Maaf, Ukuran file terlalu besar, maximum 2mb",
3000
);
} else {
setImg(buffer);
setFile(files);
}
} catch (error) {
console.log(error);
}
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
disabled={isPin ? false : true}
{...props}
radius={"xl"}
leftIcon={<IconCamera />}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
)}
</FileButton>
</Center>
</Stack>
<ButtonSavePin
namePin={namePin}
lat={lat as any}
long={long as any}
portofolioId={portofolioId}
file={file}
/>
</Stack>
</>
);
@@ -106,14 +222,23 @@ function ButtonSavePin({
namePin,
lat,
long,
portofolioId,
file,
}: {
namePin: string;
lat: string;
long: string;
portofolioId: string;
file: FormData;
}) {
const router = useRouter();
async function onSavePin() {
const res = await map_funCreatePin({ data: { namePin, lat, long } });
const gambar = new FormData();
gambar.append("file", file as any);
const res = await map_funCreatePin({
data: { namePin, lat, long, portofolioId, gambar },
});
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
@@ -121,19 +246,18 @@ function ButtonSavePin({
return (
<>
<Group position="right">
<Button
style={{ transition: "0.5s" }}
disabled={namePin === "" ? true : false}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => onSavePin()}
>
Simpan
</Button>
</Group>
<Button
mt={"xl"}
style={{ transition: "0.5s" }}
disabled={namePin === "" || file === null ? true : false}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => onSavePin()}
>
Simpan
</Button>
</>
);
}

241
src/app_modules/map/ui/ui_edit_pin.tsx Normal file
View File

@@ -0,0 +1,241 @@
"use client";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import {
AspectRatio,
Box,
Button,
Center,
FileButton,
Image,
Paper,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import Map, {
AttributionControl,
Marker,
NavigationControl,
ScaleControl,
} from "react-map-gl";
import { map_funCreatePin } from "../fun/create/fun_create_pin";
import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
import { MODEL_MAP } from "../lib/interface";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import { map_funEditMap } from "../fun/edit/fun_edit_map";
export function UiMap_EditPin({
mapboxToken,
dataMap,
}: {
mapboxToken: string;
dataMap: MODEL_MAP;
}) {
const [data, setData] = useState(dataMap);
const [file, setFile] = useState<File | any>(null);
const [img, setImg] = useState<any | null>(null);
return (
<>
<Stack>
<Map
mapboxAccessToken={mapboxToken}
mapStyle={"mapbox://styles/mapbox/streets-v11"}
initialViewState={{
latitude: data.latitude,
longitude: data.longitude,
zoom: defaultMapZoom,
}}
style={{
cursor: "pointer",
width: "100%",
height: "60vh",
borderRadius: "10px",
}}
onClick={(a) => {
setData({
...data,
latitude: a.lngLat.lat,
longitude: a.lngLat.lng,
});
}}
attributionControl={false}
>
<Marker
style={{
color: "red",
width: 40,
// height: 40,
cursor: "pointer",
}}
latitude={data.latitude}
longitude={data.longitude}
anchor="bottom"
>
<Stack spacing={0}>
<Image
w={"100%"}
alt="image"
src="https://cdn-icons-png.flaticon.com/512/5860/5860579.png"
/>
</Stack>
</Marker>
<NavigationControl />
<ScaleControl position="top-left" />
<AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
</Map>
<Paper
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
>
<TextInput
style={{ transition: "0.5s" }}
styles={{ label: { color: "white" } }}
label="Nama Pin"
placeholder="Masukan nama pin map"
value={data.namePin}
withAsterisk
onChange={(val) => {
setData({
...data,
namePin: val.currentTarget.value,
});
}}
/>
</Paper>
<Stack>
{img ? (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<Image
radius={"sm"}
alt="Foto"
src={img ? img : "/aset/no-img.png"}
maw={250}
/>
</Paper>
</AspectRatio>
) : (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<Image
radius={"sm"}
alt="Foto"
src={RouterMap.api_foto + data.imagesId}
maw={250}
/>
</Paper>
</AspectRatio>
)}
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > 2000000) {
ComponentGlobal_NotifikasiPeringatan(
"Maaf, Ukuran file terlalu besar, maximum 2mb",
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>
<ButtonSavePin data={data as any} file={file} />
</Stack>
</>
);
}
function ButtonSavePin({ data, file }: { data: MODEL_MAP; file: FormData }) {
const router = useRouter();
async function onSavePin() {
const gambar = new FormData();
gambar.append("file", file as any);
const res = await map_funEditMap({
data: data,
file: gambar
});
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
}
return (
<>
<Button
mt={"xl"}
style={{ transition: "0.5s" }}
disabled={data.namePin === "" ? true : false}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => onSavePin()}
>
Simpan
</Button>
</>
);
}

18
src/app_modules/map/ui/ui_map.tsx
View File

@@ -1,21 +1,20 @@
"use client";
import "mapbox-gl/dist/mapbox-gl.css";
import { Image, Stack, Text, Tooltip } from "@mantine/core";
import { Image, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRef, useState } from "react";
import "mapbox-gl/dist/mapbox-gl.css";
import { useState } from "react";
import Map, {
AttributionControl,
GeolocateControl,
Marker,
NavigationControl,
Popup,
ScaleControl,
ScaleControl
} from "react-map-gl";
import { ComponentMap_DrawerDetailData } from "../_component";
import { ComponentMap_DetailData } from "../_component/detail_data";
import { map_funGetAllMap } from "../fun/get/fun_get_all_map";
import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
import { MODEL_MAP } from "../lib/interface";
import { ComponentMap_DrawerDetailData } from "../_component";
import { map_funGetAllMap } from "../fun/get/fun_get_all_map";
export function UiMap_MapBoxView({
mapboxToken,
@@ -90,7 +89,7 @@ export function UiMap_MapBoxView({
style={{
borderRadius: "5px",
padding: "5px",
width: "auto",
width: 50,
}}
lineClamp={2}
>
@@ -111,6 +110,7 @@ export function UiMap_MapBoxView({
opened={openDrawer}
close={() => setOpenDrawer(false)}
mapId={mapId}
component={<ComponentMap_DetailData mapId={mapId} />}
/>
</>
);

15
src/app_modules/map/view/create.tsx
View File

@@ -4,16 +4,25 @@ import { UiMap_CreatePin } from "../ui/ui_create_pin";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
const mapboxToken = process.env.MAPBOX_TOKEN!;
export async function Map_CreateNewPin() {
export async function Map_CreateNewPin({
portofolioId,
}: {
portofolioId: string;
}) {
if (!mapboxToken)
return <ComponentGlobal_IsEmptyData text="Mapbox token not found" />;
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Tambah Pin" />}
header={
<UIGlobal_LayoutHeaderTamplate title="Tambah Pin" hideButtonLeft />
}
>
<UiMap_CreatePin mapboxToken={mapboxToken} />
<UiMap_CreatePin
mapboxToken={mapboxToken}
portofolioId={portofolioId}
/>
</UIGlobal_LayoutTamplate>
</>
);

27
src/app_modules/map/view/edit.tsx Normal file
View File

@@ -0,0 +1,27 @@
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";
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" />;
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Edit Pin" />}
>
<UiMap_EditPin mapboxToken={mapboxToken} dataMap={dataMap} />
</UIGlobal_LayoutTamplate>
</>
);
}

1
src/app_modules/map/view/index.ts
View File

@@ -1,3 +1,4 @@
export { Map_View } from "./main_view";
export { Map_Splash } from "./splash";
export { Map_CreateNewPin } from "./create";
export { Map_EditPin } from "./edit";