added tenant fieldarray and date ranges

2024-03-20 10:56:42 +00:00
parent 7c09367be4
commit dc933087d2
14 changed files with 268 additions and 41 deletions
@@ -1,4 +1,4 @@
-import { Field, reduxForm } from "redux-form";
+import { Field, reduxForm, FieldArray } from "redux-form";
 import { useRouter } from "next/router";
 import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
@@ -1736,3 +1736,94 @@ const RenderFileUpload = (field) => {
        </>
    );
 };
+
+const renderField = ({ input, label, type, meta: { touched, error } }) => (
+    <div>
+        <label>{label}</label>
+        <div>
+            <input {...input} type={type} placeholder={label} />
+            {touched && error && <span>{error}</span>}
+        </div>
+    </div>
+);
+
+const renderSubFields = ({ fields }) => (
+    <ul>
+        <div>
+            {fields.map((member, index) => (
+                <div key={index}>
+                    <h4>Tenant #{index + 1}</h4>
+                    <div className="fieldArrayContainer">
+                        <Field
+                            id={`${member}.${fields.name}`}
+                            name={`${member}.${fields.name}`}
+                            type="text"
+                            component={RenderTextfield}
+                            label="Tenant Name"
+                            className="govuk-input govuk-input--width-10"
+                        />
+                        <Field
+                            name={`${member}.dateserved`}
+                            type="text"
+                            component={RenderDatePicker}
+                            label="Date served notice"
+                            dateStart={"-6m"}
+                            dateEnd={"0"}
+                            className="govuk-input govuk-input--width-10"
+                        />
+                        <button
+                            type="button"
+                            title="Remove tenant"
+                            onClick={() => fields.remove(index)}
+                            className="govuk-button fieldArrayDelete"
+                        >
+                            X
+                        </button>
+                    </div>
+                </div>
+            ))}
+        </div>
+        <button
+            type="button"
+            className="govuk-link fieldArrayLink"
+            onClick={() => fields.push({})}
+        >
+            Add Tenant
+        </button>
+    </ul>
+);
+
+export const FieldArrayForm = (props) => {
+    const {
+        name,
+        label,
+        validation,
+        form,
+        formProps,
+        parentFieldShowOnValue,
+        parentField,
+        maxFieldLength,
+    } = props;
+
+    var showIfHasParentShowValue =
+        parentField != false &&
+        !_.isEmpty(formProps[form]) &&
+        _.has(formProps[form].values, parentField) &&
+        parentFieldShowOnValue.indexOf(
+            formProps[form].values[parentField].toString()
+        ) > -1;
+
+    (showIfHasParentShowValue == parentField) != false &&
+        showIfHasParentShowValue;
+
+    parentFieldShowOnValue;
+    const { handleSubmit, pristine, reset, submitting } = props;
+    return (
+        <>
+            {" "}
+            {showIfHasParentShowValue && (
+                <FieldArray name={name} component={renderSubFields} />
+            )}
+        </>
+    );
+};