@truedat/dq 4.28.5 → 4.29.0

package/src/components/ruleImplementationForm/FiltersFormGroup.js

@@ -1,10 +1,12 @@
 import _ from "lodash/fp";
 import React from "react";
-import { Form } from "semantic-ui-react";
+import { Form, Dropdown } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { getStructureFields } from "../../selectors/getStructureFields";
 import FiltersField from "./FiltersField";
+import FieldModifier from "./FieldModifier";
+import operatorFunctions from "./operators";
 
 const OptionGroup = React.lazy(() =>
   import("@truedat/core/components/OptionGroup")
@@ -20,47 +22,102 @@ const ValueConditionStructure = React.lazy(() =>
 
 export const FiltersFormGroup = ({
   clause = {},
-  getOperators,
-  getOperatorValue,
   index,
   onOperatorChange,
   onStructureChange,
   onValueChange,
+  onModifierChange,
   parentStructures,
   siblings,
   scope,
+  operators,
 }) => {
   const { formatMessage } = useIntl();
-  const fieldType = clause?.structure?.field_type;
+  const structureFieldType = clause?.structure?.field_type;
+  const modifiers = _.path(`${structureFieldType}.modifiers`)(operators);
+  const modifierValue = clause?.modifier;
+  const modifier = _.find({ name: modifierValue?.name })(modifiers);
+
+  const fieldType = modifier?.cast_as || structureFieldType;
   const nestedCondition = !_.isEmpty(siblings);
-  const operators = getOperators(fieldType, scope, nestedCondition);
   const structureFields = getStructureFields(parentStructures);
+
+  const { operatorsOptions, getOperatorValue, typeCastModifiers } =
+    operatorFunctions(
+      operators,
+      fieldType,
+      nestedCondition,
+      scope,
+      formatMessage
+    );
+
   return (
     <Form.Group className={"force-margin-bottom"}>
-      <Form.Field width={4}>
-        {nestedCondition ? (
-          <ValueConditionStructure
-            siblings={siblings}
-            value={clause?.structure?.id}
-            onChange={(value) => onStructureChange(index, value)}
-          />
-        ) : (
-          <StructureFieldsDropdown
-            label={formatMessage({ id: "filtersGrid.field.label" })}
-            inline={false}
-            parentStructures={parentStructures}
-            structureFields={structureFields}
-            onSelectField={(value) => onStructureChange(index, value)}
-            value={clause?.structure?.id}
+      <div>
+        <div className={"flex-row-align-end"}>
+          <Form.Field>
+            {nestedCondition ? (
+              <ValueConditionStructure
+                siblings={siblings}
+                value={clause?.structure?.id}
+                onChange={(value) => onStructureChange(index, value)}
+              />
+            ) : (
+              <StructureFieldsDropdown
+                label={formatMessage({ id: "filtersGrid.field.label" })}
+                inline={false}
+                parentStructures={parentStructures}
+                structureFields={structureFields}
+                onSelectField={(value) => onStructureChange(index, value)}
+                value={clause?.structure?.id}
+              />
+            )}
+          </Form.Field>
+          {clause?.structure && !_.isEmpty(modifiers) && (
+            <Dropdown
+              className={"icon-dropdown-margin"}
+              size="mini"
+              icon="ellipsis vertical"
+            >
+              <Dropdown.Menu>
+                {modifiers.map((modifier, key) => (
+                  <Dropdown.Item
+                    key={key}
+                    icon={
+                      modifier.cast_as
+                        ? formatMessage({
+                            id: `field_type.icon.${modifier.cast_as}`,
+                            defaultMessage: "hashtag",
+                          })
+                        : null
+                    }
+                    text={formatMessage({
+                      id: `filtersGrid.field.modifier.${modifier.name}`,
+                    })}
+                    onClick={() =>
+                      onModifierChange(index, { name: modifier.name })
+                    }
+                  />
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
+          )}
+        </div>
+        {modifier && (
+          <FieldModifier
+            modifier={modifier}
+            value={modifierValue}
+            onChange={(value) => onModifierChange(index, value)}
+            removable
           />
         )}
-      </Form.Field>
+      </div>
       <Form.Field>
         <OptionGroup
           label={formatMessage({
             id: "filtersGrid.field.operator",
           })}
-          options={operators}
+          options={operatorsOptions}
           value={getOperatorValue(clause)}
           onClick={({ id }) => onOperatorChange(index, id)}
           placeholder={formatMessage({
@@ -77,12 +134,14 @@ export const FiltersFormGroup = ({
             <FiltersField
               parentStructures={parentStructures}
               fieldType={fieldType}
+              typeCastModifiers={typeCastModifiers}
               operator={clause?.operator}
               value={_.nth(nth_value)(clause?.value)}
+              modifier={_.nth(nth_value)(clause?.value_modifier)}
               label={formatMessage({ id: "filtersGrid.field.value" })}
-              onChange={(e, value) => {
-                onValueChange(index, value, nth_value);
-              }}
+              onChange={(_e, value, modifier) =>
+                onValueChange(index, value, modifier, nth_value)
+              }
             />
           </Form.Field>
         ))}
@@ -92,15 +151,15 @@ export const FiltersFormGroup = ({
 
 FiltersFormGroup.propTypes = {
   clause: PropTypes.object,
-  getOperators: PropTypes.func,
-  getOperatorValue: PropTypes.func,
   index: PropTypes.number,
   onOperatorChange: PropTypes.func,
   onStructureChange: PropTypes.func,
   onValueChange: PropTypes.func,
+  onModifierChange: PropTypes.func,
   parentStructures: PropTypes.array,
   siblings: PropTypes.array,
   scope: PropTypes.string,
+  operators: PropTypes.array,
 };
 
 export default FiltersFormGroup;

package/src/components/ruleImplementationForm/FiltersGrid.js

@@ -1,7 +1,6 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { useIntl } from "react-intl";
 import { Button, Grid } from "semantic-ui-react";
 import FiltersGroup from "./FiltersGroup";
 
@@ -13,7 +12,6 @@ export const FiltersGrid = ({
   scope,
 }) => {
   const [activeConditionIndex, setActiveConditionIndex] = useState();
-  const { formatMessage } = useIntl();
   const parentStructures = _.map("structure")(structures);
   const allOperators = _.flow(
     _.values,
@@ -21,80 +19,6 @@ export const FiltersGrid = ({
     _.flatten
   )(typeOperators);
 
-  const inScope = (operator, scope) => {
-    const op_scope = _.prop("scope")(operator);
-    return (
-      _.isNull(op_scope) || _.isEmpty(op_scope) || _.isEqual(scope)(op_scope)
-    );
-  };
-
-  const getOptions = (field_type, operators) =>
-    _.flow(
-      _.groupBy("group"),
-      _.reduce.convert({ cap: false })(
-        (acc, v, k) =>
-          _.isNil(k) || k === "undefined" || _.size(v) <= 1
-            ? [...acc, ...v]
-            : [...acc, { label: k, options: v }],
-        []
-      ),
-      _.sortBy(["label"]),
-      _.map((o) => operatorOptions(field_type, o))
-    )(operators);
-
-  const operatorOptions = (field_type, operator) =>
-    _.has("options")(operator)
-      ? {
-          icon: "random",
-          label: formatMessage({
-            id: `ruleImplementation.operator.group.${operator.label}`,
-          }),
-          options: _.map((o) => toOperatorOption(field_type, o))(
-            operator.options
-          ),
-        }
-      : toOperatorOption(field_type, operator);
-
-  const toOperatorOption = (field_type, operator) => ({
-    text: formatMessage({
-      id: withValueType(
-        `ruleImplementation.operator.${operator.name}`,
-        operator.value_type
-      ),
-    }),
-    id: operator.id,
-    value: withValueType(`${field_type}.${operator.name}`, operator.value_type),
-  });
-
-  const getOperatorValue = (row) =>
-    _.has("operator")(row) && !_.isEmpty(row.operator)
-      ? withValueType(
-          `${_.path("structure.field_type")(row)}.${_.path("operator.name")(
-            row
-          )}`,
-          _.path("operator.value_type")(row)
-        )
-      : null;
-
-  const withValueType = (value, valueType) =>
-    valueType ? `${value}.${valueType}` : value;
-
-  const filterFieldType = (operators, nested) =>
-    nested ? _.filter((o) => o?.value_type !== "field")(operators) : operators;
-
-  const getOperators = (type, scope, nested) =>
-    !type
-      ? []
-      : _.flow(
-          _.pick([type, "any"]),
-          _.values,
-          _.map(_.prop("operators")),
-          _.flatten,
-          _.filter((operator) => inScope(operator, scope)),
-          (operators) => filterFieldType(operators, nested),
-          (operators) => getOptions(type, operators)
-        )(typeOperators);
-
   const onStructureChange = (index, value) => {
     const structure = {
       ..._.pick(["field_type", "name"])(value),
@@ -102,14 +26,36 @@ export const FiltersGrid = ({
     };
     setRowValue({
       index,
-      value: { structure: structure, operator: {}, value: {} },
+      value: {
+        structure,
+        modifier: null,
+        operator: {},
+        value: null,
+        value_modifier: null,
+      },
+    });
+  };
+
+  const onModifierChange = (index, modifier) => {
+    const rowValue = _.nth(index)(rows);
+
+    setRowValue({
+      index,
+      value: {
+        ...rowValue,
+        modifier,
+        operator: {},
+        value: null,
+        value_modifier: null,
+        population: null,
+      },
     });
   };
 
   const composeValue = (value_type, value) => {
     if (value_type == "field") {
       return {
-        id: value.data_structure_id,
+        id: value.data_structure_id || value.id,
         name: value.name,
         path: value.path,
       };
@@ -118,12 +64,15 @@ export const FiltersGrid = ({
     }
   };
 
-  const onValueChange = (rowIndex, value, valueIndex) => {
+  const onValueChange = (rowIndex, value, modifier = null, valueIndex) => {
     const rowValue = _.nth(rowIndex)(rows);
     const value_type = _.path("operator.value_type")(rowValue);
 
     const firstValue = _.nth(0)(_.path("value")(rowValue));
     const secondValue = _.nth(1)(_.path("value")(rowValue));
+    const firstModifier = _.nth(0)(_.path("value_modifier")(rowValue));
+    const secondModifier = _.nth(1)(_.path("value_modifier")(rowValue));
+
     const arity = _.path("operator.arity")(rowValue)
       ? _.path("operator.arity")(rowValue)
       : 1;
@@ -132,11 +81,15 @@ export const FiltersGrid = ({
         ? [composeValue(value_type, value), secondValue]
         : [firstValue, composeValue(value_type, value)];
 
+    const updatedValueModifier =
+      valueIndex == 0 ? [modifier, secondModifier] : [firstModifier, modifier];
+
     setRowValue({
       index: rowIndex,
       value: {
         ...rowValue,
         value: _.take(arity)(updatedValue),
+        value_modifier: _.take(arity)(updatedValueModifier),
         population: null,
       },
     });
@@ -179,18 +132,18 @@ export const FiltersGrid = ({
         <FiltersGroup
           activeConditionIndex={activeConditionIndex}
           allOperators={allOperators}
+          operators={typeOperators}
           composeValue={composeValue}
           onConditionChange={onConditionChange}
           onOperatorChange={onOperatorChange}
           onStructureChange={onStructureChange}
           onValueChange={onValueChange}
+          onModifierChange={onModifierChange}
           parentStructures={parentStructures}
-          getOperators={getOperators}
-          getOperatorValue={getOperatorValue}
           rows={rows}
-          scope={scope}
           setActiveConditionIndex={setActiveConditionIndex}
           setRowValue={setRowValue}
+          scope={scope}
         />
       </Grid>
       <Button onClick={onRowAddition} icon="plus circle" />

package/src/components/ruleImplementationForm/FiltersGroup.js

@@ -9,15 +9,15 @@ import FiltersFormGroup from "./FiltersFormGroup";
 const Filter = ({
   activeConditionIndex,
   allOperators,
+  operators,
   composeValue,
   clause,
-  getOperators,
-  getOperatorValue,
   index,
   onConditionChange,
   onOperatorChange,
   onStructureChange,
   onValueChange,
+  onModifierChange,
   parentStructures,
   setActiveConditionIndex,
   setRowValue,
@@ -54,14 +54,14 @@ const Filter = ({
         <Grid.Column width={14}>
           <FiltersFormGroup
             clause={clause}
-            getOperators={getOperators}
-            getOperatorValue={getOperatorValue}
             index={index}
             onOperatorChange={onOperatorChange}
             onStructureChange={onStructureChange}
             onValueChange={onValueChange}
+            onModifierChange={onModifierChange}
             parentStructures={parentStructures}
             scope={scope}
+            operators={operators}
           />
         </Grid.Column>
         <Grid.Column width={2} floated={"right"}>
@@ -106,9 +106,8 @@ const Filter = ({
             <Grid verticalAlign="middle">
               <ValueConditions
                 allOperators={allOperators}
+                operators={operators}
                 composeValue={composeValue}
-                getOperators={getOperators}
-                getOperatorValue={getOperatorValue}
                 population={clause?.population || [{}]}
                 onChange={onValueConditionChange}
                 parentStructures={parentStructures}
@@ -126,31 +125,31 @@ const Filter = ({
 Filter.propTypes = {
   activeConditionIndex: PropTypes.number,
   allOperators: PropTypes.array,
+  operators: PropTypes.array,
   clause: PropTypes.object,
   composeValue: PropTypes.func,
   onConditionChange: PropTypes.func,
   onOperatorChange: PropTypes.func,
   onStructureChange: PropTypes.func,
   onValueChange: PropTypes.func,
+  onModifierChange: PropTypes.func,
   parentStructures: PropTypes.array,
   setActiveConditionIndex: PropTypes.func,
-  getOperators: PropTypes.func,
-  getOperatorValue: PropTypes.func,
   index: PropTypes.number,
-  scope: PropTypes.func,
   setRowValue: PropTypes.func,
+  scope: PropTypes.string,
 };
 
 export const FiltersGroup = ({
   activeConditionIndex,
   allOperators,
+  operators,
   composeValue,
-  getOperators,
-  getOperatorValue,
   onConditionChange,
   onOperatorChange,
   onStructureChange,
   onValueChange,
+  onModifierChange,
   parentStructures,
   rows = [],
   setActiveConditionIndex,
@@ -162,15 +161,15 @@ export const FiltersGroup = ({
       key={index}
       activeConditionIndex={activeConditionIndex}
       allOperators={allOperators}
+      operators={operators}
       composeValue={composeValue}
       clause={clause}
-      getOperators={getOperators}
-      getOperatorValue={getOperatorValue}
       index={index}
       onConditionChange={onConditionChange}
       onOperatorChange={onOperatorChange}
       onStructureChange={onStructureChange}
       onValueChange={onValueChange}
+      onModifierChange={onModifierChange}
       parentStructures={parentStructures}
       setActiveConditionIndex={setActiveConditionIndex}
       setRowValue={setRowValue}
@@ -182,19 +181,19 @@ export const FiltersGroup = ({
 FiltersGroup.propTypes = {
   activeConditionIndex: PropTypes.number,
   allOperators: PropTypes.array,
+  operators: PropTypes.array,
   composeValue: PropTypes.func,
   onConditionChange: PropTypes.func,
   onOperatorChange: PropTypes.func,
   onStructureChange: PropTypes.func,
   onValueChange: PropTypes.func,
+  onModifierChange: PropTypes.func,
   rows: PropTypes.array,
   parentStructures: PropTypes.array,
   setActiveConditionIndex: PropTypes.func,
   siblingId: PropTypes.number,
-  getOperators: PropTypes.func,
-  getOperatorValue: PropTypes.func,
-  scope: PropTypes.func,
   setRowValue: PropTypes.func,
+  scope: PropTypes.string,
 };
 
 export default FiltersGroup;

package/src/components/ruleImplementationForm/PopulationForm.js

@@ -6,21 +6,18 @@ import { Grid, Icon, Segment } from "semantic-ui-react";
 import { dropAt, replaceAt } from "@truedat/core/services/arrays";
 import { FiltersGrid } from "./FiltersGrid";
 
-const PopulationTypeForm = ({ onSelect, selectAll }) => (
+const PopulationTypeForm = ({ createFilter }) => (
   <Grid columns={2} textAlign="center">
     <Grid.Column>
-      <Segment
-        className={`population ${selectAll ? "active" : ""}`}
-        onClick={() => onSelect(true)}
-      >
+      <Segment className={`population active`}>
         <FormattedMessage id="populationForm.selectAll.text" />
-        {selectAll && <Icon circular name="check" color="green" />}
+        <Icon circular name="check" color="green" />
       </Segment>
     </Grid.Column>
     <Grid.Column>
       <Segment
-        className={`population selectable ${!selectAll ? "active" : ""}`}
-        onClick={() => onSelect(false)}
+        className={`population selectable`}
+        onClick={() => createFilter()}
       >
         <Icon name="plus circle" />
         <FormattedMessage id="populationForm.createFilters.text" />
@@ -30,81 +27,39 @@ const PopulationTypeForm = ({ onSelect, selectAll }) => (
 );
 
 PopulationTypeForm.propTypes = {
-  onSelect: PropTypes.func,
-  selectAll: PropTypes.bool,
+  createFilter: PropTypes.func,
 };
 
-export class PopulationForm extends React.Component {
-  static propTypes = {
-    typeOperators: PropTypes.array,
-    population: PropTypes.array,
-    structures: PropTypes.array,
-    setPopulation: PropTypes.func,
-  };
-
-  state = {
-    selectAll: null,
-  };
-
-  componentDidMount() {
-    this.setSelectAll(this.isEmptyPopulation());
-  }
-
-  componentDidUpdate(prevProps) {
-    const { population } = this.props;
-
-    if (prevProps.population != population) {
-      this.setSelectAll(this.isEmptyPopulation());
-    }
-  }
-
-  isEmptyPopulation() {
-    const { population } = this.props;
-    return (
-      _.isEmpty(population) ||
-      (population.length == 1 && _.isEmpty(_.nth(0)(population)))
-    );
-  }
-
-  setSelectAll = (selectAll) => {
-    this.setState({
-      selectAll: selectAll,
-    });
-  };
-
-  setPopulationField = ({ index, value }) => {
-    const { setPopulation, population } = this.props;
+export default function PopulationForm({
+  typeOperators,
+  population,
+  structures,
+  setPopulation,
+}) {
+  const setPopulationField = ({ index, value }) => {
     if (_.isNil(index)) {
-      setPopulation(_.isEmpty(population) ? [{}] : [...population, {}]);
+      setPopulation(_.isEmpty(population) ? [] : [...population, {}]);
     } else if (value) {
       const mergedValue = { ..._.nth(index)(population), ...value };
       setPopulation(replaceAt(index, mergedValue)(population));
     } else setPopulation(dropAt(index)(population));
   };
 
-  render() {
-    const { population, structures, typeOperators } = this.props;
-    const { selectAll } = this.state;
-
-    if (_.isNull(selectAll) || selectAll) {
-      return (
-        <PopulationTypeForm
-          onSelect={this.setSelectAll}
-          selectAll={selectAll}
-        />
-      );
-    } else {
-      return (
-        <FiltersGrid
-          rows={population}
-          setRowValue={this.setPopulationField}
-          structures={structures}
-          typeOperators={typeOperators}
-          scope="population"
-        />
-      );
-    }
-  }
+  return _.isEmpty(population) ? (
+    <PopulationTypeForm createFilter={() => setPopulation([{}])} />
+  ) : (
+    <FiltersGrid
+      rows={population}
+      setRowValue={setPopulationField}
+      structures={structures}
+      typeOperators={typeOperators}
+      scope="population"
+    />
+  );
 }
-
-export default PopulationForm;
+PopulationForm.propTypes = {
+  typeOperators: PropTypes.array,
+  population: PropTypes.array,
+  structures: PropTypes.array,
+  setPopulation: PropTypes.func,
+};

package/src/components/ruleImplementationForm/RuleImplementationForm.js

@@ -29,12 +29,9 @@ RuleImplementationStep.propTypes = {
 
 export const RuleImplementationForm = ({
   ruleImplementation,
-  structures,
   setStructures,
-  population,
   setPopulation,
   setImplementationKey,
-  validations,
   setValidations,
   isSubmitting,
   handleSubmit,
@@ -54,6 +51,12 @@ export const RuleImplementationForm = ({
   const [activeStep, setActiveStep] = useState("information");
   const [selector, setSelector] = useState();
 
+  const {
+    dataset: structures,
+    population,
+    validations,
+  } = ruleImplementation || {};
+
   const validPopulation = () =>
     _.every(_.isEmpty)(population) || populationComplete();
 
@@ -278,12 +281,9 @@ RuleImplementationForm.propTypes = {
   ruleImplementation: PropTypes.object,
   handleSubmit: PropTypes.func.isRequired,
   isSubmitting: PropTypes.bool.isRequired,
-  structures: PropTypes.array,
   setStructures: PropTypes.func,
-  population: PropTypes.array,
   setPopulation: PropTypes.func,
   setImplementationKey: PropTypes.func,
-  validations: PropTypes.array,
   setValidations: PropTypes.func,
   operators: PropTypes.object,
   onChange: PropTypes.func,