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

upd: kegiatan

Browse Source 
Deskripsi:
- update realtime refresh
- update realtime per aksi per kegiatan

No Issues
This commit is contained in:
amel
2024-10-15 12:49:19 +08:00
parent b5c8004594
commit ee43572183
11 changed files with 349 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,15 @@
"use client"
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funCreateDetailProject } from '../lib/api_project';
import { Box, Button, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
import { DatePicker } from '@mantine/dates';
import moment from 'moment';
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, Group, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { DatePicker } from '@mantine/dates';
import moment from 'moment';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { useWibuRealtime } from 'wibu-realtime';
import { funCreateDetailProject } from '../lib/api_project';
export default function AddDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -20,6 +21,10 @@ export default function AddDetailTaskProject() {
const [touched, setTouched] = useState({
name: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function onVerification() {
if (value[0] == null || value[1] == null)
@@ -40,6 +45,10 @@ export default function AddDetailTaskProject() {
})
if (res.success) {
setDataRealtime([{
category: "project-detail-task",
id: param.id,
}])
toast.success(res.message)
setOpenModal(false)
router.push(`/project/${param.id}`)

39
src/module/project/ui/add_file_detail_project.tsx
View File

@@ -1,28 +1,19 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew } 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 { 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 { Dropzone } from "@mantine/dropzone";
import _ from "lodash";
import ResultsFile from "./results_file";
import { useParams, useRouter } from "next/navigation";
import { useRef, useState } from "react";
import toast from "react-hot-toast";
import { FaTrash } from "react-icons/fa6";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { IListFileTaskProject } from "../lib/type_project";
import { IoIosArrowDropright } from "react-icons/io";
import { funAddFileProject, funCekNamFileUploadProject } from "../lib/api_project";
import { TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { IListFileTaskProject } from "../lib/type_project";
import ResultsFile from "./results_file";
import { useWibuRealtime } from "wibu-realtime";
export default function AddFileDetailProject() {
@@ -35,6 +26,10 @@ export default function AddFileDetailProject() {
const [openDrawerFile, setOpenDrawerFile] = useState(false)
const tema = useHookstate(TEMA)
const openRef = useRef<() => void>(null)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function deleteFile(index: number) {
setListFile([...listFile.filter((val, i) => i !== index)])
@@ -70,6 +65,10 @@ export default function AddFileDetailProject() {
const response = await funAddFileProject(param.id, fd)
console.group(response)
if (response.success) {
setDataRealtime([{
category: "project-detail-file",
id: param.id,
}])
toast.success(response.message)
setFileForm([])
setListFile([])

31
src/module/project/ui/add_member_detail_project.tsx
View File

@@ -1,18 +1,19 @@
"use client"
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_project';
import toast from 'react-hot-toast';
import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
import { FaCheck } from 'react-icons/fa6';
import { keyWibu, LayoutNavbarNew, SkeletonList, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/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 { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
import { Carousel } from '@mantine/carousel';
import { useHookstate } from '@hookstate/core';
import { useWibuRealtime } from 'wibu-realtime';
import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_project';
export default function AddMemberDetailProject() {
const router = useRouter()
@@ -27,6 +28,10 @@ export default function AddMemberDetailProject() {
const [searchQuery, setSearchQuery] = useState('')
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getData() {
@@ -99,6 +104,10 @@ export default function AddMemberDetailProject() {
try {
const res = await funAddMemberProject(param.id, { member: selectedFiles });
if (res.success) {
setDataRealtime([{
category: "project-detail-anggota",
id: param.id,
}])
toast.success(res.message)
router.back()
} else {

21
src/module/project/ui/cancel_project.tsx
View File

@@ -1,12 +1,13 @@
"use client"
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funCancelProject } from '../lib/api_project';
import { Box, Button, rem, Stack, Textarea } from '@mantine/core';
import { LayoutNavbarNew, TEMA} from '@/module/_global';
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, rem, Stack, Textarea } from '@mantine/core';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { useWibuRealtime } from 'wibu-realtime';
import { funCancelProject } from '../lib/api_project';
export default function CancelProject() {
const router = useRouter()
@@ -17,6 +18,10 @@ export default function CancelProject() {
const [touched, setTouched] = useState({
reason: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
function onVerification() {
if (alasan == "")
@@ -29,6 +34,10 @@ export default function CancelProject() {
try {
const res = await funCancelProject(param.id, { reason: alasan })
if (res.success) {
setDataRealtime([{
category: "project-detail-status",
id: param.id,
}])
toast.success(res.message)
router.push("/project")
} else {

11
src/module/project/ui/edit_task_project.tsx
View File

@@ -1,5 +1,5 @@
"use client"
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Button, rem, Skeleton, Stack, TextInput } from '@mantine/core';
@@ -8,6 +8,7 @@ import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { funEditProject, funGetOneProjectById } from '../lib/api_project';
import { useWibuRealtime } from 'wibu-realtime';
export default function EditTaskProject() {
const router = useRouter()
@@ -19,11 +20,19 @@ export default function EditTaskProject() {
const [touched, setTouched] = useState({
name: false,
});
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function onSubmit() {
try {
const res = await funEditProject(param.id, { name })
if (res.success) {
setDataRealtime([{
category: "project-detail",
id: param.id,
}])
toast.success(res.message)
router.push("./")
} else {

57
src/module/project/ui/list_anggota_detail_project.tsx
View File

@@ -1,16 +1,17 @@
'use client'
import { globalRole, LayoutDrawer, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global';
import { Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
import toast from 'react-hot-toast';
import { useParams, useRouter } from 'next/navigation';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataMemberProject } from '../lib/type_project';
import { FaUser } from 'react-icons/fa6';
import { IoIosCloseCircle } from 'react-icons/io';
import { globalRole, keyWibu, LayoutDrawer, SkeletonList, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { FaUser } from 'react-icons/fa6';
import { IoIosCloseCircle } from 'react-icons/io';
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
import { IDataMemberProject } from '../lib/type_project';
export default function ListAnggotaDetailProject() {
@@ -25,6 +26,11 @@ export default function ListAnggotaDetailProject() {
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const isMobile2 = useMediaQuery("(max-width: 438px)");
const isMobile = useMediaQuery('(max-width: 369px)');
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneDataCancel() {
try {
@@ -45,9 +51,9 @@ export default function ListAnggotaDetailProject() {
getOneDataCancel();
}, [param.id])
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetOneProjectById(param.id, 'member');
if (res.success) {
setData(res.data)
@@ -64,7 +70,7 @@ export default function ListAnggotaDetailProject() {
}
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.id])
@@ -72,9 +78,13 @@ export default function ListAnggotaDetailProject() {
try {
const res = await funDeleteMemberProject(param.id, { idUser: dataChoose.id });
if (res.success) {
setDataRealtime([{
category: "project-detail-anggota",
id: param.id,
}])
toast.success(res.message)
setDataChoose({ id: '', name: '' })
getOneData()
getOneData(false)
setOpenDrawer(false)
} else {
toast.error(res.message)
@@ -84,7 +94,14 @@ export default function ListAnggotaDetailProject() {
toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
}
}
const isMobile = useMediaQuery('(max-width: 369px)');
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-anggota' && i.id == param.id)) {
getOneData(false)
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
getOneDataCancel()
}
}, [dataRealTime])
return (
<Box pt={20}>
@@ -128,11 +145,11 @@ export default function ListAnggotaDetailProject() {
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
</Grid.Col>
<Grid.Col span={8}>
<Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
<Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
style={{
overflowWrap: "break-word"
}}>{v.email}</Text>
<Text lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 15 : 16}>{v.name}</Text>
<Text c={"#5A687D"} truncate="end" fz={isMobile ? 12 : 14} pl={isMobile2 ? 40 : 30}
style={{
overflowWrap: "break-word"
}}>{v.email}</Text>
</Grid.Col>
<Grid.Col span={3}>
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>

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

@@ -1,16 +1,17 @@
'use client'
import { LayoutDrawer, LayoutModalViewFile, TEMA } from '@/module/_global';
import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
import { useParams } from 'next/navigation';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataFileProject } from '../lib/type_project';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { keyWibu, LayoutDrawer, LayoutModalViewFile, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { FaTrash } from 'react-icons/fa6';
import { useHookstate } from '@hookstate/core';
import { Box, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { FaTrash } from 'react-icons/fa6';
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
import { IDataFileProject } from '../lib/type_project';
export default function ListFileDetailProject() {
const [isData, setData] = useState<IDataFileProject[]>([])
@@ -26,6 +27,10 @@ export default function ListFileDetailProject() {
const tema = useHookstate(TEMA)
const isMobile = useMediaQuery("(max-width: 350px)");
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneDataCancel() {
try {
@@ -46,9 +51,9 @@ export default function ListFileDetailProject() {
getOneDataCancel();
}, [param.id])
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetOneProjectById(param.id, 'file');
if (res.success) {
setData(res.data)
@@ -65,7 +70,7 @@ export default function ListFileDetailProject() {
}
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.id])
@@ -73,8 +78,12 @@ export default function ListFileDetailProject() {
try {
const res = await funDeleteFileProject(idData);
if (res.success) {
setDataRealtime([{
category: "project-detail-file",
id: param.id,
}])
toast.success(res.message)
getOneData()
getOneData(false)
setIdData("")
setIdStorage("")
setOpenDrawer(false)
@@ -88,6 +97,14 @@ export default function ListFileDetailProject() {
}
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-file' && i.id == param.id)) {
getOneData(false)
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
getOneDataCancel()
}
}, [dataRealTime])
return (
<>
<Box pt={20}>

152
src/module/project/ui/list_project.tsx
View File

@@ -1,17 +1,16 @@
"use client"
import { currentScroll, globalRole, SkeletonList, TEMA } from '@/module/_global';
import { currentScroll, globalNotifPage, globalRole, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import _ from 'lodash';
import { useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react';
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 { RiCircleFill } from 'react-icons/ri';
import { funGetAllProject } from '../lib/api_project';
import toast from 'react-hot-toast';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataProject } from '../lib/type_project';
import { useHookstate } from '@hookstate/core';
import _ from 'lodash';
export default function ListProject() {
const [isList, setIsList] = useState(false)
@@ -30,6 +29,8 @@ export default function ListProject() {
const [totalData, setTotalData] = useState(0)
const isMobile = useMediaQuery('(max-width: 369px)');
const paddingLift = useMediaQuery('(max-width: 505px)')
const [isRefresh, setRefresh] = useState(false)
const notifLoadPage = useHookstate(globalNotifPage)
const handleList = () => {
setIsList(!isList)
@@ -39,6 +40,9 @@ export default function ListProject() {
try {
if (loading)
setLoading(true)
if (isPage == 1) {
setData([])
}
const response = await funGetAllProject('?status=' + status + '&search=' + searchQuery + '&group=' + group + '&page=' + isPage)
if (response.success) {
setNameGroup(response.filter.name)
@@ -46,7 +50,7 @@ export default function ListProject() {
if (isPage == 1) {
setData(response.data)
} else {
setData([...isData, ...response.data])
setData((isData) => [...isData, ...response.data])
}
} else {
toast.error(response.message);
@@ -92,8 +96,34 @@ export default function ListProject() {
};
}, [containerRef, isPage]);
useShallowEffect(() => {
if (notifLoadPage.get().category == 'project' && notifLoadPage.get().load == true) {
setRefresh(true)
}
}, [notifLoadPage.get().load])
function onRefresh() {
notifLoadPage.set({
category: '',
load: false
})
setRefresh(false)
setPage(1)
setTimeout(() => {
fetchData(true)
}, 500)
}
return (
<Box mt={20}>
{
isRefresh &&
<ReloadButtonTop
onReload={() => { onRefresh() }}
title='UPDATE'
/>
}
<Grid justify='center' align='center'>
<Grid.Col span={10}>
<TextInput
@@ -137,7 +167,7 @@ export default function ListProject() {
.fill(null)
.map((_, i) => (
<Box key={i}>
<SkeletonList/>
<SkeletonList />
</Box>
))
:
@@ -147,59 +177,59 @@ export default function ListProject() {
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Kegiatan</Text>
</Box>
:
isData.map((v, i) => {
return (
<Box key={i}>
<Grid align='center' onClick={() => router.push(`/project/${v.id}`)}>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group >
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Group justify='space-between' align='center'>
<Box>
<Box w={{
base: isMobile ? 200 : 230,
xl: 430
}}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.title}
</Text>
</Box>
isData.map((v, i) => {
return (
<Box key={i}>
<Grid align='center' onClick={() => router.push(`/project/${v.id}`)}>
<Grid.Col span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group >
<Center>
<ActionIcon
variant="gradient"
size={50}
aria-label="Gradient action icon"
radius={100}
bg={tema.get().bgFiturHome}
>
<HiMiniPresentationChartBar size={25} color={tema.get().utama} />
</ActionIcon>
</Center>
</Group>
</Grid.Col>
<Grid.Col span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Group justify='space-between' align='center'>
<Box>
<Box w={{
base: isMobile ? 200 : 230,
xl: 430
}}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.title}
</Text>
</Box>
</Group>
</Grid.Col>
</Grid>
<Divider my="sm" />
</Box>
);
})
}
</Box>
</Group>
</Grid.Col>
</Grid>
<Divider my="sm" />
</Box>
);
})
}
</Box>
) : (
<Box pt={20}>

120
src/module/project/ui/list_tugas_detail_project.tsx
View File

@@ -1,17 +1,18 @@
'use client'
import { LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from '@/module/_global';
import { keyWibu, LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
import React, { useState } from 'react';
import { useShallowEffect } from '@mantine/hooks';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { AiOutlineFileDone, AiOutlineFileSync } from 'react-icons/ai';
import { funDeleteDetailProject, funGetOneProjectById, funUpdateStatusProject } from '../lib/api_project';
import { useParams, useRouter } from 'next/navigation';
import { useShallowEffect } from '@mantine/hooks';
import { IDataListTaskProject } from '../lib/type_project';
import { useHookstate } from '@hookstate/core';
import { globalRefreshProject, valStatusDetailProject } from '../lib/val_project';
import { FaCheck, FaPencil, FaTrash } from 'react-icons/fa6';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteDetailProject, funGetOneProjectById, funUpdateStatusProject } from '../lib/api_project';
import { IDataListTaskProject } from '../lib/type_project';
import { globalRefreshProject, valStatusDetailProject } from '../lib/val_project';
export default function ListTugasDetailProject() {
const [isData, setData] = useState<IDataListTaskProject[]>([])
@@ -26,6 +27,10 @@ export default function ListTugasDetailProject() {
const router = useRouter()
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneDataCancel() {
try {
@@ -46,9 +51,9 @@ export default function ListTugasDetailProject() {
getOneDataCancel();
}, [param.id])
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetOneProjectById(param.id, 'task');
if (res.success) {
setData(res.data)
@@ -65,15 +70,19 @@ export default function ListTugasDetailProject() {
}
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.id])
async function onDelete() {
try {
const res = await funDeleteDetailProject(idData, { idProject: param.id });
if (res.success) {
setDataRealtime([{
category: "project-detail-task",
id: param.id,
}])
toast.success(res.message);
getOneData();
getOneData(false);
setIdData("")
setOpenDrawer(false)
refresh.set(true)
@@ -90,8 +99,12 @@ export default function ListTugasDetailProject() {
try {
const res = await funUpdateStatusProject(idData, { status: val, idProject: param.id });
if (res.success) {
setDataRealtime([{
category: "project-detail-task",
id: param.id,
}])
toast.success(res.message);
getOneData();
getOneData(false);
setIdData("")
setOpenDrawer(false)
setOpenDrawerStatus(false)
@@ -105,6 +118,15 @@ export default function ListTugasDetailProject() {
}
}
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-task' && i.id == param.id)) {
refresh.set(true)
getOneData(false)
} else if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
getOneDataCancel()
}
}, [dataRealTime])
return (
<>
<Box pt={20}>
@@ -124,21 +146,21 @@ export default function ListTugasDetailProject() {
{
loading ? <>
<Box pl={5} pr={5} pt={20} pb={20}>
<SkeletonDetailListTugasTask />
<SkeletonDetailListTugasTask />
</Box>
</> :
isData.length === 0 ? <Text>Tidak ada tugas</Text> :
isData.map((item, index) => {
return (
<Box key={index}>
<Box onClick={() => {
<Box onClick={() => {
setIdData(item.id)
setStatusData(item.status)
reason == null ?
setOpenDrawer(true)
: setOpenDrawer(false)
: setOpenDrawer(false)
}} my={18}>
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
<Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}
/>
<Box mt={20}>
@@ -187,7 +209,7 @@ export default function ListTugasDetailProject() {
</Box>
</Box>
</Box>
<Divider my={20}/>
<Divider my={20} />
</Box>
)
})
@@ -203,7 +225,7 @@ export default function ListTugasDetailProject() {
alignItems: 'flex-start',
}}
>
<Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} pb={20}>
<Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} pb={20}>
<Box>
<AiOutlineFileDone size={30} color={tema.get().utama} />
</Box>
@@ -245,36 +267,36 @@ export default function ListTugasDetailProject() {
<LayoutDrawer opened={openDrawerStatus} title={'Status'} onClose={() => setOpenDrawerStatus(false)}>
<Box>
{
valStatusDetailProject.map((item, index) => {
return (
<Box key={index} onClick={() => { onUpdateStatus(item.value) }}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{item.name}
</Text>
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
{
valStatusDetailProject.map((item, index) => {
return (
<Box key={index} onClick={() => { onUpdateStatus(item.value) }}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Text style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
}}>
{item.name}
</Text>
</Flex>
<Divider my={20} />
</Box>
)
})
}
</Group>
<Text
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingLeft: 20,
}}
>
{statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
</Text>
</Flex>
<Divider my={20} />
</Box>
)
})
}
</Box>
</LayoutDrawer>

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

@@ -1,16 +1,17 @@
'use client'
import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
import { globalRole, keyWibu, LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
import { 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 { 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';
import { funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { useHookstate } from '@hookstate/core';
import { useWibuRealtime } from 'wibu-realtime';
export default function NavbarDetailProject() {
const router = useRouter()
@@ -20,6 +21,10 @@ export default function NavbarDetailProject() {
const roleLogin = useHookstate(globalRole)
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneData() {
try {
@@ -41,6 +46,12 @@ export default function NavbarDetailProject() {
getOneData();
}, [param.id])
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => (i.category == 'project-detail' || i.category == 'project-detail-status') && i.id == param.id)) {
getOneData()
}
}, [dataRealTime])
return (
<>
<LayoutNavbarNew back="/project?status=0" title={name} menu={

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

@@ -1,15 +1,16 @@
'use client'
import { keyWibu, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Box, Grid, Group, Progress, Skeleton, Text } from '@mantine/core';
import { useParams } from 'next/navigation';
import React, { useState } from 'react';
import { HiMiniPresentationChartBar } from 'react-icons/hi2';
import { globalRefreshProject } from '../lib/val_project';
import toast from 'react-hot-toast';
import { funGetOneProjectById } from '../lib/api_project';
import { useShallowEffect } from '@mantine/hooks';
import { TEMA } from '@/module/_global';
import { useParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { HiMiniPresentationChartBar } from 'react-icons/hi2';
import { IoIosWarning } from 'react-icons/io';
import { useWibuRealtime } from 'wibu-realtime';
import { funGetOneProjectById } from '../lib/api_project';
import { globalRefreshProject } from '../lib/val_project';
export default function ProgressDetailProject() {
const [valProgress, setValProgress] = useState(0)
@@ -19,10 +20,14 @@ export default function ProgressDetailProject() {
const [loading, setLoading] = useState(true)
const tema = useHookstate(TEMA)
const [reason, setReason] = useState("")
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
})
async function getOneData() {
async function getOneData(loading: boolean) {
try {
setLoading(true)
setLoading(loading)
const res = await funGetOneProjectById(param.id, 'progress');
if (res.success) {
setValProgress(res.data.progress);
@@ -60,7 +65,7 @@ export default function ProgressDetailProject() {
function onRefresh() {
if (refresh.get()) {
getOneData()
getOneData(false)
refresh.set(false)
}
}
@@ -70,9 +75,16 @@ export default function ProgressDetailProject() {
}, [refresh.get()])
useShallowEffect(() => {
getOneData();
getOneData(true);
}, [param.id])
useShallowEffect(() => {
if (dataRealTime && dataRealTime.some((i: any) => i.category == 'project-detail-status' && i.id == param.id)) {
getOneDataCancel()
getOneData(false)
}
}, [dataRealTime])
return (
<>
<Box mt={10}>