feat(csv-export-time-entries): CSV-Export-Endpoint + Button in TimeEntries-Page [tsc:ok]
This commit is contained in:
parent
6d4213a31c
commit
c3ae8a1d1d
@ -1,5 +1,7 @@
|
||||
{
|
||||
"completed_features": [],
|
||||
"current_feature": "admin-user-management",
|
||||
"completed_features": [
|
||||
"admin-user-management"
|
||||
],
|
||||
"current_feature": "csv-export-time-entries",
|
||||
"started_at": "2026-05-23T05:10:51.482879"
|
||||
}
|
||||
@ -471,3 +471,15 @@ undefined
|
||||
- `05:12:47` **INFO** wrote 9929 chars in 82.5s (attempt 1)
|
||||
- `05:12:47` **INFO** Running tsc --noEmit on api…
|
||||
- `05:12:48` **INFO** tsc clean ✓
|
||||
- `05:12:48` **INFO** Committed feature admin-user-management
|
||||
- `05:12:49` **INFO** Pushed: rc=0
|
||||
|
||||
## Phase-3 Feature: csv-export-time-entries (2026-05-23 05:12:49)
|
||||
|
||||
- `05:12:49` **INFO** Description: CSV-Export-Endpoint + Button in TimeEntries-Page
|
||||
- `05:12:49` **INFO** Generating apps/api/src/routes/time-entries.ts (ERWEITERTE time-entries.ts — behalte alle bestehenden Routes (CRUD + r…)
|
||||
- `05:13:52` **INFO** wrote 6894 chars in 63.2s (attempt 1)
|
||||
- `05:13:52` **INFO** Generating apps/web/src/pages/TimeEntries.tsx (ERWEITERT — behalte Form + Filter + Liste. Füge Export-Button im Filte…)
|
||||
- `05:15:03` **INFO** wrote 8846 chars in 71.0s (attempt 1)
|
||||
- `05:15:03` **INFO** Running tsc --noEmit on api…
|
||||
- `05:15:04` **INFO** tsc clean ✓
|
||||
|
||||
@ -48,7 +48,7 @@ export default async function timeEntryRoutes(fastify: FastifyInstance) {
|
||||
const entries = await db
|
||||
.select()
|
||||
.from(timeEntries)
|
||||
.where(and(...filters))
|
||||
.where(filters.length ? and(...filters) : undefined as any)
|
||||
.orderBy(timeEntries.startTime)
|
||||
|
||||
return entries
|
||||
@ -179,13 +179,13 @@ export default async function timeEntryRoutes(fastify: FastifyInstance) {
|
||||
return reply.code(404).send({ message: "Time entry not found" })
|
||||
}
|
||||
|
||||
const updateData: any = { ...body }
|
||||
if (body.startTime) updateData.startTime = new Date(body.startTime)
|
||||
if (body.endTime) updateData.endTime = body.endTime ? new Date(body.endTime) : null
|
||||
|
||||
const [updated] = await db
|
||||
.update(timeEntries)
|
||||
.set(updateData)
|
||||
.set({
|
||||
...body,
|
||||
startTime: body.startTime ? new Date(body.startTime) : undefined,
|
||||
endTime: body.endTime ? new Date(body.endTime) : (body.endTime === null ? null : undefined)
|
||||
})
|
||||
.where(eq(timeEntries.id, id))
|
||||
.returning()
|
||||
|
||||
@ -212,7 +212,49 @@ export default async function timeEntryRoutes(fastify: FastifyInstance) {
|
||||
}
|
||||
|
||||
await db.delete(timeEntries).where(eq(timeEntries.id, id))
|
||||
|
||||
return reply.code(204).send()
|
||||
})
|
||||
|
||||
fastify.get("/export", async (request, reply) => {
|
||||
const { from, to } = request.query as { from?: string; to?: string }
|
||||
const user = request.user as { sub: string; role: string }
|
||||
|
||||
const filters = []
|
||||
if (user.role !== "admin") {
|
||||
filters.push(eq(timeEntries.userId, user.sub))
|
||||
}
|
||||
if (from) {
|
||||
filters.push(gte(timeEntries.startTime, new Date(from)))
|
||||
}
|
||||
if (to) {
|
||||
filters.push(lte(timeEntries.startTime, new Date(to)))
|
||||
}
|
||||
|
||||
const entries = await db
|
||||
.select()
|
||||
.from(timeEntries)
|
||||
.where(filters.length ? and(...filters) : undefined as any)
|
||||
.orderBy(timeEntries.startTime)
|
||||
|
||||
const header = "id,description,projectId,startTime,endTime,durationMinutes\n"
|
||||
const rows = entries.map(e => {
|
||||
const start = new Date(e.startTime)
|
||||
const end = e.endTime ? new Date(e.endTime) : null
|
||||
const duration = end ? Math.round((end.getTime() - start.getTime()) / 60000) : ""
|
||||
|
||||
return [
|
||||
e.id,
|
||||
`"${e.description.replace(/"/g, '""')}"`,
|
||||
e.projectId || "",
|
||||
start.toISOString(),
|
||||
end ? end.toISOString() : "",
|
||||
duration
|
||||
].join(",")
|
||||
}).join("\n")
|
||||
|
||||
reply
|
||||
.header("Content-Type", "text/csv")
|
||||
.header("Content-Disposition", "attachment; filename=time-entries.csv")
|
||||
.send(header + rows)
|
||||
})
|
||||
}
|
||||
@ -61,6 +61,13 @@ export default function TimeEntries() {
|
||||
})
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
const params = new URLSearchParams()
|
||||
if (filters.from) params.append("from", filters.from)
|
||||
if (filters.to) params.append("to", filters.to)
|
||||
window.location.href = `/api/time-entries/export.csv?${params.toString()}`
|
||||
}
|
||||
|
||||
if (isError) return <div className="p-6 text-red-500">Error loading time entries.</div>
|
||||
|
||||
return (
|
||||
@ -105,90 +112,95 @@ export default function TimeEntries() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
type="submit"
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:bg-blue-300 font-medium"
|
||||
className="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{createMutation.isPending ? "Saving..." : "Add Entry"}
|
||||
{createMutation.isPending ? "Saving..." : "Save Entry"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<div className="flex flex-col md:flex-row gap-4 items-end bg-gray-50 p-4 rounded-lg border border-gray-200">
|
||||
<div className="flex-1 w-full">
|
||||
<label className="block text-xs font-semibold text-gray-500 uppercase mb-1">Search</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
placeholder="Filter by description..."
|
||||
value={filters.search}
|
||||
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full md:w-48">
|
||||
<label className="block text-xs font-semibold text-gray-500 uppercase mb-1">From</label>
|
||||
<input
|
||||
type="date"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={filters.from}
|
||||
onChange={(e) => setFilters({ ...filters, from: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full md:w-48">
|
||||
<label className="block text-xs font-semibold text-gray-500 uppercase mb-1">To</label>
|
||||
<input
|
||||
type="date"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={filters.to}
|
||||
onChange={(e) => setFilters({ ...filters, to: e.target.value })}
|
||||
/>
|
||||
<div className="flex flex-col md:flex-row gap-4 items-end justify-between bg-gray-50 p-4 rounded-lg border border-gray-200">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 flex-1">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1 uppercase">Search</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
|
||||
value={filters.search}
|
||||
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
||||
placeholder="Filter by description..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1 uppercase">From</label>
|
||||
<input
|
||||
type="date"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
|
||||
value={filters.from}
|
||||
onChange={(e) => setFilters({ ...filters, from: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1 uppercase">To</label>
|
||||
<input
|
||||
type="date"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
|
||||
value={filters.to}
|
||||
onChange={(e) => setFilters({ ...filters, to: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div className="flex justify-center py-12"><LoadingSpinner /></div>
|
||||
) : filteredEntries.length === 0 ? (
|
||||
<EmptyState
|
||||
title="No time entries found"
|
||||
description="Try adjusting your filters or add a new entry above."
|
||||
/>
|
||||
<EmptyState message="No time entries found matching your criteria." />
|
||||
) : (
|
||||
<div className="overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200">
|
||||
<th className="px-6 py-3 text-sm font-semibold text-gray-600">Description</th>
|
||||
<th className="px-6 py-3 text-sm font-semibold text-gray-600">Start</th>
|
||||
<th className="px-6 py-3 text-sm font-semibold text-gray-600">End</th>
|
||||
<th className="px-6 py-3 text-sm font-semibold text-gray-600 text-right">Actions</th>
|
||||
<div className="overflow-x-auto rounded-lg border border-gray-200">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-gray-50 text-gray-600 font-medium border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="px-4 py-3">Description</th>
|
||||
<th className="px-4 py-3">Start</th>
|
||||
<th className="px-4 py-3">End</th>
|
||||
<th className="px-4 py-3 text-right">Duration</th>
|
||||
<th className="px-4 py-3 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{filteredEntries.map((entry) => (
|
||||
<tr key={entry.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-gray-900">{entry.description}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">
|
||||
{new Date(entry.startTime).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">
|
||||
{new Date(entry.endTime).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-right">
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(entry.id)}
|
||||
disabled={deleteMutation.isPending}
|
||||
className="text-red-600 hover:text-red-800 font-medium disabled:text-gray-400"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{filteredEntries.map((entry) => {
|
||||
const duration = entry.endTime && entry.startTime
|
||||
? (new Date(entry.endTime).getTime() - new Date(entry.startTime).getTime()) / 3600000
|
||||
: 0
|
||||
return (
|
||||
<tr key={entry.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-4 py-3 font-medium text-gray-900">{entry.description}</td>
|
||||
<td className="px-4 py-3 text-gray-500">{new Date(entry.startTime).toLocaleString()}</td>
|
||||
<td className="px-4 py-3 text-gray-500">{new Date(entry.endTime).toLocaleString()}</td>
|
||||
<td className="px-4 py-3 text-right text-gray-600">{duration.toFixed(2)}h</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(entry.id)}
|
||||
className="text-red-500 hover:text-red-700 font-medium"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user