deskripsi

Fix: page event/id/deteil menjadi event/id/status
Feature:
Add  screens/Event/AlertButtonStatusSection
Add app/(application)/(user)/event/[id]/[status]/

# No Issue"
This commit is contained in:
2025-07-21 17:39:37 +08:00
parent b844a8151d
commit c8cc0f0232
3 changed files with 211 additions and 22 deletions

View File

@@ -4,14 +4,16 @@ import {
DrawerCustom, DrawerCustom,
Grid, Grid,
MenuDrawerDynamicGrid, MenuDrawerDynamicGrid,
Spacing,
StackCustom, StackCustom,
TextCustom, TextCustom,
ViewWrapper, ViewWrapper
} from "@/components"; } from "@/components";
import { IMenuDrawerItem } from "@/components/_Interface/types"; import { IMenuDrawerItem } from "@/components/_Interface/types";
import LeftButtonCustom from "@/components/Button/BackButton"; import LeftButtonCustom from "@/components/Button/BackButton";
import { AccentColor } from "@/constants/color-palet"; import { AccentColor } from "@/constants/color-palet";
import { ICON_SIZE_MEDIUM } from "@/constants/constans-value"; import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
import Event_AlertButtonStatusSection from "@/screens/Event/AlertButtonStatusSection";
import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection"; import Event_ButtonStatusSection from "@/screens/Event/ButtonStatusSection";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -43,8 +45,10 @@ const listData = [
]; ];
export default function EventDetail() { export default function EventDetail() {
const { id, detail } = useLocalSearchParams(); const { id, status } = useLocalSearchParams();
const [openDrawer, setOpenDrawer] = useState(false); const [openDrawer, setOpenDrawer] = useState(false);
const [openAlert, setOpenAlert] = useState(false);
const [openDeleteAlert, setOpenDeleteAlert] = useState(false);
const handlePress = (item: IMenuDrawerItem) => { const handlePress = (item: IMenuDrawerItem) => {
console.log("PATH >> ", item.path); console.log("PATH >> ", item.path);
@@ -52,7 +56,7 @@ export default function EventDetail() {
setOpenDrawer(false); setOpenDrawer(false);
}; };
const drawerItemsDraftEvent = [ const drawerMenuDraftEvent = ({ id }: { id: string }) => [
{ {
icon: ( icon: (
<Ionicons <Ionicons
@@ -70,10 +74,10 @@ export default function EventDetail() {
<> <>
<Stack.Screen <Stack.Screen
options={{ options={{
title: `Detail ${detail === "publish" ? "" : detail}`, title: `Detail ${status === "publish" ? "" : status}`,
headerLeft: () => <LeftButtonCustom />, headerLeft: () => <LeftButtonCustom />,
headerRight: () => headerRight: () =>
detail === "draft" ? ( status === "draft" ? (
<DotButton onPress={() => setOpenDrawer(true)} /> <DotButton onPress={() => setOpenDrawer(true)} />
) : null, ) : null,
}} }}
@@ -82,7 +86,7 @@ export default function EventDetail() {
<BaseBox> <BaseBox>
<StackCustom> <StackCustom>
<TextCustom bold align="center" size="xlarge"> <TextCustom bold align="center" size="xlarge">
Judul event {id} Judul event {status}
</TextCustom> </TextCustom>
{listData.map((item, index) => ( {listData.map((item, index) => (
<Grid key={index}> <Grid key={index}>
@@ -96,21 +100,34 @@ export default function EventDetail() {
))} ))}
</StackCustom> </StackCustom>
</BaseBox> </BaseBox>
<Event_ButtonStatusSection
status={status as string}
onOpenAlert={setOpenAlert}
onOpenDeleteAlert={setOpenDeleteAlert}
/>
<Spacing />
</ViewWrapper> </ViewWrapper>
{/* <Event_ButtonStatusSection detail={detail as string} /> */}
<DrawerCustom <DrawerCustom
isVisible={openDrawer} isVisible={openDrawer}
closeDrawer={() => setOpenDrawer(false)} closeDrawer={() => setOpenDrawer(false)}
height={250} height={250}
> >
<MenuDrawerDynamicGrid <MenuDrawerDynamicGrid
data={drawerItemsDraftEvent} data={drawerMenuDraftEvent({ id: id as string })}
columns={4} columns={4}
onPressItem={handlePress} onPressItem={handlePress}
/> />
</DrawerCustom> </DrawerCustom>
<Event_AlertButtonStatusSection
id={id as string}
status={status as string}
openAlert={openAlert}
setOpenAlert={setOpenAlert}
openDeleteAlert={openDeleteAlert}
setOpenDeleteAlert={setOpenDeleteAlert}
/>
</> </>
); );
} }

View File

@@ -0,0 +1,115 @@
import AlertCustom from "@/components/Alert/AlertCustom";
import { router } from "expo-router";
export default function Event_AlertButtonStatusSection({
id,
status,
openAlert,
setOpenAlert,
openDeleteAlert,
setOpenDeleteAlert,
}: {
id: string;
status: string;
openAlert: boolean;
setOpenAlert: (value: boolean) => void;
openDeleteAlert: boolean;
setOpenDeleteAlert: (value: boolean) => void;
}) {
// --- Alert untuk aksi berdasarkan status ---
const renderStatusAlert = () => {
switch (status) {
case "publish":
return <></>;
case "review":
return (
<AlertCustom
isVisible={openAlert}
title="Batalkan Review"
message="Apakah Anda yakin ingin membatalkan review?"
textLeft="Batal"
textRight="Ya"
colorRight="green"
onLeftPress={() => {
setOpenAlert(false);
}}
onRightPress={() => {
setOpenAlert(false);
router.back();
}}
/>
);
case "draft":
return (
<AlertCustom
isVisible={openAlert}
title="Ajukan Review ?"
message="Apakah Anda yakin ingin mengajukan review kembali?"
textLeft="Batal"
textRight="Ya"
colorRight="green"
onLeftPress={() => {
setOpenAlert(false);
router.back();
}}
onRightPress={() => {
setOpenAlert(false);
router.back();
}}
/>
);
case "reject":
return (
<AlertCustom
isVisible={openAlert}
title="Edit Kembali"
message="Apakah Anda yakin ingin mengedit kembali event ini?"
textLeft="Batal"
textRight="Ya"
colorRight="green"
onLeftPress={() => {
setOpenAlert(false);
router.back();
}}
onRightPress={() => {
setOpenAlert(false);
router.back();
}}
/>
);
default:
return null;
}
};
return (
<>
{/* Alert berdasarkan status */}
{renderStatusAlert()}
{/* Alert untuk hapus - selalu muncul jika openDeleteAlert true */}
<AlertCustom
isVisible={openDeleteAlert}
title="Hapus Event"
message="Apakah Anda yakin ingin menghapus event ini?"
textLeft="Batal"
textRight="Ya, Hapus"
colorRight="red"
onLeftPress={() => {
setOpenDeleteAlert(false);
router.back();
}}
onRightPress={() => {
// Aksi hapus event
console.log("Menghapus event dengan ID:", id);
setOpenDeleteAlert(false);
router.back();
}}
/>
</>
);
}

View File

@@ -1,19 +1,76 @@
import { ButtonCustom } from "@/components"; import { ButtonCustom, Grid } from "@/components";
import { View } from "react-native"; import { View } from "react-native";
export default function Event_ButtonStatusSection({ export default function Event_ButtonStatusSection({
detail, status,
onOpenAlert,
onOpenDeleteAlert,
}: { }: {
detail: string; status: string;
onOpenAlert: (value: boolean) => void;
onOpenDeleteAlert: (value: boolean) => void;
}) { }) {
return (
<> const handleOpenAlert = () => {
{detail && detail === "draft" && ( onOpenAlert(true);
<View> };
<ButtonCustom>Ajukan Review</ButtonCustom>
<ButtonCustom backgroundColor="red">Hapus</ButtonCustom> const handleOpenDeleteAlert = () => {
</View> onOpenDeleteAlert(true);
)} };
</>
); const DeleteButton = () => {
return (
<>
<ButtonCustom backgroundColor="red" textColor="white" onPress={handleOpenDeleteAlert}>
Hapus
</ButtonCustom>
</>
);
};
switch (status) {
case "publish":
return <></>;
case "review":
return (
<ButtonCustom onPress={handleOpenAlert}>
Batalkan Review
</ButtonCustom>
);
case "draft":
return (
<>
<Grid>
<Grid.Col span={5}>
<ButtonCustom onPress={handleOpenAlert}>Ajukan Review</ButtonCustom>
</Grid.Col>
<Grid.Col span={2}>
<View />
</Grid.Col>
<Grid.Col span={5}>{DeleteButton()}</Grid.Col>
</Grid>
</>
);
case "reject":
return (
<>
<Grid>
<Grid.Col span={5}>
<ButtonCustom onPress={handleOpenAlert}>Edit Kembali</ButtonCustom>
</Grid.Col>
<Grid.Col span={2}>
<View />
</Grid.Col>
<Grid.Col span={5}>{DeleteButton()}</Grid.Col>
</Grid>
</>
);
default:
return <ButtonCustom disabled>Status Undifined</ButtonCustom>;
}
} }