US5 - Edit a Service (SPD)

[shrocket]

Value proposition

As a hotel service manager I want to edit a service In order to keep existing services up to date

Description

Acceptance criteria

• [ ] on the service details page, there is an "edit" button
• [ ] when the "edit" button is clicked, the user should be directed to a page which
  • [ ] looks almost exactly like the "add service" page
  • [ ] instead of the words "Add service", "Edit Service" can be seen
  • [ ] has the form details pre-filled in with the details of the service wherein "edit" was clicked
  • [ ] has a "cancel" button, which, when clicked, directs the user back to the service list without saving any changes
  • [ ] has a "save" button, which, when clicked,
  • [ ] shows a confirmation prompt or message that the form has been successfully edited (please ignore that part of the wireframe)
  • [ ] directs the user back to the service list, where the edited service is shown with new details
  • [ ] if the user attempts to submit an empty or partially empty form, an error message is displayed indicating which fields are mandatory (all fields are mandatory)

Tasks

• [x] create a branch: feature/edit-service

Changing the folder tree/file structure

• [x] Make the following changes to the file structure:
• Paths are relative to the /pages folder.

File	URL	What it does
SPD/index.js	/SPD/	Displays all services with add actions
SPD/[id].js	/SPD/:id	Displays each service with details, edit and delete button
SPD/services/create.js	/SPD/services/create	Displays the create service form
SPD/services/[id]/edit.js	/SPD/services/:id/edit	Displays the edit service form

Create an "Edit" button

• [x] under the ServiceCard, next to the "Delete" button, create an " ✏️ Edit" button in the file "pages/SPD/services/edit.js"
• [x] in the file "pages/SPD/services/[id]/edit.js" make the following changes:
  • [x] fetch the given data with the "id" from ServiceForm
  • [x] under the ServiceForm, create a "Cancel" link
  • [x] under the ServiceForm, create a "Save" button
  • [x] code error handing , including success and failure messages
  • [x] code saving to the database

Minor Refactoring

• [x] move + add service link from /components/ServiceList/index.js to /pages/SPD/index.js
• [x] move the ❌ delete link from /components/ServiceCard/index.js to /pages/[id].js
• [x] double-check that the import/export links are correct

[AnnaD91]

Looks all fantastic 🚀 Everything you've mentioned in the Acceptance criteria works perfectly fine. Just one little detail: After editing a trip and clicking on 'save', the user is directed to the service details page rather than on the service list page 😊

[shrocket]

Thank you! It looks like there's a bit of a discrepancy between the wireframe (back to the details page) and the acceptance criteria (back to the list). We changed the code this morning to match the wireframe, but forgot to double-check the acceptance criteria. We prefer the wireframe variant! :)