upd: new group
Deskripsi: - pembaruan api group NO Issues
This commit is contained in:
amel
93
src/module/group/ui/drawer_group.tsx
Normal file
93
src/module/group/ui/drawer_group.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import { API_ADDRESS, LayoutDrawer, 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";
|
||||
|
||||
export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) => void; }) {
|
||||
const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
|
||||
const [namaGroup, setNamaGroup] = useState("");
|
||||
|
||||
|
||||
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.log(error);
|
||||
toast.error("Gagal menambahkan grup, coba lagi nanti");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid
|
||||
cols={{ base: 3, sm: 3, lg: 3 }}
|
||||
onClick={() => setOpenDrawerGroup(true)}
|
||||
>
|
||||
<Flex justify={"center"} align={"center"} direction={"column"}>
|
||||
<Box>
|
||||
<IoAddCircle size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>Tambah Group</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
<LayoutDrawer
|
||||
opened={openDrawerGroup}
|
||||
onClose={() => setOpenDrawerGroup(false)}
|
||||
title={"Tambah Grup"}
|
||||
>
|
||||
<Box pt={10}>
|
||||
<TextInput
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
size="lg"
|
||||
radius={10}
|
||||
placeholder="Grup"
|
||||
onChange={(e) => setNamaGroup(e.target.value)}
|
||||
/>
|
||||
<Box mt={"xl"}>
|
||||
<Button
|
||||
c={"white"}
|
||||
bg={WARNA.biruTua}
|
||||
size="lg"
|
||||
radius={30}
|
||||
fullWidth
|
||||
onClick={createData}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</LayoutDrawer>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
177
src/module/group/ui/edit_drawer_group.tsx
Normal file
177
src/module/group/ui/edit_drawer_group.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
"use client";
|
||||
import { API_ADDRESS, LayoutDrawer, WARNA } from "@/module/_global";
|
||||
import LayoutModal from "@/module/_global/layout/layout_modal";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Flex,
|
||||
Group,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { FaPencil, FaToggleOff } from "react-icons/fa6";
|
||||
import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5";
|
||||
|
||||
export default function EditDrawerGroup({
|
||||
onUpdated,
|
||||
id,
|
||||
isActive,
|
||||
}: {
|
||||
onUpdated: (val: boolean) => void;
|
||||
id: string | null;
|
||||
isActive: boolean | null;
|
||||
}) {
|
||||
const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
|
||||
const [isModal, setModal] = useState(false);
|
||||
const [name, setName] = useState("");
|
||||
|
||||
async function getOneGroup() {
|
||||
try {
|
||||
const res = await fetch(`${API_ADDRESS.apiGetOneGroup}&groupId=${id}`);
|
||||
const data = await res.json();
|
||||
setName(data.name);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
getOneGroup();
|
||||
}, []);
|
||||
|
||||
async function isUpdate() {
|
||||
try {
|
||||
const res = await fetch(API_ADDRESS.apiUpdateGroup, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: id,
|
||||
name: name
|
||||
}),
|
||||
});
|
||||
setOpenDrawerGroup(false);
|
||||
onUpdated(true);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function nonActive(val: boolean) {
|
||||
try {
|
||||
if (val) {
|
||||
const res = await fetch(API_ADDRESS.apiDeleteGroup, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id,
|
||||
isActive,
|
||||
}),
|
||||
});
|
||||
|
||||
if (res.status == 200) {
|
||||
onUpdated(true);
|
||||
} else {
|
||||
onUpdated(false);
|
||||
}
|
||||
}
|
||||
setModal(false);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setModal(false);
|
||||
toast.error("Terjadi kesalahan");
|
||||
onUpdated(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
|
||||
<Flex
|
||||
justify={"center"}
|
||||
align={"center"}
|
||||
direction={"column"}
|
||||
onClick={() => setModal(true)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<Box>
|
||||
<FaToggleOff size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>{isActive == false ? "Aktifkan" : "Non Aktifkan"}</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex
|
||||
justify={"center"}
|
||||
align={"center"}
|
||||
direction={"column"}
|
||||
onClick={() => setOpenDrawerGroup(true)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<Box>
|
||||
<FaPencil size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>Edit</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
<LayoutDrawer
|
||||
opened={openDrawerGroup}
|
||||
onClose={() => setOpenDrawerGroup(false)}
|
||||
title={"Edit Grup"}
|
||||
>
|
||||
<Box pt={10}>
|
||||
<TextInput
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
size="lg"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
radius={10}
|
||||
placeholder="Grup"
|
||||
/>
|
||||
<Box mt={"xl"}>
|
||||
<Button
|
||||
c={"white"}
|
||||
bg={WARNA.biruTua}
|
||||
size="lg"
|
||||
radius={30}
|
||||
fullWidth
|
||||
onClick={isUpdate}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</LayoutDrawer>
|
||||
|
||||
<LayoutModal
|
||||
opened={isModal}
|
||||
onClose={() => setModal(false)}
|
||||
description="Apakah Anda yakin ingin mangubah status aktifasi data?"
|
||||
onYes={(val) => {
|
||||
nonActive(val);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
140
src/module/group/ui/list_group_active.tsx
Normal file
140
src/module/group/ui/list_group_active.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { API_ADDRESS, LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Group,
|
||||
Skeleton,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { HiOutlineOfficeBuilding } from "react-icons/hi";
|
||||
import { HiMagnifyingGlass } from "react-icons/hi2";
|
||||
import EditDrawerGroup from "./edit_drawer_group";
|
||||
import toast from "react-hot-toast";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import { funGetAllGroup } from "../lib/api_group";
|
||||
import { IDataGroup } from "../lib/type_group";
|
||||
|
||||
|
||||
export default function ListGroupActive({ status }: { status: boolean }) {
|
||||
const [openDrawer, setOpenDrawer] = useState(false);
|
||||
const [valChoose, setValChoose] = useState("");
|
||||
const [isData, setData] = useState<IDataGroup[]>([]);
|
||||
const [selectId, setSelectId] = useState<string | null>(null);
|
||||
const [active, setActive] = useState<boolean | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setData([]);
|
||||
setLoading(true);
|
||||
|
||||
const response = await funGetAllGroup('?active=' + status + '&search=' + searchQuery)
|
||||
|
||||
if (response.success) {
|
||||
setData(response?.data)
|
||||
} else {
|
||||
toast.error(response.message);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
toast.error("Gagal mendapatkan grup, coba lagi nanti");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
fetchData();
|
||||
}, [status, searchQuery]);
|
||||
|
||||
return (
|
||||
<Box pt={20}>
|
||||
<TextInput
|
||||
styles={{
|
||||
input: {
|
||||
color: WARNA.biruTua,
|
||||
borderRadius: WARNA.biruTua,
|
||||
borderColor: WARNA.biruTua,
|
||||
},
|
||||
}}
|
||||
size="md"
|
||||
radius={30}
|
||||
leftSection={<HiMagnifyingGlass size={20} />}
|
||||
placeholder="Pencarian"
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
{loading
|
||||
? Array(6)
|
||||
.fill(null)
|
||||
.map((_, i) => (
|
||||
<Box key={i}>
|
||||
<SkeletonSingle />
|
||||
</Box>
|
||||
))
|
||||
: isData.map((v, i) => {
|
||||
return (
|
||||
<Box pt={20} key={i}>
|
||||
<Group
|
||||
align="center"
|
||||
style={{
|
||||
border: `1px solid ${"#DCEED8"}`,
|
||||
padding: 10,
|
||||
borderRadius: 10,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => {
|
||||
setValChoose(v.name);
|
||||
setOpenDrawer(true);
|
||||
setSelectId(v.id);
|
||||
setActive(v.isActive);
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
bg={"#DCEED8"}
|
||||
size={50}
|
||||
radius={100}
|
||||
aria-label="icon"
|
||||
>
|
||||
<HiOutlineOfficeBuilding
|
||||
color={WARNA.biruTua}
|
||||
size={25}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} c={WARNA.biruTua}>
|
||||
{v.name}
|
||||
</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
|
||||
<LayoutDrawer
|
||||
opened={openDrawer}
|
||||
onClose={() => setOpenDrawer(false)}
|
||||
title={valChoose}
|
||||
>
|
||||
<EditDrawerGroup
|
||||
id={selectId}
|
||||
isActive={active}
|
||||
onUpdated={(val) => {
|
||||
if (val) {
|
||||
toast.success("Sukses! data tersimpan");
|
||||
// fetchData();
|
||||
}
|
||||
setOpenDrawer(false);
|
||||
}}
|
||||
/>
|
||||
</LayoutDrawer>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
25
src/module/group/ui/navbar_group.tsx
Normal file
25
src/module/group/ui/navbar_group.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
"use client"
|
||||
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
|
||||
import { ActionIcon, } from '@mantine/core';
|
||||
import React, { useState } from 'react';
|
||||
import { HiMenu } from "react-icons/hi";
|
||||
import DrawerGroup from './drawer_group';
|
||||
|
||||
export default function NavbarGroup() {
|
||||
const [isOpen, setOpen] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<LayoutNavbarNew back='/home' title='Grup'
|
||||
menu={
|
||||
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
|
||||
<HiMenu size={20} color='white' />
|
||||
</ActionIcon>
|
||||
}
|
||||
/>
|
||||
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
|
||||
<DrawerGroup onSuccess={() => { setOpen(false) }} />
|
||||
</LayoutDrawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
47
src/module/group/ui/tab_list_group.tsx
Normal file
47
src/module/group/ui/tab_list_group.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
import { Box, Tabs, rem } from "@mantine/core";
|
||||
import { IoCloseCircleOutline } from "react-icons/io5";
|
||||
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
|
||||
import ListGroupActive from "./list_group_active";
|
||||
|
||||
export default function TabListGroup() {
|
||||
const iconStyle = { width: rem(20), height: rem(20) };
|
||||
|
||||
return (
|
||||
<Box p={20}>
|
||||
<Tabs variant="pills" color="#FF9861" radius="xl" defaultValue="aktif">
|
||||
<Tabs.List
|
||||
bg={"white"}
|
||||
style={{
|
||||
border: `1px solid ${"#EDEDED"}`,
|
||||
padding: 5,
|
||||
borderRadius: 100,
|
||||
}}
|
||||
>
|
||||
<Tabs.Tab
|
||||
value="aktif"
|
||||
w={"45%"}
|
||||
leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
|
||||
>
|
||||
Aktif
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab
|
||||
value="tidak-aktif"
|
||||
w={"53%"}
|
||||
leftSection={<IoCloseCircleOutline style={iconStyle} />}
|
||||
>
|
||||
Tidak Aktif
|
||||
</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Panel value="aktif">
|
||||
<ListGroupActive status={true} />
|
||||
</Tabs.Panel>
|
||||
|
||||
<Tabs.Panel value="tidak-aktif">
|
||||
<ListGroupActive status={false} />
|
||||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user