Merge pull request #1453 from Bhavyajain21/feat/form-asset-create

feat: group required and optional
Shelf-nu · Nov 26, 2024 · ca0fe34 · ca0fe34
2 parents bd2ae24 + b6690e0
commit ca0fe34
Showing 1 changed file with 82 additions and 36 deletions.
diff --git a/app/components/assets/custom-fields-inputs.tsx b/app/components/assets/custom-fields-inputs.tsx
@@ -1,10 +1,14 @@
 import type { ReactElement } from "react";
 import { useRef, useState } from "react";
-import type { CustomField, CustomFieldType } from "@prisma/client";
+import type {
+  CustomField as RawCustomField,
+  CustomFieldType,
+} from "@prisma/client";
 import { Link, useLoaderData, useNavigation } from "@remix-run/react";
 import type { Zorm } from "react-zorm";
 import type { z } from "zod";
 import type { ShelfAssetCustomFieldValueType } from "~/modules/asset/types";
+import type { WithDateFields } from "~/modules/types";
 import type { loader } from "~/routes/_layout+/assets.$assetId_.edit";
 import { useHints } from "~/utils/client-hints";
 import { getCustomFieldDisplayValue } from "~/utils/custom-fields";
@@ -24,6 +28,8 @@ import { SearchIcon } from "../icons/library";
 import { MarkdownEditor } from "../markdown/markdown-editor";
 import { Button } from "../shared/button";
 
+type CustomField = WithDateFields<RawCustomField, string>;
+
 export default function AssetCustomFields({
   zo,
   schema,
@@ -196,10 +202,16 @@ export default function AssetCustomFields({
       );
     },
   };
+  const requiredFields = customFields.filter(
+    (field) => field.required
+  ) as CustomField[];
+  const optionalFields = customFields.filter(
+    (field) => !field.required
+  ) as CustomField[];
 
   return (
     <div className="border-b pb-6">
-      <div className="mb-6 border-b pb-5">
+      <div className=" border-t py-5">
         <h2 className="mb-1 text-[18px] font-semibold">Custom Fields</h2>
         <Link
           to="/settings/custom-fields"
@@ -209,40 +221,74 @@ export default function AssetCustomFields({
         </Link>
       </div>
       {customFields.length > 0 ? (
-        customFields.map((field, index) => {
-          const value = customFieldsValues?.find(
-            (cfv) => cfv.customFieldId === field.id
-          )?.value;
-          const displayVal = value
-            ? (getCustomFieldDisplayValue(value) as string)
-            : "";
-          return (
-            <FormRow
-              key={field.id + index}
-              rowLabel={field.name}
-              subHeading={field.helpText ? <p>{field.helpText}</p> : undefined}
-              className="border-b-0"
-              required={field.required}
-            >
-              {typeof fieldTypeToCompMap[field.type] === "function" ? (
-                fieldTypeToCompMap[field.type]!(field as unknown as CustomField)
-              ) : (
-                <Input
-                  hideLabel
-                  placeholder={field.helpText || undefined}
-                  type={field.type.toLowerCase()}
-                  label={field.name}
-                  name={`cf-${field.id}`}
-                  error={zo.errors[`cf-${field.id}`]()?.message}
-                  disabled={disabled}
-                  defaultValue={displayVal}
-                  className="w-full"
-                  required={zodFieldIsRequired(schema.shape[`cf-${field.id}`])}
-                />
-              )}
-            </FormRow>
-          );
-        })
+        <>
+          {requiredFields.length > 0 && (
+            <div className="border-t pt-4">
+              <h5>Required Fields</h5>
+              {requiredFields.map((field, index) => (
+                <FormRow
+                  key={field.id + index}
+                  rowLabel={field.name}
+                  subHeading={
+                    field.helpText ? <p>{field.helpText}</p> : undefined
+                  }
+                  className="border-b-0"
+                  required={field.required}
+                >
+                  {fieldTypeToCompMap[field.type]?.(field) ?? (
+                    <Input
+                      hideLabel
+                      placeholder={field.helpText || undefined}
+                      type={field.type.toLowerCase()}
+                      label={field.name}
+                      name={`cf-${field.id}`}
+                      error={zo.errors[`cf-${field.id}`]()?.message}
+                      disabled={disabled}
+                      defaultValue={getCustomFieldVal(field.id)}
+                      className="w-full"
+                      required={zodFieldIsRequired(
+                        schema.shape[`cf-${field.id}`]
+                      )}
+                    />
+                  )}
+                </FormRow>
+              ))}
+            </div>
+          )}
+          {optionalFields.length > 0 && (
+            <div className="border-t pt-4">
+              <h5>Optional Fields</h5>
+              {optionalFields.map((field, index) => (
+                <FormRow
+                  key={field.id + index}
+                  rowLabel={field.name}
+                  subHeading={
+                    field.helpText ? <p>{field.helpText}</p> : undefined
+                  }
+                  className="border-b-0"
+                  required={field.required}
+                >
+                  {fieldTypeToCompMap[field.type]?.(field) ?? (
+                    <Input
+                      hideLabel
+                      placeholder={field.helpText || undefined}
+                      type={field.type.toLowerCase()}
+                      label={field.name}
+                      name={`cf-${field.id}`}
+                      error={zo.errors[`cf-${field.id}`]()?.message}
+                      disabled={disabled}
+                      defaultValue={getCustomFieldVal(field.id)}
+                      className="w-full"
+                      required={zodFieldIsRequired(
+                        schema.shape[`cf-${field.id}`]
+                      )}
+                    />
+                  )}
+                </FormRow>
+              ))}
+            </div>
+          )}
+        </>
       ) : (
         <div>
           <div className=" mx-auto max-w-screen-sm rounded-xl border border-gray-300 bg-white px-5 py-10 text-center">