diff --git a/app/routes/admin+/_users+/users.edit.$userId.tsx b/app/routes/admin+/_users+/users.edit.$userId.tsx
index 318763b..d98b5a1 100644
--- a/app/routes/admin+/_users+/users.edit.$userId.tsx
+++ b/app/routes/admin+/_users+/users.edit.$userId.tsx
@@ -9,7 +9,13 @@ import {
DialogFooter,
} from '~/components/ui/dialog.tsx'
import { Icon } from '~/components/ui/icon.tsx'
-import { CheckboxField, Field, TextareaField } from '~/components/forms.tsx'
+import {
+ CheckboxField,
+ ErrorList,
+ Field,
+ HeightField,
+ TextareaField,
+} from '~/components/forms.tsx'
import {
Form,
useLoaderData,
@@ -22,7 +28,7 @@ import { json, type DataFunctionArgs } from '@remix-run/node'
import { requireAdmin } from '~/utils/permissions.server.ts'
import { prisma } from '~/utils/db.server.ts'
import invariant from 'tiny-invariant'
-import { conform, useForm } from '@conform-to/react'
+import { conform, useFieldset, useForm } from '@conform-to/react'
import { parse } from '@conform-to/zod'
import { redirectWithToast } from '~/utils/flash-session.server.ts'
import { StatusButton } from '~/components/ui/status-button.tsx'
@@ -31,12 +37,15 @@ import { z } from 'zod'
import {
emailSchema,
+ heightSchema,
nameSchema,
phoneSchema,
usernameSchema,
+ yearsOfExperienceSchema,
} from '~/utils/user-validation.ts'
import { checkboxSchema, optionalDateSchema } from '~/utils/zod-extensions.ts'
import { format } from 'date-fns'
+import { convertInchesToHeightObj } from '~/utils/length-conversions.ts'
const editUserSchema = z.object({
name: nameSchema.optional(),
@@ -45,8 +54,8 @@ const editUserSchema = z.object({
mailingList: checkboxSchema(),
phone: phoneSchema,
birthdate: optionalDateSchema,
- height: z.coerce.number().min(0).optional(),
- yearsOfExperience: z.coerce.number().min(0).optional(),
+ height: heightSchema,
+ yearsOfExperience: yearsOfExperienceSchema,
isInstructor: checkboxSchema(),
isLessonAssistant: checkboxSchema(),
isHorseLeader: checkboxSchema(),
@@ -176,6 +185,11 @@ export default function EditUser() {
formattedBirthdate = format(new Date(data.user.birthdate), 'yyyy-MM-dd')
}
+ let userHeight
+ if (data.user.height) {
+ userHeight = convertInchesToHeightObj(data.user.height)
+ }
+
const [form, fields] = useForm({
id: 'edit-user',
lastSubmission: actionData?.submission,
@@ -189,13 +203,14 @@ export default function EditUser() {
mailingList: data.user?.mailingList ?? false,
phone: data.user?.phone,
birthdate: formattedBirthdate ?? '',
- height: data.user?.height ?? '',
+ height: userHeight ?? undefined,
yearsOfExperience: data.user?.yearsOfExperience ?? '',
notes: data.user?.notes ?? '',
},
shouldRevalidate: 'onSubmit',
onSubmit: dismissModal,
})
+ const { heightFeet, heightInches } = useFieldset(form.ref, fields.height)
let isLessonAssistant = false
let isHorseLeader = false
@@ -271,18 +286,64 @@ export default function EditUser() {
}}
errors={fields.birthdate.errors}
/>
-