From 1184a44c572958bd8906e9d3365053c1e8c20190 Mon Sep 17 00:00:00 2001
From: sianida26 <chesakeselekkebo@gmail.com>
Date: Fri, 17 May 2024 17:58:40 +0700
Subject: [PATCH] Added fieldset create input element

---
 .../src/utils/createInputComponents.tsx       | 62 +++++++++++++------
 1 file changed, 42 insertions(+), 20 deletions(-)

diff --git a/apps/frontend/src/utils/createInputComponents.tsx b/apps/frontend/src/utils/createInputComponents.tsx
index 54e7db8..4e09b6e 100644
--- a/apps/frontend/src/utils/createInputComponents.tsx
+++ b/apps/frontend/src/utils/createInputComponents.tsx
@@ -1,4 +1,6 @@
 import {
+	Fieldset,
+	FieldsetProps,
 	MultiSelect,
 	MultiSelectProps,
 	NumberInput,
@@ -36,55 +38,58 @@ type SelectType = {
 	type: "select";
 } & SelectProps;
 
+type Group = {
+	type: "group";
+	inputs: AcceptedInput[];
+} & FieldsetProps;
+
+type AcceptedInput = (
+	| TextInputType
+	| MultiSelectInputType
+	| PasswordInputType
+	| NumberInputType
+	| SelectType
+	| Group
+) &
+	GeneralInputProps;
+
 interface Options {
 	disableAll?: boolean;
 	readonlyAll?: boolean;
-	inputs: ((
-		| TextInputType
-		| MultiSelectInputType
-		| PasswordInputType
-		| NumberInputType
-		| SelectType
-	) &
-		GeneralInputProps)[];
+	inputs: AcceptedInput[];
 }
 
 function createInputComponents(options: Options) {
 	const components = [] as ReactNode[];
 
-	for (const input of options.inputs) {
-		if (input.hidden) continue;
-
+	const createComponent = (input: AcceptedInput) => {
 		switch (input.type) {
 			case "text":
-				components.push(
+				return (
 					<TextInput
 						{...input}
 						readOnly={options.readonlyAll || input.readOnly}
 						disabled={options.disableAll || input.disabled}
 					/>
 				);
-				break;
 			case "multi-select":
-				components.push(
+				return (
 					<MultiSelect
 						{...input}
 						readOnly={options.readonlyAll || input.readOnly}
 						disabled={options.disableAll || input.disabled}
 					/>
 				);
-				break;
 			case "password":
-				components.push(
+				return (
 					<PasswordInput
 						{...input}
 						readOnly={options.readonlyAll || input.readOnly}
 						disabled={options.disableAll || input.disabled}
 					/>
 				);
-				break;
 			case "number":
-				components.push(
+				return (
 					<NumberInput
 						{...input}
 						type="text"
@@ -92,16 +97,33 @@ function createInputComponents(options: Options) {
 						disabled={options.disableAll || input.disabled}
 					/>
 				);
-				break;
 			case "select":
-				components.push(
+				return (
 					<Select
 						{...input}
 						readOnly={options.readonlyAll || input.readOnly}
 						disabled={options.disableAll || input.disabled}
 					/>
 				);
+
+			case "group": {
+				const localComponents: ReactNode[] = [];
+
+				for (const child of input.inputs) {
+					if (child.hidden) continue;
+
+					localComponents.push(createComponent(child));
+				}
+
+				return <Fieldset {...input}>{localComponents}</Fieldset>;
+			}
 		}
+	};
+
+	for (const input of options.inputs) {
+		if (input.hidden) continue;
+
+		components.push(createComponent(input));
 	}
 
 	return <>{components}</>;