initial dynamic forms

2021-07-08 16:22:12 +01:00
parent b335c11e6b
commit 878940a6d5
25 changed files with 709 additions and 60 deletions
@@ -0,0 +1,134 @@
+import _ from "lodash";
+import Head from "next/head";
+import Header from "../../components/header";
+import Banner from "../../components/banner";
+import CookieBanner from "../../components/cookieBanner";
+import Breadcrumbs from "../../components/breadcrumbs";
+import Footer from "../../components/footer";
+import Errorpage from "../../components/errorpage";
+import styles from "../../styles/Home.module.css";
+import { useSelector, shallowEqual, connect } from "react-redux";
+import { wrapper } from "../../store/store";
+import Cookies from "cookies";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+import { setForm, getFormObj } from "../../store/formData/action";
+import { getFormData } from "../../actions";
+import xpath from "xpath";
+
+import BuildSection from "../../components/newappeal/buildsection";
+
+const Home = (props) => {
+    const { footerLinks, pages, formData } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const formXML = props.formData.formData;
+    const parser = new DOMParser();
+    var doc = parser.parseFromString(formXML, "text/xml");
+    var titles = xpath.select(
+        "//form/tabs/tab[*]/labels/label[@description]/@description",
+        doc
+    );
+    var sectionCount = xpath.select("/form/tabs/tab[*]", doc);
+    sectionCount = sectionCount.length;
+
+    var tabs = xpath.select("//form/tabs/tab[*]", doc);
+
+    // crm api query for looking up picklist fields/drop downs
+    // <url path to >/api/data/v8.2/EntityDefinitions(LogicalName='{appeal type form}')/Attributes(LogicalName='{drop down datafield name}')/Microsoft.Dynamics.CRM.PicklistAttributeMetadata?$select=LogicalName&$expand=GlobalOptionSet($select=Options)
+    // eg https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/EntityDefinitions(LogicalName='pinswg_householderappealhas')/Attributes(LogicalName='pinswg_casetype')/Microsoft.Dynamics.CRM.PicklistAttributeMetadata?$select=LogicalName&$expand=GlobalOptionSet($select=Options)
+    // query for labels in section  eg for section 2 -  /form/tabs/tab[2]//rows//labels
+    // query for getting guids of form element types /form/tabs/tab[*]//rows/row//control[@classid]/@classid
+    //
+    //      270BD3DB-D9AF-4782-9025-509E298DEC0A - read only
+    //      3EF39988-22BB-4f0b-BBBE-64B5A3748AEE - drop down list controlled by datafieldname for content - datafieldname picklist entity
+    //      67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED - boolean flag / yes no radio button
+    //      4273EDBD-AC1D-40d3-9FB2-095C621B552D - text field
+    //      5B773807-9FB2-42db-97C3-7A91EFF8ADFF - date field
+    //      E0DECE4B-6FC8-4a8f-A065-082708572369 - multiline
+    //      C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F - numeric field
+    //      C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E - decimal
+
+    /// to get dropdowns names
+    //  form/tabs/tab[*]//rows/row//control[@classid="{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"]/@datafieldname
+
+    console.log(titles);
+
+    const Sections = Object.keys(tabs).map((key, index) => (
+        <BuildSection
+            formXML={formXML}
+            whichSection={key}
+            sectionCount={sectionCount}
+        />
+    ));
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("search:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Breadcrumbs slug={appealtypes} />
+                    {Sections}
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            console.log("the query", query);
+            const formdata = (await getFormData(query.appealtypes)) || null;
+            let xmlStr = formdata;
+            xmlStr = formdata.value[0].formxml;
+            xmlStr = xmlStr.replace(/\\"/g, "");
+            store.dispatch(setForm(xmlStr));
+        }
+);
+
+// export const getServerSideProps = wrapper.getServerSideProps(
+//     async ({ locale, store, query, req, res }) => {
+//         //     const token = await getToken();
+//         //     let accessToken = token.access_token;
+
+//         //     const apiRoot = process.browser ? window.API_ROOT : process.env.API_ROOT;
+
+//         //     const [pages, footerLinks, courseListContent] = await Promise.all([
+//         //       await getPages(accessToken, locale),
+//         //       await getFooterLinks(accessToken, locale),
+//         //       await getCourseList(accessToken, locale),
+//         //     ]);
+//         //     //const courseID = await getCourseID
+//         //     store.dispatch(setApiRoot(apiRoot));
+//         //     store.dispatch(setPages(pages));
+//         //     store.dispatch(setFooterLinks(footerLinks));
+//         //     store.dispatch(setCourseListContent(courseListContent));
+//         console.log(query);
+//         //store.dispatch(setSearch(query.search));
+//     }
+// );
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+    };
+};
+
+export default connect(mapStateToProps)(Home);