wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #243 from bipproduction/lukman/20-september-2024

Browse Source 
style : update style
This commit is contained in:
Amalia
2024-09-20 14:33:11 +08:00
committed by GitHub
parent ce236db402 e781387a22
commit f5fdeded9d
4 changed files with 1118 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
src/module/document/ui/drawer_cut_documents.tsx
View File

@@ -1,162 +1,295 @@
import { TEMA } from '@/module/_global'; import { TEMA } from "@/module/_global";
import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, Text, TextInput } from '@mantine/core'; import {
import React, { useState } from 'react'; Box,
import toast from 'react-hot-toast'; Breadcrumbs,
import { FcFolder } from 'react-icons/fc'; Button,
import { funCreateFolder, funGetAllDocument, funMoveDocument } from '../lib/api_document'; Divider,
import { useParams } from 'next/navigation'; Flex,
import { IDataDocument, IFormDetailMoreItem, IJalurItem } from '../lib/type_document'; Grid,
import { useShallowEffect } from '@mantine/hooks'; Group,
import { MdFolder } from 'react-icons/md'; Modal,
import router from 'next/router'; ScrollArea,
import { GoChevronRight } from 'react-icons/go'; Skeleton,
import { useHookstate } from '@hookstate/core'; Text,
TextInput,
} from "@mantine/core";
import React, { useState } from "react";
import toast from "react-hot-toast";
import { FcFolder } from "react-icons/fc";
import {
funCreateFolder,
funGetAllDocument,
funMoveDocument,
} from "../lib/api_document";
import { useParams } from "next/navigation";
import {
IDataDocument,
IFormDetailMoreItem,
IJalurItem,
} from "../lib/type_document";
import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
import { MdFolder } from "react-icons/md";
import router from "next/router";
import { GoChevronRight } from "react-icons/go";
import { useHookstate } from "@hookstate/core";
export default function DrawerCutDocuments({
export default function DrawerCutDocuments({ category, onChoosePath, data }: { category: string, data: IFormDetailMoreItem[], onChoosePath: (val: string) => void }) { category,
onChoosePath,
data,
}: {
category: string;
data: IFormDetailMoreItem[];
onChoosePath: (val: string) => void;
}) {
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>();
const [path, setPath] = useState('home') const [path, setPath] = useState("home");
const [dataDocument, setDataDocument] = useState<IDataDocument[]>([]) const [dataDocument, setDataDocument] = useState<IDataDocument[]>([]);
const [dataJalur, setDataJalur] = useState<IJalurItem[]>([]) const [dataJalur, setDataJalur] = useState<IJalurItem[]>([]);
const [valName, setValName] = useState('') const [valName, setValName] = useState("");
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA);
const [loading, setLoading] = useState(true);
const isMobile = useMediaQuery("(max-width: 369px)");
async function onCreateFolder() { async function onCreateFolder() {
try { try {
const res = await funCreateFolder({ const res = await funCreateFolder({
name: valName, name: valName,
path: path, path: path,
idDivision: param.id idDivision: param.id,
}) });
if (res.success) { if (res.success) {
getOneData() getOneData();
} else { } else {
toast.error(res.message) toast.error(res.message);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal membuat folder baru, coba lagi nanti"); toast.error("Gagal membuat folder baru, coba lagi nanti");
} }
setOpened(false) setOpened(false);
} }
async function getOneData() { async function getOneData() {
try { try {
const respon = await funGetAllDocument("?division=" + param.id + "&path=" + path + "&category=folder"); setLoading(true);
const respon = await funGetAllDocument(
"?division=" + param.id + "&path=" + path + "&category=folder"
);
if (respon.success) { if (respon.success) {
setDataDocument(respon.data); setDataDocument(respon.data);
setDataJalur(respon.jalur); setDataJalur(respon.jalur);
} else { } else {
toast.error(respon.message); toast.error(respon.message);
} }
setLoading(false);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.error("Gagal mendapatkan item, coba lagi nanti"); toast.error("Gagal mendapatkan item, coba lagi nanti");
} finally {
setLoading(false);
} }
} }
useShallowEffect(() => { useShallowEffect(() => {
getOneData() getOneData();
}, [param.id, path]) }, [param.id, path]);
return ( return (
<Box> <Box>
<Box h={60} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{ <Box
zIndex: 999 h={60}
}}> pos={"fixed"}
<Grid justify='center'> bottom={0}
w={{ base: "92%", md: "94%" }}
style={{
zIndex: 999,
}}
>
<Grid justify="center">
<Grid.Col span={6}> <Grid.Col span={6}>
<Button variant="subtle" fullWidth color={tema.get().utama} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button> <Button
variant="subtle"
fullWidth
color={tema.get().utama}
radius={"xl"}
onClick={() => setOpened(true)}
>
BUAT FOLDER BARU
</Button>
</Grid.Col> </Grid.Col>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button variant="filled" fullWidth color={tema.get().utama} radius={"xl"} onClick={() => onChoosePath(path)}> <Button
{ variant="filled"
(category == "move") ? fullWidth
"PINDAH" : "SALIN" color={tema.get().utama}
} radius={"xl"}
onClick={() => onChoosePath(path)}
>
{category == "move" ? "PINDAH" : "SALIN"}
</Button> </Button>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>
<Box p={10} pb={60}> <Box p={10} pb={60}>
<Box> <Box>
<Breadcrumbs separator={<GoChevronRight />} separatorMargin="md" mt="xs"> <Breadcrumbs
{ separator={<GoChevronRight />}
dataJalur.map((v, i) => { separatorMargin="md"
return ( mt="xs"
<Text onClick={() => setPath(v.id)} key={i} style={{ cursor: 'pointer' }}> >
{v.name} {dataJalur.map((v, i) => {
</Text> return (
) <Text
}) onClick={() => setPath(v.id)}
} key={i}
style={{ cursor: "pointer" }}
>
{v.name}
</Text>
);
})}
</Breadcrumbs> </Breadcrumbs>
</Box> </Box>
<ScrollArea h={{ <ScrollArea
base: "55vh", xl: "58vh", md: "57vh", h={{
sm: "58vh", base: "55vh",
}} type="scroll" scrollbarSize={2} scrollHideDelay={0} scrollbars="y"> xl: "58vh",
{dataDocument.map((v, i) => { md: "57vh",
const found = data.some((i: any) => i.id == v.id) sm: "58vh",
return ( }}
<Box key={i}> type="scroll"
<Box mt={10} mb={10} onClick={() => { scrollbarSize={2}
if (!found) { scrollHideDelay={0}
setPath(v.id) scrollbars="y"
} >
}}> {loading ? (
<Grid align='center'> <Group align="center">
<Grid.Col span={12}> <Skeleton height={15} width={100} />
<Group gap={20}> <Skeleton height={15} width={100} />
<Box> </Group>
{ ) : null}
(found) ? {loading ? (
<MdFolder size={60} color='grey' /> : Array(6)
<FcFolder size={60} /> .fill(null)
} .map((_, i) => (
<Box key={i}>
<Box mt={20} mb={20}>
<Grid align="center">
<Grid.Col span={2}>
<Skeleton
height={isMobile ? 40 : 50}
width={isMobile ? 40 : 50}
/>
</Grid.Col>
<Grid.Col span={10}>
<Group justify="space-between" align="center">
<Flex direction={"column"}>
<Skeleton height={15} width={200} />
<Skeleton mt={5} height={10} width={200} />
</Flex>
</Group>
</Grid.Col>
</Grid>
</Box>
<Divider size="xs" />
</Box>
))
) : (
<Box>
{dataDocument.length == 0 ? (
<Box
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "60vh",
}}
>
<Text c="dimmed" ta={"center"} fs={"italic"}>
Tidak ada Dokumen
</Text>
</Box>
) : (
<Box>
{dataDocument.map((v, i) => {
const found = data.some((i: any) => i.id == v.id);
return (
<Box key={i}>
<Box
mt={10}
mb={10}
onClick={() => {
if (!found) {
setPath(v.id);
}
}}
>
<Grid align="center">
<Grid.Col span={12}>
<Group gap={20}>
<Box>
{found ? (
<MdFolder size={60} color="grey" />
) : (
<FcFolder size={60} />
)}
</Box>
<Flex direction={"column"}>
<Text>
{v.category == "FOLDER"
? v.name
: v.name + "." + v.extension}
</Text>
{found && (
<Text c={"dimmed"} fz={13} fs={"italic"}>
Tidak bisa memilih folder ini
</Text>
)}
</Flex>
</Group>
</Grid.Col>
</Grid>
</Box>
<Divider size="xs" />
</Box> </Box>
<Flex direction={'column'}> );
<Text>{(v.category == "FOLDER") ? v.name : v.name + '.' + v.extension}</Text> })}
{ </Box>
(found) && <Text c={'dimmed'} fz={13} fs={'italic'}>Tidak bisa memilih folder ini</Text> )}
}
</Flex>
</Group>
</Grid.Col>
</Grid>
</Box>
<Divider size="xs" />
</Box> </Box>
) )}
})}
</ScrollArea> </ScrollArea>
</Box> </Box>
<Modal
styles={{
<Modal styles={{ body: {
body: { borderRadius: 20,
borderRadius: 20 },
}, content: {
content: { borderRadius: 20,
borderRadius: 20, border: `2px solid ${"#828AFC"}`,
border: `2px solid ${"#828AFC"}` },
} }}
}} opened={opened} onClose={() => setOpened(false)} centered withCloseButton={false}> opened={opened}
onClose={() => setOpened(false)}
centered
withCloseButton={false}
>
<Box p={20}> <Box p={20}>
<Text ta={"center"} fw={"bold"}>Buat Folder</Text> <Text ta={"center"} fw={"bold"}>
Buat Folder
</Text>
<Box mt={20} mb={20}> <Box mt={20} mb={20}>
<TextInput <TextInput
styles={{ styles={{
input: { input: {
color: tema.get().utama, color: tema.get().utama,
borderRadius: '#828AFC', borderRadius: "#828AFC",
borderColor: '#828AFC', borderColor: "#828AFC",
}, },
}} }}
size="md" size="md"
@@ -168,10 +301,24 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
</Box> </Box>
<Grid mt={40}> <Grid mt={40}>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button variant="subtle" fullWidth color='#969494' onClick={() => setOpened(false)}>Batalkan</Button> <Button
variant="subtle"
fullWidth
color="#969494"
onClick={() => setOpened(false)}
>
Batalkan
</Button>
</Grid.Col> </Grid.Col>
<Grid.Col span={6}> <Grid.Col span={6}>
<Button variant="subtle" fullWidth color={tema.get().utama} onClick={() => onCreateFolder()}>Membuat</Button> <Button
variant="subtle"
fullWidth
color={tema.get().utama}
onClick={() => onCreateFolder()}
>
Membuat
</Button>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Box> </Box>

322
src/module/document/ui/drawer_share_document.tsx
View File

@@ -1,7 +1,23 @@
import { TEMA } from "@/module/_global"; import { TEMA } from "@/module/_global";
import { funGetListDivisionByIdDivision, IDataDivison } from "@/module/division_new"; import {
funGetListDivisionByIdDivision,
IDataDivison,
} from "@/module/division_new";
import { IDataMemberTaskDivision } from "@/module/task/lib/type_task"; import { IDataMemberTaskDivision } from "@/module/task/lib/type_task";
import { Box, Select, Button, Avatar, Divider, Flex, Group, Stack, Text, ActionIcon, ScrollArea } from "@mantine/core"; import {
Box,
Select,
Button,
Avatar,
Divider,
Flex,
Group,
Stack,
Text,
ActionIcon,
ScrollArea,
Skeleton,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@@ -12,124 +28,202 @@ import { funShareDocument } from "../lib/api_document";
import { useHookstate } from "@hookstate/core"; import { useHookstate } from "@hookstate/core";
import { globalRefreshDocument } from "../lib/val_document"; import { globalRefreshDocument } from "../lib/val_document";
export default function DrawerShareDocument({ data }: { data: IShareDivision[] }) { export default function DrawerShareDocument({
const [selectedFiles, setSelectedFiles] = useState<any>([]) data,
const [isData, setData] = useState<IDataDivison[]>([]) }: {
const param = useParams<{ id: string }>() data: IShareDivision[];
const refresh = useHookstate(globalRefreshDocument) }) {
const tema = useHookstate(TEMA) const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [isData, setData] = useState<IDataDivison[]>([]);
const param = useParams<{ id: string }>();
const refresh = useHookstate(globalRefreshDocument);
const tema = useHookstate(TEMA);
const [loading, setLoading] = useState(true);
async function onShare() {
try {
async function onShare() { if (selectedFiles.length == 0) {
try { return toast.error("Pilih divisi terlebih dahulu");
if (selectedFiles.length == 0) {
return toast.error('Pilih divisi terlebih dahulu')
}
const respon = await funShareDocument({ dataDivision: selectedFiles, dataItem: data })
if (respon.success) {
toast.success(respon.message)
refresh.set(true)
} else {
toast.error(respon.message)
}
} catch (error) {
console.error(error)
toast.error("Gagal membagikan item, coba lagi nanti");
} }
}
async function getData() { const respon = await funShareDocument({
try { dataDivision: selectedFiles,
const response = await funGetListDivisionByIdDivision('?division=' + param.id) dataItem: data,
if (response.success) { });
setData(response.data.filter((i: any) => i.id != param.id)) if (respon.success) {
} else { toast.success(respon.message);
toast.error(response.message); refresh.set(true);
}
} catch (error) {
toast.error("Gagal mendapatkan divisi, coba lagi nanti");
console.error(error);
}
}
useShallowEffect(() => {
getData()
}, []);
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.id == isData[index].id)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.id != isData[index].id))
} else { } else {
setSelectedFiles([...selectedFiles, { id: isData[index].id, name: isData[index].name }]) toast.error(respon.message);
} }
}; } catch (error) {
console.error(error);
toast.error("Gagal membagikan item, coba lagi nanti");
}
}
return ( async function getData() {
<Box pt={10}> try {
<Box mt={10}> setLoading(true);
<ScrollArea const response = await funGetListDivisionByIdDivision(
h={{ "?division=" + param.id
base: "58vh", xl: "58vh", md: "57vh", );
sm: "58vh", if (response.success) {
}} type="scroll" scrollbarSize={2} scrollHideDelay={0} scrollbars="y" setData(response.data.filter((i: any) => i.id != param.id));
> } else {
{isData.map((v, i) => { toast.error(response.message);
const isSelected = selectedFiles.some((i: any) => i?.id == v.id); }
return ( setLoading(false);
<Box mb={15} key={i} onClick={() => handleFileClick(i)} > } catch (error) {
<Flex justify={"space-between"} align={"center"}> toast.error("Gagal mendapatkan divisi, coba lagi nanti");
<Group> console.error(error);
<ActionIcon variant="light" color="gray" radius="xl" size={42} p={10}> } finally {
<FaUsers fontSize={40} /> setLoading(false);
</ActionIcon> }
<Stack align="flex-start" justify="flex-start"> }
<Text style={{
cursor: 'pointer', useShallowEffect(() => {
display: 'flex', getData();
alignItems: 'center', }, []);
}}>
{v.name} const handleFileClick = (index: number) => {
</Text> if (selectedFiles.some((i: any) => i.id == isData[index].id)) {
</Stack> setSelectedFiles(
</Group> selectedFiles.filter((i: any) => i.id != isData[index].id)
<Text );
style={{ } else {
cursor: 'pointer', setSelectedFiles([
display: 'flex', ...selectedFiles,
alignItems: 'center', { id: isData[index].id, name: isData[index].name },
paddingLeft: 20, ]);
}} }
> };
{isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text> return (
</Flex> <Box pt={10}>
<Divider my={"md"} /> <Box mt={10}>
</Box> <ScrollArea
); h={{
})} base: "58vh",
</ScrollArea> xl: "58vh",
</Box> md: "57vh",
<Box h={60} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{ sm: "58vh",
zIndex: 999 }}
}}> type="scroll"
scrollbarSize={2}
scrollHideDelay={0}
scrollbars="y"
>
{loading ? (
Array(6)
.fill(null)
.map((_, i) => (
<Box mb={15} key={i}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Skeleton circle height={42} width={42} />
<Stack align="flex-start" justify="flex-start">
<Skeleton height={20} width={150} />
</Stack>
</Group>
<Skeleton height={20} width={20} />
</Flex>
<Divider my={"md"} />
</Box>
))
) : (
<Box> <Box>
<Button {isData.length == 0 ? (
c={"white"} <Box
bg={tema.get().utama} style={{
size="lg" display: "flex",
radius={30} justifyContent: "center",
fullWidth alignItems: "center",
onClick={() => onShare()} height: "30vh",
> }}
Simpan >
</Button> <Text c="dimmed" ta={"center"} fs={"italic"}>
Tidak ada Divisi
</Text>
</Box>
) : (
<Box>
{isData.map((v, i) => {
const isSelected = selectedFiles.some(
(i: any) => i?.id == v.id
);
return (
<Box mb={15} key={i} onClick={() => handleFileClick(i)}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<ActionIcon
variant="light"
color="gray"
radius="xl"
size={42}
p={10}
>
<FaUsers fontSize={40} />
</ActionIcon>
<Stack align="flex-start" justify="flex-start">
<Text
style={{
cursor: "pointer",
display: "flex",
alignItems: "center",
}}
>
{v.name}
</Text>
</Stack>
</Group>
<Text
style={{
cursor: "pointer",
display: "flex",
alignItems: "center",
paddingLeft: 20,
}}
>
{isSelected ? (
<FaCheck style={{ marginRight: 10 }} />
) : (
""
)}
</Text>
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
)}
</Box> </Box>
</Box> )}
</ScrollArea>
</Box> </Box>
) <Box
} h={60}
pos={"fixed"}
bottom={0}
w={{ base: "92%", md: "94%" }}
style={{
zIndex: 999,
}}
>
<Box>
<Button
c={"white"}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => onShare()}
>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

946
src/module/document/ui/navbar_document_division.tsx
View File

File diff suppressed because it is too large Load Diff

2
src/module/user/member/ui/tab_list_member.tsx
View File

@@ -116,7 +116,7 @@ export default function TabListMember() {
: :
dataMember.map((v, i) => { dataMember.map((v, i) => {
return ( return (
<Box key={i}> <Box key={i} pt={20}>
<Box onClick={() => { <Box onClick={() => {
router.push(`/member/${v.id}`) router.push(`/member/${v.id}`)
}}> }}>