106 lines
2.7 KiB
TypeScript
106 lines
2.7 KiB
TypeScript
import { LayoutDrawer, TEMA, WARNA } from "@/module/_global";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Center,
|
|
Flex,
|
|
Group,
|
|
SimpleGrid,
|
|
Stack,
|
|
Text,
|
|
TextInput,
|
|
} from "@mantine/core";
|
|
import React, { useState } from "react";
|
|
import { IoAddCircle } from "react-icons/io5";
|
|
import { funCreateGroup } from "../lib/api_group";
|
|
import toast from "react-hot-toast";
|
|
import { useHookstate } from "@hookstate/core";
|
|
|
|
export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) => void; }) {
|
|
const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
|
|
const [namaGroup, setNamaGroup] = useState("");
|
|
const tema = useHookstate(TEMA)
|
|
const [touched, setTouched] = useState({
|
|
name: false,
|
|
});
|
|
|
|
|
|
async function createData() {
|
|
try {
|
|
const response = await funCreateGroup({ name: namaGroup })
|
|
|
|
if (response.success) {
|
|
toast.success(response.message);
|
|
setOpenDrawerGroup(false)
|
|
onSuccess(true)
|
|
} else {
|
|
toast.error(response.message)
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error("Gagal menambahkan grup, coba lagi nanti");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<Stack pt={10}>
|
|
<SimpleGrid
|
|
cols={{ base: 2, sm: 3, lg: 3 }}
|
|
onClick={() => setOpenDrawerGroup(true)}
|
|
>
|
|
<Flex justify={"center"} align={"center"} direction={"column"}>
|
|
<Box>
|
|
<IoAddCircle size={30} color={tema.get().utama} />
|
|
</Box>
|
|
<Box>
|
|
<Text c={tema.get().utama}>Tambah Grup</Text>
|
|
</Box>
|
|
</Flex>
|
|
</SimpleGrid>
|
|
</Stack>
|
|
<LayoutDrawer
|
|
opened={openDrawerGroup}
|
|
onClose={() => setOpenDrawerGroup(false)}
|
|
title={"Tambah Grup"}
|
|
>
|
|
<Box pt={10}>
|
|
<TextInput
|
|
styles={{
|
|
input: {
|
|
color: tema.get().utama,
|
|
borderRadius: tema.get().utama,
|
|
borderColor: tema.get().utama,
|
|
},
|
|
}}
|
|
size="lg"
|
|
radius={10}
|
|
label="Grup"
|
|
required
|
|
placeholder="Grup"
|
|
onChange={(e) => {
|
|
setNamaGroup(e.target.value)
|
|
setTouched({ ...touched, name: false })
|
|
}}
|
|
error={touched.name ? "Error! harus memasukkan grup" : ""}
|
|
onBlur={() => setTouched({ ...touched, name: true })}
|
|
/>
|
|
<Box mt={"xl"}>
|
|
<Button
|
|
c={"white"}
|
|
bg={tema.get().utama}
|
|
size="lg"
|
|
radius={30}
|
|
fullWidth
|
|
onClick={createData}
|
|
>
|
|
Simpan
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</LayoutDrawer>
|
|
</Box>
|
|
);
|
|
}
|