fix: Upload image
Deskripsi: - Upload image job di arahkan ke storage server ## No Issue
This commit is contained in:
164
src/app_modules/job/component/button/comp_button_save_create.tsx
Normal file
164
src/app_modules/job/component/button/comp_button_save_create.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
"use client";
|
||||
|
||||
import { DIRECTORY_ID } from "@/app/lib";
|
||||
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
|
||||
import {
|
||||
ComponentGlobal_NotifikasiBerhasil,
|
||||
ComponentGlobal_NotifikasiGagal,
|
||||
ComponentGlobal_NotifikasiPeringatan,
|
||||
} from "@/app_modules/_global/notif_global";
|
||||
import { notifikasiToAdmin_funCreate } from "@/app_modules/notifikasi/fun";
|
||||
import mqtt_client from "@/util/mqtt_client";
|
||||
import { Button } from "@mantine/core";
|
||||
import { useAtom } from "jotai";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { job_funCreateNoFile, job_funCreateWithFile } from "../../fun";
|
||||
import { gs_job_hot_menu, gs_job_status } from "../../global_state";
|
||||
import { MODEL_JOB } from "../../model/interface";
|
||||
|
||||
function Job_ComponentButtonSaveCreate({
|
||||
value,
|
||||
file,
|
||||
}: {
|
||||
value: MODEL_JOB;
|
||||
file: File;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
|
||||
const [status, setStatus] = useAtom(gs_job_status);
|
||||
|
||||
async function onCreate() {
|
||||
if (file === null) {
|
||||
const createNoFile = await job_funCreateNoFile({
|
||||
data: value,
|
||||
});
|
||||
|
||||
if (createNoFile.status === 201) {
|
||||
const dataNotif: any = {
|
||||
appId: createNoFile.data?.id as any,
|
||||
status: createNoFile.data?.MasterStatus?.name as any,
|
||||
userId: createNoFile.data?.authorId as any,
|
||||
pesan: createNoFile.data?.title as any,
|
||||
kategoriApp: "JOB",
|
||||
title: "Job baru",
|
||||
};
|
||||
|
||||
const notif = await notifikasiToAdmin_funCreate({
|
||||
data: dataNotif as any,
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"ADMIN",
|
||||
JSON.stringify({
|
||||
count: 1,
|
||||
})
|
||||
);
|
||||
setHotMenu(2);
|
||||
setStatus("Review");
|
||||
router.replace(RouterJob.status);
|
||||
setIsLoading(true);
|
||||
ComponentGlobal_NotifikasiBerhasil(createNoFile.message);
|
||||
}
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(createNoFile.message);
|
||||
}
|
||||
} else {
|
||||
const uploadFile = await funGlobal_UploadToStorage({
|
||||
file: file,
|
||||
dirId: DIRECTORY_ID.job_image,
|
||||
});
|
||||
|
||||
if (!uploadFile.success)
|
||||
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
|
||||
|
||||
const createWithFile = await job_funCreateWithFile({
|
||||
data: value,
|
||||
fileId: uploadFile.data.id,
|
||||
});
|
||||
|
||||
if (createWithFile.status === 201) {
|
||||
const dataNotif: any = {
|
||||
appId: createWithFile.data?.id as any,
|
||||
status: createWithFile.data?.MasterStatus?.name as any,
|
||||
userId: createWithFile.data?.authorId as any,
|
||||
pesan: createWithFile.data?.title as any,
|
||||
kategoriApp: "JOB",
|
||||
title: "Job baru",
|
||||
};
|
||||
|
||||
const notif = await notifikasiToAdmin_funCreate({
|
||||
data: dataNotif as any,
|
||||
});
|
||||
|
||||
if (notif.status === 201) {
|
||||
mqtt_client.publish(
|
||||
"ADMIN",
|
||||
JSON.stringify({
|
||||
count: 1,
|
||||
})
|
||||
);
|
||||
setHotMenu(2);
|
||||
setStatus("Review");
|
||||
router.replace(RouterJob.status);
|
||||
setIsLoading(true);
|
||||
ComponentGlobal_NotifikasiBerhasil(createWithFile.message);
|
||||
}
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(createWithFile.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
disabled={
|
||||
value.title === "" ||
|
||||
value.content === "" ||
|
||||
value.content === "<p><br></p>" ||
|
||||
value.content.length > 500 ||
|
||||
value.deskripsi === "" ||
|
||||
value.deskripsi === "<p><br></p>" ||
|
||||
value.deskripsi.length > 500
|
||||
? true
|
||||
: false
|
||||
}
|
||||
style={{
|
||||
marginTop: 10,
|
||||
marginBottom: 30,
|
||||
transition: "0.5s",
|
||||
border:
|
||||
value.title === "" ||
|
||||
value.content === "" ||
|
||||
value.content === "<p><br></p>" ||
|
||||
value.content.length > 500 ||
|
||||
value.deskripsi === "" ||
|
||||
value.deskripsi === "<p><br></p>" ||
|
||||
value.deskripsi.length > 500
|
||||
? ""
|
||||
: `2px solid ${AccentColor.yellow}`,
|
||||
}}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
loaderPosition="center"
|
||||
loading={isLoading ? true : false}
|
||||
w={"100%"}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
onCreate();
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Job_ComponentButtonSaveCreate;
|
||||
128
src/app_modules/job/component/button/comp_button_update.tsx
Normal file
128
src/app_modules/job/component/button/comp_button_update.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import { MainColor, AccentColor } from "@/app_modules/_global/color";
|
||||
import {
|
||||
ComponentGlobal_NotifikasiBerhasil,
|
||||
ComponentGlobal_NotifikasiGagal,
|
||||
ComponentGlobal_NotifikasiPeringatan,
|
||||
} from "@/app_modules/_global/notif_global";
|
||||
import { Modal, Stack, Title, Group, Button } from "@mantine/core";
|
||||
import { useDisclosure, useWindowScroll } from "@mantine/hooks";
|
||||
import { useAtom } from "jotai";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { job_EditById } from "../../fun/edit/fun_edit_by_id";
|
||||
import { gs_job_hot_menu, gs_job_status } from "../../global_state";
|
||||
import { MODEL_JOB } from "../../model/interface";
|
||||
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
|
||||
import { DIRECTORY_ID } from "@/app/lib";
|
||||
|
||||
export function Job_ComponentButtonUpdate({
|
||||
value,
|
||||
file,
|
||||
}: {
|
||||
value: MODEL_JOB;
|
||||
file: File;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
|
||||
const [status, setStatus] = useAtom(gs_job_status);
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const [scroll, scrollTo] = useWindowScroll();
|
||||
|
||||
async function onUpdate() {
|
||||
if (file === null) {
|
||||
const update = await job_EditById({
|
||||
data: value,
|
||||
});
|
||||
if (update.status !== 200)
|
||||
return ComponentGlobal_NotifikasiGagal(update.message);
|
||||
} else {
|
||||
const uploadFile = await funGlobal_UploadToStorage({
|
||||
file: file,
|
||||
dirId: DIRECTORY_ID.job_image,
|
||||
});
|
||||
|
||||
if (!uploadFile.success)
|
||||
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
|
||||
|
||||
const updateWithFile = await job_EditById({
|
||||
data: value,
|
||||
});
|
||||
if (updateWithFile.status !== 200)
|
||||
return ComponentGlobal_NotifikasiGagal(updateWithFile.message);
|
||||
}
|
||||
|
||||
setHotMenu(2);
|
||||
setStatus("Draft");
|
||||
setIsLoading(true);
|
||||
router.back();
|
||||
return ComponentGlobal_NotifikasiBerhasil("Berhasil Update");
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
centered
|
||||
withCloseButton={false}
|
||||
styles={{
|
||||
content: {
|
||||
backgroundColor: MainColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
<Title order={6} c={"white"}>
|
||||
Anda yakin menyimpan data ini ?
|
||||
</Title>
|
||||
<Group position="center">
|
||||
<Button radius={"xl"} onClick={() => close()}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoading ? true : false}
|
||||
color="teal"
|
||||
radius={"xl"}
|
||||
onClick={() => onUpdate()}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<Button
|
||||
mt={"xs"}
|
||||
mb={"lg"}
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
disabled={
|
||||
value.title === "" ||
|
||||
value.content === "" ||
|
||||
value.content === "<p><br></p>" ||
|
||||
value.content.length > 500 ||
|
||||
value.deskripsi === "" ||
|
||||
value.deskripsi === "<p><br></p>" ||
|
||||
value.deskripsi.length > 500
|
||||
? true
|
||||
: false
|
||||
}
|
||||
bg={MainColor.yellow}
|
||||
color="yellow"
|
||||
c={"black"}
|
||||
radius={"xl"}
|
||||
onClick={() => {
|
||||
open();
|
||||
scrollTo({ y: 0 });
|
||||
}}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
|
||||
import { Box } from "@mantine/core";
|
||||
|
||||
export function Job_ComponentBoxUploadImage({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<ComponentGlobal_CardStyles height={300}>
|
||||
<Box
|
||||
style={{
|
||||
height: "100%",
|
||||
borderStyle: "dashed",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</ComponentGlobal_CardStyles>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { Card, Stack, Skeleton, Image, Text, Center } from "@mantine/core";
|
||||
import { MODEL_JOB } from "../../model/interface";
|
||||
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
|
||||
import { APIs } from "@/app/lib";
|
||||
import {
|
||||
AccentColor,
|
||||
MainColor,
|
||||
} from "@/app_modules/_global/color/color_pallet";
|
||||
import {
|
||||
Card,
|
||||
Center,
|
||||
Image,
|
||||
Loader,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { MODEL_JOB } from "../../model/interface";
|
||||
import { useState } from "react";
|
||||
import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
|
||||
|
||||
export default function ComponentJob_DetailData({
|
||||
data,
|
||||
}: {
|
||||
data?: MODEL_JOB;
|
||||
}) {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
|
||||
|
||||
{data ? (
|
||||
<Card
|
||||
shadow="lg"
|
||||
@@ -29,15 +43,34 @@ export default function ComponentJob_DetailData({
|
||||
>
|
||||
<Card.Section px={"xs"} pb={"lg"}>
|
||||
<Stack spacing={"xl"}>
|
||||
{data.imagesId ? (
|
||||
{data.imageId ? (
|
||||
<Stack align="center">
|
||||
{isLoading ? (
|
||||
<Paper
|
||||
style={{ zIndex: 1, position: "relative" }}
|
||||
w={200}
|
||||
h={300}
|
||||
bg={AccentColor.blackgray}
|
||||
>
|
||||
<Center h={"100%"}>
|
||||
<ComponentGlobal_Loader size={30} variant="dots" />
|
||||
</Center>
|
||||
</Paper>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<Image
|
||||
alt=""
|
||||
src={
|
||||
data.imagesId ? RouterJob.api_gambar + data.imagesId : ""
|
||||
}
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ zIndex: 2, position: "relative" }}
|
||||
onLoad={() => {
|
||||
setIsLoading(false);
|
||||
}}
|
||||
onError={() => {
|
||||
setIsLoading(false);
|
||||
}}
|
||||
alt="Image"
|
||||
src={APIs.GET + data?.imageId}
|
||||
maw={200}
|
||||
/>
|
||||
</Stack>
|
||||
) : (
|
||||
|
||||
7
src/app_modules/job/component/index.ts
Normal file
7
src/app_modules/job/component/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import Job_ComponentButtonSaveCreate from "./button/comp_button_save_create";
|
||||
import { Job_ComponentButtonUpdate } from "./button/comp_button_update";
|
||||
import { Job_ComponentBoxUploadImage } from "./detail/comp_box_upload_image";
|
||||
|
||||
export { Job_ComponentButtonSaveCreate };
|
||||
export { Job_ComponentBoxUploadImage };
|
||||
export { Job_ComponentButtonUpdate };
|
||||
Reference in New Issue
Block a user