Observation details layout

peterdesmet commented 1 month ago

@stevegerrits here's the suggested layout for the observation details:

HTML

```html Observation Details - Admin Edit Mode

Melding 12040

22 mei 2023, Sint-Pieters-Leeuw

Gereserveerd door RATO (nog 5 dagen)

Datum

Uitvoerder

Duur

Personeel

Resultaat

Methode

Product

Nazorg

Problemen

Opmerkingen

Type

Locatie

Grootte

Hoogte

Opmerking

Groot nest

Bron

Waarnemingen.be

Validatiestatus

Goedgekeurd op basis van foto

Opmerking validator

Gelieve een foto toe te voegen zodat we de waarneming kunnen valideren. Zonder lukt niet.

Melder

Peter Desmet

E-mail

peter.desmet@inbo.be

Telefoon

0485 123456

Nest tonen

Cluster ID

Melder kreeg e-mail

Nest op publiek terrein

Opmerkingen

Aangemaakt op 2023-05-22T10:00:00Z door Peter, gewijzigd op 2023-05-22T10:00:00Z door Steven.

```

Observation-Details-Admin-Edit-Mode (2)

Notes

[x] Use d-none class (not style="display: none;") to hide elements
[x] observation-datetime should be shown as a human readable date (in Dutch)
[x] The reservation section
- [x] Should show reserve-btn if user can reserve
- [x] Should show reservation info if reserved (with reserved-by and remaining days)
- [x] Should show cancel-reservation-btn if user is the reserved-by or admin
[x] The edit section
- [x] Rather than a toggle between edit and no edit, I would always show the observation details as a form.
- [x] If user has no rights, don't show buttons
- [x] If user has no rights, add readonly to all <input>s and change class from form-control to form-control-plaintext
- [x] If user has no rights, add disabled to all <select> and <input type="checkbox">. Not sure how textareas are handled
- [ ] (If possible) have buttons disabled unless user has edited fields (I think you can detect this with JS)
- [x] The buttons save the whole form
[x] The sections section uses Bootstrap accordion to collapse elements. The nest accordion-item is shown by default
[x] The eradication section has a badge in the eradication-header showing the eradication status.
[x] The nest section uses a Bootstrap carousel to show the images.
[x] Although the admin can remove images, I would not build this functionality in the observation details (should be done in Django admin)
[x] If source is waarnemingen.be, create a URL with the wn-id to point to the observation. Otherwise, just show the source name.
[x] The contact section is only shown if the user has rights
[x] The admin section is only shown for the admin user

Things I defined that should be done differently:

[x] Style on <body> was just to get a smaller panel
[x] Many elements have id to indicate what field is shown. Should be translated to {{ ... }} in Vue component.

Ping me if you have questions.

stevegerrits commented 1 month ago

what would "wijzigingen annuleren" do? Reset all original information?

peterdesmet commented 1 month ago

It would not save the changes the user has made before saving. Would have the same result as closing modal (without save) or closing browser tab (without save).

stevegerrits commented 1 month ago

is it needed then? As it's the same as closing the details screen?

peterdesmet commented 1 month ago

No, probably not.

inbo / vespa-db