fix

Deskripsi: - Upload ke stroage untuk job ## Np Issuee
2024-09-19 15:59:21 +08:00
parent 128dc98839
commit f96d80d55d
153 changed files with 1369 additions and 1200 deletions
--- a/src/app_modules/katalog/component/index.ts
+++ b/src/app_modules/katalog/component/index.ts
--- a/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
+++ b/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
@@ -0,0 +1,83 @@
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { MODEL_PORTOFOLIO_OLD } from "@/app_modules/model_global/portofolio";
+import { Button } from "@mantine/core";
+import _ from "lodash";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import funCreatePortofolio from "../../fun/fun_create_portofolio";
+
+export function Portofolio_ComponentButtonSelanjutnya({
+  profileId,
+  dataPorto,
+  file,
+  dataMedsos,
+  setIsFile,
+}: {
+  profileId: string;
+  dataPorto: MODEL_PORTOFOLIO_OLD;
+  file: FormData;
+  dataMedsos: any;
+  setIsFile: any;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit() {
+    const porto = {
+      namaBisnis: dataPorto.namaBisnis,
+      masterBidangBisnisId: dataPorto.masterBidangBisnisId,
+      alamatKantor: dataPorto.alamatKantor,
+      tlpn: dataPorto.tlpn,
+      deskripsi: dataPorto.deskripsi,
+    };
+
+    if (_.values(porto).includes(""))
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
+    if (file === null) {
+      setIsFile(true);
+      return null;
+    }
+
+    const gambar = new FormData();
+    gambar.append("file", file as any);
+
+    const res = await funCreatePortofolio(
+      profileId,
+      porto as any,
+      gambar,
+      dataMedsos
+    );
+    if (res.status === 201) {
+      setLoading(true);
+      // ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
+      router.replace(RouterMap.create + res.id, { scroll: false });
+    } else {
+      ComponentGlobal_NotifikasiGagal("Gagal disimpan");
+    }
+  }
+  return (
+    <>
+      <Button
+        disabled={_.values(dataPorto).includes("") || file === null}
+        mt={"md"}
+        radius={50}
+        loading={loading ? true : false}
+        loaderPosition="center"
+        onClick={() => {
+          onSubmit();
+        }}
+        bg={MainColor.yellow}
+        color="yellow"
+        c={"black"}
+      >
+        Selanjutnya
+      </Button>
+    </>
+  );
+}
--- a/src/app_modules/katalog/portofolio/component/index.ts
+++ b/src/app_modules/katalog/portofolio/component/index.ts
@@ -1 +1,4 @@
+import { Portofolio_ComponentButtonSelanjutnya } from "./button/comp_button_selanjutnya";
+
 export { ComponentPortofolio_DetailDataMap } from "./detail_data_drawer_map";
+export { Portofolio_ComponentButtonSelanjutnya };
--- a/src/app_modules/katalog/portofolio/create/view.tsx
+++ b/src/app_modules/katalog/portofolio/create/view.tsx
@@ -34,6 +34,8 @@ import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.share
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import funCreatePortofolio from "../fun/fun_create_portofolio";
+import { Portofolio_ComponentButtonSelanjutnya } from "../component";
+import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";

 export default function CreatePortofolio({
  bidangBisnis,
@@ -42,9 +44,7 @@ export default function CreatePortofolio({
  bidangBisnis: BIDANG_BISNIS_OLD;
  profileId: any;
 }) {
-  const router = useRouter();
-  const [loading, setLoading] = useState(false);
-  const [value, setValue] = useState({
+  const [dataPortofolio, setDataPortofolio] = useState({
    namaBisnis: "",
    masterBidangBisnisId: "",
    alamatKantor: "",
@@ -52,7 +52,7 @@ export default function CreatePortofolio({
    deskripsi: "",
  });

-  const [medsos, setMedsos] = useState({
+  const [dataMedsos, setDataMedsos] = useState({
    facebook: "",
    twitter: "",
    instagram: "",
@@ -82,8 +82,8 @@ export default function CreatePortofolio({
            placeholder="Nama bisnis"
            maxLength={100}
            onChange={(val) => {
-              setValue({
-                ...value,
+              setDataPortofolio({
+                ...dataPortofolio,
                namaBisnis: _.startCase(val.target.value),
              });
            }}
@@ -102,8 +102,8 @@ export default function CreatePortofolio({
              label: e.name,
            }))}
            onChange={(val) => {
-              setValue({
-                ...value,
+              setDataPortofolio({
+                ...dataPortofolio,
                masterBidangBisnisId: val as any,
              });
            }}
@@ -119,8 +119,8 @@ export default function CreatePortofolio({
            placeholder="Alamat bisnis"
            maxLength={100}
            onChange={(val) => {
-              setValue({
-                ...value,
+              setDataPortofolio({
+                ...dataPortofolio,
                alamatKantor: val.target.value,
              });
            }}
@@ -136,8 +136,8 @@ export default function CreatePortofolio({
            placeholder="Nomor telepon "
            type="number"
            onChange={(val) => {
-              setValue({
-                ...value,
+              setDataPortofolio({
+                ...dataPortofolio,
                tlpn: val.target.value,
              });
            }}
@@ -157,15 +157,15 @@ export default function CreatePortofolio({
              label="Deskripsi"
              placeholder="Deskripsi singkat mengenai usaha"
              onChange={(val) => {
-                setValue({
-                  ...value,
+                setDataPortofolio({
+                  ...dataPortofolio,
                  deskripsi: val.target.value,
                });
              }}
            />
            <ComponentGlobal_InputCountDown
              maxInput={300}
-              lengthInput={value.deskripsi.length}
+              lengthInput={dataPortofolio.deskripsi.length}
            />
          </Stack>
        </Stack>
@@ -182,52 +182,25 @@ export default function CreatePortofolio({

          {isFile ? <ComponentGlobal_ErrorInput text="Upload gambar" /> : ""} */}

-          {img ? (
-            <AspectRatio ratio={1 / 1} mah={300}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.blue}`,
-                  backgroundColor: AccentColor.darkblue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
+          <ComponentGlobal_BoxUploadImage>
+            {img ? (
+              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
                <Image
-                radius={"sm"}
+                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
                  alt="Foto"
-                  src={img ? img : "/aset/no-img.png"}
-                  maw={200}
+                  height={250}
+                  src={img}
                />
-              </Paper>
-            </AspectRatio>
-          ) : (
-            <AspectRatio ratio={1 / 1} mah={300}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.blue}`,
-                  backgroundColor: AccentColor.darkblue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
-                <Box
-                  h={250}
-                  w={200}
-                  style={{
-                    color: "white",
-                  }}
-                >
-                  <Stack spacing={5} justify="center" align="center" h={"100%"}>
-                    <Title order={3}>Upload Logo Bisnis</Title>
-                    <Text fs={"italic"} fz={10} align="center">
-                      Masukan logo bisnis anda untuk ditampilkan dalam
-                      portofolio
-                    </Text>
-                  </Stack>
-                </Box>
-              </Paper>
-            </AspectRatio>
-          )}
+              </AspectRatio>
+            ) : (
+              <Stack spacing={5} justify="center" align="center" h={"100%"}>
+                <Title order={3}>Upload Logo Bisnis</Title>
+                <Text fs={"italic"} fz={10} align="center">
+                  Masukan logo bisnis anda untuk ditampilkan dalam portofolio
+                </Text>
+              </Stack>
+            )}
+          </ComponentGlobal_BoxUploadImage>

          <Center>
            <FileButton
@@ -280,8 +253,8 @@ export default function CreatePortofolio({
            maxLength={100}
            placeholder="Facebook"
            onChange={(val) => {
-              setMedsos({
-                ...medsos,
+              setDataMedsos({
+                ...dataMedsos,
                facebook: val.target.value,
              });
            }}
@@ -296,8 +269,8 @@ export default function CreatePortofolio({
            maxLength={100}
            placeholder="Instagram"
            onChange={(val) => {
-              setMedsos({
-                ...medsos,
+              setDataMedsos({
+                ...dataMedsos,
                instagram: val.target.value,
              });
            }}
@@ -312,8 +285,8 @@ export default function CreatePortofolio({
            maxLength={100}
            placeholder="Tiktok"
            onChange={(val) => {
-              setMedsos({
-                ...medsos,
+              setDataMedsos({
+                ...dataMedsos,
                tiktok: val.target.value,
              });
            }}
@@ -328,8 +301,8 @@ export default function CreatePortofolio({
            maxLength={100}
            placeholder="Twitter"
            onChange={(val) => {
-              setMedsos({
-                ...medsos,
+              setDataMedsos({
+                ...dataMedsos,
                twitter: val.target.value,
              });
            }}
@@ -344,82 +317,24 @@ export default function CreatePortofolio({
            maxLength={100}
            placeholder="Youtube"
            onChange={(val) => {
-              setMedsos({
-                ...medsos,
+              setDataMedsos({
+                ...dataMedsos,
                youtube: val.target.value,
              });
            }}
          />
        </Stack>

-        <Button
-          disabled={_.values(value).includes("") || file === null}
-          mt={"md"}
-          radius={50}
-          loading={loading ? true : false}
-          loaderPosition="center"
-          onClick={() => {
-            onSubmit(
-              router,
-              profileId,
-              value as any,
-              file,
-              medsos,
-              setLoading,
-              setIsFile
-            );
-          }}
-          bg={MainColor.yellow}
-          color="yellow"
-          c={"black"}
-        >
-          Selanjutnya
-        </Button>
+        <Portofolio_ComponentButtonSelanjutnya
+          dataPorto={dataPortofolio as any}
+          dataMedsos={dataMedsos}
+          file={file}
+          profileId={profileId}
+          setIsFile={setIsFile}
+        />
      </Stack>

      {/* <pre> {JSON.stringify(bidangBisnis, null, 2)}</pre> */}
    </>
  );
 }
-
-async function onSubmit(
-  router: AppRouterInstance,
-  profileId: string,
-  dataPorto: MODEL_PORTOFOLIO_OLD,
-  file: FormData,
-  dataMedsos: any,
-  setLoading: any,
-  setIsFile: any
-) {
-  const porto = {
-    namaBisnis: dataPorto.namaBisnis,
-    masterBidangBisnisId: dataPorto.masterBidangBisnisId,
-    alamatKantor: dataPorto.alamatKantor,
-    tlpn: dataPorto.tlpn,
-    deskripsi: dataPorto.deskripsi,
-  };
-
-  if (_.values(porto).includes(""))
-    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
-  if (file === null) {
-    setIsFile(true);
-    return null;
-  }
-
-  const gambar = new FormData();
-  gambar.append("file", file as any);
-
-  const res = await funCreatePortofolio(
-    profileId,
-    porto as any,
-    gambar,
-    dataMedsos
-  );
-  if (res.status === 201) {
-    setLoading(true);
-    // ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
-    router.replace(RouterMap.create + res.id , {scroll: false});
-  } else {
-    ComponentGlobal_NotifikasiGagal("Gagal disimpan");
-  }
-}
--- a/src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
+++ b/src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import { MainColor, AccentColor } from "@/app_modules/_global/color";
+import { ComponentGlobal_NotifikasiPeringatan, ComponentGlobal_NotifikasiBerhasil, ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global";
+import { validRegex } from "@/app_modules/katalog/component/regular_expressions";
+import { Button } from "@mantine/core";
+import _ from "lodash";
+
+import { useState } from "react";
+import funCreateNewProfile from "../../fun/fun_create_profile";
+import { MODEL_PROFILE } from "../../model/interface";
+import { useRouter } from "next/navigation";
+
+export function Profile_ComponentCreateNewProfile({
+  value,
+  userLoginId,
+  filePP,
+  fileBg,
+}: {
+  value: MODEL_PROFILE;
+  userLoginId: string;
+  filePP: FormData;
+  fileBg: FormData;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit() {
+    const body = {
+      userId: userLoginId,
+      name: value.name,
+      email: value.email,
+      alamat: value.alamat,
+      jenisKelamin: value.jenisKelamin,
+    };
+    if (_.values(body).includes(""))
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
+    if (!body.email.match(validRegex)) return null;
+
+    const gambarPP = new FormData();
+    gambarPP.append("filePP", filePP as any);
+
+    const gambarBG = new FormData();
+    gambarBG.append("fileBG", fileBg as any);
+
+    if (!gambarPP)
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapi foto profile");
+    if (!gambarBG)
+      return ComponentGlobal_NotifikasiPeringatan(
+        "Lengkapi background profile"
+      );
+
+    await funCreateNewProfile(body as any, gambarPP, gambarBG).then((res) => {
+      if (res.status === 201) {
+        setLoading(true);
+        ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Profile", 3000);
+        router.push(RouterHome.main_home);
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    });
+  }
+
+  return (
+    <>
+      <Button
+        loading={loading ? true : false}
+        loaderPosition="center"
+        mt={"md"}
+        radius={50}
+        bg={MainColor.yellow}
+        color="yellow"
+        onClick={() => {
+          onSubmit();
+        }}
+        style={{
+          border: `2px solid ${AccentColor.yellow}`,
+          color: "black",
+        }}
+      >
+        Simpan
+      </Button>
+    </>
+  );
+}
--- a/src/app_modules/katalog/profile/_component/index.ts
+++ b/src/app_modules/katalog/profile/_component/index.ts
@@ -0,0 +1,3 @@
+import { Profile_ComponentCreateNewProfile } from "./button/comp_create_new_profile";
+
+export {Profile_ComponentCreateNewProfile}
--- a/src/app_modules/katalog/profile/create/view.tsx
+++ b/src/app_modules/katalog/profile/create/view.tsx
@@ -1,14 +1,11 @@
 "use client";

-import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import {
  AccentColor,
  MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 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 { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import {
  AspectRatio,
@@ -25,14 +22,16 @@ import {
  TextInput,
 } from "@mantine/core";
 import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
-import _ from "lodash";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { validRegex } from "../../component/regular_expressions";
-import funCreateNewProfile from "../fun/fun_create_profile";
-import { MODEL_PROFILE } from "../model/interface";
+import { Profile_ComponentCreateNewProfile } from "../_component";
+import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";

-export default function CreateProfile({ userId }: { userId: any }) {
+export default function CreateProfile({
+  userLoginId,
+}: {
+  userLoginId: string;
+}) {
  const [filePP, setFilePP] = useState<File | null>(null);
  const [imgPP, setImgPP] = useState<any | null>();
  const [fileBG, setFileBG] = useState<File | null>(null);
@@ -47,14 +46,16 @@ export default function CreateProfile({ userId }: { userId: any }) {

  return (
    <>
-      <Stack px={"sm"} spacing={"xl"}>
+      <Stack px={"sm"} spacing={40}>
        <Box>
-          <Stack>
+          <Stack spacing={"xs"}>
            <ComponentGlobal_BoxInformation informasi="Upload foto profile anda." />
            <Center>
              {imgPP ? (
                <Paper shadow="lg" radius={"100%"}>
                  <Avatar
+
+                    color={"cyan"}
                    sx={{
                      borderStyle: "solid",
                      borderColor: "gray",
@@ -68,11 +69,13 @@ export default function CreateProfile({ userId }: { userId: any }) {
              ) : (
                <Paper shadow="lg" radius={"100%"}>
                  <Avatar
+                    variant="light"
+                    color="blue"
                    size={150}
                    radius={"100%"}
                    sx={{
                      borderStyle: "solid",
-                      borderColor: "gray",
+                      borderColor: MainColor.darkblue,
                      borderWidth: "0.5px",
                    }}
                  />
@@ -119,22 +122,20 @@ export default function CreateProfile({ userId }: { userId: any }) {
        </Box>

        <Box>
-          <Stack>
+          <Stack spacing={"xs"}>
            <ComponentGlobal_BoxInformation informasi="Upload foto latar belakang profile anda." />
-            <AspectRatio ratio={16 / 9}>
-              <Paper radius={"md"} withBorder shadow="lg" bg={"gray.2"}>
-                {imgBG ? (
-                  <Image alt="Foto" src={imgBG ? imgBG : "/aset/no-img.png"} />
-                ) : (
-                  <Stack align="center">
-                    <IconUpload color="gray" />
-                    <Text fz={"xs"} c={"gray"}>
-                      Upload Background
-                    </Text>
-                  </Stack>
-                )}
-              </Paper>
-            </AspectRatio>
+            <ComponentGlobal_BoxUploadImage>
+              {imgBG ? (
+                <Image alt="Foto" src={imgBG ? imgBG : "/aset/no-img.png"} />
+              ) : (
+                <Stack justify="center" align="center" h={"100%"}>
+                  <IconUpload color="white" />
+                  <Text fz={"xs"} c={"white"}>
+                    Upload Background
+                  </Text>
+                </Stack>
+              )}
+            </ComponentGlobal_BoxUploadImage>

            <Center>
              <FileButton
@@ -251,9 +252,9 @@ export default function CreateProfile({ userId }: { userId: any }) {
            }}
          />

-          <ButtonAction
+          <Profile_ComponentCreateNewProfile
            value={value as any}
-            userId={userId}
+            userLoginId={userLoginId}
            filePP={filePP as any}
            fileBg={fileBG as any}
          />
@@ -262,76 +263,3 @@ export default function CreateProfile({ userId }: { userId: any }) {
    </>
  );
 }
-
-function ButtonAction({
-  value,
-  userId,
-  filePP,
-  fileBg,
-}: {
-  value: MODEL_PROFILE;
-  userId: string;
-  filePP: FormData;
-  fileBg: FormData;
-}) {
-  const router = useRouter();
-  const [loading, setLoading] = useState(false);
-
-  async function onSubmit() {
-    const body = {
-      userId: userId,
-      name: value.name,
-      email: value.email,
-      alamat: value.alamat,
-      jenisKelamin: value.jenisKelamin,
-    };
-    if (_.values(body).includes(""))
-      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
-    if (!body.email.match(validRegex)) return null;
-
-    const gambarPP = new FormData();
-    gambarPP.append("filePP", filePP as any);
-
-    const gambarBG = new FormData();
-    gambarBG.append("fileBG", fileBg as any);
-
-    if (!gambarPP)
-      return ComponentGlobal_NotifikasiPeringatan("Lengkapi foto profile");
-    if (!gambarBG)
-      return ComponentGlobal_NotifikasiPeringatan(
-        "Lengkapi background profile"
-      );
-
-    await funCreateNewProfile(body as any, gambarPP, gambarBG).then((res) => {
-      if (res.status === 201) {
-        setLoading(true);
-        ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Profile", 3000);
-        router.push(RouterHome.main_home, { scroll: false });
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
-    });
-  }
-
-  return (
-    <>
-      <Button
-        loading={loading ? true : false}
-        loaderPosition="center"
-        mt={"md"}
-        radius={50}
-        bg={MainColor.yellow}
-        color="yellow"
-        onClick={() => {
-          onSubmit();
-        }}
-        style={{
-          border: `2px solid ${AccentColor.yellow}`,
-          color: "black",
-        }}
-      >
-        Simpan
-      </Button>
-    </>
-  );
-}