132 lines
4.4 KiB
TypeScript
132 lines
4.4 KiB
TypeScript
import React, {FC, useEffect, useState} from "react"
|
|
import {useParams} from "react-router-dom"
|
|
import useAxiosTools from "../../hooks/AxiosTools"
|
|
import {timeTracker, toDo} from "../../utilities/types"
|
|
import {EditSVG} from "../../components/SVG"
|
|
import Field, {TextArea} from "../../components/Field"
|
|
|
|
const ToDoShow = () => {
|
|
|
|
const {id} = useParams()
|
|
const {setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
|
|
const [toDo, setToDo] = useState<toDo|null>(null)
|
|
const [editMode, setEditMode] = useState(false)
|
|
const [editForm, setEditForm] = useState<toDo|null>(null)
|
|
|
|
useEffect(() => {
|
|
fetchToDo()
|
|
}, [])
|
|
|
|
const fetchToDo = async () => {
|
|
try {
|
|
const res = await axiosGet('/api/todos/' + id)
|
|
setToDo(res.data)
|
|
} catch (error) {
|
|
errorCatch(error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleEditTodoMode = async () => {
|
|
if (editMode) {
|
|
try {
|
|
const res = await axiosPut('/api/todos/' + id, editForm)
|
|
setToDo(res.data)
|
|
} catch (error) {
|
|
errorCatch(error)
|
|
}
|
|
} else {
|
|
setEditForm(toDo)
|
|
}
|
|
setEditMode(!editMode)
|
|
}
|
|
|
|
const handleEditTodo = (event: React.ChangeEvent<HTMLInputElement|HTMLTextAreaElement>) => {
|
|
setEditForm({...editForm, [event.target.name]: event.target.value})
|
|
}
|
|
|
|
return <div className="relative p-5">
|
|
{errorLabel()}
|
|
{editMode ? <>
|
|
<button className="absolute right-5 flex" onClick={handleEditTodoMode}>Valider <EditSVG className="w-5"/></button>
|
|
<Field name="name" value={editForm?.name} onChange={handleEditTodo} />
|
|
<TextArea name="description" value={editForm?.description} onChange={handleEditTodo} />
|
|
</> : <>
|
|
<button className="absolute right-5" onClick={handleEditTodoMode}><EditSVG className="w-5"/></button>
|
|
<h1 className="text-lg font-bold">{toDo?.name}</h1>
|
|
<p>{toDo?.description}</p>
|
|
</>}
|
|
|
|
|
|
{toDo && <ToDoTimeTrackers toDo={toDo}/>}
|
|
</div>
|
|
}
|
|
|
|
export default ToDoShow
|
|
|
|
const ToDoTimeTrackers: FC<ToDoTimeTrackers> = ({toDo: toDo}) => {
|
|
|
|
const {setLoading, errorCatch, errorLabel, axiosGet} = useAxiosTools(true)
|
|
const [timeTrackers, setTimeTrackers] = useState<timeTracker[]>([])
|
|
|
|
useEffect(() => {
|
|
fetchTimeTrackers()
|
|
}, [])
|
|
|
|
const fetchTimeTrackers = async () => {
|
|
try {
|
|
const res = await axiosGet(`/api/todos/${toDo.id}/time-trackers`)
|
|
setTimeTrackers(res.data)
|
|
} catch (error) {
|
|
errorCatch(error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const timeSpend = () => {
|
|
let timer = 0
|
|
let more = false
|
|
timeTrackers.forEach(timeTracker => {
|
|
if (! timeTracker.end_at) {
|
|
more = true
|
|
} else {
|
|
timer += ((new Date(timeTracker.end_at)).getTime()) - (new Date(timeTracker.start_at)).getTime()
|
|
}
|
|
})
|
|
|
|
timer = Math.floor(timer / 1000)
|
|
return (more ? '+' : '') + timer.durationify()
|
|
// let hours = Math.floor(timer / 3600)
|
|
// let minutes = Math.floor((timer - hours * 3600) / 60)
|
|
// let secondes = timer - hours * 3600 - minutes * 60
|
|
// return `${more ? '+' : ''} ${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
|
|
}
|
|
|
|
return <div className="p-5">
|
|
<div className="text-center">Temps passé : {timeSpend()}</div>
|
|
{errorLabel()}
|
|
<table className="mx-auto">
|
|
<thead>
|
|
<tr>
|
|
<th>Début</th>
|
|
<th>Fin</th>
|
|
<th>Différence</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{timeTrackers.map(timeTracker => <tr key={timeTracker.id} className="text-center">
|
|
<td className="px-1">{timeTracker.start_at ? (new Date(timeTracker.start_at)).toSmallFrDate() : ''}</td>
|
|
<td className="px-1">{timeTracker.end_at ? (new Date(timeTracker.end_at)).toSmallFrDate() : ''}</td>
|
|
<td className="px-1 text-right">{timeTracker.start_at && timeTracker.end_at ? (new Date(timeTracker.end_at)).difference(new Date(timeTracker.start_at)) : ''}</td>
|
|
</tr>)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
|
|
interface ToDoTimeTrackers {
|
|
toDo: toDo,
|
|
}
|