upfate timetrackers & todo

resources/js/components/TimeTrackers/TimeTrackerEdit.tsx

@@ -1,30 +1,45 @@
 import React, {FC, FormEvent, useState} from "react"
 import Field from "../Field"
 import {timeTracker} from "../../utilities/types"
+import useAxiosTools from "../../hooks/AxiosTools"
 
-const TimeTrackerEdit: FC<TimeTrackerEditProps> = ({timeTracker}) => {
+const TimeTrackerEdit: FC<TimeTrackerEditProps> = ({timeTracker, setReload}) => {
 
+    const {errorCatch, errorLabel, axiosPut} = useAxiosTools()
     const [trackerForm, setTrackerForm] = useState<timeTracker>(timeTracker)
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setTrackerForm({...trackerForm, [event.target.name]: event.target.value.replace('T', ' ')})
     }
 
-    const onSubmit = (event: FormEvent) => {
+    const onSubmit = async (event: FormEvent) => {
         console.log('submit', trackerForm, event)
+        try {
+            const res = await axiosPut(`/api/time-trackers/${timeTracker.id}`, trackerForm)
+            setReload(res.data)
+        } catch (error) {
+            errorCatch(error)
+        }
     }
 
-    return <form onSubmit={onSubmit}>
+    return <form onSubmit={onSubmit} className="px-5 py-3">
+        {errorLabel()}
+        <h2 className="mb-3 text-lg font-bold">Modification de l&apos;entrée</h2>
         <Field name="start_at"
                type="datetime-local"
+               className="mb-2"
                value={trackerForm.start_at}
-               onChange={handleChange}/>
-        <Field name="end_at"
+               onChange={handleChange}>
+            Début
+        </Field>
+        {timeTracker.end_at && <Field name="end_at"
                type="datetime-local"
                value={trackerForm.end_at}
-               onChange={handleChange}/>
+               onChange={handleChange}>
+            Fin
+        </Field>}
 
-        <button type="submit" onClick={onSubmit}>Valider</button>
+        <button type="submit" className="btn-primary mt-5 w-full" onClick={onSubmit}>Valider</button>
     </form>
 }
 
@@ -32,4 +47,5 @@ export default TimeTrackerEdit
 
 interface TimeTrackerEditProps {
     timeTracker: timeTracker,
+    setReload: (elem: timeTracker) => void,
 }

resources/js/components/TimeTrackers/Tracker.tsx

@@ -2,11 +2,16 @@ import React, {useEffect, useState} from "react"
 import useTracker from "../../hooks/TraskerHook"
 import {Link} from "react-router-dom"
 import {StopSVG} from "../SVG"
+import TimeTrackerEdit from "./TimeTrackerEdit"
+import {Modal} from "../Modals"
+import {timeTracker} from "../../utilities/types"
 
 const Tracker = () => {
 
     const [timer, setTimer] = useState('')
-    const {currentTimeTracker, stopCurrentTimeTrack} = useTracker()
+    const {currentTimeTracker, setCurrentTimeTracker, stopCurrentTimeTrack} = useTracker()
+    const [showTrackers, setShowTrackers] = useState<timeTracker|null>(null)
+    const [reload, setReload] = useState<timeTracker|null>(null)
 
     useEffect(() => {
         setTimer(formatTimer(currentTimeTracker?.start_at))
@@ -16,16 +21,19 @@ const Tracker = () => {
         setTimeout(() => setTimer(formatTimer(currentTimeTracker?.start_at)), 1000)
     }, [timer])
 
+    useEffect(() => {
+        if (reload) {
+            setCurrentTimeTracker(reload)
+            setShowTrackers(null)
+        }
+    }, [reload])
+
     const formatTimer = (startAt: string|null|undefined) => {
         if (!startAt) {
             return '--:--'
         }
         const timer = Math.floor(((new Date()).getTime() - (new Date(startAt)).getTime()) / 1000)
         return Number(timer).durationify()
-        // let hours = Math.floor(timer / 3600)
-        // let minutes = Math.floor((timer - hours * 3600) / 60)
-        // let secondes = timer - hours * 3600 - minutes * 60
-        // return `${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
     }
 
     return <div>
@@ -34,13 +42,17 @@ const Tracker = () => {
                 <Link to={`/todos/${currentTimeTracker?.to_do?.id}`} className="font-bold">
                     {currentTimeTracker?.to_do?.name}
                 </Link>
-                <span>{timer}</span>
+                <button type="button" onClick={() => setShowTrackers(currentTimeTracker)}>{timer}</button>
                 <button onClick={stopCurrentTimeTrack} className="flex items-center">
                     <StopSVG className="w-6" />
                 </button>
             </div>
             : <div>--:--</div>
         }
+
+        <Modal show={!!showTrackers} closeModal={() => setShowTrackers(null)}>
+            {showTrackers && <TimeTrackerEdit timeTracker={showTrackers} setReload={setReload} />}
+        </Modal>
     </div>
 }