use FormField components for GeneralDetails section

ohcnetwork · Jan 2, 2023 · a4c7b7b · a4c7b7b
1 parent ac5b874
commit a4c7b7b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 25 deletions.
diff --git a/src/Components/Common/components/Switch.tsx b/src/Components/Common/components/Switch.tsx
@@ -1,3 +1,4 @@
+import { FieldLabel } from "../../Form/FormFields/FormField";
 import { ErrorHelperText } from "../HelperInputFields";
 
 type SwitchProps<T> = {
@@ -16,12 +17,13 @@ type SwitchProps<T> = {
 export default function SwitchV2<T>(props: SwitchProps<T>) {
   return (
     <div className={props.className}>
-      {props.label && (
-        <label htmlFor="is_working" className="mb-3">
-          {props.label}
-          {props.required && " *"}
-        </label>
-      )}
+      <FieldLabel
+        htmlFor={props.name}
+        required={props.required}
+        className="mb-3"
+      >
+        {props.label}
+      </FieldLabel>
       <ul role="list" className="flex">
         {props.options.map((option, index) => {
           const selected = option === props.value;

diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
@@ -31,6 +31,8 @@ import { Cancel, Submit } from "../Common/components/ButtonV2";
 import DateInputV2 from "../Common/DateInputV2";
 import AutocompleteFormField from "../Form/FormFields/Autocomplete";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
+import TextFormField from "../Form/FormFields/TextFormField";
+import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 const Loading = loadable(() => import("../Common/Loading"));
 
 const formErrorKeys = [
@@ -511,13 +513,13 @@ const AssetCreate = (props: AssetProps) => {
 
                   {/* Asset Name */}
                   <div className="col-span-6" ref={fieldRef["name"]}>
-                    <TextInputFieldV2
-                      id="asset-name"
+                    <TextFormField
+                      name="name"
                       label="Asset Name"
+                      required
                       value={name}
-                      onValueChange={setName}
+                      onChange={({ value }) => setName(value)}
                       error={state.errors.name}
-                      required
                     />
                   </div>
 
@@ -590,23 +592,14 @@ const AssetCreate = (props: AssetProps) => {
 
                   {/* Description */}
                   <div className="col-span-6">
-                    <label htmlFor="asset-description">
-                      Describe the asset
-                    </label>
-                    <textarea
-                      id="asset-description"
-                      className={
-                        "mt-2 block w-full input" +
-                        ((state.errors.description && " border-red-500") || "")
-                      }
-                      name="asset-description"
-                      placeholder="Eg. Details about the equipment"
+                    <TextAreaFormField
+                      name="asset_description"
+                      label="Description"
+                      placeholder="Details about the equipment"
                       value={description}
-                      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                        setDescription(e.target.value)
-                      }
+                      onChange={({ value }) => setDescription(value)}
+                      error={state.errors.description}
                     />
-                    <ErrorHelperText error={state.errors.description} />
                   </div>
 
                   {/* Divider */}