upfate timetrackers & todo

This commit is contained in:
Romulus21
2024-02-24 22:54:02 +01:00
parent d99b94be55
commit a818daeb38
9 changed files with 89 additions and 29 deletions

View File

@@ -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')));
}

View File

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

View File

@@ -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'],
];
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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',
];