Romain/ticcat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add linter

Browse Source
This commit is contained in:
Romulus21
2024-02-18 23:30:50 +01:00
parent b53d378ec1
commit ebfc56eba3
34 changed files with 568 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/pages/App.tsx
View File

@@ -1,7 +1,7 @@
import React from "react"
import Router from "./Router"
import {AuthUserProvider} from "../hooks/AuthUser";
import {TrackerProvider} from "../hooks/TraskerHook";
import {AuthUserProvider} from "../hooks/AuthUser"
import {TrackerProvider} from "../hooks/TraskerHook"
const App = () => {

19
resources/js/pages/Auth/ForgotPassword.tsx
View File

@@ -1,9 +1,6 @@
import React, {FormEvent, SyntheticEvent, useState} from "react"
import Field from "../../components/Field";
import axios from "axios";
import {useNavigate} from "react-router-dom";
import useAuthUser from "../../hooks/AuthUser";
import useAxiosTools from "../../hooks/AxiosTools";
import React, {FormEvent, useState} from "react"
import Field from "../../components/Field"
import useAxiosTools from "../../hooks/AxiosTools"
const ForgotPassword = () => {
@@ -16,15 +13,15 @@ const ForgotPassword = () => {
try {
cleanErrors()
await axiosGet('/sanctum/csrf-cookie')
const res = await axiosPost('/api/forgot', {email})
await axiosPost('/api/forgot', {email})
setMessage(true)
} catch (e) {
errorCatch(e)
} catch (error) {
errorCatch(error)
}
}
return <div>
<form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
<form onSubmit={handleSubmit} className="mx-auto mt-10 w-96 border p-3 shadow">
<h1 className="text-center">Mot de passe oublié</h1>
{message && <p className="bg-green-600">Un email vous a été envoyé pour modifier le mot de passe.</p>}
@@ -37,7 +34,7 @@ const ForgotPassword = () => {
value={email}
onChange={event => setEmail(event.target.value)}
autoFocus>Email</Field>
<button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
<button type="submit" className="btn-primary mt-5 block w-full text-lg">Valider</button>
</form>
</div>
}

19
resources/js/pages/Auth/Login.tsx
View File

@@ -1,10 +1,9 @@
import React, {FormEvent, SyntheticEvent, useState} from "react"
import axios from "axios";
import {Link, useNavigate} from "react-router-dom";
import useAxiosTools from "../../hooks/AxiosTools";
import Field from "../../components/Field";
import useAuthUser from "../../hooks/AuthUser";
import Card from "../../components/Card";
import React, {FormEvent, useState} from "react"
import {Link, useNavigate} from "react-router-dom"
import useAxiosTools from "../../hooks/AxiosTools"
import Field from "../../components/Field"
import useAuthUser from "../../hooks/AuthUser"
import Card from "../../components/Card"
const Login = () => {
@@ -28,9 +27,9 @@ const Login = () => {
}
return <div>
<Card className="w-96 mx-auto mt-10 p-2 overflow-hidden">
<Card className="mx-auto mt-10 w-96 overflow-hidden p-2">
<form onSubmit={handleSubmit}>
<h1 className="text-center bg-blue-500 -mx-2 -mt-1 text-lg font-bold px-2 py-1 mb-2">
<h1 className="-mx-2 -mt-1 mb-2 bg-blue-500 px-2 py-1 text-center text-lg font-bold">
Connexion
</h1>
{errorLabel()}
@@ -46,7 +45,7 @@ const Login = () => {
placeholder="******"
value={password}
onChange={event => setPassword(event.target.value)}>Mot de passe</Field>
<button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
<button type="submit" className="btn-primary mt-5 block w-full text-lg">Valider</button>
<Link to="/mot-de-passe-oubliee" className="mt-2 inline-block">Mot de passe oublié ?</Link>
</form>
</Card>

10
resources/js/pages/Auth/Profile.tsx
View File

@@ -1,9 +1,9 @@
import React, {FormEvent, useState} from "react"
import useAuthUser from "../../hooks/AuthUser"
import Field from "../../components/Field";
import useAxiosTools from "../../hooks/AxiosTools";
import PageLayout from "../../components/PageLayout";
import Card from "../../components/Card";
import Field from "../../components/Field"
import useAxiosTools from "../../hooks/AxiosTools"
import PageLayout from "../../components/PageLayout"
import Card from "../../components/Card"
const Profile = () => {
@@ -65,7 +65,7 @@ const Profile = () => {
Longitude
</Field>
<div className="self-end">
<button type="submit" className="btn-primary w-24 h-10">Valider</button>
<button type="submit" className="btn-primary h-10 w-24">Valider</button>
</div>
</div>
</form>}

20
resources/js/pages/Auth/Register.tsx
View File

@@ -1,9 +1,9 @@
import React, {ChangeEvent, FormEvent, SyntheticEvent, useState} from "react"
import Field from "../../components/Field";
import axios from "axios";
import {useNavigate} from "react-router-dom";
import Card from "../../components/Card";
import useAuthUser from "../../hooks/AuthUser";
import React, {FormEvent, useState} from "react"
import Field from "../../components/Field"
import axios from "axios"
import {useNavigate} from "react-router-dom"
import Card from "../../components/Card"
import useAuthUser from "../../hooks/AuthUser"
const Register = () => {
@@ -26,10 +26,10 @@ const Register = () => {
}
return <div>
<Card className="w-96 mx-auto mt-10 p-2 overflow-hidden">
<Card className="mx-auto mt-10 w-96 overflow-hidden p-2">
<form onSubmit={handleSubmit}>
<h1 className="text-center bg-blue-500 -mx-2 -mt-1 text-lg font-bold px-2 py-1 mb-2">
S'inscrire
<h1 className="-mx-2 -mt-1 mb-2 bg-blue-500 px-2 py-1 text-center text-lg font-bold">
S&apos;inscrire
</h1>
<Field placeholder="Nom"
@@ -49,7 +49,7 @@ const Register = () => {
value={password}
onChange={event => setPassword(event.target.value)}
autoFocus>Mot de passe</Field>
<button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
<button type="submit" className="btn-primary mt-5 block w-full text-lg">Valider</button>
</form>
</Card>
</div>

17
resources/js/pages/Auth/Reset.tsx
View File

@@ -1,13 +1,12 @@
import Field from "../../components/Field";
import React, {FormEvent, useState} from "react";
import {useNavigate, useParams} from "react-router-dom";
import useAuthUser from "../../hooks/AuthUser";
import axios from "axios";
import useAxiosTools from "../../hooks/AxiosTools";
import Field from "../../components/Field"
import React, {FormEvent, useState} from "react"
import {useNavigate, useParams} from "react-router-dom"
import useAuthUser from "../../hooks/AuthUser"
import useAxiosTools from "../../hooks/AxiosTools"
const Reset = () => {
let {token} = useParams()
const {token} = useParams()
const navigate = useNavigate()
const {setAuthUser} = useAuthUser()
const [email, setEmail] = useState('')
@@ -29,7 +28,7 @@ const Reset = () => {
}
return <div>
<form onSubmit={handleSubmit} className="w-96 mx-auto mt-10 border shadow p-3">
<form onSubmit={handleSubmit} className="mx-auto mt-10 w-96 border p-3 shadow">
<h1 className="text-center">Modifier voter mot de passe</h1>
{errorLabel()}
@@ -50,7 +49,7 @@ const Reset = () => {
placeholder="******"
value={samePassword}
onChange={event => setSamePassword(event.target.value)}>Confirmation du mot de passe</Field>
<button type="submit" className="mt-5 btn-primary w-full block text-lg">Valider</button>
<button type="submit" className="btn-primary mt-5 block w-full text-lg">Valider</button>
</form>
</div>
}

8
resources/js/pages/Home.tsx
View File

@@ -1,8 +1,8 @@
import React, {useState} from "react"
import useAuthUser from "../hooks/AuthUser";
import ToDoStore from "../components/toDos/ToDoStore";
import ToDoIndex from "../components/toDos/ToDoIndex";
import ToDoFinish from "../components/toDos/ToDoFinish";
import useAuthUser from "../hooks/AuthUser"
import ToDoStore from "../components/toDos/ToDoStore"
import ToDoIndex from "../components/toDos/ToDoIndex"
import ToDoFinish from "../components/toDos/ToDoFinish"
const Home = () => {

24
resources/js/pages/Router.tsx
View File

@@ -1,19 +1,19 @@
import React from "react";
import {BrowserRouter, Route, Routes} from "react-router-dom";
import {Suspense} from "react";
import Profile from "./Auth/Profile";
import Login from "./Auth/Login";
import Header from "../components/Header";
import Home from "./Home";
import useAuthUser from "../hooks/AuthUser";
import Register from "./Auth/Register";
import ToDoShow from "../components/toDos/ToDoShow";
import TimeTrackersIndex from "./TimeTrackersIndex";
import React from "react"
import {BrowserRouter, Route, Routes} from "react-router-dom"
import {Suspense} from "react"
import Profile from "./Auth/Profile"
import Login from "./Auth/Login"
import Header from "../components/Header"
import Home from "./Home"
import useAuthUser from "../hooks/AuthUser"
import Register from "./Auth/Register"
import ToDoShow from "./ToDos/ToDoShow"
import TimeTrackersIndex from "./TimeTrackersIndex"
const Router = () => {
console.log('router')
const {authUser, loadingAuthUser, logout} = useAuthUser()
const {loadingAuthUser} = useAuthUser()
return <>
{loadingAuthUser ? '...loading'

27
resources/js/pages/TimeTrackersIndex.tsx
View File

@@ -1,14 +1,15 @@
import React, {useEffect, useState} from "react"
import useAxiosTools from "../hooks/AxiosTools";
import {timeTracker, toDo} from "../utilities/types";
import {PlaySVG} from "../components/SVG";
import useTracker from "../hooks/TraskerHook";
import {Modal} from "../components/Modals";
import TimeTrackerEdit from "../components/TimeTrackers/TimeTrackerEdit";
import useAxiosTools from "../hooks/AxiosTools"
import {timeTracker} from "../utilities/types"
import {EditSVG, PlaySVG} from "../components/SVG"
import useTracker from "../hooks/TraskerHook"
import {Modal} from "../components/Modals"
import TimeTrackerEdit from "../components/TimeTrackers/TimeTrackerEdit"
import {Link} from "react-router-dom"
const TimeTrackersIndex = () => {
const {loading, setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
const {loading, setLoading, errorCatch, errorLabel, axiosGet} = useAxiosTools(true)
const [timeTrackers, setTimeTrackers] = useState<timeTracker[]>([])
const [showTrackers, setShowTrackers] = useState<timeTracker|null>(null)
const {startTrackToDo} = useTracker()
@@ -31,19 +32,19 @@ const TimeTrackersIndex = () => {
return <div className="p-5">
{errorLabel()}
<ul>
{timeTrackers.map(tracker => <li key={tracker.id} className="flex justify-between gap-5">
<span className="text-center w-36">{tracker.start_at ? (new Date(tracker.start_at)).toSmallFrDate() : ''}</span>
<span className="text-center w-36">{(new Date(tracker.end_at)).toSmallFrDate()}</span>
<span className={`flex-1 ${tracker.to_do?.checked ? 'line-through' : ''}`}>{tracker.to_do.name}</span>
{timeTrackers.map(tracker => <li key={tracker.id} className="flex justify-between gap-5 odd:bg-blue-950">
<span className="w-24 text-center">{tracker.start_at ? (new Date(tracker.start_at)).toSmallFrDate() : ''}</span>
<span className="w-24 text-center">{(new Date(tracker.end_at)).toSmallFrDate()}</span>
<Link to={"/todos/" + tracker.to_do?.id} className={`flex-1 ${tracker.to_do?.checked ? 'line-through' : ''}`}>{tracker.to_do.name}</Link>
<span className="flex gap-2">
{!tracker?.to_do?.checked && <button className="cursor-pointer w-7 justify-center flex items-center"
{!tracker?.to_do?.checked && <button className="flex w-7 cursor-pointer items-center justify-center"
type="button"
title="Commencer"
onClick={() => startTrackToDo(tracker.to_do)}>
<PlaySVG className="w-4"/>
</button>}
<button onClick={() => setShowTrackers(tracker)}>
Edit
<EditSVG className="w-5"/>
</button>
</span>
</li>)}

131
resources/js/pages/ToDos/ToDoShow.tsx Normal file
View File

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