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

Merge pull request #175 from bipproduction/amalia/02-september-24

Browse Source 
Amalia/02 september 24
This commit is contained in:
Amalia
2024-09-02 13:38:12 +08:00
committed by GitHub
parent f88d49e7d3 0d389e417d
commit cbd999678d
11 changed files with 610 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/module/task/ui/add_file_detail_task.tsx Normal file
View File

@@ -0,0 +1,189 @@
"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 { IListFileTask } from "../lib/type_task";
import ResultsFile from "./results_file";
import { FaTrash } from "react-icons/fa6";
import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task";
export default function AddFileDetailTask() {
const router = useRouter()
const [title, setTitle] = useState("")
const [openModal, setOpenModal] = useState(false)
const [fileForm, setFileForm] = useState<any[]>([])
const [listFile, setListFile] = useState<IListFileTask[]>([])
const param = useParams<{ id: string, detail: 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 funCekNamFileUploadTask(param.detail, 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 funAddFileTask(param.detail, fd)
if (response.success) {
toast.success(response.message)
setFileForm([])
setListFile([])
router.push(`/division/${param.id}/task/${param.detail}`)
} else {
toast.error(response.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal menambahkan tugas divisi, 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 (
title !== ""
) {
setOpenModal(true)
} else {
toast.error("Semua form harus diisi")
}
}}>
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>
</Box>
);
}

16
src/module/task/ui/create_task.tsx
View File

@@ -74,11 +74,11 @@ export default function CreateTask() {
if (response.success) {
toast.success(response.message)
// setTitle("")
// member.set([])
// setFileForm([])
// setListFile([])
// setDataTask([])
setTitle("")
member.set([])
setFileForm([])
setListFile([])
setDataTask([])
} else {
toast.error(response.message)
}
@@ -287,7 +287,7 @@ export default function CreateTask() {
onClose={() => setOpenDrawer(false)}
title={"Pilih File"}
>
<Flex justify={"space-around"}>
<Flex justify={"flex-start"} px={20}>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
@@ -322,7 +322,7 @@ export default function CreateTask() {
<Text ta={"center"}>diperangkat</Text>
</Box>
</Dropzone>
<Box onClick={() => router.push("/task/create?page=file-save")}>
{/* <Box onClick={() => router.push("/task/create?page=file-save")}>
<Box
bg={"#DCEED8"}
style={{
@@ -339,7 +339,7 @@ export default function CreateTask() {
Pilih file yang
</Text>
<Text ta={"center"}>sudah ada</Text>
</Box>
</Box> */}
</Flex>
</LayoutDrawer>

81
src/module/task/ui/detail_list_file_task.tsx
View File

@@ -1,18 +1,24 @@
'use client'
import { SkeletonDetailListTugasTask, WARNA } from "@/module/_global";
import { Box, Group, Skeleton, Text } from "@mantine/core";
import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from "@/module/_global";
import { Box, Flex, Group, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from "react-icons/bs";
import { funGetTaskDivisionById } from "../lib/api_task";
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from "react-icons/bs";
import { funDeleteFileTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataFileTaskDivision } from "../lib/type_task";
import { FaTrash } from "react-icons/fa6";
import LayoutModal from "@/module/_global/layout/layout_modal";
export default function ListFileDetailTask() {
const [isData, setData] = useState<IDataFileTaskDivision[]>([])
const [loading, setLoading] = useState(true)
const param = useParams<{ id: string, detail: string }>()
const [openDrawer, setOpenDrawer] = useState(false)
const [isOpenModal, setOpenModal] = useState(false)
const [idData, setIdData] = useState('')
const [nameData, setNameData] = useState('')
async function getOneData() {
try {
setLoading(true)
@@ -34,6 +40,25 @@ export default function ListFileDetailTask() {
getOneData();
}, [param.detail])
async function onDelete() {
try {
const res = await funDeleteFileTask(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}>
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
@@ -67,6 +92,12 @@ export default function ListFileDetailTask() {
padding: 10
}}
mb={10}
onClick={() => {
setNameData(item.name + '.' + item.extension)
setIdData(item.id)
setOpenDrawer(true)
}}
>
<Group>
{item.extension == "pdf" && <BsFiletypePdf size={25} />}
@@ -74,13 +105,53 @@ export default function ListFileDetailTask() {
{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/task/ui/navbar_detail_division_task.tsx
View File

@@ -8,7 +8,7 @@ import { funGetTaskDivisionById } from "../lib/api_task";
import { useShallowEffect } from "@mantine/hooks";
import { HiMenu } from "react-icons/hi";
import { IoAddCircle } from "react-icons/io5";
import { FaPencil, FaUsers } from "react-icons/fa6";
import { FaFileCirclePlus, FaPencil, FaUsers } from "react-icons/fa6";
import { MdCancel } from "react-icons/md";
export default function NavbarDetailDivisionTask() {
@@ -95,13 +95,15 @@ export default function NavbarDetailDivisionTask() {
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.detail + '/cancel') }}
onClick={() => {
router.push(param.detail + '/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>
@@ -118,6 +120,21 @@ export default function NavbarDetailDivisionTask() {
<Text c={WARNA.biruTua} ta='center'>Edit</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'}
style={{
cursor: 'pointer'
}}
onClick={() => { router.push(param.detail + '/cancel') }}
>
<Box>
<MdCancel size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Batal</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>