194 lines
7.4 KiB
TypeScript
194 lines
7.4 KiB
TypeScript
"use client";
|
|
import { API_ADDRESS, LayoutNavbarNew, WARNA } from "@/module/_global";
|
|
import { TypeGroup } from "@/module/group";
|
|
import { useHookstate } from "@hookstate/core";
|
|
import {
|
|
Avatar,
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
Group,
|
|
Select,
|
|
Stack,
|
|
Text,
|
|
Textarea,
|
|
TextInput,
|
|
} from "@mantine/core";
|
|
import { useShallowEffect } from "@mantine/hooks";
|
|
import { useRouter } from "next/navigation";
|
|
import React, { useState } from "react";
|
|
import { IoIosArrowDropright } from "react-icons/io";
|
|
import { globalMemberDivision } from "../lib/val_division";
|
|
import toast from "react-hot-toast";
|
|
import { funGetUserByCookies } from "@/module/auth";
|
|
import CreateAdminDivision from "./create_admin_division";
|
|
import CreateUsers from "./create_users";
|
|
import NavbarCreateUsers from "./ui/navbar_create_users";
|
|
|
|
|
|
export default function CreateDivision() {
|
|
const router = useRouter();
|
|
const [dataGroup, setDataGroup] = useState<TypeGroup>();
|
|
const [roleUser, setRoleUser] = useState<any>("")
|
|
const [isChooseAnggota, setChooseAnggota] = useState(false)
|
|
const [isChooseAdmin, setChooseAdmin] = useState(false)
|
|
const member = useHookstate(globalMemberDivision)
|
|
const [body, setBody] = useState<any>({
|
|
idGroup: "",
|
|
name: "",
|
|
desc: "",
|
|
});
|
|
|
|
async function loadData() {
|
|
const loadGroup = await fetch(API_ADDRESS.apiGetAllGroup + '&active=true');
|
|
const dataGroup = await loadGroup.json();
|
|
setDataGroup(dataGroup);
|
|
|
|
const loadUser = await funGetUserByCookies();
|
|
setRoleUser(loadUser.idUserRole)
|
|
}
|
|
|
|
function onSubmit() {
|
|
if (roleUser == "supadmin" && (body.idGroup == "" || body.idGroup == null)) {
|
|
return toast.error("Error! grup harus diisi")
|
|
}
|
|
|
|
if (body.name == "") {
|
|
return toast.error("Error! nama divisi harus diisi")
|
|
}
|
|
|
|
if (member.length == 0) {
|
|
return toast.error("Error! belum ada anggota yang terdaftar")
|
|
}
|
|
|
|
|
|
|
|
setChooseAdmin(true)
|
|
|
|
}
|
|
|
|
function onToChooseAnggota() {
|
|
if (roleUser == "supadmin" && body.idGroup == "")
|
|
return toast.error("Error! grup harus diisi")
|
|
setChooseAnggota(true)
|
|
}
|
|
|
|
|
|
|
|
useShallowEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
if (isChooseAdmin) return <CreateAdminDivision data={body} />
|
|
|
|
if (isChooseAnggota) return <NavbarCreateUsers grup={body.idGroup} />
|
|
|
|
return (
|
|
<Box>
|
|
<LayoutNavbarNew back="/division" title="Tambah Divisi" menu />
|
|
<Box p={20}>
|
|
<Stack>
|
|
{
|
|
(roleUser == "supadmin") && (
|
|
<Select
|
|
placeholder="Grup"
|
|
label="Grup"
|
|
size="md"
|
|
required
|
|
radius={40}
|
|
data={dataGroup?.map((pro: any) => ({
|
|
value: String(pro.id),
|
|
label: pro.name
|
|
}))}
|
|
onChange={(val) => {
|
|
setBody({ ...body, idGroup: val })
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
<TextInput
|
|
placeholder="Nama Divisi"
|
|
label="Nama Divisi"
|
|
size="md"
|
|
required
|
|
radius={40}
|
|
onChange={(val) => { setBody({ ...body, name: val.target.value }) }}
|
|
/>
|
|
<Textarea size="md" placeholder="Deskripsi" label="Deskripsi" radius={10} onChange={(val) => { setBody({ ...body, desc: val }) }} />
|
|
<Box onClick={() => { onToChooseAnggota() }}>
|
|
<Group
|
|
justify="space-between"
|
|
p={10}
|
|
style={{
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
borderRadius: 10,
|
|
}}
|
|
>
|
|
<Text>Tambah Anggota</Text>
|
|
<IoIosArrowDropright size={25} />
|
|
</Group>
|
|
</Box>
|
|
<Box pt={20}>
|
|
<Group justify="space-between">
|
|
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
|
|
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
|
|
</Group>
|
|
<Box pt={10}>
|
|
<Box mb={20}>
|
|
<Box
|
|
style={{
|
|
border: `1px solid ${"#C7D6E8"}`,
|
|
borderRadius: 10,
|
|
}}
|
|
px={20}
|
|
py={10}
|
|
>
|
|
{(member.length === 0) ? (
|
|
<Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
|
|
) : member.get().map((v: any, i: any) => {
|
|
return (
|
|
<Flex
|
|
justify={"space-between"}
|
|
align={"center"}
|
|
mt={20}
|
|
key={i}
|
|
>
|
|
<Group>
|
|
<Avatar src={v.img} alt="it's me" size="lg" />
|
|
<Box>
|
|
<Text c={WARNA.biruTua} fw={"bold"}>
|
|
{v.name}
|
|
</Text>
|
|
</Box>
|
|
</Group>
|
|
<Text c={WARNA.biruTua} fw={"bold"}>
|
|
Anggota
|
|
</Text>
|
|
</Flex>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box mt="xl">
|
|
<Button
|
|
color="white"
|
|
bg={WARNA.biruTua}
|
|
size="lg"
|
|
radius={30}
|
|
fullWidth
|
|
onClick={() => {
|
|
onSubmit()
|
|
// router.push("/division/create?page=pilih-admin")
|
|
}}
|
|
>
|
|
Simpan
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|