upfate timetrackers & todo

resources/js/pages/ToDos/ToDoShow.tsx

@@ -4,6 +4,8 @@ import useAxiosTools from "../../hooks/AxiosTools"
 import {timeTracker, toDo} from "../../utilities/types"
 import {EditSVG} from "../../components/SVG"
 import Field, {TextArea} from "../../components/Field"
+import TimeTrackerEdit from "../../components/TimeTrackers/TimeTrackerEdit"
+import {Modal} from "../../components/Modals"
 
 const ToDoShow = () => {
 
@@ -32,6 +34,8 @@ const ToDoShow = () => {
     const handleEditTodoMode = async () => {
         if (editMode && toDo) {
             try {
+                // @ts-expect-error remove checked for update item content
+                delete toDo['checked']
                 const res = await axiosPut('/api/todos/' + id, {...toDo, name, description})
                 setToDo(res.data)
             } catch (error) {
@@ -53,6 +57,7 @@ const ToDoShow = () => {
         </> : <>
             <button className="absolute right-5" onClick={handleEditTodoMode}><EditSVG className="w-5"/></button>
             <h1 className="text-lg font-bold">{toDo?.name}</h1>
+            <p>Terminé le {toDo?.checked ? (new Date(toDo.checked)).toSmallFrDate() : ''}</p>
             <p>{toDo?.description}</p>
         </>}
 
@@ -67,11 +72,20 @@ const ToDoTimeTrackers: FC<{toDo: toDo}> = ({toDo: toDo}) => {
 
     const {setLoading, errorCatch, errorLabel, axiosGet} = useAxiosTools(true)
     const [timeTrackers, setTimeTrackers] = useState<timeTracker[]>([])
+    const [showTrackers, setShowTrackers] = useState<timeTracker|null>(null)
+    const [reload, setReload] = useState<timeTracker|null>(null)
 
     useEffect(() => {
         fetchTimeTrackers()
     }, [])
 
+    useEffect(() => {
+        if (reload) {
+            fetchTimeTrackers()
+            setShowTrackers(null)
+        }
+    }, [reload])
+
     const fetchTimeTrackers = async () => {
         try {
             const res = await axiosGet(`/api/todos/${toDo.id}/time-trackers`)
@@ -96,10 +110,6 @@ const ToDoTimeTrackers: FC<{toDo: toDo}> = ({toDo: toDo}) => {
 
         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">
@@ -111,6 +121,7 @@ const ToDoTimeTrackers: FC<{toDo: toDo}> = ({toDo: toDo}) => {
                 <th>Début</th>
                 <th>Fin</th>
                 <th>Différence</th>
+                <th />
             </tr>
             </thead>
             <tbody>
@@ -118,8 +129,17 @@ const ToDoTimeTrackers: FC<{toDo: toDo}> = ({toDo: toDo}) => {
                 <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>
+                <td className="px-1 text-right">
+                    <button onClick={() => setShowTrackers(timeTracker)}>
+                        <EditSVG className="w-5"/>
+                    </button>
+                </td>
             </tr>)}
             </tbody>
         </table>
+
+        <Modal show={!!showTrackers} closeModal={() => setShowTrackers(null)}>
+            {showTrackers && <TimeTrackerEdit timeTracker={showTrackers} setReload={setReload} />}
+        </Modal>
     </div>
 }