datastake-daf 0.6.272 → 0.6.274

package/src/@daf/core/components/ViewForm/content.jsx

@@ -1,411 +1,371 @@
 /* eslint-disable no-unused-vars */
-import { Tabs, Alert } from "antd";
-import React, { useEffect, useState } from "react";
-import Group from "./components/group";
-import Input from "./components/input";
-import { getInputLabel } from "./config";
-import { getToken } from "../../../../helpers/Token";
-import RepeatableGroup from "./components/repeatableGroup";
-import RepeatableModals from "./components/repeatableModals";
-import { repeatObjects, isGroupInput, groupSubsections, getLastRow, showHideInput } from "./helper";
-import GetIcon from "../Icon/index.jsx";
+import { Tabs, Alert } from 'antd';
+import React, { useEffect, useState } from 'react';
+import Group from './components/group';
+import Input from './components/input';
+import { getInputLabel } from './config';
+import { getToken } from '../../../../helpers/Token';
+import RepeatableGroup from './components/repeatableGroup';
+import RepeatableModals from './components/repeatableModals';
+import { repeatObjects, isGroupInput, groupSubsections, getLastRow, showHideInput } from './helper';
+import GetIcon from '../Icon/index.jsx';
 
 const Content = ({
-	style = {},
-	form = {},
-	data = {},
-	groupConfig = {},
-	versionsDatapoints,
-	linkingData = {},
-	linkingForms = {},
-	ajaxOptions = [],
-	// ADDED
-	t,
-	app,
-	ajaxForms,
-	language,
-	changeAjaxForms,
-	getApiBaseUrl,
-	getAppHeader,
-	user,
-	evaluationConfig = [],
-	fullWidth = false,
+  style = {},
+  form = {},
+  data = {},
+  groupConfig = {},
+  versionsDatapoints,
+  linkingData = {},
+  linkingForms = {},
+  ajaxOptions = [],
+  // ADDED
+  t,
+  app,
+  ajaxForms,
+  language,
+  changeAjaxForms,
+  getApiBaseUrl,
+  getAppHeader,
+  user,
+  evaluationConfig = [],
 }) => {
-	const groupSingle = (grps) => {
-		const form = Object.keys(grps).reduce((f, gKey) => {
-			if (
-				grps[gKey].type !== "modal" &&
-				!isGroupInput(grps[gKey], false, data) &&
-				!isGroupInput(grps[gKey], true, data) &&
-				grps[gKey].display !== "group" &&
-				!grps[gKey].viewGroup &&
-				!grps[gKey].component
-			) {
-				if (grps[gKey].group && !f[grps[gKey].group]) {
-					f[grps[gKey].group] = {};
-					Object.assign(f[grps[gKey].group], { [gKey]: grps[gKey] });
-				} else if (grps[gKey].group && f[grps[gKey].group]) {
-					Object.assign(f[grps[gKey].group], { [gKey]: grps[gKey] });
-				}
+  const groupSingle = (grps) => {
+    const form = Object.keys(grps).reduce((f, gKey) => {
+      if (
+        grps[gKey].type !== 'modal' &&
+        !isGroupInput(grps[gKey], false, data) &&
+        !isGroupInput(grps[gKey], true, data) &&
+        grps[gKey].display !== 'group' &&
+        !grps[gKey].viewGroup &&
+        !grps[gKey].component) {
+        if (grps[gKey].group && !f[grps[gKey].group]) {
+          f[grps[gKey].group] = {};
+          Object.assign(f[grps[gKey].group], { [gKey]: grps[gKey] });
+        } else if (grps[gKey].group && f[grps[gKey].group]) {
+          Object.assign(f[grps[gKey].group], { [gKey]: grps[gKey] });
+        }
 
-				if (grps[gKey]?.meta?.group && !f[grps[gKey]?.meta?.group]) {
-					f[grps[gKey]?.meta?.group] = {};
-					Object.assign(f[grps[gKey].meta.group], { [gKey]: grps[gKey] });
-				} else if (grps[gKey]?.meta?.group && f[grps[gKey]?.meta?.group]) {
-					Object.assign(f[grps[gKey].meta.group], { [gKey]: grps[gKey] });
-				}
+        if (grps[gKey]?.meta?.group && !f[grps[gKey]?.meta?.group]) {
+          f[grps[gKey]?.meta?.group] = {};
+          Object.assign(f[grps[gKey].meta.group], { [gKey]: grps[gKey] });
+        } else if (grps[gKey]?.meta?.group && f[grps[gKey]?.meta?.group]) {
+          Object.assign(f[grps[gKey].meta.group], { [gKey]: grps[gKey] });
+        }
 
-				if (grps[gKey].section && !f[grps[gKey].section]) {
-					f[grps[gKey].section] = {};
-					Object.assign(f[grps[gKey].section], { [gKey]: grps[gKey] });
-				} else if (grps[gKey].section && f[grps[gKey].section]) {
-					Object.assign(f[grps[gKey].section], { [gKey]: grps[gKey] });
-				}
-			}
-			return f;
-		}, {});
-		return form;
-	};
+        if (grps[gKey].section && !f[grps[gKey].section]) {
+          f[grps[gKey].section] = {};
+          Object.assign(f[grps[gKey].section], { [gKey]: grps[gKey] });
+        } else if (grps[gKey].section && f[grps[gKey].section]) {
+          Object.assign(f[grps[gKey].section], { [gKey]: grps[gKey] });
+        }
+      }
+      return f;
+    }, {});
+    return form;
+  }
 
-	const getDisplayGroupConfig = (groups, key) => {
-		return Object.keys(groups).reduce((items, gKey) => {
-			if (groups[gKey].viewGroup === key) {
-				// eslint-disable-next-line no-unused-vars
-				const { viewGroup, ...gCfg } = groups[gKey];
-				items[gKey] = gCfg;
-			}
-			return items;
-		}, {});
-	};
+  const getDisplayGroupConfig = (groups, key) => {
+    return Object.keys(groups).reduce((items, gKey) => {
+      if (groups[gKey].viewGroup === key) {
+        // eslint-disable-next-line no-unused-vars
+        const { viewGroup, ...gCfg } = groups[gKey];
+        items[gKey] = gCfg;
+      }
+      return items;
+    }, {});
+  }
 
-	const getComponent = (component, key, config) => {
-		switch (component) {
-			case "repeatableModals":
-				return (
-					<RepeatableModals
-						app={app}
-						key={key}
-						t={t}
-						ajaxForms={ajaxForms}
-						changeAjaxForms={changeAjaxForms}
-						getApiBaseUrl={getApiBaseUrl}
-						getAppHeader={getAppHeader}
-						user={user}
-						getToken={getToken}
-						name={key}
-						data={data}
-						config={config}
-						linkingData={linkingData}
-						linkingForms={linkingForms}
-						ajaxOptions={ajaxOptions}
-					/>
-				);
-			default:
-				return <p>Component</p>;
-		}
-	};
+  const getComponent = (component, key, config) => {
+    switch (component) {
+      case 'repeatableModals':
+        return <RepeatableModals
+          app={app}
+          key={key}
+          t={t}
+          ajaxForms={ajaxForms}
+          changeAjaxForms={changeAjaxForms}
+          getApiBaseUrl={getApiBaseUrl}
+          getAppHeader={getAppHeader}
+          user={user}
+          getToken={getToken}
+          name={key}
+          data={data}
+          config={config}
+          linkingData={linkingData}
+          linkingForms={linkingForms}
+          ajaxOptions={ajaxOptions}
+        />;
+      default:
+        return <p>Component</p>;
+    }
+  }
 
-	const isDisplayGroup = (input) => input.display && input.display === "group";
-	const isSingleModal = (input) => input.type && input.type === "modal";
-	const hasComponent = (input) => input.component && typeof input.component === "string";
+  const isDisplayGroup = (input) => input.display && input.display === 'group';
+  const isSingleModal = (input) => input.type && input.type === 'modal';
+  const hasComponent = (input) => input.component && typeof input.component === 'string';
 
-	const typeRender = (groups, singleGroupsKeys, addedContent) => {
-		const _length = Object.keys(groups || {}).length;
-		const isEven = _length % 2 === 0;
+  const typeRender = (groups, singleGroupsKeys, addedContent) => {
+    const _length = Object.keys(groups || {}).length;
+    const isEven = _length % 2 === 0;
 
-		const groupped = Object.keys(groups).reduce((all, key) => {
-			const _val = groups[key];
-			const group = _val.group || _val?.meta?.group || _val.section;
+    const groupped = Object.keys(groups).reduce((all, key) => {
+      const _val = groups[key];
+      const group = _val.group || _val?.meta?.group || _val.section;
 
-			if (all[group]) {
-				all[group][key] = _val;
-			} else {
-				all[group] = { [key]: _val };
-			}
+      if (all[group]) {
+        all[group][key] = _val;
+      } else {
+        all[group] = { [key]: _val };
+      }
 
-			return all;
-		}, {});
+      return all;
+    }, {});
 
-		return Object.keys(groupped).map((key) => {
-			const groups = groupped[key];
 
-			return (
-				<React.Fragment key={key}>
-					{repeatObjects(groups, (key, ind) => {
-						// normal group
-						return hasComponent(groups[key]) ? (
-							getComponent(groups[key].component, key, groups[key])
-						) : isGroupInput(groups[key], false, data) ? (
-							<Group
-								t={t}
-								key={key}
-								name={key}
-								linkingData={linkingData}
-								config={groups[key]}
-								data={data}
-								allData={data}
-								linkingForms={linkingForms}
-								cols={2}
-								ajaxForms={ajaxForms}
-								changeAjaxForms={changeAjaxForms}
-								getApiBaseUrl={getApiBaseUrl}
-								getAppHeader={getAppHeader}
-								user={user}
-								getToken={getToken}
-								evaluationConfig={evaluationConfig}
-								ajaxOptions={ajaxOptions}
-							></Group>
-						) : // repeatable group
-						isGroupInput(groups[key], true, data) ? (
-							<RepeatableGroup
-								app={app}
-								key={key}
-								t={t}
-								ajaxForms={ajaxForms}
-								changeAjaxForms={changeAjaxForms}
-								getApiBaseUrl={getApiBaseUrl}
-								getAppHeader={getAppHeader}
-								user={user}
-								getToken={getToken}
-								name={key}
-								config={groups[key]}
-								data={data}
-								allData={data}
-								linkingData={linkingData}
-								linkingForms={linkingForms}
-								ajaxOptions={ajaxOptions}
-							></RepeatableGroup>
-						) : // single inputs grouped
-						singleGroupsKeys.includes(key) ? (
-							(() => {
-								if (!addedContent.includes(key)) {
-									const currentGroup = Object.keys(groupSingle(groups)).find(
-										(k) => Object.keys(groupSingle(groups)[k]).includes(key),
-									);
-									addedContent.push(
-										...Object.keys(groupSingle(groups)[currentGroup]),
-									);
-									const config = groupSingle(groups)[currentGroup];
-									if (
-										groups[key].viewShowIf ||
-										groups[key]?.meta?.excludeFromView
-									) {
-										if (!showHideInput(groups[key], data)) {
-											return null;
-										}
-									}
+    return Object.keys(groupped).map((key) => {
+      const groups = groupped[key];
 
-									return (
-										<div
-											className="group"
-											id={currentGroup}
-											key={`${currentGroup}-${Date.now()}`}
-										>
-											{groupConfig[currentGroup] ? (
-												<div className="title">
-													<h1>{groupConfig[currentGroup][language]}</h1>
-												</div>
-											) : null}
-											<Input
-												app={app}
-												t={t}
-												ajaxForms={ajaxForms}
-												changeAjaxForms={changeAjaxForms}
-												getApiBaseUrl={getApiBaseUrl}
-												getAppHeader={getAppHeader}
-												user={user}
-												getToken={getToken}
-												versionsDatapoints={versionsDatapoints}
-												key={key}
-												name={config.dataId || key}
-												config={config}
-												data={data}
-												allData={data}
-												linkingData={linkingData}
-												className={
-													isEven
-														? ind === _length - 1 || ind === _length - 2
-															? "last"
-															: undefined
-														: ind === _length - 1
-														? "last"
-														: undefined
-												}
-												linkingForms={linkingForms}
-												ajaxOptions={ajaxOptions}
-												evaluationConfig={evaluationConfig}
-												cols={2}
-											></Input>
-										</div>
-									);
-								}
-							})()
-						) : // display group
-						isDisplayGroup(groups[key]) ? (
-							<div className="group display" key={key}>
-								<div className="title">
-									<h1>{groups[key].label}</h1>
-								</div>
-								{typeRender(
-									getDisplayGroupConfig(groups, key),
-									singleGroupsKeys,
-									addedContent,
-								)}
-							</div>
-						) : // single modal
-						isSingleModal(groups[key]) ? (
-							<div className="group" key={key}>
-								<div className="title">
-									<h1>
-										{groups[key].outputLabel ||
-											getInputLabel(groups[key], data)}
-									</h1>
-								</div>
-								<Input
-									app={app}
-									t={t}
-									key={key}
-									ajaxForms={ajaxForms}
-									changeAjaxForms={changeAjaxForms}
-									getApiBaseUrl={getApiBaseUrl}
-									getAppHeader={getAppHeader}
-									user={user}
-									getToken={getToken}
-									versionsDatapoints={versionsDatapoints}
-									parent={key}
-									name={groups[key].dataId || key}
-									config={groups[key]}
-									className="last"
-									data={data}
-									allData={data}
-									linkingData={linkingData}
-									linkingForms={linkingForms}
-									ajaxOptions={ajaxOptions}
-									evaluationConfig={evaluationConfig}
-									cols={2}
-								></Input>
-							</div>
-						) : null;
-					})}
-				</React.Fragment>
-			);
-		});
-	};
+      return (
+        <React.Fragment key={key}>
+          {repeatObjects(groups, (key, ind) => {
+            // normal group
+            return hasComponent(groups[key]) ? getComponent(groups[key].component, key, groups[key]) : isGroupInput(groups[key], false, data)
+              ? (
+                <Group
+                  t={t}
+                  key={key}
+                  name={key}
+                  linkingData={linkingData}
+                  config={groups[key]}
+                  data={data}
+                  allData={data}
+                  linkingForms={linkingForms}
+                  cols={2}
+                  ajaxForms={ajaxForms}
+                  changeAjaxForms={changeAjaxForms}
+                  getApiBaseUrl={getApiBaseUrl}
+                  getAppHeader={getAppHeader}
+                  user={user}
+                  getToken={getToken}
+                  evaluationConfig={evaluationConfig}
+                  ajaxOptions={ajaxOptions}
+                  >
+                </Group>
+              )
+              // repeatable group
+              : isGroupInput(groups[key], true, data)
+                ? <RepeatableGroup
+                  app={app}
+                  key={key}
+                  t={t}
+                  ajaxForms={ajaxForms}
+                  changeAjaxForms={changeAjaxForms}
+                  getApiBaseUrl={getApiBaseUrl}
+                  getAppHeader={getAppHeader}
+                  user={user}
+                  getToken={getToken}
+                  name={key}
+                  config={groups[key]}
+                  data={data}
+                  allData={data}
+                  linkingData={linkingData}
+                  linkingForms={linkingForms}
+                  ajaxOptions={ajaxOptions}
+                  >
+                </RepeatableGroup>
+                // single inputs grouped
+                : singleGroupsKeys.includes(key) ? (() => {
+                  if (!addedContent.includes(key)) {
+                    const currentGroup = Object.keys(groupSingle(groups))
+                      .find(k => Object.keys(groupSingle(groups)[k]).includes(key));
+                    addedContent.push(...Object.keys(groupSingle(groups)[currentGroup]));
+                    const config = groupSingle(groups)[currentGroup];
+                    if (groups[key].viewShowIf || groups[key]?.meta?.excludeFromView) {
+                      if (!showHideInput(groups[key], data)) {
+                        return null;
+                      }
+                    }
 
-	useEffect(() => {
-		setTimeout(() => {
-			const groups = Array.from(document.getElementsByClassName("group"));
-			const rows = Array.from(document.querySelectorAll(".repetable-row-extra"));
-			rows.forEach((row) => {
-				const inputs = Array.from(row.querySelectorAll(".input"));
-				const lasts = getLastRow(
-					inputs.map((i, ind) => ind),
-					4,
-				);
-				if (lasts) {
-					lasts.forEach((index) => inputs[index].classList.add("last"));
-				}
-			});
-			groups.forEach((group) => {
-				// const isRepeatable = Array.from(group.classList).includes('repeatable');
-				const inputs = Array.from(group.querySelectorAll(".input"));
-				// if (inputs.length && !isRepeatable) {
-				//   if (inputs.length % 2 === 0) {
-				//     inputs[inputs.length - 1].classList.add('last');
-				//     inputs[inputs.length - 2].classList.add('last');
-				//   } else {
-				//     inputs[inputs.length - 1].classList.add('last');
-				//   }
-				// }
-				// remove groups without inputs
-				if (!inputs.length) {
-					group.remove();
-				}
-			});
-		}, 200);
-	}, [form, data]);
+                    return <div className="group" id={currentGroup} key={`${currentGroup}-${Date.now()}`}>
+                      {groupConfig[currentGroup] ? <div className="title">
+                        <h1>{groupConfig[currentGroup][language]}</h1>
+                      </div> : null}
+                      <Input
+                        app={app}
+                        t={t}
+                        ajaxForms={ajaxForms}
+                        changeAjaxForms={changeAjaxForms}
+                        getApiBaseUrl={getApiBaseUrl}
+                        getAppHeader={getAppHeader}
+                        user={user}
+                        getToken={getToken}
+                        versionsDatapoints={versionsDatapoints}
+                        key={key}
+                        name={config.dataId || key}
+                        config={config}
+                        data={data}
+                        allData={data}
+                        linkingData={linkingData}
+                        className={
+                          isEven ? (
+                            (ind === _length - 1 || ind === _length - 2) ? 'last' : undefined
+                          ) : ind === _length - 1 ? 'last' : undefined}
+                        linkingForms={linkingForms}
+                        ajaxOptions={ajaxOptions}
+                        evaluationConfig={evaluationConfig}
+                        cols={2}
+                        >
+                      </Input>
+                    </div>
+                  }
+                })()
+                  // display group
+                  : isDisplayGroup(groups[key])
+                    ? (
+                      <div className="group display" key={key}>
+                        <div className="title">
+                          <h1>{groups[key].label}</h1>
+                        </div>
+                        {typeRender(getDisplayGroupConfig(groups, key), singleGroupsKeys, addedContent)}
+                      </div>
+                    )
+                    // single modal
+                    : isSingleModal(groups[key])
+                      ? (
+                        <div className="group" key={key}>
+                          <div className="title">
+                            <h1>{groups[key].outputLabel || getInputLabel(groups[key], data)}</h1>
+                          </div>
+                          <Input
+                            app={app}
+                            t={t}
+                            key={key}
+                            ajaxForms={ajaxForms}
+                            changeAjaxForms={changeAjaxForms}
+                            getApiBaseUrl={getApiBaseUrl}
+                            getAppHeader={getAppHeader}
+                            user={user}
+                            getToken={getToken}
+                            versionsDatapoints={versionsDatapoints}
+                            parent={key}
+                            name={groups[key].dataId || key}
+                            config={groups[key]}
+                            className="last"
+                            data={data}
+                            allData={data}
+                            linkingData={linkingData}
+                            linkingForms={linkingForms}
+                            ajaxOptions={ajaxOptions}
+                            evaluationConfig={evaluationConfig}
+                            cols={2}
+                            >
+                          </Input>
+                        </div>
+                      )
+                      : null;
+          })}
+        </React.Fragment>
+      )
+    })
+  }
 
-	const [extraRequestSent, setExtraRequestSent] = useState({});
-	const [extraRequestLoading, setExtraRequestLoading] = useState({});
-	const [extraRequestData, setExtraRequestData] = useState({});
-	const hasSubSections = false;
+  useEffect(() => {
+    setTimeout(() => {
+      const groups = Array.from(document.getElementsByClassName('group'));
+      const rows = Array.from(document.querySelectorAll('.repetable-row-extra'));
+      rows.forEach(row => {
+        const inputs = Array.from(row.querySelectorAll('.input'));
+        const lasts = getLastRow(inputs.map((i, ind) => ind), 4);
+        if (lasts) {
+          lasts.forEach(index => inputs[index].classList.add('last'));
+        }
+      });
+      groups.forEach(group => {
+        // const isRepeatable = Array.from(group.classList).includes('repeatable');
+        const inputs = Array.from(group.querySelectorAll('.input'));
+        // if (inputs.length && !isRepeatable) {
+        //   if (inputs.length % 2 === 0) {
+        //     inputs[inputs.length - 1].classList.add('last');
+        //     inputs[inputs.length - 2].classList.add('last');
+        //   } else {
+        //     inputs[inputs.length - 1].classList.add('last');
+        //   }
+        // }
+        // remove groups without inputs
+        if (!inputs.length) {
+          group.remove();
+        }
+      });
+    }, 200)
+  }, [form, data])
 
-	const renderContent = (f, showTitle = true) => {
-		if (f) {
-			const alertType = ["error", "warning", "info", "success"];
-			if (f.alertConf && f.alertConf.type === "warning") {
-				return <Alert message={f.alertConf.text} type={f.alertConf.type} showIcon />;
-			}
-			let { label, icon, position, ...groups } = f;
-			groups = Object.keys(groups).reduce((items, key) => {
-				if (!groups[key]?.meta?.excludeFromView) {
-					items[key] = groups[key];
-				}
-				return items;
-			}, {});
-			const addedContent = [];
-			const singleGroupsKeys = [].concat(
-				...Object.keys(groupSingle(groups)).map((key) =>
-					Object.keys(groupSingle(groups)[key]),
-				),
-			);
+  const [extraRequestSent, setExtraRequestSent] = useState({});
+  const [extraRequestLoading, setExtraRequestLoading] = useState({});
+  const [extraRequestData, setExtraRequestData] = useState({});
+  const hasSubSections = false;
 
-			return (
-				<>
-					<div className="wrapper" key={Date.now()} style={{ width: fullWidth ? "100%" : 700 }}>
-						{f.alertConf ? (
-							<Alert
-								className="w-100"
-								style={{ marginBottom: "20px" }}
-								message={f.alertConf.text}
-								type={
-									alertType.includes(f.alertConf.type) ? f.alertConf.type : "info"
-								}
-								showIcon
-							/>
-						) : null}
-						{typeRender(groups, singleGroupsKeys, addedContent)}
-					</div>
-				</>
-			);
-		}
-	};
+  const renderContent = (f, showTitle = true) => {
+    if (f) {
+      const alertType = ['error', 'warning', 'info', 'success'];
+      if (f.alertConf && f.alertConf.type === 'warning') {
+        return <Alert message={f.alertConf.text} type={f.alertConf.type} showIcon />
+      }
+      let { label, icon, position, ...groups } = f;
+      groups = Object.keys(groups).reduce((items, key) => {
+        if (!groups[key]?.meta?.excludeFromView) {
+          items[key] = groups[key];
+        }
+        return items;
+      }, {});
+      const addedContent = [];
+      const singleGroupsKeys = [].concat(...Object.keys(groupSingle(groups))
+        .map(key => Object.keys(groupSingle(groups)[key])));
 
-	let groupSections = [];
-	if (hasSubSections) {
-		groupSections = groupSubsections(form);
-	}
+      return <>
+        <div className="wrapper" key={Date.now()} style={{ width: 700 }}>
+          {f.alertConf ? <Alert className="w-100" style={{ marginBottom: '20px' }} message={f.alertConf.text} type={
+            alertType.includes(f.alertConf.type) ? f.alertConf.type : 'info'
+          } showIcon /> : null}
+          {typeRender(groups, singleGroupsKeys, addedContent)}
+        </div>
+      </>
+    }
+  }
 
-	return (
-		<div className="content" style={style}>
-			{!hasSubSections ? (
-				renderContent(form)
-			) : (
-				<React.Fragment>
-					<h1 className="title">{form ? getInputLabel(form, data) : ""}</h1>
-					<Tabs
-						className="section-tabs"
-						items={repeatObjects(groupSections, (key) => {
-							const section = groupSections[key];
+  let groupSections = [];
+  if (hasSubSections) {
+    groupSections = groupSubsections(form);
+  }
 
-							return {
-								style: { maxHeight: "calc(100vh - 100px)", overflowY: "auto" },
-								label: (
-									<span>
-										{section.icon ? <GetIcon icon={section.icon} /> : null}{" "}
-										{getInputLabel(section, data)}
-									</span>
-								),
-								key: key,
-								tabKey: key,
-								children: renderContent(groupSections[key], false),
-							};
-						})}
-					/>
-				</React.Fragment>
-			)}
-		</div>
-	);
-};
+  return (
+    <div className="content" style={style}>
+      {!hasSubSections ? renderContent(form) : (
+        <React.Fragment>
+          <h1 className="title">{form ? getInputLabel(form, data) : ''}</h1>
+          <Tabs
+            className="section-tabs"
+            items={repeatObjects(groupSections, (key) => {
+              const section = groupSections[key];
+
+              return {
+                style: { maxHeight: 'calc(100vh - 100px)', overflowY: 'auto' },
+                label: (
+                  <span>
+                    {section.icon ?
+                      <GetIcon icon={section.icon} /> : null} {getInputLabel(section, data)}
+                  </span>
+                ),
+                key: key,
+                tabKey: key,
+                children: renderContent(groupSections[key], false),
+              };
+            })}
+          />
+        </React.Fragment>
+      )}
+    </div>
+  );
+}
 
 export default Content;