chore: Create formInputFields custom input

CodeForAfrica · Dec 2, 2024 · c303074 · c303074
1 parent bdd585f
commit c303074
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 113 deletions.
diff --git a/apps/civicsignalblog/src/payload/fields/formInputFields.js b/apps/civicsignalblog/src/payload/fields/formInputFields.js
@@ -0,0 +1,63 @@
+function formInputFields({ minRows, maxRows, validate }) {
+  return {
+    name: "fields",
+    type: "array",
+    label: "Form input fields",
+    minRows,
+    maxRows,
+    validate,
+    labels: {
+      singular: "Field",
+      plural: "Fields",
+    },
+    admin: {
+      className: "array-field-nested",
+      components: {
+        RowLabel: ({ data, index }) => {
+          let label = "";
+          if (data.name) {
+            label = data.name;
+          }
+          if (!label) {
+            label = `Field ${String(index).padStart(2, "0")}`;
+          }
+          return label;
+        },
+      },
+      initCollapsed: true,
+    },
+    fields: [
+      {
+        type: "row",
+        fields: [
+          {
+            name: "name",
+            type: "text",
+            required: true,
+          },
+          {
+            name: "label",
+            type: "text",
+            required: true,
+          },
+        ],
+      },
+      {
+        type: "row",
+        fields: [
+          {
+            name: "errorMessage",
+            type: "text",
+            required: true,
+          },
+          {
+            name: "hint",
+            type: "text",
+          },
+        ],
+      },
+    ],
+  };
+}
+
+export default formInputFields;
diff --git a/apps/civicsignalblog/src/payload/globals/Forms/login/LoginTab.js b/apps/civicsignalblog/src/payload/globals/Forms/login/LoginTab.js
@@ -1,3 +1,4 @@
+import formInputFields from "#civicsignalblog/payload/fields/formInputFields";
 import richText from "#civicsignalblog/payload/fields/richText";
 
 const LoginTab = {
@@ -20,10 +21,7 @@ const LoginTab = {
       type: "collapsible",
       label: "Fields",
       fields: [
-        {
-          name: "fields",
-          type: "array",
-          label: "Form input fields",
+        formInputFields({
           minRows: 2,
           maxRows: 2,
           validate: (val, args) => {
@@ -37,61 +35,9 @@ const LoginTab = {
             if (!val.some((field) => field.name === "password")) {
               return "Login form must have a field with password as name";
             }
-
             return true;
           },
-          labels: {
-            singular: "Field",
-            plural: "Fields",
-          },
-          admin: {
-            className: "array-field-nested",
-            components: {
-              RowLabel: ({ data, index }) => {
-                let label = "";
-                if (data.name) {
-                  label = data.name;
-                }
-                if (!label) {
-                  label = `Field ${String(index).padStart(2, "0")}`;
-                }
-                return label;
-              },
-            },
-            initCollapsed: true,
-          },
-          fields: [
-            {
-              type: "row",
-              fields: [
-                {
-                  name: "name",
-                  type: "text",
-                  required: true,
-                },
-                {
-                  name: "label",
-                  type: "text",
-                  required: true,
-                },
-              ],
-            },
-            {
-              type: "row",
-              fields: [
-                {
-                  name: "errorMessage",
-                  type: "text",
-                  required: true,
-                },
-                {
-                  name: "hint",
-                  type: "text",
-                },
-              ],
-            },
-          ],
-        },
+        }),
       ],
     },
     {

diff --git a/apps/civicsignalblog/src/payload/globals/Forms/resetPassword/ResetPasswordTab.js b/apps/civicsignalblog/src/payload/globals/Forms/resetPassword/ResetPasswordTab.js
@@ -1,3 +1,5 @@
+import formInputFields from "#civicsignalblog/payload/fields/formInputFields";
+
 const ResetPassword = {
   label: "Reset Password Form",
   fields: [
@@ -26,10 +28,7 @@ const ResetPassword = {
       type: "collapsible",
       label: "Fields",
       fields: [
-        {
-          name: "fields",
-          type: "array",
-          label: "Form input fields",
+        formInputFields({
           minRows: 1,
           maxRows: 1,
           validate: (val, args) => {
@@ -41,58 +40,7 @@ const ResetPassword = {
             }
             return true;
           },
-          labels: {
-            singular: "Field",
-            plural: "Fields",
-          },
-          admin: {
-            className: "array-field-nested",
-            components: {
-              RowLabel: ({ data, index }) => {
-                let label = "";
-                if (data.name) {
-                  label = data.name;
-                }
-                if (!label) {
-                  label = `Field ${String(index).padStart(2, "0")}`;
-                }
-                return label;
-              },
-            },
-            initCollapsed: true,
-          },
-          fields: [
-            {
-              type: "row",
-              fields: [
-                {
-                  name: "name",
-                  type: "text",
-                  required: true,
-                },
-                {
-                  name: "label",
-                  type: "text",
-                  required: true,
-                },
-              ],
-            },
-            {
-              type: "row",
-              fields: [
-                {
-                  name: "errorMessage",
-                  type: "text",
-                  required: true,
-                },
-                {
-                  name: "hint",
-                  type: "text",
-                },
-              ],
-            },
-          ],
-        },
+        }),
       ],
     },
     {