[x] A form called ArticlesForm is visible in the storybook
accessible on the Github Pages link.
[x] The form has all the fields that are in the database table
the form fields are labelled with user-friendly names corresponding
to the database table column names.
[x] The form has suitable validations for all fields, indicating which fields
are required to be non-blank, and any validation that should be performed
(e.g. on dates, time values, numeric values with restricted ranges etc.).
You can use regular expressions for this, or any of the other validations
features of react-query-form, using the register feature, documented here:
https://www.react-hook-form.com/api/useform/register/. Consult
both the RestaurantForm.js and UCSBDatesForm.js files for examples.
[x] If there are date/time fields, use a date/time picker similar
to the one in the UCSBDatesForm component. (If this is
not applicable to your table, then you can skip this step.)
[x] The ArticlesForm.stories.js file should have at least one story
for a create scenario, and another for an update scenario.
[x] The PR description where the code addressing this issue is submitted contains
a screenshot of the new form (since this is a frontend change).
[x] The PR description where the code addressing this issue is submitted contains
a link to the published storybook for the PR.
Implementation Details:
[x] Under frontend/src/main/components/Articles/ there is a file
called ArticlesForm modelled after
the files RestaurantForm.js and/or UCSBDatesForm.js
[x] Change the form fields so that they correspond to
the form fields of your database record. If there are
are labelled with user-friendly names corresponding
to the database table column names.
[x] Add suitable validations for all of your fields indicating which fields
are required to be non-blank, and any validation that should be performed
(e.g. on dates, time values, numeric values with restricted ranges etc.).
You can use regular expressions for this, or any of the other validations
features of react-query-form, using the register feature, documented here:
https://www.react-hook-form.com/api/useform/register/.
Consult both the Restaurant and UCSBDates examples for guidance.
[x] The form should take a prop called initialContents which is either
undefined, or an object that has the same fields as the database table.
When passed, it indicates that the form is being used to edit an existing
object. The id field should be displayed as a read-only field,
and the other fields are pre-populated with the values from the object.
[x] When the initialContents is undefined, it indicates that the form is
being used to create a new object. Therefore, if the id field is autogenerated,
it should not be displayed on the form, and other form values should
be either empty, or populated with default or example values (as appropriate).
[x] The form should take prop called submitAction which is passed to the
handleSubmit function returned by useForm, as in the examples
RestaurantForm.js and UCSBDatesForm.js
[x] The form should take a prop called buttonLabel with a default value
of Create. The value of this prop is used as the label for the button
as shown in RestaurantForm.js and UCSBDatesForm.js.
[x] Under frontend/src/test/components/Articles/ create a file called ArticlesForm.test.js modelled after the files RestaurantForm.test.js and UCSBDatesForm.test.js.
[x] Under frontend/src/stories/components/Articles/ create a file called ArticlesForm.stories.js modelled after the files RestaurantForm.stories.js and UCSBDatesForm.stories.js.
Notes
For this issue, it is not necessary that the form be linked to a
page that connects it to the backend; that will be done in a later issue.
This issue illustrates how it is possible to create at least part of the frontend
for a feature even if/when the backend is not yet complete.
It also illustrates how we can create a component that can be reused, in this
case for both creating and editing a database record.
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/components/Articles/ArticlesForm.js
What to do next
Do a PR, following all of the usual steps (title, description, Closes #n text,
dragging issue to "In Review", requesting reviewers).
Check to see if any fellow team members PRs need to be reviewed.
Then, assign yourself the issue "Table Component for Articles plus tests"
following all the usual steps (assign to self, drag to "In Progress", start new branch.)
Dependencies
Complete the following issues first:
Acceptance Criteria:
[x] A form called
ArticlesFormis visible in the storybook accessible on the Github Pages link.[x] The form has all the fields that are in the database table the form fields are labelled with user-friendly names corresponding to the database table column names.
[x] The form has suitable validations for all fields, indicating which fields are required to be non-blank, and any validation that should be performed (e.g. on dates, time values, numeric values with restricted ranges etc.). You can use regular expressions for this, or any of the other validations features of
react-query-form, using theregisterfeature, documented here: https://www.react-hook-form.com/api/useform/register/. Consult both theRestaurantForm.jsandUCSBDatesForm.jsfiles for examples.[x] If there are date/time fields, use a date/time picker similar to the one in the
UCSBDatesFormcomponent. (If this is not applicable to your table, then you can skip this step.)[x] The
ArticlesForm.stories.jsfile should have at least one story for a create scenario, and another for an update scenario.[x] The PR description where the code addressing this issue is submitted contains a screenshot of the new form (since this is a frontend change).
[x] The PR description where the code addressing this issue is submitted contains a link to the published storybook for the PR.
Implementation Details:
[x] Under
frontend/src/main/components/Articles/there is a file calledArticlesFormmodelled after the filesRestaurantForm.jsand/orUCSBDatesForm.js[x] Change the form fields so that they correspond to the form fields of your database record. If there are are labelled with user-friendly names corresponding to the database table column names.
[x] Add suitable validations for all of your fields indicating which fields are required to be non-blank, and any validation that should be performed (e.g. on dates, time values, numeric values with restricted ranges etc.). You can use regular expressions for this, or any of the other validations features of
react-query-form, using theregisterfeature, documented here: https://www.react-hook-form.com/api/useform/register/. Consult both theRestaurantandUCSBDatesexamples for guidance.[x] The form should take a prop called
initialContentswhich is either undefined, or an object that has the same fields as the database table. When passed, it indicates that the form is being used to edit an existing object. Theidfield should be displayed as a read-only field, and the other fields are pre-populated with the values from the object.[x] When the
initialContentsis undefined, it indicates that the form is being used to create a new object. Therefore, if the id field is autogenerated, it should not be displayed on the form, and other form values should be either empty, or populated with default or example values (as appropriate).[x] The form should take prop called
submitActionwhich is passed to thehandleSubmitfunction returned byuseForm, as in the examplesRestaurantForm.jsandUCSBDatesForm.js[x] The form should take a prop called
buttonLabelwith a default value ofCreate. The value of this prop is used as the label for the button as shown inRestaurantForm.jsandUCSBDatesForm.js.[x] Under
frontend/src/test/components/Articles/create a file calledArticlesForm.test.jsmodelled after the filesRestaurantForm.test.jsandUCSBDatesForm.test.js.[x] Under
frontend/src/stories/components/Articles/create a file calledArticlesForm.stories.jsmodelled after the filesRestaurantForm.stories.jsandUCSBDatesForm.stories.js.Notes
For this issue, it is not necessary that the form be linked to a page that connects it to the backend; that will be done in a later issue.
This issue illustrates how it is possible to create at least part of the frontend for a feature even if/when the backend is not yet complete.
It also illustrates how we can create a component that can be reused, in this case for both creating and editing a database record.
Reminders (all from
frontenddirectory):npm run storybook.npm test.npm run coveragenpx eslint --fix .npx stryker runnpx stryker run -m src/main/components/Articles/ArticlesForm.jsWhat to do next
Do a PR, following all of the usual steps (title, description,
Closes #ntext, dragging issue to "In Review", requesting reviewers).Check to see if any fellow team members PRs need to be reviewed.
Then, assign yourself the issue "Table Component for
Articlesplus tests" following all the usual steps (assign to self, drag to "In Progress", start new branch.)