add linter

2024-02-18 23:30:50 +01:00
parent b53d378ec1
commit ebfc56eba3
34 changed files with 568 additions and 262 deletions
--- a/resources/js/pages/ToDos/ToDoShow.tsx
+++ b/resources/js/pages/ToDos/ToDoShow.tsx
@@ -0,0 +1,131 @@
+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,
+}