From 5758d1926728847990a933d3c40c06d5b6c3998c Mon Sep 17 00:00:00 2001 From: amel Date: Mon, 4 Nov 2024 13:48:30 +0800 Subject: [PATCH] fix: tugas divisi Deskripsi; - klo lagi loading, total = 0 - pencarian - ga bisa semua di klik saat tampilan list - pencarian saat tambah anggota tambah tugas - loading skeleton saat pencarian anggota - menghapus fitur pilih semua pada pilih anggota - mengganti label error pada edit judul tugas - memberikan loading pada saat upload file No Issues --- src/module/task/ui/add_file_detail_task.tsx | 12 +- src/module/task/ui/add_member_detail_task.tsx | 12 +- src/module/task/ui/create_task.tsx | 1 - src/module/task/ui/create_users_project.tsx | 118 ++++++++---------- src/module/task/ui/edit_task.tsx | 2 +- src/module/task/ui/list_division_task.tsx | 24 ++-- src/module/task/ui/tabs_division_task.tsx | 77 ++++++------ 7 files changed, 119 insertions(+), 127 deletions(-) diff --git a/src/module/task/ui/add_file_detail_task.tsx b/src/module/task/ui/add_file_detail_task.tsx index cce9d78..7bc6884 100644 --- a/src/module/task/ui/add_file_detail_task.tsx +++ b/src/module/task/ui/add_file_detail_task.tsx @@ -2,7 +2,7 @@ import { keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global"; import LayoutModal from "@/module/_global/layout/layout_modal"; import { useHookstate } from "@hookstate/core"; -import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, } from "@mantine/core"; +import { Box, Button, Flex, Group, Loader, rem, SimpleGrid, Stack, Text, } from "@mantine/core"; import { Dropzone } from "@mantine/dropzone"; import _ from "lodash"; import { useParams, useRouter } from "next/navigation"; @@ -27,6 +27,7 @@ export default function AddFileDetailTask() { const [openDrawerFile, setOpenDrawerFile] = useState(false) const tema = useHookstate(TEMA) const openRef = useRef<() => void>(null) + const [loadingUpload, setLoadingUpload] = useState(false) const [dataRealTime, setDataRealtime] = useWibuRealtime({ WIBU_REALTIME_TOKEN: keyWibu, project: "sdm" @@ -41,6 +42,7 @@ export default function AddFileDetailTask() { async function cekFileName(data: any) { try { + setLoadingUpload(true) const fd = new FormData(); fd.append(`file`, data); const res = await funCekNamFileUploadTask(param.detail, fd) @@ -53,6 +55,8 @@ export default function AddFileDetailTask() { } catch (error) { console.error(error) toast.error("Gagal menambahkan file, coba lagi nanti") + } finally { + setLoadingUpload(false) } } @@ -146,6 +150,12 @@ export default function AddFileDetailTask() { } + { + loadingUpload && + + + + } ([]) const openRef = useRef<() => void>(null) const [fileForm, setFileForm] = useState([]) - const [imgForm, setImgForm] = useState() const [listFile, setListFile] = useState([]) const [indexDelFile, setIndexDelFile] = useState(0) const [indexDelTask, setIndexDelTask] = useState(0) diff --git a/src/module/task/ui/create_users_project.tsx b/src/module/task/ui/create_users_project.tsx index ab44a50..93eb957 100644 --- a/src/module/task/ui/create_users_project.tsx +++ b/src/module/task/ui/create_users_project.tsx @@ -1,38 +1,20 @@ "use client" -import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from "@/module/_global"; -import { funGetDivisionById, funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new"; +import { LayoutNavbarNew, SkeletonList, TEMA } from "@/module/_global"; +import { funGetSearchMemberDivision, IDataMemberDivision } from "@/module/division_new"; import { useHookstate } from "@hookstate/core"; -import { - ActionIcon, - Avatar, - Box, - Button, - Center, - Divider, - Flex, - Grid, - Group, - Indicator, - rem, - Skeleton, - Stack, - Text, - TextInput, -} from "@mantine/core"; +import { Carousel } from "@mantine/carousel"; +import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from "@mantine/core"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import { useParams, useRouter } from "next/navigation"; -import React, { useState } from "react"; +import { useState } from "react"; import toast from "react-hot-toast"; -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 { FaCheck } from "react-icons/fa6"; import { HiChevronLeft, HiMagnifyingGlass } from "react-icons/hi2"; import { IoArrowBackOutline, IoClose } from "react-icons/io5"; -import { Carousel } from "@mantine/carousel"; +import { globalMemberTask } from "../lib/val_task"; export default function CreateUsersProject({ onClose }: { onClose: (val: any) => void }) { - const router = useRouter() const param = useParams<{ id: string }>() const [selectedFiles, setSelectedFiles] = useState([]) const [isData, setData] = useState([]) @@ -57,7 +39,6 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) => } else { toast.error(response.message) } - setLoading(false) } catch (error) { console.error(error) toast.error("Gagal mendapatkan anggota, coba lagi nanti"); @@ -122,6 +103,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) => async function fetchGetMember(val: string) { setSearchQuery(val) try { + setLoading(true) const res = await funGetSearchMemberDivision('?search=' + val, param.id); if (res.success) { setData(res.data) @@ -130,6 +112,8 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) => } } catch (error) { console.error(error); + } finally { + setLoading(false) } } @@ -228,7 +212,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) => - {loading ? + {/* {loading ? : @@ -237,7 +221,7 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) => - } + } */} {loading ? Array(8) @@ -249,47 +233,47 @@ export default function CreateUsersProject({ onClose }: { onClose: (val: any) => )) : (isData.length === 0) ? - - Tidak ada anggota - - : - isData.map((v, i) => { - const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); - return ( - handleFileClick(i)}> - - - - - - - - {v.name} + + Tidak ada anggota + + : + isData.map((v, i) => { + const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser); + return ( + handleFileClick(i)} mt={i===0 ? 100 : 0}> + + + + + + + + {v.name} + + {isSelected ? : null} - {isSelected ? : null} - - - - - + + + + + - - ); - }) + ); + }) } diff --git a/src/module/task/ui/edit_task.tsx b/src/module/task/ui/edit_task.tsx index 957f508..4b0e320 100644 --- a/src/module/task/ui/edit_task.tsx +++ b/src/module/task/ui/edit_task.tsx @@ -114,7 +114,7 @@ export default function EditTask() { onChange={(e) => { onValidation('title', e.target.value) }} error={ touched.title && ( - title == "" ? "Error! harus memasukkan judul tugas" : null + title == "" ? "Judul Tugas Tidak Boleh Kosong" : null ) } /> diff --git a/src/module/task/ui/list_division_task.tsx b/src/module/task/ui/list_division_task.tsx index 1ec13f5..2c2ba17 100644 --- a/src/module/task/ui/list_division_task.tsx +++ b/src/module/task/ui/list_division_task.tsx @@ -1,15 +1,15 @@ import { currentScroll, globalNotifPage, ReloadButtonTop, SkeletonList, TEMA } from "@/module/_global"; +import { useHookstate } from "@hookstate/core"; import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core"; -import { useParams, useRouter, useSearchParams } from "next/navigation"; -import { useEffect, useState } from "react"; -import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2"; -import { MdAccountCircle } from "react-icons/md"; -import { IDataTask } from "../lib/type_task"; -import { funGetAllTask } from "../lib/api_task"; -import toast from "react-hot-toast"; import { useMediaQuery, useShallowEffect } from "@mantine/hooks"; import _ from "lodash"; -import { useHookstate } from "@hookstate/core"; +import { useParams, useRouter, useSearchParams } from "next/navigation"; +import { useEffect, useState } from "react"; +import toast from "react-hot-toast"; +import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2"; +import { MdAccountCircle } from "react-icons/md"; +import { funGetAllTask } from "../lib/api_task"; +import { IDataTask } from "../lib/type_task"; export default function ListDivisionTask() { const [isList, setIsList] = useState(false) @@ -46,8 +46,6 @@ export default function ListDivisionTask() { } else { toast.error(response.message); } - - setLoading(false); } catch (error) { toast.error("Gagal mendapatkan tugas divisi, coba lagi nanti"); console.error(error); @@ -149,7 +147,7 @@ export default function ListDivisionTask() { Total Tugas - {totalData} + {loading ? 0 : totalData} {isList ? ( @@ -173,7 +171,7 @@ export default function ListDivisionTask() { isData.map((v, i) => { return ( - + router.push(`task/${v.id}`)}> - router.push(`task/${v.id}`)}> +
- - {dataStatus.map((item, index) => ( - - ))} - - + style={{ + display: "flex", + gap: "20px", + position: "relative", + overflowX: "scroll", + scrollbarWidth: "none", + maxWidth: "550px" + }} + > + + {dataStatus.map((item, index) => ( + + ))} + + )