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

# fix

Browse Source 
## Deskripsi:
- Perubahan tampilan notifikasi
- Pin map sesuai logo
- Pin map bisa custom
### No Issue
This commit is contained in:
Bagasbanuna02
2024-08-23 14:15:11 +08:00
parent cae318c5e3
commit a6bb993b0d
75 changed files with 1602 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,6 +30,7 @@ import { useRouter } from "next/navigation";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
import Link from "next/link";
export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
const router = useRouter();
@@ -48,7 +49,7 @@ export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
return (
<>
<Stack mt={"lg"} spacing={"xl"}>
<Stack mt={"lg"} spacing={"xl"} px={"md"}>
<ComponentGlobal_AuthorNameOnHeader
authorName={data?.Author?.username}
imagesId={data?.Author?.Profile?.imagesId}
@@ -69,7 +70,7 @@ export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
mah={300}
maw={200}
alt="Foto"
src={RouterMap.api_foto + data?.imagesId}
src={RouterMap.api_foto + data?.imageMapId}
/>
<Box>
<Grid>
@@ -116,24 +117,35 @@ export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
{ maxWidth: 600, cols: 1, spacing: "sm" },
]}
>
<Box />
<Button
onClick={() => {
router.push(RouterPortofolio.main_detail + data?.Portofolio.id, {
scroll: false,
});
}}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Detail
</Button>
<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>
<Button
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => {
window.open(
`https://maps.google.com?q=${data?.latitude},${data?.longitude}`,
"_blank",
"width=800,height=600,noopener,noreferrer"
);
}}
>
Buka Maps
</Button>
</SimpleGrid>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}

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

@@ -29,7 +29,7 @@ export async function map_funCreatePin({ data }: { data: any }) {
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);
fs.writeFileSync(`./public/map/foto/${uploadImage.url}`, upload_Folder);
const create = await prisma.businessMaps.create({
data: {
@@ -38,7 +38,7 @@ export async function map_funCreatePin({ data }: { data: any }) {
namePin: data.namePin,
portofolioId: data?.portofolioId,
authorId: authorId,
imagesMapId: uploadImage.id,
imageMapId: uploadImage.id,
},
});

50
src/app_modules/map/fun/edit/fun_custom_pin_map.ts Normal file
View File

@@ -0,0 +1,50 @@
"use server";
import prisma from "@/app/lib/prisma";
import _ from "lodash";
import { v4 } from "uuid";
import fs from "fs";
import { revalidatePath } from "next/cache";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
export async function map_funCustomPinMap({
mapId,
file,
}: {
mapId: string;
file: FormData;
}) {
const newPin: any = file.get("file");
const fileName = newPin.name;
const fileExtension = _.lowerCase(newPin.name.split(".").pop());
const fileRandomName = v4(fileName) + "." + fileExtension;
const uploadPin = await prisma.images.create({
data: {
url: fileRandomName,
label: "MAP_CUSTOM_PIN",
},
select: {
id: true,
url: true,
},
});
if (!uploadPin) return { status: 400, message: "Gagal upload foto lokasi" };
const upload_Folder = Buffer.from(await newPin.arrayBuffer());
fs.writeFileSync(`./public/map/pin/${uploadPin.url}`, upload_Folder);
const updt = await prisma.businessMaps.update({
where: {
id: mapId,
},
data: {
imagePinId: uploadPin.id,
},
});
if (!updt) return { status: 400, message: "Gagal update pin" };
revalidatePath(RouterPortofolio.main_detail)
return { status: 200, message: "Berhasil update pin" };
}

5
src/app_modules/map/fun/edit/fun_edit_map.ts
View File

@@ -11,6 +11,7 @@ import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
export async function map_funEditMap({
data,
file,
}: {
data: MODEL_MAP;
file: FormData;
@@ -37,7 +38,7 @@ export async function map_funEditMap({
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);
fs.writeFileSync(`./public/map/foto/${uploadImage.url}`, upload_Folder);
const updt = await prisma.businessMaps.update({
where: {
@@ -47,7 +48,7 @@ export async function map_funEditMap({
latitude: data.latitude,
longitude: data.longitude,
namePin: data.namePin,
imagesMapId: uploadImage.id,
imageMapId: uploadImage.id,
},
});

7
src/app_modules/map/fun/get/fun_get_all_map.ts
View File

@@ -7,6 +7,13 @@ export async function map_funGetAllMap() {
where: {
isActive: true,
},
include: {
Portofolio: {
select: {
logoId: true,
},
},
},
});
return data;

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

@@ -28,7 +28,7 @@ export async function map_funGetOneById({ mapId }: { mapId: string }) {
latitude: true,
longitude: true,
authorId: true,
imagesMapId: true,
imageMapId: true,
Portofolio: {
select: {
id: true,

20
src/app_modules/map/fun/get/fun_get_one_by_portofolio_id.ts
View File

@@ -2,7 +2,7 @@
import prisma from "@/app/lib/prisma";
export async function map_funGetOneByPortofolioId({
export async function map_funGetOneBusinessMapByPortofolioId({
portofolioId,
}: {
portofolioId: string;
@@ -11,13 +11,17 @@ export async function map_funGetOneByPortofolioId({
where: {
portofolioId: portofolioId,
},
select: {
id: true,
namePin: true,
latitude: true,
longitude: true,
imagesMapId: true,
},
include: {
ImageMap: true,
ImagePin: true,
Portofolio: {
select: {
id: true,
Logo: true,
logoId: true
}
}
}
});
return res;

3
src/app_modules/map/fun/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import { map_funCustomPinMap } from "./edit/fun_custom_pin_map";
export { map_funCustomPinMap };

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

@@ -1,3 +1,3 @@
export const defaultLatLong = [-8.723606930462012, 115.17496509980654];
export const defaultMapZoom = 12
export const defaultLatLong = [-8.745326073272455, 115.17319973054386];
export const defaultMapZoom = 11

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

@@ -13,5 +13,8 @@ export interface MODEL_MAP {
Author: MODEL_USER;
portofolioId: string;
Portofolio: MODEL_PORTOFOLIO
imagesId: string
imageMapId: string
ImageMap: any
imagePinId: string
ImagePin: any
}

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

@@ -1,4 +1,5 @@
export { UiMap_MapBoxView } from "./ui_map";
export { UiMap_SplashView } from "./ui_splash";
export { UiMap_CreatePin } from "./ui_create_pin"
export { UiMap_EditPin } from "./ui_edit_pin"
export { UiMap_CreatePin } from "./ui_create_pin";
export { UiMap_EditMap as UiMap_EditPin } from "./ui_edit_map";
export { UiMap_CustomPin } from "./ui_custom_pin";

224
src/app_modules/map/ui/ui_custom_pin.tsx Normal file
View File

@@ -0,0 +1,224 @@
"use client";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
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 { IconCamera } from "@tabler/icons-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import {
AttributionControl,
Map,
Marker,
NavigationControl,
ScaleControl,
} from "react-map-gl";
import { map_funCustomPinMap } from "../fun";
import { defaultMapZoom } from "../lib/default_lat_long";
import { MODEL_MAP } from "../lib/interface";
export function UiMap_CustomPin({
dataMap,
mapboxToken,
}: {
dataMap: MODEL_MAP;
mapboxToken: string;
}) {
const [data, setData] = useState(dataMap);
const [filePin, setFilePin] = useState<File | any>(null);
const [imgPin, setImgPin] = useState<any | null>(null);
if (!mapboxToken)
return <ComponentGlobal_IsEmptyData text="Mapbox token not found" />;
return (
<>
{/* Logo Custom */}
<Stack spacing={50} px={"sm"} mb={"md"}>
<Stack>
<ComponentGlobal_BoxInformation
informasi={
"Pin map akan secara otomatis menampilkan logo pada porotofolio ini, jika anda ingin melakukan custom silahkan upload logo pin baru anda !"
}
/>
{imgPin ? (
<Center>
<Avatar
size={200}
radius={"100%"}
src={imgPin ? imgPin : "/aset/no-img.png"}
style={{
border: `2px solid ${AccentColor.skyblue}`,
backgroundColor: AccentColor.darkblue,
}}
/>
</Center>
) : (
<Center>
<Avatar
size={200}
radius={"100%"}
src={
data.imagePinId === null
? RouterPortofolio.api_logo_porto + data.Portofolio.logoId
: RouterMap.api_custom_pin + data.imagePinId
}
style={{
border: `2px solid ${AccentColor.skyblue}`,
backgroundColor: AccentColor.darkblue,
}}
/>
</Center>
)}
<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 {
setImgPin(buffer);
setFilePin(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>
{/* Map */}
<Map
mapboxAccessToken={mapboxToken}
mapStyle={"mapbox://styles/mapbox/streets-v11"}
initialViewState={{
latitude: data.latitude,
longitude: data.longitude,
zoom: defaultMapZoom,
}}
style={{
cursor: "pointer",
width: "100%",
height: "30vh",
borderRadius: "10px",
}}
attributionControl={false}
>
<Marker
style={{
color: "red",
width: 40,
// height: 40,
cursor: "pointer",
}}
latitude={data.latitude}
longitude={data.longitude}
anchor="bottom"
>
<Avatar
alt="Logo"
src={
imgPin
? imgPin
: data.imagePinId === null
? RouterPortofolio.api_logo_porto + data.Portofolio.logoId
: RouterMap.api_custom_pin + data.imagePinId
}
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: "white",
borderRadius: "100%",
}}
/>
</Marker>
<NavigationControl />
<ScaleControl position="top-left" />
<AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
</Map>
<ButtonSimpan mapId={data.id} filePin={filePin} />
</Stack>
</>
);
}
function ButtonSimpan({
mapId,
filePin,
}: {
mapId: string;
filePin: FormData;
}) {
const router = useRouter();
const [isLoading, setLoading] = useState(false);
async function onCustom() {
const file = new FormData();
file.append("file", filePin as any);
const res = await map_funCustomPinMap({ mapId: mapId, file: file });
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
}
return (
<>
<Button
disabled={filePin == null}
loaderPosition="center"
loading={isLoading}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
style={{
transition: "0.5s",
}}
onClick={() => {
onCustom();
}}
>
Simpan
</Button>
</>
);
}

52
src/app_modules/map/ui/ui_edit_pin.tsx → src/app_modules/map/ui/ui_edit_map.tsx
View File

@@ -1,27 +1,27 @@
"use client";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
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,
Avatar,
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, {
@@ -30,13 +30,11 @@ import Map, {
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";
import { defaultMapZoom } from "../lib/default_lat_long";
import { MODEL_MAP } from "../lib/interface";
export function UiMap_EditPin({
export function UiMap_EditMap({
mapboxToken,
dataMap,
}: {
@@ -47,10 +45,9 @@ export function UiMap_EditPin({
const [file, setFile] = useState<File | any>(null);
const [img, setImg] = useState<any | null>(null);
return (
<>
<Stack>
<Stack spacing={30} px={"sm"}>
<Map
mapboxAccessToken={mapboxToken}
mapStyle={"mapbox://styles/mapbox/streets-v11"}
@@ -85,13 +82,20 @@ export function UiMap_EditPin({
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>
<Avatar
src={
data.ImagePin === null
? RouterPortofolio.api_logo_porto + dataMap.Portofolio.logoId
: RouterMap.api_custom_pin + data.imagePinId
}
alt="Logo"
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: "white",
borderRadius: "100%",
}}
/>
</Marker>
<NavigationControl />
<ScaleControl position="top-left" />
@@ -123,7 +127,10 @@ export function UiMap_EditPin({
/>
</Paper>
<Stack>
{/* Foto Usaha */}
<Stack spacing={"xs"}>
<ComponentGlobal_BoxInformation informasi="Masukan foto toko atau tempat usaha anda !" />
{img ? (
<AspectRatio ratio={1 / 1} mah={300}>
<Paper
@@ -155,7 +162,7 @@ export function UiMap_EditPin({
<Image
radius={"sm"}
alt="Foto"
src={RouterMap.api_foto + data.imagesId}
src={RouterMap.api_foto + data.imageMapId}
maw={250}
/>
</Paper>
@@ -214,8 +221,7 @@ function ButtonSavePin({ data, file }: { data: MODEL_MAP; file: FormData }) {
const res = await map_funEditMap({
data: data,
file: gambar
file: gambar,
});
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
@@ -225,7 +231,7 @@ function ButtonSavePin({ data, file }: { data: MODEL_MAP; file: FormData }) {
return (
<>
<Button
mt={"xl"}
mb={"xl"}
style={{ transition: "0.5s" }}
disabled={data.namePin === "" ? true : false}
radius={"xl"}

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

@@ -1,6 +1,9 @@
"use client";
import { Image, Stack, Text } from "@mantine/core";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { Avatar, Stack } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import "mapbox-gl/dist/mapbox-gl.css";
import { useState } from "react";
@@ -8,13 +11,14 @@ import Map, {
AttributionControl,
Marker,
NavigationControl,
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 ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
export function UiMap_MapBoxView({
mapboxToken,
@@ -36,6 +40,9 @@ export function UiMap_MapBoxView({
setData(loadData as any);
}
if (!mapboxToken)
return <ComponentGlobal_IsEmptyData text="Mapbox token not found" />;
return (
<>
<Stack style={{ borderRadius: "10px" }}>
@@ -76,25 +83,19 @@ export function UiMap_MapBoxView({
setOpenDrawer(true);
}}
>
<Image
w={"100%"}
alt="image"
src="https://cdn-icons-png.flaticon.com/512/5860/5860579.png"
/>
<Text
fz={"xs"}
bg={"dark"}
c={"white"}
align="center"
<Avatar
alt="Logo"
style={{
borderRadius: "5px",
padding: "5px",
width: 50,
border: `2px solid ${AccentColor.softblue}`,
borderRadius: "100%",
backgroundColor: "white",
}}
lineClamp={2}
>
{e.namePin}
</Text>
src={
e.imagePinId === null
? RouterPortofolio.api_logo_porto + e.Portofolio.logoId
: RouterMap.api_custom_pin + e.imagePinId
}
/>
</Stack>
</Marker>
</Stack>

16
src/app_modules/map/view/custom_pin.tsx Normal file
View File

@@ -0,0 +1,16 @@
import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { UiMap_CustomPin } from "../ui";
const mapboxToken = process.env.MAPBOX_TOKEN!;
export async function Map_CustomPin({ dataMap }: { dataMap: any }) {
return (
<>
<UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Custom Pin" />}
>
<UiMap_CustomPin mapboxToken={mapboxToken} dataMap={dataMap} />
</UIGlobal_LayoutTamplate>
</>
);
}

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

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

11
src/app_modules/map/view/main_view.tsx
View File

@@ -1,11 +1,14 @@
import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
import { ComponentMap_Header } from "../_component";
import { UiMap_MapBoxView } from "../ui";
import { map_funGetAllMap } from "../fun/get/fun_get_all_map";
export async function Map_View({ mapboxToken }: { mapboxToken: string }) {
const dataMap = await map_funGetAllMap();
export async function Map_View({
dataMap,
mapboxToken,
}: {
dataMap: any[];
mapboxToken: string;
}) {
return (
<>
<UIGlobal_LayoutTamplate header={<ComponentMap_Header />}>