initial dynamic forms

components/newappeal/advertapplication.js

@@ -15,7 +15,7 @@ export default function MakeAdvertApplication() {
                     discontinuance notice.
                 </p>
                 <div className="appealCTA">
-                    <Link href="/newappeal">
+                    <Link href="/newappeal/selectappeal">
                         <a className="govuk-button">
                             An advert application/Discontinuance Notice (DN)
                         </a>

components/newappeal/buildfield.js

@@ -0,0 +1,95 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import {
+    Textfield,
+    DateField,
+    YesNofield,
+    PickList,
+    MultiLinefield,
+    NumericField,
+    ReadOnlyfield,
+} from "../elements";
+
+export default function BuildField(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { fieldType, label, datafieldname } = props;
+
+    const parser = new DOMParser();
+
+    const whichFieldType = (classid) => {
+        switch (classid) {
+            case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
+                return (
+                    <ReadOnlyfield
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
+                return (
+                    <PickList
+                        name={props.datafieldname}
+                        label={props.label}
+                        datafieldname={props.datafieldname}
+                    />
+                );
+                break;
+            case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
+                return (
+                    <YesNofield
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
+                return (
+                    <Textfield name={props.datafieldname} label={props.label} />
+                );
+                break;
+            case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
+                return (
+                    <DateField name={props.datafieldname} label={props.label} />
+                );
+                break;
+            case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
+                return (
+                    <MultiLinefield
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
+                return (
+                    <NumericField
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
+                return " decimal";
+                break;
+            default:
+                return (
+                    <Textfield name={props.datafieldname} label={props.label} />
+                );
+        }
+    };
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-full">
+                {whichFieldType(props.fieldType)}
+            </div>
+        </div>
+    );
+}

components/newappeal/buildrow.js

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import BuildField from "./buildfield";
+
+export default function BuildRow(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { rowXML, whichSection, sectionCount } = props;
+
+    const parser = new DOMParser();
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-full">
+                {Object.keys(rowXML).map((key, index) => {
+                    var doc = parser.parseFromString(
+                        rowXML[key].outerHTML,
+                        "text/xml"
+                    );
+                    var rows = xpath.select("//label/@description", doc);
+                    var fieldtype = xpath.select("//@classid", doc);
+                    var datafieldname = xpath.select("//@datafieldname", doc);
+                    return (
+                        <BuildField
+                            fieldType={fieldtype[0].value}
+                            label={rows[0].value}
+                            datafieldname={datafieldname[0].value}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

components/newappeal/buildsection.js

@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import BuildRow from "./buildrow";
+
+export default function BuildSection(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { formXML, whichSection, sectionCount } = props;
+
+    const parser = new DOMParser();
+    var doc = parser.parseFromString(props.formXML, "text/xml");
+    var titles = xpath.select(
+        "//form/tabs/tab[" +
+            (parseInt(whichSection) + 1) +
+            " ]/labels/label/@description",
+        doc
+    );
+    var rowXML = xpath.select(
+        "/form/tabs/tab[" +
+            (parseInt(whichSection) + 1) +
+            "]/columns//sections/section/rows/row",
+        doc
+    );
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-full">
+                <h2>
+                    {props.whichSection} - {titles[0].value}{" "}
+                </h2>
+                <BuildRow
+                    rowXML={rowXML}
+                    whichSection={props.whichSection}
+                    sectionCount={props.sectionCount}
+                />
+                <button
+                    type="submit"
+                    role="button"
+                    draggable="false"
+                    class="govuk-button"
+                    data-module="govuk-button"
+                >
+                    Continue
+                </button>
+            </div>
+        </div>
+    );
+}

components/newappeal/enforcementnotice.js

@@ -14,7 +14,7 @@ export default function MakeEnforcementNotice() {
                     Including an enforcement listed building notice.
                 </p>
                 <div className="appealCTA">
-                    <Link href="/newappeal">
+                    <Link href="/newappeal/selectappeal">
                         <a className="govuk-button">A enforcement notice</a>
                     </Link>
                 </div>

components/newappeal/ldc.js

@@ -15,7 +15,7 @@ export default function MakeLDC() {
                     lawful use or development.
                 </p>
                 <div className="appealCTA">
-                    <Link href="/newappeal">
+                    <Link href="/newappeal/selectappeal">
                         <a className="govuk-button">
                             A Lawful Development Certificate (LDC)
                         </a>

components/newappeal/planningappeal.js

@@ -16,7 +16,7 @@ export default function MakeNewAppeal() {
                     building (LB) applications.
                 </p>
                 <div className="appealCTA">
-                    <Link href="./newappeal/appealtypes/planningappeals78">
+                    <Link href="./newappeal/selectappeal">
                         <a className="govuk-button">A planning application</a>
                     </Link>
                 </div>