custom_fields: compose fields from given list

Author: kpsherva

src/lib/forms/widgets/custom_fields/ComposeFields.js

@@ -0,0 +1,100 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Divider } from "semantic-ui-react";
+import { AccordionField } from "../../AccordionField";
+import { FieldLabel } from "../../FieldLabel";
+import { Extensions } from "./Extensions";
+
+export class ComposeFields extends Component {
+  constructor(props) {
+    super(props);
+    const { composeSections } = this.props;
+
+    this.state = { sections: composeSections, tempFields: [] };
+  }
+
+  getFieldsConfig = (sectionCfg) => {
+    const cfg = {};
+    for (const section of sectionCfg) {
+      for (const fieldCfg of section.fieldsConfig) {
+        const { field, props, ui_widget, ...otherCfg } = fieldCfg;
+        cfg[field] = { ui_widget: ui_widget, section: section, ...props, ...otherCfg };
+      }
+    }
+
+    return cfg;
+  };
+
+  getFieldsWithValues = (sectionFields) => {
+    const { record } = this.props;
+    const { tempFields } = this.state;
+    const filledFields = [];
+    for (const field of sectionFields) {
+      if (
+        Object.keys(record.custom_fields).includes(
+          field.key.replace("custom_fields.", "")
+        ) ||
+        tempFields.includes(field)
+      ) {
+        filledFields.push(field);
+      }
+    }
+    return filledFields;
+  };
+
+  getSectionOfField = (field) => {
+    const { sections } = this.state;
+    for (const section of sections) {
+      if (section.fields.map((field) => field.key).includes(field.key)) {
+        return section.section;
+      }
+    }
+  };
+
+  addFieldCallback = (field) => {
+    const { sections: prevSections, tempFields: prevTempFields } = this.state;
+    const sections = [...prevSections];
+    const sectionToUpdate = this.getSectionOfField(field);
+    for (const section of sections) {
+      if (section.section === sectionToUpdate) {
+        section["fields"] = [...section.fields, field];
+      }
+    }
+    this.setState({ sections: [...sections], tempFields: [...prevTempFields, field] });
+  };
+
+  render() {
+    const { templateLoaders, record } = this.props;
+    const { sections } = this.state;
+
+    const fields = this.getFieldsConfig(sections);
+    return (
+      <AccordionField key="compose fields" label="Domain specific fields" active>
+        {sections.map(({ fields, paths, ...sectionConfig }) => (
+          <div key={sectionConfig.section} className="rel-mb-2">
+            <FieldLabel
+              htmlFor={sectionConfig.section}
+              icon={sectionConfig.icon}
+              label={sectionConfig.section}
+            />
+            <Divider fitted className="rel-mb-1" />
+            <div className="rel-ml-1">{this.getFieldsWithValues(fields)}</div>
+          </div>
+        ))}
+        <Extensions
+          fieldPath="custom_fields"
+          {...fields}
+          templateLoaders={templateLoaders}
+          addFieldCallback={this.addFieldCallback}
+          record={record}
+        />
+      </AccordionField>
+    );
+  }
+}
+
+ComposeFields.propTypes = {
+  templateLoaders: PropTypes.array.isRequired,
+  composeSections: PropTypes.array.isRequired,
+  record: PropTypes.object.isRequired,
+};

src/lib/forms/widgets/custom_fields/CustomFields.js

@@ -7,54 +7,90 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import { ComposeFields } from "./ComposeFields";
 import { AccordionField } from "../../AccordionField";
 import { loadWidgetsFromConfig } from "../loader";
 
 export class CustomFields extends Component {
-  state = { sections: [] };
+  constructor(props) {
+    super(props);
+    this.state = { sections: undefined, composeSections: undefined };
+  }
 
   componentDidMount() {
+    this.populateConfig();
+  }
+
+  populateConfig = async () => {
     const { includesPaths, fieldPathPrefix } = this.props;
-    // use of `Promise.then()` as eslint is giving an error when calling setState() directly
-    // in the componentDidMount() method
-    this.loadCustomFieldsWidgets()
-      .then((sections) => {
-        sections = sections.map((sectionCfg) => {
-          const paths = includesPaths(sectionCfg.fields, fieldPathPrefix);
-          return { ...sectionCfg, paths };
-        });
-        this.setState({ sections });
-      })
-      .catch((error) => {
-        console.error("Couldn't load custom fields widgets.", error);
+    try {
+      const { sectionsConfig, composeSectionConfig } =
+        await this.loadCustomFieldsWidgets();
+      const sections = sectionsConfig.map((sectionCfg) => {
+        const paths = includesPaths(sectionCfg.fields, fieldPathPrefix);
+        return { ...sectionCfg, paths };
       });
-  }
+
+      const composeSections = composeSectionConfig.map((sectionCfg) => {
+        const paths = includesPaths(sectionCfg.fields, fieldPathPrefix);
+        return { ...sectionCfg, paths };
+      });
+
+      this.setState({ sections: sections, composeSections: composeSections });
+    } catch (error) {
+      console.error("Couldn't load custom fields widgets.", error);
+    }
+  };
 
   async loadCustomFieldsWidgets() {
-    const { config, fieldPathPrefix, templateLoaders } = this.props;
+    const { config, fieldPathPrefix, templateLoaders, record } = this.props;
 
     const sections = [];
+    const composeFieldSections = [];
     for (const sectionCfg of config) {
       // Path to end user's folder defining custom fields ui widgets
       const fields = await loadWidgetsFromConfig({
         templateLoaders: templateLoaders,
         fieldPathPrefix: fieldPathPrefix,
         fields: sectionCfg.fields,
+        record: record,
       });
-      sections.push({ ...sectionCfg, fields });
+      if (sectionCfg.compose_fields) {
+        composeFieldSections.push({
+          ...sectionCfg,
+          fields: fields,
+          fieldsConfig: sectionCfg.fields,
+        });
+      } else {
+        sections.push({ ...sectionCfg, fields });
+      }
     }
-    return sections;
+    return { sectionsConfig: sections, composeSectionConfig: composeFieldSections };
   }
 
   render() {
-    const { sections } = this.state;
+    const { sections, composeSections } = this.state;
+    const { templateLoaders, record } = this.props;
     return (
       <>
-        {sections.map(({ section, fields, paths }) => (
-          <AccordionField key={section} includesPaths={paths} label={section} active>
-            {fields}
-          </AccordionField>
-        ))}
+        {sections &&
+          sections.map(({ fields, paths, ...sectionConfig }) => (
+            <AccordionField
+              key={sectionConfig.section}
+              includesPaths={paths}
+              label={sectionConfig.section}
+              active
+            >
+              {fields}
+            </AccordionField>
+          ))}
+        {composeSections && composeSections && (
+          <ComposeFields
+            templateLoaders={templateLoaders}
+            composeSections={composeSections}
+            record={record}
+          />
+        )}
       </>
     );
   }
@@ -76,6 +112,7 @@ CustomFields.propTypes = {
   templateLoaders: PropTypes.array.isRequired,
   fieldPathPrefix: PropTypes.string.isRequired,
   includesPaths: PropTypes.func,
+  record: PropTypes.object.isRequired,
 };
 
 CustomFields.defaultProps = {