overzicht instrument toevoegen knop 17 (JS)

[JulianDavelaar]

Wat is er veranderd?

Formulier voor instrument toevoegen op /instrumenten/nieuw met POST route. Velden: naam, serienummer, type, merk, eigendom van, allemaal verplichte velden. Server-side wordt een unieke key (slug) gegenereerd op basis van de naam, met automatisch nummer-suffix als de slug al bestaat. Status wordt auto-set op "Beschikbaar". Na succesvolle submit redirect naar /instrumenten.

---

Bij welke issue hoort deze pull request?

#17 wordt pas gesloten als styling ook aanwezig is

Issue volledig opgelost — formulier werkt, validatie via HTML5, instrument verschijnt in overzicht en detailpagina is bereikbaar via gegenereerde key.

---

Hoe wil je dat dit gereviewd wordt?

• Slug-generatie: klopt het patroon? (bv. "Test Gitaar" -> "test-gitaar-01")
• POST route: twee fetches (eerst keys ophalen, dan POST) performance acceptabel?

---

Eventuele live link, screenshot of bronnen:

Bronnen

• MDN: String.replace() met regex
• MDN: String.padStart()
• Directus: Create Item
• MDN: Regular expressions guide

RAPPE Principles

• User test — formulier ingevuld, instrument toegevoegd en zichtbaar
• Accessibility test
• Progressive Enhancement test — werkt zonder JS (HTML5 form submit)
• Performance test
• Responsive Design test — nog geen mobile styling
• Device test
• Browser test

---

Hoe heb je deze site getest?

• Functional test: "Test gitaar" toegevoegd, komt in overzicht met key test-gitaar-01, detailpagina opent met de juiste data
• Validatie test: form weigert te submitten met leeg veld

[ThomasSeisveld]

Review

JS code is goed en werkt.

---

features die aanpassingen nodig hebben:

• maximale lengte bij het invoerveld (UI bug in tabel)
• de naam van het instrument altijd een hoofdletter geven

---

features die toegevoegd kunnen worden:

• foto invoerveld
• post naar actielog

---

[roxyfokker]

Lekker bezig!

Dit is super:

• Status automatisch op 'Beschikbaar' zetten is top!
• Slug generatie is slim opgezet
• Formulier heeft overal required attributen

Wat moet worden opgelost voor merge

• Route — Cannot GET /instrumenten/nieuw
• Actielog ontbreekt
• Label/input koppeling kapot
• Niet-gesloten div
• Error handling ontbreekt

[ThomasSeisveld]

Kleine aanpassing aan het formulier, zodat er minder problemen zijn in het filteren van een type instrument.

[JulianDavelaar]

Alle aanpassingen heb ik gemaakt in 'overzicht knop toevoegen 17 (styling) excuus.

[JulianDavelaar]

Update commit:

• Slug-key generatie hersteld (was per ongeluk verloren bij merge)
• POST naar Directus voor instrument aanmaken
• POST naar log toegevoegd
• Nieuw veld 'Toegevoegd door'
• Type-veld als , opties komen uit array in GET route Dubbele GET route opgeruimd CSS aangepast: select krijgt dezelfde styling als de inputs