Progress Admin
This commit is contained in:
@@ -1,12 +1,14 @@
|
||||
'use client';
|
||||
import { RouterEvent } from '@/app/lib/router_hipmi/router_event';
|
||||
import { UIGlobal_Drawer, UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
|
||||
import { ActionIcon } from '@mantine/core';
|
||||
import { AccentColor, MainColor } from '@/app_modules/_global/color';
|
||||
import { UIGlobal_DrawerCustom, UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate, UIGlobal_Modal } from '@/app_modules/_global/ui';
|
||||
import { ActionIcon, Box, Button, Center, Flex, Stack, Text } from '@mantine/core';
|
||||
import { IconDotsVertical, IconEdit, IconTrash } from '@tabler/icons-react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode }) {
|
||||
const [openDrawer, setOpenDrawer] = useState(false);
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Sponsor"
|
||||
@@ -14,27 +16,67 @@ function LayoutEvent_DetailSponsor({ children }: { children: React.ReactNode })
|
||||
<ActionIcon variant='transparent' onClick={() => setOpenDrawer(true)}>
|
||||
<IconDotsVertical color='white' />
|
||||
</ActionIcon>} />}>
|
||||
{children}
|
||||
{children}
|
||||
</UIGlobal_LayoutTamplate>
|
||||
<UIGlobal_Drawer
|
||||
<UIGlobal_DrawerCustom
|
||||
opened={openDrawer}
|
||||
close={() => setOpenDrawer(false)}
|
||||
component={[
|
||||
{
|
||||
id: 1,
|
||||
name: 'Edit Sponsor',
|
||||
icon: <IconEdit />,
|
||||
path: RouterEvent.tambah_sponsor,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Hapus Sponsor',
|
||||
icon: <IconTrash />,
|
||||
|
||||
}
|
||||
]}
|
||||
component={
|
||||
<Stack align="center" spacing={"xs"}>
|
||||
<Flex gap={200} justify={"space-between"}>
|
||||
<Box>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
c={MainColor.white}
|
||||
>
|
||||
<IconEdit />
|
||||
|
||||
</ActionIcon>
|
||||
<Text fz={"sm"} align="center" color={MainColor.white}>
|
||||
Edit
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Center>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
c={MainColor.white}
|
||||
onClick={() => setOpenModal(true)}
|
||||
>
|
||||
<IconTrash />
|
||||
|
||||
</ActionIcon>
|
||||
</Center>
|
||||
<Text fz={"sm"} ta={"center"} color={MainColor.white}>
|
||||
Hapus
|
||||
</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
<UIGlobal_Modal
|
||||
title={"Anda yakin akan menghapus sponsor?"}
|
||||
opened={openModal}
|
||||
close={() => setOpenModal(false)}
|
||||
buttonKiri={
|
||||
<Button style={{ backgroundColor: AccentColor.blue }} c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal(false)}>
|
||||
Batal
|
||||
</Button>
|
||||
}
|
||||
buttonKanan={
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
style={{ backgroundColor: MainColor.red }}
|
||||
loading={isLoading ? true : false}
|
||||
radius={"xl"}
|
||||
c={AccentColor.white}
|
||||
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
109
src/app_modules/event/detail/sponsor/edit_sponsor/index.tsx
Normal file
109
src/app_modules/event/detail/sponsor/edit_sponsor/index.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
'use client'
|
||||
import { MainColor } from '@/app_modules/_global/color';
|
||||
import { ComponentGlobal_BoxInformation, ComponentGlobal_BoxUploadImage } from '@/app_modules/_global/component';
|
||||
import { Box, Stack, Loader, AspectRatio, Image, Group, Button, TextInput, Title } from '@mantine/core';
|
||||
import { IconCamera, IconPhoto } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function Event_EditSponsor() {
|
||||
const router = useRouter();
|
||||
const [img, setImg] = useState<any | null>(null);
|
||||
const [isLoadingImg, setIsLoadingImg] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Stack px={"xs"} spacing={0}>
|
||||
<Stack spacing={0}>
|
||||
<Box mb={"sm"}>
|
||||
<ComponentGlobal_BoxInformation
|
||||
informasi='Gambar sponsor bisa berupa ilustrasti,
|
||||
logo atau foto terkait sponsor'/>
|
||||
</Box>
|
||||
<ComponentGlobal_BoxUploadImage>
|
||||
{isLoadingImg ? (
|
||||
<Stack justify='center' align='center' h={"100%"}>
|
||||
<Loader size={150} color="yellow" />
|
||||
</Stack>
|
||||
) : img ? (
|
||||
<AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
|
||||
<Image
|
||||
style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
|
||||
alt="Foto"
|
||||
height={250}
|
||||
src={URL.createObjectURL(img)}
|
||||
/>
|
||||
</AspectRatio>
|
||||
|
||||
) : (
|
||||
<Stack justify='center' align='center' h={"100%"}>
|
||||
<IconPhoto size={150} color='gray' />
|
||||
</Stack>
|
||||
)}
|
||||
</ComponentGlobal_BoxUploadImage>
|
||||
<Group position="center">
|
||||
<Button radius={"xl"} leftIcon={<IconCamera color='black' />} color='yellow' c={"black"} bg={MainColor.yellow}>Upload Gambar</Button>
|
||||
</Group>
|
||||
<Stack mt={30}>
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white,
|
||||
}
|
||||
}}
|
||||
withAsterisk
|
||||
label="Nama Sponsor"
|
||||
placeholder="Masukan nama sponsor"
|
||||
|
||||
/>
|
||||
<Title order={4} color={MainColor.white}>Sosial Media</Title>
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white,
|
||||
}
|
||||
}}
|
||||
withAsterisk
|
||||
label="Facebook"
|
||||
placeholder="Masukan facebook"
|
||||
|
||||
/>
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white,
|
||||
}
|
||||
}}
|
||||
withAsterisk
|
||||
label="WhatsApp"
|
||||
placeholder="Masukan whatsapp"
|
||||
|
||||
/>
|
||||
<Button mt={90} mb={20} radius={"xl"} color='yellow' c={"black"} bg={MainColor.yellow} onClick={() => router.push("/dev/event/detail/sponsor/nominal_sponsor")}>
|
||||
Simpan
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Event_EditSponsor;
|
||||
14
src/app_modules/event/detail/sponsor/edit_sponsor/layout.tsx
Normal file
14
src/app_modules/event/detail/sponsor/edit_sponsor/layout.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutTamplate } from '@/app_modules/_global/ui';
|
||||
import React from 'react';
|
||||
|
||||
function Event_LayoutEditSponsor({children} : {children: React.ReactNode}) {
|
||||
return (
|
||||
<>
|
||||
<UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Sponsor"/>}>
|
||||
{children}
|
||||
</UIGlobal_LayoutTamplate>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Event_LayoutEditSponsor;
|
||||
@@ -1,14 +0,0 @@
|
||||
|
||||
import Event_CreateSponsor from '@/app_modules/event/component/detail/create_sponsor';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
function Event_TambahSponsor() {
|
||||
return (
|
||||
<>
|
||||
<Event_CreateSponsor/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Event_TambahSponsor;
|
||||
Reference in New Issue
Block a user