Block-10-Zusammenfassung: vollständige CRUD-UI
Block-10-Zusammenfassung: vollständige CRUD-UI
~16 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
Block 10 ist ABGESCHLOSSEN. aufgaben-manager-web ist JETZT eine VOLLSTÄNDIGE, funktionierende Anwendung – von der Anmeldung BIS zu Echtzeit-aktualisierten, editierbaren Projekten mit Tasks und Tags.
Was Block 10 behandelt hat
- Kapitel 83: ein Projekt bearbeiten (
PATCH,setQueryData). - Kapitel 84: ein Projekt löschen, Bestätigungsdialog, 403-Behandlung.
- Kapitel 85: die
archive-Custom-Operation als Button. - Kapitel 86: die verschachtelte Task-Liste eines Projekts.
- Kapitel 87: eine Task erstellen, manuell konstruierte
project-IRI. - Kapitel 88: eine Task per Checkbox als erledigt markieren.
- Kapitel 89: ein Tag-Multi-Select als "controlled component".
- Kapitel 90: Skeleton-Ladezustände statt reinem Text.
- Kapitel 91: optimistic updates mit
onMutate/onError/onSettled.
Projektstand am Ende von Block 10
aufgaben-manager-web – Stand nach Kapitel 91
web/src/ ├── api/client.ts ├── context/AuthContext.tsx ├── hooks/ │ ├── useProjects.ts, useCreateProject.ts, useUpdateProject.ts, useDeleteProject.ts │ ├── useArchiveProject.ts │ ├── useProjectTasks.ts, useCreateTask.ts, useToggleTaskDone.ts │ ├── useTags.ts │ └── useMercure.ts ├── components/ │ ├── CreateProjectForm.tsx, EditProjectForm.tsx │ ├── ArchiveProjectButton.tsx, DeleteProjectButton.tsx │ ├── TagSelector.tsx │ └── ProjectListSkeleton.tsx ├── pages/ │ ├── LoginPage.tsx, ProjectListPage.tsx, ProjectDetailPage.tsx └── types/ (project.ts, task.ts, error.ts, api.ts generiert)
Selbst anwenden: eine Status-Anzeige
Falls die Status-Übung aus Block 2/3/5 umgesetzt wurde: bauen Sie EIN useStatuses()-Hook (GENAU nach dem Muster von useTags aus Kapitel 89) und zeigen Sie den Status FARBIG (status.color) auf der Projektliste an.
Was in Block 11 kommt
Block 11 (Kapitel 93-97, KÜRZESTER Block der Schulung) führt AUTOMATISIERTE Tests ein: PHPUnit-Integrationstests für die API (GENAU wie in der Symfony-Schulung, Kapitel 44-46, jetzt auf API-Platform-Endpunkte angewendet) sowie React-Component-Tests mit Vitest/Testing Library – der ÜBERGANG von "funktioniert, wenn ICH es manuell teste" zu "funktioniert NACHWEISLICH, AUCH bei künftigen Änderungen".
Tipp: EIN guter Moment für eine VOLLSTÄNDIGE manuelle Testrunde: Registrieren, Anmelden, Projekt erstellen/bearbeiten/löschen/archivieren, Tasks anlegen/erledigen, Tags zuweisen, ZWEI Tabs für Mercure-Echtzeit-Tests öffnen – ALLES, was Block 11 dann AUTOMATISIERT.