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

upd: fitur baru

Browse Source 
Dekripsi:
- update struktur database
- tambah task detail jam pada project
- get list modal detail jam task project
- api get list detail jam task
- api tambah task detail jam pada project

No Issues
This commit is contained in:
amal
2025-08-18 17:46:28 +08:00
parent 2bf919ac09
commit 3ec93ffe02
11 changed files with 387 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,8 +49,8 @@ export const funUpdateStatusProject = async (path: string, data: { status: numbe
}
export const funGetDetailProject = async (path: string) => {
const response = await fetch(`/api/project/detail/${path}`);
export const funGetDetailProject = async (path: string, kat?: string) => {
const response = await fetch(`/api/project/detail/${path}${(kat) ? `?cat=${kat}` : ''}`);
return await response.json().catch(() => null);
}
@@ -182,7 +182,7 @@ export const funDeleteProject = async (path: string) => {
};
export const funAddLinkProject = async (path: string, data: {link: string}) => {
export const funAddLinkProject = async (path: string, data: { link: string }) => {
const response = await fetch(`/api/project/${path}/link`, {
method: "POST",
headers: {

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

@@ -68,7 +68,8 @@ export interface IFormMemberProject {
export interface IFormAddDetailproject {
dateStart: string,
dateEnd: string,
name: string
name: string,
dataDetail: any[]
}

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

@@ -1,4 +1,5 @@
"use client"
import { getDatesInRange } from '@/lib/getDatesInRange';
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
@@ -11,6 +12,7 @@ import { useState } from 'react';
import toast from 'react-hot-toast';
import { useWibuRealtime } from 'wibu-realtime';
import { funCreateDetailProject } from '../lib/api_project';
import { ModalAddDetailTaskProject } from './modal_add_detail_task_project';
export default function AddDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -21,6 +23,8 @@ export default function AddDetailTaskProject() {
const param = useParams<{ id: string }>()
const tema = useHookstate(TEMA)
const [acuan, setAcuan] = useState(false)
const [openModalDetailTask, setOpenModalDetailTask] = useState(false)
const [dataDetail, setDataDetail] = useState<any>([])
const [touched, setTouched] = useState({
title: false,
date: false
@@ -33,10 +37,16 @@ export default function AddDetailTaskProject() {
async function onSubmit() {
try {
setLoadingModal(true)
const dataDetailFix = dataDetail.map((v: any) => ({
...v,
date: moment(v.date).format("YYYY-MM-DD"),
}))
const res = await funCreateDetailProject(param.id, {
name,
dateStart: (value[0] != null) ? moment(value[0]).format('YYYY-MM-DD') : moment(new Date).format('YYYY-MM-DD'),
dateEnd: (value[1] != null) ? moment(value[1]).format('YYYY-MM-DD') : moment(new Date).format('YYYY-MM-DD'),
dataDetail: dataDetailFix
})
if (res.success) {
@@ -94,8 +104,15 @@ export default function AddDetailTaskProject() {
const array = val.split(",")
if (array[0] == '' || array[1] == '') {
setTouched({ ...touched, date: true })
setDataDetail([])
} else {
setTouched({ ...touched, date: false })
const datanya = getDatesInRange(value[0]!, value[1]!)
setDataDetail(datanya.map((data: any) => ({
date: data,
timeStart: null,
timeEnd: null
})))
}
}
}
@@ -119,7 +136,6 @@ export default function AddDetailTaskProject() {
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
@@ -160,6 +176,16 @@ export default function AddDetailTaskProject() {
? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
: <></>
}
<Button
variant="light"
size="compact-md"
radius={5}
onClick={() => { setOpenModalDetailTask(true) }}
mt={5}
disabled={value[0] == null || value[1] == null || touched.date}
>
Detail
</Button>
<Stack pt={15} pb={100}>
<TextInput
styles={{
@@ -201,6 +227,15 @@ export default function AddDetailTaskProject() {
</Button>
</Box>
<ModalAddDetailTaskProject
open={openModalDetailTask}
onClose={() => setOpenModalDetailTask(false)}
data={dataDetail}
onSubmit={(data) => {
setDataDetail(data)
setOpenModalDetailTask(false)
}}
/>
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menambahkan tugas?"

37
src/module/project/ui/edit_detail_task_project.tsx
View File

@@ -1,4 +1,5 @@
"use client"
import { getDatesInRange } from '@/lib/getDatesInRange';
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
@@ -11,6 +12,7 @@ import { useState } from 'react';
import toast from 'react-hot-toast';
import { useWibuRealtime } from 'wibu-realtime';
import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
import { ModalAddDetailTaskProject } from './modal_add_detail_task_project';
export default function EditDetailTaskProject() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -19,6 +21,8 @@ export default function EditDetailTaskProject() {
const param = useParams<{ id: string }>()
const [openModal, setOpenModal] = useState(false)
const [loading, setLoading] = useState(true)
const [openModalDetailTask, setOpenModalDetailTask] = useState(false)
const [dataDetail, setDataDetail] = useState<any>([])
const [loadingModal, setLoadingModal] = useState(false)
const tema = useHookstate(TEMA)
const [touched, setTouched] = useState({
@@ -77,6 +81,10 @@ export default function EditDetailTaskProject() {
new Date(moment(res.data.dateStart).format('YYYY-MM-DD')),
new Date(moment(res.data.dateEnd).format('YYYY-MM-DD')),
])
const res2 = await funGetDetailProject(param.id, 'detailTask');
console.log('detail task',res2)
setDataDetail(res2.data)
} else {
toast.error(res.message);
}
@@ -112,8 +120,15 @@ export default function EditDetailTaskProject() {
const array = val.split(",")
if (array[0] == '' || array[1] == '') {
setTouched({ ...touched, date: true })
setDataDetail([])
} else {
setTouched({ ...touched, date: false })
const datanya = getDatesInRange(value[0]!, value[1]!)
setDataDetail(datanya.map((data: any) => ({
date: data,
timeStart: null,
timeEnd: null
})))
}
}
}
@@ -187,6 +202,16 @@ export default function EditDetailTaskProject() {
? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
: <></>
}
<Button
variant="light"
size="compact-md"
radius={5}
onClick={() => { setOpenModalDetailTask(true) }}
mt={5}
disabled={value[0] == null || value[1] == null || touched.date}
>
Detail
</Button>
<Stack pt={15} pb={100}>
{loading ?
<Skeleton height={40} mt={20} radius={10} />
@@ -234,6 +259,18 @@ export default function EditDetailTaskProject() {
}
</Box>
{/* TODO */}
{/* <ModalAddDetailTaskProject
open={openModalDetailTask}
onClose={() => setOpenModalDetailTask(false)}
data={dataDetail}
onSubmit={(data) => {
setDataDetail(data)
setOpenModalDetailTask(false)
}}
/> */}
<LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => {

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

@@ -2,17 +2,19 @@
import { globalRole, 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, Loader } from '@mantine/core';
import { Box, Center, Checkbox, Divider, Flex, Grid, Group, Loader, SimpleGrid, Stack, Text } from '@mantine/core';
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 { FaCheck, FaPencil, FaTrash } from 'react-icons/fa6';
import { IoTimeOutline } from 'react-icons/io5';
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteDetailProject, funGetOneProjectById, funUpdateStatusProject } from '../lib/api_project';
import { IDataListTaskProject } from '../lib/type_project';
import { globalIsMemberProject, globalRefreshProject, valStatusDetailProject } from '../lib/val_project';
import { ModalListDetailTaskProject } from './modal_list_detail_task_project';
export default function ListTugasDetailProject() {
const [isData, setData] = useState<IDataListTaskProject[]>([])
@@ -32,6 +34,7 @@ export default function ListTugasDetailProject() {
const [loadingStatus, setLoadingStatus] = useState(false)
const [pilihStatus, setPilihStatus] = useState(0)
const [reason, setReason] = useState("")
const [openModalDetailTask, setOpenModalDetailTask] = useState(false)
const [dataRealTime, setDataRealtime] = useWibuRealtime({
WIBU_REALTIME_TOKEN: keyWibu,
project: "sdm"
@@ -259,6 +262,15 @@ export default function ListTugasDetailProject() {
</Box>
</Flex>
<Flex onClick={() => {setOpenModalDetailTask(true)}} justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoTimeOutline size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Detail Waktu</Text>
</Box>
</Flex>
<Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<FaTrash size={30} color={tema.get().utama} />
@@ -272,6 +284,8 @@ export default function ListTugasDetailProject() {
</Box>
</LayoutDrawer>
<ModalListDetailTaskProject open={openModalDetailTask} onClose={() => setOpenModalDetailTask(false)} task={idData} />
<LayoutModal loading={loadingDelete} opened={isOpenModal} onClose={() => setOpenModal(false)}
description="Apakah Anda yakin ingin menghapus tahapan tugas ini?"
onYes={(val) => {

94
src/module/project/ui/modal_add_detail_task_project.tsx Normal file
View File

@@ -0,0 +1,94 @@
import { TEMA } from "@/module/_global";
import { Box, Button, Grid, Modal, SimpleGrid, Text } from "@mantine/core";
import { TimeInput } from "@mantine/dates";
import moment from "moment";
import { useEffect, useState } from "react";
export function ModalAddDetailTaskProject({ open, onClose, data, onSubmit }: { open: boolean, onClose: () => void, data: any[], onSubmit: (data: any) => void }) {
const [dataDetail, setDataDetail] = useState(data)
const [touched, setTouched] = useState<any>([])
useEffect(() => {
setDataDetail(data)
}, [data])
function onInputTime(date: any, value: any, cat: 'timeStart' | 'timeEnd') {
if (cat == "timeEnd") {
if (value == "" || dataDetail.find((data: any) => data.date == date)?.timeStart > value) {
setTouched((touched: any) => [...touched, { date: date, timeEnd: true }])
}else{
setTouched((touched: any) => touched.filter((item: any) => item.date != date))
}
}
setDataDetail(dataDetail.map((data: any) => {
if (data.date == date) {
return {
...data,
[cat]: value
}
}
return data
}))
}
return (
<Modal styles={{
body: {
borderRadius: 20
},
content: {
borderRadius: 20,
border: `2px solid ${"#828AFC"}`
}
}} opened={open} onClose={() => onClose()} centered withCloseButton={false} title={"Detail Tanggal dan Waktu Tugas"}>
<Box p={10}>
<Box>
{
dataDetail.map((data: any, index: any) => (
<Box key={index} py={10} style={{ borderBottom: `1px solid ${"#D6D8F6"}` }}>
<Text fw={"bold"}>{moment(data.date).format('DD-MM-YYYY')}</Text>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }}>
<TimeInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
label="Waktu Awal"
value={data.timeStart}
onChange={(event) => onInputTime(data.date, event.target.value, 'timeStart')}
/>
<TimeInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
label="Waktu Akhir"
value={data.timeEnd}
onChange={(event) => onInputTime(data.date, event.target.value, 'timeEnd')}
error={touched.find((item: any) => item.date == data.date)?.timeEnd ? "Waktu akhir harus lebih dari waktu awal" : ""}
/>
</SimpleGrid>
</Box>
))
}
</Box>
<Grid mt={10}>
<Grid.Col span={6}>
<Button variant="light" fullWidth color='#969494' onClick={() => onClose()}>Batalkan</Button>
</Grid.Col>
<Grid.Col span={6}>
<Button variant="light" disabled={touched.length > 0} fullWidth color={TEMA.get().utama} onClick={() => { onSubmit(dataDetail) }}>Simpan</Button>
</Grid.Col>
</Grid>
</Box>
</Modal>
)
}

99
src/module/project/ui/modal_list_detail_task_project.tsx Normal file
View File

@@ -0,0 +1,99 @@
import { Box, Modal, SimpleGrid, Skeleton, Text } from "@mantine/core";
import { TimeInput } from "@mantine/dates";
import { useShallowEffect } from "@mantine/hooks";
import moment from "moment";
import { useState } from "react";
import toast from "react-hot-toast";
import { funGetDetailProject } from "../lib/api_project";
export function ModalListDetailTaskProject({ open, onClose, task, }: { open: boolean, onClose: () => void, task: string }) {
const [dataDetail, setDataDetail] = useState([])
const [loading, setLoading] = useState(false)
async function getData() {
try {
setLoading(true)
const response = await funGetDetailProject(task, 'detailTask')
if (response.success) {
setDataDetail(response.data)
} else {
toast.error(response.message)
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan detail tugas Kegiatan, coba lagi nanti");
} finally {
setLoading(false)
}
}
useShallowEffect(() => {
if(task!=""){
getData()
}
}, [task])
return (
<Modal styles={{
body: {
borderRadius: 20
},
content: {
borderRadius: 20,
border: `2px solid ${"#828AFC"}`
}
}} opened={open} onClose={() => onClose()} centered withCloseButton={false} title={"Detail Tanggal dan Waktu Tugas"}>
<Box p={10}>
<Box>
{
loading ?
Array(5)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Box>
<Skeleton width={"100%"} mb={15} height={30} radius={"md"} />
</Box>
</Box>
))
:
dataDetail.length > 0 ?
dataDetail.map((data: any, index: any) => (
<Box key={index} py={10} style={{ borderBottom: `1px solid ${"#D6D8F6"}` }}>
<Text fw={"bold"}>{moment(data.date).format('DD-MM-YYYY')}</Text>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }}>
<TimeInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
label="Waktu Awal"
value={data.timeStart}
readOnly
/>
<TimeInput
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
size="md"
label="Waktu Akhir"
value={data.timeEnd}
readOnly
/>
</SimpleGrid>
</Box>
))
:
<Text ta="center" c={"gray"}>Tidak ada detail tugas</Text>
}
</Box>
</Box>
</Modal>
)
}