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

Merge pull request #183 from bipproduction/join

Browse Source 
Fix portofolio map
This commit is contained in:
Bagasbanuna02
2024-12-11 16:16:16 +08:00
committed by GitHub
parent 31bd66b674 c253124ff4
commit cc23ee3aae
19 changed files with 183 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -2,6 +2,8 @@
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
## [1.2.23](https://github.com/bipproduction/hipmi/compare/v1.2.22...v1.2.23) (2024-12-11)
## [1.2.22](https://github.com/bipproduction/hipmi/compare/v1.2.21...v1.2.22) (2024-12-10)
## [1.2.21](https://github.com/bipproduction/hipmi/compare/v1.2.20...v1.2.21) (2024-12-09)

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "hipmi",
"version": "1.2.22",
"version": "1.2.23",
"private": true,
"prisma": {
"seed": "npx tsx prisma/seed.ts --yes"

6
src/app/dev/profile/edit/[id]/page.tsx
View File

@@ -1,14 +1,12 @@
import EditProfile from "@/app_modules/katalog/profile/edit/view";
import { Profile_getOneProfileAndUserById } from "@/app_modules/katalog/profile/fun/get/get_one_user_profile";
export default async function Page({ params }: { params: { id: string } }) {
let profileId = params.id
const dataProfile = await Profile_getOneProfileAndUserById(profileId)
let profileId = params.id;
const dataProfile = await Profile_getOneProfileAndUserById(profileId);
return (
<>
{/* {JSON.stringify(data)} */}
<EditProfile data={dataProfile as any} />
</>
);

12
src/app_modules/_global/button/comp_button_upload_photo.tsx
View File

@@ -3,6 +3,8 @@
import { Button, FileButton } from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { MainColor } from "../color";
import { MAX_SIZE } from "../lib";
import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
export function ComponentGlobal_ButtonUploadFileImage({
onSetFile,
@@ -19,8 +21,14 @@ export function ComponentGlobal_ButtonUploadFileImage({
new Blob([new Uint8Array(await files.arrayBuffer())])
);
onSetFile(files);
onSetImage(buffer);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
"Ukuran file terlalu besar. Maksimal 2 MB."
);
} else {
onSetFile(files);
onSetImage(buffer);
}
} catch (error) {
console.log(error);
}

3
src/app_modules/_global/lib/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import { MAX_SIZE } from "./max_size";
export { MAX_SIZE };

2
src/app_modules/_global/lib/max_size.ts Normal file
View File

@@ -0,0 +1,2 @@
// Maksimal ukuran file dalam byte (2 MB)
export const MAX_SIZE = 2 * 1024 * 1024; // 2 MB

37
src/app_modules/_global/ui/ui_drawer.tsx
View File

@@ -28,13 +28,13 @@ export default function UIGlobal_Drawer({
opened: boolean;
close: () => void;
component:
| {
id: string;
name: string;
icon: string;
path: string;
}[]
| any[];
| {
id: string;
name: string;
icon: string;
path: string;
}[]
| any[];
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
@@ -77,21 +77,28 @@ export default function UIGlobal_Drawer({
</Group>
<SimpleGrid cols={component.length < 4 ? component.length : 4}>
{component.map((e, i) => (
<Stack key={i} align="center" spacing={"xs"}>
<Stack key={i} align="center" spacing={"xs"}
onClick={() => {
setPageId(e?.id);
setIsLoading(true);
router.push(e?.path, { scroll: false });
}}
>
<ActionIcon
variant="transparent"
c="white"
onClick={() => {
setPageId(e?.id);
setIsLoading(true);
router.push(e?.path, {scroll: false});
}}
>
{isLoading && e?.id === pageId ? (
{/* PAKE LOADING */}
{/* {isLoading && e?.id === pageId ? (
<ComponentGlobal_Loader />
) : (
e?.icon
)}
)} */}
{/* GA PAKE LOADING */}
{e?.icon}
</ActionIcon>
<Text fz={"sm"} align="center" color="white">
{e?.name}

11
src/app_modules/_global/ui/ui_header_tamplate.tsx
View File

@@ -77,12 +77,21 @@ export default function UIGlobal_LayoutHeaderTamplate({
: router.push(routerLeft, { scroll: false });
}}
>
{isLoading ? (
{/* PAKE LOADING SAAT KLIK BACK */}
{/* {isLoading ? (
<Loader color={AccentColor.yellow} size={20} />
) : iconLeft ? (
iconLeft
) : (
<IconChevronLeft />
)} */}
{/* GA PAKE LOADING SAAT KLIK BACK */}
{iconLeft ? (
iconLeft
) : (
<IconChevronLeft />
)}
</ActionIcon>
)}

2
src/app_modules/_global/ui/ui_image_preview.tsx
View File

@@ -28,7 +28,7 @@ export function UIGlobal_ImagePreview({ fileId }: { fileId: string }) {
const [isImage, setIsImage] = useState<boolean | null>(null);
const [isLoading, setIsLoading] = useState(false);
const url = APIs.GET({ fileId: fileId });
const url = APIs.GET({ fileId: fileId, size: "500" });
useShallowEffect(() => {
onLoadImage();

14
src/app_modules/katalog/component/drawer_katalog_new.tsx
View File

@@ -108,14 +108,12 @@ export default function DrawerKatalogNew({
</Group>
<SimpleGrid cols={4}>
{listPage.map((e, i) => (
<Stack key={i} align="center" spacing={"xs"}>
<ActionIcon
variant="transparent"
c="white"
onClick={() => {
router.push(e.path, { scroll: false });
}}
>
<Stack key={i} align="center" spacing={"xs"}
onClick={() => {
router.push(e.path, { scroll: false });
}}
>
<ActionIcon variant="transparent" c="white" >
{e.icon}
</ActionIcon>
<Text align="center" color="white">

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

@@ -30,6 +30,7 @@ export function Portofolio_ComponentButtonSelanjutnya({
const [loading, setLoading] = useState(false);
async function onSubmit() {
setLoading(true);
const porto = {
namaBisnis: dataPortofolio.namaBisnis,
masterBidangBisnisId: dataPortofolio.masterBidangBisnisId,
@@ -56,7 +57,6 @@ export function Portofolio_ComponentButtonSelanjutnya({
fileId: uploadFileToStorage.data.id,
});
if (res.status === 201) {
setLoading(true);
ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
router.replace(RouterMap.create + res.id, { scroll: false });
} else {

38
src/app_modules/katalog/portofolio/component/button_more_new.tsx
View File

@@ -13,6 +13,7 @@ export default function ComponentPortofolio_ButtonMoreNew() {
const param = useParams<{ id: string }>()
const [userLoginId, setUserLoginId] = useState("")
const [authorId, setAuthorId] = useState("")
const [mapId, setMapId] = useState(true)
const [openDrawer, setOpenDrawer] = useState(false)
const listPage = [
@@ -48,13 +49,48 @@ export default function ComponentPortofolio_ButtonMoreNew() {
},
];
const listPage2 = [
{
id: "1",
name: "Edit detail ",
icon: <IconEdit />,
path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
},
{
id: "2",
name: "Edit logo ",
icon: <IconPhotoEdit />,
path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
},
{
id: "3",
name: "Edit sosial media",
icon: <IconId />,
path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
},
{
id: "4",
name: "Edit data map",
icon: <IconMapPin2 />,
path: RouterMap.create + `${param.id}`,
},
{
id: "5",
name: "Custom pin map",
icon: <IconMapPin />,
path: RouterMap.custom_pin + `${param.id}`,
},
];
async function funGetPortofolio() {
try {
const response = await apiGetOnePortofolioById(param.id, "bisnis")
const response3 = await apiGetOnePortofolioById(param.id, "lokasi")
const response2 = await funGetUserIdByToken()
if (response.success) {
setAuthorId(response.data.authorId)
setMapId((response3.data?.mapId !== null && response3.data?.mapId !== undefined) ? true : false)
setUserLoginId(response2)
}
} catch (error) {
@@ -80,7 +116,7 @@ export default function ComponentPortofolio_ButtonMoreNew() {
<UIGlobal_Drawer
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={listPage}
component={mapId ? listPage : listPage2}
/>
</>
)

108
src/app_modules/katalog/portofolio/ui/ui_detail_map_new.tsx
View File

@@ -1,7 +1,7 @@
import { APIs } from "@/app/lib";
import { AccentColor } from "@/app_modules/_global/color";
import { defaultMapZoom } from "@/app_modules/map/lib/default_lat_long";
import { Paper, Stack, Title, Avatar, Skeleton } from "@mantine/core";
import { Paper, Stack, Title, Avatar, Skeleton, Text } from "@mantine/core";
import "mapbox-gl/dist/mapbox-gl.css";
import { useParams } from "next/navigation";
import { useState } from "react";
@@ -10,6 +10,7 @@ import { IDetailPortofolioLokasi } from "../lib/type_portofolio";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { useShallowEffect } from "@mantine/hooks";
import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: string }) {
const [loading, setLoading] = useState(true)
@@ -56,62 +57,65 @@ export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: stri
loading ?
<Skeleton radius={"md"} w={"100%"} h={100} />
:
<Map
mapboxAccessToken={mapboxToken}
mapStyle={"mapbox://styles/mapbox/streets-v11"}
initialViewState={{
latitude: Number(dataPorto?.latitude),
longitude: Number(dataPorto?.longitude),
zoom: defaultMapZoom,
}}
style={{
cursor: "pointer",
width: "100%",
height: "50vh",
borderRadius: "10px",
}}
attributionControl={false}
>
<Marker
dataPorto?.mapId === null || dataPorto?.mapId === undefined ?
<ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} />
:
<Map
mapboxAccessToken={mapboxToken}
mapStyle={"mapbox://styles/mapbox/streets-v11"}
initialViewState={{
latitude: Number(dataPorto?.latitude),
longitude: Number(dataPorto?.longitude),
zoom: defaultMapZoom,
}}
style={{
color: "red",
width: 40,
cursor: "pointer",
width: "100%",
height: "50vh",
borderRadius: "10px",
}}
latitude={Number(dataPorto?.latitude)}
longitude={Number(dataPorto?.longitude)}
anchor="bottom"
offset={[0, 0]}
scale={1}
onClick={() => {
setOpenDrawer(true);
}}
pitchAlignment="auto"
attributionControl={false}
>
<Stack spacing={0} align="center">
<Avatar
src={
dataPorto?.pinId === null
? APIs.GET({ fileId: String(dataPorto?.logoId) })
: APIs.GET({ fileId: String(dataPorto?.pinId) })
}
alt="Logo"
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: "white",
borderRadius: "100%",
}}
/>
</Stack>
</Marker>
<Marker
style={{
color: "red",
width: 40,
cursor: "pointer",
}}
latitude={Number(dataPorto?.latitude)}
longitude={Number(dataPorto?.longitude)}
anchor="bottom"
offset={[0, 0]}
scale={1}
onClick={() => {
setOpenDrawer(true);
}}
pitchAlignment="auto"
>
<Stack spacing={0} align="center">
<Avatar
src={
dataPorto?.pinId === null
? APIs.GET({ fileId: String(dataPorto?.logoId) })
: APIs.GET({ fileId: String(dataPorto?.pinId) })
}
alt="Logo"
style={{
border: `2px solid ${AccentColor.softblue}`,
backgroundColor: "white",
borderRadius: "100%",
}}
/>
</Stack>
</Marker>
<NavigationControl />
<ScaleControl position="top-left" />
<AttributionControl
style={{ color: "black" }}
customAttribution="Map design by PT. Bali Interaktif Perkasa"
/>
</Map>
<NavigationControl />
<ScaleControl position="top-left" />
<AttributionControl
style={{ color: "black" }}
customAttribution="Map design by PT. Bali Interaktif Perkasa"
/>
</Map>
}

7
src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
View File

@@ -9,15 +9,13 @@ import {
ComponentGlobal_NotifikasiGagal,
ComponentGlobal_NotifikasiPeringatan,
} from "@/app_modules/_global/notif_global";
import { gmailRegex } from "@/app_modules/katalog/component/regular_expressions";
import { Button } from "@mantine/core";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import funCreateNewProfile from "../../fun/fun_create_profile";
import { MODEL_PROFILE } from "../../model/interface";
import { validRegex } from "@/app_modules/katalog/component";
import { envs } from "@/lib/envs";
import { TokenProvider, TokenStorage } from "@/app/lib/token";
export function Profile_ComponentCreateNewProfile({
value,
@@ -40,7 +38,8 @@ export function Profile_ComponentCreateNewProfile({
};
if (_.values(newData).includes(""))
return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
if (!newData.email.match(validRegex)) return null;
if (!newData.email.match(gmailRegex))
return ComponentGlobal_NotifikasiPeringatan("Format email salah");
if (filePP == null)
return ComponentGlobal_NotifikasiPeringatan("Lengkapi foto profile");

9
src/app_modules/katalog/profile/create/view.tsx
View File

@@ -6,6 +6,8 @@ import {
ComponentGlobal_BoxUploadImage,
ComponentGlobal_ErrorInput,
} from "@/app_modules/_global/component";
import { MAX_SIZE } from "@/app_modules/_global/lib";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import {
AspectRatio,
Avatar,
@@ -22,10 +24,8 @@ import {
} from "@mantine/core";
import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
import { useState } from "react";
import { validRegex } from "../../component";
import { Profile_ComponentCreateNewProfile } from "../_component";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { gmailRegex } from "../../component/regular_expressions";
import { Profile_ComponentCreateNewProfile } from "../_component";
export default function CreateProfile() {
const [filePP, setFilePP] = useState<File | null>(null);
@@ -40,9 +40,6 @@ export default function CreateProfile() {
jenisKelamin: "",
});
// Maksimal ukuran file dalam byte (2 MB)
const MAX_SIZE = 2 * 1024 * 1024; // 2 MB
return (
<>
<Stack px={"sm"} spacing={40}>

12
src/app_modules/katalog/profile/edit/view.tsx
View File

@@ -4,14 +4,14 @@ import { Button, Loader, Select, Stack, TextInput } from "@mantine/core";
import _ from "lodash";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { validRegex } from "../../component/regular_expressions";
import { gmailRegex, validRegex } from "../../component/regular_expressions";
import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
import { MODEL_PROFILE } from "../model/interface";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
const router = useRouter();
@@ -24,8 +24,10 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
const body = dataProfile;
// console.log(body)
if (_.values(body).includes("")) return null;
if (!body.email.match(validRegex)) return null;
if (_.values(body).includes(""))
return ComponentGlobal_NotifikasiPeringatan("Lengkapi data");
if (!body.email.match(gmailRegex))
return ComponentGlobal_NotifikasiPeringatan("Format email salah");
await Profile_funEditById(body).then((res) => {
if (res.status === 200) {
@@ -126,7 +128,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
dataProfile?.email === "" ? (
<ComponentGlobal_ErrorInput text="Masukan email " />
) : dataProfile?.email?.length > 0 &&
!dataProfile?.email.match(validRegex) ? (
!dataProfile?.email.match(gmailRegex) ? (
<ComponentGlobal_ErrorInput text="Invalid email" />
) : (
""

5
src/app_modules/katalog/profile/upload/foto_background/index.tsx
View File

@@ -30,7 +30,10 @@ export default function Profile_UpdateFotoBackground({
src={
image
? image
: APIs.GET({ fileId: profile.imageBackgroundId as any })
: APIs.GET({
fileId: profile.imageBackgroundId as any,
size: "400",
})
}
/>
</AspectRatio>

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

@@ -27,7 +27,11 @@ export default function UploadFotoProfile({
<Image
style={{ maxHeight: 250 }}
alt="Avatar"
src={image ? image : APIs.GET({ fileId: profile.imageId as any })}
src={
image
? image
: APIs.GET({ fileId: profile.imageId as any, size: "400" })
}
/>
</AspectRatio>
</ComponentGlobal_BoxUploadImage>

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

@@ -11,6 +11,7 @@ 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";
import { useState } from "react";
export function ComponentMap_ButtonSavePin({
namePin,
@@ -26,7 +27,10 @@ export function ComponentMap_ButtonSavePin({
file: File;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false)
async function onSavePin() {
setLoading(true)
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.map_image,
@@ -49,15 +53,19 @@ export function ComponentMap_ButtonSavePin({
res.status === 200
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
: ComponentGlobal_NotifikasiGagal(res.message);
setLoading(false)
}
return (
<>
<Button
loading={loading}
my={"xl"}
style={{ transition: "0.5s" }}
disabled={namePin === "" || file === null ? true : false}
radius={"xl"}
loaderPosition="center"
bg={MainColor.yellow}
color="yellow"
c={"black"}