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

Merge pull request #136 from bipproduction/amalia/21-agustus-24

Browse Source 
Amalia/21 agustus 24
This commit is contained in:
Amalia
2024-08-21 17:31:54 +08:00
committed by GitHub
parent a36fe88998 dfe9acfbfc
commit 159e8a3d28
8 changed files with 437 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/api/document/more/route.ts Normal file
View File

@@ -0,0 +1,17 @@
import { funGetUserByCookies } from "@/module/auth";
import { NextResponse } from "next/server";
// MOVE ITEM
export async function POST(request: Request) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
return NextResponse.json({ success: true, message: "Berhasil memindahkan item" }, { status: 200 });
} catch (error) {
console.log(error);
return NextResponse.json({ success: false, message: "Gagal memindahkan item, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
};

123
src/app/api/document/route.ts
View File

@@ -29,6 +29,21 @@ export async function GET(request: Request) {
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, data tidak ditemukan" }, { status: 404 });
}
if (path != "home" && path != "null" && path != "undefined" && path != "") {
const cekPath = await prisma.divisionDocumentFolderFile.count({
where: {
isActive: true,
id: String(path)
}
})
if (cekPath == 0) {
return NextResponse.json({ success: false, message: "Gagal mendapatkan item, data tidak ditemukan" }, { status: 404 });
}
}
const data = await prisma.divisionDocumentFolderFile.findMany({
where: {
@@ -63,11 +78,11 @@ export async function GET(request: Request) {
}))
return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: allData, }, { status: 200 });
return NextResponse.json({ success: true, message: "Berhasil mendapatkan item", data: allData, }, { status: 200 });
} catch (error) {
console.log(error);
return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
return NextResponse.json({ success: false, message: "Gagal mendapatkan item, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
}
@@ -107,6 +122,22 @@ export async function POST(request: Request) {
}
}
const nameFile = await prisma.divisionDocumentFolderFile.count({
where: {
name,
idDivision,
path,
extension: "folder",
category: "FOLDER",
isActive: true
}
})
if (nameFile > 0) {
return NextResponse.json({ success: false, message: "Gagal membuat folder baru, folder sudah ada" }, { status: 400 });
}
const data = await prisma.divisionDocumentFolderFile.create({
data: {
name,
@@ -123,4 +154,92 @@ export async function POST(request: Request) {
console.log(error);
return NextResponse.json({ success: false, message: "Gagal membuat folder, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
};
// RENAME ITEM
export async function PUT(request: Request) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const { name, id, path, idDivision, extension } = (await request.json());
const cekFile = await prisma.divisionDocumentFolderFile.count({
where: {
id: id,
isActive: true
}
})
if (cekFile == 0) {
return NextResponse.json({ success: false, message: "Gagal mendapatkan item, data tidak ditemukan" }, { status: 404 });
}
const nameFile = await prisma.divisionDocumentFolderFile.count({
where: {
name,
idDivision,
path,
extension,
isActive: true,
NOT: {
id: id
},
}
})
if (nameFile > 0) {
return NextResponse.json({ success: false, message: "Gagal mengubah nama item, item sudah ada" }, { status: 400 });
}
const update = await prisma.divisionDocumentFolderFile.update({
where: {
id: id
},
data: {
name,
}
})
return NextResponse.json({ success: true, message: "Berhasil mengubah nama item" }, { status: 200 });
} catch (error) {
console.log(error);
return NextResponse.json({ success: false, message: "Gagal mengubah nama item, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
};
// DELETE ITEM
export async function DELETE(request: Request) {
try {
const user = await funGetUserByCookies()
if (user.id == undefined) {
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
}
const data = await request.json()
for (let i = 0; i < data.length; i++) {
const id = data[i].id;
const cekFile = await prisma.divisionDocumentFolderFile.update({
where: {
id: id
},
data: {
isActive: false
}
})
}
return NextResponse.json({ success: true, message: "Berhasil menghapus item" }, { status: 200 });
} catch (error) {
console.log(error);
return NextResponse.json({ success: false, message: "Gagal menghapus item, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
}
};

27
src/module/document/lib/api_document.ts
View File

@@ -1,4 +1,4 @@
import { IFormFolder } from "./type_document";
import { IFormEditItem, IFormFolder } from "./type_document";
export const funGetAllDocument = async (path?: string) => {
const response = await fetch(`/api/document${(path) ? path : ''}`, { next: { tags: ['document'] } });
@@ -18,4 +18,29 @@ export const funCreateFolder = async (data: IFormFolder) => {
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
};
export const funRenameDocument = async (data: IFormEditItem) => {
if (data.name == "")
return { success: false, message: 'Nama item tidak boleh kosong' }
const response = await fetch("/api/document", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
};
export const funDeleteDocument = async (data: []) => {
const response = await fetch("/api/document", {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
};

9
src/module/document/lib/type_document.ts
View File

@@ -14,4 +14,13 @@ export interface IFormFolder {
name: string;
path: string;
idDivision: string
}
export interface IFormEditItem {
id: string
name: string
path: string
idDivision: string
extension: string
}

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

@@ -2,39 +2,63 @@ import { WARNA } from '@/module/_global';
import { Box, Button, Divider, Flex, Grid, Group, Modal, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FcFolder } from 'react-icons/fc';
const dataDocuments = [
{
id: 1,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={40} />
},
{
id: 2,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={40} />
},
{
id: 3,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={40} />
},
]
import { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc';
import { funCreateFolder, funGetAllDocument } from '../lib/api_document';
import { useParams } from 'next/navigation';
import { IDataDocument } from '../lib/type_document';
import { useShallowEffect } from '@mantine/hooks';
export default function DrawerCutDocuments() {
const [opened, setOpened] = useState(false);
function onCreate(val: boolean) {
if (val) {
toast.success("Sukses! Membuat Folder");
const param = useParams<{ id: string }>()
const [path, setPath] = useState('home')
const [dataDocument, setDataDocument] = useState<IDataDocument[]>([])
const [valName, setValName] = useState('')
async function onCreateFolder() {
try {
const res = await funCreateFolder({
name: valName,
path: path,
idDivision: param.id
})
if (res.success) {
getOneData()
} else {
toast.error(res.message)
}
} catch (error) {
console.error(error);
toast.error("Gagal membuat folder baru, coba lagi nanti");
}
setOpened(false)
}
async function getOneData() {
try {
const respon = await funGetAllDocument("?division=" + param.id + "&path=" + path);
if (respon.success) {
setDataDocument(respon.data);
} else {
toast.error(respon.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan item, coba lagi nanti");
}
}
useShallowEffect(() => {
getOneData()
}, [param.id, path])
return (
<Box>
<Box h={60} pos={"fixed"} bottom={0} w={{base: "92%", md: "94%"}} style={{
<Box h={60} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{
zIndex: 999
}}>
<Grid justify='center'>
@@ -42,34 +66,42 @@ export default function DrawerCutDocuments() {
<Button variant="subtle" fullWidth color={WARNA.biruTua} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button>
</Grid.Col>
<Grid.Col span={6}>
<Button variant="filled" fullWidth color={WARNA.biruTua} radius={"xl"}>PIDAH</Button>
<Button variant="filled" fullWidth color={WARNA.biruTua} radius={"xl"}>PINDAH</Button>
</Grid.Col>
</Grid>
</Box>
<Box p={10} pb={60}>
{dataDocuments.map((v, i) => {
return (
<Box key={i}>
<Box mt={10} mb={10}>
<Grid align='center'>
<Grid.Col span={12}>
<Group gap={20}>
<Box>
{v.icon}
</Box>
<Flex direction={'column'}>
<Text>{v.name}</Text>
<Text fz={10}>{v.date}</Text>
</Flex>
</Group>
</Grid.Col>
</Grid>
</Box>
<Divider size="xs" />
{dataDocument.map((v, i) => {
return (
<Box key={i}>
<Box mt={10} mb={10} onClick={() => setPath(v.id)}>
<Grid align='center'>
<Grid.Col span={12}>
<Group gap={20}>
<Box>
{
(v.category == "FOLDER") ?
<FcFolder size={60} /> :
(v.extension == "pdf" || v.extension == "csv") ?
<FcDocument size={60} /> :
<FcImageFile size={60} />
}
</Box>
<Flex direction={'column'}>
<Text>{(v.category == "FOLDER") ? v.name : v.name + '.' + v.extension}</Text>
</Flex>
</Group>
</Grid.Col>
</Grid>
</Box>
)
})}
<Divider size="xs" />
</Box>
)
})}
</Box>
<Modal styles={{
body: {
borderRadius: 20
@@ -92,7 +124,9 @@ export default function DrawerCutDocuments() {
}}
size="md"
radius={10}
placeholder="Buat Folder Baru"
placeholder="Nama folder"
value={valName}
onChange={(e) => setValName(e.target.value)}
/>
</Box>
<Grid mt={40}>
@@ -100,7 +134,7 @@ export default function DrawerCutDocuments() {
<Button variant="subtle" fullWidth color='#969494' onClick={() => setOpened(false)}>Batalkan</Button>
</Grid.Col>
<Grid.Col span={6}>
<Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onCreate(true)}>Membuat</Button>
<Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={() => onCreateFolder()}>Membuat</Button>
</Grid.Col>
</Grid>
</Box>

12
src/module/document/ui/drawer_menu_document_division.tsx
View File

@@ -29,17 +29,17 @@ export default function DrawerMenuDocumentDivision() {
async function onCreateFolder() {
try {
const res = await funCreateFolder(bodyFolder)
if (res.success) {
refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false)
} else {
toast.error(res.message);
if (!res.success) {
toast.error(res.message)
}
} catch (error) {
console.error(error);
toast.error("Gagal membuat folder baru, coba lagi nanti");
}
refresh.set(true)
setOpenModal(false)
setOpenDrawerDocument(false)
}
return (

5
src/module/document/ui/drawer_more.tsx
View File

@@ -32,9 +32,14 @@ export default function DrawerMore() {
</Flex>
</SimpleGrid>
</Stack>
<LayoutDrawer opened={isCut} onClose={() => setIsCut(false)} title={'Pilih Lokasi Pemindahan'} size="lg">
<DrawerCutDocuments />
</LayoutDrawer>
<LayoutDrawer opened={isCopy} onClose={() => setIsCopy(false)} title={'Pilih Lokasi Salin'} size="lg">
<DrawerCopyDocuments />
</LayoutDrawer>

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

@@ -4,11 +4,11 @@ import { ActionIcon, Box, Button, Checkbox, Divider, Flex, Grid, Group, Modal, S
import React, { useState } from 'react';
import { HiMenu } from 'react-icons/hi';
import { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc';
import { BsDownload } from 'react-icons/bs';
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 { MdOutlineMoreHoriz } from 'react-icons/md';
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';
@@ -16,13 +16,13 @@ import DrawerMenuDocumentDivision from './drawer_menu_document_division';
import DrawerMore from './drawer_more';
import { funGetDivisionById } from '@/module/division_new';
import { useShallowEffect } from '@mantine/hooks';
import { funGetAllDocument } from '../lib/api_document';
import { funDeleteDocument, funGetAllDocument, funRenameDocument } from '../lib/api_document';
import { IDataDocument } from '../lib/type_document';
import { useHookstate } from '@hookstate/core';
import { globalRefreshDocument } from '../lib/val_document';
import { RiListCheck } from 'react-icons/ri';
export default function NavbarDocumentDivision() {
const [isChecked, setIsChecked] = useState(false);
const router = useRouter()
const param = useParams<{ id: string }>()
const [name, setName] = useState('')
@@ -35,22 +35,109 @@ export default function NavbarDocumentDivision() {
const path = searchParams.get('path')
const [dataDocument, setDataDocument] = useState<IDataDocument[]>([])
const refresh = useHookstate(globalRefreshDocument)
const [selectedFiles, setSelectedFiles] = useState<any>([])
const [selectAll, setSelectAll] = useState(false)
const [dariSelectAll, setDariSelectAll] = useState(false)
const [bodyRename, setBodyRename] = useState({
id: '',
name: '',
path: '',
idDivision: param.id,
extension: ''
})
const handleCheckboxChange = (index: number) => {
setDariSelectAll(false)
if (selectedFiles.some((i: any) => i.id == dataDocument[index].id)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.id != dataDocument[index].id))
} else {
setSelectedFiles([
...selectedFiles,
{
id: dataDocument[index].id,
name: dataDocument[index].name,
path: dataDocument[index].path,
extension: dataDocument[index].extension
}
])
}
const handleCheckboxChange = () => {
setIsChecked(!isChecked);
};
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data dihapus");
function cek() {
if (selectedFiles.length == dataDocument.length) {
setSelectAll(true)
} else {
setSelectAll(false)
}
}
const handleSelectAll = () => {
if (!selectAll) {
setDariSelectAll(false)
for (let index = 0; index < dataDocument.length; index++) {
if (!selectedFiles.some((i: any) => i.id == dataDocument[index].id)) {
const newArr = {
id: dataDocument[index].id,
name: dataDocument[index].name,
path: dataDocument[index].path,
extension: dataDocument[index].extension
}
setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr])
}
}
} else {
setDariSelectAll(true)
setSelectedFiles([]);
}
};
const handleBatal = () => {
setSelectedFiles([])
setSelectAll(false)
setDariSelectAll(false)
}
async function onConfirmDelete(val: boolean) {
if (val) {
try {
const respon = await funDeleteDocument(selectedFiles)
if (respon.success) {
getOneData()
} else {
toast.error(respon.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal menghapus item, coba lagi nanti")
}
handleBatal()
}
setIsDelete(false)
}
function onEdit(val: boolean) {
if (val) {
toast.success("Sukses! Edit Data");
async function onRenameSubmit() {
try {
const res = await funRenameDocument(bodyRename)
if (res.success) {
getOneData()
} else {
toast.error(res.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal mengganti nama item, coba lagi nanti")
}
setSelectedFiles([])
setDariSelectAll(false)
setRename(false)
}
@@ -72,7 +159,7 @@ export default function NavbarDocumentDivision() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan divisi, coba lagi nanti");
toast.error("Gagal mendapatkan item, coba lagi nanti");
}
}
@@ -81,21 +168,48 @@ export default function NavbarDocumentDivision() {
setOpen(false)
}
useShallowEffect(() => {
cek()
}, [selectedFiles])
useShallowEffect(() => {
getOneData()
resetRefresh()
}, [param.id, path, refresh.get()])
function onChooseRename() {
setBodyRename({
...bodyRename,
id: selectedFiles[0].id,
name: selectedFiles[0].name,
path: selectedFiles[0].path,
extension: selectedFiles[0].extension,
})
setRename(true)
}
return (
<Box>
{isChecked && (
{(selectedFiles.length > 0 || dariSelectAll) && (
<>
<Box h={90} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} top={0} style={{
zIndex: 999,
}}>
<Flex justify={'space-between'} ml={30} mr={30} align={'center'} h={"100%"}>
<Text c={'white'}>Dibatalkan</Text>
<Text c={'white'}>Pilih Semua</Text>
<ActionIcon variant="transparent" aria-label="Settings" onClick={() => handleBatal()}>
<MdClose size={25} color='white' />
</ActionIcon>
<Text fz={15} c={'white'}>{(selectedFiles.length > 0) ? selectedFiles.length + " item terpilih" : "Pilih Item"}</Text>
<ActionIcon variant="transparent" aria-label="Settings" onClick={() => handleSelectAll()}>
{
(selectAll) ?
<RiListCheck size={25} color='white' /> :
<BsListCheck size={25} color='white' />
}
</ActionIcon>
</Flex>
</Box>
<Box h={70} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} bottom={0} style={{
@@ -104,24 +218,28 @@ export default function NavbarDocumentDivision() {
<Flex justify={"center"} align={"center"} h={"100%"} w={"100%"}>
<SimpleGrid cols={{ base: 5, sm: 5, lg: 5 }}>
<Flex justify={'center'} align={'center'} direction={'column'}>
<BsDownload size={20} color='white' />
<Text fz={12} c={'white'}>Unduh</Text>
<BsDownload size={20} color={(selectedFiles.length > 0) ? 'white' : 'grey'} />
<Text fz={12} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Unduh</Text>
</Flex>
<Flex onClick={() => setIsDelete(true)} justify={'center'} align={'center'} direction={'column'}>
<AiOutlineDelete size={20} color='white' />
<Text fz={12} c={'white'}>Hapus</Text>
<AiOutlineDelete size={20} color={(selectedFiles.length > 0) ? 'white' : 'grey'} />
<Text fz={12} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Hapus</Text>
</Flex>
<Flex onClick={() => setRename(true)} justify={'center'} align={'center'} direction={'column'}>
<CgRename size={20} color='white' />
<Text fz={12} c={'white'}>Ganti Name</Text>
<Flex onClick={() => {
if (selectedFiles.length == 1) {
onChooseRename()
}
}} justify={'center'} align={'center'} direction={'column'}>
<CgRename size={20} color={(selectedFiles.length == 1) ? 'white' : 'grey'} />
<Text fz={12} c={(selectedFiles.length == 1) ? 'white' : 'grey'}>Ganti Nama</Text>
</Flex>
<Flex onClick={() => setShare(true)} justify={'center'} align={'center'} direction={'column'}>
<LuShare2 size={20} color='white' />
<Text fz={12} c={'white'}>Bagikan</Text>
<LuShare2 size={20} color={(selectedFiles.length > 0) ? 'white' : 'grey'} />
<Text fz={12} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Bagikan</Text>
</Flex>
<Flex onClick={() => setMore(true)} justify={'center'} align={'center'} direction={'column'}>
<MdOutlineMoreHoriz size={20} color='white' />
<Text fz={12} c={'white'}>Lainnya</Text>
<MdOutlineMoreHoriz size={20} color={(selectedFiles.length > 0) ? 'white' : 'grey'} />
<Text fz={12} c={(selectedFiles.length > 0) ? 'white' : 'grey'}>Lainnya</Text>
</Flex>
</SimpleGrid>
</Flex>
@@ -136,9 +254,12 @@ export default function NavbarDocumentDivision() {
</ActionIcon>
}
/>
<Box>
<Box p={20} pb={60}>
{dataDocument.map((v, i) => {
const isSelected = selectedFiles.some((i: any) => i?.id == v.id);
return (
<Box key={i}>
<Box mt={10} mb={10}>
@@ -171,8 +292,8 @@ export default function NavbarDocumentDivision() {
color="teal"
radius="lg"
size="md"
checked={isChecked}
onChange={handleCheckboxChange}
checked={isSelected}
onChange={() => handleCheckboxChange(i)}
/>
</Group>
</Grid.Col>
@@ -192,9 +313,18 @@ export default function NavbarDocumentDivision() {
</LayoutDrawer>
{/* MODAL KONFIRMASI DELETE */}
<LayoutModal opened={isDelete} onClose={() => setIsDelete(false)}
description="Apakah Anda yakin ingin menghapus data?"
onYes={(val) => { onTrue(val) }} />
description="Apakah Anda yakin ingin menghapus item?"
onYes={(val) => {
onConfirmDelete(val)
}} />
{/* MODAL RENAME */}
<Modal styles={{
body: {
borderRadius: 20
@@ -205,7 +335,7 @@ export default function NavbarDocumentDivision() {
}
}} opened={rename} onClose={() => setRename(false)} centered withCloseButton={false}>
<Box p={20}>
<Text ta={"center"} fw={"bold"}>Edit Folder</Text>
<Text ta={"center"} fw={"bold"}>Ganti Nama Item</Text>
<Box mt={20} mb={20}>
<TextInput
styles={{
@@ -217,7 +347,9 @@ export default function NavbarDocumentDivision() {
}}
size="md"
radius={10}
placeholder="Buat Folder Baru"
placeholder="Nama item"
value={bodyRename.name}
onChange={(e) => setBodyRename({ ...bodyRename, name: e.target.value })}
/>
</Box>
<Grid mt={40}>
@@ -225,11 +357,14 @@ export default function NavbarDocumentDivision() {
<Button variant="subtle" fullWidth color='#969494' onClick={() => setRename(false)}>Batalkan</Button>
</Grid.Col>
<Grid.Col span={6}>
<Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onEdit(true)}>Edit</Button>
<Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onRenameSubmit()}>Simpan</Button>
</Grid.Col>
</Grid>
</Box>
</Modal>
<LayoutDrawer opened={share} title={'Bagikan'} onClose={() => setShare(false)} size='lg'>
<Box pt={10}>
<Select