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

fix (upload image)

Browse Source 
deskripsi:
- upload image di portofolio
This commit is contained in:
Bagasbanuna02
2025-01-08 15:18:33 +08:00
parent a45e24efe4
commit 5dbecae360
17 changed files with 557 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/app_modules/katalog/main/layout_new.tsx
View File

@@ -1,66 +1,85 @@
'use client'
"use client";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui";
import {
UIGlobal_LayoutHeaderTamplate,
UIGlobal_LayoutTamplate,
} from "@/app_modules/_global/ui";
import { apiGetUserProfile } from "@/app_modules/user";
import { ActionIcon } from "@mantine/core";
import { ActionIcon, Skeleton } from "@mantine/core";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { IconDotsVertical } from "@tabler/icons-react";
import { useParams } from "next/navigation";
import { useState } from "react";
import DrawerKatalogNew from "../component/drawer_katalog_new";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
export default function LayoutKatalogNew({ children }: { children: any }) {
const param = useParams<{ id: string }>()
const [authorId, setAuthorId] = useState("")
const [userRoleId, setUserRoleId] = useState("")
const [userLoginId, setUserLoginId] = useState("")
const [opened, { open, close }] = useDisclosure()
const [loading, setLoading] = useState(true);
export default function LayoutKatalogNew({
children,
userLoginId,
}: {
children: any;
userLoginId: string;
}) {
const param = useParams<{ id: string }>();
const [authorId, setAuthorId] = useState("");
const [userRoleId, setUserRoleId] = useState("");
const [opened, { open, close }] = useDisclosure();
const [loading, setLoading] = useState(true);
async function getProfile() {
try {
setLoading(true)
const response = await apiGetUserProfile(`?profile=${param.id}`)
const response2 = await funGetUserIdByToken()
if (response) {
setAuthorId(response.data.id)
setUserRoleId(response.data.masterUserRoleId)
setUserLoginId(response2)
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
async function getProfile() {
try {
setLoading(true);
const response = await apiGetUserProfile(`?profile=${param.id}`);
if (response) {
setAuthorId(response.data.id);
setUserRoleId(response.data.masterUserRoleId);
}
}
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
useShallowEffect(() => {
getProfile()
}, [])
useShallowEffect(() => {
getProfile();
}, []);
return (
<>
<UIGlobal_LayoutTamplate
header={
<UIGlobal_LayoutHeaderTamplate
title="KATALOG"
customButtonRight={
loading ?
<ActionIcon disabled variant="transparent"></ActionIcon> :
authorId == userLoginId ? (
<ActionIcon c="white" variant="transparent" onClick={() => open()}>
<IconDotsVertical />
</ActionIcon>
) : (
<ActionIcon disabled variant="transparent"></ActionIcon>
)
}
/>
return (
<>
<UIGlobal_LayoutTamplate
header={
<UIGlobal_LayoutHeaderTamplate
title="KATALOG"
customButtonRight={
loading ? (
<ActionIcon disabled variant="transparent">
<CustomSkeleton h={20} w={20} radius={"100%"} />
</ActionIcon>
) : authorId == userLoginId ? (
<ActionIcon
c="white"
variant="transparent"
onClick={() => open()}
>
<IconDotsVertical />
</ActionIcon>
) : (
<ActionIcon disabled variant="transparent"></ActionIcon>
)
}
>
{children}
<DrawerKatalogNew opened={opened} close={() => close()} userRoleId={userRoleId} userId={userLoginId} />
</UIGlobal_LayoutTamplate>
</>
)
}
/>
}
>
{children}
<DrawerKatalogNew
opened={opened}
close={() => close()}
userRoleId={userRoleId}
userId={userLoginId}
/>
</UIGlobal_LayoutTamplate>
</>
);
}

65
src/app_modules/katalog/portofolio/component/button/comp_button_edit_logo_bisnis.tsx
View File

@@ -10,46 +10,73 @@ import { Button } from "@mantine/core";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
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";
export function ComponentPortofolio_ButtonEditLogoBisnis({
file,
portofolioId,
fileRemoveId,
}: {
file: File;
portofolioId: string;
fileRemoveId: string;
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
async function onUpdate() {
const uploadFileToStorage = await funGlobal_UploadToStorage({
file: file,
dirId: DIRECTORY_ID.portofolio_logo,
});
if (!uploadFileToStorage.success)
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
const res = await portofolio_funEditLogoBisnisById({
portofolioId: portofolioId,
logoId: uploadFileToStorage.data.id,
});
if (res.status === 200) {
try {
setLoading(true);
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
ComponentGlobal_NotifikasiGagal(res.message);
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,
});
if (!uploadFileToStorage.success) {
setLoading(false);
ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
return;
}
const res = await portofolio_funEditLogoBisnisById({
portofolioId: portofolioId,
logoId: uploadFileToStorage.data.id,
});
if (res.status === 200) {
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
setLoading(false);
ComponentGlobal_NotifikasiGagal(res.message);
}
} catch (error) {
setLoading(false);
clientLogger.error("Error update logo", error);
}
}
return (
<>
{file ? (
<Button
loaderPosition="center"
loading={loading ? true : false}
loading={loading}
radius={"xl"}
onClick={() => onUpdate()}
bg={MainColor.yellow}

4
src/app_modules/katalog/portofolio/component/button_delete_new.tsx
View File

@@ -37,13 +37,13 @@ export default function ComponentPortofolio_ButtonDeleteNew({
ComponentGlobal_NotifikasiBerhasil(response.message);
router.back();
} else {
setLoadingDel(false);
ComponentGlobal_NotifikasiGagal(response?.message);
}
} catch (error) {
setLoadingDel(false);
clientLogger.error("Error delete portofolio", error);
ComponentGlobal_NotifikasiGagal("Gagal menghapus portofolio");
} finally {
setLoadingDel(false);
}
}

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

@@ -3,122 +3,136 @@ import { RouterMap } from "@/app/lib/router_hipmi/router_map";
import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
import { ActionIcon } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconEdit, IconPhotoEdit, IconId, IconMapPin2, IconMapPin, IconDotsVertical } from "@tabler/icons-react";
import {
IconEdit,
IconPhotoEdit,
IconId,
IconMapPin2,
IconMapPin,
IconDotsVertical,
} from "@tabler/icons-react";
import { useParams } from "next/navigation";
import { useState } from "react";
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import { MainColor } from "@/app_modules/_global/color";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
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)
export default function ComponentPortofolio_ButtonMoreNew({
userLoginId,
}: {
userLoginId: string;
}) {
const param = useParams<{ id: string }>();
const [authorId, setAuthorId] = useState("");
const [mapId, setMapId] = useState(true);
const [openDrawer, setOpenDrawer] = useState(false);
const listPage = [
{
id: "1",
name: "Edit detail ",
icon: <IconEdit color={MainColor.white} />,
path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
},
{
id: "2",
name: "Edit logo ",
icon: <IconPhotoEdit color={MainColor.white} />,
path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
},
{
id: "3",
name: "Edit sosial media",
icon: <IconId color={MainColor.white} />,
path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
},
{
id: "4",
name: "Edit data map",
icon: <IconMapPin2 color={MainColor.white} />,
path: RouterMap.edit + `${param.id}`,
},
{
id: "5",
name: "Custom pin map",
icon: <IconMapPin color={MainColor.white} />,
path: RouterMap.custom_pin + `${param.id}`,
},
];
const listPage = [
{
id: "1",
name: "Edit detail ",
icon: <IconEdit color={MainColor.white} />,
path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
},
{
id: "2",
name: "Edit logo ",
icon: <IconPhotoEdit color={MainColor.white} />,
path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
},
{
id: "3",
name: "Edit sosial media",
icon: <IconId color={MainColor.white} />,
path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
},
{
id: "4",
name: "Edit data map",
icon: <IconMapPin2 color={MainColor.white} />,
path: RouterMap.edit + `${param.id}`,
},
{
id: "5",
name: "Custom pin map",
icon: <IconMapPin color={MainColor.white} />,
path: RouterMap.custom_pin + `${param.id}`,
},
];
const listPage2 = [
{
id: "1",
name: "Edit detail ",
icon: <IconEdit color={MainColor.white} />,
path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
},
{
id: "2",
name: "Edit logo ",
icon: <IconPhotoEdit color={MainColor.white} />,
path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
},
{
id: "3",
name: "Edit sosial media",
icon: <IconId color={MainColor.white} />,
path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
},
{
id: "4",
name: "Edit data map",
icon: <IconMapPin2 color={MainColor.white} />,
path: RouterMap.create + `${param.id}`,
},
{
id: "5",
name: "Custom pin map",
icon: <IconMapPin color={MainColor.white} />,
path: RouterMap.custom_pin + `${param.id}`,
},
];
const listPage2 = [
{
id: "1",
name: "Edit detail ",
icon: <IconEdit color={MainColor.white} />,
path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
},
{
id: "2",
name: "Edit logo ",
icon: <IconPhotoEdit color={MainColor.white} />,
path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
},
{
id: "3",
name: "Edit sosial media",
icon: <IconId color={MainColor.white} />,
path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
},
{
id: "4",
name: "Edit data map",
icon: <IconMapPin2 color={MainColor.white} />,
path: RouterMap.create + `${param.id}`,
},
{
id: "5",
name: "Custom pin map",
icon: <IconMapPin color={MainColor.white} />,
path: RouterMap.custom_pin + `${param.id}`,
},
];
async function funGetPortofolio() {
try {
const response = await apiGetOnePortofolioById(param.id, "bisnis");
const response3 = await apiGetOnePortofolioById(param.id, "lokasi");
async function funGetPortofolio() {
try {
const response = await apiGetOnePortofolioById(param.id, "bisnis")
const response3 = await apiGetOnePortofolioById(param.id, "lokasi")
const response2 = await funGetUserIdByToken()
if (response) {
setAuthorId(response.data.authorId)
setMapId((response3 !== null && response3.data?.mapId !== undefined) ? true : false)
setUserLoginId(response2)
}
} catch (error) {
console.error(error);
if (response) {
setAuthorId(response.data.authorId);
setMapId(
response3 !== null && response3.data?.mapId !== undefined
? true
: false
);
}
}
} catch (error) {
console.error(error);
}
}
useShallowEffect(() => {
funGetPortofolio()
}, []);
useShallowEffect(() => {
funGetPortofolio();
}, []);
return (
<>
{userLoginId === authorId ? (
<ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
<IconDotsVertical color={MainColor.white} />
</ActionIcon>
) : (
<ActionIcon disabled variant="transparent">
<CustomSkeleton h={20} w={20} radius={"100%"} />
</ActionIcon>
)}
return (
<>
{userLoginId === authorId ? (
<ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
<IconDotsVertical color={MainColor.white} />
</ActionIcon>
) : (
<ActionIcon disabled variant="transparent"></ActionIcon>
)}
<UIGlobal_Drawer
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={mapId ? listPage : listPage2}
/>
</>
)
}
<UIGlobal_Drawer
opened={openDrawer}
close={() => setOpenDrawer(false)}
component={mapId ? listPage : listPage2}
/>
</>
);
}

1
src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx
View File

@@ -84,6 +84,7 @@ export default function Portofolio_EditLogoBisnis({
<ComponentPortofolio_ButtonEditLogoBisnis
file={file as any}
portofolioId={dataPorto.id}
fileRemoveId={dataPorto.logoId}
/>
</Stack>
</>

36
src/app_modules/katalog/portofolio/ui/ui_layout_new.tsx
View File

@@ -2,19 +2,27 @@
import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from "@/app_modules/_global/ui";
import ComponentPortofolio_ButtonMoreNew from "../component/button_more_new";
export default function PortofolioLayoutNew({ children }: { children: any }) {
return (
<>
<UIGlobal_LayoutTamplate
header={
<UIGlobal_LayoutHeaderTamplate
title="Detail Portofolio"
customButtonRight={<ComponentPortofolio_ButtonMoreNew />}
/>
export default function PortofolioLayoutNew({
children,
userLoginId,
}: {
children: any;
userLoginId: string
}) {
return (
<>
<UIGlobal_LayoutTamplate
header={
<UIGlobal_LayoutHeaderTamplate
title="Detail Portofolio"
customButtonRight={
<ComponentPortofolio_ButtonMoreNew userLoginId={userLoginId} />
}
>
{children}
</UIGlobal_LayoutTamplate>
</>
)
/>
}
>
{children}
</UIGlobal_LayoutTamplate>
</>
);
}

11
src/app_modules/katalog/profile/_component/button/comp_button_update_photo_profile.tsx
View File

@@ -37,8 +37,8 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
});
if (!deletePhoto.success) {
ComponentGlobal_NotifikasiPeringatan("Gagal update foto profile");
return;
setLoading(false);
clientLogger.error("Error delete logo", deletePhoto.message);
}
const uploadPhoto = await funGlobal_UploadToStorage({
@@ -47,6 +47,7 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
});
if (!uploadPhoto.success) {
setLoading(false);
ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
return;
}
@@ -55,17 +56,17 @@ export function Profile_ComponentButtonUpdatePhotoProfile({
fileId: uploadPhoto.data.id,
profileId: profileId,
});
if (res.status === 200) {
ComponentGlobal_NotifikasiBerhasil(res.message);
router.back();
} else {
setLoading(false);
ComponentGlobal_NotifikasiGagal(res.message);
}
} catch (error) {
clientLogger.error("Error update photo profile", error);
} finally {
setLoading(false);
clientLogger.error("Error update photo profile", error);
}
}
return (

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

@@ -1,17 +1,18 @@
"use client";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
import { clientLogger } from "@/util/clientLogger";
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 { gmailRegex, validRegex } from "../../component/regular_expressions";
import { gmailRegex } 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();
@@ -29,15 +30,20 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
if (!body.email.match(gmailRegex))
return ComponentGlobal_NotifikasiPeringatan("Format email salah");
await Profile_funEditById(body).then((res) => {
try {
setLoading(true);
const res = await Profile_funEditById(body);
if (res.status === 200) {
setLoading(true);
ComponentGlobal_NotifikasiBerhasil(res.message);
setTimeout(() => router.back(), 1000);
router.back();
} else {
setLoading(false);
ComponentGlobal_NotifikasiGagal(res.message);
}
});
} catch (error) {
setLoading(false);
clientLogger.error("Error update foto profile", error);
}
}
if (!dataProfile)
@@ -49,7 +55,6 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
return (
<>
{/* <pre>{JSON.stringify(dataProfile, null, 2)}</pre> */}
<Stack px={"sm"}>
<TextInput
styles={{
@@ -96,7 +101,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
},
input: {
backgroundColor: MainColor.white,
}
},
}}
withAsterisk
label="Nama"
@@ -125,7 +130,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
},
input: {
backgroundColor: MainColor.white,
}
},
}}
withAsterisk
label="Email"
@@ -156,7 +161,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
},
input: {
backgroundColor: MainColor.white,
}
},
}}
withAsterisk
label="Alamat"
@@ -185,7 +190,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
},
input: {
backgroundColor: MainColor.white,
}
},
}}
withAsterisk
label="Jenis Kelamin"
@@ -216,7 +221,6 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
</Button>
</Stack>
{/* <pre>{JSON.stringify(dataProfile, null, 2)}</pre> */}
</>
);
}