Copy Placeholders for UCSBOrganization pages; add to App.js/AppNavbar.js
Acceptance Criteria:
[ ] When the user navigates to /ucsborganization/edit/:id where :id
is the id field of a valid record in the table, the page will be populated
with data from that row of the database, and will be able to edit fields
from that database record.
[ ] Valid changes made on the page are saved to the database when the user clicks
the submit button.
[ ] Changes made on the page are NOT saved when the page contains invalid data; instead,
appropriate error messages are shown.
[ ] Changes made on the page are NOT saved when the user clicks the cancel button,
and the user is routed back to the previous page they were on (like the "back button").
[ ] The PR description where the code addressing this issue is submitted contains
a screenshot of the new page (since this is a frontend change).
[ ] The PR description where the code addressing this issue is submitted contains
a link to the published storybook for the PR, linking directly to the story
for the new UCSBOrganizationEditPage component.
Implementation Details
[ ] Before starting, refamiliarize yourself with the backend CRUD API endpoints for
UCSBOrganization by looking at the swagger page. You are going to be copy/pasting
code from the Restaurant and UCSBDates components. Those use backend api endpoints
that are similar to the ones for UCSBOrganization, but not identical. You will need
to know the exact name of the API endpoints for UCSBOrganization in order to
be sure that your frontend code is calling the correct backend endpoints.
[ ] Replace the placeholder content in UCSBOrganizationEditPage.js
with appropriate content from RestaurantEditPage.js and/or
UCSBDatesEditPage.js. Be sure to get the API endpoint names correct for your UCSBOrganization table.
[ ] Replace the placeholder content in UCSBOrganizationEditPage.test.js
with appropriate content from RestaurantEditPage.test.js and/or
UCSBDatesEditPage.test.js. Be sure to get the API endpoint names correct for your UCSBOrganization table.
[ ] Under frontend/src/stories/pages/UCSBOrganization/ create a file
called UCSBOrganizationEditPage.stories.js modelled after
the files RestaurantEditPage.stories.js and/or UCSBDatesEditPage.stories.js.
Reminders (all from frontend directory):
To run storybook locally: npm run storybook.
To run tests locally: npm test.
Quickly test coverage locally: npm run coverage
Check linting locally: npx eslint --fix .
Check mutation coverage locally (slow): npx stryker run
Check mutation coverage of single file (faster): npx stryker run -m src/main/pages/UCSBOrganization/UCSBOrganizationEditPage.js
What to do next
When you are done with this issue, you are finished with the frontend CRUD
operations for UCSBOrganization. Now, please give your full attention to
helping others on your team to complete the sprint, so that the team
is ready to submit on Canvas by the deadline.
Dependencies
Complete the following issues first:
UCSBOrganizationpages; add to App.js/AppNavbar.jsAcceptance Criteria:
[ ] When the user navigates to
/ucsborganization/edit/:idwhere:idis theidfield of a valid record in the table, the page will be populated with data from that row of the database, and will be able to edit fields from that database record.[ ] Valid changes made on the page are saved to the database when the user clicks the submit button.
[ ] Changes made on the page are NOT saved when the page contains invalid data; instead, appropriate error messages are shown.
[ ] Changes made on the page are NOT saved when the user clicks the cancel button, and the user is routed back to the previous page they were on (like the "back button").
[ ] The PR description where the code addressing this issue is submitted contains a screenshot of the new page (since this is a frontend change).
[ ] The PR description where the code addressing this issue is submitted contains a link to the published storybook for the PR, linking directly to the story for the new
UCSBOrganizationEditPagecomponent.Implementation Details
[ ] Before starting, refamiliarize yourself with the backend CRUD API endpoints for
UCSBOrganizationby looking at the swagger page. You are going to be copy/pasting code from theRestaurantandUCSBDatescomponents. Those use backend api endpoints that are similar to the ones forUCSBOrganization, but not identical. You will need to know the exact name of the API endpoints forUCSBOrganizationin order to be sure that your frontend code is calling the correct backend endpoints.[ ] Replace the placeholder content in
UCSBOrganizationEditPage.jswith appropriate content fromRestaurantEditPage.jsand/orUCSBDatesEditPage.js. Be sure to get the API endpoint names correct for yourUCSBOrganizationtable.[ ] Replace the placeholder content in
UCSBOrganizationEditPage.test.jswith appropriate content fromRestaurantEditPage.test.jsand/orUCSBDatesEditPage.test.js. Be sure to get the API endpoint names correct for yourUCSBOrganizationtable.[ ] Under
frontend/src/stories/pages/UCSBOrganization/create a file calledUCSBOrganizationEditPage.stories.jsmodelled after the filesRestaurantEditPage.stories.jsand/orUCSBDatesEditPage.stories.js.Reminders (all from
frontenddirectory):npm run storybook.npm test.npm run coveragenpx eslint --fix .npx stryker runnpx stryker run -m src/main/pages/UCSBOrganization/UCSBOrganizationEditPage.jsWhat to do next
When you are done with this issue, you are finished with the frontend CRUD operations for
UCSBOrganization. Now, please give your full attention to helping others on your team to complete the sprint, so that the team is ready to submit on Canvas by the deadline.