Przeglądaj źródła

P2-45 af: datumknop naast de chips op Home (gebouwd + op toestel getest)

- filterDatumVan/filterDatumTot laten een kale yyyy-MM-dd door
- nieuwe custom function datumKnopLabel (wacht op binding door Bob, P2-45a)
- CLAUDE.md: hover+klik moeten in dezelfde batch, en Confirm van
  "Set Function Arguments" reageert niet op browser-automation

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
bob 3 godzin temu
rodzic
commit
7b056d585f
2 zmienionych plików z 62 dodań i 77 usunięć
  1. 23 0
      CLAUDE.md
  2. 39 77
      TASKS.md

+ 23 - 0
CLAUDE.md

@@ -4121,6 +4121,29 @@ herhaald in één sessie:
 - Zit de rij er na twee volledige rondes nog niet, dan klopt de aanname over de
   y-positie meestal niet: de rij zit ±20 px onder de kop "Available Options",
   de optie zelf ±38 px onder de sectiekop.
+- ⚠️ **Hover én klik moeten in DEZELFDE `browser_batch`.** Doe je de klik in een
+  volgende tool-aanroep, dan is de rij intussen weer naar hoogte 0 gezakt en landt
+  je klik op de sectiekop eronder — die klapt dan open/dicht en het lijkt of de
+  dialoog "reset". Dat kostte 2026-09-18 vier pogingen op één binding; met
+  `hover(ver weg)` → `hover(rij)` → `wait 10` → `left_click(zelfde coördinaat)` in
+  één batch lukte het meteen. Je ziet het bewijs in een volledige screenshot: bij
+  een niet-gerenderde rij staat de vólgende sectiekop ±14 px onder "Available
+  Options" i.p.v. ±34 px.
+
+**Een gewone variabele-binding (App State, Widget State) wordt DIRECT toegepast
+als je de optie aanklikt — maar een binding met een custom function heeft een
+Confirm nodig, en die knop reageert structureel niet op browser-automation.**
+Bevestigd 2026-09-18 op een `Text` op Home. Een klik op bv. App State →
+`datumFilter` sluit de dialoog zelf en het rechterpaneel toont de binding meteen:
+klaar, geen Confirm. Kies je in diezelfde dialoog een **Custom Function**, dan komt
+er een "Set Function Arguments"-blok bij en moet je wél Confirm klikken — en dáár
+gebeurde 8 keer niets (losse klik, hover+klik, `double_click`, Return, en na de
+dialoog omhoog te hebben gesleept; de knop licht wel op bij hover). **Remove en
+Cancel in diezelfde knoppenrij werken wél**, dus de dialoog is niet bevroren.
+⚠️ **Een half gebonden functie-argument BLOKKEERT de export** (`Status: 400`,
+Issues-teller +1) — precies zoals bij een List-typed custom-action-argument. Merk
+je dat je Confirm niet krijgt: klik **Remove** (dat werkt) vóór je verdergaat,
+anders ligt de export plat voor élke sessie. Draag de binding daarna over aan Bob.
 
 **Het commandopalet (de zoekbalk bovenin) negeert structureel de EERSTE
 typ-actie.** Het palet opent wel, maar toont dan de resultaten van je vórige

+ 39 - 77
TASKS.md

@@ -27,10 +27,11 @@ klopt sinds je 'm las.*
    hieronder. Deel A (Drupal) bij Bob, deel B (app) bij Claude.
 5. **P2-44 · datum-icoon zonder datum op `EventCurrent`** — ⚠️ niet gelukt via
    browser-automation, ligt bij Bob; zie het blok verderop voor de valkuil.
-6. **P2-45 · knop "Selecteer datum" naast de datumchips op Home** — nieuw
-   2026-09-18 op Bob's vraag, zie het uitgeschreven blok verderop. Feature, dus
-   geen livegang-blokker; Claude kan dit zelf in de builder doen. **De Row die
-   hij nodig heeft ligt er al** (taak 90); let wel op de chipbreedte.
+6. ~~**P2-45 · knop "Selecteer datum" naast de datumchips op Home**~~ — **GEBOUWD
+   2026-09-18 (Claude), export-geverifieerd.** Restpunten verderop: **P2-45a**
+   (mooier label via `datumKnopLabel` — moet Bob doen, de Confirm-knop van die
+   dialoog werkt niet voor Claude), **P2-45b** (annuleren zet het filter op vandaag)
+   en **P2-45c** (chiplabels korter maken).
 8. **91 · meer omschrijvingstekst op de evenementkaart bij een breder scherm ·
    Eigenaar: Claude — bezig (2026-09-18).** `HomeUitgaantabelKaartComponent`,
    de `Text` van `$.inhoud`: Max Lines binden aan een Responsive Value i.p.v.
@@ -827,13 +828,10 @@ telefoon-emulator bekeken (zie screenshots in `~/uk-shots/2026-09-16/na-*.png`).
   Condition** → First Value = *Evenement Response* → JSON Path `$[0].datum` →
   operator **Is Set** → Confirm. Daarna op `TextData` de Conditional uit (dubbel).
   Export-check: het `if (... != null)` moet vóór `Row(` staan, niet erbinnen.
-- **✅ De Row voor P2-45 staat er al — taak 90 heeft 'm gebouwd (2026-09-18).**
-  Structuur op Home is nu `Row [ FlutterFlowIconButton(Icons.search) |
-  Expanded > FlutterFlowChoiceChips ]`, met het zoekveld erboven achter
-  `if (_model.zoekOpen)`. Voor P2-45 hoef je dus alleen de datumknop als
-  **derde kind** van die Row toe te voegen (drop op de Row-rij landt op positie
-  0, dus daarna de andere twee er weer op droppen — zie het herordenings-recept
-  in `CLAUDE.md`).
+- **✅ Die Row is af (taak 90 + P2-45, 2026-09-18).** Structuur op Home is nu
+  `Row [ IconButton(search) | IconButtonDatum(calendar_month) | Expanded >
+  ChoiceChips | Text(datumFilter) ]`, met het zoekveld erboven achter
+  `if (_model.zoekOpen)`.
 - **⚠️ Openstaand: de vier chiplabels passen niet op één regel.** Met het
   zoekicoon erbij wrappen ze nu naar twee regels (gemeten op het canvas); met
   de datumknop van P2-45 erbij wordt dat alleen erger. Ruimte is er wél als de
@@ -843,72 +841,36 @@ telefoon-emulator bekeken (zie screenshots in `~/uk-shots/2026-09-16/na-*.png`).
   (geverifieerd 2026-09-18 in `custom_functions.dart`). Vergeet bij een
   labelwijziging de Engelse vertaling niet (P1-17).
 
-- **P2-45 · Home: knop "Selecteer datum" naast de datumchips · Eigenaar: Claude — bezig
-  (builder + custom code, sessie 2026-09-18 middag).** Vraag Bob 2026-09-18: *"Kan
-  bij die choicechips ook een button, selecteer datum?"* Ja — en het past op de
-  bestaande architectuur zonder nieuwe App State of nieuwe API-parameters.
-
-  **Hoe het nu werkt** (`lib/uitgaanspaginas/home/home_widget.dart`): de chips
-  (Alles / Vandaag / Dit weekend / Deze week, `wrapped: true`) zetten in hun
-  `onChanged` `FFAppState().datumFilter = <chiplabel>` en roepen daarna
-  `herlaadLijsten()` aan. Elke van de 5 `HomeUitgaantabelKaartComponent`-
-  instanties heeft `key: ValueKey(FFAppState().datumFilter)` en krijgt
-  `datumVan: filterDatumVan(datumFilter)` / `datumTot: filterDatumTot(...)`
-  mee; die twee custom functions vertalen het chiplabel naar
-  `yyyy-MM-dd 00:00:00` resp. `yyyy-MM-dd 23:59:59`, en die gaan als
-  `datum_van`/`datum_tot` naar `flutterflowmobiel1` (afgehandeld in
-  `custom_views_query_alter()`). `datumFilter` is dus de enige bron van
-  waarheid — een gekozen datum hoeft daar alleen maar *in* te komen.
-
-  **A · `filterDatumVan` / `filterDatumTot` een rauwe datum laten doorlaten.**
-  Voeg in beide functies, direct ná `final k = (keuze ?? '').toLowerCase().trim();`
-  en vóór de `contains`-checks, toe:
-  ```dart
-    if (k.length == 10 && k[4] == '-' && k[7] == '-') {
-      return '$k 00:00:00';   // in filterDatumTot: '$k 23:59:59'
-    }
-  ```
-  Geen regex, geen geneste closure (FlutterFlow's validator struikelt daarover,
-  zie `CLAUDE.md`). Taalonafhankelijk, dus dit werkt ook in het Engels.
-  ⚠️ Achteraf bewerken in de Custom Code-editor is onbetrouwbaar: **Cancel →
-  "Discard new custom code?" → Yes** en de volledige body in één keer opnieuw
-  typen, daarna **Ctrl+S** (zonder die Ctrl+S haalt de wijziging de export niet).
-
-  **B · De knop op Home.** `FlutterFlowChoiceChips` zit als direct kind in de
-  Column onder het zoekveld. Wrap de chips in een **Row** en zet de knop
-  ernaast (chips in `Flex → Expansion = Expanded`, zodat ze blijven wrappen).
-  Voorkeur: een compacte knop of `FlutterFlowIconButton` met
-  `Icons.calendar_month` — vier chips vullen op 411 dp al bijna de breedte, dus
-  een brede tekstknop ernaast loopt over. Controleer op telefoonformaat
-  (411 dp) én tablet dat er niets afkapt.
-
-  **C · Actieketen op de knop** (Action Flow Editor, niet het compacte
-  Actions-paneel — daar opent de Set-Variable-dialoog niet):
-  1. **Date/Time Picker** — type *Date only*, `Min Date` = vandaag.
-  2. **Update App State** → `datumFilter` = `Date Picked 1`, Available Options
-     **DateTime Format** → in *DateTime Format Options* het woord `custom` typen
-     (staat niet in de standaardlijst) → *Custom Format* **`yyyy-MM-dd`**. Die
-     10-tekenvorm is precies wat A herkent. `Date Picked N` staat onder **Widget
-     State**; zoekveld leeg laten, sectie openklappen, 10 s wachten en hoveren
-     (zie `CLAUDE.md`).
-  3. **Custom Action `herlaadLijsten`** — verplicht, anders houdt de
-     `pagingController` de oude lijst vast; de Value Key alleen doet niets.
-
-  **D · Twee restpunten die je bewust moet afhandelen.**
-  - Na het kiezen van een datum blijft de eerder gekozen chip nog gemarkeerd —
-    FlutterFlow heeft geen actie om een `FormFieldController` van choice chips
-    te wissen. Oplossing: laat de **knoptekst de gekozen datum tonen**, via een
-    nieuwe custom function `datumKnopLabel(String? filter)` die `Selecteer
-    datum` teruggeeft tenzij `filter` een 10-teken-datum is (dan `dd-MM-yyyy`).
-    Dan is altijd zichtbaar welk filter écht actief is.
-  - Andersom klopt het al vanzelf: een chip aantikken overschrijft
-    `datumFilter` en wist de datum dus.
-
-  **Testen** (browserloos, telefoonformaat): `--route "/home"` in een profile-
-  build, datum kiezen, en de lijst naleggen met
-  `curl ".../flutterflowmobiel1.json?display_id=services_5&townid=28695&datum_van=<d>%2000:00:00&datum_tot=<d>%2023:59:59"`.
-  Reken erop dat de evenementenvoorraad per dag sterk wisselt — tel eerst met
-  curl vóór je concludeert dat de knop niets doet.
+- **P2-45 · ✅ GEBOUWD 2026-09-18 (Claude, in de builder), export-geverifieerd.**
+  Home heeft naast het zoekicoon en de datumchips nu een **kalenderknop**
+  (`Icons.calendar_month`, widgetnaam `IconButtonDatum`) die een datumkiezer opent
+  (alleen datum, *Allow Past Date* uit), `FFAppState().datumFilter` op `yyyy-MM-dd` zet
+  en `herlaadLijsten()` aanroept. `filterDatumVan`/`filterDatumTot` herkennen zo'n kale
+  datum (10 tekens, streepjes op plek 5 en 8) en geven er `… 00:00:00` resp. `… 23:59:59`
+  van terug — taalonafhankelijk, dus ook goed in het Engels. Rechts in dezelfde rij staat
+  een `Text` gebonden aan `FFAppState().datumFilter`, zodat zichtbaar is wélk filter echt
+  actief is: een chip blíjft namelijk gemarkeerd nadat je een datum kiest (FlutterFlow
+  kan een choice-chip-selectie niet wissen). **Drie restpunten:**
+- **P2-45a · label mooier maken · Eigenaar: Bob (1 minuut in zijn eigen browser).**
+  De custom function **`datumKnopLabel(filter)`** staat klaar (Custom Code → Functions):
+  `dd-MM-yyyy` bij een datum, een **lege string** bij een chipwaarde — dan verdwijnt de
+  tekst netjes als een chip actief is. Zet op Home → `Row` → de laatste `Text` de waarde
+  op Custom Functions → `datumKnopLabel`, argument `filter` = App State `datumFilter`.
+  ⚠️ **Claude kan dit niet afmaken:** in de "Set Function Arguments"-dialoog reageert de
+  **Confirm-knop structureel niet** op browser-automation (8 pogingen, ook na de dialoog
+  te verslepen; Remove en Cancel in diezelfde knoppenrij werken wél). Blijft zo'n binding
+  half staan, dan **blokkeert dat de hele export** (`Status: 400`) — dat gebeurde
+  2026-09-18 één keer en is meteen met Remove teruggedraaid.
+- **P2-45b · annuleren van de datumkiezer · Eigenaar: Bob (besluit) / Claude (uitvoering).**
+  FlutterFlow genereert zelf: annuleer je de kiezer nádat je eerder een datum koos, dan
+  zet hij `datePicked` op vandaag en wordt het filter dus **vandaag** i.p.v. ongewijzigd.
+  Zonder eerdere keuze klopt annuleren wel (filter wordt leeg = Alles). Op te lossen met
+  een Conditional rond de Update-App-State-actie; nu bewust zo gelaten.
+- **P2-45c · chipbreedte.** De vier chiplabels wrapten met het zoekicoon al naar twee
+  regels; met de kalenderknop erbij is er nóg minder ruimte. Zie de suggestie hierboven:
+  **"Weekend"** i.p.v. "Dit weekend" (veilig, want de functies matchen op
+  `contains('weekend')`) — plus de Engelse vertaling (P1-17).
+
 - **P2-36 · ❌ NEE — besluit Bob 2026-09-16: kaarttitels blijven Roboto.**
   Niet opnieuw voorstellen. (Voorstel was Title Large/Medium op Noto Serif zetten
   omdat de site kaarttitels in serif zet; Headline L/M/S staan al wel op serif.)