Skip to content

Commit 3645c6f

Browse files
mmtandocmmtandoc
committed
Reorganized SettingsEntry
1 parent 546ed19 commit 3645c6f

File tree

9 files changed

+164
-115
lines changed

9 files changed

+164
-115
lines changed

‎components/settings/SettingsEntry/SettingsEntry.tsx

Lines changed: 3 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
1-
import { ChangeEvent, ComponentPropsWithRef } from "react"
2-
import {
3-
ControllerProps,
4-
FieldPathByValue,
5-
FieldValues,
6-
UseFormReturn,
7-
} from "react-hook-form"
1+
import { UseFormReturn } from "react-hook-form"
82

9-
import { Fieldset, Input, TextArea } from "components/ui/forms"
103
import { NullPartialSettingsFields } from "lib/fields"
114

12-
import FieldPresetFieldArray from "./FieldPresetFieldArray"
5+
import MfrPresetFieldset from "./field-presets/MfrPresetFieldset/MfrPresetFieldset"
136

147
type SettingsEntryProps = {
158
formMethods: UseFormReturn<NullPartialSettingsFields>
@@ -20,113 +13,9 @@ const SettingsEntry = (props: SettingsEntryProps) => {
2013

2114
return (
2215
<>
23-
<Fieldset legend="MFR field presets">
24-
<FieldPresetFieldArray
25-
label="Required Equipment"
26-
name="mfrFieldPresets.requiredEquipment"
27-
emptyPresetField={{ label: null, value: null }}
28-
formMethods={formMethods}
29-
valueInput={PresetValueInput}
30-
/>
31-
<FieldPresetFieldArray
32-
label="Compounding Method"
33-
name="mfrFieldPresets.compoundingMethod"
34-
emptyPresetField={{ label: null, value: null }}
35-
formMethods={formMethods}
36-
valueInput={PresetValueTextArea}
37-
/>
38-
<FieldPresetFieldArray
39-
label="Labelling"
40-
name="mfrFieldPresets.labelling"
41-
emptyPresetField={{ label: null, value: null }}
42-
formMethods={formMethods}
43-
valueInput={PresetValueInput}
44-
/>
45-
<FieldPresetFieldArray
46-
label="Quality Controls"
47-
name="mfrFieldPresets.qualityControls"
48-
emptyPresetField={{
49-
label: null,
50-
value: [{ name: null, expectedSpecification: null }],
51-
}}
52-
allowMultiple
53-
formMethods={formMethods}
54-
valueInput={PresetValueQcInput as any} //TODO: Fix typing
55-
/>
56-
<FieldPresetFieldArray
57-
label="References"
58-
name="mfrFieldPresets.references"
59-
emptyPresetField={{ label: null, value: null }}
60-
formMethods={formMethods}
61-
valueInput={PresetValueInput}
62-
/>
63-
</Fieldset>
16+
<MfrPresetFieldset formMethods={formMethods} />
6417
</>
6518
)
6619
}
6720

68-
const PresetValueInput = <TFieldValues extends FieldValues = FieldValues>(
69-
props: ComponentPropsWithRef<ControllerProps<TFieldValues>["render"]>,
70-
) => (
71-
<Input
72-
{...props.field}
73-
value={(props.field.value as string | null) ?? ""}
74-
fullWidth
75-
/>
76-
)
77-
78-
const PresetValueTextArea = <TFieldValues extends FieldValues = FieldValues>(
79-
props: ComponentPropsWithRef<ControllerProps<TFieldValues>["render"]>,
80-
) => (
81-
<TextArea
82-
{...props.field}
83-
value={(props.field.value as string | null) ?? ""}
84-
autoResize
85-
fullWidth
86-
/>
87-
)
88-
89-
const PresetValueQcInput = <TFieldValues extends FieldValues = FieldValues>(
90-
props: ComponentPropsWithRef<
91-
ControllerProps<
92-
TFieldValues,
93-
FieldPathByValue<
94-
TFieldValues,
95-
NullPartialSettingsFields["mfrFieldPresets"]["qualityControls"]
96-
>
97-
>["render"]
98-
>,
99-
) => {
100-
const { field } = props
101-
102-
return (
103-
<div className="row">
104-
<Input
105-
name={`${field.name}.name`}
106-
onChange={(e: ChangeEvent<HTMLInputElement>) =>
107-
field.onChange({
108-
name: e.target.value,
109-
expectedSpecification: field.value.expectedSpecification,
110-
})
111-
}
112-
value={(field?.value?.name as string | null) ?? ""}
113-
placeholder="Quality control"
114-
fullWidth
115-
/>
116-
<Input
117-
name={`${field.name}.expectedSpecification`}
118-
onChange={(e: ChangeEvent<HTMLInputElement>) =>
119-
field.onChange({
120-
name: field.value.name,
121-
expectedSpecification: e.target.value,
122-
})
123-
}
124-
value={(field?.value?.expectedSpecification as string | null) ?? ""}
125-
placeholder="Expected specification"
126-
fullWidth
127-
/>
128-
</div>
129-
)
130-
}
131-
13221
export default SettingsEntry

‎components/settings/SettingsEntry/FieldMultiPresetInput.tsx renamed to ‎components/settings/SettingsEntry/field-presets/FieldMultiPresetInput.tsx

File renamed without changes.

‎components/settings/SettingsEntry/FieldPresetFieldArray.tsx renamed to ‎components/settings/SettingsEntry/field-presets/FieldPresetFieldArray.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { Button } from "components/ui"
1212
import { Fieldset, FormGroup } from "components/ui/forms"
1313
import { NullPartialFieldPresetFields } from "lib/fields"
1414

15-
import FieldArrayActions from "./FieldArrayActions"
15+
import FieldArrayActions from "../FieldArrayActions"
1616
import FieldMultiPresetInput from "./FieldMultiPresetInput"
1717
import FieldPresetInput from "./FieldPresetInput"
1818

‎components/settings/SettingsEntry/FieldPresetInput.tsx renamed to ‎components/settings/SettingsEntry/field-presets/FieldPresetInput.tsx

File renamed without changes.

‎components/settings/SettingsEntry/field-presets/MfrPresetFieldset/MfrPresetFieldset.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { UseFormReturn } from "react-hook-form"
2+
3+
import { Fieldset } from "components/ui/forms"
4+
import { NullPartialSettingsFields } from "lib/fields"
5+
6+
import FieldPresetFieldArray from "../FieldPresetFieldArray"
7+
import PresetValueInput from "../PresetValueInput"
8+
import PresetValueTextArea from "../PresetValueTextArea"
9+
import PresetValueQcInput from "./PresetValueQcInput"
10+
11+
type MfrPresetFieldsetProps = {
12+
formMethods: UseFormReturn<NullPartialSettingsFields>
13+
}
14+
15+
const MfrPresetFieldset = (props: MfrPresetFieldsetProps) => (
16+
<Fieldset legend="MFR field presets">
17+
<FieldPresetFieldArray
18+
label="Required Equipment"
19+
name="mfrFieldPresets.requiredEquipment"
20+
emptyPresetField={{
21+
label: null,
22+
value: null,
23+
}}
24+
formMethods={props.formMethods}
25+
valueInput={PresetValueInput}
26+
/>
27+
<FieldPresetFieldArray
28+
label="Compounding Method"
29+
name="mfrFieldPresets.compoundingMethod"
30+
emptyPresetField={{
31+
label: null,
32+
value: null,
33+
}}
34+
formMethods={props.formMethods}
35+
valueInput={PresetValueTextArea}
36+
/>
37+
<FieldPresetFieldArray
38+
label="Labelling"
39+
name="mfrFieldPresets.labelling"
40+
emptyPresetField={{
41+
label: null,
42+
value: null,
43+
}}
44+
formMethods={props.formMethods}
45+
valueInput={PresetValueInput}
46+
/>
47+
<FieldPresetFieldArray
48+
label="Quality Controls"
49+
name="mfrFieldPresets.qualityControls"
50+
emptyPresetField={{
51+
label: null,
52+
value: [
53+
{
54+
name: null,
55+
expectedSpecification: null,
56+
},
57+
],
58+
}}
59+
allowMultiple
60+
formMethods={props.formMethods}
61+
valueInput={PresetValueQcInput as any} //TODO: Fix typing
62+
/>
63+
<FieldPresetFieldArray
64+
label="References"
65+
name="mfrFieldPresets.references"
66+
emptyPresetField={{
67+
label: null,
68+
value: null,
69+
}}
70+
formMethods={props.formMethods}
71+
valueInput={PresetValueInput}
72+
/>
73+
</Fieldset>
74+
)
75+
76+
export default MfrPresetFieldset

‎components/settings/SettingsEntry/field-presets/MfrPresetFieldset/PresetValueQcInput.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { ChangeEvent, ComponentPropsWithRef } from "react"
2+
import { ControllerProps, FieldPathByValue, FieldValues } from "react-hook-form"
3+
4+
import { Input } from "components/ui/forms"
5+
import { NullPartialSettingsFields } from "lib/fields"
6+
7+
const PresetValueQcInput = <TFieldValues extends FieldValues = FieldValues>(
8+
props: ComponentPropsWithRef<
9+
ControllerProps<
10+
TFieldValues,
11+
FieldPathByValue<
12+
TFieldValues,
13+
NullPartialSettingsFields["mfrFieldPresets"]["qualityControls"]
14+
>
15+
>["render"]
16+
>,
17+
) => {
18+
const { field } = props
19+
20+
return (
21+
<div className="row">
22+
<Input
23+
name={`${field.name}.name`}
24+
onChange={(e: ChangeEvent<HTMLInputElement>) =>
25+
field.onChange({
26+
name: e.target.value,
27+
expectedSpecification: field.value.expectedSpecification,
28+
})
29+
}
30+
value={(field?.value?.name as string | null) ?? ""}
31+
placeholder="Quality control"
32+
fullWidth
33+
/>
34+
<Input
35+
name={`${field.name}.expectedSpecification`}
36+
onChange={(e: ChangeEvent<HTMLInputElement>) =>
37+
field.onChange({
38+
name: field.value.name,
39+
expectedSpecification: e.target.value,
40+
})
41+
}
42+
value={(field?.value?.expectedSpecification as string | null) ?? ""}
43+
placeholder="Expected specification"
44+
fullWidth
45+
/>
46+
</div>
47+
)
48+
}
49+
50+
export default PresetValueQcInput

‎components/settings/SettingsEntry/field-presets/MfrPresetFieldset/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./PresetValueQcInput"

‎components/settings/SettingsEntry/field-presets/PresetValueInput.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ComponentPropsWithRef } from "react"
2+
import { ControllerProps, FieldValues } from "react-hook-form"
3+
4+
import { Input } from "components/ui/forms"
5+
6+
const PresetValueInput = <TFieldValues extends FieldValues = FieldValues>(
7+
props: ComponentPropsWithRef<ControllerProps<TFieldValues>["render"]>,
8+
) => (
9+
<Input
10+
{...props.field}
11+
value={(props.field.value as string | null) ?? ""}
12+
fullWidth
13+
/>
14+
)
15+
16+
export default PresetValueInput

‎components/settings/SettingsEntry/field-presets/PresetValueTextArea.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { ComponentPropsWithRef } from "react"
2+
import { ControllerProps, FieldValues } from "react-hook-form"
3+
4+
import { TextArea } from "components/ui/forms"
5+
6+
const PresetValueTextArea = <TFieldValues extends FieldValues = FieldValues>(
7+
props: ComponentPropsWithRef<ControllerProps<TFieldValues>["render"]>,
8+
) => (
9+
<TextArea
10+
{...props.field}
11+
value={(props.field.value as string | null) ?? ""}
12+
autoResize
13+
fullWidth
14+
/>
15+
)
16+
17+
export default PresetValueTextArea

0 commit comments

Comments
 (0)