From 469132919dc60a20ab2235a14f8ecbccfe4e30d2 Mon Sep 17 00:00:00 2001
From: Ujjwal Jha <ujjwaljha1225@gmail.com>
Date: Sun, 13 Oct 2024 16:45:38 +0545
Subject: [PATCH 1/4] Feature:Expanded ArrayField component to support arrays
 of numbers and booleans

---
 .../form/fields/array/ArrayField.tsx          | 53 ++++++++++++++-----
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/cyclops-ui/src/components/form/fields/array/ArrayField.tsx b/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
index f434a13c..e9328334 100644
--- a/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
+++ b/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
@@ -8,6 +8,8 @@ import {
   Input,
   Row,
   Tooltip,
+  Checkbox,
+  InputNumber,
 } from "antd";
 import {
   InfoCircleOutlined,
@@ -117,15 +119,9 @@ export const ArrayField = ({
                         onClick={() => remove(arrField.name)}
                       />
                     </Row>
-                    {arrFields !== null &&
-                    arrFields !== undefined &&
-                    index + 1 === arrFields.length ? (
-                      <Divider
-                        style={{ marginTop: "4px", marginBottom: "12px" }}
-                      />
-                    ) : (
-                      <></>
-                    )}
+                    {index + 1 === arrFields.length ? (
+                      <Divider style={{ marginTop: "4px", marginBottom: "12px" }} />
+                    ) : null}
                   </Col>
                 ))}
                 <Form.Item style={{ marginBottom: "0" }}>
@@ -144,6 +140,35 @@ export const ArrayField = ({
         </Form.Item>
       );
     }
+
+    if (field.items.type === "number") {
+      return (
+        <Form.Item
+          wrapperCol={{ span: 16 }}
+          name={fieldName}
+          label={field.display_name}
+          style={{ marginBottom: "12px" }}
+        >
+          <InputNumber disabled={field.immutable && isModuleEdit} />
+        </Form.Item>
+      );
+    }
+
+    if (field.items.type === "boolean") {
+      return (
+        <Form.Item
+          wrapperCol={{ span: 16 }}
+          name={fieldName}
+          valuePropName="checked"
+          style={{ marginBottom: "12px" }}
+        >
+          <Checkbox disabled={field.immutable && isModuleEdit}>
+            {field.display_name}
+          </Checkbox>
+        </Form.Item>
+      );
+    }
+
     if (field.items.type === "object") {
       return (
         <Collapse
@@ -162,11 +187,11 @@ export const ArrayField = ({
             }}
             forceRender={true}
           >
-            <Form.Item
-              wrapperCol={{ span: 16 }}
-              style={{
-                paddingTop: "8px",
-                marginBottom: "0",
+            <Form.Item 
+            wrapperCol={{ span: 16 }} 
+            style={{ 
+              paddingTop: "8px",
+              marginBottom: "0",
               }}
             >
               <Form.List name={formItemName}>

From cfbf88e8dd6546b71e13a6fc1596234a43725cee Mon Sep 17 00:00:00 2001
From: Ujjwal Jha <ujjwaljha1225@gmail.com>
Date: Sun, 13 Oct 2024 17:07:40 +0545
Subject: [PATCH 2/4] Revert "Feature:Expanded ArrayField component to support
 arrays of numbers and booleans"

This reverts commit 469132919dc60a20ab2235a14f8ecbccfe4e30d2.
---
 .../form/fields/array/ArrayField.tsx          | 53 +++++--------------
 1 file changed, 14 insertions(+), 39 deletions(-)

diff --git a/cyclops-ui/src/components/form/fields/array/ArrayField.tsx b/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
index e9328334..f434a13c 100644
--- a/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
+++ b/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
@@ -8,8 +8,6 @@ import {
   Input,
   Row,
   Tooltip,
-  Checkbox,
-  InputNumber,
 } from "antd";
 import {
   InfoCircleOutlined,
@@ -119,9 +117,15 @@ export const ArrayField = ({
                         onClick={() => remove(arrField.name)}
                       />
                     </Row>
-                    {index + 1 === arrFields.length ? (
-                      <Divider style={{ marginTop: "4px", marginBottom: "12px" }} />
-                    ) : null}
+                    {arrFields !== null &&
+                    arrFields !== undefined &&
+                    index + 1 === arrFields.length ? (
+                      <Divider
+                        style={{ marginTop: "4px", marginBottom: "12px" }}
+                      />
+                    ) : (
+                      <></>
+                    )}
                   </Col>
                 ))}
                 <Form.Item style={{ marginBottom: "0" }}>
@@ -140,35 +144,6 @@ export const ArrayField = ({
         </Form.Item>
       );
     }
-
-    if (field.items.type === "number") {
-      return (
-        <Form.Item
-          wrapperCol={{ span: 16 }}
-          name={fieldName}
-          label={field.display_name}
-          style={{ marginBottom: "12px" }}
-        >
-          <InputNumber disabled={field.immutable && isModuleEdit} />
-        </Form.Item>
-      );
-    }
-
-    if (field.items.type === "boolean") {
-      return (
-        <Form.Item
-          wrapperCol={{ span: 16 }}
-          name={fieldName}
-          valuePropName="checked"
-          style={{ marginBottom: "12px" }}
-        >
-          <Checkbox disabled={field.immutable && isModuleEdit}>
-            {field.display_name}
-          </Checkbox>
-        </Form.Item>
-      );
-    }
-
     if (field.items.type === "object") {
       return (
         <Collapse
@@ -187,11 +162,11 @@ export const ArrayField = ({
             }}
             forceRender={true}
           >
-            <Form.Item 
-            wrapperCol={{ span: 16 }} 
-            style={{ 
-              paddingTop: "8px",
-              marginBottom: "0",
+            <Form.Item
+              wrapperCol={{ span: 16 }}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "0",
               }}
             >
               <Form.List name={formItemName}>

From d994703fb4f477c481f48561e4f8a18b5829741c Mon Sep 17 00:00:00 2001
From: Ujjwal Jha <ujjwaljha1225@gmail.com>
Date: Sun, 13 Oct 2024 17:11:58 +0545
Subject: [PATCH 3/4] Feature:ArrayField expanded for number and bool

---
 .../form/fields/array/ArrayField.tsx          | 55 ++++++++++++++-----
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/cyclops-ui/src/components/form/fields/array/ArrayField.tsx b/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
index f434a13c..f1733490 100644
--- a/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
+++ b/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
@@ -8,6 +8,8 @@ import {
   Input,
   Row,
   Tooltip,
+  Checkbox,
+  InputNumber,
 } from "antd";
 import {
   InfoCircleOutlined,
@@ -117,15 +119,9 @@ export const ArrayField = ({
                         onClick={() => remove(arrField.name)}
                       />
                     </Row>
-                    {arrFields !== null &&
-                    arrFields !== undefined &&
-                    index + 1 === arrFields.length ? (
-                      <Divider
-                        style={{ marginTop: "4px", marginBottom: "12px" }}
-                      />
-                    ) : (
-                      <></>
-                    )}
+                    {index + 1 === arrFields.length ? (
+                      <Divider style={{ marginTop: "4px", marginBottom: "12px" }} />
+                    ) : null}
                   </Col>
                 ))}
                 <Form.Item style={{ marginBottom: "0" }}>
@@ -144,6 +140,35 @@ export const ArrayField = ({
         </Form.Item>
       );
     }
+
+    if (field.items.type === "number") {
+      return (
+        <Form.Item
+          wrapperCol={{ span: 16 }}
+          name={fieldName}
+          label={field.display_name}
+          style={{ marginBottom: "12px" }}
+        >
+          <InputNumber disabled={field.immutable && isModuleEdit} />
+        </Form.Item>
+      );
+    }
+
+    if (field.items.type === "boolean") {
+      return (
+        <Form.Item
+          wrapperCol={{ span: 16 }}
+          name={fieldName}
+          valuePropName="checked"
+          style={{ marginBottom: "12px" }}
+        >
+          <Checkbox disabled={field.immutable && isModuleEdit}>
+            {field.display_name}
+          </Checkbox>
+        </Form.Item>
+      );
+    }
+
     if (field.items.type === "object") {
       return (
         <Collapse
@@ -162,11 +187,11 @@ export const ArrayField = ({
             }}
             forceRender={true}
           >
-            <Form.Item
-              wrapperCol={{ span: 16 }}
-              style={{
-                paddingTop: "8px",
-                marginBottom: "0",
+            <Form.Item 
+            wrapperCol={{ span: 16 }} 
+            style={{ 
+              paddingTop: "8px",
+              marginBottom: "0",
               }}
             >
               <Form.List name={formItemName}>
@@ -248,4 +273,4 @@ export const ArrayField = ({
       )}
     </Col>
   );
-};
+};
\ No newline at end of file

From e6b120429e7fafc2c855af499be3186bb612314b Mon Sep 17 00:00:00 2001
From: Ujjwal Jha <ujjwaljha1225@gmail.com>
Date: Fri, 8 Nov 2024 17:24:10 +0545
Subject: [PATCH 4/4] Changed to make bool and num behave as arrays

---
 .../form/fields/array/ArrayField.tsx          | 129 ++++++++++++++++--
 1 file changed, 117 insertions(+), 12 deletions(-)

diff --git a/cyclops-ui/src/components/form/fields/array/ArrayField.tsx b/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
index f1733490..f670055d 100644
--- a/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
+++ b/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
@@ -120,7 +120,9 @@ export const ArrayField = ({
                       />
                     </Row>
                     {index + 1 === arrFields.length ? (
-                      <Divider style={{ marginTop: "4px", marginBottom: "12px" }} />
+                      <Divider
+                        style={{ marginTop: "4px", marginBottom: "12px" }}
+                      />
                     ) : null}
                   </Col>
                 ))}
@@ -149,7 +151,59 @@ export const ArrayField = ({
           label={field.display_name}
           style={{ marginBottom: "12px" }}
         >
-          <InputNumber disabled={field.immutable && isModuleEdit} />
+          <Form.List name={formItemName}>
+            {(arrFields, { add, remove }) => (
+              <div
+                style={{
+                  border: "solid 1px #d3d3d3",
+                  borderRadius: "7px",
+                  padding: "12px",
+                  width: "100%",
+                  backgroundColor: "#fafafa",
+                }}
+              >
+                {arrFields.map((arrField, index) => (
+                  <Col key={arrField.key}>
+                    <Row>
+                      <Form.Item
+                        style={{
+                          paddingBottom: "8px",
+                          marginBottom: "0px",
+                          width: "80%",
+                        }}
+                        wrapperCol={{ span: 24 }}
+                        {...arrField}
+                        name={[arrField.name]}
+                      >
+                        <InputNumber
+                          disabled={field.immutable && isModuleEdit}
+                        />
+                      </Form.Item>
+                      <MinusCircleOutlined
+                        style={{ fontSize: "16px", paddingLeft: "10px" }}
+                        onClick={() => remove(arrField.name)}
+                      />
+                    </Row>
+                    {index + 1 === arrFields.length ? (
+                      <Divider
+                        style={{ marginTop: "4px", marginBottom: "12px" }}
+                      />
+                    ) : null}
+                  </Col>
+                ))}
+                <Form.Item style={{ marginBottom: "0" }}>
+                  <Button
+                    type="dashed"
+                    onClick={() => add()}
+                    block
+                    icon={<PlusOutlined />}
+                  >
+                    Add
+                  </Button>
+                </Form.Item>
+              </div>
+            )}
+          </Form.List>
         </Form.Item>
       );
     }
@@ -159,12 +213,63 @@ export const ArrayField = ({
         <Form.Item
           wrapperCol={{ span: 16 }}
           name={fieldName}
-          valuePropName="checked"
+          label={field.display_name}
           style={{ marginBottom: "12px" }}
         >
-          <Checkbox disabled={field.immutable && isModuleEdit}>
-            {field.display_name}
-          </Checkbox>
+          <Form.List name={formItemName}>
+            {(arrFields, { add, remove }) => (
+              <div
+                style={{
+                  border: "solid 1px #d3d3d3",
+                  borderRadius: "7px",
+                  padding: "12px",
+                  width: "100%",
+                  backgroundColor: "#fafafa",
+                }}
+              >
+                {arrFields.map((arrField, index) => (
+                  <Col key={arrField.key}>
+                    <Row>
+                      <Form.Item
+                        style={{
+                          paddingBottom: "8px",
+                          marginBottom: "0px",
+                          width: "80%",
+                        }}
+                        wrapperCol={{ span: 24 }}
+                        {...arrField}
+                        name={[arrField.name]}
+                        valuePropName="checked"
+                      >
+                        <Checkbox disabled={field.immutable && isModuleEdit}>
+                          {field.display_name}
+                        </Checkbox>
+                      </Form.Item>
+                      <MinusCircleOutlined
+                        style={{ fontSize: "16px", paddingLeft: "10px" }}
+                        onClick={() => remove(arrField.name)}
+                      />
+                    </Row>
+                    {index + 1 === arrFields.length ? (
+                      <Divider
+                        style={{ marginTop: "4px", marginBottom: "12px" }}
+                      />
+                    ) : null}
+                  </Col>
+                ))}
+                <Form.Item style={{ marginBottom: "0" }}>
+                  <Button
+                    type="dashed"
+                    onClick={() => add()}
+                    block
+                    icon={<PlusOutlined />}
+                  >
+                    Add
+                  </Button>
+                </Form.Item>
+              </div>
+            )}
+          </Form.List>
         </Form.Item>
       );
     }
@@ -187,11 +292,11 @@ export const ArrayField = ({
             }}
             forceRender={true}
           >
-            <Form.Item 
-            wrapperCol={{ span: 16 }} 
-            style={{ 
-              paddingTop: "8px",
-              marginBottom: "0",
+            <Form.Item
+              wrapperCol={{ span: 16 }}
+              style={{
+                paddingTop: "8px",
+                marginBottom: "0",
               }}
             >
               <Form.List name={formItemName}>
@@ -273,4 +378,4 @@ export const ArrayField = ({
       )}
     </Col>
   );
-};
\ No newline at end of file
+};