Merge pull request #186 from bipproduction/fix/bug/profile

Fix file image
2024-12-12 00:51:00 +08:00
parent 01c0e87cd0 9046316b9e
commit 3b50fada4a
24 changed files with 84 additions and 89 deletions
--- a/src/app/dev/map/create/[id]/page.tsx
+++ b/src/app/dev/map/create/[id]/page.tsx
@@ -4,7 +4,7 @@ export default async function Page({ params }: { params: { id: string } }) {
  let portofolioId = params.id;
  return (
    <>
-      <Map_CreateNewPin  portofolioId={portofolioId}/>
+      <Map_CreateNewPin portofolioId={portofolioId} />
    </>
  );
 }
--- a/src/app/dev/profile/upload/foto/[id]/page.tsx
+++ b/src/app/dev/profile/upload/foto/[id]/page.tsx
@@ -1,11 +1,13 @@
 import { UploadFotoProfile } from "@/app_modules/katalog/profile";
 import { Profile_getOneById } from "@/app_modules/katalog/profile/fun/get/get_one_profile";

-export default async function Page({params}: {params: {id: string}}) {
-    let profileId = params.id
-    const dataProfile = await Profile_getOneById(profileId)
+export default async function Page({ params }: { params: { id: string } }) {
+  let profileId = params.id;
+  const dataProfile = await Profile_getOneById(profileId);

-    return <>
-    <UploadFotoProfile dataProfile={dataProfile as any}/>
+  return (
+    <>
+      <UploadFotoProfile dataProfile={dataProfile as any} />
    </>
-}
+  );
+}
--- a/src/app_modules/_global/button/comp_button_upload_photo.tsx
+++ b/src/app_modules/_global/button/comp_button_upload_photo.tsx
@@ -4,6 +4,7 @@ import { Button, FileButton } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import { MainColor } from "../color";
 import { MAX_SIZE } from "../lib";
+import { PemberitahuanMaksimalFile } from "../lib/max_size";
 import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";

 export function ComponentGlobal_ButtonUploadFileImage({
@@ -22,9 +23,7 @@ export function ComponentGlobal_ButtonUploadFileImage({
          );

          if (files.size > MAX_SIZE) {
-            ComponentGlobal_NotifikasiPeringatan(
-              "Ukuran file terlalu besar. Maksimal 2 MB."
-            );
+            ComponentGlobal_NotifikasiPeringatan(PemberitahuanMaksimalFile);
          } else {
            onSetFile(files);
            onSetImage(buffer);
--- a/src/app_modules/_global/component/comp_load_avatar.tsx
+++ b/src/app_modules/_global/component/comp_load_avatar.tsx
@@ -17,7 +17,7 @@ export function ComponentGlobal_LoaderAvatar({
 }) {
  const [isImage, setIsImage] = useState<boolean | null>(null);

-  const url = APIs.GET({ fileId: fileId, size: imageSize });
+  const url = APIs.GET({ fileId: fileId, size: imageSize ? imageSize : "400" });

  useShallowEffect(() => {
    onLoadImage();
--- a/src/app_modules/_global/component/comp_load_image.tsx
+++ b/src/app_modules/_global/component/comp_load_image.tsx
@@ -24,7 +24,7 @@ export function ComponentGlobal_LoadImage({
  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();
--- a/src/app_modules/_global/component/comp_load_image_custom.tsx
+++ b/src/app_modules/_global/component/comp_load_image_custom.tsx
@@ -15,7 +15,7 @@ export function ComponentGlobal_LoadImageCustom({
  height: number;
 }) {
  const [isImage, setIsImage] = useState<boolean | null>(null);
-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });

  useShallowEffect(() => {
    onLoadImage();
--- a/src/app_modules/_global/component/comp_load_image_landscape.tsx
+++ b/src/app_modules/_global/component/comp_load_image_landscape.tsx
@@ -16,7 +16,7 @@ export function ComponentGlobal_LoadImageLandscape({
  const router = useRouter();
  const [isImage, setIsImage] = useState<boolean | null>(null);
  const [isLoading, setLoading] = useState(false);
-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });

  useShallowEffect(() => {
    onLoadImage();
--- a/src/app_modules/_global/component/comp_not_user_load_image.tsx
+++ b/src/app_modules/_global/component/comp_not_user_load_image.tsx
@@ -22,7 +22,7 @@ export function ComponentGlobal_NotUserLoadImage({
  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();
--- a/src/app_modules/_global/lib/max_size.ts
+++ b/src/app_modules/_global/lib/max_size.ts
@@ -1,2 +1,3 @@
-// Maksimal ukuran file dalam byte (2 MB)
-export const MAX_SIZE = 2 * 1024 * 1024; // 2 MB
+// Maksimal ukuran file dalam byte (3 MB)
+export const MAX_SIZE = 3 * 1024 * 1024; // 3 MB
+export const PemberitahuanMaksimalFile = "Ukuran file terlalu besar. Maksimal 3 MB.";
--- a/src/app_modules/_global/ui/ui_not_user_image_preview.tsx
+++ b/src/app_modules/_global/ui/ui_not_user_image_preview.tsx
@@ -23,7 +23,7 @@ export function UIGlobal_NotUserImagePreview({ fileId }: { fileId: string }) {
  const router = useRouter();
  const [isImage, setIsImage] = useState<boolean | null>(null);

-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });

  useShallowEffect(() => {
    onLoadImage();
--- a/src/app_modules/admin/_admin_global/_component/comp_admin_load_image.tsx
+++ b/src/app_modules/admin/_admin_global/_component/comp_admin_load_image.tsx
@@ -15,7 +15,7 @@ export function Admin_ComponentLoadImageLandscape({
  const router = useRouter();
  const [isImage, setIsImage] = useState<boolean | null>(null);
  const [isLoading, setLoading] = useState(false);
-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });

  useShallowEffect(() => {
    onLoadImage();
--- a/src/app_modules/admin/_admin_global/comp_preview_image_admin.tsx
+++ b/src/app_modules/admin/_admin_global/comp_preview_image_admin.tsx
@@ -13,7 +13,7 @@ export function Admin_ComponentPreviewImageAdmin({
 }) {
  const [isImage, setIsImage] = useState<boolean | null>(null);

-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });

  useShallowEffect(() => {
    onLoadImage();
--- a/src/app_modules/admin/map/ui/ui_map_view.tsx
+++ b/src/app_modules/admin/map/ui/ui_map_view.tsx
@@ -88,8 +88,8 @@ export function UiAdminMap_MapBoxView({
                    }}
                    src={
                      e.pinId === null
-                        ? APIs.GET({ fileId: e.Portofolio.logoId })
-                        : APIs.GET({ fileId: e.pinId })
+                        ? APIs.GET({ fileId: e.Portofolio.logoId, size: "300" })
+                        : APIs.GET({ fileId: e.pinId, size: "300" })
                    }
                  />
                </Stack>
--- a/src/app_modules/katalog/portofolio/create/view.tsx
+++ b/src/app_modules/katalog/portofolio/create/view.tsx
@@ -22,6 +22,9 @@ import { IconCamera } 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";

 export default function CreatePortofolio({
  bidangBisnis,
@@ -184,8 +187,16 @@ export default function CreatePortofolio({
                  const buffer = URL.createObjectURL(
                    new Blob([new Uint8Array(await files.arrayBuffer())])
                  );
-                  setImg(buffer);
-                  setFile(files);
+                  if (files.size > MAX_SIZE) {
+                    setImg(null);
+                    setFile(null);
+                    ComponentGlobal_NotifikasiPeringatan(
+                      PemberitahuanMaksimalFile
+                    );
+                  } else {
+                    setImg(buffer);
+                    setFile(files);
+                  }
                } catch (error) {
                  console.log(error);
                }
--- a/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
+++ b/src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
@@ -11,6 +11,9 @@ import { IconCamera } from "@tabler/icons-react";
 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";

 export default function Portofolio_EditLogoBisnis({
  dataPorto,
@@ -47,8 +50,15 @@ export default function Portofolio_EditLogoBisnis({
                    const buffer = URL.createObjectURL(
                      new Blob([new Uint8Array(await files.arrayBuffer())])
                    );
-                    setImg(buffer);
-                    setFile(files);
+
+                    if (files.size > MAX_SIZE) {
+                      ComponentGlobal_NotifikasiPeringatan(
+                        PemberitahuanMaksimalFile
+                      );
+                    } else {
+                      setImg(buffer);
+                      setFile(files);
+                    }
                  } catch (error) {
                    console.log(error);
                  }
--- a/src/app_modules/katalog/portofolio/ui/ui_detail_map.tsx
+++ b/src/app_modules/katalog/portofolio/ui/ui_detail_map.tsx
@@ -102,8 +102,8 @@ function MapView({
            <Avatar
              src={
                data.pinId === null
-                  ? APIs.GET({ fileId: logoId })
-                  : APIs.GET({ fileId: data.pinId })
+                  ? APIs.GET({ fileId: logoId , size: "300"})
+                  : APIs.GET({ fileId: data.pinId, size: "300" })
              }
              alt="Logo"
              style={{
--- a/src/app_modules/katalog/portofolio/ui/ui_detail_map_new.tsx
+++ b/src/app_modules/katalog/portofolio/ui/ui_detail_map_new.tsx
@@ -96,8 +96,8 @@ export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: stri
                                 <Avatar
                                    src={
                                       dataPorto?.pinId === null
-                                          ? APIs.GET({ fileId: String(dataPorto?.logoId) })
-                                          : APIs.GET({ fileId: String(dataPorto?.pinId) })
+                                          ? APIs.GET({ fileId: String(dataPorto?.logoId), size: "300" })
+                                          : APIs.GET({ fileId: String(dataPorto?.pinId), size: "300" })
                                    }
                                    alt="Logo"
                                    style={{
--- a/src/app_modules/katalog/profile/create/view.tsx
+++ b/src/app_modules/katalog/profile/create/view.tsx
@@ -26,6 +26,7 @@ import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
 import { useState } from "react";
 import { gmailRegex } from "../../component/regular_expressions";
 import { Profile_ComponentCreateNewProfile } from "../_component";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";

 export default function CreateProfile() {
  const [filePP, setFilePP] = useState<File | null>(null);
@@ -88,7 +89,7 @@ export default function CreateProfile() {

                    if (files.size > MAX_SIZE) {
                      ComponentGlobal_NotifikasiPeringatan(
-                        "Ukuran file terlalu besar. Maksimal 2 MB."
+                        PemberitahuanMaksimalFile
                      );
                    } else {
                      setImgPP(buffer);
@@ -150,7 +151,7 @@ export default function CreateProfile() {

                    if (files.size > MAX_SIZE) {
                      ComponentGlobal_NotifikasiPeringatan(
-                        "Ukuran file terlalu besar. Maksimal 2 MB."
+                        PemberitahuanMaksimalFile
                      );
                    } else {
                      setImgBG(buffer);
--- a/src/app_modules/map/_component/comp_load_image_map.tsx
+++ b/src/app_modules/map/_component/comp_load_image_map.tsx
@@ -17,7 +17,7 @@ export function ComponentMap_LoadImageMap({
  const router = useRouter();
  const [isImage, setIsImage] = useState<boolean | null>(null);

-  const url = APIs.GET({ fileId: fileId, size: size });
+  const url = APIs.GET({ fileId: fileId, size: size ? size : "400" });

  useShallowEffect(() => {
    onLoadImage();
--- a/src/app_modules/map/ui/ui_create_pin.tsx
+++ b/src/app_modules/map/ui/ui_create_pin.tsx
@@ -16,7 +16,7 @@ import {
  Stack,
  Text,
  TextInput,
-  Title
+  Title,
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import _ from "lodash";
@@ -29,6 +29,8 @@ import Map, {
 } from "react-map-gl";
 import { ComponentMap_ButtonSavePin } from "../_component";
 import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";

 export function UiMap_CreatePin({
  mapboxToken,
@@ -141,9 +143,12 @@ export function UiMap_CreatePin({
                  const buffer = URL.createObjectURL(
                    new Blob([new Uint8Array(await files.arrayBuffer())])
                  );
-                  if (files.size > 2000000) {
+
+                  if (files.size > MAX_SIZE) {
+                    setImg(null);
+                    setFile(null);
                    ComponentGlobal_NotifikasiPeringatan(
-                      "Maaf, Ukuran file terlalu besar, maximum 2mb",
+                      PemberitahuanMaksimalFile,
                      3000
                    );
                  } else {
--- a/src/app_modules/map/ui/ui_custom_pin.tsx
+++ b/src/app_modules/map/ui/ui_custom_pin.tsx
@@ -27,6 +27,8 @@ 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";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";

 export function UiMap_CustomPin({
  dataMap,
@@ -72,8 +74,8 @@ export function UiMap_CustomPin({
                radius={"100%"}
                src={
                  data.pinId === null
-                    ? APIs.GET({ fileId: data.Portofolio.logoId })
-                    : APIs.GET({ fileId: data.pinId })
+                    ? APIs.GET({ fileId: data.Portofolio.logoId, size: "300" })
+                    : APIs.GET({ fileId: data.pinId, size: "300" })
                }
                style={{
                  border: `2px solid ${AccentColor.skyblue}`,
@@ -90,9 +92,9 @@ export function UiMap_CustomPin({
                  const buffer = URL.createObjectURL(
                    new Blob([new Uint8Array(await files.arrayBuffer())])
                  );
-                  if (files.size > 2000000) {
+                  if (files.size > MAX_SIZE) {
                    ComponentGlobal_NotifikasiPeringatan(
-                      "Maaf, Ukuran file terlalu besar, maximum 2mb",
+                      PemberitahuanMaksimalFile,
                      3000
                    );
                  } else {
@@ -155,8 +157,8 @@ export function UiMap_CustomPin({
                imgPin
                  ? imgPin
                  : data.pinId === null
-                    ? APIs.GET({ fileId: data.Portofolio.logoId })
-                    : APIs.GET({ fileId: data.pinId })
+                    ? APIs.GET({ fileId: data.Portofolio.logoId, size: "300" })
+                    : APIs.GET({ fileId: data.pinId, size: "300" })
              }
              style={{
                border: `2px solid ${AccentColor.softblue}`,
--- a/src/app_modules/map/ui/ui_edit_map.tsx
+++ b/src/app_modules/map/ui/ui_edit_map.tsx
@@ -33,6 +33,8 @@ import Map, {
 import { ComponentMap_ButtonUpdateDataMap } from "../_component";
 import { defaultMapZoom } from "../lib/default_lat_long";
 import { MODEL_MAP } from "../lib/interface";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";

 export function UiMap_EditMap({
  mapboxToken,
@@ -85,8 +87,8 @@ export function UiMap_EditMap({
            <Avatar
              src={
                data.pinId === null
-                  ? APIs.GET({ fileId: dataMap.Portofolio.logoId })
-                  : APIs.GET({ fileId: data.pinId })
+                  ? APIs.GET({ fileId: dataMap.Portofolio.logoId, size: "400" })
+                  : APIs.GET({ fileId: data.pinId, size: "400" })
              }
              alt="Logo"
              style={{
@@ -141,44 +143,6 @@ export function UiMap_EditMap({
            )}
          </ComponentGlobal_BoxUploadImage>

-          {/* {img ? (
-            <AspectRatio ratio={1 / 1} mah={300}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.blue}`,
-                  backgroundColor: AccentColor.darkblue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
-                <Image
-                  radius={"sm"}
-                  alt="Photo"
-                  src={img ? img : "/aset/no-img.png"}
-                  maw={250}
-                />
-              </Paper>
-            </AspectRatio>
-          ) : (
-            <AspectRatio ratio={1 / 1} mah={300}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.blue}`,
-                  backgroundColor: AccentColor.darkblue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
-                <Image
-                  radius={"sm"}
-                  alt="Photo"
-                  src={RouterMap.api_foto + data.imageId}
-                  maw={250}
-                />
-              </Paper>
-            </AspectRatio>
-          )} */}
-
          <Center>
            <FileButton
              onChange={async (files: any | null) => {
@@ -186,9 +150,9 @@ export function UiMap_EditMap({
                  const buffer = URL.createObjectURL(
                    new Blob([new Uint8Array(await files.arrayBuffer())])
                  );
-                  if (files.size > 2000000) {
+                  if (files.size > MAX_SIZE) {
                    ComponentGlobal_NotifikasiPeringatan(
-                      "Maaf, Ukuran file terlalu besar, maximum 2mb",
+                      PemberitahuanMaksimalFile,
                      3000
                    );
                  } else {
--- a/src/app_modules/map/ui/ui_map.tsx
+++ b/src/app_modules/map/ui/ui_map.tsx
@@ -91,8 +91,8 @@ export function UiMap_MapBoxView({
                    }}
                    src={
                      e.pinId === null
-                        ? APIs.GET({ fileId: e.Portofolio.logoId })
-                        : APIs.GET({ fileId: e.pinId })
+                        ? APIs.GET({ fileId: e.Portofolio.logoId, size: "300" })
+                        : APIs.GET({ fileId: e.pinId, size: "300" })
                    }
                  />
                </Stack>
@@ -110,7 +110,7 @@ export function UiMap_MapBoxView({
        opened={openDrawer}
        close={() => setOpenDrawer(false)}
        mapId={mapId}
-        component={<ComponentMap_DetailData mapId={mapId}  />}
+        component={<ComponentMap_DetailData mapId={mapId} />}
      />
    </>
  );
--- a/src/app_modules/map/ui/ui_map_new.tsx
+++ b/src/app_modules/map/ui/ui_map_new.tsx
@@ -94,8 +94,8 @@ export function UiMap_MapBoxViewNew({ mapboxToken, }: { mapboxToken: string }) {
                                    }}
                                    src={
                                       e.pinId === null
-                                          ? APIs.GET({ fileId: e.logoId })
-                                          : APIs.GET({ fileId: e.pinId })
+                                          ? APIs.GET({ fileId: e.logoId, size: "300" })
+                                          : APIs.GET({ fileId: e.pinId, size: "300" })
                                    }
                                 />
                              </Stack>