add parts data

web/src/components/PartForm/PartForm.js

@@ -0,0 +1,100 @@
+import {
+  Form,
+  FormError,
+  FieldError,
+  Label,
+  TextField,
+  TextAreaField,
+  Submit,
+} from '@redwoodjs/forms'
+
+const PartForm = (props) => {
+  const onSubmit = (data) => {
+    props.onSave(data, props?.part?.id)
+  }
+
+  return (
+    <div className="rw-form-wrapper">
+      <Form onSubmit={onSubmit} error={props.error}>
+        <FormError
+          error={props.error}
+          wrapperClassName="rw-form-error-wrapper"
+          titleClassName="rw-form-error-title"
+          listClassName="rw-form-error-list"
+        />
+
+        <Label
+          name="title"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Title
+        </Label>
+        <TextField
+          name="title"
+          defaultValue={props.part?.title}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+        <FieldError name="title" className="rw-field-error" />
+
+        <Label
+          name="description"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Description
+        </Label>
+        <TextField
+          name="description"
+          defaultValue={props.part?.description}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+        <FieldError name="description" className="rw-field-error" />
+
+        <Label
+          name="code"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Code
+        </Label>
+        <TextAreaField
+          name="code"
+          defaultValue={props.part?.code}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: false }}
+        />
+        <FieldError name="code" className="rw-field-error" />
+
+        <Label
+          name="mainImage"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Main image
+        </Label>
+        <TextField
+          name="mainImage"
+          defaultValue={props.part?.mainImage}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: false }}
+        />
+        <FieldError name="mainImage" className="rw-field-error" />
+
+        <div className="rw-button-group">
+          <Submit disabled={props.loading} className="rw-button rw-button-blue">
+            Save
+          </Submit>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+export default PartForm