upd: fitur baru
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:
@@ -239,18 +239,31 @@ model ProjectLink {
|
||||
}
|
||||
|
||||
model ProjectTask {
|
||||
id String @id @default(cuid())
|
||||
Project Project @relation(fields: [idProject], references: [id])
|
||||
idProject String
|
||||
title String
|
||||
desc String?
|
||||
status Int @default(0) // 0 = todo, 1 = done
|
||||
notifikasi Boolean @default(false)
|
||||
dateStart DateTime @db.Date
|
||||
dateEnd DateTime @db.Date
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
id String @id @default(cuid())
|
||||
Project Project @relation(fields: [idProject], references: [id])
|
||||
idProject String
|
||||
title String
|
||||
desc String?
|
||||
status Int @default(0) // 0 = todo, 1 = done
|
||||
notifikasi Boolean @default(false)
|
||||
dateStart DateTime @db.Date
|
||||
dateEnd DateTime @db.Date
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
ProjectTaskDetail ProjectTaskDetail[]
|
||||
}
|
||||
|
||||
model ProjectTaskDetail {
|
||||
id String @id @default(cuid())
|
||||
ProjectTask ProjectTask @relation(fields: [idTask], references: [id])
|
||||
idTask String
|
||||
date DateTime @db.Date
|
||||
timeStart DateTime? @db.Time()
|
||||
timeEnd DateTime? @db.Time()
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
|
||||
model Division {
|
||||
|
||||
@@ -163,7 +163,7 @@ export async function POST(request: Request, context: { params: { id: string } }
|
||||
}
|
||||
|
||||
const { id } = context.params
|
||||
const { name, dateStart, dateEnd, } = await request.json()
|
||||
const { name, dateStart, dateEnd, dataDetail } = await request.json()
|
||||
|
||||
const data = await prisma.project.count({
|
||||
where: {
|
||||
@@ -192,6 +192,20 @@ export async function POST(request: Request, context: { params: { id: string } }
|
||||
}
|
||||
})
|
||||
|
||||
if (dataDetail.length > 0) {
|
||||
const dataDetailFix = dataDetail.map((v: any) => ({
|
||||
...v,
|
||||
idTask: dataCreate.id,
|
||||
date: new Date(v.date),
|
||||
timeStart: new Date(new Date('1970-01-01 ' + v.timeStart).getTime() - (new Date('1970-01-01 ' + v.timeStart).getTimezoneOffset() * 60000)).toISOString(),
|
||||
timeEnd: new Date(new Date('1970-01-01 ' + v.timeEnd).getTime() - (new Date('1970-01-01 ' + v.timeEnd).getTimezoneOffset() * 60000)).toISOString(),
|
||||
}))
|
||||
|
||||
const dataDetailCreate = await prisma.projectTaskDetail.createMany({
|
||||
data: dataDetailFix
|
||||
})
|
||||
}
|
||||
|
||||
// create log user
|
||||
const log = await createLogUser({ act: 'CREATE', desc: 'User membuat data tahapan kegiatan', table: 'projectTask', data: String(dataCreate.id) })
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { prisma } from "@/module/_global";
|
||||
import { funGetUserByCookies } from "@/module/auth";
|
||||
import { createLogUser } from "@/module/user";
|
||||
import moment from "moment";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
|
||||
@@ -171,7 +172,11 @@ export async function GET(request: Request, context: { params: { id: string } })
|
||||
return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
|
||||
}
|
||||
|
||||
const { searchParams } = new URL(request.url);
|
||||
const kategori = searchParams.get("cat");
|
||||
const { id } = context.params;
|
||||
|
||||
let dataFix
|
||||
const data = await prisma.projectTask.findUnique({
|
||||
where: {
|
||||
id: String(id),
|
||||
@@ -188,7 +193,28 @@ export async function GET(request: Request, context: { params: { id: string } })
|
||||
);
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true, message: "Detail kegiatan berhasil ditemukan", data }, { status: 200 });
|
||||
if (kategori == "detailTask") {
|
||||
const dataDetail = await prisma.projectTaskDetail.findMany({
|
||||
where: {
|
||||
idTask: String(id)
|
||||
},
|
||||
orderBy: {
|
||||
date: "asc"
|
||||
}
|
||||
})
|
||||
|
||||
const dataDetailFix = dataDetail.map((data: any) => ({
|
||||
...data,
|
||||
timeStart: moment.utc(data.timeStart).format("HH:mm"),
|
||||
timeEnd: moment.utc(data.timeEnd).format("HH:mm")
|
||||
}))
|
||||
|
||||
dataFix = dataDetailFix
|
||||
} else {
|
||||
dataFix = data
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true, message: "Detail kegiatan berhasil ditemukan", data: dataFix }, { status: 200 });
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return NextResponse.json({ success: false, message: "Gagal mendapatkan kegiatan, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
|
||||
@@ -205,17 +231,17 @@ export async function POST(request: Request, context: { params: { id: string } }
|
||||
}
|
||||
|
||||
const { id } = context.params;
|
||||
const { title, dateStart, dateEnd } = (await request.json());
|
||||
const { title, dateStart, dateEnd, dataDetail } = (await request.json());
|
||||
|
||||
|
||||
|
||||
const dataTask = await prisma.projectTask.count({
|
||||
const dataTaskLama = await prisma.projectTask.findUnique({
|
||||
where: {
|
||||
id
|
||||
}
|
||||
})
|
||||
|
||||
if (dataTask == 0) {
|
||||
if (dataTaskLama?.title == undefined) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: false, message: "Gagal mendapatkan kegiatan, data tidak ditemukan",
|
||||
@@ -235,6 +261,28 @@ export async function POST(request: Request, context: { params: { id: string } }
|
||||
}
|
||||
})
|
||||
|
||||
if (moment(dataTaskLama.dateStart).format('YYYY-MM-DD') != dateStart || moment(dataTaskLama.dateEnd).format('YYYY-MM-DD') != dateEnd) {
|
||||
const dataDetailDelete = await prisma.projectTaskDetail.deleteMany({
|
||||
where: {
|
||||
idTask: id
|
||||
}
|
||||
})
|
||||
|
||||
if (dataDetail.length > 0) {
|
||||
const dataDetailFix = dataDetail.map((v: any) => ({
|
||||
...v,
|
||||
idTask: id,
|
||||
date: new Date(v.date),
|
||||
timeStart: new Date(new Date('1970-01-01 ' + v.timeStart).getTime() - (new Date('1970-01-01 ' + v.timeStart).getTimezoneOffset() * 60000)).toISOString(),
|
||||
timeEnd: new Date(new Date('1970-01-01 ' + v.timeEnd).getTime() - (new Date('1970-01-01 ' + v.timeEnd).getTimezoneOffset() * 60000)).toISOString(),
|
||||
}))
|
||||
|
||||
const dataDetailCreate = await prisma.projectTaskDetail.createMany({
|
||||
data: dataDetailFix
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// create log user
|
||||
const log = await createLogUser({ act: 'UPDATE', desc: 'User mengupdate tahapan kegiatan', table: 'projectTask', data: String(id) })
|
||||
|
||||
|
||||
9
src/lib/getDatesInRange.ts
Normal file
9
src/lib/getDatesInRange.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export function getDatesInRange(startDate: Date, endDate: Date) {
|
||||
const dates = [];
|
||||
const currentDate = new Date(startDate);
|
||||
while (currentDate <= endDate) {
|
||||
dates.push(new Date(currentDate));
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
return dates;
|
||||
}
|
||||
@@ -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: {
|
||||
|
||||
@@ -68,7 +68,8 @@ export interface IFormMemberProject {
|
||||
export interface IFormAddDetailproject {
|
||||
dateStart: string,
|
||||
dateEnd: string,
|
||||
name: string
|
||||
name: string,
|
||||
dataDetail: any[]
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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?"
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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
94
src/module/project/ui/modal_add_detail_task_project.tsx
Normal 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
99
src/module/project/ui/modal_list_detail_task_project.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user