style: update styling of new user form

usdigitalresponse · Dec 12, 2023 · 1459b43 · 1459b43
1 parent 88fce52
commit 1459b43
Showing 1 changed file with 129 additions and 76 deletions.
diff --git a/web/src/components/User/UserForm/UserForm.tsx b/web/src/components/User/UserForm/UserForm.tsx
@@ -1,3 +1,7 @@
+import { Button } from 'react-bootstrap'
+import { useForm, UseFormReturn } from 'react-hook-form'
+import type { EditUserById, UpdateUserInput } from 'types/graphql'
+
 import {
   Form,
   FormError,
@@ -7,8 +11,6 @@ import {
   NumberField,
   Submit,
 } from '@redwoodjs/forms'
-
-import type { EditUserById, UpdateUserInput } from 'types/graphql'
 import type { RWGqlError } from '@redwoodjs/forms'
 
 type FormUser = NonNullable<EditUserById['user']>
@@ -21,116 +23,167 @@ interface UserFormProps {
 }
 
 const UserForm = (props: UserFormProps) => {
+  const { user, onSave, error, loading } = props
+  const formMethods: UseFormReturn<FormUser> = useForm<FormUser>()
+  const hasErrors = Object.keys(formMethods.formState.errors).length > 0
+
+  // Resets the form to the previous values when editing the existing user
+  // Clears out the form when creating a new user
+  const onReset = () => {
+    formMethods.reset()
+  }
   const onSubmit = (data: FormUser) => {
-    props.onSave(data, props?.user?.id)
+    onSave(data, props?.user?.id)
   }
 
   return (
-    <div className="rw-form-wrapper">
-      <Form<FormUser> onSubmit={onSubmit} error={props.error}>
-        <FormError
-          error={props.error}
-          wrapperClassName="rw-form-error-wrapper"
-          titleClassName="rw-form-error-title"
-          listClassName="rw-form-error-list"
-        />
+    <Form<FormUser>
+      onSubmit={onSubmit}
+      formMethods={formMethods}
+      error={error}
+      className={hasErrors ? 'was-validated' : ''}
+    >
+      {user && (
+        <div className="row">
+          <Label name="id" className="form-label col-sm-2 col-form-label">
+            Agency Code
+          </Label>
+          <div className="col-sm-2">
+            <TextField
+              name="id"
+              defaultValue={user?.id}
+              className="form-control mb-3 col-auto"
+              disabled
+            />
+          </div>
+        </div>
+      )}
 
-        <Label
-          name="email"
-          className="rw-label"
-          errorClassName="rw-label rw-label-error"
-        >
+      <FormError
+        error={error}
+        wrapperClassName="rw-form-error-wrapper"
+        titleClassName="rw-form-error-title"
+        listClassName="rw-form-error-list"
+      />
+
+      <div className="row mb-3">
+        <Label name="email" className="form-label col-sm-2 col-form-label">
           Email
         </Label>
 
-        <TextField
+        <div className="col-sm-6">
+          <TextField
+            name="email"
+            defaultValue={props.user?.email}
+            className="form-control"
+            errorClassName="form-control is-invalid"
+            validation={{ required: 'This field is required' }}
+          />
+        </div>
+
+        <FieldError
           name="email"
-          defaultValue={props.user?.email}
-          className="rw-input"
-          errorClassName="rw-input rw-input-error"
-          validation={{ required: true }}
+          className="error-message offset-2 invalid-feedback"
         />
+      </div>
 
-        <FieldError name="email" className="rw-field-error" />
-
-        <Label
-          name="name"
-          className="rw-label"
-          errorClassName="rw-label rw-label-error"
-        >
+      <div className="row mb-3">
+        <Label name="name" className="form-label col-sm-2 col-form-label">
           Name
         </Label>
 
-        <TextField
+        <div className="col-sm-6">
+          <TextField
+            name="name"
+            defaultValue={props.user?.name}
+            className="form-control"
+            errorClassName="form-control is-invalid"
+          />
+        </div>
+
+        <FieldError
           name="name"
-          defaultValue={props.user?.name}
-          className="rw-input"
-          errorClassName="rw-input rw-input-error"
+          className="error-message offset-2 invalid-feedback"
         />
+      </div>
+
+      <div className="row mb-3">
+        <Label name="role" className="form-label col-sm-2 col-form-label">
+          Role
+        </Label>
 
-        <FieldError name="name" className="rw-field-error" />
+        <div className="col-sm-6">
+          <NumberField
+            name="roleId"
+            defaultValue={props.user?.roleId}
+            className="form-control"
+            errorClassName="form-control is-invalid"
+            emptyAs={'undefined'}
+          />
+        </div>
 
-        <Label
-          name="agencyId"
-          className="rw-label"
-          errorClassName="rw-label rw-label-error"
-        >
+        <FieldError
+          name="role"
+          className="error-message offset-2 invalid-feedback"
+        />
+      </div>
+
+      <div className="row mb-3">
+        <Label name="agencyId" className="form-label col-sm-2 col-form-label">
           Agency id
         </Label>
 
-        <NumberField
+        <div className="col-sm-6">
+          <NumberField
+            name="agencyId"
+            defaultValue={props.user?.agencyId}
+            className="form-control"
+            errorClassName="form-control is-invalid"
+            emptyAs={'undefined'}
+          />
+        </div>
+
+        <FieldError
           name="agencyId"
-          defaultValue={props.user?.agencyId}
-          className="rw-input"
-          errorClassName="rw-input rw-input-error"
-          emptyAs={'undefined'}
+          className="error-message offset-2 invalid-feedback"
         />
+      </div>
 
-        <FieldError name="agencyId" className="rw-field-error" />
-
+      <div className="row mb-3">
         <Label
           name="organizationId"
-          className="rw-label"
-          errorClassName="rw-label rw-label-error"
+          className="form-label col-sm-2 col-form-label"
         >
           Organization id
         </Label>
 
-        <NumberField
-          name="organizationId"
-          defaultValue={props.user?.organizationId}
-          className="rw-input"
-          errorClassName="rw-input rw-input-error"
-          validation={{ required: true }}
-        />
-
-        <FieldError name="organizationId" className="rw-field-error" />
-
-        <Label
-          name="roleId"
-          className="rw-label"
-          errorClassName="rw-label rw-label-error"
-        >
-          Role id
-        </Label>
+        <div className="col-sm-6">
+          <NumberField
+            name="organizationId"
+            defaultValue={props.user?.organizationId}
+            className="form-control"
+            errorClassName="form-control is-invalid"
+            emptyAs={'undefined'}
+          />
+        </div>
 
-        <NumberField
-          name="roleId"
-          defaultValue={props.user?.roleId}
-          className="rw-input"
-          errorClassName="rw-input rw-input-error"
-          emptyAs={'undefined'}
+        <FieldError
+          name="organizationId"
+          className="error-message offset-2 invalid-feedback"
         />
+      </div>
 
-        <FieldError name="roleId" className="rw-field-error" />
-
-        <div className="rw-button-group">
-          <Submit disabled={props.loading} className="rw-button rw-button-blue">
+      <div className="row">
+        <div className="offset-2 col-sm-6">
+          <Submit disabled={loading} className="btn btn-primary me-2">
             Save
           </Submit>
+          <Button onClick={onReset} className="btn btn-secondary">
+            Reset
+          </Button>
         </div>
-      </Form>
-    </div>
+      </div>
+    </Form>
   )
 }