feat: add time-entries route with crud and timers
This commit is contained in:
parent
f3549a9d73
commit
81273a8a9a
GPG key ID:
56E4A92C2C1E50BA
63
app/components/SectionTimeElapsed.tsx
Normal file
63
app/components/SectionTimeElapsed.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
import { TimeEntry } from '~/models/timeEntry.server';
|
||||||
|
import { Text } from '@mantine/core';
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
timeEntries: TimeEntry[];
|
||||||
|
total?: number;
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
additionalLabel?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SectionTimeElapsed = ({
|
||||||
|
timeEntries,
|
||||||
|
total,
|
||||||
|
size = 'sm',
|
||||||
|
additionalLabel
|
||||||
|
}: Props) => {
|
||||||
|
const getElapsedTime = useCallback(
|
||||||
|
() =>
|
||||||
|
timeEntries.reduce((acc, timeEntry) => {
|
||||||
|
if (!timeEntry.endTime) {
|
||||||
|
const diff =
|
||||||
|
(Date.now() - new Date(timeEntry.startTime).getTime()) / 1000;
|
||||||
|
return acc + diff;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
acc +
|
||||||
|
(new Date(timeEntry.endTime).getTime() -
|
||||||
|
new Date(timeEntry.startTime).getTime()) /
|
||||||
|
1000
|
||||||
|
);
|
||||||
|
}, 0),
|
||||||
|
[timeEntries]
|
||||||
|
);
|
||||||
|
|
||||||
|
const [elapsed, setElapsed] = useState(total || getElapsedTime());
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!timeEntries.some((timeEntry) => !timeEntry.endTime)) return;
|
||||||
|
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setElapsed(getElapsedTime());
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [timeEntries, getElapsedTime]);
|
||||||
|
|
||||||
|
const hours = Math.floor(elapsed / 60 / 60);
|
||||||
|
const minutes = Math.floor((elapsed - hours * 60 * 60) / 60);
|
||||||
|
const seconds = Math.floor(elapsed - hours * 60 * 60 - minutes * 60);
|
||||||
|
|
||||||
|
const hoursString = `${hours}:${minutes.toString().padStart(2, '0')}:${seconds
|
||||||
|
.toString()
|
||||||
|
.padStart(2, '0')}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Text size={size} color="darkgray">
|
||||||
|
{`${hoursString}${additionalLabel ? ` ${additionalLabel}` : ''}`}
|
||||||
|
</Text>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SectionTimeElapsed;
|
||||||
81
app/components/TimeElapsed.tsx
Normal file
81
app/components/TimeElapsed.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
startTime: Date | string;
|
||||||
|
endTime?: Date | string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TimeElapsed = ({ startTime, endTime }: Props) => {
|
||||||
|
const [elapsed, setElapsed] = useState(
|
||||||
|
(new Date(endTime || Date.now()).getTime() -
|
||||||
|
new Date(startTime).getTime()) /
|
||||||
|
1000
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (endTime) return;
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setElapsed(
|
||||||
|
(new Date(endTime || Date.now()).getTime() -
|
||||||
|
new Date(startTime).getTime()) /
|
||||||
|
1000
|
||||||
|
);
|
||||||
|
}, 1000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [startTime, endTime]);
|
||||||
|
|
||||||
|
const hours = Math.floor(elapsed / 60 / 60);
|
||||||
|
const minutes = Math.floor((elapsed - hours * 60 * 60) / 60);
|
||||||
|
const seconds = Math.floor(elapsed - hours * 60 * 60 - minutes * 60);
|
||||||
|
|
||||||
|
const hoursString = `${hours}:${minutes.toString().padStart(2, '0')}:${seconds
|
||||||
|
.toString()
|
||||||
|
.padStart(2, '0')}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
flexDirection: 'column',
|
||||||
|
margin: '0 1rem'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<pre
|
||||||
|
style={{
|
||||||
|
fontSize: '1rem',
|
||||||
|
margin: 0
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<code>{hoursString}</code>
|
||||||
|
</pre>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
fontSize: '0.75rem',
|
||||||
|
margin: 0
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{Intl.DateTimeFormat('it-IT', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
hour12: false
|
||||||
|
}).format(new Date(startTime))}
|
||||||
|
</span>
|
||||||
|
<span dangerouslySetInnerHTML={{ __html: ' — ' }} />
|
||||||
|
<span>
|
||||||
|
{endTime
|
||||||
|
? Intl.DateTimeFormat('it-IT', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
hour12: false
|
||||||
|
}).format(new Date(endTime))
|
||||||
|
: 'now'}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TimeElapsed;
|
||||||
400
app/routes/time-entries.tsx
Normal file
400
app/routes/time-entries.tsx
Normal file
|
|
@ -0,0 +1,400 @@
|
||||||
|
import { useState, useEffect, useMemo } from 'react';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Paper,
|
||||||
|
Text,
|
||||||
|
Menu,
|
||||||
|
ActionIcon,
|
||||||
|
Textarea,
|
||||||
|
Pagination,
|
||||||
|
NativeSelect,
|
||||||
|
Group,
|
||||||
|
Divider,
|
||||||
|
useMantineTheme,
|
||||||
|
Progress,
|
||||||
|
Badge,
|
||||||
|
ThemeIcon,
|
||||||
|
Alert
|
||||||
|
} from '@mantine/core';
|
||||||
|
import { json, LoaderArgs, MetaFunction, redirect } from '@remix-run/node';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
Link,
|
||||||
|
Outlet,
|
||||||
|
useCatch,
|
||||||
|
useLoaderData,
|
||||||
|
useSearchParams
|
||||||
|
} from '@remix-run/react';
|
||||||
|
import {
|
||||||
|
AlertTriangle,
|
||||||
|
Edit,
|
||||||
|
Edit3,
|
||||||
|
Play,
|
||||||
|
Power,
|
||||||
|
Settings,
|
||||||
|
Square,
|
||||||
|
Trash
|
||||||
|
} from 'react-feather';
|
||||||
|
import { requireUserId } from '~/session.server';
|
||||||
|
import { getTimeEntries, TimeEntry } from '~/models/timeEntry.server';
|
||||||
|
import TimeElapsed from '~/components/TimeElapsed';
|
||||||
|
import SectionTimeElapsed from '~/components/SectionTimeElapsed';
|
||||||
|
|
||||||
|
export const meta: MetaFunction = () => {
|
||||||
|
return {
|
||||||
|
title: 'Time entries | WorkTimer',
|
||||||
|
description: 'Manage your time entries. You must be logged in to do this.'
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function loader({ request }: LoaderArgs) {
|
||||||
|
const userId = await requireUserId(request);
|
||||||
|
if (!userId) return redirect('/login');
|
||||||
|
|
||||||
|
const url = new URL(request.url);
|
||||||
|
const page = url.searchParams.get('page')
|
||||||
|
? parseInt(url.searchParams.get('page')!, 10)
|
||||||
|
: 1;
|
||||||
|
const size = url.searchParams.get('size')
|
||||||
|
? parseInt(url.searchParams.get('size')!, 10)
|
||||||
|
: 25;
|
||||||
|
const orderBy = url.searchParams.get('orderBy') || 'createdAt';
|
||||||
|
const order = url.searchParams.get('order') || 'desc';
|
||||||
|
|
||||||
|
return json({
|
||||||
|
...(await getTimeEntries({
|
||||||
|
page,
|
||||||
|
size,
|
||||||
|
userId,
|
||||||
|
orderBy,
|
||||||
|
order: order === 'asc' ? 'asc' : 'desc'
|
||||||
|
}))
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TimeEntriesPage() {
|
||||||
|
const data = useLoaderData<typeof loader>();
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
const theme = useMantineTheme();
|
||||||
|
|
||||||
|
const pageSize = useMemo(() => {
|
||||||
|
return parseInt(searchParams.get('size') || '25', 10);
|
||||||
|
}, [searchParams]);
|
||||||
|
const page = useMemo(() => {
|
||||||
|
return parseInt(searchParams.get('page') || '1', 10);
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
|
const timeEntriesPerDay = useMemo(() => {
|
||||||
|
const timeEntriesPerDay: Record<
|
||||||
|
string,
|
||||||
|
{ entries: typeof data.timeEntries; total: number }
|
||||||
|
> = {};
|
||||||
|
data.timeEntries.forEach((timeEntry) => {
|
||||||
|
const date = Intl.DateTimeFormat('it-IT', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit'
|
||||||
|
}).format(new Date(timeEntry.startTime));
|
||||||
|
|
||||||
|
if (!timeEntriesPerDay[date])
|
||||||
|
timeEntriesPerDay[date] = { entries: [], total: 0 };
|
||||||
|
timeEntriesPerDay[date].total +=
|
||||||
|
(timeEntry.endTime
|
||||||
|
? new Date(timeEntry.endTime).getTime() -
|
||||||
|
new Date(timeEntry.startTime).getTime()
|
||||||
|
: Date.now() - new Date(timeEntry.startTime).getTime()) / 1000;
|
||||||
|
timeEntriesPerDay[date].entries.push(timeEntry);
|
||||||
|
});
|
||||||
|
return timeEntriesPerDay;
|
||||||
|
}, [data.timeEntries]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Paper
|
||||||
|
component="fieldset"
|
||||||
|
aria-controls="time-entries"
|
||||||
|
p="sm"
|
||||||
|
shadow="sm"
|
||||||
|
radius="md"
|
||||||
|
withBorder
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
flexWrap: 'wrap'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
component={Link}
|
||||||
|
to="/time-entries/new"
|
||||||
|
variant="light"
|
||||||
|
radius={theme.radius.md}
|
||||||
|
leftIcon={<Play />}
|
||||||
|
>
|
||||||
|
Start
|
||||||
|
</Button>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'flex-end',
|
||||||
|
justifyContent: 'space-between'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<NativeSelect
|
||||||
|
data={[
|
||||||
|
{ label: '25 / page', value: '25' },
|
||||||
|
{ label: '50 / page', value: '50' },
|
||||||
|
{ label: '100 / page', value: '100' }
|
||||||
|
]}
|
||||||
|
value={pageSize}
|
||||||
|
onChange={(event) => {
|
||||||
|
setSearchParams({
|
||||||
|
page: page.toString(),
|
||||||
|
size: event.currentTarget.value
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{data.total / pageSize > 1 && (
|
||||||
|
<Pagination
|
||||||
|
style={{ marginLeft: 10 }}
|
||||||
|
page={page}
|
||||||
|
total={Math.ceil(data.total / pageSize)}
|
||||||
|
onChange={(page) => {
|
||||||
|
setSearchParams({
|
||||||
|
page: page.toString(),
|
||||||
|
size: pageSize.toString()
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Paper>
|
||||||
|
<Group
|
||||||
|
mt="lg"
|
||||||
|
mb="md"
|
||||||
|
mx="auto"
|
||||||
|
maw={500}
|
||||||
|
display="flex"
|
||||||
|
style={{
|
||||||
|
justifyContent: 'space-between'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text size="sm" color="darkgray">
|
||||||
|
{data.total} entries
|
||||||
|
</Text>
|
||||||
|
<Divider orientation="vertical" />
|
||||||
|
<SectionTimeElapsed
|
||||||
|
timeEntries={
|
||||||
|
data.timeEntries.filter(
|
||||||
|
(t) =>
|
||||||
|
new Date(t.startTime) >=
|
||||||
|
new Date(
|
||||||
|
new Date().getFullYear(),
|
||||||
|
new Date().getMonth(),
|
||||||
|
new Date().getDate(),
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
) as any as TimeEntry[]
|
||||||
|
}
|
||||||
|
size="sm"
|
||||||
|
additionalLabel="today"
|
||||||
|
/>
|
||||||
|
<Divider orientation="vertical" />
|
||||||
|
<SectionTimeElapsed
|
||||||
|
timeEntries={
|
||||||
|
data.timeEntries.filter(
|
||||||
|
(t) =>
|
||||||
|
new Date(t.startTime) >=
|
||||||
|
new Date(new Date().getFullYear(), new Date().getMonth(), 1)
|
||||||
|
) as any as TimeEntry[]
|
||||||
|
}
|
||||||
|
size="sm"
|
||||||
|
additionalLabel="this month"
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
|
|
||||||
|
<div role="region" id="time-entries">
|
||||||
|
{Object.entries(timeEntriesPerDay).map(([date, timeEntries]) => (
|
||||||
|
<section key={date}>
|
||||||
|
<header
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
style={{
|
||||||
|
marginRight: 'auto'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{date}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<SectionTimeElapsed
|
||||||
|
timeEntries={timeEntries.entries as any as TimeEntry[]}
|
||||||
|
size="md"
|
||||||
|
total={timeEntries.total}
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{timeEntries.entries.map((timeEntry) => (
|
||||||
|
<Paper
|
||||||
|
key={timeEntry.id}
|
||||||
|
shadow="sm"
|
||||||
|
p="md"
|
||||||
|
radius="md"
|
||||||
|
mb="sm"
|
||||||
|
display="flex"
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
flexDirection: 'column'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
width: '100%'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
marginRight: 'auto'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{timeEntry.description}
|
||||||
|
</span>
|
||||||
|
{timeEntry.projectId && timeEntry.project && (
|
||||||
|
<Badge color={timeEntry.project.color}>
|
||||||
|
{timeEntry.project.name}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
<TimeElapsed
|
||||||
|
startTime={timeEntry.startTime}
|
||||||
|
endTime={timeEntry.endTime}
|
||||||
|
/>
|
||||||
|
<Menu shadow="md" width={200}>
|
||||||
|
<Menu.Target>
|
||||||
|
<ActionIcon title="Edit" mr="xs">
|
||||||
|
<Settings size={14} />
|
||||||
|
</ActionIcon>
|
||||||
|
</Menu.Target>
|
||||||
|
|
||||||
|
<Menu.Dropdown>
|
||||||
|
<Menu.Label>Edit time entry</Menu.Label>
|
||||||
|
<Menu.Item
|
||||||
|
component={Link}
|
||||||
|
to={`/time-entries/${timeEntry.id}`}
|
||||||
|
icon={
|
||||||
|
<Edit3 size={14} color={theme.colors.yellow[8]} />
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</Menu.Item>
|
||||||
|
<Form
|
||||||
|
method="delete"
|
||||||
|
action={`/time-entries/${timeEntry.id}`}
|
||||||
|
>
|
||||||
|
<Menu.Item
|
||||||
|
component="button"
|
||||||
|
type="submit"
|
||||||
|
icon={<Trash size={14} color={theme.colors.red[8]} />}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Menu.Item>
|
||||||
|
</Form>
|
||||||
|
</Menu.Dropdown>
|
||||||
|
</Menu>
|
||||||
|
{timeEntry.endTime ? (
|
||||||
|
<Form method="post" action="/time-entries/new">
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="startTime"
|
||||||
|
value={new Date(Date.now()).toISOString()}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="description"
|
||||||
|
value={timeEntry.description}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="projectId"
|
||||||
|
value={timeEntry.projectId}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="userId"
|
||||||
|
value={timeEntry.userId}
|
||||||
|
/>
|
||||||
|
<ActionIcon
|
||||||
|
type="submit"
|
||||||
|
title="Start new entry with same description"
|
||||||
|
>
|
||||||
|
<ThemeIcon variant="light">
|
||||||
|
<Play size={14} color={theme.colors.blue[7]} />
|
||||||
|
</ThemeIcon>
|
||||||
|
</ActionIcon>
|
||||||
|
</Form>
|
||||||
|
) : (
|
||||||
|
<Form
|
||||||
|
method="patch"
|
||||||
|
action={`/time-entries/${timeEntry.id}`}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="endTime"
|
||||||
|
value={new Date().toISOString()}
|
||||||
|
/>
|
||||||
|
<ActionIcon
|
||||||
|
type="submit"
|
||||||
|
variant="filled"
|
||||||
|
title="Stop"
|
||||||
|
style={{
|
||||||
|
backgroundColor: theme.colors.red[7],
|
||||||
|
color: 'white',
|
||||||
|
borderRadius: '50%'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Square size={12} fill="currentColor" />
|
||||||
|
</ActionIcon>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Paper>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ErrorBoundary({ error }: { error: Error }) {
|
||||||
|
console.error(error);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Alert icon={<AlertTriangle size={14} />} title="Error" color="red">
|
||||||
|
An unexpected error occurred: {error.message}
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CatchBoundary() {
|
||||||
|
const caught = useCatch();
|
||||||
|
|
||||||
|
if (caught.status === 404) {
|
||||||
|
return (
|
||||||
|
<Alert icon={<AlertTriangle size={14} />} title="Error" color="red">
|
||||||
|
Not found
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error(`Unexpected caught response with status: ${caught.status}`);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue