6. Forms & validatie

Deze oefening herhaalt enkele zaken die je zal nodig hebben om je project te bouwen, en oefent op de concepten geleerd in les 6. Je zal een entiteit van 0 toevoegen aan een bestaand project, net zoals je nieuwe eniteiten zal toevoegen aan de startbestanden van het project.

Voorbereiding

Download de startbestanden.

Startbestanden

Voer de compose uit op je Docker container, je pnpm install, Prisma migration en seed script, Prisma generate, ... (zie README.md).

Deze oefeningen bouwen verder op het eindresultaat van de theorie.

Het databankschema is hetzelfde.
Je kan met dezelfde credentials inloggen als tijdens vorige lessen.
Je kan verder werken met de testopstelling zoals al geconfigureerd.

Extra entiteit 'Event'

Voeg aan het lesvoorbeeld een extra entiteit 'Event' toe. Hiervoor zal je alle aangeleerde leerstof moeten gebruiken. Hergebruik het design van het lesvoorbeeld om tijd te besparen (je kan dezelfde css klasses gebruiken in je formulier elementen).

Beschrijving entiteit

De entiteit Event heeft volgende properties:

• id (uudi, PK, verplicht)
• name (tekst, minstens 5 karakters, verplicht)
• description (tekst, minstens 50 karakters, niet verplicht)
• startDate (datetime, groter dan de huidige dag+tijd, verplicht)
• endDate (datetime, mag niet kleiner zijn dan de startdatum, verplicht)
• userId (uuid, FK naar User, verplicht)
  • Deze wordt niet ingevuld door de gebruiker maar wordt opgevuld met de ingelogde gebruiker (zoals in het lesvoorbeeld).
  • Events mogen automatisch verwijderd worden als de User verwijderd wordt.

De enititeit mag enkel getoond worden aan ingelogde gebruikers.

Info

De refine methode wordt niet overgenomen als je omit, extend of pick gebruikt. Via elk van deze methodes worden de velden in een schema aangepast, hierdoor kan het zijn dat de regine methode niet meer werkt, daarom moet deze voor elk afgeleid schema opnieuw gedefinieerd worden.

Prisma schema

Start met het Prisma schema uit te breiden voor de nieuwe entiteit. Vergeet de relatie niet. Maak een nieuwe migratie aan. Het seed script mag je optioneel uitbreiden.

Zod schema

Maak een zod schema voor je entiteit. Zorg dat dit voldoet aan alle vereisten hierboven beschreven. Maak gebruik van omit/extend/pick om ook een schema te maken voor de create en delete. Denk na over wat je met de userId moet doen, kijk naar het lesvoorbeeld als je twijfelt.

Dal functie

Maak voor alle CRUD functies dal functies aan voor Event. Gebruik afgeleide types zoals aangeleerd in les 2 (vb CreateContactParams in de dal van de contacten).

API routes

Bouw voor alle CRUD functies API routes. Beveilig je API routes met de protectedAPIRoute en publicAPIRoute wrapper functies. Deze kan je vinden in src/lib/apiRoute.ts. Je kan deze gebruiken door ze rond je API routes te zetten en je schema mee te geven. Beslis zelf op basis van bovenstaande vereisten welke van de 2 je zal nodig hebben.

Server functions en actions

Maak voor alle CRUD functies server functions en actions aan. Maak gebruik van de protectedFormAction, publicFormAction, protectedServerFunction en publicServerFunction wrappers om dubbele code te vermijden. Redirect of revalidate waar nodig (de UI routes maken we zo dadelijk aan, kies nu al de juiste namen).

UI routes

Ga terugkijken in les 1 om je bestandsstructuur en naamgeving te bepalen.

Overzichtspagina Events

Maak eerst een overzichtspagina. Houd het design simpel (de naam van het event + de view/delete knoppen) en kijk af van de andere pagina's in het lesvoorbeeld.

Hergebruik het design van de Tag component om het jezelf makkelijk te maken. Zorg ook voor een knop om een nieuw event aan te maken.

Toon enkel de events van de ingelogde user. Zorg ervoor dat er een error komt als de gebruiker niet ingelogd is.

Een niet ingelogde gebruiker moet worden doorgestuurd naar de login pagina. Voeg de pagina toe in de redirectProxy om dit te laten afhandelen door de proxy.

De werking van de create knop kan je al afwerken, maar nog niet testen (de pagina om naar te navigeren maken we zo dadelijk aan), idem voor de werking van de 'view details' knop.

Vergeet je pagina niet toe te voegen aan het menu.

Createpagina

Maak een pagina aan om nieuwe events bij te maken. Maak gebruik van alle technieken die je geleerd hebt in les 6 om dit formulier te bouwen, te laten werken, en te valideren. Gebruik uiteraard de createEventAction die je hebt gemaakt in 1 van de vorige stappen.

Detail pagina Event

Toon een readonly pagina met de details van het event. Zorg ook voor een layout route die knoppen toont om te wisselen tussen de view mode of edit mode.

Edit pagina Event

Maak een edit pagina om bestaande events toe te voegen. De werking zal heel gelijkaardig zijn aan de create pagina, maar met enkele kleine verschillen. De velden moeten al ingevuld zijn, en de id van het event moet mee doorgegeven worden. In het lesvoorbeeld staat uitgelegd hoe je dit moet doen. Vergeet de delete knop niet.