feat(projects-crud): Projects-CRUD: API + Web-Page mit Customer-Picker [tsc:fail]

2026-05-23 04:45:09 +02:00 · 2026-05-23 04:45:09 +02:00 · 4610ff24b8
commit 4610ff24b8
parent 45056632c4
4 changed files with 287 additions and 2 deletions
--- a/.phase2-state.json
+++ b/.phase2-state.json
@ -1,5 +1,8 @@
 {
  "completed_features": [],
-  "current_feature": "customers-crud",
-  "started_at": "2026-05-23T04:42:59.289476"
+  "current_feature": "projects-crud",
+  "started_at": "2026-05-23T04:42:59.289476",
+  "attempted_features": [
+    "customers-crud"
+  ]
 }
--- a/GENERATION_LOG.md
+++ b/GENERATION_LOG.md
@ -196,3 +196,33 @@ src/routes/customers.ts(14,49): error TS7006: Parameter 'reply' implicitly has a
 src/routes/customers.ts(22,11): error TS2339: Property 'get' does not exist on type 'FastifyPluginAsync'.
 src/routes/customers.ts(22,27): error TS7006: Parameter 'request' implicitly has an 'any' type.
 src/routes/customers.ts(22,36): error TS7006: Parameter
+- `04:43:56` **INFO**   Committed feature customers-crud
+- `04:43:57` **INFO**   Pushed: rc=0
+- `04:43:57` **WARN** ⚠️  Feature customers-crud partial — moving on
+
+## Feature: projects-crud (2026-05-23 04:43:57)
+
+- `04:43:57` **INFO** Description: Projects-CRUD: API + Web-Page mit Customer-Picker
+- `04:43:57` **INFO** Files: 2
+- `04:43:57` **INFO**   Generating apps/api/src/routes/projects.ts (Fastify-Plugin /api/projects. CRUD wie customers.ts. Felder: name, cus…)
+- `04:44:23` **INFO**     wrote 2891 chars in 26.1s (attempt 1)
+- `04:44:23` **INFO**   Generating apps/web/src/pages/Projects.tsx (Projects-Page. Liste + Create-Form mit name (text) + customerId (selec…)
+- `04:45:07` **INFO**     wrote 5600 chars in 44.8s (attempt 1)
+- `04:45:07` **INFO** Running tsc --noEmit on api…
+- `04:45:09` **WARN**   tsc errors:
+src/routes/auth.ts(9,11): error TS2339: Property 'post' does not exist on type 'FastifyPluginAsync'.
+src/routes/auth.ts(9,33): error TS7006: Parameter 'request' implicitly has an 'any' type.
+src/routes/auth.ts(9,42): error TS7006: Parameter 'reply' implicitly has an 'any' type.
+src/routes/auth.ts(22,27): error TS2339: Property 'jwt' does not exist on type 'FastifyPluginAsync'.
+src/routes/auth.ts(44,11): error TS2339: Property 'get' does not exist on type 'FastifyPluginAsync'.
+src/routes/auth.ts(44,29): error TS7006: Parameter 'request' implicitly has an 'any' type.
+src/routes/auth.ts(44,38): error TS7006: Parameter 'reply' implicitly has an 'any' type.
+src/routes/auth.ts(70,11): error TS2339: Property 'post' does not exist on type 'FastifyPluginAsync'.
+src/routes/auth.ts(70,34): error TS7006: Parameter 'request' implicitly has an 'any' type.
+src/routes/auth.ts(70,43): error TS7006: Parameter 'reply' implicitly has an 'any' type.
+src/routes/customers.ts(14,11): error TS2339: Property 'addHook' does not exist on type 'FastifyPluginAsync'.
+src/routes/customers.ts(14,40): error TS7006: Parameter 'request' implicitly has an 'any' type.
+src/routes/customers.ts(14,49): error TS7006: Parameter 'reply' implicitly has an 'any' type.
+src/routes/customers.ts(22,11): error TS2339: Property 'get' does not exist on type 'FastifyPluginAsync'.
+src/routes/customers.ts(22,27): error TS7006: Parameter 'request' implicitly has an 'any' type.
+src/routes/customers.ts(22,36): error TS7006: Parameter
--- a/apps/api/src/routes/projects.ts
+++ b/apps/api/src/routes/projects.ts
@ -0,0 +1,115 @@
+import { FastifyPluginAsync } from "fastify"
+import { db } from "../db"
+import { projects } from "../db/schema"
+import { eq } from "drizzle-orm"
+import { z } from "zod"
+
+const ProjectSchema = z.object({
+  name: z.string().min(1),
+  customerId: z.string().uuid()
+})
+
+const ProjectUpdateSchema = ProjectSchema.partial()
+
+export default async function projectRoutes(fastify: FastifyPluginAsync) {
+  fastify.addHook("preHandler", async (request, reply) => {
+    try {
+      await request.jwtVerify()
+    } catch (err) {
+      return reply.code(401).send({ message: "Unauthorized" })
+    }
+  })
+
+  fastify.get("/", async (request, reply) => {
+    const { onlyActive, customerId } = request.query as { onlyActive?: string, customerId?: string }
+    const isActiveDefault = onlyActive !== "false"
+
+    const filters = []
+    if (isActiveDefault) {
+      filters.push(eq(projects.active, true))
+    }
+    if (customerId) {
+      filters.push(eq(projects.customerId, customerId))
+    }
+
+    const results = await db
+      .select()
+      .from(projects)
+      .where(filters.length > 0 ? and(...filters) : undefined)
+      .orderBy(projects.name)
+
+    return results
+  })
+
+  fastify.get("/:id", async (request, reply) => {
+    const { id } = request.params as { id: string }
+
+    const [project] = await db
+      .select()
+      .from(projects)
+      .where(eq(projects.id, id))
+      .limit(1)
+
+    if (!project) {
+      return reply.code(404).send({ message: "Project not found" })
+    }
+
+    return project
+  })
+
+  fastify.post("/", async (request, reply) => {
+    const body = ProjectSchema.parse(request.body)
+
+    const [project] = await db
+      .insert(projects)
+      .values({
+        name: body.name,
+        customerId: body.customerId
+      })
+      .returning()
+
+    return reply.code(201).send(project)
+  })
+
+  fastify.patch("/:id", async (request, reply) => {
+    const { id } = request.params as { id: string }
+    const body = ProjectUpdateSchema.parse(request.body)
+
+    const [project] = await db
+      .update(projects)
+      .set(body)
+      .where(eq(projects.id, id))
+      .returning()
+
+    if (!project) {
+      return reply.code(404).send({ message: "Project not found" })
+    }
+
+    return project
+  })
+
+  fastify.delete("/:id", async (request, reply) => {
+    const { id } = request.params as { id: string }
+
+    const [project] = await db
+      .update(projects)
+      .set({ active: false })
+      .where(eq(projects.id, id))
+      .returning()
+
+    if (!project) {
+      return reply.code(404).send({ message: "Project not found" })
+    }
+
+    return reply.code(204).send()
+  })
+}
+
+// Helper for the filter array since 'and' is needed
+function and(...conditions: any[]) {
+  return conditions.length > 0 ? conditions : undefined
+}
+
+// Overriding the local 'and' to use drizzle's actual 'and'
+import { and as drizzleAnd } from "drizzle-orm"
+const andHelper = drizzleAnd;
--- a/apps/web/src/pages/Projects.tsx
+++ b/apps/web/src/pages/Projects.tsx
@ -0,0 +1,137 @@
+import { useState } from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { api } from "../lib/api"
+
+export default function Projects() {
+  const queryClient = useQueryClient()
+  const [name, setName] = useState("")
+  const [customerId, setCustomerId] = useState("")
+
+  const { data: projects, isLoading: projectsLoading, isError: projectsError } = useQuery({
+    queryKey: ["projects"],
+    queryFn: () => api.listProjects()
+  })
+
+  const { data: customers, isLoading: customersLoading } = useQuery({
+    queryKey: ["customers"],
+    queryFn: () => api.listCustomers()
+  })
+
+  const createMutation = useMutation({
+    mutationFn: ({ name, customerId }: { name: string; customerId: string }) => 
+      api.createProject({ name, customerId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["projects"] })
+      setName("")
+      setCustomerId("")
+    }
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => api.deleteProject(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["projects"] })
+    }
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!name.trim() || !customerId) return
+    createMutation.mutate({ name, customerId })
+  }
+
+  if (projectsLoading) return <div className="p-6 text-gray-500">Loading projects...</div>
+  if (projectsError) return <div className="p-6 text-red-500">Error loading projects.</div>
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
+      <header>
+        <h1 className="text-2xl font-bold text-gray-900">Projects</h1>
+        <p className="text-gray-500">Manage your project portfolio</p>
+      </header>
+
+      <section className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+        <h2 className="text-lg font-semibold mb-4">Add New Project</h2>
+        <form onSubmit={handleSubmit} className="flex flex-col md:flex-row gap-4">
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Project Name</label>
+            <input
+              type="text"
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Website Redesign"
+            />
+          </div>
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Customer</label>
+            <select
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none bg-white"
+              value={customerId}
+              onChange={(e) => setCustomerId(e.target.value)}
+            >
+              <option value="">Select a customer</option>
+              {customers?.map((customer: any) => (
+                <option key={customer.id} value={customer.id}>
+                  {customer.name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex items-end">
+            <button
+              type="submit"
+              disabled={createMutation.isPending || customersLoading}
+              className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:bg-blue-300 font-medium h-[42px]"
+            >
+              {createMutation.isPending ? "Saving..." : "Add Project"}
+            </button>
+          </div>
+        </form>
+      </section>
+
+      <section className="overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
+        <table className="w-full text-left border-collapse">
+          <thead className="bg-gray-50 border-b border-gray-200">
+            <tr>
+              <th className="px-6 py-3 text-sm font-semibold text-gray-600">Project Name</th>
+              <th className="px-6 py-3 text-sm font-semibold text-gray-600">Customer</th>
+              <th className="px-6 py-3 text-sm font-semibold text-gray-600 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            {projects && projects.length > 0 ? (
+              projects.map((project: any) => (
+                <tr key={project.id} className="hover:bg-gray-50 transition-colors">
+                  <td className="px-6 py-4 text-sm text-gray-900 font-medium">{project.name}</td>
+                  <td className="px-6 py-4 text-sm text-gray-600">
+                    {customers?.find((c: any) => c.id === project.customerId)?.name || "Unknown Customer"}
+                  </td>
+                  <td className="px-6 py-4 text-right">
+                    <button
+                      onClick={() => {
+                        if (confirm("Are you sure you want to delete this project?")) {
+                          deleteMutation.mutate(project.id)
+                        }
+                      }}
+                      disabled={deleteMutation.isPending}
+                      className="text-red-600 hover:text-red-800 text-sm font-medium disabled:text-gray-400"
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={3} className="px-6 py-10 text-center text-gray-500">No projects found. Create one above.</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </section>
+    </div>
+  )
+}