From 7f40b7bb33fca272efbd3b2aa7dde39d518f30c2 Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Tue, 14 Jan 2025 11:01:52 +0800 Subject: [PATCH] fix ( upload image ) deskripsi: - fix upload image portofolio --- .../_global/component/box_information.tsx | 15 +- .../button/comp_button_edit_logo_bisnis.tsx | 56 ++-- .../button/comp_button_selanjutnya.tsx | 31 ++- .../katalog/portofolio/create/view.tsx | 57 ++-- .../portofolio/edit/logo/ui_edit_logo.tsx | 86 ++---- .../profile/upload/foto_profile/index.tsx | 1 + .../button/comp_button_save_pin.tsx | 26 +- .../button/comp_button_update_data_map.tsx | 23 +- src/app_modules/map/ui/ui_create_pin.tsx | 259 +++++++----------- src/app_modules/map/ui/ui_custom_pin.tsx | 77 ++---- src/app_modules/map/ui/ui_edit_map.tsx | 171 +++++++----- 11 files changed, 364 insertions(+), 438 deletions(-) diff --git a/src/app_modules/_global/component/box_information.tsx b/src/app_modules/_global/component/box_information.tsx index 188167b7..8dbe0a0b 100644 --- a/src/app_modules/_global/component/box_information.tsx +++ b/src/app_modules/_global/component/box_information.tsx @@ -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({ ) : ( - - - *{" "} + + + + + {informasi} - - + + )} ); - - } diff --git a/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx b/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx index c6c85b60..cbceaa63 100644 --- a/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx +++ b/src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx @@ -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 ? ( + - ) : ( - - )} + ); } diff --git a/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx b/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx index 823c1f29..ccf7c19a 100644 --- a/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx +++ b/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx @@ -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 ( <> )} - + */} @@ -416,7 +420,8 @@ export default function CreatePortofolio({ dataPortofolio={dataPortofolio as any} dataMedsos={dataMedsos} profileId={profileId} - imageId={imageId} + // + file={file as File} /> diff --git a/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx b/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx index cae4cb08..cb2f4867 100644 --- a/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx +++ b/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx @@ -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 ( <> - - + + {img ? ( Image ) : ( )} - -
- { - 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) => ( - - )} - -
- - + +
+ +
+ + (null); const [img, setImg] = useState(null); - const [imageId, setImageId] = useState(""); return ( <> - - { - setLatLong([a.lngLat.lat, a.lngLat.lng]); - setIsPin(true); - }} - attributionControl={false} - > - + {/* Map Pin */} + + + { + setLatLong([a.lngLat.lat, a.lngLat.lng]); + setIsPin(true); + }} + attributionControl={false} > - - image - - - - - - + + + image + + + + + + - - { - setNamePin(_.startCase(val.currentTarget.value)); + - + > + { + setNamePin(_.startCase(val.currentTarget.value)); + }} + /> + + - + + {img ? ( @@ -138,100 +147,16 @@ export function UiMap_CreatePin({ ) : ( - Foto Lokasi Bisnis - - Upload foto lokasi bisnis anda untuk ditampilkan dalam detail - map - + )}
- { - 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) => ( - - )} - +
@@ -240,7 +165,7 @@ export function UiMap_CreatePin({ lat={lat as any} long={long as any} portofolioId={portofolioId} - imageId={imageId} + file={file as File} /> diff --git a/src/app_modules/map/ui/ui_custom_pin.tsx b/src/app_modules/map/ui/ui_custom_pin.tsx index 93ccb1b7..7486badf 100644 --- a/src/app_modules/map/ui/ui_custom_pin.tsx +++ b/src/app_modules/map/ui/ui_custom_pin.tsx @@ -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({ @@ -90,40 +86,10 @@ export function UiMap_CustomPin({ )}
- { - 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) => ( - - )} - +
@@ -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, diff --git a/src/app_modules/map/ui/ui_edit_map.tsx b/src/app_modules/map/ui/ui_edit_map.tsx index 8d84794c..a82f677f 100644 --- a/src/app_modules/map/ui/ui_edit_map.tsx +++ b/src/app_modules/map/ui/ui_edit_map.tsx @@ -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 ( <> - - { - setData({ - ...data, - latitude: a.lngLat.lat, - longitude: a.lngLat.lng, - }); - }} - attributionControl={false} - > - + + + + - - - - - - - - - { + 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, }); }} - /> - + attributionControl={false} + > + + + + + + + + + + { + setData({ + ...data, + namePin: val.currentTarget.value, + }); + }} + /> + + {/* Photo Usaha */} - + {img ? ( @@ -144,6 +156,13 @@ export function UiMap_EditMap({
+ +
+ + {/*
{ try { @@ -178,7 +197,7 @@ export function UiMap_EditMap({ )} -
+ */}