From e781387a229c1634d9d4bafe71740220d32a46f4 Mon Sep 17 00:00:00 2001 From: lukman Date: Fri, 20 Sep 2024 14:30:46 +0800 Subject: [PATCH] style : update style Deskripsi: - update drawer cut document - update share document - update member No Issue --- .../document/ui/drawer_cut_documents.tsx | 353 +++++-- .../document/ui/drawer_share_document.tsx | 322 +++--- .../document/ui/navbar_document_division.tsx | 946 ++++++++++++------ src/module/user/member/ui/tab_list_member.tsx | 2 +- 4 files changed, 1118 insertions(+), 505 deletions(-) diff --git a/src/module/document/ui/drawer_cut_documents.tsx b/src/module/document/ui/drawer_cut_documents.tsx index 48e6824..6ac47a7 100644 --- a/src/module/document/ui/drawer_cut_documents.tsx +++ b/src/module/document/ui/drawer_cut_documents.tsx @@ -1,162 +1,295 @@ -import { TEMA } from '@/module/_global'; -import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, 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 { 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'; +import { TEMA } from "@/module/_global"; +import { + Box, + Breadcrumbs, + Button, + Divider, + Flex, + Grid, + Group, + Modal, + ScrollArea, + Skeleton, + 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({ category, onChoosePath, data }: { category: string, data: IFormDetailMoreItem[], onChoosePath: (val: string) => void }) { +export default function DrawerCutDocuments({ + category, + onChoosePath, + data, +}: { + category: string; + data: IFormDetailMoreItem[]; + onChoosePath: (val: string) => void; +}) { const [opened, setOpened] = useState(false); - const param = useParams<{ id: string }>() - const [path, setPath] = useState('home') - const [dataDocument, setDataDocument] = useState([]) - const [dataJalur, setDataJalur] = useState([]) - const [valName, setValName] = useState('') - const tema = useHookstate(TEMA) - + const param = useParams<{ id: string }>(); + const [path, setPath] = useState("home"); + const [dataDocument, setDataDocument] = useState([]); + const [dataJalur, setDataJalur] = useState([]); + const [valName, setValName] = useState(""); + const tema = useHookstate(TEMA); + const [loading, setLoading] = useState(true); + const isMobile = useMediaQuery("(max-width: 369px)"); async function onCreateFolder() { try { const res = await funCreateFolder({ name: valName, path: path, - idDivision: param.id - }) + idDivision: param.id, + }); if (res.success) { - getOneData() + getOneData(); } else { - toast.error(res.message) + toast.error(res.message); } } catch (error) { console.error(error); toast.error("Gagal membuat folder baru, coba lagi nanti"); } - setOpened(false) + setOpened(false); } async function getOneData() { 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) { setDataDocument(respon.data); setDataJalur(respon.jalur); } else { toast.error(respon.message); } - + setLoading(false); } catch (error) { console.error(error); toast.error("Gagal mendapatkan item, coba lagi nanti"); + } finally { + setLoading(false); } } useShallowEffect(() => { - getOneData() - }, [param.id, path]) + getOneData(); + }, [param.id, path]); return ( - - + + - + - - } separatorMargin="md" mt="xs"> - { - dataJalur.map((v, i) => { - return ( - setPath(v.id)} key={i} style={{ cursor: 'pointer' }}> - {v.name} - - ) - }) - } + } + separatorMargin="md" + mt="xs" + > + {dataJalur.map((v, i) => { + return ( + setPath(v.id)} + key={i} + style={{ cursor: "pointer" }} + > + {v.name} + + ); + })} - - {dataDocument.map((v, i) => { - const found = data.some((i: any) => i.id == v.id) - return ( - - { - if (!found) { - setPath(v.id) - } - }}> - - - - - { - (found) ? - : - - } + + {loading ? ( + + + + + ) : null} + {loading ? ( + Array(6) + .fill(null) + .map((_, i) => ( + + + + + + + + + + + + + + + + + + + )) + ) : ( + + {dataDocument.length == 0 ? ( + + + Tidak ada Dokumen + + + ) : ( + + {dataDocument.map((v, i) => { + const found = data.some((i: any) => i.id == v.id); + return ( + + { + if (!found) { + setPath(v.id); + } + }} + > + + + + + {found ? ( + + ) : ( + + )} + + + + {v.category == "FOLDER" + ? v.name + : v.name + "." + v.extension} + + {found && ( + + Tidak bisa memilih folder ini + + )} + + + + + + - - {(v.category == "FOLDER") ? v.name : v.name + '.' + v.extension} - { - (found) && Tidak bisa memilih folder ini - } - - - - - - + ); + })} + + )} - ) - })} + )} - - - setOpened(false)} centered withCloseButton={false}> + setOpened(false)} + centered + withCloseButton={false} + > - Buat Folder + + Buat Folder + - + - + diff --git a/src/module/document/ui/drawer_share_document.tsx b/src/module/document/ui/drawer_share_document.tsx index 83dfcd6..99ab5ce 100644 --- a/src/module/document/ui/drawer_share_document.tsx +++ b/src/module/document/ui/drawer_share_document.tsx @@ -1,7 +1,23 @@ 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 { 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 { useParams } from "next/navigation"; import { useState } from "react"; @@ -12,124 +28,202 @@ import { funShareDocument } from "../lib/api_document"; import { useHookstate } from "@hookstate/core"; import { globalRefreshDocument } from "../lib/val_document"; -export default function DrawerShareDocument({ data }: { data: IShareDivision[] }) { - const [selectedFiles, setSelectedFiles] = useState([]) - const [isData, setData] = useState([]) - const param = useParams<{ id: string }>() - const refresh = useHookstate(globalRefreshDocument) - const tema = useHookstate(TEMA) +export default function DrawerShareDocument({ + data, +}: { + data: IShareDivision[]; +}) { + const [selectedFiles, setSelectedFiles] = useState([]); + const [isData, setData] = useState([]); + const param = useParams<{ id: string }>(); + const refresh = useHookstate(globalRefreshDocument); + const tema = useHookstate(TEMA); + const [loading, setLoading] = useState(true); - - - async function onShare() { - try { - 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 onShare() { + try { + if (selectedFiles.length == 0) { + return toast.error("Pilih divisi terlebih dahulu"); } - } - async function getData() { - try { - const response = await funGetListDivisionByIdDivision('?division=' + param.id) - if (response.success) { - setData(response.data.filter((i: any) => i.id != param.id)) - } else { - toast.error(response.message); - } - - } 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)) + const respon = await funShareDocument({ + dataDivision: selectedFiles, + dataItem: data, + }); + if (respon.success) { + toast.success(respon.message); + refresh.set(true); } 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 ( - - - - {isData.map((v, i) => { - const isSelected = selectedFiles.some((i: any) => i?.id == v.id); - return ( - handleFileClick(i)} > - - - - - - - - {v.name} - - - - - {isSelected ? : ""} - - - - - ); - })} - - - + async function getData() { + try { + setLoading(true); + const response = await funGetListDivisionByIdDivision( + "?division=" + param.id + ); + if (response.success) { + setData(response.data.filter((i: any) => i.id != param.id)); + } else { + toast.error(response.message); + } + setLoading(false); + } catch (error) { + toast.error("Gagal mendapatkan divisi, coba lagi nanti"); + console.error(error); + } finally { + setLoading(false); + } + } + + 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 { + setSelectedFiles([ + ...selectedFiles, + { id: isData[index].id, name: isData[index].name }, + ]); + } + }; + + return ( + + + + {loading ? ( + Array(6) + .fill(null) + .map((_, i) => ( + + + + + + + + + + + + + )) + ) : ( - + {isData.length == 0 ? ( + + + Tidak ada Divisi + + + ) : ( + + {isData.map((v, i) => { + const isSelected = selectedFiles.some( + (i: any) => i?.id == v.id + ); + return ( + handleFileClick(i)}> + + + + + + + + {v.name} + + + + + {isSelected ? ( + + ) : ( + "" + )} + + + + + ); + })} + + )} - + )} + - ) -} \ No newline at end of file + + + + + + + ); +} diff --git a/src/module/document/ui/navbar_document_division.tsx b/src/module/document/ui/navbar_document_division.tsx index 7a4069d..da1a501 100644 --- a/src/module/document/ui/navbar_document_division.tsx +++ b/src/module/document/ui/navbar_document_division.tsx @@ -1,66 +1,99 @@ -'use client' -import { LayoutDrawer, LayoutModalViewFile, LayoutNavbarNew, TEMA } from '@/module/_global'; -import { ActionIcon, Anchor, Box, Breadcrumbs, Button, Checkbox, Divider, Flex, Grid, Group, Indicator, Modal, rem, Select, SimpleGrid, Text, TextInput } from '@mantine/core'; -import React, { useState } from 'react'; -import { HiMenu } from 'react-icons/hi'; -import { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc'; -import { BsDownload, BsListCheck } from 'react-icons/bs'; -import { AiOutlineDelete } from 'react-icons/ai'; +"use client"; +import { + LayoutDrawer, + LayoutModalViewFile, + LayoutNavbarNew, + TEMA, +} from "@/module/_global"; +import { + ActionIcon, + Anchor, + Box, + Breadcrumbs, + Button, + Checkbox, + Divider, + Flex, + Grid, + Group, + Indicator, + Menu, + Modal, + rem, + Select, + SimpleGrid, + Skeleton, + Text, + TextInput, +} from "@mantine/core"; +import React, { useState } from "react"; +import { HiMenu } from "react-icons/hi"; +import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc"; +import { BsDownload, BsListCheck } from "react-icons/bs"; +import { AiOutlineDelete } from "react-icons/ai"; import { CgRename } from "react-icons/cg"; -import { LuShare2 } from 'react-icons/lu'; -import { MdClose, MdOutlineMoreHoriz } from 'react-icons/md'; -import LayoutModal from '@/module/_global/layout/layout_modal'; -import toast from 'react-hot-toast'; -import { useParams, useRouter, useSearchParams } from 'next/navigation'; -import DrawerMenuDocumentDivision from './drawer_menu_document_division'; -import DrawerMore from './drawer_more'; -import { funGetDivisionById } from '@/module/division_new'; -import { useMediaQuery, useShallowEffect } from '@mantine/hooks'; -import { funDeleteDocument, funGetAllDocument, funRenameDocument } from '../lib/api_document'; -import { IDataDocument, IJalurItem } from '../lib/type_document'; -import { useHookstate } from '@hookstate/core'; -import { globalRefreshDocument } from '../lib/val_document'; -import { RiListCheck } from 'react-icons/ri'; -import { GoChevronRight } from 'react-icons/go'; -import DrawerShareDocument from './drawer_share_document'; -import { FaShare } from 'react-icons/fa6'; +import { LuShare2 } from "react-icons/lu"; +import { MdClose, MdOutlineMoreHoriz } from "react-icons/md"; +import LayoutModal from "@/module/_global/layout/layout_modal"; +import toast from "react-hot-toast"; +import { useParams, useRouter, useSearchParams } from "next/navigation"; +import DrawerMenuDocumentDivision from "./drawer_menu_document_division"; +import DrawerMore from "./drawer_more"; +import { funGetDivisionById } from "@/module/division_new"; +import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; +import { + funDeleteDocument, + funGetAllDocument, + funRenameDocument, +} from "../lib/api_document"; +import { IDataDocument, IJalurItem } from "../lib/type_document"; +import { useHookstate } from "@hookstate/core"; +import { globalRefreshDocument } from "../lib/val_document"; +import { RiListCheck } from "react-icons/ri"; +import { GoChevronRight } from "react-icons/go"; +import DrawerShareDocument from "./drawer_share_document"; +import { FaShare } from "react-icons/fa6"; export default function NavbarDocumentDivision() { - const router = useRouter() - const param = useParams<{ id: string }>() - const [isOpenModalView, setOpenModalView] = useState(false) - const [isExtension, setExtension] = useState('') - const [idStorage, setIdStorage] = useState('') - const [name, setName] = useState('') - const [isOpen, setOpen] = useState(false) - const [isDelete, setIsDelete] = useState(false) - const [rename, setRename] = useState(false) - const [share, setShare] = useState(false) - const [more, setMore] = useState(false) - const [shareSelected, setShareSelected] = useState(false) - const [copyAllowed, setCopyAllowed] = useState(true) - const searchParams = useSearchParams() - const path = searchParams.get('path') - const [dataDocument, setDataDocument] = useState([]) - const [dataJalur, setDataJalur] = useState([]) - const refresh = useHookstate(globalRefreshDocument) - const [selectedFiles, setSelectedFiles] = useState([]) - const [selectAll, setSelectAll] = useState(false) - const [dariSelectAll, setDariSelectAll] = useState(false) - const isMobile = useMediaQuery('(max-width: 369px)') - const tema = useHookstate(TEMA) + const router = useRouter(); + const param = useParams<{ id: string }>(); + const [isOpenModalView, setOpenModalView] = useState(false); + const [isExtension, setExtension] = useState(""); + const [idStorage, setIdStorage] = useState(""); + const [name, setName] = useState(""); + const [isOpen, setOpen] = useState(false); + const [isDelete, setIsDelete] = useState(false); + const [rename, setRename] = useState(false); + const [share, setShare] = useState(false); + const [more, setMore] = useState(false); + const [shareSelected, setShareSelected] = useState(false); + const [copyAllowed, setCopyAllowed] = useState(true); + const searchParams = useSearchParams(); + const path = searchParams.get("path"); + const [dataDocument, setDataDocument] = useState([]); + const [dataJalur, setDataJalur] = useState([]); + const refresh = useHookstate(globalRefreshDocument); + const [selectedFiles, setSelectedFiles] = useState([]); + const [selectAll, setSelectAll] = useState(false); + const [dariSelectAll, setDariSelectAll] = useState(false); + const isMobile = useMediaQuery("(max-width: 369px)"); + const isMobile2 = useMediaQuery("(max-width: 496px)"); + const tema = useHookstate(TEMA); + const [loading, setLoading] = useState(true); const [bodyRename, setBodyRename] = useState({ - id: '', - name: '', - path: '', + id: "", + name: "", + path: "", idDivision: param.id, - extension: '' - }) + extension: "", + }); const handleCheckboxChange = (index: number) => { - setDariSelectAll(false) + setDariSelectAll(false); if (selectedFiles.some((i: any) => i.id == dataDocument[index].id)) { - setSelectedFiles(selectedFiles.filter((i: any) => i.id != dataDocument[index].id)) + setSelectedFiles( + selectedFiles.filter((i: any) => i.id != dataDocument[index].id) + ); } else { setSelectedFiles([ ...selectedFiles, @@ -71,38 +104,37 @@ export default function NavbarDocumentDivision() { extension: dataDocument[index].extension, category: dataDocument[index].category, share: dataDocument[index].share, - idStorage: dataDocument[index].idStorage - } - ]) + idStorage: dataDocument[index].idStorage, + }, + ]); } - }; function cek() { if (selectedFiles.length == dataDocument.length) { - setSelectAll(true) + setSelectAll(true); } else { - setSelectAll(false) + setSelectAll(false); } - const shareSelected = selectedFiles.some((i: any) => i?.share == true) + const shareSelected = selectedFiles.some((i: any) => i?.share == true); if (shareSelected) { - setShareSelected(true) + setShareSelected(true); } else { - setShareSelected(false) + setShareSelected(false); } - const cek = selectedFiles.some((i: any) => i?.category == 'FOLDER') + const cek = selectedFiles.some((i: any) => i?.category == "FOLDER"); if (cek || shareSelected || selectedFiles.length > 1) { - setCopyAllowed(false) + setCopyAllowed(false); } else { - setCopyAllowed(true) + setCopyAllowed(true); } } const handleSelectAll = () => { if (!selectAll) { - setDariSelectAll(false) + setDariSelectAll(false); for (let index = 0; index < dataDocument.length; index++) { if (!selectedFiles.some((i: any) => i.id == dataDocument[index].id)) { const newArr = { @@ -112,108 +144,107 @@ export default function NavbarDocumentDivision() { extension: dataDocument[index].extension, category: dataDocument[index].category, share: dataDocument[index].share, - idStorage: dataDocument[index].idStorage - } - setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr]) + idStorage: dataDocument[index].idStorage, + }; + setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr]); } } } else { - setDariSelectAll(true) + setDariSelectAll(true); setSelectedFiles([]); } - }; const handleBatal = () => { - setSelectedFiles([]) - setSelectAll(false) - setDariSelectAll(false) - } - + setSelectedFiles([]); + setSelectAll(false); + setDariSelectAll(false); + }; async function onConfirmDelete(val: boolean) { if (val) { try { - const respon = await funDeleteDocument(selectedFiles) + const respon = await funDeleteDocument(selectedFiles); if (respon.success) { - getOneData() + getOneData(); } else { - toast.error(respon.message) + toast.error(respon.message); } } catch (error) { - console.error(error) - toast.error("Gagal menghapus item, coba lagi nanti") + console.error(error); + toast.error("Gagal menghapus item, coba lagi nanti"); } - handleBatal() + handleBatal(); } - setIsDelete(false) + setIsDelete(false); } - - async function onRenameSubmit() { try { - const res = await funRenameDocument(bodyRename) + const res = await funRenameDocument(bodyRename); if (res.success) { - getOneData() - + getOneData(); } else { - toast.error(res.message) + toast.error(res.message); } } catch (error) { - console.error(error) - toast.error("Gagal mengganti nama item, coba lagi nanti") + console.error(error); + toast.error("Gagal mengganti nama item, coba lagi nanti"); } - setSelectedFiles([]) - setDariSelectAll(false) - setRename(false) + setSelectedFiles([]); + setDariSelectAll(false); + setRename(false); } async function getOneData() { try { - const respon = await funGetAllDocument("?division=" + param.id + "&path=" + path); + setLoading(true); + const respon = await funGetAllDocument( + "?division=" + param.id + "&path=" + path + ); if (respon.success) { setDataDocument(respon.data); setDataJalur(respon.jalur); + setLoading(false); } else { toast.error(respon.message); setDataDocument([]); setDataJalur([]); + setLoading(false); } - const res = await funGetDivisionById(param.id); if (res.success) { setName(res.data.division.name); } else { toast.error(res.message); } - } catch (error) { console.error(error); toast.error("Gagal mendapatkan item, coba lagi nanti"); + } finally { + setLoading(false); } } function resetRefresh() { - refresh.set(false) - setOpen(false) - setMore(false) - setShare(false) - handleBatal() + refresh.set(false); + setOpen(false); + setMore(false); + setShare(false); + handleBatal(); } useShallowEffect(() => { - cek() - }, [selectedFiles]) + cek(); + }, [selectedFiles]); useShallowEffect(() => { - getOneData() - resetRefresh() - }, [param.id, path, refresh.get()]) - + getOneData(); + resetRefresh(); + }, [param.id, path, refresh.get()]); function onChooseRename() { setBodyRename({ @@ -222,9 +253,8 @@ export default function NavbarDocumentDivision() { name: selectedFiles[0].name, path: selectedFiles[0].path, extension: selectedFiles[0].extension, - - }) - setRename(true) + }); + setRename(true); } const onDownload = async () => { @@ -253,85 +283,215 @@ export default function NavbarDocumentDivision() { {(selectedFiles.length > 0 || dariSelectAll) && ( <> - - - handleBatal()}> - + + + handleBatal()} + > + - {(selectedFiles.length > 0) ? selectedFiles.length + " item terpilih" : "Pilih Item"} - handleSelectAll()}> - { - (selectAll) ? - : - - } - + + {selectedFiles.length > 0 + ? selectedFiles.length + " item terpilih" + : "Pilih Item"} + + handleSelectAll()} + > + {selectAll ? ( + + ) : ( + + )} - + - { - if ((selectedFiles.length > 0 && copyAllowed)) { - onDownload() + if (selectedFiles.length > 0 && copyAllowed) { + onDownload(); } - }}> - 0 && copyAllowed) ? 'white' : '#656060'} /> - 0 && copyAllowed) ? 'white' : '#656060'}>Unduh + }} + > + 0 && copyAllowed + ? "white" + : "#656060" + } + /> + 0 && copyAllowed + ? "white" + : "#656060" + } + > + Unduh + - + 0 && !shareSelected) ? () => setIsDelete(true) : undefined} + onClick={ + selectedFiles.length > 0 && !shareSelected + ? () => setIsDelete(true) + : undefined + } > - 0 && !shareSelected) ? 'white' : '#656060'} /> + 0 && !shareSelected + ? "white" + : "#656060" + } + /> - 0 && !shareSelected) ? 'white' : '#656060'}>Hapus + 0 && !shareSelected + ? "white" + : "#656060" + } + > + Hapus + - + onChooseRename() : undefined + selectedFiles.length == 1 && !shareSelected + ? () => onChooseRename() + : undefined } > - + - Ganti Nama + + Ganti Nama + - + 0 && !shareSelected) ? () => setShare(true) : undefined + selectedFiles.length > 0 && !shareSelected + ? () => setShare(true) + : undefined } > - 0 && !shareSelected) ? 'white' : '#656060'} /> + 0 && !shareSelected + ? "white" + : "#656060" + } + /> - 0 && !shareSelected) ? 'white' : '#656060'}>Bagikan + 0 && !shareSelected + ? "white" + : "#656060" + } + > + Bagikan + - + 0 && !shareSelected) ? () => setMore(true) : undefined + selectedFiles.length > 0 && !shareSelected + ? () => setMore(true) + : undefined } > - 0 && !shareSelected) ? 'white' : '#656060'} /> + 0 && !shareSelected + ? "white" + : "#656060" + } + /> - 0 && !shareSelected) ? 'white' : '#656060'}>Lainnya + 0 && !shareSelected + ? "white" + : "#656060" + } + > + Lainnya + @@ -339,191 +499,403 @@ export default function NavbarDocumentDivision() { )} - setOpen(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings"> - + setOpen(true)} + variant="light" + bg={tema.get().bgIcon} + size="lg" + radius="lg" + aria-label="Settings" + > + } /> - } separatorMargin="md" mt="xs" style={{ cursor: 'pointer' }}> - { - dataJalur.map((v, i) => { + {isMobile2 ? ( + } + separatorMargin="md" + mt="xs" + style={{ cursor: "pointer" }} + > + {dataJalur.slice(0, 3).map((v, i) => { return ( - router.push('?path=' + v.id)} key={i}> - {v.name} - - ) - }) - } - - - {dataDocument.map((v, i) => { - const isSelected = selectedFiles.some((i: any) => i?.id == v.id); - return ( - - - - { - if (v.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) { - router.push('?path=' + v.id) - } else if (v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) { - setExtension(v.extension) - setIdStorage(v.idStorage) - setOpenModalView(true) - } - - }} - > - - - { - (v.share) ? - } size={25}> - { - (v.category == "FOLDER") ? - : - (v.extension == "pdf" || v.extension == "csv") ? - : - - } - - : - <> - { - (v.category == "FOLDER") ? - : - (v.extension == "pdf" || v.extension == "csv") ? - : - - } - - - } - - - - - - - { - if (v.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) { - router.push('?path=' + v.id) - } else if (v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) { - setExtension(v.extension) - setIdStorage(v.idStorage) - setOpenModalView(true) - } - + <> + + router.push("?path=" + v.id)} + key={i} + style={{ + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap", + maxWidth: "100%", }} > - - {(v.category == "FOLDER") ? v.name : v.name + '.' + v.extension} - {v.updatedAt} - - - handleCheckboxChange(i)} + {v.name} + + + + ); + })} + {dataJalur.length > 3 && ( + + + + + + + + {dataJalur.slice(3).map((v, i) => { + return ( + router.push("?path=" + v.id)} + > + {v.name} + + ); + })} + + + )} + + ) : ( + } + separatorMargin="md" + mt="xs" + style={{ cursor: "pointer" }} + > + {dataJalur.slice(0, 4).map((v, i) => { + return ( + router.push("?path=" + v.id)} + key={i} + truncate="end" + > + {v.name} + + ); + })} + {dataJalur.length > 4 && ( + + + + + + + + {dataJalur.slice(4).map((v, i) => { + return ( + router.push("?path=" + v.id)} + > + {v.name} + + ); + })} + + + )} + + )} + + {loading ? ( + + + + + + ) : null} + {loading ? ( + Array(6) + .fill(null) + .map((_, i) => ( + + + + + - - - + + + + + + + + + + + + + - - - ) - })} + )) + ) : ( + + {dataDocument.length == 0 ? ( + + + Tidak ada Dokumen + + + ) : ( + dataDocument.map((v, i) => { + const isSelected = selectedFiles.some( + (i: any) => i?.id == v.id + ); + return ( + + + + { + if ( + v.category == "FOLDER" && + selectedFiles.length == 0 && + !dariSelectAll + ) { + router.push("?path=" + v.id); + } else if ( + v.category == "FILE" && + selectedFiles.length == 0 && + !dariSelectAll + ) { + setExtension(v.extension); + setIdStorage(v.idStorage); + setOpenModalView(true); + } + }} + > + + + {v.share ? ( + } + size={25} + > + {v.category == "FOLDER" ? ( + + ) : v.extension == "pdf" || + v.extension == "csv" ? ( + + ) : ( + + )} + + ) : ( + <> + {v.category == "FOLDER" ? ( + + ) : v.extension == "pdf" || + v.extension == "csv" ? ( + + ) : ( + + )} + + )} + + + + + + { + if ( + v.category == "FOLDER" && + selectedFiles.length == 0 && + !dariSelectAll + ) { + router.push("?path=" + v.id); + } else if ( + v.category == "FILE" && + selectedFiles.length == 0 && + !dariSelectAll + ) { + setExtension(v.extension); + setIdStorage(v.idStorage); + setOpenModalView(true); + } + }} + > + + + {v.category == "FOLDER" + ? v.name + : v.name + "." + v.extension} + + {v.updatedAt} + + + handleCheckboxChange(i)} + /> + + + + + + + ); + }) + )} + + )} - - - setOpen(false)}> + setOpen(false)} + > - - {/* MODAL KONFIRMASI DELETE */} - setIsDelete(false)} + setIsDelete(false)} description="Apakah Anda yakin ingin menghapus item?" onYes={(val) => { - onConfirmDelete(val) - }} /> - - - + onConfirmDelete(val); + }} + /> {/* MODAL RENAME */} - setRename(false)} centered withCloseButton={false}> + setRename(false)} + centered + withCloseButton={false} + > - Ganti Nama Item + + Ganti Nama Item + setBodyRename({ ...bodyRename, name: e.target.value })} + onChange={(e) => + setBodyRename({ ...bodyRename, name: e.target.value }) + } /> - + - + - - - setShare(false)} size='lg'> + setShare(false)} + size="lg" + > - - - setMore(false)}> + setMore(false)}> - - setOpenModalView(false)} file={idStorage} extension={isExtension} fitur='dokumen' /> + setOpenModalView(false)} + file={idStorage} + extension={isExtension} + fitur="dokumen" + /> ); } diff --git a/src/module/user/member/ui/tab_list_member.tsx b/src/module/user/member/ui/tab_list_member.tsx index 4a664cb..1c01bae 100644 --- a/src/module/user/member/ui/tab_list_member.tsx +++ b/src/module/user/member/ui/tab_list_member.tsx @@ -116,7 +116,7 @@ export default function TabListMember() { : dataMember.map((v, i) => { return ( - + { router.push(`/member/${v.id}`) }}>