@truedat/df 4.33.10 → 4.34.0

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 # Changelog
 
-## [Unreleased]
+## [4.34.0] 2021-12-02
+
+### Added
+
+- [TD-4295] Added new `DynamicFormViewer` compact layout
+
+## [4.33.9] 2021-11-29
+
+### Added
 
 - [TD-4306] New template scope for Quality Executions (`qe`)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "4.33.10",
+  "version": "4.34.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -30,7 +30,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.33.10",
+    "@truedat/test": "4.34.0",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -80,8 +80,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.33.10",
-    "@truedat/core": "4.33.10",
+    "@truedat/auth": "4.34.0",
+    "@truedat/core": "4.34.0",
     "axios": "^0.19.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
@@ -100,5 +100,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "b316406207a0b4621b8fffb33e6348712416b0c2"
+  "gitHead": "b1fe4f405c612bd342510cf34e8e9d89de0280fb"
 }

package/src/components/DynamicFormViewer.js

@@ -5,7 +5,7 @@ import { FormattedMessage } from "react-intl";
 import { Message } from "semantic-ui-react";
 import FieldGroupDetail from "./FieldGroupDetail";
 
-const hasDependentKeys = field =>
+const hasDependentKeys = (field) =>
   !_.isNil(_.path("depends.to_be")(field)) &&
   !_.isNil(_.path("depends.on")(field));
 
@@ -13,11 +13,11 @@ const checkDependency = (field, content) => {
   const on = _.prop(_.path("depends.on")(field))(content);
   const to_be = _.path("depends.to_be")(field);
   return _.isArray(on)
-    ? _.some(d => to_be.includes(d))(on)
+    ? _.some((d) => to_be.includes(d))(on)
     : to_be.includes(on);
 };
 
-export const DynamicFormViewer = ({ template, content }) => {
+export const DynamicFormViewer = ({ template, content, boxLayout }) => {
   if (!template)
     return (
       <Message negative>
@@ -28,16 +28,16 @@ export const DynamicFormViewer = ({ template, content }) => {
     );
 
   const parsedGroups = _.flow(
-    _.map(group => {
+    _.map((group) => {
       const fields = _.flow(
         _.filter(
-          field =>
+          (field) =>
             (!("depends" in field) ||
               (hasDependentKeys(field) && checkDependency(field, content))) &&
             (!(field.values && "switch" in field.values) ||
               content[field.values.switch.on] in field.values.switch.values)
         ),
-        _.map(field => ({ ...field, value: content[field.name] }))
+        _.map((field) => ({ ...field, value: content[field.name] }))
       )(group.fields);
       return { ...group, fields };
     }),
@@ -47,7 +47,12 @@ export const DynamicFormViewer = ({ template, content }) => {
   return (
     <>
       {parsedGroups.map(({ name, fields }, i) => (
-        <FieldGroupDetail key={i} name={name} fields={fields} />
+        <FieldGroupDetail
+          key={i}
+          name={name}
+          fields={fields}
+          boxLayout={boxLayout}
+        />
       ))}
     </>
   );
@@ -55,7 +60,8 @@ export const DynamicFormViewer = ({ template, content }) => {
 
 DynamicFormViewer.propTypes = {
   template: PropTypes.object,
-  content: PropTypes.object
+  content: PropTypes.object,
+  boxLayout: PropTypes.bool,
 };
 
 export default DynamicFormViewer;

package/src/components/FieldGroupDetail.js

@@ -1,7 +1,15 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Divider, Icon, Label, List, Button, Table } from "semantic-ui-react";
+import {
+  Divider,
+  Icon,
+  Label,
+  List,
+  Button,
+  Table,
+  Segment,
+} from "semantic-ui-react";
 import DomainPreview from "./widgets/DomainPreview";
 import FieldGroupCopy from "./FieldGroupCopy";
 import ImagePreview from "./widgets/ImagePreview";
@@ -69,13 +77,13 @@ ValueRenderByType.propTypes = {
   value: PropTypes.any,
   type: PropTypes.string,
   values: PropTypes.any,
-  multiple: PropTypes.bool
+  multiple: PropTypes.bool,
 };
 
-const parseField = field => {
+const parseField = (field) => {
   const { value, values } = field;
   if (_.has("fixed_tuple")(values)) {
-    const translateValue = value =>
+    const translateValue = (value) =>
       _.flow(
         _.prop("fixed_tuple"),
         _.find({ value }),
@@ -86,7 +94,7 @@ const parseField = field => {
       ...field,
       value: _.isArray(value)
         ? _.map(translateValue)(value)
-        : translateValue(value)
+        : translateValue(value),
     };
   } else {
     return field;
@@ -131,27 +139,40 @@ DynamicFieldValue.propTypes = {
   value: PropTypes.any,
   type: PropTypes.string,
   values: PropTypes.any,
-  widget: PropTypes.string
+  widget: PropTypes.string,
 };
 
-export const FieldGroupDetail = ({ name, fields }) => (
-  <>
-    {name && name !== "undefined" && (
-      <Divider horizontal>
-        <h3>{name}</h3>
-      </Divider>
-    )}
-    <List size="big" relaxed="very">
-      {fields.map(parseField).map((f, i) => (
-        <DynamicFieldValue key={i} {...f} />
-      ))}
-    </List>
-  </>
-);
+export const FieldGroupDetail = ({ name, fields, boxLayout }) =>
+  boxLayout ? (
+    <>
+      <Segment>
+        {name && name !== "undefined" && <h4>{name}</h4>}
+        <List>
+          {fields.map(parseField).map((f, i) => (
+            <DynamicFieldValue key={i} {...f} />
+          ))}
+        </List>
+      </Segment>
+    </>
+  ) : (
+    <>
+      {name && name !== "undefined" && (
+        <Divider horizontal>
+          <h3>{name}</h3>
+        </Divider>
+      )}
+      <List size="big" relaxed="very">
+        {fields.map(parseField).map((f, i) => (
+          <DynamicFieldValue key={i} {...f} />
+        ))}
+      </List>
+    </>
+  );
 
 FieldGroupDetail.propTypes = {
   name: PropTypes.string,
-  fields: PropTypes.array
+  fields: PropTypes.array,
+  boxLayout: PropTypes.bool,
 };
 
 export default FieldGroupDetail;