Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ce224bc2a4 | ||
|
|
a264eb0dce | ||
|
|
afe57c4428 | ||
|
|
0ef0b3d5ca | ||
|
|
9cdd51fba8 |
+106
@@ -763,6 +763,112 @@ test("Projektvorlagen: aus Projekt sichern und anwenden", async ({ request, play
|
||||
expect((await request.delete(`/api/templates/${vorlage.id}`)).ok()).toBeTruthy();
|
||||
});
|
||||
|
||||
test("Verlauf blaettert per Cursor, ohne Zeilen zu verlieren", async ({ request, playwright }) => {
|
||||
await login(request, ADMIN);
|
||||
|
||||
// Die bisherigen Tests haben reichlich Verlauf erzeugt. Erst alles auf
|
||||
// einmal holen, dann in kleinen Seiten – beides muss dieselbe Menge sein.
|
||||
const alles = await (await request.get("/api/activity?limit=100")).json();
|
||||
expect(alles.activities.length).toBeGreaterThan(5);
|
||||
|
||||
const ids: string[] = [];
|
||||
let cursor: { vor: string; id: string } | null = null;
|
||||
for (let seite = 0; seite < 60; seite += 1) {
|
||||
const query = cursor
|
||||
? `?limit=3&vor=${encodeURIComponent(cursor.vor)}&id=${encodeURIComponent(cursor.id)}`
|
||||
: "?limit=3";
|
||||
const antwort = await request.get(`/api/activity${query}`);
|
||||
expect(antwort.ok()).toBeTruthy();
|
||||
const seiteBody = await antwort.json();
|
||||
ids.push(...seiteBody.activities.map((eintrag: { id: string }) => eintrag.id));
|
||||
if (!seiteBody.weitere) break;
|
||||
cursor = seiteBody.naechster;
|
||||
expect(cursor).not.toBeNull();
|
||||
}
|
||||
|
||||
// Der eigentliche Punkt: keine Dubletten und keine Luecken, auch wenn
|
||||
// mehrere Eintraege denselben Zeitstempel tragen.
|
||||
expect(new Set(ids).size).toBe(ids.length);
|
||||
expect(ids.length).toBe(alles.activities.length);
|
||||
|
||||
// Absteigend sortiert.
|
||||
const zeiten: number[] = alles.activities.map((eintrag: { createdAt: string }) =>
|
||||
Date.parse(eintrag.createdAt),
|
||||
);
|
||||
for (let i = 1; i < zeiten.length; i += 1) {
|
||||
expect(zeiten[i]).toBeLessThanOrEqual(zeiten[i - 1]);
|
||||
}
|
||||
|
||||
// Unbrauchbare Cursor fangen von vorn an, statt zu scheitern.
|
||||
const kaputt = await request.get("/api/activity?vor=keindatum&id=x");
|
||||
expect(kaputt.ok()).toBeTruthy();
|
||||
expect((await kaputt.json()).activities.length).toBeGreaterThan(0);
|
||||
|
||||
// Und ein fremdes Konto sieht ausschliesslich seinen eigenen Verlauf.
|
||||
const fremd = await playwright.request.newContext({
|
||||
baseURL: test.info().project.use.baseURL,
|
||||
});
|
||||
await login(fremd, ZWEITER);
|
||||
const fremderVerlauf = await (await fremd.get("/api/activity")).json();
|
||||
const eigeneIds = new Set(ids);
|
||||
for (const eintrag of fremderVerlauf.activities) {
|
||||
expect(eigeneIds.has(eintrag.id)).toBe(false);
|
||||
}
|
||||
await fremd.dispose();
|
||||
});
|
||||
|
||||
test("Volltextsuche findet auch Aufgaben", async ({ request, playwright }) => {
|
||||
await login(request, ADMIN);
|
||||
|
||||
const projekt = (
|
||||
await (await request.post("/api/projects", { data: { name: "Suchprojekt" } })).json()
|
||||
).project;
|
||||
|
||||
for (const task of [
|
||||
{
|
||||
title: "Dockerfile aufraeumen",
|
||||
description: "Die Schichten im Container neu ordnen, damit der Bau schneller wird.",
|
||||
},
|
||||
{ title: "Rechnungen exportieren", description: "Monatlicher Export als CSV." },
|
||||
{ title: "Erledigtes mit Container", description: "Auch das soll gefunden werden.", status: "DONE" },
|
||||
{ title: "Ohne Bezug", description: "Voellig anderer Inhalt." },
|
||||
]) {
|
||||
expect((await request.post(`/api/projects/${projekt.id}/tasks`, { data: task })).status()).toBe(
|
||||
201,
|
||||
);
|
||||
}
|
||||
|
||||
// Titel und Beschreibung werden durchsucht.
|
||||
const container = await (await request.get("/api/search?q=Container")).json();
|
||||
const titel = container.tasks.map((treffer: { title: string }) => treffer.title);
|
||||
expect(titel).toContain("Dockerfile aufraeumen");
|
||||
// Erledigtes bleibt drin – wer sucht, sucht oft gerade das Abgehakte.
|
||||
expect(titel).toContain("Erledigtes mit Container");
|
||||
expect(titel).not.toContain("Ohne Bezug");
|
||||
|
||||
// Deutsche Stammformen: "Rechnung" findet "Rechnungen".
|
||||
const rechnung = await (await request.get("/api/search?q=Rechnung")).json();
|
||||
expect(rechnung.tasks.map((t: { title: string }) => t.title)).toContain(
|
||||
"Rechnungen exportieren",
|
||||
);
|
||||
|
||||
// Das Projekt taucht in projectIds auf, damit das Brett es einblendet.
|
||||
expect(container.projectIds).toContain(projekt.id);
|
||||
|
||||
// Zu kurze Eingaben liefern leere Listen statt Unsinn.
|
||||
const kurz = await (await request.get("/api/search?q=a")).json();
|
||||
expect(kurz.tasks).toEqual([]);
|
||||
expect(kurz.hits).toEqual([]);
|
||||
|
||||
// Und ein fremdes Konto findet nichts davon.
|
||||
const fremd = await playwright.request.newContext({
|
||||
baseURL: test.info().project.use.baseURL,
|
||||
});
|
||||
await login(fremd, ZWEITER);
|
||||
expect((await (await fremd.get("/api/search?q=Container")).json()).tasks).toHaveLength(0);
|
||||
await fremd.dispose();
|
||||
});
|
||||
|
||||
test("Der Bildoptimierer ist zu", async ({ playwright }) => {
|
||||
// /_next/image reicht jedes Bild durch sharp und damit durch libvips, fuer
|
||||
// das es regelmaessig Schwachstellen gibt. Nebula benutzt next/image
|
||||
|
||||
+45
-2
@@ -244,11 +244,54 @@ test("Wochenrueckblick zeigt, was diese Woche passiert ist", async ({ page }) =>
|
||||
// Auch ueber die Schnellsuche erreichbar.
|
||||
await page.goto("/");
|
||||
await page.keyboard.press("Control+k");
|
||||
await page.getByPlaceholder(/Projekt, Notiz oder Bereich/).fill("Rückblick");
|
||||
await page.getByPlaceholder(/^Projekt, /).fill("Rückblick");
|
||||
await page.keyboard.press("Enter");
|
||||
await expect(page).toHaveURL(/\/rueckblick/);
|
||||
});
|
||||
|
||||
test("Globale Zeitleiste zeigt den Verlauf ueber alle Projekte", async ({ page }) => {
|
||||
// Vom Wochenrueckblick aus verlinkt.
|
||||
await page.goto("/rueckblick");
|
||||
await page.getByRole("link", { name: /Ganzer Verlauf/ }).click();
|
||||
await expect(page).toHaveURL(/\/verlauf$/);
|
||||
await expect(page.getByRole("heading", { name: "Verlauf", level: 1 })).toBeVisible();
|
||||
|
||||
// Eintraege mit Projektbezug – ohne den ist eine uebergreifende Liste
|
||||
// nicht zu lesen.
|
||||
await expect(page.getByRole("link", { name: "Oberflaechentest" }).first()).toBeVisible();
|
||||
await expect(page.getByText(/Vorgänge geladen|Vorgang geladen/)).toBeVisible();
|
||||
|
||||
// Auch ueber die Schnellsuche erreichbar.
|
||||
await page.goto("/");
|
||||
await page.keyboard.press("Control+k");
|
||||
await page.getByPlaceholder(/^Projekt, /).fill("Verlauf");
|
||||
await page.keyboard.press("Enter");
|
||||
await expect(page).toHaveURL(/\/verlauf/);
|
||||
});
|
||||
|
||||
test("Aufgabendashboard laesst sich durchsuchen", async ({ page }) => {
|
||||
await page.getByRole("link", { name: "Aufgaben", exact: true }).click();
|
||||
await expect(page.getByRole("heading", { name: "Aufgaben", level: 1 })).toBeVisible();
|
||||
|
||||
const suchfeld = page.getByLabel("Aufgaben durchsuchen");
|
||||
await expect(suchfeld).toBeVisible();
|
||||
|
||||
// Aus den frueheren Tests gibt es "Erste Aufgabe" und "Zweite Aufgabe".
|
||||
await suchfeld.fill("Erste");
|
||||
await expect(page.getByRole("listitem").filter({ hasText: "Erste Aufgabe" })).toBeVisible();
|
||||
await expect(page.getByRole("listitem").filter({ hasText: "Zweite Aufgabe" })).toBeHidden();
|
||||
|
||||
// Ohne Treffer erklaert der Leerzustand, worin gesucht wurde.
|
||||
await suchfeld.fill("gibtesnichtxyz");
|
||||
await expect(page.getByText("Keine Treffer")).toBeVisible();
|
||||
await expect(page.getByText(/Titel, Beschreibung, Labels und Projektname/)).toBeVisible();
|
||||
|
||||
// Zuruecksetzen bringt alles wieder.
|
||||
await page.getByRole("button", { name: "Suche zuruecksetzen" }).click();
|
||||
await expect(suchfeld).toHaveValue("");
|
||||
await expect(page.getByRole("listitem").filter({ hasText: "Erste Aufgabe" })).toBeVisible();
|
||||
});
|
||||
|
||||
test("Schnellsuche findet Projekt und Notiz", async ({ page }) => {
|
||||
await page.keyboard.press("Control+k");
|
||||
await expect(page.getByRole("dialog", { name: "Schnellsuche" })).toBeVisible();
|
||||
@@ -256,7 +299,7 @@ test("Schnellsuche findet Projekt und Notiz", async ({ page }) => {
|
||||
// Ohne Eingabe stehen Projekte und Bereiche bereit.
|
||||
await expect(page.getByRole("dialog").getByText("Oberflaechentest")).toBeVisible();
|
||||
|
||||
await page.getByPlaceholder(/Projekt, Notiz oder Bereich/).fill("Zaunkoenig");
|
||||
await page.getByPlaceholder(/^Projekt, /).fill("Zaunkoenig");
|
||||
await expect(page.getByRole("dialog").getByText(/in Oberflaechentest/)).toBeVisible();
|
||||
|
||||
// Enter springt zum ersten Treffer.
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nebula",
|
||||
"version": "1.9.0",
|
||||
"version": "1.10.0",
|
||||
"private": true,
|
||||
"description": "Nebula – Dashboard fuer Vibe-Coding Projekte mit Git-Anbindung (GitHub, GitLab, Gitea)",
|
||||
"scripts": {
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
-- Volltextsuche ueber Aufgaben.
|
||||
--
|
||||
-- Wie Note_fulltext_idx ein Ausdrucksindex: Prisma kann so etwas im Schema
|
||||
-- nicht abbilden und kennt ihn deshalb nicht. Nachgeprueft mit
|
||||
-- "prisma migrate diff" gegen das Schema - es kommt "empty migration"
|
||||
-- heraus, der Index wird also weder angelegt noch geloescht. Trotzdem beim
|
||||
-- Erzeugen kuenftiger Migrationen kurz hinsehen.
|
||||
--
|
||||
-- Faellt er doch einmal weg, funktioniert die Suche weiter, nur langsamer:
|
||||
-- Postgres berechnet to_tsvector dann je Zeile.
|
||||
--
|
||||
-- Der Ausdruck muss Zeichen fuer Zeichen dem in src/app/api/search/route.ts
|
||||
-- entsprechen, sonst greift der Index nicht. Die zweistellige Form von
|
||||
-- to_tsvector mit fester Konfiguration ist IMMUTABLE und damit indizierbar.
|
||||
--
|
||||
-- Anders als bei der Notiz ist auch die Beschreibung optional, deshalb steht
|
||||
-- coalesce um beide Spalten.
|
||||
|
||||
CREATE INDEX "Task_fulltext_idx" ON "Task"
|
||||
USING GIN (to_tsvector('german', coalesce("title", '') || ' ' || coalesce("description", '')));
|
||||
@@ -0,0 +1,58 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { requireUserApi } from "@/lib/auth/guard";
|
||||
import { prisma } from "@/lib/db";
|
||||
import {
|
||||
SEITEN_ORDNUNG,
|
||||
cursorAus,
|
||||
seitenBedingung,
|
||||
seitenGroesse,
|
||||
} from "@/lib/timeline";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
/**
|
||||
* Der Verlauf ueber alle Projekte, neueste Eintraege zuerst.
|
||||
*
|
||||
* Geblaettert wird per Cursor (`vor` = Zeitpunkt, `id` = Eintrag), nicht per
|
||||
* Offset – siehe lib/timeline. Zurueck kommt der Cursor fuer die naechste
|
||||
* Seite gleich mit, damit der Aufrufer ihn nicht selbst zusammensetzen muss.
|
||||
*/
|
||||
export async function GET(request: Request) {
|
||||
const auth = await requireUserApi();
|
||||
if (!auth.ok) return auth.response;
|
||||
|
||||
const params = new URL(request.url).searchParams;
|
||||
const cursor = cursorAus(params.get("vor"), params.get("id"));
|
||||
const take = seitenGroesse(params.get("limit"));
|
||||
|
||||
/**
|
||||
* Einen mehr holen als angefragt: daran laesst sich ablesen, ob es
|
||||
* weitergeht, ohne dafuer zaehlen zu muessen.
|
||||
*/
|
||||
const gefunden = await prisma.activity.findMany({
|
||||
where: seitenBedingung(auth.user.id, cursor),
|
||||
orderBy: SEITEN_ORDNUNG,
|
||||
take: take + 1,
|
||||
select: {
|
||||
id: true,
|
||||
kind: true,
|
||||
summary: true,
|
||||
createdAt: true,
|
||||
project: { select: { id: true, name: true, accent: true } },
|
||||
user: { select: { username: true, displayName: true } },
|
||||
},
|
||||
});
|
||||
|
||||
const weitere = gefunden.length > take;
|
||||
const activities = weitere ? gefunden.slice(0, take) : gefunden;
|
||||
const letzter = activities[activities.length - 1];
|
||||
|
||||
return NextResponse.json({
|
||||
activities: activities.map((eintrag) => ({
|
||||
...eintrag,
|
||||
createdAt: eintrag.createdAt.toISOString(),
|
||||
})),
|
||||
weitere,
|
||||
naechster: weitere && letzter ? { vor: letzter.createdAt.toISOString(), id: letzter.id } : null,
|
||||
});
|
||||
}
|
||||
@@ -12,16 +12,30 @@ interface Hit {
|
||||
snippet: string;
|
||||
}
|
||||
|
||||
interface TaskHit {
|
||||
projectId: string;
|
||||
taskId: string;
|
||||
title: string;
|
||||
status: string;
|
||||
/** Ausschnitt aus der Beschreibung; leer, wenn nur der Titel passte. */
|
||||
snippet: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Volltextsuche ueber Notizen.
|
||||
* Volltextsuche ueber Notizen und Aufgaben.
|
||||
*
|
||||
* Die Suche im Board arbeitet auf den bereits geladenen Projekten und deckt
|
||||
* Name, Kurzbeschreibung und Tags ab. Notizen liegen dort nicht vor – die
|
||||
* mitzuladen wuerde die Seite unnoetig aufblaehen. Deshalb dieser Endpunkt:
|
||||
* Postgres sucht mit seiner deutschen Textsuche direkt in der Datenbank.
|
||||
* Name, Kurzbeschreibung und Tags ab. Notizen und Aufgaben liegen dort nicht
|
||||
* vor – die mitzuladen wuerde die Seite unnoetig aufblaehen. Deshalb dieser
|
||||
* Endpunkt: Postgres sucht mit seiner deutschen Textsuche direkt in der
|
||||
* Datenbank.
|
||||
*
|
||||
* ts_headline liefert gleich den passenden Ausschnitt mit; die Hervorhebung
|
||||
* kommt als [[…]] zurueck, damit die Oberflaeche kein HTML einbetten muss.
|
||||
*
|
||||
* Das Feld heisst weiterhin "hits" und meint die Notizen – umbenennen haette
|
||||
* nur Aufrufer gebrochen, ohne etwas zu verbessern. Aufgaben kommen als
|
||||
* eigenes Feld dazu.
|
||||
*/
|
||||
export async function GET(request: Request) {
|
||||
const auth = await requireUserApi();
|
||||
@@ -29,7 +43,7 @@ export async function GET(request: Request) {
|
||||
|
||||
const query = (new URL(request.url).searchParams.get("q") ?? "").trim();
|
||||
if (query.length < 2) {
|
||||
return NextResponse.json({ query, hits: [], projectIds: [] });
|
||||
return NextResponse.json({ query, hits: [], tasks: [], projectIds: [] });
|
||||
}
|
||||
|
||||
// websearch_to_tsquery versteht Eingaben wie "docker -compose" oder
|
||||
@@ -57,11 +71,48 @@ export async function GET(request: Request) {
|
||||
LIMIT 50
|
||||
`;
|
||||
|
||||
/**
|
||||
* Dieselbe Rechnung fuer Aufgaben.
|
||||
*
|
||||
* Der Ausdruck in to_tsvector muss Zeichen fuer Zeichen dem in der
|
||||
* Migration entsprechen (Task_fulltext_idx), sonst greift der Index nicht
|
||||
* und Postgres rechnet ihn je Zeile neu.
|
||||
*
|
||||
* Erledigtes bleibt drin: wer sucht, sucht oft gerade das, was er letzte
|
||||
* Woche abgehakt hat.
|
||||
*/
|
||||
const tasks = await prisma.$queryRaw<TaskHit[]>`
|
||||
SELECT
|
||||
t."projectId" AS "projectId",
|
||||
t."id" AS "taskId",
|
||||
t."title" AS "title",
|
||||
t."status"::text AS "status",
|
||||
ts_headline(
|
||||
'german',
|
||||
coalesce(t."description", ''),
|
||||
websearch_to_tsquery('german', ${query}),
|
||||
'StartSel=[[, StopSel=]], MaxWords=18, MinWords=6, ShortWord=2, MaxFragments=1'
|
||||
) AS "snippet"
|
||||
FROM "Task" t
|
||||
JOIN "Project" p ON p."id" = t."projectId"
|
||||
WHERE p."ownerId" = ${auth.user.id}
|
||||
AND to_tsvector('german', coalesce(t."title", '') || ' ' || coalesce(t."description", ''))
|
||||
@@ websearch_to_tsquery('german', ${query})
|
||||
ORDER BY ts_rank(
|
||||
to_tsvector('german', coalesce(t."title", '') || ' ' || coalesce(t."description", '')),
|
||||
websearch_to_tsquery('german', ${query})
|
||||
) DESC
|
||||
LIMIT 50
|
||||
`;
|
||||
|
||||
return NextResponse.json({
|
||||
query,
|
||||
hits,
|
||||
tasks,
|
||||
// Die Oberflaeche braucht vor allem die betroffenen Projekte, um sie im
|
||||
// Board einzublenden.
|
||||
projectIds: Array.from(new Set(hits.map((hit) => hit.projectId))),
|
||||
// Board einzublenden – jetzt aus beiden Quellen.
|
||||
projectIds: Array.from(
|
||||
new Set([...hits.map((hit) => hit.projectId), ...tasks.map((hit) => hit.projectId)]),
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, ArrowRight, CalendarRange } from "lucide-react";
|
||||
import { ArrowLeft, ArrowRight, CalendarRange, History } from "lucide-react";
|
||||
import { WeeklyReview } from "@/components/WeeklyReview";
|
||||
import { requireUserPage } from "@/lib/auth/guard";
|
||||
import { prisma } from "@/lib/db";
|
||||
@@ -121,6 +121,10 @@ export default async function ReviewPage({
|
||||
Diese Woche
|
||||
</Link>
|
||||
) : null}
|
||||
<Link href="/verlauf" className="btn btn-ghost px-2.5 py-1.5 text-xs">
|
||||
<History className="h-3.5 w-3.5" />
|
||||
Ganzer Verlauf
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { CalendarRange, History } from "lucide-react";
|
||||
import { Timeline } from "@/components/Timeline";
|
||||
import { requireUserPage } from "@/lib/auth/guard";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { SEITE, SEITEN_ORDNUNG, seitenBedingung } from "@/lib/timeline";
|
||||
import type { ReviewEntry } from "@/types";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export const metadata: Metadata = { title: "Verlauf" };
|
||||
|
||||
/**
|
||||
* Der Verlauf ueber alle Projekte, fortlaufend.
|
||||
*
|
||||
* Die erste Seite kommt serverseitig mit, damit sofort etwas dasteht; alles
|
||||
* Weitere holt der Knopf per Cursor nach. Anders als der Wochenrueckblick
|
||||
* hat diese Seite keine Grenze und kein Fazit – sie laeuft zurueck, solange
|
||||
* es Eintraege gibt.
|
||||
*/
|
||||
export default async function TimelinePage() {
|
||||
const user = await requireUserPage();
|
||||
|
||||
const gefunden = await prisma.activity.findMany({
|
||||
where: seitenBedingung(user.id, null),
|
||||
orderBy: SEITEN_ORDNUNG,
|
||||
// Einen mehr, um zu wissen, ob es weitergeht.
|
||||
take: SEITE + 1,
|
||||
select: {
|
||||
id: true,
|
||||
kind: true,
|
||||
summary: true,
|
||||
createdAt: true,
|
||||
project: { select: { id: true, name: true, accent: true } },
|
||||
user: { select: { username: true, displayName: true } },
|
||||
},
|
||||
});
|
||||
|
||||
const weitere = gefunden.length > SEITE;
|
||||
const erste: ReviewEntry[] = (weitere ? gefunden.slice(0, SEITE) : gefunden).map((eintrag) => ({
|
||||
id: eintrag.id,
|
||||
kind: eintrag.kind,
|
||||
summary: eintrag.summary,
|
||||
createdAt: eintrag.createdAt.toISOString(),
|
||||
project: eintrag.project,
|
||||
user: eintrag.user,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<header className="fade-up pt-4">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.3em] text-violet-300/70">
|
||||
Über alle Projekte
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap items-end justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="flex items-center gap-2 text-2xl font-semibold tracking-tight text-white sm:text-3xl">
|
||||
<History className="h-6 w-6 text-violet-300" />
|
||||
Verlauf
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-400">
|
||||
Alles, was passiert ist – vom Neuesten rückwärts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link href="/rueckblick" className="btn btn-ghost px-3 py-1.5 text-xs">
|
||||
<CalendarRange className="h-3.5 w-3.5" />
|
||||
Wochenrückblick
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Timeline erste={erste} weitere={weitere} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import Link from "next/link";
|
||||
import { ACTIVITY_KINDS } from "@/components/activityKinds";
|
||||
import { accentOf } from "@/lib/status";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ReviewDay, ReviewEntry } from "@/types";
|
||||
|
||||
/**
|
||||
* Darstellung von Verlaufseintraegen – eine Zeile und die Gruppierung nach
|
||||
* Kalendertagen.
|
||||
*
|
||||
* Bewusst ohne "use client" und ohne Hooks: so laesst sich beides sowohl aus
|
||||
* einer Server-Komponente (Wochenrueckblick) als auch aus einer
|
||||
* Client-Komponente (Zeitleiste mit Nachladen) heraus benutzen. Zwei Kopien
|
||||
* derselben Zeile waeren beim naechsten Feinschliff auseinandergelaufen.
|
||||
*
|
||||
* Alle Formate mit fester Zeitzone – dieselbe Ueberlegung wie in lib/utils:
|
||||
* sonst weichen Server-Render und Hydration voneinander ab.
|
||||
*/
|
||||
|
||||
const WOCHENTAG = new Intl.DateTimeFormat("de-DE", {
|
||||
timeZone: "Europe/Berlin",
|
||||
weekday: "long",
|
||||
});
|
||||
const TAG_MONAT = new Intl.DateTimeFormat("de-DE", {
|
||||
timeZone: "Europe/Berlin",
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
});
|
||||
const TAG_MONAT_JAHR = new Intl.DateTimeFormat("de-DE", {
|
||||
timeZone: "Europe/Berlin",
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
});
|
||||
const UHRZEIT = new Intl.DateTimeFormat("de-DE", {
|
||||
timeZone: "Europe/Berlin",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
|
||||
/** "2026-08-17" → ein Zeitpunkt mittags, damit die Zeitzone nichts verschiebt. */
|
||||
function alsDatum(tag: string): Date {
|
||||
const [j, m, t] = tag.split("-").map(Number);
|
||||
return new Date(Date.UTC(j, m - 1, t, 12));
|
||||
}
|
||||
|
||||
export function ActivityDayGroups({
|
||||
tage,
|
||||
/** Bei Tagen aus anderen Jahren gehoert die Jahreszahl dazu. */
|
||||
mitJahr = false,
|
||||
}: {
|
||||
tage: ReviewDay[];
|
||||
mitJahr?: boolean;
|
||||
}) {
|
||||
const format = mitJahr ? TAG_MONAT_JAHR : TAG_MONAT;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{tage.map((tag) => {
|
||||
const datum = alsDatum(tag.tag);
|
||||
return (
|
||||
<section key={tag.tag}>
|
||||
<div className="mb-2.5 flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-300">
|
||||
{WOCHENTAG.format(datum)}
|
||||
</h2>
|
||||
<span className="text-xs text-slate-500">{format.format(datum)}</span>
|
||||
<span className="rounded-full bg-white/6 px-2 py-0.5 text-[11px] tabular-nums text-slate-400">
|
||||
{tag.eintraege.length}
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-gradient-to-r from-white/10 to-transparent" />
|
||||
</div>
|
||||
|
||||
<ul className="glass divide-y divide-white/6 overflow-hidden">
|
||||
{tag.eintraege.map((eintrag) => (
|
||||
<ActivityRow key={eintrag.id} eintrag={eintrag} />
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ActivityRow({ eintrag }: { eintrag: ReviewEntry }) {
|
||||
const art = ACTIVITY_KINDS[eintrag.kind] ?? ACTIVITY_KINDS.PROJECT_UPDATED;
|
||||
const Icon = art.icon;
|
||||
const accent = accentOf(eintrag.project.accent);
|
||||
|
||||
return (
|
||||
<li className="flex items-start gap-2.5 px-3 py-2.5 sm:gap-3 sm:px-4">
|
||||
<span className={cn("mt-0.5 shrink-0", art.color)} title={art.label}>
|
||||
<Icon className="h-4 w-4" />
|
||||
</span>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm leading-snug text-slate-200">{eintrag.summary}</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-slate-500">
|
||||
{/* Das Projekt gehoert in jede Zeile – ohne es ist eine
|
||||
projektuebergreifende Liste nicht zu lesen. */}
|
||||
<Link
|
||||
href={`/projects/${eintrag.project.id}`}
|
||||
className="inline-flex max-w-[12rem] items-center gap-1.5 truncate text-slate-400 underline-offset-2 hover:text-violet-300 hover:underline"
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 shrink-0 rounded-full"
|
||||
style={{ backgroundColor: accent.from }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{eintrag.project.name}
|
||||
</Link>
|
||||
<span className="tabular-nums">{UHRZEIT.format(new Date(eintrag.createdAt))} Uhr</span>
|
||||
{eintrag.user ? (
|
||||
<span className="hidden xs:inline">
|
||||
{eintrag.user.displayName?.trim() || eintrag.user.username}
|
||||
</span>
|
||||
) : (
|
||||
// Ohne Benutzer: das war der Zeitgeber oder ein Webhook.
|
||||
<span className="hidden text-slate-600 xs:inline">automatisch</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
CheckSquare,
|
||||
CornerDownLeft,
|
||||
GitBranch,
|
||||
History,
|
||||
LayoutDashboard,
|
||||
Loader2,
|
||||
NotebookPen,
|
||||
@@ -17,8 +18,9 @@ import {
|
||||
Settings,
|
||||
UserRound,
|
||||
} from "lucide-react";
|
||||
import type { ProjectStatus } from "@prisma/client";
|
||||
import type { ProjectStatus, TaskStatus } from "@prisma/client";
|
||||
import { statusOf } from "@/lib/status";
|
||||
import { TASK_STATUS_META } from "@/lib/tasks";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
@@ -39,6 +41,14 @@ interface ProjectHit {
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
interface TaskHit {
|
||||
projectId: string;
|
||||
taskId: string;
|
||||
title: string;
|
||||
status: string;
|
||||
snippet: string;
|
||||
}
|
||||
|
||||
interface NoteHit {
|
||||
projectId: string;
|
||||
noteId: string;
|
||||
@@ -64,6 +74,13 @@ const ACTIONS: Action[] = [
|
||||
icon: CalendarRange,
|
||||
href: "/rueckblick",
|
||||
},
|
||||
{
|
||||
id: "verlauf",
|
||||
label: "Verlauf",
|
||||
hint: "Alles, was passiert ist – über alle Projekte",
|
||||
icon: History,
|
||||
href: "/verlauf",
|
||||
},
|
||||
{
|
||||
id: "tasks",
|
||||
label: "Aufgaben",
|
||||
@@ -99,7 +116,8 @@ const ACTIONS: Action[] = [
|
||||
type Entry =
|
||||
| { kind: "action"; key: string; action: Action }
|
||||
| { kind: "project"; key: string; project: ProjectHit }
|
||||
| { kind: "note"; key: string; note: NoteHit; projectName: string };
|
||||
| { kind: "note"; key: string; note: NoteHit; projectName: string }
|
||||
| { kind: "task"; key: string; task: TaskHit; projectName: string };
|
||||
|
||||
export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
|
||||
const router = useRouter();
|
||||
@@ -108,6 +126,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [projects, setProjects] = useState<ProjectHit[] | null>(null);
|
||||
const [notes, setNotes] = useState<NoteHit[]>([]);
|
||||
const [aufgaben, setAufgaben] = useState<TaskHit[]>([]);
|
||||
const [active, setActive] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
@@ -146,6 +165,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
|
||||
const needle = query.trim();
|
||||
if (needle.length < 2) {
|
||||
setNotes([]);
|
||||
setAufgaben([]);
|
||||
return;
|
||||
}
|
||||
const controller = new AbortController();
|
||||
@@ -155,8 +175,9 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
|
||||
signal: controller.signal,
|
||||
});
|
||||
if (!response.ok) return;
|
||||
const body = (await response.json()) as { hits: NoteHit[] };
|
||||
const body = (await response.json()) as { hits: NoteHit[]; tasks: TaskHit[] };
|
||||
setNotes(body.hits ?? []);
|
||||
setAufgaben(body.tasks ?? []);
|
||||
} catch {
|
||||
// Abbruch beim Weitertippen ist der Normalfall.
|
||||
}
|
||||
@@ -171,6 +192,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
|
||||
if (!open) {
|
||||
setQuery("");
|
||||
setNotes([]);
|
||||
setAufgaben([]);
|
||||
setActive(0);
|
||||
}
|
||||
}, [open]);
|
||||
@@ -210,6 +232,17 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
|
||||
for (const project of passendeProjekte.slice(0, 8)) {
|
||||
result.push({ kind: "project", key: `p-${project.id}`, project });
|
||||
}
|
||||
// Aufgaben vor Notizen: wer tippt, sucht haeufiger etwas zu Tun als
|
||||
// etwas Notiertes.
|
||||
for (const treffer of aufgaben.slice(0, 5)) {
|
||||
result.push({
|
||||
kind: "task",
|
||||
key: `t-${treffer.taskId}`,
|
||||
task: treffer,
|
||||
projectName:
|
||||
(projects ?? []).find((project) => project.id === treffer.projectId)?.name ?? "Projekt",
|
||||
});
|
||||
}
|
||||
for (const hit of notes.slice(0, 5)) {
|
||||
result.push({
|
||||
kind: "note",
|
||||
@@ -223,7 +256,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
|
||||
result.push({ kind: "action", key: `a-${action.id}`, action });
|
||||
}
|
||||
return result;
|
||||
}, [query, projects, notes, isAdmin]);
|
||||
}, [query, projects, notes, aufgaben, isAdmin]);
|
||||
|
||||
useEffect(() => {
|
||||
setActive((current) => Math.min(current, Math.max(0, entries.length - 1)));
|
||||
@@ -234,6 +267,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
|
||||
setOpen(false);
|
||||
if (entry.kind === "action") router.push(entry.action.href);
|
||||
else if (entry.kind === "project") router.push(`/projects/${entry.project.id}`);
|
||||
else if (entry.kind === "task") router.push(`/projects/${entry.task.projectId}`);
|
||||
else router.push(`/projects/${entry.note.projectId}`);
|
||||
},
|
||||
[router],
|
||||
@@ -284,7 +318,7 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
onKeyDown={onInputKey}
|
||||
placeholder="Projekt, Notiz oder Bereich…"
|
||||
placeholder="Projekt, Aufgabe, Notiz oder Bereich…"
|
||||
className="w-full bg-transparent text-sm text-slate-100 outline-none placeholder:text-slate-600"
|
||||
/>
|
||||
{loading ? <Loader2 className="h-3.5 w-3.5 animate-spin text-slate-600" /> : null}
|
||||
@@ -338,6 +372,23 @@ export function CommandPalette({ isAdmin }: { isAdmin: boolean }) {
|
||||
{statusOf(entry.project.status).short}
|
||||
</span>
|
||||
</>
|
||||
) : entry.kind === "task" ? (
|
||||
<>
|
||||
<CheckSquare className="mt-0.5 h-4 w-4 shrink-0 text-emerald-300/70" />
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-sm text-slate-200">
|
||||
{entry.task.title}
|
||||
<span className="ml-1.5 text-[11px] text-slate-500">
|
||||
in {entry.projectName}
|
||||
</span>
|
||||
</span>
|
||||
<span className="block truncate text-[11px] text-slate-500">
|
||||
{entry.task.snippet.replace(/\[\[|\]\]/g, "").trim() ||
|
||||
TASK_STATUS_META[entry.task.status as TaskStatus]?.label ||
|
||||
"Aufgabe"}
|
||||
</span>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<NotebookPen className="mt-0.5 h-4 w-4 shrink-0 text-violet-300/70" />
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
CheckSquare,
|
||||
Columns3,
|
||||
Database,
|
||||
Download,
|
||||
@@ -16,7 +17,7 @@ import {
|
||||
Upload,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import type { ProjectStatus } from "@prisma/client";
|
||||
import type { ProjectStatus, TaskStatus } from "@prisma/client";
|
||||
import { BulkBar } from "@/components/BulkBar";
|
||||
import { ImportDialog } from "@/components/ImportDialog";
|
||||
import { KanbanBoard } from "@/components/KanbanBoard";
|
||||
@@ -25,9 +26,18 @@ import { ProjectDialog } from "@/components/ProjectDialog";
|
||||
import { ProjectList } from "@/components/ProjectList";
|
||||
import { Popover } from "@/components/ui/Popover";
|
||||
import { STATUS_META, STATUS_ORDER } from "@/lib/status";
|
||||
import { TASK_STATUS_META } from "@/lib/tasks";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ConnectionSafe, ProjectListItem } from "@/types";
|
||||
|
||||
interface TaskHit {
|
||||
projectId: string;
|
||||
taskId: string;
|
||||
title: string;
|
||||
status: string;
|
||||
snippet: string;
|
||||
}
|
||||
|
||||
interface NoteHit {
|
||||
projectId: string;
|
||||
noteId: string;
|
||||
@@ -135,6 +145,7 @@ export function ProjectBoard({
|
||||
const [dataMenuOpen, setDataMenuOpen] = useState(false);
|
||||
const dataButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const [noteHits, setNoteHits] = useState<NoteHit[]>([]);
|
||||
const [taskHits, setTaskHits] = useState<TaskHit[]>([]);
|
||||
const [selection, setSelection] = useState<Set<string>>(new Set());
|
||||
|
||||
/**
|
||||
@@ -147,6 +158,7 @@ export function ProjectBoard({
|
||||
const needle = query.trim();
|
||||
if (needle.length < 2) {
|
||||
setNoteHits([]);
|
||||
setTaskHits([]);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -157,8 +169,9 @@ export function ProjectBoard({
|
||||
signal: controller.signal,
|
||||
});
|
||||
if (!response.ok) return;
|
||||
const body = (await response.json()) as { hits: NoteHit[] };
|
||||
const body = (await response.json()) as { hits: NoteHit[]; tasks: TaskHit[] };
|
||||
setNoteHits(body.hits ?? []);
|
||||
setTaskHits(body.tasks ?? []);
|
||||
} catch {
|
||||
// Abgebrochene Anfragen sind der Normalfall beim Tippen.
|
||||
}
|
||||
@@ -171,8 +184,12 @@ export function ProjectBoard({
|
||||
}, [query]);
|
||||
|
||||
const noteHitProjectIds = useMemo(
|
||||
() => new Set(noteHits.map((hit) => hit.projectId)),
|
||||
[noteHits],
|
||||
() =>
|
||||
new Set([
|
||||
...noteHits.map((hit) => hit.projectId),
|
||||
...taskHits.map((hit) => hit.projectId),
|
||||
]),
|
||||
[noteHits, taskHits],
|
||||
);
|
||||
|
||||
const counts = useMemo(() => {
|
||||
@@ -200,7 +217,7 @@ export function ProjectBoard({
|
||||
project.repositories.some((repo) =>
|
||||
(repo.snapshot?.fullName ?? "").toLowerCase().includes(needle),
|
||||
) ||
|
||||
// Treffer in Notizen kommen vom Server dazu.
|
||||
// Treffer in Notizen und Aufgaben kommen vom Server dazu.
|
||||
noteHitProjectIds.has(project.id)
|
||||
);
|
||||
});
|
||||
@@ -434,6 +451,60 @@ export function ProjectBoard({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Treffer in Aufgaben */}
|
||||
{taskHits.length > 0 ? (
|
||||
<div className="glass fade-up p-4">
|
||||
<h2 className="mb-2.5 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
|
||||
<CheckSquare className="h-3.5 w-3.5 text-emerald-300" />
|
||||
Treffer in Aufgaben
|
||||
<span className="rounded-full bg-white/6 px-2 py-0.5 tabular-nums text-slate-400">
|
||||
{taskHits.length}
|
||||
</span>
|
||||
</h2>
|
||||
<ul className="space-y-1">
|
||||
{taskHits.slice(0, 8).map((hit) => {
|
||||
const project = projects.find((entry) => entry.id === hit.projectId);
|
||||
const status = TASK_STATUS_META[hit.status as TaskStatus];
|
||||
return (
|
||||
<li key={hit.taskId}>
|
||||
<Link
|
||||
href={`/projects/${hit.projectId}`}
|
||||
className="block rounded-lg px-2.5 py-2 transition-colors hover:bg-white/5"
|
||||
>
|
||||
<span className="flex flex-wrap items-baseline gap-x-2">
|
||||
<span className="text-sm text-slate-200">{hit.title}</span>
|
||||
<span className="text-[11px] text-slate-500">
|
||||
· {project?.name ?? "Projekt"}
|
||||
</span>
|
||||
{status ? (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 text-[11px]"
|
||||
style={{ color: status.color }}
|
||||
>
|
||||
{status.label}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
{/* Nur wenn die Beschreibung etwas beitraegt – passte
|
||||
allein der Titel, ist der Ausschnitt leer. */}
|
||||
{hit.snippet.trim() ? (
|
||||
<span className="mt-0.5 block text-xs leading-snug text-slate-400">
|
||||
{highlight(hit.snippet)}
|
||||
</span>
|
||||
) : null}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
{taskHits.length > 8 ? (
|
||||
<p className="mt-2 px-2.5 text-[11px] text-slate-600">
|
||||
… und {taskHits.length - 8} weitere
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Treffer in Notizen */}
|
||||
{noteHits.length > 0 ? (
|
||||
<div className="glass fade-up p-4">
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { ChevronDown, History, Loader2 } from "lucide-react";
|
||||
import { ActivityDayGroups } from "@/components/ActivityRow";
|
||||
import { tagesschluessel } from "@/lib/review";
|
||||
import type { ReviewDay, ReviewEntry } from "@/types";
|
||||
|
||||
/**
|
||||
* Die fortlaufende Zeitleiste.
|
||||
*
|
||||
* Client-Komponente, weil hier nachgeladen wird – das ist der Unterschied
|
||||
* zum Wochenrueckblick, der komplett auf dem Server entsteht.
|
||||
*
|
||||
* Die Buendelung nach Tagen passiert hier im Browser. Das ist unbedenklich,
|
||||
* weil tagesschluessel eine feste Zeitzone benutzt: Server und Browser kommen
|
||||
* damit auf denselben Kalendertag, und die erste Seite hydriert ohne
|
||||
* Abweichung.
|
||||
*/
|
||||
export function Timeline({
|
||||
erste,
|
||||
weitere: gabWeitere,
|
||||
}: {
|
||||
erste: ReviewEntry[];
|
||||
weitere: boolean;
|
||||
}) {
|
||||
const [eintraege, setEintraege] = useState(erste);
|
||||
const [weitere, setWeitere] = useState(gabWeitere);
|
||||
const [laedt, setLaedt] = useState(false);
|
||||
const [fehler, setFehler] = useState<string | null>(null);
|
||||
|
||||
const tage: ReviewDay[] = useMemo(() => {
|
||||
// Map behaelt die Einfuegereihenfolge – die Eintraege kommen schon
|
||||
// absteigend, also stimmt die Reihenfolge der Tage von selbst.
|
||||
const nachTag = new Map<string, ReviewEntry[]>();
|
||||
for (const eintrag of eintraege) {
|
||||
const schluessel = tagesschluessel(new Date(eintrag.createdAt));
|
||||
const liste = nachTag.get(schluessel) ?? [];
|
||||
liste.push(eintrag);
|
||||
nachTag.set(schluessel, liste);
|
||||
}
|
||||
return [...nachTag.entries()].map(([tag, liste]) => ({ tag, eintraege: liste }));
|
||||
}, [eintraege]);
|
||||
|
||||
async function mehr() {
|
||||
const letzter = eintraege[eintraege.length - 1];
|
||||
if (!letzter) return;
|
||||
|
||||
setLaedt(true);
|
||||
setFehler(null);
|
||||
try {
|
||||
const antwort = await fetch(
|
||||
`/api/activity?vor=${encodeURIComponent(letzter.createdAt)}&id=${encodeURIComponent(letzter.id)}`,
|
||||
);
|
||||
if (!antwort.ok) throw new Error("Verlauf konnte nicht geladen werden.");
|
||||
const nutzlast = (await antwort.json()) as {
|
||||
activities: ReviewEntry[];
|
||||
weitere: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Gegen Dubletten absichern, auch wenn der Cursor sie ausschliesst:
|
||||
* ein zweimal gedrueckter Knopf oder ein wiederholter Aufruf soll
|
||||
* keine Zeile verdoppeln, und React braucht eindeutige Schluessel.
|
||||
*/
|
||||
setEintraege((bisher) => {
|
||||
const bekannt = new Set(bisher.map((eintrag) => eintrag.id));
|
||||
return [...bisher, ...nutzlast.activities.filter((eintrag) => !bekannt.has(eintrag.id))];
|
||||
});
|
||||
setWeitere(nutzlast.weitere);
|
||||
} catch (gefangen) {
|
||||
setFehler(gefangen instanceof Error ? gefangen.message : String(gefangen));
|
||||
} finally {
|
||||
setLaedt(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (eintraege.length === 0) {
|
||||
return (
|
||||
<div className="glass fade-up flex flex-col items-center justify-center gap-4 px-6 py-16 text-center">
|
||||
<span className="grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-violet-500/25 to-cyan-400/20 text-violet-200">
|
||||
<History className="h-6 w-6" />
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">Noch kein Verlauf</h2>
|
||||
<p className="mt-1 max-w-md text-sm text-slate-400">
|
||||
Sobald du ein Projekt anlegst, Aufgaben verschiebst oder Notizen schreibst, steht es
|
||||
hier.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* Die Jahreszahl gehoert dazu: eine Zeitleiste reicht weit zurueck,
|
||||
und "3. Januar" allein sagt dann nicht genug. */}
|
||||
<ActivityDayGroups tage={tage} mitJahr />
|
||||
|
||||
{fehler ? (
|
||||
<p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
|
||||
{fehler}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-col items-center gap-2 pt-1">
|
||||
{weitere ? (
|
||||
<button type="button" className="btn btn-ghost" onClick={mehr} disabled={laedt}>
|
||||
{laedt ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
)}
|
||||
Ältere laden
|
||||
</button>
|
||||
) : (
|
||||
<p className="text-xs text-slate-600">Das war alles.</p>
|
||||
)}
|
||||
<p className="text-[11px] text-slate-600 tabular-nums">
|
||||
{eintraege.length} {eintraege.length === 1 ? "Vorgang" : "Vorgänge"} geladen
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,7 @@
|
||||
import Link from "next/link";
|
||||
import { CalendarRange, CheckSquare, FolderGit2, NotebookPen, Plus } from "lucide-react";
|
||||
import { ACTIVITY_KINDS } from "@/components/activityKinds";
|
||||
import { ActivityDayGroups } from "@/components/ActivityRow";
|
||||
import type { Kennzahlen } from "@/lib/review";
|
||||
import { accentOf } from "@/lib/status";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ReviewDay, ReviewEntry } from "@/types";
|
||||
import type { ReviewDay } from "@/types";
|
||||
|
||||
/**
|
||||
* Der Wochenrueckblick.
|
||||
@@ -17,26 +14,6 @@ import type { ReviewDay, ReviewEntry } from "@/types";
|
||||
* deshalb auf den Server.
|
||||
*/
|
||||
|
||||
const WOCHENTAG = new Intl.DateTimeFormat("de-DE", {
|
||||
timeZone: "Europe/Berlin",
|
||||
weekday: "long",
|
||||
});
|
||||
const TAG_MONAT = new Intl.DateTimeFormat("de-DE", {
|
||||
timeZone: "Europe/Berlin",
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
});
|
||||
const UHRZEIT = new Intl.DateTimeFormat("de-DE", {
|
||||
timeZone: "Europe/Berlin",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
|
||||
function alsDatum(tag: string): Date {
|
||||
const [j, m, t] = tag.split("-").map(Number);
|
||||
return new Date(Date.UTC(j, m - 1, t, 12));
|
||||
}
|
||||
|
||||
export function WeeklyReview({
|
||||
tage,
|
||||
kennzahlen,
|
||||
@@ -86,32 +63,8 @@ export function WeeklyReview({
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{/* Verlauf nach Tagen */}
|
||||
<div className="space-y-6">
|
||||
{tage.map((tag) => {
|
||||
const datum = alsDatum(tag.tag);
|
||||
return (
|
||||
<section key={tag.tag}>
|
||||
<div className="mb-2.5 flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-slate-300">
|
||||
{WOCHENTAG.format(datum)}
|
||||
</h2>
|
||||
<span className="text-xs text-slate-500">{TAG_MONAT.format(datum)}</span>
|
||||
<span className="rounded-full bg-white/6 px-2 py-0.5 text-[11px] tabular-nums text-slate-400">
|
||||
{tag.eintraege.length}
|
||||
</span>
|
||||
<span className="h-px flex-1 bg-gradient-to-r from-white/10 to-transparent" />
|
||||
</div>
|
||||
|
||||
<ul className="glass divide-y divide-white/6 overflow-hidden">
|
||||
{tag.eintraege.map((eintrag) => (
|
||||
<Zeile key={eintrag.id} eintrag={eintrag} />
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* Verlauf nach Tagen – dieselbe Darstellung wie in der Zeitleiste. */}
|
||||
<ActivityDayGroups tage={tage} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -153,45 +106,3 @@ function Kennzahl({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Zeile({ eintrag }: { eintrag: ReviewEntry }) {
|
||||
const art = ACTIVITY_KINDS[eintrag.kind];
|
||||
const Icon = art.icon;
|
||||
const accent = accentOf(eintrag.project.accent);
|
||||
|
||||
return (
|
||||
<li className="flex items-start gap-2.5 px-3 py-2.5 sm:gap-3 sm:px-4">
|
||||
<span className={cn("mt-0.5 shrink-0", art.color)} title={art.label}>
|
||||
<Icon className="h-4 w-4" />
|
||||
</span>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm leading-snug text-slate-200">{eintrag.summary}</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-slate-500">
|
||||
{/* Das Projekt gehoert in jede Zeile – ohne es ist eine
|
||||
projektuebergreifende Liste nicht zu lesen. */}
|
||||
<Link
|
||||
href={`/projects/${eintrag.project.id}`}
|
||||
className="inline-flex max-w-[12rem] items-center gap-1.5 truncate text-slate-400 underline-offset-2 hover:text-violet-300 hover:underline"
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 shrink-0 rounded-full"
|
||||
style={{ backgroundColor: accent.from }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{eintrag.project.name}
|
||||
</Link>
|
||||
<span className="tabular-nums">{UHRZEIT.format(new Date(eintrag.createdAt))} Uhr</span>
|
||||
{eintrag.user ? (
|
||||
<span className="hidden xs:inline">
|
||||
{eintrag.user.displayName?.trim() || eintrag.user.username}
|
||||
</span>
|
||||
) : (
|
||||
// Ohne Benutzer: das war der Zeitgeber oder ein Webhook.
|
||||
<span className="hidden text-slate-600 xs:inline">automatisch</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,7 +10,9 @@ import {
|
||||
Loader2,
|
||||
Plus,
|
||||
Repeat,
|
||||
Search,
|
||||
Square,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import type { TaskStatus } from "@prisma/client";
|
||||
import { QuickCapture } from "@/components/QuickCapture";
|
||||
@@ -42,6 +44,7 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
|
||||
const router = useRouter();
|
||||
const [statusFilter, setStatusFilter] = useState<TaskStatus[]>([]);
|
||||
const [projektFilter, setProjektFilter] = useState("");
|
||||
const [suche, setSuche] = useState("");
|
||||
const [zeigeErledigte, setZeigeErledigte] = useState(false);
|
||||
const [erfassenOffen, setErfassenOffen] = useState(false);
|
||||
const [laufend, setLaufend] = useState<Set<string>>(new Set());
|
||||
@@ -63,16 +66,34 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
|
||||
}, [tasks]);
|
||||
|
||||
const sichtbar = useMemo(() => {
|
||||
const nadel = suche.toLowerCase().trim();
|
||||
|
||||
return tasks.filter((task) => {
|
||||
// Erledigtes fuellt die Liste sonst mit dem, was gerade nicht ansteht.
|
||||
if (!zeigeErledigte && task.status === "DONE" && !statusFilter.includes("DONE")) {
|
||||
// Wer allerdings sucht, sucht auch in Erledigtem – sonst findet man
|
||||
// die Aufgabe von letzter Woche nicht wieder.
|
||||
if (
|
||||
!zeigeErledigte &&
|
||||
!nadel &&
|
||||
task.status === "DONE" &&
|
||||
!statusFilter.includes("DONE")
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
if (statusFilter.length > 0 && !statusFilter.includes(task.status)) return false;
|
||||
if (projektFilter && task.project.id !== projektFilter) return false;
|
||||
return true;
|
||||
if (!nadel) return true;
|
||||
|
||||
// Die Aufgaben liegen hier ohnehin alle vor – das filtert ohne
|
||||
// zusaetzliche Abfrage und ohne Verzoegerung beim Tippen.
|
||||
return (
|
||||
task.title.toLowerCase().includes(nadel) ||
|
||||
(task.description ?? "").toLowerCase().includes(nadel) ||
|
||||
task.labels.some((label) => label.toLowerCase().includes(nadel)) ||
|
||||
task.project.name.toLowerCase().includes(nadel)
|
||||
);
|
||||
});
|
||||
}, [tasks, statusFilter, projektFilter, zeigeErledigte]);
|
||||
}, [tasks, statusFilter, projektFilter, zeigeErledigte, suche]);
|
||||
|
||||
const faecher = useMemo(() => {
|
||||
return DUE_BUCKET_ORDER.map((bucket) => ({
|
||||
@@ -155,6 +176,27 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
|
||||
|
||||
{/* Steuerleiste */}
|
||||
<div className="glass flex flex-col gap-3 p-3 sm:p-4">
|
||||
<div className="relative">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
|
||||
<input
|
||||
className="field pl-9"
|
||||
placeholder="Aufgaben durchsuchen – Titel, Beschreibung, Labels…"
|
||||
value={suche}
|
||||
onChange={(event) => setSuche(event.target.value)}
|
||||
aria-label="Aufgaben durchsuchen"
|
||||
/>
|
||||
{suche ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSuche("")}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-500 hover:text-white"
|
||||
aria-label="Suche zuruecksetzen"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{TASK_STATUS_ORDER.map((status) => {
|
||||
const meta = TASK_STATUS_META[status];
|
||||
@@ -220,12 +262,18 @@ export function TaskOverview({ tasks }: { tasks: TaskOverviewItem[] }) {
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">
|
||||
{tasks.length === 0 ? "Noch keine Aufgaben" : "Nichts offen"}
|
||||
{tasks.length === 0
|
||||
? "Noch keine Aufgaben"
|
||||
: suche.trim()
|
||||
? "Keine Treffer"
|
||||
: "Nichts offen"}
|
||||
</h2>
|
||||
<p className="mt-1 max-w-md text-sm text-slate-400">
|
||||
{tasks.length === 0
|
||||
? "Aufgaben entstehen im Projekt oder hier über „Neue Aufgabe“."
|
||||
: "Alles abgehakt, was zu den Filtern passt."}
|
||||
: suche.trim()
|
||||
? `Keine Aufgabe passt zu „${suche.trim()}“ – gesucht wird in Titel, Beschreibung, Labels und Projektname.`
|
||||
: "Alles abgehakt, was zu den Filtern passt."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,6 +41,41 @@ export const KIND_META: Record<ChangeKind, { label: string; className: string }>
|
||||
};
|
||||
|
||||
export const CHANGELOG: Release[] = [
|
||||
{
|
||||
version: "1.10.0",
|
||||
date: "2026-08-18",
|
||||
headline: "Rückblick, Zeitleiste und eine Suche, die auch Aufgaben findet.",
|
||||
changes: [
|
||||
{
|
||||
kind: "neu",
|
||||
text:
|
||||
"Wochenrückblick über alle Projekte: Kennzahlen der Woche und darunter die " +
|
||||
"Vorgänge nach Tagen gebündelt. Blättern in frühere Wochen inbegriffen. " +
|
||||
"Erreichbar über die Schnellsuche und einen Verweis vom Dashboard.",
|
||||
},
|
||||
{
|
||||
kind: "neu",
|
||||
text:
|
||||
"Globale Zeitleiste: derselbe Verlauf, aber fortlaufend und ohne Wochengrenze, " +
|
||||
"mit Nachladen älterer Einträge. Geblättert wird per Cursor — bei mehreren " +
|
||||
"Einträgen im selben Augenblick verliert oder verdoppelt das keine Zeilen.",
|
||||
},
|
||||
{
|
||||
kind: "neu",
|
||||
text:
|
||||
"Das Aufgabendashboard hat ein Suchfeld über Titel, Beschreibung, Labels und " +
|
||||
"Projektname. Wer sucht, sucht dabei auch in Erledigtem — sonst findet man die " +
|
||||
"Aufgabe von letzter Woche nicht wieder.",
|
||||
},
|
||||
{
|
||||
kind: "besser",
|
||||
text:
|
||||
"Die Volltextsuche kannte bisher nur Notizen und findet jetzt auch Aufgaben — " +
|
||||
"mit denselben deutschen Stammformen: „Rechnung“ findet „Rechnungen“. Treffer " +
|
||||
"erscheinen im Projektbrett und in der Schnellsuche.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "1.9.0",
|
||||
date: "2026-08-17",
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { SEITE, SEITE_MAX, cursorAus, seitenBedingung, seitenGroesse } from "./timeline";
|
||||
|
||||
const ID = "cmstxnrzs00011cx4nd5tiqbt";
|
||||
|
||||
describe("cursorAus", () => {
|
||||
it("liest Zeitpunkt und ID", () => {
|
||||
const cursor = cursorAus("2026-08-17T22:30:00.000Z", ID);
|
||||
expect(cursor?.id).toBe(ID);
|
||||
expect(cursor?.createdAt.toISOString()).toBe("2026-08-17T22:30:00.000Z");
|
||||
});
|
||||
|
||||
it("faengt ohne Cursor von vorn an", () => {
|
||||
expect(cursorAus(null, null)).toBeNull();
|
||||
expect(cursorAus("2026-08-17T22:30:00.000Z", null)).toBeNull();
|
||||
expect(cursorAus(null, ID)).toBeNull();
|
||||
});
|
||||
|
||||
it("weist Unbrauchbares ab, statt es in die Abfrage zu geben", () => {
|
||||
expect(cursorAus("kein datum", ID)).toBeNull();
|
||||
expect(cursorAus("2026-08-17T22:30:00.000Z", "kurz")).toBeNull();
|
||||
expect(cursorAus("2026-08-17T22:30:00.000Z", "'; DROP TABLE x --")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("seitenBedingung", () => {
|
||||
it("filtert immer auf den Besitzer", () => {
|
||||
expect(seitenBedingung("u1", null)).toEqual({ project: { ownerId: "u1" } });
|
||||
});
|
||||
|
||||
it("behaelt den Besitzer auch mit Cursor", () => {
|
||||
const wo = seitenBedingung("u1", { createdAt: new Date("2026-08-17T22:30:00Z"), id: ID });
|
||||
expect(wo.project).toEqual({ ownerId: "u1" });
|
||||
});
|
||||
|
||||
it("fasst gleichzeitige Eintraege ueber die ID auseinander", () => {
|
||||
// Der eigentliche Zweck: beim Uebernehmen von Issues entstehen mehrere
|
||||
// Zeilen mit identischem createdAt. Ohne den zweiten Zweig wuerde die
|
||||
// naechste Seite sie ueberspringen oder wiederholen.
|
||||
const zeitpunkt = new Date("2026-08-17T22:30:00Z");
|
||||
const wo = seitenBedingung("u1", { createdAt: zeitpunkt, id: ID });
|
||||
expect(wo.OR).toEqual([
|
||||
{ createdAt: { lt: zeitpunkt } },
|
||||
{ createdAt: zeitpunkt, id: { lt: ID } },
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("seitenGroesse", () => {
|
||||
it("nimmt die Vorgabe, wenn nichts angefragt wurde", () => {
|
||||
expect(seitenGroesse(null)).toBe(SEITE);
|
||||
expect(seitenGroesse("unsinn")).toBe(SEITE);
|
||||
});
|
||||
|
||||
it("deckelt nach oben und unten", () => {
|
||||
expect(seitenGroesse("1000")).toBe(SEITE_MAX);
|
||||
expect(seitenGroesse("0")).toBe(1);
|
||||
expect(seitenGroesse("-5")).toBe(1);
|
||||
});
|
||||
|
||||
it("nimmt einen gueltigen Wert an", () => {
|
||||
expect(seitenGroesse("25")).toBe(25);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,77 @@
|
||||
import type { Prisma } from "@prisma/client";
|
||||
|
||||
/**
|
||||
* Fortlaufender Verlauf ueber alle Projekte.
|
||||
*
|
||||
* Geblaettert wird per Cursor, nicht per `skip`. Der Verlauf schreibt
|
||||
* mehrere Eintraege im selben Augenblick – beim Uebernehmen von Issues etwa
|
||||
* entstehen zehn Zeilen mit identischem `createdAt`. Ein Offset ueber eine
|
||||
* solche Grenze hinweg ueberspringt Zeilen oder zeigt sie zweimal, und zwar
|
||||
* lautlos. Der Cursor aus (createdAt, id) ist dagegen eindeutig.
|
||||
*/
|
||||
|
||||
/** Wie viele Eintraege eine Seite hat. */
|
||||
export const SEITE = 40;
|
||||
/** Deckel gegen einen Aufrufer, der sich alles auf einmal holen will. */
|
||||
export const SEITE_MAX = 100;
|
||||
|
||||
export interface Cursor {
|
||||
/** Zeitpunkt des letzten gezeigten Eintrags. */
|
||||
createdAt: Date;
|
||||
/** Seine ID – entscheidet bei gleichem Zeitpunkt. */
|
||||
id: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Liest einen Cursor aus Abfrageparametern.
|
||||
*
|
||||
* Gibt null zurueck, wenn nichts oder Unbrauchbares ankommt – dann faengt
|
||||
* die Seite eben von vorn an. Ein Fehler waere hier die schlechtere Antwort:
|
||||
* ein abgeschnittener Verweis soll die Seite nicht sperren.
|
||||
*/
|
||||
export function cursorAus(vor: string | null, id: string | null): Cursor | null {
|
||||
if (!vor || !id) return null;
|
||||
const zeitpunkt = new Date(vor);
|
||||
if (Number.isNaN(zeitpunkt.getTime())) return null;
|
||||
// Die ID ist eine cuid; alles andere weisen wir ab, statt es in die
|
||||
// Abfrage zu geben.
|
||||
if (!/^[a-z0-9]{20,32}$/i.test(id)) return null;
|
||||
return { createdAt: zeitpunkt, id };
|
||||
}
|
||||
|
||||
/**
|
||||
* Die where-Bedingung fuer eine Seite.
|
||||
*
|
||||
* Besitzer zuerst – wie ueberall im Projekt, damit fremde Datensaetze gar
|
||||
* nicht erst getroffen werden. Der Verlauf selbst kennt keinen Besitzer, die
|
||||
* Bedingung laeuft deshalb ueber das Projekt.
|
||||
*
|
||||
* Der Cursor bedeutet "aelter als der letzte gezeigte Eintrag": entweder
|
||||
* frueher, oder gleichzeitig und mit kleinerer ID. Genau so sortiert auch
|
||||
* die Abfrage, weshalb beides zusammenpasst.
|
||||
*/
|
||||
export function seitenBedingung(ownerId: string, cursor: Cursor | null): Prisma.ActivityWhereInput {
|
||||
const basis: Prisma.ActivityWhereInput = { project: { ownerId } };
|
||||
if (!cursor) return basis;
|
||||
|
||||
return {
|
||||
...basis,
|
||||
OR: [
|
||||
{ createdAt: { lt: cursor.createdAt } },
|
||||
{ createdAt: cursor.createdAt, id: { lt: cursor.id } },
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
/** Sortierung, die zur Cursor-Bedingung passt. Beide muessen gleich sein. */
|
||||
export const SEITEN_ORDNUNG: Prisma.ActivityOrderByWithRelationInput[] = [
|
||||
{ createdAt: "desc" },
|
||||
{ id: "desc" },
|
||||
];
|
||||
|
||||
/** Begrenzt eine gewuenschte Seitengroesse auf das Erlaubte. */
|
||||
export function seitenGroesse(roh: string | null): number {
|
||||
const angefragt = roh === null ? Number.NaN : Number(roh);
|
||||
if (!Number.isFinite(angefragt)) return SEITE;
|
||||
return Math.min(Math.max(Math.trunc(angefragt), 1), SEITE_MAX);
|
||||
}
|
||||
Reference in New Issue
Block a user