From cad4b78f4767b8ad358fa08fb71dca1190116dcf Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Tue, 5 Sep 2023 19:45:32 -0500
Subject: [PATCH] add input fields for age range

---
 src/components/admin/resources/form.tsx     | 28 +++++++++++++++++++++
 src/components/forms/inputLabel.tsx         | 16 ++++++++++++
 src/components/forms/selectors.tsx          | 11 +++-----
 src/components/forms/textInput.tsx          | 10 +++++---
 src/server/api/routers/auditoryResources.ts |  9 ++++++-
 5 files changed, 61 insertions(+), 13 deletions(-)
 create mode 100644 src/components/forms/inputLabel.tsx

diff --git a/src/components/admin/resources/form.tsx b/src/components/admin/resources/form.tsx
index cc24ff9..9043c17 100644
--- a/src/components/admin/resources/form.tsx
+++ b/src/components/admin/resources/form.tsx
@@ -41,6 +41,7 @@ import Modal from "react-modal";
 import { type RouterInputs } from "~/utils/api";
 import { PlatformLinkButton } from "~/pages/resources/[id]";
 import { ResourcePhoto } from "~/components/ResourcePhoto";
+import { FieldLabel } from "~/components/forms/inputLabel";
 
 // Required for accessibility
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
@@ -379,6 +380,33 @@ function ResourceSummarySubForm({
           </span>
         </div>
       </div>
+
+      <div>
+        <FieldLabel
+          heading="Age Range"
+          subheading="Specify the minimum and maximum age range supported by the resource"
+        />
+        <div className="mt-2 flex flex-row space-x-4">
+          <GenericInput
+            type="number"
+            placeholder="minimum age"
+            details={register("ages.min", {
+              required: "Field required",
+              valueAsNumber: true,
+            })}
+          />
+          <span className="text-xl">-</span>
+          <GenericInput
+            type="number"
+            placeholder="maximum age"
+            details={register("ages.max", {
+              required: "Field required",
+              valueAsNumber: true,
+            })}
+          />
+        </div>
+      </div>
+
       <MultiSelectorMany
         details={register("payment_options", { required: "Field required" })}
         label="Price Category"
diff --git a/src/components/forms/inputLabel.tsx b/src/components/forms/inputLabel.tsx
new file mode 100644
index 0000000..17443c5
--- /dev/null
+++ b/src/components/forms/inputLabel.tsx
@@ -0,0 +1,16 @@
+export const FieldLabel = ({
+  heading,
+  subheading,
+}: {
+  heading: string;
+  subheading: string;
+}) => {
+  return (
+    <div>
+      <label className="text-md block font-semibold">{heading}</label>
+      <span className="block text-sm italic text-neutral-400">
+        {subheading}
+      </span>
+    </div>
+  );
+};
diff --git a/src/components/forms/selectors.tsx b/src/components/forms/selectors.tsx
index 59a3082..ff8a34d 100644
--- a/src/components/forms/selectors.tsx
+++ b/src/components/forms/selectors.tsx
@@ -4,6 +4,7 @@ import {
   useFormContext,
   type UseFormRegisterReturn,
 } from "react-hook-form";
+import { FieldLabel } from "./inputLabel";
 
 // generics
 interface ToStringable {
@@ -60,10 +61,7 @@ function MultiSelectorMany<T extends ToStringable>({
     <SelectorContext.Provider value={{ type: "many", updateCallback }}>
       <SelectedManyContext.Provider value={selected}>
         <div className="flex flex-col">
-          <label className="text-md block font-semibold">{label}</label>
-          <span className="block text-sm italic text-neutral-400">
-            Select all that apply
-          </span>
+          <FieldLabel heading={label} subheading="Select all that apply" />
           <input {...details} readOnly type="text" className="hidden" />
           <div className="mt-2 space-x-2 space-y-2 overflow-x-auto">
             {children}
@@ -100,10 +98,7 @@ function MultiSelector<T extends ToStringable>({
     >
       <SelectedUniqueContext.Provider value={selected}>
         <div className="flex flex-col">
-          <label className="text-md block font-semibold">{label}</label>
-          <span className="block text-sm italic text-neutral-400">
-            Select one from below
-          </span>
+          <FieldLabel heading={label} subheading="Select one from below" />
           <input {...details} readOnly type="text" className="hidden" />
           <div className="space-x-2 space-y-2 overflow-x-auto">{children}</div>
         </div>
diff --git a/src/components/forms/textInput.tsx b/src/components/forms/textInput.tsx
index 4c3384e..f479d36 100644
--- a/src/components/forms/textInput.tsx
+++ b/src/components/forms/textInput.tsx
@@ -50,16 +50,18 @@ function GenericInput<TFieldName extends InternalFieldName>({
   type = "text",
   details,
 }: {
-  label: string;
+  label?: string;
   placeholder?: string;
   type: HTMLInputTypeAttribute;
   details: UseFormRegisterReturn<TFieldName>;
 }) {
   return (
     <section className="w-full space-y-1">
-      <label className="text-md block px-1 font-semibold text-neutral-600">
-        {label}
-      </label>
+      {label ? (
+        <label className="text-md block px-1 font-semibold text-neutral-600">
+          {label}
+        </label>
+      ) : undefined}
       <input
         className="block h-8 w-full rounded-lg border border-neutral-600 px-2 py-1"
         {...details}
diff --git a/src/server/api/routers/auditoryResources.ts b/src/server/api/routers/auditoryResources.ts
index e631fa6..cfeb071 100644
--- a/src/server/api/routers/auditoryResources.ts
+++ b/src/server/api/routers/auditoryResources.ts
@@ -25,7 +25,14 @@ const AuditoryResourceSchema = z.object({
     required: z.boolean().default(false),
     notice: z.string().nullable().transform(emptyStringToUndefined),
   }),
-  ages: z.object({ min: z.number().int(), max: z.number().int() }),
+  ages: z.object({ min: z.number().int(), max: z.number().int() }).refine(
+    (ages) => {
+      return ages.min < ages.max;
+    },
+    {
+      message: "Minimum supported age must be less than maximum supported age.",
+    }
+  ),
   skills: z.array(z.nativeEnum(Skill)),
   skill_levels: z.array(z.nativeEnum(SkillLevel)),
   payment_options: z.array(z.nativeEnum(PaymentType)),