upfate timetrackers & todo

app/Http/Controllers/TimeTrackerController.php

@@ -61,7 +61,16 @@ class TimeTrackerController extends Controller
      */
     public function update(Request $request, TimeTracker $timeTracker)
     {
-        //
+        abort_if($timeTracker->toDo->user_id !== $request->user()->id, 401, __('auth.unauthorized'));
+
+        $data = $request->validate([
+            'start_at' => ['required', 'date'],
+            'end_at' => ['nullable', 'date', 'after_or_equal:start_at'],
+        ]);
+
+        $timeTracker->update($data);
+
+        return response()->json(new TimeTrackerResource($timeTracker));
     }
 
     /**
@@ -90,7 +99,7 @@ class TimeTrackerController extends Controller
 
     public function toDoTimeTrackers(Request $request, ToDo $toDo)
     {
-        abort_if($toDo->user_id !== $request->user()->id, 401, 'unauthoriez');
+        abort_if($toDo->user_id !== $request->user()->id, 401, __('auth.unauthorized'));
 
         return response()->json(TimeTrackerResource::collection($toDo->timeTrackers->sortByDesc('start_at')));
     }

app/Http/Controllers/ToDoController.php

@@ -44,14 +44,9 @@ class ToDoController extends Controller
      */
     public function update(ToDoRequest $request, ToDo $todo)
     {
-        abort(501, "xoxo");
+        abort_if($todo->user_id !== $request->user()->id, 401, __('auth.unauthorized'));
-        $data = $request->validated();
-        $data['checked'] = $request->input('checked') ? now() : null;
-        $todo->update($data);
 
-        if ($request->user()->currentTimeTracker?->to_do_id === $todo->id) {
+        $todo->update($request->validated());
-            $request->user()->stopCurrentTimeTracker();
-        }
 
         return response()->json(new ToDoResource($todo));
     }

app/Http/Requests/ToDoRequest.php

@@ -24,7 +24,7 @@ class ToDoRequest extends FormRequest
         return [
             'name' => ['string', 'min:3', 'max:255'],
             'description' => ['string', 'max:2000'],
-            'checked' => ['boolean', 'nullable'],
+            'checked' => ['nullable', 'bool'],
         ];
     }
 }

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}/>
+               onChange={handleChange}>
-        <Field name="end_at"
+            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>
 }
 

resources/js/hooks/TraskerHook.tsx

@@ -7,6 +7,7 @@ const TrackerContext = createContext<TrackerProps|undefined>(undefined)
 
 interface TrackerProps {
     currentTimeTracker: timeTracker|null,
+    setCurrentTimeTracker: (timeTracker: timeTracker) => void,
     startTrackToDo: (toDo: toDo) => void,
     stopCurrentTimeTrack: () => void,
 }
@@ -46,7 +47,7 @@ export const TrackerProvider = ({children}: PropsWithChildren) => {
         }
     }
 
-    return <TrackerContext.Provider value={{currentTimeTracker, startTrackToDo, stopCurrentTimeTrack}}>
+    return <TrackerContext.Provider value={{currentTimeTracker, setCurrentTimeTracker, startTrackToDo, stopCurrentTimeTrack}}>
         {children}
     </TrackerContext.Provider>
 }

resources/js/pages/TimeTrackersIndex.tsx

@@ -12,12 +12,18 @@ const TimeTrackersIndex = () => {
     const {loading, 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)
     const {startTrackToDo} = useTracker()
 
     useEffect(() => {
         fetchTimeTrackers()
     }, [])
 
+    useEffect(() => {
+        setShowTrackers(null)
+        fetchTimeTrackers()
+    }, [reload])
+
     const fetchTimeTrackers = async () => {
         try {
             const res = await axiosGet('api/time-trackers')
@@ -51,7 +57,7 @@ const TimeTrackersIndex = () => {
         </ul>
 
         <Modal show={!!showTrackers} closeModal={() => setShowTrackers(null)}>
-            {showTrackers && <TimeTrackerEdit timeTracker={showTrackers} />}
+            {showTrackers && <TimeTrackerEdit timeTracker={showTrackers} setReload={setReload} />}
         </Modal>
     </div>
 }

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>
 }

resources/lang/en/auth.php

@@ -16,5 +16,6 @@ return [
     'failed' => 'These credentials do not match our records.',
     'password' => 'The provided password is incorrect.',
     'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
+    'unauthorized' => 'Unauthorized action',
 
 ];