feat: Implementere produktsøk og søkeresultatside

[annisaam]

Beskrivelse

Implementere søkefunksjonalitet og en egen søkeresultatside i Handlelappen, basert på designet i Figma.

Brukeren skal kunne søke etter dagligvarer og få relevante produkter fra PostgreSQL-databasen presentert på en oversiktlig og brukervennlig måte. Søkeresultatene skal vise relevant produktinformasjon og legge til rette for filtrering etter kategori og butikkjede, samt sortering av produkter.

Søkeresultatsiden skal også håndtere tilfeller der søket ikke gir treff, vise tydelige laste- og feilmeldinger og fungere på ulike skjermstørrelser.

Oppgaven er en del av arbeidet med tredje underveisinnlevering, hvor målet er å utvikle en fungerende beta-versjon med fokus på søk, navigasjon, universell utforming og en helhetlig brukeropplevelse.

Foreslått løsning

1. Søkeresultatside og layout

• Opprette en egen React-komponent for søkeresultatsiden med TypeScript.
• Implementere layout og visuell struktur basert på Figma-designet.
• Vise brukerens søkeord i overskriften, eksempelvis «Treff for ost».
• Vise antall produkter som matcher søket.
• Presentere produktene i en oversiktlig resultatliste med produktnavn, merke, mengde/enhet og pris der data finnes.
• Tilpasse siden til både desktop og mindre skjermstørrelser.
• Holde komponenten mest mulig uavhengig av eksisterende App.tsx frem til felles integrasjon.

2. Søkefunksjonalitet

• Implementere søkefelt for produktnavn og søkeord.
• Bruke eksisterende Apollo Client-oppsett for kommunikasjon med GraphQL-backend.
• Hente ekte produktdata fra PostgreSQL via GraphQL, fremfor hardkodede produkter.
• Oppdatere søkeresultatene når brukeren gjennomfører et nytt søk.
• Håndtere tomme søk, lasting og eventuelle feil fra backend.
• Sørge for at søkefunksjonen er enkel å bruke med både tastatur og mus.

3. Filtrering

• Implementere filterseksjoner for produktkategori og butikkjede.
• Forberede filtrering etter produktmerking dersom relevante data er tilgjengelige.
• Vise aktive filtre som tydelige valg over søkeresultatene.
• Gi brukeren mulighet til å fjerne enkeltfiltre eller nullstille alle.
• Oppdatere resultatlisten og antall treff når filtrene endres.
• Ved valg av butikkjede skal relevante produkter og butikkens priser vises der prisdata finnes.

4. Sortering

• Implementere en sorteringsmeny basert på Figma-designet.
• Tilrettelegge for sortering etter relevans.
• Implementere prisbasert sortering, stigende og synkende, dersom datagrunnlaget støtter dette.
• Sørge for at sortering fungerer sammen med aktive filtre.

5. Ingen søkeresultater

• Implementere en egen tomtilstand når søket ikke gir treff.
• Vise en forståelig melding fremfor en tom resultatside.
• Gi brukeren mulighet til å nullstille filtre eller gjennomføre et nytt søk.
• Undersøke muligheten for å foreslå andre butikkjeder dersom et produkt finnes hos andre butikker, men ikke hos den valgte kjeden.
• Følge Figma-designet for visning av søk uten treff.

6. Integrasjon med andre komponenter

• Forberede navigasjon til produktdetaljsiden som utvikles av Tara.
• Forberede «Legg på lappen»-funksjonalitet for integrasjon med handlelistekomponentene som utvikles av Linde.
• Avklare felles datatyper og identifikasjon av produkter, eksempelvis EAN.
• Koordinere søkefelt og navigasjon med startsiden som utvikles av Ingri.
• Unngå større endringer i App.tsx og felles routing før integrasjon gjennomføres sammen med gruppa.

7. Universell utforming og kvalitetssikring

• Bruke semantisk HTML og tydelige overskrifter.
• Sikre tastaturnavigasjon og synlig fokus på interaktive elementer.
• Bruke tilgjengelige labels på søkefelt, filtre og knapper.
• Sikre tilstrekkelig kontrast og god lesbarhet.
• Teste ulike skjermstørrelser og håndtering av lange produktnavn.
• Kontrollere at siden fungerer med ekte produktdata.
• Kjøre frontend-build og lint før Pull Request.

Akseptansekriterier

• Søkeresultatsiden er implementert i React og TypeScript og følger Figma-designet.
• Brukeren kan søke etter produkter og få relevante resultater fra GraphQL-backend.
• Resultatlisten viser produktnavn og tilgjengelig informasjon om merke, mengde og pris.
• Søkeord og antall treff vises tydelig.
• Brukeren kan filtrere produkter etter kategori og butikkjede.
• Ved filtrering på butikkjede vises butikkens pris der den finnes.
• Brukeren kan nullstille aktive filtre.
• Sortering fungerer for alternativene som støttes av datagrunnlaget.
• Siden viser en tydelig melding dersom søket ikke gir treff.
• Siden viser lastetilstand og forståelig feilmelding dersom backend ikke svarer.
• Siden er responsiv og kan brukes med tastatur.
• Komponentene er klargjort for integrasjon med produktdetaljside og handleliste.
• npm run build og npm run lint i frontend kjører uten feil.
• Funksjonaliteten er testet lokalt med ekte produktdata.
• Endringene er gjennomgått i en Pull Request mot dev.

Design/mockup

Search results: Søkeresultater med kategorier, butikkfilter, produktliste, sortering og handleliste.

Search filtered by Kiwi: Filtrerte søkeresultater hvor prisene gjelder valgt butikkjede.

Search no results at Kiwi: Tomtilstand når valgt butikk ikke har treff, med mulighet for å undersøke andre butikkjeder.

Avhengigheter

• Tara: Produktdetaljsiden utvikles separat. Navigasjon og produktidentifikasjon må samordnes.
• Linde: Handlelistefunksjonaliteten utvikles separat. «Legg på lappen»-knappen må kobles til felles løsning ved integrasjon.
• Ingri: Søkefelt og navigasjon fra startsiden må samordnes med søkeresultatsiden.
• Felles integrasjon: Endringer i felles App.tsx, routing og overordnet navigasjon gjennomføres i samarbeid med gruppa for å redusere merge-konflikter.