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

Merge pull request #200 from bipproduction/fix/bug/job

Browse Source 
Fix upload image profile and portofolio
This commit is contained in:
Bagasbanuna02
2024-12-13 07:39:13 +08:00
committed by GitHub
parent 03c11c617c 7cbbcd0370
commit fde17fd42d
16 changed files with 824 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/app/api/job/get-all/route.ts
View File

@@ -1,16 +1,94 @@
import { job_getAllListPublish } from "@/app_modules/job/fun/get/get_all_publish"; import { prisma } from "@/app/lib";
import _ from "lodash";
import { NextResponse } from "next/server"; import { NextResponse } from "next/server";
export const dynamic = "force-dynamic";
export async function GET(params: Request) { export async function GET(request: Request) {
const { searchParams } = new URL(params.url); try {
const page = searchParams.get("page"); const { searchParams } = new URL(request.url);
const search = searchParams.get("search"); const search = searchParams.get("search");
const page = searchParams.get("page");
const dataTake = 10;
const dataSkip = Number(page) * dataTake - dataTake;
const data = await job_getAllListPublish({ if (search != "") {
page: _.toNumber(page), const data = await prisma.job.findMany({
search: search as string, take: dataTake,
}); skip: dataSkip,
orderBy: {
updatedAt: "desc",
},
where: {
masterStatusId: "1",
isActive: true,
isArsip: false,
title: {
mode: "insensitive",
contains: search as string,
},
},
select: {
id: true,
title: true,
Author: {
select: {
id: true,
username: true,
Profile: true,
},
},
},
});
return NextResponse.json({ data }); return NextResponse.json(
{
success: true,
message: "Berhasil ambil data",
data: data,
},
{ status: 200 }
);
} else {
const data = await prisma.job.findMany({
take: dataTake,
skip: dataSkip,
orderBy: {
updatedAt: "desc",
},
where: {
masterStatusId: "1",
isActive: true,
isArsip: false,
title: {
mode: "insensitive",
},
},
select: {
id: true,
title: true,
Author: {
select: {
id: true,
username: true,
Profile: true,
},
},
},
});
return NextResponse.json(
{
success: true,
message: "Berhasil ambil data",
data: data,
},
{ status: 200 }
);
}
} catch (error) {
console.error(error);
return NextResponse.json({
success: false,
message: "Gagal ambil data",
});
}
} }

4
src/app/page.tsx
View File

@@ -5,11 +5,11 @@ import { useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
export default function Page() { export default function Page() {
const router = useRouter() const router = useRouter();
useShallowEffect(() => { useShallowEffect(() => {
setTimeout(() => { setTimeout(() => {
// window.location.replace("/dev/home"); // window.location.replace("/dev/home");
router.replace("/dev/home"); router.replace("/dev/home", { scroll: false });
}, 1000); }, 1000);
}, []); }, []);

1
src/app_modules/_global/button/comp_button_upload_photo.tsx
View File

@@ -24,6 +24,7 @@ export function ComponentGlobal_ButtonUploadFileImage({
if (files.size > MAX_SIZE) { if (files.size > MAX_SIZE) {
ComponentGlobal_NotifikasiPeringatan(PemberitahuanMaksimalFile); ComponentGlobal_NotifikasiPeringatan(PemberitahuanMaksimalFile);
return;
} else { } else {
onSetFile(files); onSetFile(files);
onSetImage(buffer); onSetImage(buffer);

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

@@ -54,6 +54,8 @@ export async function funGlobal_UploadToStorage({
if (res.ok) { if (res.ok) {
const dataRes = await res.json(); const dataRes = await res.json();
// const cekLog = await res.text();
// console.log(cekLog);
return { success: true, data: dataRes.data }; return { success: true, data: dataRes.data };
} else { } else {
const errorText = await res.text(); const errorText = await res.text();

6
src/app_modules/_global/ui/ui_image_preview.tsx
View File

@@ -10,18 +10,16 @@ import {
Image, Image,
rem, rem,
ScrollArea, ScrollArea,
Skeleton, Skeleton
Text,
Title,
} from "@mantine/core"; } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { IconX } from "@tabler/icons-react"; import { IconX } from "@tabler/icons-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { MainColor } from "../color"; import { MainColor } from "../color";
import ComponentGlobal_Loader from "../component/loader";
import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate"; import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
import { UIHeader } from "./ui_layout_tamplate"; import { UIHeader } from "./ui_layout_tamplate";
import ComponentGlobal_Loader from "../component/loader";
export function UIGlobal_ImagePreview({ fileId }: { fileId: string }) { export function UIGlobal_ImagePreview({ fileId }: { fileId: string }) {
const router = useRouter(); const router = useRouter();

349
src/app_modules/home/component/body_home.tsx
View File

@@ -1,7 +1,17 @@
import { AccentColor, MainColor } from "@/app_modules/_global/color"; import { AccentColor, MainColor } from "@/app_modules/_global/color";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data"; import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global"; import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { ActionIcon, Box, Group, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core"; import {
ActionIcon,
Box,
Group,
Image,
Paper,
SimpleGrid,
Skeleton,
Stack,
Text,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { IconUserSearch } from "@tabler/icons-react"; import { IconUserSearch } from "@tabler/icons-react";
import _ from "lodash"; import _ from "lodash";
@@ -9,185 +19,182 @@ import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { apiGetDataHome } from "../fun/get/api_home"; import { apiGetDataHome } from "../fun/get/api_home";
import { listMenuHomeBody, menuHomeJob } from "./list_menu_home"; import { listMenuHomeBody, menuHomeJob } from "./list_menu_home";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
export default function BodyHome() { export default function BodyHome() {
const router = useRouter() const router = useRouter();
const [dataUser, setDataUser] = useState<any>({}) const [dataUser, setDataUser] = useState<any>({});
const [dataJob, setDataJob] = useState<any[]>([]) const [dataJob, setDataJob] = useState<any[]>([]);
const [loadingJob, setLoadingJob] = useState(true) const [loadingJob, setLoadingJob] = useState(true);
useShallowEffect(() => { useShallowEffect(() => {
cekUserLogin() cekUserLogin();
getHomeJob() getHomeJob();
}, []); }, []);
async function cekUserLogin() {
async function cekUserLogin() { try {
try { const response = await apiGetDataHome("?cat=cek_profile");
const response = await apiGetDataHome("?cat=cek_profile") if (response.success) {
if (response.success) { setDataUser(response.data);
setDataUser(response.data);
}
} catch (error) {
console.error(error);
} }
} } catch (error) {
console.error(error);
}
}
async function getHomeJob() { async function getHomeJob() {
try { try {
setLoadingJob(true) setLoadingJob(true);
const response = await apiGetDataHome("?cat=job") const response = await apiGetDataHome("?cat=job");
if (response.success) { if (response.success) {
setDataJob(response.data); setDataJob(response.data);
}
} catch (error) {
console.error(error);
} finally {
setLoadingJob(false)
} }
} } catch (error) {
console.error(error);
} finally {
setLoadingJob(false);
}
}
return ( return (
<Box> <Box>
<Paper <Paper
radius={"xl"} radius={"xl"}
mb={"xs"} mb={"xs"}
style={{ style={{
borderRadius: "10px 10px 10px 10px", borderRadius: "10px 10px 10px 10px",
border: `2px solid ${AccentColor.blue}`, border: `2px solid ${AccentColor.blue}`,
}} }}
> >
<Image radius={"lg"} alt="logo" src={"/aset/home/home-hipmi-new.png"} /> <Image radius={"lg"} alt="logo" src={"/aset/home/home-hipmi-new.png"} />
</Paper> </Paper>
<Stack my={"sm"}> <Stack my={"sm"}>
<SimpleGrid <SimpleGrid cols={2} spacing="md">
cols={2} {listMenuHomeBody.map((e, i) => (
spacing="md"
>
{listMenuHomeBody.map((e, i) => (
<Paper
key={e.id}
h={150}
bg={MainColor.darkblue}
style={{
borderRadius: "10px 10px 10px 10px",
border: `2px solid ${AccentColor.blue}`,
}}
onClick={() => {
if (dataUser.profile === undefined || dataUser?.profile === null) {
return ComponentGlobal_NotifikasiPeringatan(
"Lengkapi Profile"
);
} else {
if (e.link === "") {
return ComponentGlobal_NotifikasiPeringatan(
"Cooming Soon !!"
);
} else {
router.push(e.link, { scroll: false });
}
}
}}
>
<Stack align="center" justify="center" h={"100%"}>
<ActionIcon
size={50}
variant="transparent"
c={e.link === "" ? "gray.3" : "white"}
>
{e.icon}
</ActionIcon>
<Text c={e.link === "" ? "gray.3" : "white"} fz={"xs"}>
{e.name}
</Text>
</Stack>
</Paper>
))}
</SimpleGrid>
{/* Job View */}
<Paper <Paper
p={"md"} key={e.id}
w={"100%"} h={150}
bg={MainColor.darkblue} bg={MainColor.darkblue}
style={{ style={{
borderRadius: "10px 10px 10px 10px", borderRadius: "10px 10px 10px 10px",
border: `2px solid ${AccentColor.blue}`, border: `2px solid ${AccentColor.blue}`,
}} }}
> onClick={() => {
<Stack if (
onClick={() => { dataUser.profile === undefined ||
if (dataUser.profile === undefined || dataUser?.profile === null) { dataUser?.profile === null
return ComponentGlobal_NotifikasiPeringatan( ) {
"Lengkapi Profile" router.push(RouterProfile.create, { scroll: false });
); } else {
} else { if (e.link === "") {
if (menuHomeJob.link === "") { return ComponentGlobal_NotifikasiPeringatan(
return ComponentGlobal_NotifikasiPeringatan( "Cooming Soon !!"
"Cooming Soon !!" );
); } else {
} else { router.push(e.link, { scroll: false });
return router.push(menuHomeJob.link, { scroll: false });
}
}
}}
>
<Group>
<ActionIcon
variant="transparent"
size={40}
c={menuHomeJob.link === "" ? "gray.3" : "white"}
>
{menuHomeJob.icon}
</ActionIcon>
<Text c={menuHomeJob.link === "" ? "gray.3" : "white"}>
{menuHomeJob.name}
</Text>
</Group>
{
loadingJob ?
Array(2)
.fill(null)
.map((_, i) => (
<Box key={i} mb={"md"}>
<Skeleton height={10} mt={0} radius="xl" width={"50%"} />
<Skeleton height={10} mt={10} radius="xl" />
<Skeleton height={10} mt={10} radius="xl" />
</Box>
))
: _.isEmpty(dataJob) ?
(<ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} />)
: (
<SimpleGrid cols={2} spacing="md">
{dataJob.map((e, i) => (
<Stack key={e.id}>
<Group spacing={"xs"}>
<Stack h={"100%"} align="center" justify="flex-start">
<IconUserSearch size={20} color="white" />
</Stack>
<Stack spacing={0} w={"60%"}>
<Text
lineClamp={1}
fz={"sm"}
c={MainColor.yellow}
fw={"bold"}
>
{e?.Author.username}
</Text>
<Text fz={"sm"} c={"white"} lineClamp={2}>
{e?.title}
</Text>
</Stack>
</Group>
</Stack>
))}
</SimpleGrid>
)
} }
</Stack> }
}}
>
<Stack align="center" justify="center" h={"100%"}>
<ActionIcon
size={50}
variant="transparent"
c={e.link === "" ? "gray.3" : "white"}
>
{e.icon}
</ActionIcon>
<Text c={e.link === "" ? "gray.3" : "white"} fz={"xs"}>
{e.name}
</Text>
</Stack>
</Paper> </Paper>
</Stack> ))}
</Box> </SimpleGrid>
);
} {/* Job View */}
<Paper
p={"md"}
w={"100%"}
bg={MainColor.darkblue}
style={{
borderRadius: "10px 10px 10px 10px",
border: `2px solid ${AccentColor.blue}`,
}}
>
<Stack
onClick={() => {
if (
dataUser.profile === undefined ||
dataUser?.profile === null
) {
router.push(RouterProfile.create, { scroll: false });
} else {
if (menuHomeJob.link === "") {
return ComponentGlobal_NotifikasiPeringatan(
"Cooming Soon !!"
);
} else {
return router.push(menuHomeJob.link, { scroll: false });
}
}
}}
>
<Group>
<ActionIcon
variant="transparent"
size={40}
c={menuHomeJob.link === "" ? "gray.3" : "white"}
>
{menuHomeJob.icon}
</ActionIcon>
<Text c={menuHomeJob.link === "" ? "gray.3" : "white"}>
{menuHomeJob.name}
</Text>
</Group>
{loadingJob ? (
Array(2)
.fill(null)
.map((_, i) => (
<Box key={i} mb={"md"}>
<Skeleton height={10} mt={0} radius="xl" width={"50%"} />
<Skeleton height={10} mt={10} radius="xl" />
<Skeleton height={10} mt={10} radius="xl" />
</Box>
))
) : _.isEmpty(dataJob) ? (
<ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} />
) : (
<SimpleGrid cols={2} spacing="md">
{dataJob.map((e, i) => (
<Stack key={e.id}>
<Group spacing={"xs"}>
<Stack h={"100%"} align="center" justify="flex-start">
<IconUserSearch size={20} color="white" />
</Stack>
<Stack spacing={0} w={"60%"}>
<Text
lineClamp={1}
fz={"sm"}
c={MainColor.yellow}
fw={"bold"}
>
{e?.Author.username}
</Text>
<Text fz={"sm"} c={"white"} lineClamp={2}>
{e?.title}
</Text>
</Stack>
</Group>
</Stack>
))}
</SimpleGrid>
)}
</Stack>
</Paper>
</Stack>
</Box>
);
}

200
src/app_modules/home/component/footer_home.tsx
View File

@@ -1,7 +1,14 @@
import { APIs } from "@/app/lib"; import { APIs } from "@/app/lib";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog"; import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global"; import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { ActionIcon, Box, Center, SimpleGrid, Stack, Text } from "@mantine/core"; import {
ActionIcon,
Box,
Center,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { IconUserCircle } from "@tabler/icons-react"; import { IconUserCircle } from "@tabler/icons-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
@@ -11,103 +18,104 @@ import { Home_ComponentAvatarProfile } from "./comp_avatar_profile";
import { listMenuHomeFooter } from "./list_menu_home"; import { listMenuHomeFooter } from "./list_menu_home";
export default function FooterHome() { export default function FooterHome() {
const router = useRouter() const router = useRouter();
const [dataUser, setDataUser] = useState<any>({}) const [dataUser, setDataUser] = useState<any>({});
useShallowEffect(() => { useShallowEffect(() => {
cekUserLogin(); cekUserLogin();
}, []); }, []);
async function cekUserLogin() {
async function cekUserLogin() { try {
try { const response = await apiGetDataHome("?cat=cek_profile");
const response = await apiGetDataHome("?cat=cek_profile") if (response.success) {
if (response.success) { setDataUser(response.data);
setDataUser(response.data);
}
} catch (error) {
console.error(error);
} }
} } catch (error) {
console.error(error);
}
}
return ( return (
<Box <Box
style={{ style={{
zIndex: 99, zIndex: 99,
borderRadius: "20px 20px 0px 0px", borderRadius: "20px 20px 0px 0px",
}} }}
w={"100%"} w={"100%"}
bottom={0} bottom={0}
h={"9vh"} h={"9vh"}
> >
<SimpleGrid cols={listMenuHomeFooter.length + 1}> <SimpleGrid cols={listMenuHomeFooter.length + 1}>
{listMenuHomeFooter.map((e) => ( {listMenuHomeFooter.map((e) => (
<Center h={"9vh"} key={e.id}> <Center h={"9vh"} key={e.id}>
<Stack align="center" spacing={0} <Stack
onClick={() => { align="center"
if (dataUser.profile === undefined || dataUser?.profile === null) { spacing={0}
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile"); onClick={() => {
} else { if (
if (e.link == "") { dataUser.profile === undefined ||
ComponentGlobal_NotifikasiPeringatan("Cooming Soon") dataUser?.profile === null
} else { ) {
router.push(e.link, { scroll: false }) router.push(RouterProfile.create, { scroll: false });
} } else {
} if (e.link == "") {
}} ComponentGlobal_NotifikasiPeringatan("Cooming Soon");
> } else {
<ActionIcon router.push(e.link, { scroll: false });
radius={"xl"} }
c={e.link === "" ? "gray" : "white"} }
variant="transparent" }}
> >
{e.icon} <ActionIcon
</ActionIcon> radius={"xl"}
<Text c={e.link === "" ? "gray" : "white"}
lineClamp={1} variant="transparent"
c={e.link === "" ? "gray" : "white"} >
fz={12} {e.icon}
> </ActionIcon>
{e.name} <Text lineClamp={1} c={e.link === "" ? "gray" : "white"} fz={12}>
</Text> {e.name}
</Stack> </Text>
</Center> </Stack>
))} </Center>
))}
<Center h={"9vh"}> <Center h={"9vh"}>
<Stack <Stack
align="center" align="center"
spacing={2} spacing={2}
onClick={() => { onClick={() => {
if (dataUser.profile === undefined || dataUser?.profile === null) { if (
router.push(RouterProfile.create, { scroll: false }); dataUser.profile === undefined ||
} else { dataUser?.profile === null
router.push( ) {
RouterProfile.katalogOLD + `${dataUser?.profile}`, router.push(RouterProfile.create, { scroll: false });
{ scroll: false } } else {
); router.push(RouterProfile.katalogOLD + `${dataUser?.profile}`, {
} scroll: false,
}} });
> }
<ActionIcon variant={"transparent"}> }}
{dataUser.profile === undefined || dataUser?.profile === null >
? <ActionIcon variant={"transparent"}>
<IconUserCircle color="white" /> {dataUser.profile === undefined || dataUser?.profile === null ? (
: <IconUserCircle color="white" />
<Home_ComponentAvatarProfile ) : (
url={APIs.GET({ <Home_ComponentAvatarProfile
fileId: dataUser?.imageId as string, url={APIs.GET({
size: "50" fileId: dataUser?.imageId as string,
})} size: "50",
/> })}
} />
</ActionIcon> )}
<Text fz={10} c={"white"}> </ActionIcon>
Profile <Text fz={10} c={"white"}>
</Text> Profile
</Stack> </Text>
</Center> </Stack>
</SimpleGrid> </Center>
</Box> </SimpleGrid>
); </Box>
} );
}

202
src/app_modules/home/view_home_new.tsx
View File

@@ -16,112 +16,120 @@ import notifikasi_countUserNotifikasi from "../notifikasi/fun/count/fun_count_by
import BodyHome from "./component/body_home"; import BodyHome from "./component/body_home";
import FooterHome from "./component/footer_home"; import FooterHome from "./component/footer_home";
import { apiGetDataHome } from "./fun/get/api_home"; import { apiGetDataHome } from "./fun/get/api_home";
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
export default function HomeViewNew({ countNotifikasi }: { countNotifikasi: number; }) { export default function HomeViewNew({
const [countNtf, setCountNtf] = useState(countNotifikasi); countNotifikasi,
const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf); }: {
const [countLoadNtf, setCountLoadNtf] = useAtom(gs_count_ntf); countNotifikasi: number;
const [dataUser, setDataUser] = useState<any>({}) }) {
const router = useRouter(); const [countNtf, setCountNtf] = useState(countNotifikasi);
const [newUserNtf, setNewUserNtf] = useAtom(gs_user_ntf);
const [countLoadNtf, setCountLoadNtf] = useAtom(gs_count_ntf);
const [dataUser, setDataUser] = useState<any>({});
const router = useRouter();
useShallowEffect(() => {
onLoadNotifikasi({
onLoad(val) {
setCountNtf(val);
},
});
useShallowEffect(() => { setCountNtf(countLoadNtf as any);
onLoadNotifikasi({ }, [countLoadNtf, setCountNtf]);
onLoad(val) {
setCountNtf(val);
},
});
setCountNtf(countLoadNtf as any); useShallowEffect(() => {
}, [countLoadNtf, setCountNtf]); setCountNtf(countNtf + newUserNtf);
setNewUserNtf(0);
}, [newUserNtf, setCountNtf]);
useShallowEffect(() => { async function onLoadNotifikasi({ onLoad }: { onLoad: (val: any) => void }) {
setCountNtf(countNtf + newUserNtf); const loadNotif = await notifikasi_countUserNotifikasi();
setNewUserNtf(0); onLoad(loadNotif);
}, [newUserNtf, setCountNtf]); }
async function onLoadNotifikasi({ onLoad }: { onLoad: (val: any) => void }) { useShallowEffect(() => {
const loadNotif = await notifikasi_countUserNotifikasi(); cekUserLogin();
onLoad(loadNotif); }, []);
}
useShallowEffect(() => { async function cekUserLogin() {
cekUserLogin(); try {
}, []); const response = await apiGetDataHome("?cat=cek_profile");
if (response.success) {
setDataUser(response.data);
async function cekUserLogin() {
try {
const response = await apiGetDataHome("?cat=cek_profile")
if (response.success) {
setDataUser(response.data);
}
} catch (error) {
console.error(error);
} }
} } catch (error) {
console.error(error);
}
}
return ( return (
<> <>
<UIGlobal_LayoutTamplate <UIGlobal_LayoutTamplate
header={ header={
<UIGlobal_LayoutHeaderTamplate <UIGlobal_LayoutHeaderTamplate
title="HIPMI" title="HIPMI"
customButtonLeft={ customButtonLeft={
<ActionIcon <ActionIcon
radius={"xl"} radius={"xl"}
variant={"transparent"} variant={"transparent"}
onClick={() => { onClick={() => {
if (dataUser.profile === undefined || dataUser?.profile === null) { if (
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile"); dataUser.profile === undefined ||
} else { dataUser?.profile === null
router.push(RouterUserSearch.main, { scroll: false }); ) {
} router.push(RouterProfile.create, { scroll: false });
}} } else {
> router.push(RouterUserSearch.main, { scroll: false });
<IconUserSearch color="white" />
</ActionIcon>
} }
customButtonRight={ }}
<ActionIcon >
variant="transparent" <IconUserSearch color="white" />
onClick={() => { </ActionIcon>
if (dataUser.profile === undefined || dataUser?.profile === null) {
ComponentGlobal_NotifikasiPeringatan("Lengkapi Profile");
} else {
router.push(RouterNotifikasi.categoryApp({ name: "semua" }), {
scroll: false,
});
}
}}
>
{
countNotifikasi > 0
?
<Indicator
processing
color={MainColor.yellow}
label={
<Text fz={10} c={MainColor.darkblue}>
{countNotifikasi > 99 ? "99+" : countNotifikasi}
</Text>
}
>
<IconBell color="white" />
</Indicator>
:
<IconBell color="white" />
}
</ActionIcon>
}
/>
} }
customButtonRight={
footer={<FooterHome />} <ActionIcon
> variant="transparent"
<BodyHome /> onClick={() => {
</UIGlobal_LayoutTamplate> if (
</> dataUser.profile === undefined ||
); dataUser?.profile === null
) {
router.push(RouterProfile.create, { scroll: false });
} else {
router.push(
RouterNotifikasi.categoryApp({ name: "semua" }),
{
scroll: false,
}
);
}
}}
>
{countNotifikasi > 0 ? (
<Indicator
processing
color={MainColor.yellow}
label={
<Text fz={10} c={MainColor.darkblue}>
{countNotifikasi > 99 ? "99+" : countNotifikasi}
</Text>
}
>
<IconBell color="white" />
</Indicator>
) : (
<IconBell color="white" />
)}
</ActionIcon>
}
/>
}
footer={<FooterHome />}
>
<BodyHome />
</UIGlobal_LayoutTamplate>
</>
);
} }

124
src/app_modules/job/main/beranda/ui_beranda.tsx
View File

@@ -1,124 +0,0 @@
"use client";
import { gs_jobTiggerBeranda } from "@/app/lib/global_state";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { Box, Center, Loader, Stack, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconSearch } from "@tabler/icons-react";
import { useAtom } from "jotai";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import {
Job_ComponentButtonUpdateBeranda,
Job_ComponentSkeletonBeranda,
} from "../../component";
import ComponentJob_BerandaCardView from "../../component/beranda/card_view";
import { job_getAllListPublish } from "../../fun/get/get_all_publish";
import { MODEL_JOB } from "../../model/interface";
import { API_RouteJob } from "@/app/lib/api_user_router/route_api_job";
export function Job_UiBeranda() {
const [data, setData] = useState<MODEL_JOB[] | null>(null);
const [activePage, setActivePage] = useState(1);
const [isSearch, setIsSearch] = useState("");
// Notifikasi
const [isShowUpdate, setIsShowUpdate] = useState(false);
const [isTriggerJob, setIsTriggerJob] = useAtom(gs_jobTiggerBeranda);
useShallowEffect(() => {
if (isTriggerJob == true) {
setIsShowUpdate(true);
}
}, [isTriggerJob]);
useShallowEffect(() => {
setIsTriggerJob(false);
setIsShowUpdate(false);
onLoadNewData();
}, []);
async function onSearch(text: string) {
setIsSearch(text);
const loadData = await job_getAllListPublish({
page: activePage,
search: text,
});
setData(loadData as any);
setActivePage(1);
}
async function onLoadNewData() {
const loadData = await fetch(API_RouteJob.get_all({ page: activePage }));
const res = await loadData.json();
setData(res.data);
}
return (
<>
<Stack my={1} spacing={30}>
{isShowUpdate && (
<Job_ComponentButtonUpdateBeranda
onSetIsNewPost={(val) => {
setIsShowUpdate(val);
setIsTriggerJob(val);
}}
onSetData={(val: any[]) => {
setData(val);
}}
/>
)}
<ComponentGlobal_CreateButton path={RouterJob.create} />
<TextInput
style={{
position: "sticky",
top: 0,
zIndex: 99,
}}
radius={"xl"}
icon={<IconSearch />}
placeholder="Pekerjaan apa yang anda cari ?"
onChange={(val) => {
onSearch(val.currentTarget.value);
}}
/>
{_.isNull(data) ? (
<Job_ComponentSkeletonBeranda />
) : _.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<ScrollOnly
height="75vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData as any}
moreData={async () => {
const loadData = await job_getAllListPublish({
page: activePage + 1,
search: isSearch,
});
setActivePage((val) => val + 1);
return loadData;
}}
>
{(item) => <ComponentJob_BerandaCardView data={item} />}
</ScrollOnly>
)}
</Stack>
</>
);
}

118
src/app_modules/job/main/beranda/view_beranda.tsx
View File

@@ -1,10 +1,124 @@
"use client";
import { API_RouteJob } from "@/app/lib/api_user_router/route_api_job";
import { gs_jobTiggerBeranda } from "@/app/lib/global_state";
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
import { Center, Loader, Stack, TextInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconSearch } from "@tabler/icons-react";
import { useAtom } from "jotai";
import _ from "lodash";
import { ScrollOnly } from "next-scroll-loader";
import { useState } from "react";
import {
Job_ComponentButtonUpdateBeranda,
Job_ComponentSkeletonBeranda,
} from "../../component";
import ComponentJob_BerandaCardView from "../../component/beranda/card_view";
import { MODEL_JOB } from "../../model/interface"; import { MODEL_JOB } from "../../model/interface";
import { Job_UiBeranda } from "./ui_beranda";
export default function Job_ViewBeranda() { export default function Job_ViewBeranda() {
const [data, setData] = useState<MODEL_JOB[] | null>(null);
const [activePage, setActivePage] = useState(1);
const [isSearch, setIsSearch] = useState("");
// Notifikasi
const [isShowUpdate, setIsShowUpdate] = useState(false);
const [isTriggerJob, setIsTriggerJob] = useAtom(gs_jobTiggerBeranda);
useShallowEffect(() => {
if (isTriggerJob == true) {
setIsShowUpdate(true);
}
}, [isTriggerJob]);
useShallowEffect(() => {
setIsTriggerJob(false);
setIsShowUpdate(false);
onLoadNewData();
}, []);
async function onSearch(text: string) {
setIsSearch(text);
const loadData = await fetch(
API_RouteJob.get_all({ page: activePage, search: text })
);
const res = await loadData.json();
setData(res.data as any);
setActivePage(1);
}
async function onLoadNewData() {
const loadData = await fetch(API_RouteJob.get_all({ page: activePage }));
const res = await loadData.json();
// console.log(res.data);
setData(res.data);
}
return ( return (
<> <>
<Job_UiBeranda /> <Stack my={1} spacing={30}>
{isShowUpdate && (
<Job_ComponentButtonUpdateBeranda
onSetIsNewPost={(val) => {
setIsShowUpdate(val);
setIsTriggerJob(val);
}}
onSetData={(val: any[]) => {
setData(val);
}}
/>
)}
<ComponentGlobal_CreateButton path={RouterJob.create} />
<TextInput
style={{
position: "sticky",
top: 0,
zIndex: 99,
}}
radius={"xl"}
icon={<IconSearch />}
placeholder="Pekerjaan apa yang anda cari ?"
onChange={(val) => {
onSearch(val.currentTarget.value);
}}
/>
{_.isNull(data) ? (
<Job_ComponentSkeletonBeranda />
) : _.isEmpty(data) ? (
<ComponentGlobal_IsEmptyData />
) : (
// --- Main component --- //
<ScrollOnly
height="75vh"
renderLoading={() => (
<Center mt={"lg"}>
<Loader color={"yellow"} />
</Center>
)}
data={data}
setData={setData as any}
moreData={async () => {
const loadData = await fetch(
API_RouteJob.get_all({ page: activePage, search: isSearch })
);
const res = await loadData.json();
setActivePage((val) => val + 1);
return res.data;
}}
>
{(item) => <ComponentJob_BerandaCardView data={item} />}
</ScrollOnly>
)}
</Stack>
</> </>
); );
} }

52
src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
View File

@@ -12,25 +12,22 @@ import _ from "lodash";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import funCreatePortofolio from "../../fun/fun_create_portofolio"; import funCreatePortofolio from "../../fun/fun_create_portofolio";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib";
export function Portofolio_ComponentButtonSelanjutnya({ export function Portofolio_ComponentButtonSelanjutnya({
profileId, profileId,
dataPortofolio, dataPortofolio,
file,
dataMedsos, dataMedsos,
imageId,
}: { }: {
profileId: string; profileId: string;
dataPortofolio: MODEL_PORTOFOLIO_OLD; dataPortofolio: MODEL_PORTOFOLIO_OLD;
file: File;
dataMedsos: any; dataMedsos: any;
imageId: string
}) { }) {
const router = useRouter(); const router = useRouter();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
async function onSubmit() { async function onSubmit() {
setLoading(true);
const porto = { const porto = {
namaBisnis: dataPortofolio.namaBisnis, namaBisnis: dataPortofolio.namaBisnis,
masterBidangBisnisId: dataPortofolio.masterBidangBisnisId, masterBidangBisnisId: dataPortofolio.masterBidangBisnisId,
@@ -39,34 +36,33 @@ export function Portofolio_ComponentButtonSelanjutnya({
deskripsi: dataPortofolio.deskripsi, deskripsi: dataPortofolio.deskripsi,
}; };
if (_.values(porto).includes("")) try {
return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data"); setLoading(true);
if (_.values(porto).includes("")) {
const uploadFileToStorage = await funGlobal_UploadToStorage({ return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
file: file, }
dirId: DIRECTORY_ID.portofolio_logo, const res = await funCreatePortofolio({
}); profileId: profileId,
data: dataPortofolio as any,
if (!uploadFileToStorage.success) medsos: dataMedsos,
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar"); fileId: imageId,
});
const res = await funCreatePortofolio({ if (res.status === 201) {
profileId: profileId, ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
data: dataPortofolio as any, router.replace(RouterMap.create + res.id, { scroll: false });
medsos: dataMedsos, } else {
fileId: uploadFileToStorage.data.id, ComponentGlobal_NotifikasiGagal("Gagal disimpan");
}); }
if (res.status === 201) { } catch (error) {
ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan"); console.error(error);
router.replace(RouterMap.create + res.id, { scroll: false }); } finally {
} else { setLoading(false);
ComponentGlobal_NotifikasiGagal("Gagal disimpan");
} }
} }
return ( return (
<> <>
<Button <Button
disabled={_.values(dataPortofolio).includes("") || file === null} disabled={_.values(dataPortofolio).includes("") || imageId == ""}
mt={"md"} mt={"md"}
radius={50} radius={50}
loading={loading ? true : false} loading={loading ? true : false}

63
src/app_modules/katalog/portofolio/create/view.tsx
View File

@@ -25,6 +25,11 @@ import { Portofolio_ComponentButtonSelanjutnya } from "../component";
import { MAX_SIZE } from "@/app_modules/_global/lib"; import { MAX_SIZE } from "@/app_modules/_global/lib";
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size"; import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global"; import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib";
export default function CreatePortofolio({ export default function CreatePortofolio({
bidangBisnis, bidangBisnis,
@@ -49,8 +54,8 @@ export default function CreatePortofolio({
tiktok: "", tiktok: "",
}); });
const [file, setFile] = useState<File | any>(null);
const [img, setImg] = useState<any | null>(null); const [img, setImg] = useState<any | null>(null);
const [imageId, setImageId] = useState("");
return ( return (
<> <>
@@ -187,15 +192,61 @@ export default function CreatePortofolio({
const buffer = URL.createObjectURL( const buffer = URL.createObjectURL(
new Blob([new Uint8Array(await files.arrayBuffer())]) new Blob([new Uint8Array(await files.arrayBuffer())])
); );
if (files.size > MAX_SIZE) { if (files.size > MAX_SIZE) {
setImg(null); setImg(null);
setFile(null);
ComponentGlobal_NotifikasiPeringatan( ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile PemberitahuanMaksimalFile
); );
return;
}
// if (files.size > MAX_SIZE) {
// setImg(null);
// setFile(null);
// ComponentGlobal_NotifikasiPeringatan(
// PemberitahuanMaksimalFile
// );
// } else {
// setImg(buffer);
// setFile(files);
// }
if (imageId != "") {
const deletePhoto = await funGlobal_DeleteFileById({
fileId: imageId,
});
if (deletePhoto.success) {
setImageId("");
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.portofolio_logo,
});
if (uploadPhoto.success) {
setImageId(uploadPhoto.data.id);
setImg(buffer);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload foto"
);
}
}
} else { } else {
setImg(buffer); const uploadPhoto = await funGlobal_UploadToStorage({
setFile(files); file: files,
dirId: DIRECTORY_ID.portofolio_logo,
});
if (uploadPhoto.success) {
setImageId(uploadPhoto.data.id);
setImg(buffer);
} else {
ComponentGlobal_NotifikasiPeringatan("Gagal upload foto");
}
} }
} catch (error) { } catch (error) {
console.log(error); console.log(error);
@@ -306,12 +357,10 @@ export default function CreatePortofolio({
<Portofolio_ComponentButtonSelanjutnya <Portofolio_ComponentButtonSelanjutnya
dataPortofolio={dataPortofolio as any} dataPortofolio={dataPortofolio as any}
dataMedsos={dataMedsos} dataMedsos={dataMedsos}
file={file}
profileId={profileId} profileId={profileId}
imageId={imageId}
/> />
</Stack> </Stack>
{/* <pre> {JSON.stringify(bidangBisnis, null, 2)}</pre> */}
</> </>
); );
} }

25
src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx
View File

@@ -1,9 +1,7 @@
"use client"; "use client";
import { DIRECTORY_ID } from "@/app/lib";
import { RouterHome } from "@/app/lib/router_hipmi/router_home"; import { RouterHome } from "@/app/lib/router_hipmi/router_home";
import { AccentColor, MainColor } from "@/app_modules/_global/color"; import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { import {
ComponentGlobal_NotifikasiBerhasil, ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal, ComponentGlobal_NotifikasiGagal,
@@ -19,14 +17,10 @@ import { MODEL_PROFILE } from "../../model/interface";
export function Profile_ComponentCreateNewProfile({ export function Profile_ComponentCreateNewProfile({
value, value,
// filePP,
// fileBG,
fotoProfileId, fotoProfileId,
backgroundProfileId, backgroundProfileId,
}: { }: {
value: MODEL_PROFILE; value: MODEL_PROFILE;
// filePP: File;
// fileBG: File;
fotoProfileId: string; fotoProfileId: string;
backgroundProfileId: string; backgroundProfileId: string;
}) { }) {
@@ -55,24 +49,6 @@ export function Profile_ComponentCreateNewProfile({
try { try {
setLoading(true); setLoading(true);
// const uploadPhoto = await funGlobal_UploadToStorage({
// file: filePP,
// dirId: DIRECTORY_ID.profile_foto,
// });
// if (!uploadPhoto.success) {
// ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
// return;
// }
// const uploadBackground = await funGlobal_UploadToStorage({
// file: fileBG,
// dirId: DIRECTORY_ID.profile_background,
// });
// if (!uploadBackground.success) {
// ComponentGlobal_NotifikasiPeringatan("Gagal upload background profile");
// return;
// }
const create = await funCreateNewProfile({ const create = await funCreateNewProfile({
data: newData as any, data: newData as any,
imageId: fotoProfileId, imageId: fotoProfileId,
@@ -91,7 +67,6 @@ export function Profile_ComponentCreateNewProfile({
if (create.status === 500) { if (create.status === 500) {
ComponentGlobal_NotifikasiGagal(create.message); ComponentGlobal_NotifikasiGagal(create.message);
} }
} catch (error) { } catch (error) {
console.log("Terjadi kesalahan", error); console.log("Terjadi kesalahan", error);
} finally { } finally {

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

@@ -7,7 +7,10 @@ import {
ComponentGlobal_BoxUploadImage, ComponentGlobal_BoxUploadImage,
ComponentGlobal_ErrorInput, ComponentGlobal_ErrorInput,
} from "@/app_modules/_global/component"; } from "@/app_modules/_global/component";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun"; import {
funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { MAX_SIZE } from "@/app_modules/_global/lib"; import { MAX_SIZE } from "@/app_modules/_global/lib";
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size"; import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global"; import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
@@ -95,6 +98,35 @@ export default function CreateProfile() {
ComponentGlobal_NotifikasiPeringatan( ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile 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 { } else {
const uploadPhoto = await funGlobal_UploadToStorage({ const uploadPhoto = await funGlobal_UploadToStorage({
file: files, file: files,
@@ -169,6 +201,35 @@ export default function CreateProfile() {
ComponentGlobal_NotifikasiPeringatan( ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile 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 { } else {
const uploadBackground = await funGlobal_UploadToStorage({ const uploadBackground = await funGlobal_UploadToStorage({
file: files, file: files,
@@ -284,8 +345,6 @@ export default function CreateProfile() {
<Profile_ComponentCreateNewProfile <Profile_ComponentCreateNewProfile
value={value as any} value={value as any}
// filePP={filePP as any}
// fileBG={fileBG as any}
fotoProfileId={fotoProfileId} fotoProfileId={fotoProfileId}
backgroundProfileId={backgroundProfileId} backgroundProfileId={backgroundProfileId}
/> />

56
src/app_modules/map/_component/button/comp_button_save_pin.tsx
View File

@@ -4,57 +4,51 @@ import { MainColor } from "@/app_modules/_global/color";
import { import {
ComponentGlobal_NotifikasiBerhasil, ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal, ComponentGlobal_NotifikasiGagal,
ComponentGlobal_NotifikasiPeringatan,
} from "@/app_modules/_global/notif_global"; } from "@/app_modules/_global/notif_global";
import { Button } from "@mantine/core"; import { Button } from "@mantine/core";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { map_funCreatePin } from "../../fun/create/fun_create_pin";
import { DIRECTORY_ID } from "@/app/lib";
import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
import { useState } from "react"; import { useState } from "react";
import { map_funCreatePin } from "../../fun/create/fun_create_pin";
export function ComponentMap_ButtonSavePin({ export function ComponentMap_ButtonSavePin({
namePin, namePin,
lat, lat,
long, long,
portofolioId, portofolioId,
file, imageId,
}: { }: {
namePin: string; namePin: string;
lat: string; lat: string;
long: string; long: string;
portofolioId: string; portofolioId: string;
file: File; imageId: string;
}) { }) {
const router = useRouter(); const router = useRouter();
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false);
async function onSavePin() { async function onSavePin() {
setLoading(true) try {
const uploadFileToStorage = await funGlobal_UploadToStorage({ setLoading(true);
file: file,
dirId: DIRECTORY_ID.map_image,
});
if (!uploadFileToStorage.success) const res = await map_funCreatePin({
return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar"); data: {
latitude: lat as any,
const res = await map_funCreatePin({ longitude: long as any,
data: { namePin: namePin as any,
latitude: lat as any, imageId: imageId,
longitude: long as any, Portofolio: {
namePin: namePin as any, create: { id: portofolioId } as any,
imageId: uploadFileToStorage.data.id, },
Portofolio: {
create: { id: portofolioId } as any,
}, },
}, });
}); res.status === 200
res.status === 200 ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back()) : ComponentGlobal_NotifikasiGagal(res.message);
: ComponentGlobal_NotifikasiGagal(res.message); } catch (error) {
console.error(error);
setLoading(false) } finally {
setLoading(false);
}
} }
return ( return (
@@ -63,7 +57,7 @@ export function ComponentMap_ButtonSavePin({
loading={loading} loading={loading}
my={"xl"} my={"xl"}
style={{ transition: "0.5s" }} style={{ transition: "0.5s" }}
disabled={namePin === "" || file === null ? true : false} disabled={namePin === "" || imageId == "" ? true : false}
radius={"xl"} radius={"xl"}
loaderPosition="center" loaderPosition="center"
bg={MainColor.yellow} bg={MainColor.yellow}

65
src/app_modules/map/ui/ui_create_pin.tsx
View File

@@ -5,6 +5,8 @@ import {
MainColor, MainColor,
} from "@/app_modules/_global/color/color_pallet"; } from "@/app_modules/_global/color/color_pallet";
import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component"; import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/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/notifikasi_peringatan"; import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { import {
AspectRatio, AspectRatio,
@@ -29,8 +31,11 @@ import Map, {
} from "react-map-gl"; } from "react-map-gl";
import { ComponentMap_ButtonSavePin } from "../_component"; import { ComponentMap_ButtonSavePin } from "../_component";
import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long"; import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
import { MAX_SIZE } from "@/app_modules/_global/lib"; import {
import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size"; funGlobal_DeleteFileById,
funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib";
export function UiMap_CreatePin({ export function UiMap_CreatePin({
mapboxToken, mapboxToken,
@@ -42,8 +47,8 @@ export function UiMap_CreatePin({
const [[lat, long], setLatLong] = useState([0, 0]); const [[lat, long], setLatLong] = useState([0, 0]);
const [isPin, setIsPin] = useState(false); const [isPin, setIsPin] = useState(false);
const [namePin, setNamePin] = useState(""); const [namePin, setNamePin] = useState("");
const [file, setFile] = useState<File | any>(null);
const [img, setImg] = useState<any | null>(null); const [img, setImg] = useState<any | null>(null);
const [imageId, setImageId] = useState("");
return ( return (
<> <>
@@ -146,14 +151,60 @@ export function UiMap_CreatePin({
if (files.size > MAX_SIZE) { if (files.size > MAX_SIZE) {
setImg(null); setImg(null);
setFile(null);
ComponentGlobal_NotifikasiPeringatan( ComponentGlobal_NotifikasiPeringatan(
PemberitahuanMaksimalFile, PemberitahuanMaksimalFile,
3000 3000
); );
return;
}
// if (files.size > MAX_SIZE) {
// setImg(null);
// ComponentGlobal_NotifikasiPeringatan(
// PemberitahuanMaksimalFile,
// 3000
// );
// } else {
// setImg(buffer);
// }
if (imageId != "") {
const deletePhoto = await funGlobal_DeleteFileById({
fileId: imageId,
});
if (deletePhoto.success) {
setImageId("");
const uploadPhoto = await funGlobal_UploadToStorage({
file: files,
dirId: DIRECTORY_ID.map_image,
});
if (uploadPhoto.success) {
setImageId(uploadPhoto.data.id);
setImg(buffer);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload gambar"
);
}
}
} else { } else {
setImg(buffer); const uploadPhoto = await funGlobal_UploadToStorage({
setFile(files); file: files,
dirId: DIRECTORY_ID.map_image,
});
if (uploadPhoto.success) {
setImageId(uploadPhoto.data.id);
setImg(buffer);
} else {
ComponentGlobal_NotifikasiPeringatan(
"Gagal upload gambar"
);
}
} }
} catch (error) { } catch (error) {
console.log(error); console.log(error);
@@ -183,7 +234,7 @@ export function UiMap_CreatePin({
lat={lat as any} lat={lat as any}
long={long as any} long={long as any}
portofolioId={portofolioId} portofolioId={portofolioId}
file={file} imageId={imageId}
/> />
</Stack> </Stack>
</> </>