Ga naar inhoud

Werkafspraken (Frontend)

De frontend voor Werkafspraken presenteert een doorzoekbare bibliotheek met multimedia-viewers en een audio-speler voor podcasts.

UI-Architectuur & Design

Het hart van de module is het lijstoverzicht met zoeken, een categoriefilter en een sorteerkeuze (datum of A-Z). De detailpagina is modulair: afhankelijk van het mediatype (foto, video, PDF of alleen tekst met icoon) laadt het scherm de juiste viewer. Een werkafspraak kan een podcast hebben; die wordt getoond als kaart met een afspeelknop en kan in een eigen speler-modal worden beluisterd.

Component-hierarchie

graph TD
    WS[WerkafsprakenScreen] --> WLI[WerkafspraakListItem]
    WS --> AWM[AddWerkafspraakModal]
    WS --> CMM[CategoryManagerModal]
    WS --> PPM[WerkafspraakPodcastPlayerModal]
    WDS[WerkafspraakDetailScreen] --> WPC[WerkafspraakPodcastCard]
    WDS --> PPM
    AWM --> RE[RichEditor]

State & Data Flow

De lijst gebruikt usePaginatedList met een paginagrootte van 50 en een zoekterm met 400 ms debounce. Zolang een item media of een podcast in verwerking heeft (queued of processing) polt het scherm elke 4 seconden. Audio-afspelen loopt via useRemoteAudioPlayback, een cross-platform abstractie over Expo Audio die laadstatus, positie, duur en play/pause/seek bijhoudt en de speler bij unmount vrijgeeft.

Media-uploads lopen langs twee paden: afbeeldingen als multipart naar de backend, video's en PDF's via een presigned POST rechtstreeks naar S3 met voortgang. Het item wordt pas aangemaakt nadat de mediastap is afgehandeld. AddWerkafspraakModal verzorgt zowel toevoegen als bewerken en bevat een versie-stepper en een toggle voor podcast-generatie. De client spiegelt de geschiktheidsregels (podcastEligibility.ts, drempel 280 tekens); de backend her-evalueert.

Proces: werkafspraak maken

sequenceDiagram
    participant U as Gebruiker
    participant M as AddWerkafspraakModal
    participant API as werkafsprakenApi
    participant S3

    U->>M: Vult formulier in en kiest media
    M->>API: ensureWerkafspraakMediaUploaded(file)
    alt foto
      API->>API: multipart upload (WebP)
    else video / pdf
      API->>S3: presigned upload
      API->>API: complete + queued
    end
    API-->>M: media met status en URIs
    M->>API: createItem of updateItem
    API-->>M: bevestiging
    M-->>U: sluit modal en ververst de lijst
  • /werkafspraken - het hoofdoverzicht.
  • /werkafspraken/[id] - de detailpagina; polt door terwijl media of podcast wordt verwerkt.
  • /werkafspraken/nieuw - scherm voor een nieuwe werkafspraak.
  • Het toevoegformulier, het categoriebeheer en de podcast-speler draaien in AppModal-componenten.

Bestandsstructuur & Verantwoordelijkheden

  • api/werkafsprakenApi.ts - alle HTTP-calls plus de upload-routing (multipart versus directe S3).
  • screens/WerkafsprakenScreen.tsx - haalt de lijst op en stuurt zoeken, filteren, sorteren en de modals aan.
  • screens/WerkafspraakDetailScreen.tsx - stelt de detailpagina samen en kiest de juiste media-viewer.
  • components/AddWerkafspraakModal.tsx - data-invoer, media-upload, versie-stepper en de podcast-toggle (toevoegen en bewerken).
  • components/WerkafspraakListItem.tsx - compacte kaart met mediatype-icoon en podcast-status.
  • components/WerkafspraakPodcastCard.tsx - toont de podcast-status (ongeschikt, in verwerking, klaar of mislukt) met een afspeelknop.
  • components/WerkafspraakPodcastPlayerModal.tsx - de audio-interface met seek-balk en tijdsweergave.
  • hooks/useRemoteAudioPlayback.ts - cross-platform audio-afspelen via Expo Audio.
  • podcastEligibility.ts - client-side spiegeling van de geschiktheidsregels.
  • types.ts - de datastructuren voor categorie, media, podcast en item.

Belangrijke bestanden

  • src/features/werkafspraken/screens/WerkafsprakenScreen.tsx
  • src/features/werkafspraken/api/werkafsprakenApi.ts
  • src/features/werkafspraken/components/AddWerkafspraakModal.tsx
  • src/features/werkafspraken/hooks/useRemoteAudioPlayback.ts