Giter VIP home page Giter VIP logo

fixxx-looplijsten-frontend's Introduction

TOP app (Toezicht op pad)

Dankzij de TOP app hebben toezichthouders Wonen veel informatie over zaken, adressen en bewoners bij de hand als zij op straat hun werk doen. Ook kunnen zij hun eigen looplijst samenstellen, op basis van instellingen die planners hebben klaargezet.

Installing

Clone this repository and install its dependencies:

git clone https://github.com/Amsterdam/top-frontend.git
cd top-frontend
npm install

Fetch the latest API schemas:

npm run swagger:generate-schema:acc

Running

Using the acceptance backend is easiest:

npm start

To use a local backend, clone the backend repository and run the Docker instances.

npm run start:local

Deploying

The main branch is automatically deployed to acceptance.

Tag any branch, but preferably main, with a tag like v1.0.0 to deploy that specific commit to production.

Storybook

Component documentation is in progress.

npm run storybook

About

This project was bootstrapped with Create React App.

fixxx-looplijsten-frontend's People

Contributors

daanbeverdam avatar daveneijsen avatar dependabot-preview[bot] avatar dependabot[bot] avatar elmudo avatar gilleswittenberg avatar github-actions[bot] avatar houtmanj avatar jeffrey-zutt avatar joeyamst avatar koenw avatar mguikema avatar petercuret avatar remcohoff avatar remyvdwereld avatar sercanyaldiz avatar vincentsmedinga avatar xavierbloemen avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fixxx-looplijsten-frontend's Issues

JSON Error Messages for API

Print enkel message. Niet de gehele JSON.

PeterC said: Check of de vorm van het error object consistent is.

TOP-App --> Privacy-mode

Knop om privacymodus aan- en uit te zetten zit nu 'verborgen' in detailpagina (eerder waren alleen hier toezichthoudernamen te zien). Echter er is een 'overall plek' nodig (bv. in navigatie) voor hide/show privacy knop. De namen staan nl nu ook in de looplijst en in het lijstgeneratiescherm.

🎨 UX - Notities op Detailpagina TOP-app

Hoe tonen we de gemaakte notities op detailpagina in Top-app, en wat gebeurt er eigenlijk met de andere 'notities' als kladblok BWV, logboek etc.

  • Verwerken feedback TH

TOP-app --> IE11/FF (Citrix) laadt het lettertype niet

Heren, graag check of deze story nog relevant is:

We gebruiken nu de font settings uit Amsterdam Styled Components. Kan zijn dat "Avenir next" niet is geinstalleerd binnen Citrix en dat daardoor de fallback font "Arial" gebruikt wordt.

Yvonne en Mexime 22 april getest:

TOP Pakt fonts Avenir niet:
IE binnen ADW vanuit huis
Firefox binnen ADW vanuit huis
Chrome binnen ADW vanuit huis

Echter: Avenir komt wel door in www.amsterdam.nl zelf (zie screenshot), dus iets klopt er niet.

notitie module comform style guide maken (FE)

  • Titels en hints omdraaien. Label is de vraag dik zwarte gedrukt met evt. (niet verplicht). hint is grijs eronder met toelichting op de vraag. (in praktijk dus teksten veelal omdraaien)

  • radio buttons comform Primairy button component (blauw ipv zwart wanneer selected)

TOP-app --> Max width op lopende tekst

zaak detail informatie, incl. anchor en detail links. Max-width op lopende tekst op desktop zou de leesbaarheid verbeteren. Volgens mij klopt de line-height hier ook niet.

TOP-app --> Redirect na inloggen

Op dit moment komen gebruikers na het inloggen altijd uit op de 'mijn looplijsten' pagina. Het zou gebruiksvriendelijker zijn als de gebruiker weer op pagina terugkomen waar ze vandaan kwamen.

TOP-app --> refactoring Frontend

  • automatically update npm dependencies script (https://github.com/dependabot) (to acc -> prod)
  • do not install npm dev dependencies in Docker Image
  • more, better unit testing
  • use TypeScript Optional Chaining, Nullish Coalescing (https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/prefer-optional-chain.md)
  • expand ESLint settings
  • extract src/pages/LoginCallback.tsx logic to seperate components (vraag: niet beter package for Datapunt ipv elke keer 'wiel uitvinden').
  • more abstract global state, fetching, error handling (useRestReducer), polling
  • React-Final-Form for all forms
  • use React Portal for global alert / message system
  • seems assets (images, svgs) are being reloaded when components renderer
  • all smaller @TODO in codebase (33 currently)
  • split up TypeScript declaration files
  • clean up QueryParams, routing

Wizard Notities bezoek (Frontend)

  • Invoer wizard
  • Terugknoppen
  • Starttijd automatisch invullen
  • Starttijd 24 uurs klok
    • Hangt af van hoe je je OS hebt ingesteld. Even testen hoe het er op iOS/Android uitziet.
  • Tijdinvoer verplicht
  • Frontend: Starttijd + adres in balk onder titelbalk
  • Post resultaat naar API (icm @petercuret )
  • Checkbox in kaartje weghalen
  • Notitie knop veranderen in rode knop
  • Wanneer POST naar backend gelukt is, kaartje updaten
  • Na opgeslagen notitie, alsnog kunnen wijzigen

Bugs Major Cleanup

Bij #302 gevonden bugs:

  • /zoeken en /issuemeldingen should also be accessible when the user has not generated a "lijst", yet. Page https://acc.top.amsterdam.nl/lijst/nieuw/ should contain navigation links to both.
  • https://acc.top.amsterdam.nl/lijst/923/zoeken/. Clearing search form sets error message "Dit veld is verplicht" for empty postal code input.
  • Page content (header, navigation) is shown when user / access token is expired, before throwing alert.
  • It's not possible to delete a "notitie" anymore. An empty "notitie" shows a message "Dit veld is verplicht"
  • 404 page is gone
  • https://acc.top.amsterdam.nl/lijst/nieuw/ is always accessible. (Also when the user has already generated one or more lists) This was placed behind a query parameter flag ?generate=1 before.

Major cleanup

MAJOR CLEANUP

Decided to execute a major cleanup after I had to modify a lot of boilerplate code (managing state) to implement the new feature "visit wizard", which I think will only increase whenever we add more features to TOP.

Hope you're not too overwhelmed by it :-).

How to check:

Please checkout "feature/major-clean-up", run a npm i, and then npm run start to review.

Pros

1. Folder structure same as ZaakSysteem

  • Easy to reuse concepts in both repositories
  • One way of working.
  • Split code into features:
    • cases
    • itineraries
    • login
    • settings
    • shared
    • visits

2. Typesafe routes

Same solution as Zaaksysteem - frontend

3. Less code

~25% less lines of code in ts and tsx files. (Approx. 2000 Lines of code less)

4. Use generated types from Swagger schema.

As much as possible. (Not all responses are documented correctly).
When the backend is ready, switching to it completely is not that hard anymore.

5 Reusable ItineraryItemCard/ItineraryItemCardList

  • Introduced a generic ItineraryItemCard/ItineraryItemCardList used by:
    • itineraries
    • suggestions
    • open-issues
    • start-address

6 Introduced environment variables

No runtime checks anymore

7 Replaced useGlobalState with useApiRequest

  • Added options for useApiRequest:
    - lazy (boolean): When true: don't fetch data on mount.
    - example: useItineraries({ lazy: true })

  • Added options for execDelete, execPost, execPut, execPatch:

    • skipCacheClear (boolean): When true, cache won't get cleared
      - example: const { execPatch } = useItineraries({ lazy: true }); execPatch({ skipCacheClear: true })
    • useResponseAsCache (boolean). When true, cache will be populated with the response of this request.
      - example: const { execPatch } = useItineraries({ lazy: true }); execPatch({ useResponseAsCache: true })
  • Added posibility to update cache manually: eg:

const { updateCache } = useItineraries(); updateCache(( itineraries ) => {
// do something with itineraries 
})
  • Easier to reason with, as latest API response is automatically fetched and used, there is no need to update state manually.

Cons:

  • LOTS of changes
  • Spinner is shown shortly when adding/deleting an item to a list. (Because cache is being cleared, and we refetch again automatically).
    However, dragging items around wont trigger a spinner as we can safely update the cache here.

Aanpassen design notitie module (FE)

Openstaande topics notitie module:

Overall design

  • design header in stappen 'verwerken bezoek en adres'- zie sketch design (andere scheidingslijn en kleiner font?)

  • vraagteken styleguide comform maken

  • opgeslagen: adres deel uitvagen zie sketch design

Geen Medewerking

  • stap 1, subtitel: "Je kreeg geen medewerking. Zijn er zaken die verder opvielen? (niet verplicht)"

Geen medewerking en geen toegang verleend:

  • stap 2: subtitel: "Wanneer kan dit adres het beste opnieuw bezocht worden?" (eerste zinnetje weglaten)
  • Stap 2: volgorde radiobuttons: overdag, weekend, 's Avonds, onbekend
  • Stap 2: titel open veld: "Toelichting: (niet verplicht)"
  • stap 3: radio buttons eerst ja en dan nee
  • Stap 3, Ja: zijn er nog noemenswaardigheden? (niet verplicht)
  • Stap 3, Nee: weglaten "volgende stap", alleen "Waarom niet?"
  • Stap 3: tekst pop-up:
  • titel "Tegenhouden of doorlaten?
  • "Tegenhouden (nee): het adres kan niet direct worden uitgezet. Voorbeeld: machtiging vereist."
  • "Doorlaten: adres komt zonder tussenkomst weer in een looplijst terecht"

TOP-app --> Teamlid wijzigen pulldown

Kan pulldown menu van opties niet wegklikken door ernaast te klikken, alleen maar door weer op opties te drukken. (pijltje zou weer omhoog moeten staan, als teken dat je kan inklappen)

TOP-app --> Index looplijsten per dag

Zodat we overzicht hebben van de lijsten die op een dag gelopen dienen te worden. In ieder geval overzicht voor development, productowner, data mensen (niet per sé voor planner, alhoewel hij de beoordeling wel goed kan maken). (deels voor kwaliteitsdoeleinden)

Zaaksysteem --> Koppeling advertentie uit scrapelijst

BV: Ik bedacht me dit net. Het voorbereidend onderzoek bij een melding heeft ook nog aardig wat potentieel om te versnellen / moderniseren. Wellicht kan die ook nog worden meegenomen ;-)

MP: Yeah, maar we gaan de applicaties met elkaar laten praten dus daar hebben we overigens wel al een aardige stap in zometeen: SIA geeft een deugdelijke melding met info weer, ten behoeve van het aanvullend onderzoek: TOP (nu alleen bij aangemaakte zaak informatie te vinden, maar dan niet gekoppeld aan zaak maar aan adres bronnen zijn immers al gekoppeld, zodat projectmedewerker info top 1 bron heeft om aan te vullen, en evt. andere openstaande zaken die TOP dan weergeeft).

Hier ligt de winst vooral bij het vinden bij internetadvertenties in het vooronderzoek. (bijvoorbeeld scrapelijsten 2.0). Bij openen zaak wordt dan automatisch gezocht in de scrapelijst met de potentiele match van de internetadvertentie bij dit adres waar een zaak wordt aangemaakt. Dat dit geen (zo min mogelijk) mankracht meer kost en het dus niet (advertentie bij adres koppelen) als project hoeft te worden gedaan door allemaal collega’s. Dit kan je meenemen.

Wizard Notities bezoek (UX)

  • Concept Notities in looplijst houden (ipv op detailpagina) huidige ontwerp niet weggoien, andere sprint!
  • Notities uberhaupt in ZKS?

TOP-app: --> Verwijderen zaak uit looplijst

Story: Als toezichthouder wil ik een zaak verwijderen uit mijn zelf gegenereerde looplijst, zodat ik geen zaken loop waar ik een negatieve ervaring heb

Comment: Toezichthouder kan zaak verwijderen (bijv. conflict, eerdere nare ervaring) voor veiligheid, gemoedsrust, werkplezier of zelfstandigheid.

Voor later:

  • max 3 verwijderen
  • toevoegen reden van verwijderen (voor management en om cases te identificeren die niet uitgezet moeten kunnen worden).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.