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

6
resources/js/components/Card.tsx
View File

@@ -1,9 +1,9 @@
import React, {FC} from "react";
import {PropsWithChildren} from "react";
import React, {FC} from "react"
import {PropsWithChildren} from "react"
const Card: FC<PropsWithChildren<CardProps>> = ({children, className = ''}) => {
return <div className={`${className} border m-1 rounded py-1 px-2`}>
return <div className={`${className} m-1 rounded border px-2 py-1`}>
{children}
</div>
}

28
resources/js/components/Field.tsx
View File

@@ -10,7 +10,7 @@ const Field: FC<FieldProps> = ({children, type = 'text', className = '', classNa
htmlFor={props.id ?? undefined}>
{children}
</label>}
<input className={`${className} w-full mt-2 rounded dark:bg-gray-700`}
<input className={`${className} mt-2 w-full rounded dark:bg-gray-700`}
type={type}
{...props}/>
<div className={`error-message`} />
@@ -24,7 +24,7 @@ interface FieldProps {
type?: HTMLInputTypeAttribute,
name: string,
id?: string,
value: any,
value: string|number|undefined,
placeholder?: string,
autoFocus?: boolean,
className?: string,
@@ -32,3 +32,27 @@ interface FieldProps {
step?: string,
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
}
export const TextArea: FC<TextAreaProps> = ({children, name, value, className = '', classNameForm = '', ...props}) => {
return <div className={`form-control ${classNameForm}`}>
{children && <label className="block text-gray-900 dark:text-gray-200"
htmlFor={props.id ?? undefined}>
{children}
</label>}
<textarea name={name} className={`${className} mt-2 w-full rounded dark:bg-gray-700`} {...props}>
{value}
</textarea>
<div className={`error-message`}/>
</div>
}
interface TextAreaProps {
children?: ReactElement|string,
id?: string,
name: string,
value: string|undefined,
className?: string,
classNameForm?: string,
onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void,
}

10
resources/js/components/Header.tsx
View File

@@ -1,7 +1,7 @@
import React from "react"
import {Link, NavLink, useLocation} from "react-router-dom"
import useAuthUser from "../hooks/AuthUser";
import Tracker from "./TimeTrackers/Tracker";
import useAuthUser from "../hooks/AuthUser"
import Tracker from "./TimeTrackers/Tracker"
const Header = () => {
@@ -10,8 +10,8 @@ const Header = () => {
console.log(authUser)
return <header className="bg-blue-700 text-white text-xl">
<div className="flex py-3 px-5 justify-between">
return <header className="bg-blue-700 text-xl text-white">
<div className="flex justify-between px-5 py-3">
<div>
<Link to="/">Ticcat</Link>
</div>
@@ -26,7 +26,7 @@ const Header = () => {
{/*<Link to="/sinscrire">S'inscrire</Link>*/}
</span>}
</div>
<nav className="bg-gray-600 px-5 flex gap-5">
<nav className="flex gap-5 bg-gray-600 px-5">
<NavLink to="/">ToDos</NavLink>
<NavLink to="/times">Times</NavLink>
</nav>

6
resources/js/components/Modals.tsx
View File

@@ -1,4 +1,4 @@
import React, {FC, FormEvent, PropsWithChildren, ReactNode} from "react"
import React, {FC, FormEvent, ReactNode} from "react"
import ReactDOM from "react-dom"
export const Modal: FC<ModalProps> = ({children, show, closeModal, ...props}) => {
@@ -9,7 +9,7 @@ export const Modal: FC<ModalProps> = ({children, show, closeModal, ...props}) =>
}
return show && <Overlay onClick={closeModal}>
<div className="dark:bg-gray-900 cursor-auto dark:text-white bg-white"
<div className="cursor-auto bg-white dark:bg-gray-900 dark:text-white"
onClick={stopEvent}
{...props}>
{children}
@@ -29,7 +29,7 @@ const Overlay: FC<OverlayProps> = ({children, ...props}) => {
if (app) {
return ReactDOM.createPortal(
<button className={"flex justify-center items-center w-full fixed inset-0 z-10 bg-gray-900/50"}
<button className={"fixed inset-0 z-10 flex w-full items-center justify-center bg-gray-900/50"}
{...props}>
{children}
</button>,

6
resources/js/components/SVG.tsx
View File

@@ -23,6 +23,12 @@ export const DraggableSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
...props
})
export const EditSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
viewBox: "0 0 576 512",
paths: <path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z" />,
...props
})
export const PauseSVG: FC<ComponentProps<any>> = (props) => SVGSkeleton({
paths: <path d="M16 19q-.825 0-1.412-.587T14 17V7q0-.825.588-1.412T16 5q.825 0 1.413.588T18 7v10q0 .825-.587 1.413T16 19m-8 0q-.825 0-1.412-.587T6 17V7q0-.825.588-1.412T8 5q.825 0 1.413.588T10 7v10q0 .825-.587 1.413T8 19"/>,
...props

13
resources/js/components/TimeTrackers/TimeTrackerEdit.tsx
View File

@@ -1,20 +1,17 @@
import React, {FC, FormEvent, ReactEventHandler, useState} from "react"
import Field from "../Field";
import {timeTracker} from "../../utilities/types";
import React, {FC, FormEvent, useState} from "react"
import Field from "../Field"
import {timeTracker} from "../../utilities/types"
const TimeTrackerEdit: FC<TimeTrackerEditProps> = ({timeTracker}) => {
const [trackerForm, setTrackerForm] = useState<timeTracker>(timeTracker)
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
console.log(trackerForm, event.target.value)
setTrackerForm({...trackerForm, [event.target.name]: event.target.value.replace('T', ' ')})
}
const onSubmit = (event: FormEvent) => {
event.preventDefault()
console.log(trackerForm)
console.log('submit', trackerForm, event)
}
return <form onSubmit={onSubmit}>
@@ -27,7 +24,7 @@ const TimeTrackerEdit: FC<TimeTrackerEditProps> = ({timeTracker}) => {
value={trackerForm.end_at}
onChange={handleChange}/>
<button type="submit">Valider</button>
<button type="submit" onClick={onSubmit}>Valider</button>
</form>
}

10
resources/js/components/TimeTrackers/Tracker.tsx
View File

@@ -1,7 +1,7 @@
import React, {useEffect, useState} from "react"
import useTracker from "../../hooks/TraskerHook"
import {Link} from "react-router-dom";
import {StopSVG} from "../SVG";
import {Link} from "react-router-dom"
import {StopSVG} from "../SVG"
const Tracker = () => {
@@ -14,14 +14,14 @@ const Tracker = () => {
useEffect(() => {
setTimeout(() => setTimer(formatTimer(currentTimeTracker?.start_at)), 1000)
}, [timer]);
}, [timer])
const formatTimer = (startAt: string|null|undefined) => {
if (!startAt) {
return '--:--'
}
let timer = Math.floor(((new Date()).getTime() - (new Date(startAt)).getTime()) / 1000)
return timer.durationify()
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

10
resources/js/components/toDos/ToDoFinish.tsx
View File

@@ -1,7 +1,7 @@
import React, {FC, useEffect, useState} from "react"
import useAxiosTools from "../../hooks/AxiosTools";
import {toDo} from "../../utilities/types";
import {PlaySVG} from "../SVG";
import useAxiosTools from "../../hooks/AxiosTools"
import {toDo} from "../../utilities/types"
import {PlaySVG} from "../SVG"
const ToDoFinish: FC<ToDoFinishProps> = ({reload}) => {
@@ -36,14 +36,14 @@ const ToDoFinish: FC<ToDoFinishProps> = ({reload}) => {
}
return <div>
<button className="flex justify-between items-center w-full bg-blue-700 px-2 py-1 rounded cursor-pointer"
<button className="flex w-full cursor-pointer items-center justify-between rounded bg-blue-700 px-2 py-1"
onClick={handleShow}>
<h2 className="inline">Tâches terminées</h2>
<span><PlaySVG className={`w-4 transition ${showTodos ? 'rotate-90' : 'rotate-180'}`} /></span>
</button>
{errorLabel()}
{showTodos && <ul className="list-disc m-2">
{showTodos && <ul className="m-2 list-disc">
{toDos.map(toDo => <li key={toDo.id} className="flex gap-2">
<span>{toDo.checked ? (new Date(toDo.checked)).toSmallFrDate() : ''}</span>
<span className="flex-1">{toDo.name}</span>

24
resources/js/components/toDos/ToDoIndex.tsx
View File

@@ -1,11 +1,9 @@
import React, {FC, useEffect, useState} from "react";
import useAxiosTools from "../../hooks/AxiosTools";
import {toDo} from "../../utilities/types";
import {Link} from "react-router-dom";
import useTracker from "../../hooks/TraskerHook";
import {Simulate} from "react-dom/test-utils";
import load = Simulate.load;
import {DraggableSVG, PauseSVG, PlaySVG} from "../SVG";
import React, {FC, useEffect, useState} from "react"
import useAxiosTools from "../../hooks/AxiosTools"
import {toDo} from "../../utilities/types"
import {Link} from "react-router-dom"
import useTracker from "../../hooks/TraskerHook"
import {DraggableSVG, PauseSVG, PlaySVG} from "../SVG"
const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
@@ -21,7 +19,7 @@ const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
if (reload && !loading) {
fetchToDos()
}
}, [reload]);
}, [reload])
const fetchToDos = async () => {
try {
@@ -57,18 +55,18 @@ const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {
onChange={() =>toggleCheck(toDo)}
className=""/>
<Link to={"/todos/" + toDo.id}
className={`${toDo.checked ? 'line-through' : ''} flex-1 flex justify-between`}>
className={`${toDo.checked ? 'line-through' : ''} flex flex-1 justify-between`}>
<span>{toDo.name}</span>
<span className="text-gray-400 text-md mr-2">{toDo.duration.durationify()}</span>
<span className="mr-2 text-sm text-gray-400">{toDo.duration.durationify()}</span>
</Link>
{toDo.id === currentTimeTracker?.to_do?.id
? <button className="cursor-pointer w-7 justify-center flex items-center"
? <button className="flex w-7 cursor-pointer items-center justify-center"
type="button"
title="Commencer"
onClick={stopCurrentTimeTrack}>
<PauseSVG className="w-7"/>
</button>
: <button className="cursor-pointer w-7 justify-center flex items-center"
: <button className="flex w-7 cursor-pointer items-center justify-center"
type="button"
title="Commencer"
onClick={() => startTrackToDo(toDo)}>

101
resources/js/components/toDos/ToDoShow.tsx
View File

@@ -1,101 +0,0 @@
import React, {FC, HTMLInputTypeAttribute, ReactElement, useEffect, useState} from "react"
import {useParams} from "react-router-dom";
import useAxiosTools from "../../hooks/AxiosTools";
import {timeTracker, toDo} from "../../utilities/types";
const ToDoShow = () => {
const {id} = useParams()
console.log(id)
const {setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
const [toDo, setToDo] = 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)
}
}
return <div>
<h1>{toDo?.name}</h1>
<h1>{toDo?.description}</h1>
{toDo && <ToDoTimeTrackers toDo={toDo} />}
</div>
}
export default ToDoShow
const ToDoTimeTrackers: FC<ToDoTimeTrackers> = ({toDo: toDo}) => {
const {setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = 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>
<div>Temps passé : {timeSpend()}</div>
<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>{timeTracker.start_at ? (new Date(timeTracker.start_at)).toSmallFrDate() : ''}</td>
<td>{timeTracker.end_at ? (new Date(timeTracker.end_at)).toSmallFrDate() : ''}</td>
<td className="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,
}

8
resources/js/components/toDos/ToDoStore.tsx
View File

@@ -1,6 +1,6 @@
import React, {FC, FormEvent, useState} from "react"
import Field from "../Field";
import useAxiosTools from "../../hooks/AxiosTools";
import Field from "../Field"
import useAxiosTools from "../../hooks/AxiosTools"
const ToDoStore: FC<ToDoStoreProps> = ({setReload}) => {
@@ -24,10 +24,10 @@ const ToDoStore: FC<ToDoStoreProps> = ({setReload}) => {
<Field name="todo"
value={toDo}
classNameForm="flex-1"
className="h-10 !mt-0 rounded-r-none px-2"
className="!mt-0 h-10 rounded-r-none px-2"
onChange={event => setToDo(event.target.value)} />
<button type="submit"
className="bg-blue-900 h-10 rounded-r px-5">
className="h-10 rounded-r bg-blue-900 px-5">
Ajouter
</button>
</form>