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

8
prisma/schema.prisma
View File

@@ -113,8 +113,6 @@ model Images {
Donasi_Kabar Donasi_Kabar[]
Donasi_PencairanDana Donasi_PencairanDana[]
Donasi_Invoice Donasi_Invoice[]
Image_Map BusinessMaps[] @relation("ImageMap")
Image_Pin BusinessMaps[] @relation("ImagePin")
Investasi_Invoice Investasi_Invoice[]
}
@@ -926,10 +924,8 @@ model BusinessMaps {
authorId String?
Portofolio Portofolio? @relation(fields: [portofolioId], references: [id])
portofolioId String? @unique
ImageMap Images? @relation("ImageMap", fields: [imageMapId], references: [id], map: "MapImage")
imageMapId String?
ImagePin Images? @relation("ImagePin", fields: [imagePinId], references: [id], map: "PinImage")
imagePinId String?
imageId String?
pinId String?
}
// Kategori App

BIN
public/aset/global/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

2
public/aset/global/no-image.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" id="icon" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title>no-image</title><path d="M30,3.4141,28.5859,2,2,28.5859,3.4141,30l2-2H26a2.0027,2.0027,0,0,0,2-2V5.4141ZM26,26H7.4141l7.7929-7.793,2.3788,2.3787a2,2,0,0,0,2.8284,0L22,19l4,3.9973Zm0-5.8318-2.5858-2.5859a2,2,0,0,0-2.8284,0L19,19.1682l-2.377-2.3771L26,7.4141Z"/><path d="M6,22V19l5-4.9966,1.3733,1.3733,1.4159-1.416-1.375-1.375a2,2,0,0,0-2.8284,0L6,16.1716V6H22V4H6A2.002,2.002,0,0,0,4,6V22Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 799 B

BIN
public/donasi/invoice/b097f87e-c2ac-475d-8c5b-e1b234b18bd7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
public/investasi/invoice/4461efd1-2359-47c3-99ef-8999f2fed8da.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
public/map/foto/b41cb5aa-a45d-4ac6-84ba-ad012402b70a.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/map/pin/b7774485-6afc-4770-95ac-fbc0c50c4fdb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

88
src/app/contoh/page.tsx
View File

@@ -1,51 +1,53 @@
"use client";
import { ComponentNotifikasi_CardSkeleton } from "@/app_modules/notifikasi/component";
import Coba_UploadFile from "@/app_modules/zCoba/ui_coba_upload_file";
import { Box, Button, Flex, Paper, Stack, Title } from "@mantine/core";
import { Box, Center, Image, Loader, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
export default function Page() {
return (
<>
<Coba_UploadFile />
<LoadImage
url={
"https://wibu-storage.wibudev.com/api/files/cm192febp004jkp7j2x1fgekw"
}
/>
</>
);
return (
<Stack
bg={"gray"}
h={"100vh"}
style={{
position: "relative",
width: "100%",
overflow: "scroll",
}}
>
<Box
p={"md"}
style={{
display: "flex",
// width: "700px",
gap: "20px",
position: "relative",
overflowX: "scroll",
// scrollSnapType: "x",
// scrollbarGutter: "unset",
scrollbarWidth: "none",
backgroundColor: "red",
}}
>
<Flex gap={"md"} bg={"cyan"}>
{Array.from(new Array(10), (_, i) => (
<Paper component={Button} w={"200px"} px={"md"} key={i}>
Contoh
</Paper>
))}
</Flex>
</Box>
<Stack>
<Title>Ini Bagian Yang Gak Ikut</Title>
</Stack>
</Stack>
);
}
function LoadImage({ url }: { url: string }) {
const [ada, setAda] = useState<boolean | null>(null);
useShallowEffect(() => {
load();
}, []);
async function load() {
try {
const res = await fetch(url);
if (res.ok) {
return setAda(true);
}
setAda(false);
} catch (error) {
console.log("");
}
}
if (ada === null)
return (
<Box w={100}>
<Image w={"100%"} src={"/aset/global/loading.gif"} alt="" />
</Box>
);
if (!ada)
return (
<Image
src={
"https://cdn.idntimes.com/content-images/community/2021/06/2318629899-0991efc170-o-cropped-56965fbaa68adf470a17cc45ea5d328d-321a5127ded916230393dbb7bf7d130e_600x400.jpg"
}
alt=""
/>
);
return <Image src={url} alt="" />;
}

6
src/app/dev/portofolio/main/[id]/page.tsx
View File

@@ -4,14 +4,14 @@ import { portofolio_getOneById } from "@/app_modules/katalog/portofolio/fun/get/
const mapboxToken = process.env.MAPBOX_TOKEN!;
export default async function Page({ params }: { params: { id: string } }) {
const getPorto = await portofolio_getOneById(params.id);
const portofolioId = params.id;
const dataPortofolio = await portofolio_getOneById(portofolioId);
const userLoginId = await funGetUserIdByToken();
return (
<>
{/* <pre style={{ color: "white" }}>{JSON.stringify(getPorto, null, 2)}</pre> */}
<ViewPortofolio
dataPorto={getPorto as any}
dataPorto={dataPortofolio as any}
userLoginId={userLoginId as any}
mapboxToken={mapboxToken}
/>

79
src/app_modules/_global/component/comp_load_image.tsx Normal file
View File

@@ -0,0 +1,79 @@
"use client";
import { AspectRatio, Box, Center, Image } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useState } from "react";
import ComponentGlobal_Loader from "./loader";
export function ComponentGlobal_LoadImage({
url,
maw,
h,
}: {
url: string;
maw?: number;
h?: number;
}) {
const [isImage, setIsImage] = useState<boolean | null>(null);
useShallowEffect(() => {
onLoadImage();
}, []);
async function onLoadImage() {
try {
const res = await fetch(url);
if (res.ok) {
return setIsImage(true);
}
setIsImage(false);
} catch (error) {
console.log(error);
}
}
if (isImage === null)
return (
<Center h={h ? h : 250}>
<ComponentGlobal_Loader variant="dots" size={50} />
</Center>
);
if (!isImage)
return (
<>
<Center h={250}>
<Image
alt="No Image"
maw={150}
m={"auto"}
p={"xs"}
src={"/aset/global/no-image.svg"}
/>
</Center>
</>
);
return (
<>
{h ? (
<Image
height={h}
alt="Image"
maw={maw ? maw : 200}
m={"auto"}
p={"xs"}
src={url}
/>
) : (
<Image
alt="Image"
maw={maw ? maw : 200}
m={"auto"}
p={"xs"}
src={url}
/>
)}
</>
);
}

2
src/app_modules/_global/component/index.ts
View File

@@ -2,6 +2,7 @@ import ComponentGlobal_BoxInformation from "./box_information";
import ComponentGlobal_AvatarAndAuthorName from "./comp_author_name_and_avatar";
import { ComponentGlobal_BoxUploadImage } from "./comp_box_upload_image";
import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
import { ComponentGlobal_LoadImage } from "./comp_load_image";
import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
import ComponentGlobal_TampilanRupiah from "./comp_tampilan_rupiah";
@@ -15,3 +16,4 @@ export { ComponentGlobal_BoxInformation };
export { ComponentGlobal_InputCountDown };
export { ComponentGlobal_CardStyles };
export { ComponentGlobal_BoxUploadImage };
export { ComponentGlobal_LoadImage };

16
src/app_modules/admin/map/component/comp_detail_data_drawer.tsx
View File

@@ -1,21 +1,21 @@
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import { APIs } from "@/app/lib";
import { MODEL_MAP } from "@/app_modules/map/lib/interface";
import {
Stack,
AspectRatio,
Box,
Grid,
Image,
Text,
Button,
Center,
Grid,
Image,
Stack,
Text,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import {
IconBuildingSkyscraper,
IconListDetails,
IconPhoneCall,
IconMapPin,
IconPhoneCall,
IconPinned,
} from "@tabler/icons-react";
import { useState } from "react";
@@ -48,8 +48,8 @@ export function ComponentAdminMap_DetailDataDrawer({
<Image
radius={"md"}
width={300}
alt="Foto"
src={RouterMap.api_foto + data?.imageMapId}
alt="Photo"
src={APIs.GET + data?.imageId}
/>
</AspectRatio>

1
src/app_modules/admin/map/fun/fun_get_all_maps.ts
View File

@@ -11,7 +11,6 @@ export async function adminMap_funGetAllMaps() {
isActive: true,
},
include: {
ImagePin: true,
Portofolio: true,
},
});

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

@@ -8,8 +8,6 @@ export async function adminMap_funGetOneById({ mapId }: { mapId: string }) {
id: mapId,
},
include: {
ImageMap: true,
ImagePin: true,
Author: true,
Portofolio: {
include: {

7
src/app_modules/admin/map/ui/ui_map_view.tsx
View File

@@ -19,6 +19,7 @@ import { ComponentAdminMap_Drawer } from "../component";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import { APIs } from "@/app/lib";
export function UiAdminMap_MapBoxView({
mapboxToken,
@@ -88,9 +89,9 @@ export function UiAdminMap_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>

60
src/app_modules/job/component/detail/detail_data.tsx
View File

@@ -18,6 +18,7 @@ import {
import { MODEL_JOB } from "../../model/interface";
import { useState } from "react";
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
export default function ComponentJob_DetailData({
data,
@@ -44,36 +45,37 @@ export default function ComponentJob_DetailData({
<Card.Section px={"xs"} pb={"lg"}>
<Stack spacing={"xl"}>
{data.imageId ? (
<Stack align="center">
{isLoading ? (
<Paper
style={{ zIndex: 1, position: "relative" }}
w={200}
h={300}
bg={AccentColor.blackgray}
>
<Center h={"100%"}>
<ComponentGlobal_Loader size={30} variant="dots" />
</Center>
</Paper>
) : (
""
)}
<Image
style={{ zIndex: 2, position: "relative" }}
onLoad={() => {
setIsLoading(false);
}}
onError={() => {
setIsLoading(false);
}}
alt="Image"
src={APIs.GET + data?.imageId}
maw={200}
/>
</Stack>
<ComponentGlobal_LoadImage url={APIs.GET + data?.imageId} />
) : (
// <Stack align="center">
// {isLoading ? (
// <Paper
// style={{ zIndex: 1, position: "relative" }}
// w={200}
// h={300}
// bg={AccentColor.blackgray}
// >
// <Center h={"100%"}>
// <ComponentGlobal_Loader size={30} variant="dots" />
// </Center>
// </Paper>
// ) : (
// ""
// )}
// <Image
// style={{ zIndex: 2, position: "relative" }}
// onLoad={() => {
// setIsLoading(false);
// }}
// onError={() => {
// setIsLoading(false);
// }}
// alt="Image"
// src={APIs.GET + data?.imageId}
// maw={200}
// />
// </Stack>
""
)}

72
src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx Normal file
View File

@@ -0,0 +1,72 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import {
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
ComponentGlobal_NotifikasiPeringatan,
} from "@/app_modules/_global/notif_global";
import { Button } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib";
import { portofolio_funEditLogoBisnisById } from "../../fun";
export function ComponentPortofolio_ButtonEditLogoBisnis({
file,
portofolioId,
}: {
file: File;
portofolioId: string;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
async function onUpdate() {
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.portofolio_logo,
});
if (!uploadFileToStorage.success)
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
const res = await portofolio_funEditLogoBisnisById({
portofolioId: portofolioId,
logoId: uploadFileToStorage.data.id,
});
if (res.status === 200) {
setLoading(true);
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
}
return (
<>
{file ? (
<Button
loaderPosition="center"
loading={loading ? true : false}
radius={"xl"}
onClick={() => onUpdate()}
bg={MainColor.yellow}
color="yellow"
c={"black"}
style={{
transition: "0.5s",
border: `1px solid ${AccentColor.yellow}`,
}}
>
Simpan
</Button>
) : (
<Button disabled radius={"xl"}>
Simpan
</Button>
)}
</>
);
}

9
src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
View File

@@ -1,6 +1,7 @@
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import { MainColor } from "@/app_modules/_global/color";
import {
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
ComponentGlobal_NotifikasiPeringatan,
} from "@/app_modules/_global/notif_global";
@@ -42,23 +43,23 @@ export function Portofolio_ComponentButtonSelanjutnya({
if (_.values(porto).includes(""))
return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
const uploadFile = await funGlobal_UploadToStorage({
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.portofolio_logo,
});
if (!uploadFile.success)
if (!uploadFileToStorage.success)
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
const res = await funCreatePortofolio({
profileId: profileId,
data: dataPortofolio as any,
medsos: dataMedsos,
fileId: uploadFile.data.id,
fileId: uploadFileToStorage.data.id,
});
if (res.status === 201) {
setLoading(true);
// ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
router.replace(RouterMap.create + res.id, { scroll: false });
} else {
ComponentGlobal_NotifikasiGagal("Gagal disimpan");

17
src/app_modules/katalog/portofolio/component/detail_data_drawer_map.tsx
View File

@@ -1,8 +1,10 @@
"use client";
import { APIs } from "@/app/lib";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
import { ComponentMap_SkeletonDrawerDetailData } from "@/app_modules/map/_component";
import { map_funGetOneById } from "@/app_modules/map/fun/get/fun_get_one_by_id";
import { MODEL_MAP } from "@/app_modules/map/lib/interface";
@@ -14,7 +16,7 @@ import {
Image,
SimpleGrid,
Stack,
Text
Text,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import {
@@ -39,7 +41,7 @@ export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
setData(res);
}
if(!data) return <ComponentMap_SkeletonDrawerDetailData/>
if (!data) return <ComponentMap_SkeletonDrawerDetailData />;
return (
<>
@@ -59,13 +61,14 @@ export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
{ maxWidth: 600, cols: 1, spacing: "sm" },
]}
>
<Image
<ComponentGlobal_LoadImage maw={200} url={APIs.GET + data.imageId} />
{/* <Image
radius={"sm"}
mah={300}
maw={200}
alt="Foto"
src={RouterMap.api_foto + data?.imageMapId}
/>
alt="Photo"
src={APIs.GET + data.imageId}
/> */}
<Box>
<Grid>
<Grid.Col span={2}>
@@ -114,8 +117,6 @@ export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
<Box />
<Group position="center">
<Button
radius={"xl"}
bg={MainColor.yellow}

2
src/app_modules/katalog/portofolio/component/index.ts
View File

@@ -1,4 +1,6 @@
import { ComponentPortofolio_ButtonEditLogoBisnis } from "./button/comp_button_edit_logo_bisnis";
import { Portofolio_ComponentButtonSelanjutnya } from "./button/comp_button_selanjutnya";
export { ComponentPortofolio_DetailDataMap } from "./detail_data_drawer_map";
export { Portofolio_ComponentButtonSelanjutnya };
export { ComponentPortofolio_ButtonEditLogoBisnis };

29
src/app_modules/katalog/portofolio/create/view.tsx
View File

@@ -1,26 +1,17 @@
"use client";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import {
BIDANG_BISNIS_OLD,
MODEL_PORTOFOLIO_OLD,
} from "@/app_modules/model_global/portofolio";
import { BIDANG_BISNIS_OLD } from "@/app_modules/model_global/portofolio";
import {
AspectRatio,
Box,
Button,
Center,
FileButton,
Image,
Paper,
Select,
Stack,
Text,
@@ -30,12 +21,8 @@ import {
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import _ from "lodash";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { useState } from "react";
import funCreatePortofolio from "../fun/fun_create_portofolio";
import { Portofolio_ComponentButtonSelanjutnya } from "../component";
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
export default function CreatePortofolio({
bidangBisnis,
@@ -172,16 +159,6 @@ export default function CreatePortofolio({
<Stack>
<ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda!" />
{/* <AspectRatio ratio={16 / 9}>
<Paper radius={"md"} withBorder>
<Image alt="Foto" src={img ? img : "/aset/no-img.png"} />
</Paper>
</AspectRatio>
{isFile ? <ComponentGlobal_ErrorInput text="Upload gambar" /> : ""} */}
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>

99
src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
View File

@@ -1,39 +1,25 @@
"use client";
import {
RouterPortofolio
} from "@/app/lib/router_hipmi/router_katalog";
import { APIs } from "@/app/lib";
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 {
AspectRatio,
Button,
Center,
FileButton,
Image,
Paper,
Stack
} from "@mantine/core";
import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
import { Button, Center, FileButton, Image, Paper, Stack } from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Portofolio_funEditLogoBisnisById } from "../../fun/edit/fun_edit_logo_bisnis_by_id";
import { MODEL_PORTOFOLIO } from "../../model/interface";
import { ComponentPortofolio_ButtonEditLogoBisnis } from "../../component";
export default function Portofolio_EditLogoBisnis({
dataPorto,
}: {
dataPorto: MODEL_PORTOFOLIO;
}) {
const router = useRouter();
const [file, setFile] = useState<File | null>(null);
const [image, setImage] = useState<any | null>(null);
const [loading, setLoading] = useState(false);
const [img, setImg] = useState<any | null>(null);
return (
<>
<Stack spacing={"xl"} px={"sm"}>
@@ -47,17 +33,13 @@ export default function Portofolio_EditLogoBisnis({
color: "white",
}}
>
<Stack>
<AspectRatio ratio={1 / 1}>
<Image
alt="Foto"
src={
image
? image
: RouterPortofolio.api_logo_porto + `${dataPorto.logoId}`
}
/>
</AspectRatio>
<Stack align="center">
{img ? (
<Image maw={250} alt="Image" src={img} />
) : (
<ComponentGlobal_LoadImage url={APIs.GET + dataPorto.logoId} />
)}
<Center>
<FileButton
onChange={async (files: any | null) => {
@@ -65,9 +47,7 @@ export default function Portofolio_EditLogoBisnis({
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
// console.log(buffer, "ini buffer");
// console.log(files, " ini file");
setImage(buffer);
setImg(buffer);
setFile(files);
} catch (error) {
console.log(error);
@@ -91,54 +71,11 @@ export default function Portofolio_EditLogoBisnis({
</Center>
</Stack>
</Paper>
{file ? (
<Button
radius={"xl"}
onClick={() =>
// onUpdate(router, dataPorto.id, file as any, setLoading)
console.log("apa")
}
bg={MainColor.yellow}
color="yellow"
c={"black"}
style={{
transition: "0.5s",
border: `1px solid ${AccentColor.yellow}`,
}}
>
Simpan
</Button>
) : (
<Button
disabled
radius={"xl"}
>
Simpan
</Button>
)}
<ComponentPortofolio_ButtonEditLogoBisnis
file={file as any}
portofolioId={dataPorto.id}
/>
</Stack>
</>
);
}
async function onUpdate(
router: AppRouterInstance,
portoId: string,
file: FormData,
setLoading: any
) {
const gambar = new FormData();
gambar.append("file", file as any);
await Portofolio_funEditLogoBisnisById(portoId, gambar).then((res) => {
if (res.status === 200) {
setLoading(true);
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}

38
src/app_modules/katalog/portofolio/fun/edit/fun_edit_logo_bisnis_by_id.ts
View File

@@ -1,41 +1,21 @@
"use server";
import prisma from "@/app/lib/prisma";
import _ from "lodash";
import { v4 } from "uuid";
import fs from "fs";
import { revalidatePath } from "next/cache";
export async function Portofolio_funEditLogoBisnisById(
portoId: string,
file: FormData
) {
const gambar: any = file.get("file");
const fileName = gambar.name;
const fileExtension = _.lowerCase(gambar.name.split(".").pop());
const randomNameFile = v4(fileName) + "." + fileExtension;
const upload = await prisma.images.create({
data: {
url: randomNameFile,
label: "PORTOFOLIO_LOGO",
},
select: {
id: true,
url: true,
},
});
if (!upload) return { status: 400, message: "Gagal upload gambar" };
const upload_toFolder = Buffer.from(await gambar.arrayBuffer());
fs.writeFileSync(`./public/portofolio/logo/${upload.url}`, upload_toFolder);
export async function portofolio_funEditLogoBisnisById({
portofolioId,
logoId,
}: {
portofolioId: string;
logoId: string;
}) {
const updatePorto = await prisma.portofolio.update({
where: {
id: portoId,
id: portofolioId,
},
data: {
logoId: upload.id,
logoId: logoId,
},
});

3
src/app_modules/katalog/portofolio/fun/get/get_one_portofolio.ts
View File

@@ -9,7 +9,6 @@ export async function portofolio_getOneById(portoId: string) {
id: portoId,
},
include: {
Logo: true,
MasterBidangBisnis: {
select: {
id: true,
@@ -31,8 +30,6 @@ export async function portofolio_getOneById(portoId: string) {
BusinessMaps: {
include: {
Author: true,
ImageMap: true,
ImagePin: true,
},
},
},

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

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

67
src/app_modules/katalog/portofolio/ui/ui_detail_data.tsx
View File

@@ -1,29 +1,30 @@
import {
Paper,
Title,
Stack,
Grid,
Text,
SimpleGrid,
Box,
AspectRatio,
Image,
Group,
Divider,
} from "@mantine/core";
import {
IconBuildingSkyscraper,
IconPhoneCall,
IconMapPin,
IconListDetails,
IconPinned,
} from "@tabler/icons-react";
import { MODEL_PORTOFOLIO } from "../model/interface";
import { APIs } from "@/app/lib";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import {
AspectRatio,
Box,
Divider,
Grid,
Group,
Image,
Paper,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import {
IconBuildingSkyscraper,
IconListDetails,
IconMapPin,
IconPhoneCall,
IconPinned,
} from "@tabler/icons-react";
import { MODEL_PORTOFOLIO } from "../model/interface";
import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
export function Portofolio_UiDetailData({
dataPorto,
@@ -47,7 +48,9 @@ export function Portofolio_UiDetailData({
<Title order={6}>Data Bisnis</Title>
<Text color={MainColor.yellow} fw={"bold"}>
id: {" "}
<Text span inherit>#{dataPorto.id_Portofolio}</Text>
<Text span inherit>
#{dataPorto.id_Portofolio}
</Text>
</Text>
</Group>
<Stack>
@@ -61,17 +64,19 @@ export function Portofolio_UiDetailData({
]}
>
<Box>
<AspectRatio ratio={1 / 1} mah={200}>
<Paper>
<Paper>
<ComponentGlobal_LoadImage url={APIs.GET + dataPorto.logoId}/>
{/* <AspectRatio ratio={1 / 1} mah={250} mx={"auto"}>
<Image
width={200}
// style={{ maxHeight: 200, margin: "auto", padding: "5px" }}
alt="Foto"
src={
RouterPortofolio.api_logo_porto + `${dataPorto?.logoId}`
}
h={200}
m={"auto"}
p={"xs"}
src={APIs.GET + dataPorto.logoId }
/>
</Paper>
</AspectRatio>
</AspectRatio> */}
</Paper>
</Box>
<Box>

24
src/app_modules/katalog/portofolio/ui/ui_detail_map.tsx
View File

@@ -1,12 +1,11 @@
"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 { ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
import { defaultMapZoom } from "@/app_modules/map/lib/default_lat_long";
import { MODEL_MAP } from "@/app_modules/map/lib/interface";
import { Image, Paper, Stack, Title } from "@mantine/core";
import { Avatar, Image, Paper, Stack, Title } from "@mantine/core";
import "mapbox-gl/dist/mapbox-gl.css";
import { useState } from "react";
import {
@@ -17,7 +16,7 @@ import {
ScaleControl,
} from "react-map-gl";
import { ComponentPortofolio_DetailDataMap } from "../component";
import { MODEL_LOGO, MODEL_PORTOFOLIO } from "../model/interface";
import { MODEL_PORTOFOLIO } from "../model/interface";
export function Portofolio_UiMap({
mapboxToken,
@@ -45,7 +44,7 @@ export function Portofolio_UiMap({
<MapView
data={data.BusinessMaps}
mapboxToken={mapboxToken}
dataLogo={data.Logo}
logoId={data.logoId}
/>
</Stack>
</Paper>
@@ -55,11 +54,11 @@ export function Portofolio_UiMap({
function MapView({
mapboxToken,
data,
dataLogo,
logoId,
}: {
mapboxToken: string;
data: MODEL_MAP;
dataLogo: MODEL_LOGO;
logoId: string;
}) {
const [openDrawer, setOpenDrawer] = useState(false);
@@ -98,17 +97,14 @@ function MapView({
pitchAlignment="auto"
>
<Stack spacing={0} align="center">
<Image
width={"100%"}
alt="image"
<Avatar
src={
data.ImagePin === null
? RouterPortofolio.api_logo_porto + dataLogo.id
: RouterMap.api_custom_pin + data.ImagePin.id
data.pinId === null ? APIs.GET + logoId : APIs.GET + data.pinId
}
radius={"xl"}
alt="Logo"
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: "white",
borderRadius: "100%",
}}
/>

1
src/app_modules/katalog/portofolio/ui/ui_detail_portofolio.tsx
View File

@@ -22,7 +22,6 @@ export default function Portofolio_UiDetail({
<Stack mb={"lg"}>
<Portofolio_UiDetailData dataPorto={dataPorto} />
<Portofolio_UiMap mapboxToken={mapboxToken} data={dataPorto} />
{/* <Portofolio_UiDetailLogo dataPorto={dataPorto} /> */}
<Portofolio_UiSosialMedia dataPorto={dataPorto} />
<ComponentPortofolio_ButtonDelete

70
src/app_modules/map/_component/button/comp_button_save_pin.tsx Normal file
View File

@@ -0,0 +1,70 @@
"use client";
import { MainColor } from "@/app_modules/_global/color";
import {
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
ComponentGlobal_NotifikasiPeringatan,
} from "@/app_modules/_global/notif_global";
import { Button } from "@mantine/core";
import { useRouter } from "next/navigation";
import { map_funCreatePin } from "../../fun/create/fun_create_pin";
import { DIRECTORY_ID } from "@/app/lib";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
export function ComponentMap_ButtonSavePin({
namePin,
lat,
long,
portofolioId,
file,
}: {
namePin: string;
lat: string;
long: string;
portofolioId: string;
file: File;
}) {
const router = useRouter();
async function onSavePin() {
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.map_image,
});
if (!uploadFileToStorage.success)
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
const res = await map_funCreatePin({
data: {
latitude: lat as any,
longitude: long as any,
namePin: namePin as any,
imageId: uploadFileToStorage.data.id,
Portofolio: {
create: { id: portofolioId } as any,
},
},
});
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
}
return (
<>
<Button
my={"xl"}
style={{ transition: "0.5s" }}
disabled={namePin === "" || file === null ? true : false}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
c={"black"}
onClick={() => onSavePin()}
>
Simpan
</Button>
</>
);
}

72
src/app_modules/map/_component/button/comp_button_update_data_map.tsx Normal file
View File

@@ -0,0 +1,72 @@
"use client";
import { MainColor } from "@/app_modules/_global/color";
import {
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
ComponentGlobal_NotifikasiPeringatan,
} from "@/app_modules/_global/notif_global";
import { Button } from "@mantine/core";
import { map_funEditMap } from "../../fun/edit/fun_edit_map";
import { MODEL_MAP } from "../../lib/interface";
import { useRouter } from "next/navigation";
import { DIRECTORY_ID } from "@/app/lib";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { useState } from "react";
export function ComponentMap_ButtonUpdateDataMap({
data,
file,
}: {
data: MODEL_MAP;
file: File;
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
async function onSavePin() {
if (file !== null) {
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.map_image,
});
if (!uploadFileToStorage.success)
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
const res = await map_funEditMap({
data: data,
fileId: uploadFileToStorage.data.id,
});
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
} else {
const res = await map_funEditMap({
data: data,
});
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
}
setIsLoading(true);
}
return (
<>
<Button
loaderPosition="center"
loading={isLoading}
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/_component/detail_data.tsx
View File

@@ -25,6 +25,8 @@ import { useState } from "react";
import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
import { MODEL_MAP } from "../lib/interface";
import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
import { APIs } from "@/app/lib";
import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
const router = useRouter();
@@ -59,13 +61,8 @@ export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
{ maxWidth: 600, cols: 1, spacing: "sm" },
]}
>
<Image
radius={"sm"}
mah={300}
maw={200}
alt="Foto"
src={RouterMap.api_foto + data?.imageMapId}
/>
<ComponentGlobal_LoadImage url={APIs.GET + data?.imageId} />
{/* <Image radius={"sm"} mah={300} maw={200} alt="Photo" src={} /> */}
<Box>
<Grid>
<Grid.Col span={2}>

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

@@ -1,3 +1,8 @@
import { ComponentMap_ButtonSavePin } from "./button/comp_button_save_pin";
import { ComponentMap_ButtonUpdateDataMap } from "./button/comp_button_update_data_map";
export { ComponentMap_Header } from "./header";
export { ComponentMap_DrawerDetailData } from "./drawer";
export { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
export { ComponentMap_ButtonSavePin };
export { ComponentMap_ButtonUpdateDataMap };

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

@@ -3,42 +3,24 @@
import prisma from "@/app/lib/prisma";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import fs from "fs";
import _ from "lodash";
import { Prisma } from "@prisma/client";
import { revalidatePath } from "next/cache";
import { v4 } from "uuid";
export async function map_funCreatePin({ data }: { data: any }) {
export async function map_funCreatePin({
data,
}: {
data: Prisma.BusinessMapsCreateInput;
}) {
const userLoginId = await funGetUserIdByToken();
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/foto/${uploadImage.url}`, upload_Folder);
const create = await prisma.businessMaps.create({
data: {
latitude: data.lat,
longitude: data.long,
latitude: data.latitude,
longitude: data.longitude,
namePin: data.namePin,
portofolioId: data?.portofolioId,
portofolioId: data.Portofolio?.create?.id,
authorId: userLoginId,
imageMapId: uploadImage.id,
imageId: data.imageId,
},
});

34
src/app_modules/map/fun/edit/fun_custom_pin_map.ts
View File

@@ -1,50 +1,26 @@
"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";
import { revalidatePath } from "next/cache";
export async function map_funCustomPinMap({
mapId,
file,
fileId,
}: {
mapId: string;
file: FormData;
fileId: string;
}) {
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,
pinId: fileId,
},
});
if (!updt) return { status: 400, message: "Gagal update pin" };
revalidatePath(RouterPortofolio.main_detail)
revalidatePath(RouterPortofolio.main_detail);
return { status: 200, message: "Berhasil update pin" };
}

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

@@ -1,45 +1,18 @@
"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";
import { revalidatePath } from "next/cache";
import { MODEL_MAP } from "../../lib/interface";
export async function map_funEditMap({
data,
file,
fileId,
}: {
data: MODEL_MAP;
file: FormData;
fileId?: string;
}) {
// 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/foto/${uploadImage.url}`, upload_Folder);
if (fileId === undefined || fileId === null) {
const updt = await prisma.businessMaps.update({
where: {
id: data.id,
@@ -48,25 +21,25 @@ export async function map_funEditMap({
latitude: data.latitude,
longitude: data.longitude,
namePin: data.namePin,
imageMapId: uploadImage.id,
},
});
if (!updt) return { status: 400, message: "Gagal update data" };
revalidatePath(RouterPortofolio.main_detail);
return { status: 200, message: "Berhasil update" };
} else {
const updt = await prisma.businessMaps.update({
where: {
id: data.id,
},
data: {
latitude: data.latitude,
longitude: data.longitude,
namePin: data.namePin,
imageId: fileId,
},
});
if (!updt) return { status: 400, message: "Gagal update data" };
revalidatePath(RouterPortofolio.main_detail);
return { status: 200, message: "Berhasil update" };
}
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" };
}

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

@@ -7,7 +7,7 @@ export async function map_funGetOneById({ mapId }: { mapId: string }) {
where: {
id: mapId,
},
select: {
include: {
Author: {
select: {
id: true,
@@ -20,15 +20,6 @@ export async function map_funGetOneById({ mapId }: { mapId: string }) {
},
},
},
id: true,
isActive: true,
createdAt: true,
updatedAt: true,
namePin: true,
latitude: true,
longitude: true,
authorId: true,
imageMapId: true,
Portofolio: {
select: {
id: true,

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

@@ -12,12 +12,9 @@ export async function map_funGetOneBusinessMapByPortofolioId({
portofolioId: portofolioId,
},
include: {
ImageMap: true,
ImagePin: true,
Portofolio: {
select: {
id: true,
Logo: true,
logoId: true
}
}

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

@@ -12,9 +12,7 @@ export interface MODEL_MAP {
authorId: string;
Author: MODEL_USER;
portofolioId: string;
Portofolio: MODEL_PORTOFOLIO
imageMapId: string
ImageMap: any
imagePinId: string
ImagePin: any
Portofolio: MODEL_PORTOFOLIO;
imageId: string;
pinId: string;
}

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>

1
src/lib/routes.ts
View File

@@ -1,3 +1,4 @@
export const pages = {
"/": "/",
"/zCoba": "/zCoba",