@truedat/qx 7.13.6 → 7.13.8

package/src/components/dataViews/queryableProperties/__tests__/__snapshots__/SelectField.spec.js.snap

@@ -98,38 +98,42 @@ exports[`<SelectField /> matches the latest snapshot for group_by 1`] = `
                         class="dropdown icon"
                       />
                       <div
-                        aria-expanded="false"
-                        class="ui fluid search selection dropdown"
-                        role="combobox"
+                        class="sixteen wide field"
                       >
-                        <input
-                          aria-autocomplete="list"
-                          autocomplete="off"
-                          class="search"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
                         <div
-                          aria-atomic="true"
-                          aria-live="polite"
-                          class="divider text"
-                          role="alert"
-                        >
-                          functions.form.expression.function.placeholder
-                        </div>
-                        <i
-                          aria-hidden="true"
-                          class="dropdown icon"
-                        />
-                        <div
-                          class="menu transition"
-                          role="listbox"
+                          aria-expanded="false"
+                          class="ui fluid search selection dropdown"
+                          role="combobox"
                         >
+                          <input
+                            aria-autocomplete="list"
+                            autocomplete="off"
+                            class="search"
+                            tabindex="0"
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            aria-atomic="true"
+                            aria-live="polite"
+                            class="divider text"
+                            role="alert"
+                          >
+                            functions.form.expression.function.placeholder
+                          </div>
+                          <i
+                            aria-hidden="true"
+                            class="dropdown icon"
+                          />
                           <div
-                            class="message"
+                            class="menu transition"
+                            role="listbox"
                           >
-                            No results found.
+                            <div
+                              class="message"
+                            >
+                              No results found.
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -268,38 +272,42 @@ exports[`<SelectField /> matches the latest snapshot for select 1`] = `
                         class="dropdown icon"
                       />
                       <div
-                        aria-expanded="false"
-                        class="ui fluid search selection dropdown"
-                        role="combobox"
+                        class="sixteen wide field"
                       >
-                        <input
-                          aria-autocomplete="list"
-                          autocomplete="off"
-                          class="search"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
                         <div
-                          aria-atomic="true"
-                          aria-live="polite"
-                          class="divider text"
-                          role="alert"
-                        >
-                          functions.form.expression.function.placeholder
-                        </div>
-                        <i
-                          aria-hidden="true"
-                          class="dropdown icon"
-                        />
-                        <div
-                          class="menu transition"
-                          role="listbox"
+                          aria-expanded="false"
+                          class="ui fluid search selection dropdown"
+                          role="combobox"
                         >
+                          <input
+                            aria-autocomplete="list"
+                            autocomplete="off"
+                            class="search"
+                            tabindex="0"
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            aria-atomic="true"
+                            aria-live="polite"
+                            class="divider text"
+                            role="alert"
+                          >
+                            functions.form.expression.function.placeholder
+                          </div>
+                          <i
+                            aria-hidden="true"
+                            class="dropdown icon"
+                          />
                           <div
-                            class="message"
+                            class="menu transition"
+                            role="listbox"
                           >
-                            No results found.
+                            <div
+                              class="message"
+                            >
+                              No results found.
+                            </div>
                           </div>
                         </div>
                       </div>

package/src/components/dataViews/queryableProperties/__tests__/__snapshots__/Where.spec.js.snap

@@ -11,11 +11,19 @@ exports[`<Where /> matches the latest snapshot 1`] = `
     <div
       class="ui horizontal divider"
     >
-      <button
-        class="ui mini button"
+      <div
+        class="ui medium basic buttons"
       >
-        expression.clause.action.addGroup
-      </button>
+        <button
+          class="ui button"
+        >
+          <i
+            aria-hidden="true"
+            class="plus icon"
+          />
+          expression.clause.action.addGroup
+        </button>
+      </div>
     </div>
   </div>
 </div>

package/src/components/dataViews/simpleForm/AggregationForm.js

@@ -0,0 +1,179 @@
+import _ from "lodash/fp";
+import { useEffect, useState } from "react";
+import { Accordion, Button, Divider, Icon } from "semantic-ui-react";
+import { useFormContext } from "react-hook-form";
+import { hasErrors } from "../queryableFunctions";
+import { useIntl } from "react-intl";
+import FormQueryable from "./FormQueryable";
+
+const formData = (groupByRange, havingRange) => {
+  const groupQueryables = _.map((idx) => `queryables[${idx}]`)(groupByRange);
+  const groupData = { group_by: { fieldNames: groupQueryables } };
+
+  const havingQueryables = _.map((idx) => `queryables[${idx}]`)(havingRange);
+  const havingData = { having: { fieldNames: havingQueryables } };
+
+  return { ...groupData, ...havingData };
+};
+
+const AggregationForm = ({
+  insert,
+  remove,
+  setStepInformation,
+  stepInformation,
+}) => {
+  const { formState, watch } = useFormContext();
+  const { formatMessage } = useIntl();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const queryables = watch("queryables");
+
+  const groupByIndex = _.flow(
+    _.findIndex((q) => q.type == "group_by"),
+    (index) => (index === -1 ? _.size(queryables) : index)
+  )(queryables);
+
+  const aggregations = _.slice(groupByIndex, _.size(queryables))(queryables);
+  const group_bys = _.filter((f) => f?.type == "group_by")(aggregations);
+  const havings = _.filter((f) => f?.type == "where")(aggregations);
+  const havingsIndex = groupByIndex + _.size(group_bys);
+  const groupByRange = _.range(groupByIndex, groupByIndex + _.size(group_bys));
+  const havingRange = _.range(havingsIndex, havingsIndex + _.size(havings));
+  const data = formData(groupByRange, havingRange);
+  const fieldNames = [
+    ...data?.group_by?.fieldNames,
+    ...data?.having?.fieldNames,
+  ];
+
+  useEffect(() => {
+    if (!_.isEqual(stepInformation?.fieldNames, fieldNames))
+      setStepInformation(2, { ...stepInformation, fieldNames });
+  }, [fieldNames, stepInformation, setStepInformation]);
+
+  const errors = formState?.errors;
+
+  const groupByHasError = hasErrors(data?.group_by?.fieldNames, errors);
+  const havingHasError = hasErrors(data?.having?.fieldNames, errors);
+
+  const newClause = () => [
+    { expressions: [{ shape: "function", value: { isCondition: true } }] },
+  ];
+  const defaultPropertiesForType = {
+    where: { clauses: newClause() },
+    join: { clauses: newClause() },
+  };
+  const newQueryable = (type, id) => ({
+    type,
+    id,
+    properties: _.propOr({}, type)(defaultPropertiesForType),
+  });
+  const onQueryableAdd = (type) => {
+    const nextId =
+      type === "group_by"
+        ? groupByIndex + _.size(group_bys)
+        : groupByIndex + _.size(aggregations);
+    const qId = _.maxBy("id")(queryables)?.id;
+    insert(nextId, newQueryable(type, qId + 1));
+  };
+  const onTitleClick = (e, { index }) => {
+    setActiveIndex((x) => (x == index ? null : index));
+  };
+
+  return (
+    <>
+      <Accordion styled fluid>
+        <>
+          <Accordion.Title
+            active={activeIndex === 0}
+            index={0}
+            onClick={onTitleClick}
+          >
+            <Icon name="dropdown" />
+            {formatMessage({ id: "dataViews.form.queryable.group_by" })}
+            {groupByHasError && (
+              <Icon
+                name="exclamation circle"
+                color="red"
+                style={{ marginLeft: 6 }}
+              />
+            )}
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex === 0}>
+            {group_bys.map((queryable, idx) => (
+              <FormQueryable
+                key={groupByIndex + idx}
+                index={groupByIndex + idx}
+                prefix={`queryables[${groupByIndex + idx}]`}
+                type={queryable?.type}
+                onDelete={() => {
+                  remove(groupByIndex + idx);
+                }}
+              />
+            ))}
+            <Divider hidden />
+            {_.size(group_bys) == 0 && (
+              <Button.Group basic size="medium">
+                <Button
+                  icon="plus"
+                  content={formatMessage({
+                    id: "queryables.form.action.add_groupby",
+                  })}
+                  onClick={() => {
+                    onQueryableAdd("group_by");
+                  }}
+                />
+              </Button.Group>
+            )}
+          </Accordion.Content>
+          <Accordion.Title
+            active={activeIndex === 1}
+            index={1}
+            onClick={onTitleClick}
+          >
+            <Icon name="dropdown" />
+            {formatMessage({ id: "dataViews.form.queryable.having" })}
+            {havingHasError && (
+              <Icon
+                name="exclamation circle"
+                color="red"
+                style={{ marginLeft: 6 }}
+              />
+            )}
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex === 1}>
+            <>
+              {havings.map((queryable, idx) => (
+                <FormQueryable
+                  key={idx + havingsIndex}
+                  index={idx + havingsIndex}
+                  prefix={`queryables[${idx + havingsIndex}]`}
+                  type={queryable?.type}
+                  onDelete={() => {
+                    remove(idx + havingsIndex);
+                  }}
+                />
+              ))}
+              <Divider hidden />
+              {_.size(havings) == 0 && (
+                <Button.Group basic size="medium">
+                  <Button
+                    content={formatMessage({
+                      id: "queryables.form.action.add_having",
+                    })}
+                    disabled={_.size(group_bys) == 0}
+                    icon="plus"
+                    onClick={(e) => {
+                      onQueryableAdd("where");
+                    }}
+                  />
+                </Button.Group>
+              )}
+            </>
+          </Accordion.Content>
+        </>
+      </Accordion>
+      <Divider hidden />
+    </>
+  );
+};
+
+export default AggregationForm;

package/src/components/dataViews/simpleForm/DatasetForm.js

@@ -0,0 +1,199 @@
+import _ from "lodash/fp";
+import { useEffect, useState } from "react";
+import { Accordion, Button, Divider, Icon } from "semantic-ui-react";
+import { useFormContext } from "react-hook-form";
+import { hasErrors } from "../queryableFunctions";
+import { useIntl } from "react-intl";
+import FormQueryable from "./FormQueryable";
+
+const formData = (joinRange, whereRange) => {
+  const fromData = { from: { fieldNames: ["queryables[0]"] } };
+  const joinQueryables = _.map((idx) => `queryables[${idx}]`)(joinRange);
+  const joinData = { join: { fieldNames: joinQueryables } };
+
+  const whereQueryables = _.map((idx) => `queryables[${idx}]`)(whereRange);
+  const whereData = { where: { fieldNames: whereQueryables } };
+
+  return { ...fromData, ...joinData, ...whereData };
+};
+
+const DatasetForm = ({
+  insert,
+  remove,
+  setStepInformation,
+  stepInformation,
+}) => {
+  const { formState, watch } = useFormContext();
+  const { formatMessage } = useIntl();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const queryables = watch("queryables");
+
+  const dataset = _.takeWhile((q) => q.type !== "group_by")(queryables);
+  const joinIndex = _.findIndex((f) => f?.type == "join")(dataset);
+  const whereIndex = _.findIndex((f) => f?.type == "where")(dataset);
+  const joins = _.filter((f) => f?.type == "join")(dataset);
+  const wheres = _.filter((f) => f?.type == "where")(dataset);
+  const joinRange =
+    joinIndex === -1 ? [] : _.range(joinIndex, joinIndex + _.size(joins));
+  const whereRange =
+    whereIndex === -1 ? [] : _.range(whereIndex, whereIndex + _.size(wheres));
+  const data = formData(joinRange, whereRange);
+
+  const fieldNames = [
+    ...data?.from?.fieldNames,
+    ...data?.join?.fieldNames,
+    ...data?.where?.fieldNames,
+  ];
+
+  const errors = formState?.errors;
+
+  const fromHasError = hasErrors(data?.from?.fieldNames, errors);
+  const joinHasError = hasErrors(data?.join?.fieldNames, errors);
+  const whereHasError = hasErrors(data?.where?.fieldNames, errors);
+
+  useEffect(() => {
+    if (!_.isEqual(stepInformation?.fieldNames, fieldNames))
+      setStepInformation(1, { ...stepInformation, fieldNames });
+  }, [fieldNames, stepInformation, setStepInformation]);
+
+  const newClause = () => [
+    { expressions: [{ shape: "function", value: { isCondition: true } }] },
+  ];
+  const defaultPropertiesForType = {
+    where: { clauses: newClause() },
+    join: { clauses: newClause() },
+  };
+  const newQueryable = (type, id) => ({
+    type,
+    id,
+    properties: _.propOr({}, type)(defaultPropertiesForType),
+  });
+  const onQueryableAdd = (type) => {
+    const nextId = type === "join" ? _.size(joins) + 1 : _.size(dataset);
+    const qId = _.maxBy("id")(queryables)?.id;
+    insert(nextId, newQueryable(type, qId + 1));
+  };
+  const onTitleClick = (e, { index }) => {
+    setActiveIndex((x) => (x == index ? null : index));
+  };
+
+  return (
+    <>
+      <Accordion styled fluid>
+        <>
+          <Accordion.Title
+            active={activeIndex === 0}
+            index={0}
+            onClick={onTitleClick}
+          >
+            <Icon name="dropdown" />
+            {formatMessage({ id: "dataViews.form.queryable.from" })}
+            {fromHasError && (
+              <Icon
+                name="exclamation circle"
+                color="red"
+                style={{ marginLeft: 6 }}
+              />
+            )}
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex === 0}>
+            <FormQueryable
+              index={0}
+              prefix={`queryables[0]`}
+              type={dataset[0]?.type}
+            />
+          </Accordion.Content>
+          <Accordion.Title
+            active={activeIndex === 1}
+            index={1}
+            onClick={onTitleClick}
+            icon={"dropdown"}
+          >
+            <Icon name="dropdown" />
+            {formatMessage({ id: "dataViews.form.queryable.join" })}
+            {joinHasError && (
+              <Icon
+                name="exclamation circle"
+                color="red"
+                style={{ marginLeft: 6 }}
+              />
+            )}
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex === 1}>
+            {joins.map((queryable, idx) => (
+              <FormQueryable
+                key={idx}
+                index={idx + joinIndex}
+                prefix={`queryables[${idx + joinIndex}]`}
+                type={queryable?.type}
+                onDelete={() => {
+                  remove(idx + joinIndex);
+                }}
+              />
+            ))}
+            <Divider hidden />
+            <Button.Group basic size="medium">
+              <Button
+                icon="plus"
+                content={formatMessage({
+                  id: "queryables.form.action.add_join",
+                })}
+                onClick={() => {
+                  onQueryableAdd("join");
+                }}
+              />
+            </Button.Group>
+          </Accordion.Content>
+          <Accordion.Title
+            active={activeIndex === 2}
+            index={2}
+            onClick={onTitleClick}
+            icon={"dropdown"}
+          >
+            <Icon name="dropdown" />
+            {formatMessage({ id: "dataViews.form.queryable.where" })}
+            {whereHasError && (
+              <Icon
+                name="exclamation circle"
+                color="red"
+                style={{ marginLeft: 6 }}
+              />
+            )}
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex === 2}>
+            <>
+              {wheres.map((queryable, idx) => (
+                <FormQueryable
+                  key={idx}
+                  index={idx + whereIndex}
+                  prefix={`queryables[${idx + whereIndex}]`}
+                  type={queryable?.type}
+                  onDelete={() => {
+                    remove(idx + whereIndex);
+                  }}
+                />
+              ))}
+              <Divider hidden />
+              {_.size(wheres) == 0 && (
+                <Button.Group basic size="medium">
+                  <Button
+                    content={formatMessage({
+                      id: "queryables.form.action.add_where",
+                    })}
+                    icon="plus"
+                    onClick={(e) => {
+                      onQueryableAdd("where");
+                    }}
+                  />
+                </Button.Group>
+              )}
+            </>
+          </Accordion.Content>
+        </>
+      </Accordion>
+      <Divider hidden />
+    </>
+  );
+};
+
+export default DatasetForm;

package/src/components/dataViews/simpleForm/FormQueryable.js

@@ -0,0 +1,114 @@
+import _ from "lodash/fp";
+import { use } from "react";
+import { useIntl } from "react-intl";
+import { Button, Grid, Form, Segment } from "semantic-ui-react";
+import { useFormContext, Controller } from "react-hook-form";
+import QxContext from "@truedat/qx/components/QxContext";
+import { From, GroupBy, Join, Where } from "../queryableProperties";
+import { reduceQueryableFields } from "../queryableFunctions";
+
+const FormQueryable = ({ index = 0, prefix, type = "from", onDelete }) => {
+  const { control, watch } = useFormContext();
+  const context = use(QxContext);
+  const { formatMessage } = useIntl();
+  const queryables = watch("queryables");
+  const fieldsOffset = _.prop(`[${index}].type`)(queryables) === "join" ? 1 : 0;
+  const fields = _.flow(
+    _.slice(0, index + fieldsOffset),
+    reduceQueryableFields(formatMessage)
+  )(queryables);
+
+  const queryable = watch(prefix);
+
+  const queryableResourceKey = (queryable) => {
+    switch (queryable.type) {
+      case "join":
+      case "from":
+        const { alias, properties } = queryable;
+        const { id, type } = properties.resource || {};
+        return [id, type, alias].join(":");
+      default:
+        return null;
+    }
+  };
+
+  const validateAlias = _.flow(
+    _.remove((qry) => qry.id == queryable.id),
+    _.map("alias"),
+    _.reject((alias) => _.isNil(alias) || _.isEmpty(alias)),
+    _.includes(queryable.alias)
+  )(queryables)
+    ? formatMessage({
+        id: "dataViews.form.queryable.alias.duplicated",
+      })
+    : null;
+
+  const validateResource = _.flow(
+    _.remove((qry) => qry.id == queryable.id),
+    _.map(queryableResourceKey),
+    _.reject(_.isNil),
+    _.includes(queryableResourceKey(queryable))
+  )(queryables)
+    ? formatMessage({
+        id: "dataViews.form.queryable.resource.duplicated",
+      })
+    : null;
+
+  return (
+    <Grid>
+      <Grid.Column>
+        <Segment>
+          {type !== "from" && onDelete ? (
+            <Button
+              onClick={onDelete}
+              icon="trash alternate outline"
+              basic
+              color="red"
+              aria-label="delete"
+              floated="right"
+            />
+          ) : null}
+          <Grid.Row className="vertical-space">
+            <Controller
+              control={control}
+              name={`${prefix}.alias`}
+              rules={{
+                validate: () => validateAlias || validateResource,
+              }}
+              render={({
+                field: { onBlur, onChange, value },
+                fieldState: { error },
+              }) => (
+                <Form.Input
+                  label={formatMessage({
+                    id: "dataViews.form.queryable.alias",
+                  })}
+                  autoComplete="off"
+                  placeholder={formatMessage({
+                    id: "dataViews.form.queryable.alias",
+                  })}
+                  error={error?.message}
+                  onBlur={onBlur}
+                  onChange={(_e, { value }) => onChange(value)}
+                  value={value}
+                />
+              )}
+            />
+          </Grid.Row>
+          <Grid.Row className="vertical-space">
+            <QxContext
+              value={{ ...context, field: `${prefix}.properties`, fields }}
+            >
+              {type === "from" && <From />}
+              {type === "join" && <Join />}
+              {type === "group_by" && <GroupBy />}
+              {type === "where" && <Where />}
+            </QxContext>
+          </Grid.Row>
+        </Segment>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default FormQueryable;