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

Feature logs

Browse Source 
Deskripsi:
- Fitur baru log untuk melihat error pada server upload
- Baru di terapkan di create profile
This commit is contained in:
Bagasbanuna02
2024-12-16 15:41:02 +08:00
parent 4dd98c6183
commit 0bdc25b1e6
19 changed files with 815 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/app_modules/_global/fun/delete/fun_delete_file_by_id.tsx
View File

@@ -1,24 +1,50 @@
export async function funGlobal_DeleteFileById({ fileId }: { fileId: string }) {
try {
const res = await fetch(
`https://wibu-storage.wibudev.com/api/files/${fileId}/delete`,
{
method: "DELETE",
headers: {
Authorization: `Bearer ${process.env.WS_APIKEY}`,
},
}
);
import { clientLogger } from "@/util/clientLogger";
if (res.ok) {
const hasil = await res.json();
return { success: true };
export async function funGlobal_DeleteFileById({
fileId,
dirId,
}: {
fileId: string;
dirId?: string;
}) {
try {
const res = await fetch("/api/image/delete", {
method: "DELETE",
body: JSON.stringify({ fileId, dirId }),
});
const data = await res.json();
if (data.success) {
clientLogger.info(`File ${fileId} deleted successfully`);
return { success: true, message: "File berhasil dihapus" };
} else {
const errorText = await res.json();
return { success: false };
return { success: false, message: data.message };
}
} catch (error) {
return { success: false };
console.error("Upload error:", error);
return { success: false, message: "An unexpected error occurred" };
}
// try {
// const res = await fetch(
// `https://wibu-storage.wibudev.com/api/files/${fileId}/delete`,
// {
// method: "DELETE",
// headers: {
// Authorization: `Bearer ${process.env.WS_APIKEY}`,
// },
// }
// );
// if (res.ok) {
// const hasil = await res.json();
// return { success: true, message: "File berhasil dihapus" };
// } else {
// const errorText = await res.json();
// return { success: false, message: errorText.message };
// }
// } catch (error) {
// console.error("Upload error:", error);
// return { success: false, message: "An unexpected error occurred" };
// }
}

11
src/app_modules/_global/fun/get/fun_get_directory_name.ts Normal file
View File

@@ -0,0 +1,11 @@
import { DIRECTORY_ID } from "@/app/lib";
export async function funGetDirectoryNameByValue({
value,
}: {
value?: string | null;
}) {
if (!value) return null;
const object: any = DIRECTORY_ID;
return Object.keys(object).find((key) => object[key] === value);
}

3
src/app_modules/_global/fun/get/index.ts
View File

@@ -1,5 +1,5 @@
import { funGlobal_CheckProfile } from "./fun_check_profile";
import { funGetDirectoryNameByValue } from "./fun_get_directory_name";
import { funGlobal_getNomorAdmin } from "./fun_get_nomor_admin";
import { funGetUserIdByToken } from "./fun_get_user_id_by_token";
import { funGlobal_getMasterKategoriApp } from "./fun_master_kategori_app";
@@ -8,3 +8,4 @@ export { funGlobal_getMasterKategoriApp };
export { funGlobal_getNomorAdmin };
export { funGetUserIdByToken };
export { funGlobal_CheckProfile };
export { funGetDirectoryNameByValue };

38
src/app_modules/_global/fun/upload/fun_upload_to_storage.ts
View File

@@ -32,40 +32,20 @@ export async function funGlobal_UploadToStorage({
console.error("File terlalu besar");
return { success: false, message: "File size exceeds limit" };
}
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 30000); // Timeout 30 detik
const formData = new FormData();
formData.append("file", file);
formData.append("dirId", dirId);
try {
const res = await fetch("https://wibu-storage.wibudev.com/api/upload", {
method: "POST",
body: formData,
headers: {
Authorization: `Bearer ${Env_WS_APIKEY}`,
},
signal: controller.signal,
});
const upload = await fetch("/api/image/upload", {
method: "POST",
body: formData,
});
clearTimeout(timeoutId); // Bersihkan timeout jika selesai tepat waktu
const res = await upload.json();
if (res.ok) {
const dataRes = await res.json();
// const cekLog = await res.text();
// console.log(cekLog);
return { success: true, data: dataRes.data };
} else {
const errorText = await res.text();
console.error("Error:", errorText);
return { success: false, message: errorText };
}
} catch (error) {
clearTimeout(timeoutId); //
console.error("Error:", error);
return { success: false, message: "An unexpected error occurred" };
if (upload.ok) {
return { success: true, data: res.data, message: res.message };
} else {
return { success: false, data: {}, message: res.message };
}
}

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

@@ -1,42 +1,16 @@
"use client";
import { DIRECTORY_ID } from "@/app/lib";
import { MainColor } from "@/app_modules/_global/color";
import {
ComponentGlobal_BoxInformation,
ComponentGlobal_BoxUploadImage,
ComponentGlobal_ErrorInput,
} from "@/app_modules/_global/component";
import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
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";
import {
AspectRatio,
Avatar,
Box,
Button,
Center,
FileButton,
Image,
Paper,
Select,
Stack,
Text,
TextInput,
} from "@mantine/core";
import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
import { ComponentGlobal_ErrorInput } from "@/app_modules/_global/component";
import { Select, Stack, TextInput } from "@mantine/core";
import { IconAt } from "@tabler/icons-react";
import { useState } from "react";
import { gmailRegex } from "../../component/regular_expressions";
import { Profile_ComponentCreateNewProfile } from "../_component";
import Profile_ViewUploadBackground from "./view_upload_background";
import Profile_ViewUploadFoto from "./view_upload_foto";
export default function CreateProfile() {
const [filePP, setFilePP] = useState<File | null>(null);
const [imgPP, setImgPP] = useState<any | null>();
const [fileBG, setFileBG] = useState<File | null>(null);
const [imgBG, setImgBG] = useState<any | null>();
const [fotoProfileId, setFotoProfileId] = useState("");
const [backgroundProfileId, setBackgroundProfileId] = useState("");
@@ -51,223 +25,19 @@ export default function CreateProfile() {
return (
<>
<Stack px={"sm"} spacing={40}>
<Box>
<Stack spacing={"lg"}>
<ComponentGlobal_BoxInformation informasi="Upload foto profile anda." />
<Center>
{imgPP ? (
<Paper shadow="lg" radius={"100%"}>
<Avatar
color={"cyan"}
sx={{
borderStyle: "solid",
borderColor: "gray",
borderWidth: "0.5px",
}}
src={imgPP ? imgPP : "/aset/global/avatar.png"}
size={150}
radius={"100%"}
/>
</Paper>
) : (
<Paper shadow="lg" radius={"100%"}>
<Avatar
variant="light"
color="blue"
size={150}
radius={"100%"}
sx={{
borderStyle: "solid",
borderColor: MainColor.darkblue,
borderWidth: "0.5px",
}}
/>
</Paper>
)}
</Center>
<Profile_ViewUploadFoto
imgPP={imgPP}
onSetImgPP={setImgPP}
fotoProfileId={fotoProfileId}
onSetFotoProfileId={setFotoProfileId}
/>
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile
);
setImgPP(null);
setFilePP(null);
return;
}
if (fotoProfileId != "") {
const deleteFotoProfile = await funGlobal_DeleteFileById({
fileId: fotoProfileId,
});
if (deleteFotoProfile.success) {
setFotoProfileId("");
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.profile_foto,
});
if (uploadPhoto.success) {
setFotoProfileId(uploadPhoto.data.id);
setImgPP(buffer);
setFilePP(files);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload foto profile"
);
}
}
} else {
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.profile_foto,
});
if (uploadPhoto.success) {
setFotoProfileId(uploadPhoto.data.id);
setImgPP(buffer);
setFilePP(files);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload foto profile"
);
}
}
} catch (error) {
console.log(error);
}
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
{...props}
radius={"xl"}
leftIcon={<IconCamera />}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
)}
</FileButton>
</Center>
</Stack>
</Box>
<Box>
<Stack spacing={"lg"}>
<ComponentGlobal_BoxInformation informasi="Upload foto latar belakang profile anda." />
<ComponentGlobal_BoxUploadImage>
{imgBG ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
<Image
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
alt="Foto"
height={250}
src={imgBG ? imgBG : "/aset/no-img.png"}
/>
</AspectRatio>
) : (
<Stack justify="center" align="center" h={"100%"}>
<IconUpload color="white" />
<Text fz={"xs"} c={"white"}>
Upload Background
</Text>
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile
);
setImgBG(null);
setFileBG(null);
return;
}
if (backgroundProfileId != "") {
const deleteFotoBg = await funGlobal_DeleteFileById({
fileId: backgroundProfileId,
});
if (deleteFotoBg.success) {
setBackgroundProfileId("");
const uploadBackground =
await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.profile_background,
});
if (uploadBackground.success) {
setBackgroundProfileId(uploadBackground.data.id);
setImgBG(buffer);
setFileBG(files);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload background profile"
);
}
}
} else {
const uploadBackground = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.profile_background,
});
if (uploadBackground.success) {
setBackgroundProfileId(uploadBackground.data.id);
setImgBG(buffer);
setFileBG(files);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload background profile"
);
}
}
} catch (error) {
console.log(error);
}
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
{...props}
radius={"xl"}
leftIcon={<IconCamera />}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
)}
</FileButton>
</Center>
</Stack>
</Box>
<Profile_ViewUploadBackground
imgBG={imgBG}
backgroundProfileId={backgroundProfileId}
onSetImgBG={setImgBG}
onSetBackgroundProfileId={setBackgroundProfileId}
/>
<Stack mb={"lg"}>
<TextInput

170
src/app_modules/katalog/profile/create/view_upload_background.tsx Normal file
View File

@@ -0,0 +1,170 @@
import { DIRECTORY_ID } from "@/app/lib";
import { MainColor } from "@/app_modules/_global/color";
import {
ComponentGlobal_BoxInformation,
ComponentGlobal_BoxUploadImage,
} from "@/app_modules/_global/component";
import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
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";
import { clientLogger } from "@/util/clientLogger";
import {
AspectRatio,
Box,
Button,
Center,
FileButton,
Image,
Stack,
Text,
Loader,
} from "@mantine/core";
import { IconCamera, IconUpload } from "@tabler/icons-react";
import { useState } from "react";
export default function Profile_ViewUploadBackground({
imgBG,
onSetImgBG,
backgroundProfileId,
onSetBackgroundProfileId,
}: {
imgBG: string;
onSetImgBG: (img: string | null) => void;
backgroundProfileId: string;
onSetBackgroundProfileId: (id: string) => void;
}) {
const [isLoading, setLoading] = useState(false);
return (
<>
<Box>
<Stack spacing={"lg"}>
<ComponentGlobal_BoxInformation informasi="Upload foto latar belakang profile anda." />
<ComponentGlobal_BoxUploadImage>
{isLoading ? (
<Center h={"100%"}>
<Loader variant="oval" size={50} color="cyan" />
</Center>
) : imgBG ? (
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
<Image
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
alt="Foto"
height={250}
src={imgBG}
/>
</AspectRatio>
) : (
<Stack justify="center" align="center" h={"100%"}>
<IconUpload color="white" />
<Text fz={"xs"} c={"white"}>
Upload Background
</Text>
</Stack>
)}
</ComponentGlobal_BoxUploadImage>
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
setLoading(true);
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile
);
onSetImgBG(null);
return;
}
if (backgroundProfileId != "") {
const deleteFotoBg = await funGlobal_DeleteFileById({
fileId: backgroundProfileId,
dirId: DIRECTORY_ID.profile_background,
});
if (!deleteFotoBg.success) {
clientLogger.error(
"Client failed delete background:" +
deleteFotoBg.message
);
return;
}
if (deleteFotoBg.success) {
onSetBackgroundProfileId("");
onSetImgBG(null);
const uploadBackground = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.profile_background,
});
if (!uploadBackground.success) {
clientLogger.error(
"Client failed upload background:" +
uploadBackground.message
);
return;
}
if (uploadBackground.success) {
onSetBackgroundProfileId(uploadBackground.data.id);
onSetImgBG(buffer);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload background profile"
);
}
}
} else {
const uploadBackground = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.profile_background,
});
if (uploadBackground.success) {
onSetBackgroundProfileId(uploadBackground.data.id);
onSetImgBG(buffer);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload background profile"
);
}
}
} catch (error) {
clientLogger.error("Client error upload background:", error);
} finally {
setLoading(false);
}
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
{...props}
radius={"xl"}
leftIcon={<IconCamera />}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
)}
</FileButton>
</Center>
</Stack>
</Box>
</>
);
}

216
src/app_modules/katalog/profile/create/view_upload_foto.tsx Normal file
View File

@@ -0,0 +1,216 @@
import { DIRECTORY_ID } from "@/app/lib";
import { MainColor } from "@/app_modules/_global/color";
import { ComponentGlobal_BoxInformation } from "@/app_modules/_global/component";
import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
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";
import { clientLogger } from "@/util/clientLogger";
import {
Avatar,
Box,
Button,
Center,
FileButton,
Loader,
Paper,
Stack,
} from "@mantine/core";
import { IconCamera } from "@tabler/icons-react";
import { useState } from "react";
export default function Profile_ViewUploadFoto({
imgPP,
onSetImgPP,
fotoProfileId,
onSetFotoProfileId,
}: {
imgPP: string | null | undefined;
onSetImgPP: (img: string | null) => void;
fotoProfileId: string;
onSetFotoProfileId: (id: string) => void;
}) {
const [isLoading, setLoading] = useState(false);
return (
<>
<Box>
<Stack spacing={"lg"}>
<ComponentGlobal_BoxInformation informasi="Upload foto profile anda dengan ukuran maksimal file 3 MB." />
<Center>
{isLoading ? (
<Paper shadow="lg" radius={"100%"}>
<Avatar
variant="light"
color="blue"
size={150}
radius={"100%"}
sx={{
borderStyle: "solid",
borderColor: MainColor.darkblue,
borderWidth: "0.5px",
}}
>
<Center>
<Loader color="cyan" size="xl" />
</Center>
</Avatar>
</Paper>
) : imgPP != undefined || imgPP != null ? (
<Paper shadow="lg" radius={"100%"}>
<Avatar
color={"cyan"}
sx={{
borderStyle: "solid",
borderColor: "gray",
borderWidth: "0.5px",
}}
src={imgPP}
size={150}
radius={"100%"}
/>
</Paper>
) : (
<Paper shadow="lg" radius={"100%"}>
<Avatar
variant="light"
color="blue"
size={150}
radius={"100%"}
sx={{
borderStyle: "solid",
borderColor: MainColor.darkblue,
borderWidth: "0.5px",
}}
/>
</Paper>
)}
</Center>
<Center>
<FileButton
onChange={async (files: any | null) => {
try {
const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())])
);
if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile
);
onSetImgPP(null);
return;
}
if (fotoProfileId != "") {
try {
setLoading(true);
const deleteFotoProfile = await funGlobal_DeleteFileById({
fileId: fotoProfileId,
dirId: DIRECTORY_ID.profile_foto,
});
if (!deleteFotoProfile.success) {
clientLogger.error(
"Client failed delete photo profile:" +
deleteFotoProfile.message
);
return;
}
if (deleteFotoProfile.success) {
onSetFotoProfileId("");
onSetImgPP(null);
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.profile_foto,
});
if (!uploadPhoto.success) {
clientLogger.error(
"Client failed upload photo profile::" +
uploadPhoto.message
);
return;
}
if (uploadPhoto.success) {
clientLogger.info(
"Client success upload foto profile"
);
onSetFotoProfileId(uploadPhoto.data.id);
onSetImgPP(buffer);
} else {
clientLogger.error(
"Client failed upload foto:",
uploadPhoto.message
);
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload foto profile"
);
}
}
} catch (error) {
clientLogger.error("Client error upload foto:", error);
} finally {
setLoading(false);
}
} else {
try {
setLoading(true);
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.profile_foto,
});
if (uploadPhoto.success) {
clientLogger.info("Client success upload foto profile");
onSetFotoProfileId(uploadPhoto.data.id);
onSetImgPP(buffer);
} else {
clientLogger.error(
"Client failed upload foto:",
uploadPhoto.message
);
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload foto profile"
);
}
} catch (error) {
clientLogger.error("Client error upload foto:", error);
} finally {
setLoading(false);
}
}
} catch (error) {
clientLogger.error("Client error upload foto:", error);
}
}}
accept="image/png,image/jpeg"
>
{(props) => (
<Button
{...props}
radius={"xl"}
leftIcon={<IconCamera />}
bg={MainColor.yellow}
color="yellow"
c={"black"}
>
Upload
</Button>
)}
</FileButton>
</Center>
</Stack>
</Box>
</>
);
}

5
src/app_modules/katalog/profile/fun/fun_create_profile.ts
View File

@@ -3,6 +3,7 @@
import prisma from "@/app/lib/prisma";
import { RouterHome } from "@/app/lib/router_hipmi/router_home";
import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
import backendLogger from "@/util/backendLogger";
import { Prisma } from "@prisma/client";
import { revalidatePath } from "next/cache";
@@ -19,6 +20,7 @@ export default async function funCreateNewProfile({
const userLoginId = await funGetUserIdByToken();
if (!userLoginId) {
backendLogger.error("User tidak terautentikasi");
return { status: 400, message: "User tidak terautentikasi" }; // Validasi user login
}
@@ -45,6 +47,7 @@ export default async function funCreateNewProfile({
});
if (!createProfile) {
backendLogger.error("Gagal membuat profile");
return { status: 400, message: "Gagal membuat profile" };
}
@@ -61,7 +64,7 @@ export default async function funCreateNewProfile({
message: "Berhasil",
};
} catch (error) {
console.error("Error creating profile:", error);
backendLogger.error("Terjadi kesalahan pada server", error);
return { status: 500, message: "Terjadi kesalahan pada server" };
}
}

2
src/app_modules/zCoba/ui_coba_upload_file.tsx
View File

@@ -189,7 +189,7 @@ async function coba_ButtonFileUpload({
formData.append("dirId", dirId);
try {
const res = await fetch("https://wibu-storage.wibudev.com/api/upload", {
const res = await fetch("https://wibu-storage.wibudev.com/api/image/upload", {
method: "POST",
body: formData,
headers: {