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

Merge branch 'join' into lukman/2-september-2024

Browse Source
This commit is contained in:
Amalia
2024-09-02 15:44:20 +08:00
committed by GitHub
parent 71451229c2 e1b878f888
commit 00be0b7bb5
19 changed files with 630 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/module/project/index.ts
View File

@@ -21,6 +21,7 @@ import AddDetailTaskProject from "./ui/add_detail_task_project";
import CancelProject from "./ui/cancel_project";
import AddMemberDetailProject from "./ui/add_member_detail_project";
import CreateProject from "./ui/create_project";
import AddFileDetailProject from "./ui/add_file_detail_project";
export { ViewProject }
export { ViewDateEndTask }
@@ -43,4 +44,5 @@ export { EditDetailTaskProject }
export { AddDetailTaskProject }
export { CancelProject }
export { AddMemberDetailProject }
export { CreateProject }
export { CreateProject }
export { AddFileDetailProject }

39
src/module/project/lib/api_project.ts
View File

@@ -6,16 +6,10 @@ export const funGetAllProject = async (path?: string) => {
return await response.json().catch(() => null);
}
export const funCreateProject = async (data: IFormProject) => {
if (data.title.length < 3)
return { success: false, message: 'Nama Kegiatan minimal 3 karakter' }
export const funCreateProject = async (data: FormData) => {
const response = await fetch(`/api/project`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
body: data,
});
return await response.json().catch(() => null);
}
@@ -126,4 +120,31 @@ export const funEditProject = async (path: string, data: { name: string }) => {
body: JSON.stringify(data),
});
return await response.json().catch(() => null);
}
}
export const funDeleteFileProject = async (path: string) => {
const response = await fetch(`/api/project/file/${path}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
return await response.json().catch(() => null);
};
export const funCekNamFileUploadProject = async (path: string, data: FormData) => {
const response = await fetch(`/api/project/file/${path}`, {
method: "PUT",
body: data,
});
return await response.json().catch(() => null);
};
export const funAddFileProject = async (path: string, data: FormData) => {
const response = await fetch(`/api/project/file/${path}`, {
method: "POST",
body: data,
});
return await response.json().catch(() => null);
};

1
src/module/project/lib/type_project.ts
View File

@@ -27,6 +27,7 @@ export interface IDataMemberProject {
name: string
email: string
img: string
position: string
}
export interface IFormProject {

195
src/module/project/ui/add_file_detail_project.tsx Normal file
View File

@@ -0,0 +1,195 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import {
Box,
Button,
Flex,
Group,
rem,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import React, { useRef, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { IoIosArrowDropright } from "react-icons/io";
import { Dropzone } from "@mantine/dropzone";
import _ from "lodash";
import ResultsFile from "./results_file";
import { FaTrash } from "react-icons/fa6";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { IListFileTaskProject } from "../lib/type_project";
import { funAddFileProject, funCekNamFileUploadProject } from "../lib/api_project";
export default function AddFileDetailProject() {
const router = useRouter()
const [openModal, setOpenModal] = useState(false)
const [fileForm, setFileForm] = useState<any[]>([])
const [listFile, setListFile] = useState<IListFileTaskProject[]>([])
const param = useParams<{ id: string }>()
const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [openDrawerFile, setOpenDrawerFile] = useState(false)
const openRef = useRef<() => void>(null)
function deleteFile(index: number) {
setListFile([...listFile.filter((val, i) => i !== index)])
setFileForm([...fileForm.filter((val, i) => i !== index)])
setOpenDrawerFile(false)
}
async function cekFileName(data: any) {
try {
const fd = new FormData();
fd.append(`file`, data);
const res = await funCekNamFileUploadProject(param.id, fd)
if (res.success) {
setFileForm([...fileForm, data])
setListFile([...listFile, { name: data.name, extension: data.type.split("/")[1] }])
} else {
toast.error(res.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal menambahkan file, coba lagi nanti")
}
}
async function onSubmit() {
try {
const fd = new FormData();
for (let i = 0; i < fileForm.length; i++) {
fd.append(`file${i}`, fileForm[i]);
}
const response = await funAddFileProject(param.id, fd)
console.group(response)
if (response.success) {
toast.success(response.message)
setFileForm([])
setListFile([])
router.push(`/project/${param.id}`)
} else {
toast.error(response.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal menambahkan file, coba lagi nanti");
}
}
return (
<Box>
<LayoutNavbarNew back="" title={"Tambah File"} menu />
<Box p={20}>
<Stack>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada file yang dipilih')
cekFileName(files[0])
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
onReject={(files) => {
return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}
>
</Dropzone>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
onClick={() => openRef.current?.()}
>
<Text>Upload File</Text>
<IoIosArrowDropright size={25} />
</Group>
</Stack>
{
listFile.length > 0 &&
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20
}}>
{
listFile.map((v, i) => {
return (
<Box key={i} onClick={() => {
setIndexDelFile(i)
setOpenDrawerFile(true)
}}>
<ResultsFile name={v.name} extension={v.extension} />
</Box>
)
})
}
</Box>
</Box>
}
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
color="white"
bg={WARNA.biruTua}
size="lg" radius={30}
fullWidth
onClick={() => {
if (fileForm.length > 0) {
setOpenModal(true)
} else {
toast.error("Silahkan pilih file yang akan diupload")
}
}}>
Simpan
</Button>
</Box>
<LayoutDrawer
opened={openDrawerFile}
onClose={() => setOpenDrawerFile(false)}
title={""}
>
<Stack pt={10}>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</LayoutDrawer>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan file?"
onYes={(val) => {
if (val) {
onSubmit()
}
setOpenModal(false)
}} />
</Box>
);
}

34
src/module/project/ui/create_project.tsx
View File

@@ -36,7 +36,7 @@ export default function CreateProject() {
const [openTugas, setOpenTugas] = useState(false)
const [dataTask, setDataTask] = useState<IFormDateProject[]>([])
const openRef = useRef<() => void>(null)
const [fileForm, setFileForm] = useState<FormData[]>([])
const [fileForm, setFileForm] = useState<any[]>([])
const [listFile, setListFile] = useState<IListFileTaskProject[]>([])
const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [indexDelTask, setIndexDelTask] = useState<number>(0)
@@ -91,16 +91,22 @@ export default function CreateProject() {
async function onSubmit() {
try {
const response = await funCreateProject({ title: body.title, idGroup: body.idGroup, task: dataTask, file: fileForm, member: memberValue })
const fd = new FormData();
for (let i = 0; i < fileForm.length; i++) {
fd.append(`file${i}`, fileForm[i]);
}
fd.append("data", JSON.stringify({
title: body.title,
idGroup: body.idGroup,
task: dataTask,
member: memberValue
}))
const response = await funCreateProject(fd)
if (response.success) {
toast.success(response.message)
// setBody({
// idGroup: "",
// title: "",
// desc: "",
// })
member.set([])
setFileForm([])
setListFile([])
@@ -111,7 +117,7 @@ export default function CreateProject() {
}
} catch (error) {
console.log(error)
toast.error("Gagal menambahkan tugas divisi, coba lagi nanti");
toast.error("Gagal menambahkan kegiatan, coba lagi nanti");
}
}
@@ -342,15 +348,13 @@ export default function CreateProject() {
onClose={() => setOpenDrawer(false)}
title={"Pilih File"}
>
<Flex justify={"space-around"}>
<Flex justify={"flex-start"} px={20}>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada file yang dipilih')
const fd = new FormData();
fd.append("file", files[0]);
setFileForm([...fileForm, fd])
setFileForm([...fileForm, files[0]])
setListFile([...listFile, { name: files[0].name, extension: files[0].type.split("/")[1] }])
}}
activateOnClick={false}
@@ -379,7 +383,7 @@ export default function CreateProject() {
<Text ta={"center"}>diperangkat</Text>
</Box>
</Dropzone>
<Box onClick={() => router.push("/project/create?page=file-save")}>
{/* <Box onClick={() => router.push("/project/create?page=file-save")}>
<Box
bg={"#DCEED8"}
style={{
@@ -396,7 +400,7 @@ export default function CreateProject() {
Pilih file yang
</Text>
<Text ta={"center"}>sudah ada</Text>
</Box>
</Box> */}
</Flex>
</LayoutDrawer>

83
src/module/project/ui/list_file_detail_project.tsx
View File

@@ -1,18 +1,24 @@
'use client'
import { WARNA } from '@/module/_global';
import { Box, Group, Skeleton, Text } from '@mantine/core';
import { LayoutDrawer, WARNA } from '@/module/_global';
import { Box, Flex, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project';
import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
import { useParams } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks';
import { IDataFileProject } from '../lib/type_project';
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { FaTrash } from 'react-icons/fa6';
export default function ListFileDetailProject() {
const [isData, setData] = useState<IDataFileProject[]>([])
const param = useParams<{ id: string }>()
const [loading, setLoading] = useState(true)
const [idData, setIdData] = useState('')
const [nameData, setNameData] = useState('')
const [openDrawer, setOpenDrawer] = useState(false)
const [isOpenModal, setOpenModal] = useState(false)
async function getOneData() {
try {
@@ -26,7 +32,7 @@ export default function ListFileDetailProject() {
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan file Kegiatan, coba lagi nanti");
toast.error("Gagal mendapatkan file kegiatan, coba lagi nanti");
} finally {
setLoading(false)
}
@@ -36,6 +42,25 @@ export default function ListFileDetailProject() {
getOneData();
}, [param.id])
async function onDelete() {
try {
const res = await funDeleteFileProject(idData);
if (res.success) {
toast.success(res.message)
getOneData()
setIdData("")
setOpenDrawer(false)
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal menghapus file, coba lagi nanti");
}
}
return (
<>
<Box pt={20}>
@@ -70,6 +95,12 @@ export default function ListFileDetailProject() {
padding: 10
}}
mb={10}
onClick={() => {
setNameData(item.name + '.' + item.extension)
setIdData(item.id)
setOpenDrawer(true)
}}
>
<Group>
{item.extension == "pdf" && <BsFiletypePdf size={25} />}
@@ -77,13 +108,53 @@ export default function ListFileDetailProject() {
{item.extension == "png" && <BsFiletypePng size={25} />}
{item.extension == "jpg" || item.extension == "jpeg" && <BsFiletypeJpg size={25} />}
{item.extension == "heic" && <BsFiletypeHeic size={25} />}
<Text>{item.name}</Text>
<Text>{item.name + '.' + item.extension}</Text>
</Group>
</Box>
)
})
}
</Box>
<LayoutDrawer opened={openDrawer} title={nameData} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => { }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsFileTextFill size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Lihat file</Text>
</Box>
</Flex>
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Hapus file</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
</LayoutDrawer>
<LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan"
onYes={(val) => {
if (val) {
onDelete()
}
setOpenModal(false)
}} />
</Box>
</>
);

25
src/module/project/ui/navbar_detail_project.tsx
View File

@@ -4,7 +4,7 @@ import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FaPencil, FaUsers } from 'react-icons/fa6';
import { FaFileCirclePlus, FaPencil, FaUsers } from 'react-icons/fa6';
import { HiMenu } from 'react-icons/hi';
import { IoAddCircle } from 'react-icons/io5';
import { MdCancel } from 'react-icons/md';
@@ -93,13 +93,15 @@ export default function NavbarDetailProject() {
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.id + '/cancel') }}
onClick={() => {
router.push(param.id + '/add-file')
}}
>
<Box>
<MdCancel size={30} color={WARNA.biruTua} />
<FaFileCirclePlus size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Batal</Text>
<Text c={WARNA.biruTua} ta='center'>Tambah file</Text>
</Box>
</Flex>
@@ -116,6 +118,21 @@ export default function NavbarDetailProject() {
<Text c={WARNA.biruTua} ta='center'>Edit</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.id + '/cancel') }}
>
<Box>
<MdCancel size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Batal</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>