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

fix: Map

Browse Source 
Deskripsi:
- Tampilan map
- Tampilan portofolio
- Kirim file ke wibu storage
## No Image
This commit is contained in:
Bagasbanuna02
2024-09-21 04:53:19 +08:00
parent 128da1eb32
commit 56548b4258
43 changed files with 620 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,12 +4,10 @@ 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_BoxUploadImage } from "@/app_modules/_global/component";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import {
AspectRatio,
Box,
Button,
Center,
FileButton,
@@ -22,7 +20,6 @@ import {
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import Map, {
AttributionControl,
@@ -30,7 +27,7 @@ import Map, {
NavigationControl,
ScaleControl,
} from "react-map-gl";
import { map_funCreatePin } from "../fun/create/fun_create_pin";
import { ComponentMap_ButtonSavePin } from "../_component";
import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
export function UiMap_CreatePin({
@@ -116,52 +113,26 @@ export function UiMap_CreatePin({
</Paper>
<Stack>
{img ? (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
border: `2px solid ${AccentColor.blue}`,
backgroundColor: AccentColor.darkblue,
padding: "10px",
borderRadius: "10px",
}}
>
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
<Image
radius={"sm"}
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
alt="Foto"
src={img ? img : "/aset/no-img.png"}
maw={200}
height={250}
src={img}
/>
</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>
)}
</AspectRatio>
) : (
<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>
)}
</ComponentGlobal_BoxUploadImage>
<Center>
<FileButton
@@ -202,7 +173,7 @@ export function UiMap_CreatePin({
</Center>
</Stack>
<ButtonSavePin
<ComponentMap_ButtonSavePin
namePin={namePin}
lat={lat as any}
long={long as any}
@@ -213,47 +184,3 @@ export function UiMap_CreatePin({
</>
);
}
function ButtonSavePin({
namePin,
lat,
long,
portofolioId,
file,
}: {
namePin: string;
lat: string;
long: string;
portofolioId: string;
file: FormData;
}) {
const router = useRouter();
async function onSavePin() {
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);
}
return (
<>
<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>
</>
);
}

50
src/app_modules/map/ui/ui_custom_pin.tsx
View File

@@ -11,13 +11,7 @@ import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empt
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 {
Avatar,
Button,
Center,
FileButton,
Stack
} from "@mantine/core";
import { Avatar, Button, Center, FileButton, Stack } from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
@@ -31,6 +25,8 @@ import {
import { map_funCustomPinMap } from "../fun";
import { defaultMapZoom } from "../lib/default_lat_long";
import { MODEL_MAP } from "../lib/interface";
import { APIs, DIRECTORY_ID } from "@/app/lib";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
export function UiMap_CustomPin({
dataMap,
@@ -62,7 +58,7 @@ export function UiMap_CustomPin({
<Avatar
size={200}
radius={"100%"}
src={imgPin ? imgPin : "/aset/no-img.png"}
src={imgPin ? imgPin : "/aset/global/no-image.svg"}
style={{
border: `2px solid ${AccentColor.skyblue}`,
backgroundColor: AccentColor.darkblue,
@@ -75,9 +71,9 @@ export function UiMap_CustomPin({
size={200}
radius={"100%"}
src={
data.imagePinId === null
? RouterPortofolio.api_logo_porto + data.Portofolio.logoId
: RouterMap.api_custom_pin + data.imagePinId
data.pinId === null
? APIs.GET + data.Portofolio.logoId
: APIs.GET + data.pinId
}
style={{
border: `2px solid ${AccentColor.skyblue}`,
@@ -158,9 +154,9 @@ export function UiMap_CustomPin({
src={
imgPin
? imgPin
: data.imagePinId === null
? RouterPortofolio.api_logo_porto + data.Portofolio.logoId
: RouterMap.api_custom_pin + data.imagePinId
: data.pinId === null
? APIs.GET + data.Portofolio.logoId
: APIs.GET + data.pinId
}
style={{
border: `2px solid ${AccentColor.softblue}`,
@@ -180,23 +176,27 @@ export function UiMap_CustomPin({
);
}
function ButtonSimpan({
mapId,
filePin,
}: {
mapId: string;
filePin: FormData;
}) {
function ButtonSimpan({ mapId, filePin }: { mapId: string; filePin: File }) {
const router = useRouter();
const [isLoading, setLoading] = useState(false);
async function onCustom() {
const file = new FormData();
file.append("file", filePin as any);
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: filePin,
dirId: DIRECTORY_ID.map_pin,
});
const res = await map_funCustomPinMap({ mapId: mapId, file: file });
if (!uploadFileToStorage.success)
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
const res = await map_funCustomPinMap({
mapId: mapId,
fileId: uploadFileToStorage.data.id,
});
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
? (ComponentGlobal_NotifikasiBerhasil(res.message),
setLoading(true),
router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
}

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

@@ -19,7 +19,9 @@ import {
Image,
Paper,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
@@ -33,6 +35,9 @@ import Map, {
import { map_funEditMap } from "../fun/edit/fun_edit_map";
import { defaultMapZoom } from "../lib/default_lat_long";
import { MODEL_MAP } from "../lib/interface";
import { APIs } from "@/app/lib";
import { ComponentGlobal_BoxUploadImage, ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
import { ComponentMap_ButtonUpdateDataMap } from "../_component";
export function UiMap_EditMap({
mapboxToken,
@@ -84,9 +89,9 @@ export function UiMap_EditMap({
>
<Avatar
src={
data.ImagePin === null
? RouterPortofolio.api_logo_porto + dataMap.Portofolio.logoId
: RouterMap.api_custom_pin + data.imagePinId
data.pinId === null
? APIs.GET + dataMap.Portofolio.logoId
: APIs.GET + data.pinId
}
alt="Logo"
style={{
@@ -127,11 +132,29 @@ export function UiMap_EditMap({
/>
</Paper>
{/* Foto Usaha */}
{/* Photo Usaha */}
<Stack spacing={"xs"}>
<ComponentGlobal_BoxInformation informasi="Masukan foto toko atau tempat usaha anda !" />
<ComponentGlobal_BoxInformation informasi="Masukan photo toko atau tempat usaha anda !" />
{img ? (
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
<Image
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
alt="Photo"
height={250}
src={img}
/>
</AspectRatio>
) : (
<ComponentGlobal_LoadImage
url={APIs.GET + data.imageId}
/>
)}
</ComponentGlobal_BoxUploadImage>
{/* {img ? (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
style={{
@@ -143,7 +166,7 @@ export function UiMap_EditMap({
>
<Image
radius={"sm"}
alt="Foto"
alt="Photo"
src={img ? img : "/aset/no-img.png"}
maw={250}
/>
@@ -161,13 +184,13 @@ export function UiMap_EditMap({
>
<Image
radius={"sm"}
alt="Foto"
src={RouterMap.api_foto + data.imageMapId}
alt="Photo"
src={RouterMap.api_foto + data.imageId}
maw={250}
/>
</Paper>
</AspectRatio>
)}
)} */}
<Center>
<FileButton
@@ -207,41 +230,10 @@ export function UiMap_EditMap({
</Center>
</Stack>
<ButtonSavePin data={data as any} file={file} />
<ComponentMap_ButtonUpdateDataMap 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
mb={"xl"}
style={{ transition: "0.5s" }}
disabled={data.namePin === "" ? true : false}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => onSavePin()}
>
Simpan
</Button>
</>
);
}

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

@@ -1,8 +1,8 @@
"use client";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
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";
@@ -18,7 +18,6 @@ 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 ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
export function UiMap_MapBoxView({
mapboxToken,
@@ -91,9 +90,9 @@ export function UiMap_MapBoxView({
backgroundColor: "white",
}}
src={
e.imagePinId === null
? RouterPortofolio.api_logo_porto + e.Portofolio.logoId
: RouterMap.api_custom_pin + e.imagePinId
e.pinId === null
? APIs.GET + e.Portofolio.logoId
: APIs.GET + e.pinId
}
/>
</Stack>