Feature/58 aktiv handleliste

[ingrihka]

Beskrivelse

Detaljsiden for én aktiv handleliste, laget etter Figma-designet «Active shopping list» (FIG. 8 – Notatblokken). Når man trykker på et kort i oversikten «Mine handlelister», kommer man inn på listen og kan se og redigere varene.

Siden bruker foreløpig midlertidige data, som byttes ut med GraphQL når backend for handlelister er klar (#63).

Relaterte issues

Closes #58

Bygger på #62 (oversikt over aktive handlelister).

Endringer gjort

• Ny side pages/shoppingLists/ShoppingListDetailPage.tsx med CSS
• Ny rute /lists/:id i App.tsx. Siden henter riktig liste med useParams, og viser «Fant ikke handlelisten» for ugyldig id
• Notatblokk med listenummer, dato, navn, «X av Y krysset av» og ark bak, slik som i Figma
• Varerader med avkrysning, antall (−/+), notat, pris og fjern-knapp. Avkryssede varer streks over
• «Legg til vare» som legger til en vare skrevet fritt
• Sortering på «Lagt til» og «Alfabetisk»
• Oppsummering til høyre med antall varer, krysset av og estimert sum, som regnes ut fra varene
• Knappene «Start handletur», «Finn flere varer» (går til søk) og «Del lappen»
• Gjenbruker felles komponenter (shopping-list-row, checkbox, quantity-stepper og button) og variabler fra theme.css, så siden følger lys og mørk modus
• Responsiv: oppsummeringen legger seg under lappen på smal skjerm, og varene brytes over to linjer på mobil

Endringer i Taras filer (avklart):

• shoppingListTypes.ts: nye valgfrie felt note? og unitPrice? på ShoppingListItem
• Mock-dataene er flyttet fra ShoppingListsPage.tsx til en felles fil, shoppingListMockData.ts, som både oversikten og detaljsiden bruker, så kortene og listene viser det samme

Hva slags type fiks inneholder denne PR

• Bug fix
• Ny funksjonalitet
• Refactor
• Dokumentasjon
• Testing

Sjekkliste

• Testet lokalt
• Dokumentert endringer
• Sjekket for feilmeldinger

Testet i lys og mørk modus, med alle fire listene, med ugyldig id (/lists/999) og på smal skjerm. TypeScript-sjekken (tsc) går uten feil.

Skjermbilder

Gjenstår

• Hardkodet i oppsummeringen: «Billigst hos» og «Spart mot dyreste» er foreløpig hardkodet (KIWI og 41,20 kr). De krever priser per butikk fra backend.
• Endringer lagres ikke: Avkryssing, antall og nye varer holdes i lokal state og forsvinner ved omlasting, til GraphQL-mutasjonene er på plass (feat: Integrere handlelisteoversikt med GraphQL #63).
• «Start handletur» og «Del lappen» har foreløpig ingen funksjon.

Til Alexis (kobling)

• «Åpne lappen» på startsiden → /lists/{id} for listen med inUse: true
• «Min lapp» i headeren → samme liste (onOpenList i App.tsx)
• «Min aktive lapp» og «Mine handlelister» i menyen → /lists/{id} og /lists
• Varene på den aktive lappen på startsiden kan hentes fra shoppingListMockData.ts, så de stemmer med listen

[lindeav]

Mye av denne returen kunne vært kortet ned med shoppingListRow og quantatityStepper. Jeg lager komponentene også kan du legge de til her:)