Merge pull request #183 from bipproduction/join

Fix portofolio map

CHANGELOG.md

@@ -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)

package.json

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

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

@@ -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
+  let profileId = params.id;
-  const dataProfile = await Profile_getOneProfileAndUserById(profileId)
+  const dataProfile = await Profile_getOneProfileAndUserById(profileId);
 
   return (
     <>
-      {/* {JSON.stringify(data)} */}
       <EditProfile data={dataProfile as any} />
     </>
   );

src/app_modules/_global/button/comp_button_upload_photo.tsx

@@ -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);
+          if (files.size > MAX_SIZE) {
-          onSetImage(buffer);
+            ComponentGlobal_NotifikasiPeringatan(
+              "Ukuran file terlalu besar. Maksimal 2 MB."
+            );
+          } else {
+            onSetFile(files);
+            onSetImage(buffer);
+          }
         } catch (error) {
           console.log(error);
         }

src/app_modules/_global/lib/index.ts

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

src/app_modules/_global/lib/max_size.ts

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

src/app_modules/_global/ui/ui_drawer.tsx

@@ -28,13 +28,13 @@ export default function UIGlobal_Drawer({
   opened: boolean;
   close: () => void;
   component:
-    | {
+  | {
-        id: string;
+    id: string;
-        name: string;
+    name: string;
-        icon: string;
+    icon: string;
-        path: string;
+    path: string;
-      }[]
+  }[]
-    | any[];
+  | 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}

src/app_modules/_global/ui/ui_header_tamplate.tsx

@@ -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>
           )}

src/app_modules/_global/ui/ui_image_preview.tsx

@@ -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();

src/app_modules/katalog/component/drawer_katalog_new.tsx

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

src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx

@@ -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 {

src/app_modules/katalog/portofolio/component/button_more_new.tsx

@@ -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}
          />
       </>
    )

src/app_modules/katalog/portofolio/ui/ui_detail_map_new.tsx

@@ -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
+                     dataPorto?.mapId === null || dataPorto?.mapId === undefined ?
-                        mapboxAccessToken={mapboxToken}
+                        <ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} /> 
-                        mapStyle={"mapbox://styles/mapbox/streets-v11"}
+                        :
-                        initialViewState={{
+                        <Map
-                           latitude: Number(dataPorto?.latitude),
+                           mapboxAccessToken={mapboxToken}
-                           longitude: Number(dataPorto?.longitude),
+                           mapStyle={"mapbox://styles/mapbox/streets-v11"}
-                           zoom: defaultMapZoom,
+                           initialViewState={{
-                        }}
+                              latitude: Number(dataPorto?.latitude),
-                        style={{
+                              longitude: Number(dataPorto?.longitude),
-                           cursor: "pointer",
+                              zoom: defaultMapZoom,
-                           width: "100%",
+                           }}
-                           height: "50vh",
-                           borderRadius: "10px",
-                        }}
-                        attributionControl={false}
-                     >
-                        <Marker
                            style={{
-                              color: "red",
-                              width: 40,
                               cursor: "pointer",
+                              width: "100%",
+                              height: "50vh",
+                              borderRadius: "10px",
                            }}
-                           latitude={Number(dataPorto?.latitude)}
+                           attributionControl={false}
-                           longitude={Number(dataPorto?.longitude)}
-                           anchor="bottom"
-                           offset={[0, 0]}
-                           scale={1}
-                           onClick={() => {
-                              setOpenDrawer(true);
-                           }}
-                           pitchAlignment="auto"
                         >
-                           <Stack spacing={0} align="center">
+                           <Marker
-                              <Avatar
+                              style={{
-                                 src={
+                                 color: "red",
-                                    dataPorto?.pinId === null
+                                 width: 40,
-                                       ? APIs.GET({ fileId: String(dataPorto?.logoId) })
+                                 cursor: "pointer",
-                                       : APIs.GET({ fileId: String(dataPorto?.pinId) })
+                              }}
-                                 }
+                              latitude={Number(dataPorto?.latitude)}
-                                 alt="Logo"
+                              longitude={Number(dataPorto?.longitude)}
-                                 style={{
+                              anchor="bottom"
-                                    border: `2px solid ${AccentColor.softblue}`,
+                              offset={[0, 0]}
-                                    backgroundColor: "white",
+                              scale={1}
-                                    borderRadius: "100%",
+                              onClick={() => {
-                                 }}
+                                 setOpenDrawer(true);
-                              />
+                              }}
-                           </Stack>
+                              pitchAlignment="auto"
-                        </Marker>
+                           >
+                              <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 />
+                           <NavigationControl />
-                        <ScaleControl position="top-left" />
+                           <ScaleControl position="top-left" />
-                        <AttributionControl
+                           <AttributionControl
-                           style={{ color: "black" }}
+                              style={{ color: "black" }}
-                           customAttribution="Map design by PT. Bali Interaktif Perkasa"
+                              customAttribution="Map design by PT. Bali Interaktif Perkasa"
-                        />
+                           />
-                     </Map>
+                        </Map>
 
                }
 

src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx

@@ -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");

src/app_modules/katalog/profile/create/view.tsx

@@ -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}>

src/app_modules/katalog/profile/edit/view.tsx

@@ -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 (_.values(body).includes(""))
-    if (!body.email.match(validRegex)) return null;
+      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" />
             ) : (
               ""

src/app_modules/katalog/profile/upload/foto_background/index.tsx

@@ -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>

src/app_modules/katalog/profile/upload/foto_profile/index.tsx

@@ -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>

src/app_modules/map/_component/button/comp_button_save_pin.tsx

@@ -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"}