Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

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.