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

Update Versi 1.5.27 #32

Merged
bagasbanuna merged 1009 commits from staging into main 2025-12-17 12:22:28 +08:00
Conversation 0 Commits 1009 Files Changed 2261 +20315 -5815
507 changed files with 20315 additions and 5815 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7f40b7bb33 - Show all commits

15
src/app_modules/_global/component/box_information.tsx
View File

@@ -1,5 +1,6 @@
import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
import { AccentColor, MainColor } from "../color/color_pallet";
import { IconInfoCircle } from "@tabler/icons-react";
export default function ComponentGlobal_BoxInformation({
informasi,
@@ -36,18 +37,18 @@ export default function ComponentGlobal_BoxInformation({
</Text>
</Stack>
) : (
<Group>
<Text fz={fonsize ? fonsize : 12} c={"red"} fw={"bold"}>
*{" "}
<Grid>
<Grid.Col span={1}>
<IconInfoCircle color={MainColor.white} />
</Grid.Col>
<Grid.Col span={10}>
<Text span inherit c={MainColor.white} fw={"normal"}>
{informasi}
</Text>
</Text>
</Group>
</Grid.Col>
</Grid>
)}
</Paper>
</>
);
}

56
src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
View File

@@ -1,22 +1,22 @@
"use client";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
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 { Box, Button } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { DIRECTORY_ID } from "@/app/lib";
import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib";
import { portofolio_funEditLogoBisnisById } from "../../fun";
import { clientLogger } from "@/util/clientLogger";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { portofolio_funEditLogoBisnisById } from "../../fun";
export function ComponentPortofolio_ButtonEditLogoBisnis({
file,
@@ -33,16 +33,6 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
try {
setLoading(true);
const deleteLogo = await funGlobal_DeleteFileById({
fileId: fileRemoveId,
dirId: DIRECTORY_ID.portofolio_logo,
});
if (!deleteLogo.success) {
setLoading(false);
clientLogger.error("Error delete logo", deleteLogo.message);
}
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.portofolio_logo,
@@ -53,9 +43,21 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
return;
}
const deleteLogo = await funGlobal_DeleteFileById({
fileId: fileRemoveId,
dirId: DIRECTORY_ID.portofolio_logo,
});
if (!deleteLogo.success) {
setLoading(false);
clientLogger.error("Error delete logo", deleteLogo.message);
}
const logoId = uploadFileToStorage.data.id;
const res = await portofolio_funEditLogoBisnisById({
portofolioId: portofolioId,
logoId: uploadFileToStorage.data.id,
logoId: logoId,
});
if (res.status === 200) {
@@ -73,8 +75,16 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
return (
<>
{file ? (
<Box
p={"xs"}
bg={"red"}
style={{
display: "flex",
justifyContent: "center",
}}
>
<Button
disabled={file === null}
loaderPosition="center"
loading={loading}
radius={"xl"}
@@ -83,17 +93,15 @@ export function ComponentPortofolio_ButtonEditLogoBisnis({
color="yellow"
c={"black"}
style={{
width: "100%",
transition: "0.5s",
border: `1px solid ${AccentColor.yellow}`,
position: "absolute",
bottom: 20,
}}
>
Simpan
</Button>
) : (
<Button disabled radius={"xl"}>
Simpan
</Button>
)}
</Box>
</>
);
}

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

@@ -9,6 +9,9 @@ import { MODEL_PORTOFOLIO_OLD } from "@/app_modules/model_global/portofolio";
import { Button } from "@mantine/core";
import _ from "lodash";
import { DIRECTORY_ID } from "@/app/lib";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { clientLogger } from "@/util/clientLogger";
import { useRouter } from "next/navigation";
import { useState } from "react";
import funCreatePortofolio from "../../fun/fun_create_portofolio";
@@ -17,12 +20,12 @@ export function Portofolio_ComponentButtonSelanjutnya({
profileId,
dataPortofolio,
dataMedsos,
imageId,
file,
}: {
profileId: string;
dataPortofolio: MODEL_PORTOFOLIO_OLD;
dataMedsos: any;
imageId: string;
file: File;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
@@ -48,31 +51,45 @@ export function Portofolio_ComponentButtonSelanjutnya({
try {
setLoading(true);
const uploadFile = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.portofolio_logo,
});
if (!uploadFile.success) {
setLoading(false);
ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
return;
}
const fileId = uploadFile.data.id;
const res = await funCreatePortofolio({
profileId: profileId,
data: dataPortofolio as any,
medsos: dataMedsos,
fileId: imageId,
fileId: fileId,
});
if (res.status === 201) {
ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
router.replace(RouterMap.create + res.id, { scroll: false });
} else {
setLoading(false);
ComponentGlobal_NotifikasiGagal("Gagal disimpan");
}
} catch (error) {
console.error(error);
} finally {
setLoading(false);
clientLogger.error("Error create portofolio", error);
}
}
return (
<>
<Button
disabled={_.values(dataPortofolio).includes("") || imageId == ""}
disabled={_.values(dataPortofolio).includes("") || file === null}
mt={"md"}
radius={50}
loading={loading ? true : false}
loading={loading}
loaderPosition="center"
onClick={() => {
onSubmit();

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

@@ -1,9 +1,20 @@
"use client";
import { DIRECTORY_ID } from "@/app/lib";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
import {
ComponentGlobal_BoxUploadImage,
ComponentGlobal_ButtonUploadFileImage,
} 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 {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { MAX_SIZE } from "@/app_modules/_global/lib";
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { BIDANG_BISNIS_OLD } from "@/app_modules/model_global/portofolio";
import {
AspectRatio,
@@ -18,20 +29,12 @@ import {
Textarea,
Title,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { IconCamera, IconPhoto } from "@tabler/icons-react";
import _ from "lodash";
import { useState } from "react";
import { Portofolio_ComponentButtonSelanjutnya } from "../component";
import { MAX_SIZE } from "@/app_modules/_global/lib";
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib";
import { PhoneInput } from "react-international-phone";
import "react-international-phone/style.css";
import { Portofolio_ComponentButtonSelanjutnya } from "../component";
export default function CreatePortofolio({
bidangBisnis,
@@ -56,16 +59,15 @@ export default function CreatePortofolio({
tiktok: "",
});
const [file, setFile] = useState<File | null>(null);
const [img, setImg] = useState<any | null>(null);
const [imageId, setImageId] = useState("");
return (
<>
{/* {JSON.stringify(profileId)} */}
<Stack px={"sm"} mb={"lg"} spacing={50}>
<Stack spacing={"sm"}>
<ComponentGlobal_BoxInformation informasi="Lengkapi Data Bisnis" />
<ComponentGlobal_BoxInformation informasi="Lengkapi data bisnis" />
<TextInput
styles={{
label: {
@@ -101,8 +103,8 @@ export default function CreatePortofolio({
color: MainColor.red,
},
dropdown: {
backgroundColor: MainColor.white
}
backgroundColor: MainColor.white,
},
}}
withAsterisk
label="Bidang Bisnis"
@@ -156,7 +158,7 @@ export default function CreatePortofolio({
countrySelectorStyleProps={{
buttonStyle: {
backgroundColor: MainColor.login,
}
},
}}
inputStyle={{ width: "100%", backgroundColor: MainColor.login }}
defaultCountry="id"
@@ -205,7 +207,7 @@ export default function CreatePortofolio({
</Stack>
<Stack>
<ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda" />
<ComponentGlobal_BoxInformation informasi="Upload logo bisnis anda untuk ditampilkan dalam portofolio " />
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
@@ -218,17 +220,19 @@ export default function CreatePortofolio({
</AspectRatio>
) : (
<Stack spacing={5} justify="center" align="center" h={"100%"}>
<Title c={MainColor.white} order={3}>
Upload Logo Bisnis
</Title>
<Text c={MainColor.white} fs={"italic"} fz={10} align="center">
Masukan logo bisnis anda untuk ditampilkan dalam portofolio
</Text>
<IconPhoto size={100} />
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
<Center>
<ComponentGlobal_ButtonUploadFileImage
onSetFile={setFile}
onSetImage={setImg}
/>
</Center>
{/* <Center>
<FileButton
onChange={async (files: any | null) => {
try {
@@ -310,7 +314,7 @@ export default function CreatePortofolio({
</Button>
)}
</FileButton>
</Center>
</Center> */}
</Stack>
<Stack>
@@ -416,7 +420,8 @@ export default function CreatePortofolio({
dataPortofolio={dataPortofolio as any}
dataMedsos={dataMedsos}
profileId={profileId}
imageId={imageId}
//
file={file as File}
/>
</Stack>
</>

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

@@ -1,19 +1,16 @@
"use client";
import { APIs } from "@/app/lib";
import {
AccentColor,
MainColor,
AccentColor
} from "@/app_modules/_global/color/color_pallet";
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 {
ComponentGlobal_ButtonUploadFileImage,
ComponentGlobal_LoadImage,
} from "@/app_modules/_global/component";
import { Center, Image, Paper, Stack } from "@mantine/core";
import { useState } from "react";
import { MODEL_PORTOFOLIO } from "../../model/interface";
import { ComponentPortofolio_ButtonEditLogoBisnis } from "../../component";
import { MAX_SIZE } from "@/app_modules/_global/lib";
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { MODEL_PORTOFOLIO } from "../../model/interface";
export default function Portofolio_EditLogoBisnis({
dataPorto,
@@ -26,61 +23,30 @@ export default function Portofolio_EditLogoBisnis({
return (
<>
<Stack spacing={"xl"} px={"sm"}>
<Paper
p={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
<Stack align="center">
<Stack>
<Paper
p={"sm"}
style={{
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ",
padding: "15px",
color: "white",
}}
>
{img ? (
<Image maw={250} alt="Image" src={img} />
) : (
<ComponentGlobal_LoadImage fileId={dataPorto.logoId} />
)}
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile
);
} 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>
</Paper>
</Paper>
<Center>
<ComponentGlobal_ButtonUploadFileImage
onSetFile={setFile}
onSetImage={setImg}
/>
</Center>
</Stack>
<ComponentPortofolio_ButtonEditLogoBisnis
file={file as any}
portofolioId={dataPorto.id}

1
src/app_modules/katalog/profile/upload/foto_profile/index.tsx
View File

@@ -41,6 +41,7 @@ export default function UploadFotoProfile({
onSetImage={setImage}
/>
</Center>
<Profile_ComponentButtonUpdatePhotoProfile
file={file as any}
profileId={profile.id}

26
src/app_modules/map/_component/button/comp_button_save_pin.tsx
View File

@@ -4,24 +4,27 @@ 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 { useState } from "react";
import { map_funCreatePin } from "../../fun/create/fun_create_pin";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib";
export function ComponentMap_ButtonSavePin({
namePin,
lat,
long,
portofolioId,
imageId,
file,
}: {
namePin: string;
lat: string;
long: string;
portofolioId: string;
imageId: string;
file: File;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
@@ -30,6 +33,19 @@ export function ComponentMap_ButtonSavePin({
try {
setLoading(true);
const uploadFile = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.map_image,
});
if (!uploadFile.success) {
setLoading(false);
ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
return;
}
const imageId = uploadFile.data.id;
const res = await map_funCreatePin({
data: {
latitude: lat as any,
@@ -45,9 +61,9 @@ export function ComponentMap_ButtonSavePin({
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
console.error(error);
}
}
@@ -57,7 +73,7 @@ export function ComponentMap_ButtonSavePin({
loading={loading}
my={"xl"}
style={{ transition: "0.5s" }}
disabled={namePin === "" || imageId == "" ? true : false}
disabled={namePin === "" || file === null}
radius={"xl"}
loaderPosition="center"
bg={MainColor.yellow}

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

@@ -33,6 +33,17 @@ export function ComponentMap_ButtonUpdateDataMap({
setIsLoading(true);
if (file !== null) {
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.map_image,
});
if (!uploadFileToStorage.success) {
setIsLoading(false);
ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
return;
}
const deleteLogo = await funGlobal_DeleteFileById({
fileId: data.imageId,
dirId: DIRECTORY_ID.map_image,
@@ -43,16 +54,6 @@ export function ComponentMap_ButtonUpdateDataMap({
clientLogger.error("Error delete logo", deleteLogo.message);
}
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.map_image,
});
if (!uploadFileToStorage.success) {
setIsLoading(false);
ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
return;
}
const res = await map_funEditMap({
data: data,
fileId: uploadFileToStorage.data.id,
@@ -91,7 +92,7 @@ export function ComponentMap_ButtonUpdateDataMap({
loading={isLoading}
mb={"xl"}
style={{ transition: "0.5s" }}
disabled={data.namePin === "" ? true : false}
disabled={data.namePin === "" || file === null}
radius={"xl"}
bg={MainColor.yellow}
color="yellow"

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

@@ -1,10 +1,19 @@
"use client";
import { DIRECTORY_ID } from "@/app/lib";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
import {
ComponentGlobal_BoxInformation,
ComponentGlobal_BoxUploadImage,
ComponentGlobal_ButtonUploadFileImage,
} from "@/app_modules/_global/component";
import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { MAX_SIZE } from "@/app_modules/_global/lib";
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
@@ -16,11 +25,9 @@ import {
Image,
Paper,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { IconCamera, IconPhoto } from "@tabler/icons-react";
import _ from "lodash";
import { useState } from "react";
import Map, {
@@ -31,11 +38,6 @@ import Map, {
} from "react-map-gl";
import { ComponentMap_ButtonSavePin } from "../_component";
import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib";
export function UiMap_CreatePin({
mapboxToken,
@@ -47,85 +49,92 @@ export function UiMap_CreatePin({
const [[lat, long], setLatLong] = useState([0, 0]);
const [isPin, setIsPin] = useState(false);
const [namePin, setNamePin] = useState("");
const [file, setFile] = useState<File | null>(null);
const [img, setImg] = useState<any | null>(null);
const [imageId, setImageId] = useState("");
return (
<>
<Stack>
<Map
mapboxAccessToken={mapboxToken}
mapStyle={"mapbox://styles/mapbox/streets-v11"}
initialViewState={{
latitude: defaultLatLong[0],
longitude: defaultLatLong[1],
zoom: defaultMapZoom,
}}
style={{
cursor: "pointer",
width: "100%",
height: "60vh",
borderRadius: "10px",
}}
onClick={(a) => {
setLatLong([a.lngLat.lat, a.lngLat.lng]);
setIsPin(true);
}}
attributionControl={false}
>
<Marker
<Stack spacing={50}>
{/* Map Pin */}
<Stack spacing={"sm"}>
<ComponentGlobal_BoxInformation informasi="Tentukan lokasi pin map dengan klik pada peta." />
<Map
mapboxAccessToken={mapboxToken}
mapStyle={"mapbox://styles/mapbox/streets-v11"}
initialViewState={{
latitude: defaultLatLong[0],
longitude: defaultLatLong[1],
zoom: defaultMapZoom,
}}
style={{
color: "red",
width: 40,
// height: 40,
cursor: "pointer",
width: "100%",
height: "60vh",
borderRadius: "10px",
}}
latitude={lat}
longitude={long}
anchor="bottom"
onClick={(a) => {
setLatLong([a.lngLat.lat, a.lngLat.lng]);
setIsPin(true);
}}
attributionControl={false}
>
<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>
<Marker
style={{
color: "red",
width: 40,
// height: 40,
cursor: "pointer",
}}
latitude={lat}
longitude={long}
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
disabled={isPin ? false : true}
style={{ transition: "0.5s" }}
styles={{ label: { color: isPin ? MainColor.white : "gray" },
input: {
backgroundColor: MainColor.white
},
required: {
color: MainColor.red,
} }}
label="Nama Pin"
placeholder="Masukan nama pin map"
withAsterisk
onChange={(val) => {
setNamePin(_.startCase(val.currentTarget.value));
<Paper
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
/>
</Paper>
>
<TextInput
disabled={isPin ? false : true}
style={{ transition: "0.5s" }}
styles={{
label: { color: isPin ? MainColor.white : "gray" },
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
},
}}
label="Nama Pin"
placeholder="Masukan nama pin map"
withAsterisk
onChange={(val) => {
setNamePin(_.startCase(val.currentTarget.value));
}}
/>
</Paper>
</Stack>
<Stack>
<Stack spacing={"sm"}>
<ComponentGlobal_BoxInformation informasi="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail map." />
<ComponentGlobal_BoxUploadImage>
{img ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
@@ -138,100 +147,16 @@ export function UiMap_CreatePin({
</AspectRatio>
) : (
<Stack spacing={5} justify="center" align="center" h={"100%"}>
<Title c={MainColor.white} order={3}>Foto Lokasi Bisnis</Title>
<Text c={MainColor.white} fs={"italic"} fz={10} align="center">
Upload foto lokasi bisnis anda untuk ditampilkan dalam detail
map
</Text>
<IconPhoto size={100} />
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
setImg(null);
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile,
3000
);
return;
}
// if (files.size > MAX_SIZE) {
// setImg(null);
// ComponentGlobal_NotifikasiPeringatan(
// PemberitahuanMaksimalFile,
// 3000
// );
// } else {
// setImg(buffer);
// }
if (imageId != "") {
const deletePhoto = await funGlobal_DeleteFileById({
fileId: imageId,
});
if (deletePhoto.success) {
setImageId("");
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.map_image,
});
if (uploadPhoto.success) {
setImageId(uploadPhoto.data.id);
setImg(buffer);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload gambar"
);
}
}
} else {
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.map_image,
});
if (uploadPhoto.success) {
setImageId(uploadPhoto.data.id);
setImg(buffer);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload gambar"
);
}
}
} 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>
<ComponentGlobal_ButtonUploadFileImage
onSetFile={setFile}
onSetImage={setImg}
/>
</Center>
</Stack>
@@ -240,7 +165,7 @@ export function UiMap_CreatePin({
lat={lat as any}
long={long as any}
portofolioId={portofolioId}
imageId={imageId}
file={file as File}
/>
</Stack>
</>

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

@@ -1,18 +1,22 @@
"use client";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import { APIs, DIRECTORY_ID } from "@/app/lib";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_ButtonUploadFileImage } from "@/app_modules/_global/component";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
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 { clientLogger } from "@/util/clientLogger";
import { Avatar, Button, Center, Stack } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import {
@@ -25,14 +29,6 @@ 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_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { MAX_SIZE } from "@/app_modules/_global/lib";
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
import { clientLogger } from "@/util/clientLogger";
export function UiMap_CustomPin({
dataMap,
@@ -55,7 +51,7 @@ export function UiMap_CustomPin({
<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 !"
"Pin map akan secara otomatis menampilkan logo pada porotofolio ini, jika anda ingin melakukan custom silahkan upload logo pin baru anda."
}
/>
@@ -90,40 +86,10 @@ export function UiMap_CustomPin({
)}
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile,
3000
);
} else {
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>
<ComponentGlobal_ButtonUploadFileImage
onSetFile={setFilePin}
onSetImage={setImgPin}
/>
</Center>
</Stack>
@@ -201,14 +167,6 @@ function ButtonSimpan({
async function onCustom() {
try {
setLoading(true);
const deletePin = await funGlobal_DeleteFileById({
fileId: fileRemoveId,
dirId: DIRECTORY_ID.map_pin,
});
if (!deletePin.success) {
setLoading(false);
clientLogger.error("Error delete logo", deletePin.message);
}
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: filePin,
@@ -221,6 +179,15 @@ function ButtonSimpan({
return;
}
const deletePin = await funGlobal_DeleteFileById({
fileId: fileRemoveId,
dirId: DIRECTORY_ID.map_pin,
});
if (!deletePin.success) {
setLoading(false);
clientLogger.error("Error delete logo", deletePin.message);
}
const res = await map_funCustomPinMap({
mapId: mapId,
fileId: uploadFileToStorage.data.id,

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

@@ -7,6 +7,7 @@ import {
} from "@/app_modules/_global/color/color_pallet";
import {
ComponentGlobal_BoxUploadImage,
ComponentGlobal_ButtonUploadFileImage,
ComponentGlobal_LoadImage,
} from "@/app_modules/_global/component";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
@@ -49,89 +50,100 @@ export function UiMap_EditMap({
return (
<>
<Stack spacing={30} px={"sm"}>
<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",
<Stack spacing={50} px={"sm"}>
<Stack spacing={"sm"}>
<ComponentGlobal_BoxInformation informasi="Tentukan lokasi pin map dengan klik pada peta." />
<Map
mapboxAccessToken={mapboxToken}
mapStyle={"mapbox://styles/mapbox/streets-v11"}
initialViewState={{
latitude: data.latitude,
longitude: data.longitude,
zoom: defaultMapZoom,
}}
latitude={data.latitude}
longitude={data.longitude}
anchor="bottom"
>
<Avatar
src={
data.pinId === null
? APIs.GET({ fileId: dataMap.Portofolio.logoId, size: "400" })
: APIs.GET({ fileId: data.pinId, size: "400" })
}
alt="Logo"
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>
<Paper
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
>
<TextInput
style={{ transition: "0.5s", }}
styles={{ label: { color: MainColor.white }, required: { color: MainColor.red }, input: { backgroundColor: MainColor.white } }}
label="Nama Pin"
placeholder="Masukan nama pin map"
value={data.namePin}
withAsterisk
onChange={(val) => {
style={{
cursor: "pointer",
width: "100%",
height: "60vh",
borderRadius: "10px",
}}
onClick={(a) => {
setData({
...data,
namePin: val.currentTarget.value,
latitude: a.lngLat.lat,
longitude: a.lngLat.lng,
});
}}
/>
</Paper>
attributionControl={false}
>
<Marker
style={{
color: "red",
width: 40,
// height: 40,
cursor: "pointer",
}}
latitude={data.latitude}
longitude={data.longitude}
anchor="bottom"
>
<Avatar
src={
data.pinId === null
? APIs.GET({
fileId: dataMap.Portofolio.logoId,
size: "400",
})
: APIs.GET({ fileId: data.pinId, size: "400" })
}
alt="Logo"
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>
<Paper
style={{
padding: "15px",
backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px",
color: "white",
}}
>
<TextInput
style={{ transition: "0.5s" }}
styles={{
label: { color: MainColor.white },
required: { color: MainColor.red },
input: { backgroundColor: MainColor.white },
}}
label="Nama Pin"
placeholder="Masukan nama pin map"
value={data.namePin}
withAsterisk
onChange={(val) => {
setData({
...data,
namePin: val.currentTarget.value,
});
}}
/>
</Paper>
</Stack>
{/* Photo Usaha */}
<Stack spacing={"xs"}>
<ComponentGlobal_BoxInformation informasi="Masukan photo toko atau tempat usaha anda !" />
<ComponentGlobal_BoxInformation informasi="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail map." />
<ComponentGlobal_BoxUploadImage>
{img ? (
@@ -144,6 +156,13 @@ export function UiMap_EditMap({
</ComponentGlobal_BoxUploadImage>
<Center>
<ComponentGlobal_ButtonUploadFileImage
onSetFile={setFile}
onSetImage={setImg}
/>
</Center>
{/* <Center>
<FileButton
onChange={async (files: any | null) => {
try {
@@ -178,7 +197,7 @@ export function UiMap_EditMap({
</Button>
)}
</FileButton>
</Center>
</Center> */}
</Stack>
<ComponentMap_ButtonUpdateDataMap data={data as any} file={file} />