upd: task divisi

Deskripsi:
- upload file
- view file

No Issues
This commit is contained in:
amel
2024-09-12 15:39:09 +08:00
parent e01dbed1eb
commit ad6bd2cbfb
9 changed files with 226 additions and 212 deletions

View File

@@ -1,6 +1,7 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import {
ActionIcon,
Avatar,
Box,
Button,
@@ -19,9 +20,10 @@ import { useParams, useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { IFormDateTask } from "../lib/type_task";
import moment from "moment";
import { HiChevronLeft } from "react-icons/hi2";
export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateTask) => void }) {
export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: boolean) => void, onSet: (val: IFormDateTask) => void }) {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const param = useParams<{ id: string }>()
@@ -37,7 +39,7 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
if (title == "")
return toast.error("Error! harus memasukkan judul tugas")
onClose(
onSet(
{
dateStart: value[0],
dateEnd: value[1],
@@ -49,7 +51,13 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
return (
<Box>
<LayoutNavbarNew back={`/division/${param.id}/task/create`} title={"Tanggal Tugas"} menu />
<LayoutNavbarNew state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
} title={"Tanggal Tugas"} menu />
<Box p={20}>
<Group
justify="center"
@@ -112,22 +120,22 @@ export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateT
/>
</Stack>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onSubmit() }}
>
Simpan
</Button>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${WARNA.bgWhite}`,
}}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onSubmit() }}
>
Simpan
</Button>
</Box>
</Box>
);
}

View File

@@ -76,7 +76,7 @@ export default function CreateTask() {
if (response.success) {
toast.success(response.message)
// setTitle("")
setTitle("")
member.set([])
setFileForm([])
setListFile([])
@@ -92,7 +92,7 @@ export default function CreateTask() {
}
if (openTugas) return <ViewDateEndTask onClose={(val) => {
if (openTugas) return <ViewDateEndTask onClose={(val) => { setOpenTugas(false) }} onSet={(val) => {
setDataTask([...dataTask, val])
setOpenTugas(false)
}} />;
@@ -148,7 +148,10 @@ export default function CreateTask() {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
onClick={() => setOpenDrawer(true)}
onClick={() =>
// setOpenDrawer(true)
openRef.current?.()
}
>
<Text>Upload File</Text>
<IoIosArrowDropright size={25} />
@@ -168,103 +171,103 @@ export default function CreateTask() {
</Box>
</Stack>
<Box pb={100}>
{
dataTask.length > 0 &&
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
{
dataTask.map((v, i) => {
return (
<Box key={i} onClick={() => {
setIndexDelTask(i)
setOpenDrawerTask(true)
}}>
<ResultsDateAndTask dateStart={v.dateStart} dateEnd={v.dateEnd} title={v.title} />
</Box>
)
})
}
</Box>
}
{
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
}}>
{
dataTask.length > 0 &&
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
{
listFile.map((v, i) => {
dataTask.map((v, i) => {
return (
<Box key={i} onClick={() => {
setIndexDelFile(i)
setOpenDrawerFile(true)
setIndexDelTask(i)
setOpenDrawerTask(true)
}}>
<ResultsFile name={v.name} extension={v.extension} />
<ResultsDateAndTask dateStart={v.dateStart} dateEnd={v.dateEnd} title={v.title} />
</Box>
)
})
}
</Box>
</Box>
}
}
{
member.length > 0 &&
<Box pt={30}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{member.get().map((v: any, i: any) => {
{
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}>
<Grid align='center' mt={10}
>
<Grid.Col span={9}>
<Group>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
<Box key={i} onClick={() => {
setIndexDelFile(i)
setOpenDrawerFile(true)
}}>
<ResultsFile name={v.name} extension={v.extension} />
</Box>
)
})
}
</Box>
</Box>
}
{
member.length > 0 &&
<Box pt={30}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{member.get().map((v: any, i: any) => {
return (
<Box key={i}>
<Grid align='center' mt={10}
>
<Grid.Col span={9}>
<Group>
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
<Box w={{
base: isMobile ? 130 : 140,
xl: 270
}}>
<Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
{v.name}
</Text>
</Box>
</Group>
</Grid.Col>
<Grid.Col span={3}>
<Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
Anggota
</Text>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
</Box>
);
})}
);
})}
</Box>
</Box>
</Box>
</Box>
</Box>
}
}
</Box>
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
@@ -290,50 +293,52 @@ export default function CreateTask() {
</Button>
</Box>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada file yang dipilih')
setFileForm([...fileForm, files[0]])
setListFile([...listFile, { name: files[0].name, extension: files[0].type.split("/")[1] }])
}}
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>
{/* Drawer pilih file */}
<LayoutDrawer
{/* <LayoutDrawer
opened={openDrawer}
onClose={() => setOpenDrawer(false)}
title={"Pilih File"}
>
<Flex justify={"flex-start"} px={20}>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada file yang dipilih')
setFileForm([...fileForm, files[0]])
setListFile([...listFile, { name: files[0].name, extension: files[0].type.split("/")[1] }])
}}
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')
}}
>
<Box onClick={() => openRef.current?.()}>
<Box
bg={"#DCEED8"}
style={{
border: `1px solid ${"#D6D8F6"}`,
padding: 20,
borderRadius: 10,
}}
>
<Center>
<BsFiletypeCsv size={40} />
</Center>
</Box>
<Text mt={10} ta={"center"}>
Pilih file
</Text>
<Text ta={"center"}>diperangkat</Text>
<Box onClick={() => openRef.current?.()}>
<Box
bg={"#DCEED8"}
style={{
border: `1px solid ${"#D6D8F6"}`,
padding: 20,
borderRadius: 10,
}}
>
<Center>
<BsFiletypeCsv size={40} />
</Center>
</Box>
</Dropzone>
{/* <Box onClick={() => router.push("/task/create?page=file-save")}>
<Text mt={10} ta={"center"}>
Pilih file
</Text>
<Text ta={"center"}>diperangkat</Text>
</Box>
<Box onClick={() => router.push("/task/create?page=file-save")}>
<Box
bg={"#DCEED8"}
style={{
@@ -350,9 +355,9 @@ export default function CreateTask() {
Pilih file yang
</Text>
<Text ta={"center"}>sudah ada</Text>
</Box> */}
</Box>
</Flex>
</LayoutDrawer>
</LayoutDrawer> */}

View File

@@ -26,7 +26,7 @@ import { globalMemberTask } from "../lib/val_task";
import { FaCheck } from "react-icons/fa6";
import { RiListCheck } from "react-icons/ri";
import { BsListCheck } from "react-icons/bs";
import { HiMagnifyingGlass } from "react-icons/hi2";
import { HiChevronLeft, HiMagnifyingGlass } from "react-icons/hi2";
import { IoArrowBackOutline, IoClose } from "react-icons/io5";
import { Carousel } from "@mantine/carousel";
@@ -119,21 +119,27 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) =>
async function fetchGetMember(val: string) {
setSearchQuery(val)
try {
const res = await funGetSearchMemberDivision('?search=' + val, param.id);
if (res.success) {
setData(res.data)
} else {
toast.error(res.message);
}
const res = await funGetSearchMemberDivision('?search=' + val, param.id);
if (res.success) {
setData(res.data)
} else {
toast.error(res.message);
}
} catch (error) {
console.error(error);
console.error(error);
}
}
}
return (
<Box>
<LayoutNavbarNew
// back=""
state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
}
title="Pilih Anggota"
menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
<HiMagnifyingGlass size={20} color='white' />

View File

@@ -18,6 +18,7 @@ export default function ListFileDetailTask() {
const [openDrawer, setOpenDrawer] = useState(false)
const [isOpenModal, setOpenModal] = useState(false)
const [idData, setIdData] = useState('')
const [idDataStorage, setIdDataStorage] = useState('')
const [nameStorage, setNameStorage] = useState('')
const [nameData, setNameData] = useState('')
const [isOpenModalView, setOpenModalView] = useState(false)
@@ -52,6 +53,7 @@ export default function ListFileDetailTask() {
toast.success(res.message)
getOneData()
setIdData("")
setIdDataStorage("")
setOpenDrawer(false)
} else {
toast.error(res.message);
@@ -102,6 +104,7 @@ export default function ListFileDetailTask() {
setExtension(item.extension)
setNameStorage(item.nameInStorage)
setIdData(item.id)
setIdDataStorage(item.idStorage)
setOpenDrawer(true)
}}
>
@@ -167,7 +170,7 @@ export default function ListFileDetailTask() {
setOpenModal(false)
}} />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={nameStorage + '.' + isExtension} extension={isExtension} fitur='task' />
<LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
</Box>
)
}