@truedat/qx 7.13.7 → 7.13.9

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

@@ -0,0 +1,107 @@
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+import { lazy, useEffect } from "react";
+import { Divider, Header, Form, Segment } from "semantic-ui-react";
+import { useFormContext, Controller } from "react-hook-form";
+
+const SourceSelector = lazy(
+  () => import("@truedat/cx/sources/components/SourceSelector")
+);
+
+const InformationForm = ({
+  isEditForm,
+  setStepInformation,
+  stepInformation,
+}) => {
+  const { formatMessage } = useIntl();
+  const { control, watch } = useFormContext();
+  const fieldNames = ["name", "source_id", "description"];
+
+  useEffect(() => {
+    if (!_.isEqual(stepInformation?.fieldNames, fieldNames))
+      setStepInformation(0, { ...stepInformation, fieldNames });
+  }, [stepInformation, fieldNames]);
+
+  return (
+    <>
+      <Segment>
+        <Header as="h3">
+          {watch("name") || formatMessage({ id: "dataViews.action.new" })}
+        </Header>
+        <Controller
+          control={control}
+          name="name"
+          rules={{
+            required: formatMessage(
+              { id: "form.validation.required" },
+              { prop: formatMessage({ id: "dataViews.form.name" }) }
+            ),
+          }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Form.Field required width={10}>
+              <label>{formatMessage({ id: "group.props.name" })}</label>
+              <Form.Input
+                autoComplete="off"
+                placeholder={formatMessage({
+                  id: "dataViews.form.name",
+                })}
+                error={error?.message}
+                onBlur={onBlur}
+                onChange={(_e, { value }) => onChange(value)}
+                value={value}
+              />
+            </Form.Field>
+          )}
+        />
+        <Controller
+          name="description"
+          control={control}
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.Field width={10}>
+              <label>{formatMessage({ id: "group.props.description" })}</label>
+              <Form.Input
+                onBlur={onBlur}
+                placeholder={formatMessage({ id: "hierarchy.add_description" })}
+                onChange={(_e, { value }) => onChange(value)}
+                value={value}
+                style={{ width: "100%" }}
+              />
+            </Form.Field>
+          )}
+        />
+        <Controller
+          control={control}
+          name="source_id"
+          rules={{
+            required: {
+              value: true,
+              message: formatMessage({ id: "dataViews.form.source.required" }),
+            },
+          }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Form.Field required width={10}>
+              <label>{formatMessage({ id: "dataViews.form.source" })}</label>
+              <SourceSelector
+                disabled={isEditForm}
+                required
+                value={value}
+                onBlur={onBlur}
+                onChange={(_e, { value }) => onChange(value)}
+                error={error?.message}
+              />
+            </Form.Field>
+          )}
+        />
+      </Segment>
+      <Divider hidden />
+    </>
+  );
+};
+
+export default InformationForm;

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

@@ -0,0 +1,50 @@
+import _ from "lodash/fp";
+import { use, useEffect } from "react";
+import { useIntl } from "react-intl";
+import { useFormContext } from "react-hook-form";
+import { Divider, Grid, Segment } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import { Select } from "../queryableProperties";
+import { reduceQueryableFields } from "../queryableFunctions";
+
+export default function SelectionForm({ setStepInformation, stepInformation }) {
+  const { formatMessage } = useIntl();
+  const { watch } = useFormContext();
+  const context = use(QxContext);
+  const queryables = watch("queryables");
+  const fieldNames = ["select.properties.fields"];
+
+  const fields = _.flow(
+    _.map.convert({ cap: false })((q, id) => ({ ...q, id })),
+    reduceQueryableFields(formatMessage)
+  )(queryables);
+
+  useEffect(() => {
+    if (!_.isEqual(stepInformation?.fieldNames, fieldNames)) {
+      setStepInformation(3, { ...stepInformation, fieldNames });
+    }
+  }, [fieldNames, stepInformation, setStepInformation]);
+
+  return (
+    <div>
+      <Grid>
+        <Grid.Column>
+          <Segment>
+            <Grid.Row className="vertical-space">
+              <QxContext
+                value={{
+                  ...context,
+                  field: `select.properties`,
+                  fields,
+                }}
+              >
+                <Select />
+              </QxContext>
+            </Grid.Row>
+          </Segment>
+        </Grid.Column>
+      </Grid>
+      <Divider hidden />
+    </div>
+  );
+}

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

@@ -0,0 +1,265 @@
+import _ from "lodash/fp";
+import { Fragment, useState } from "react";
+import PropTypes from "prop-types";
+import { Button, Divider, Grid, Icon, Form, Step } from "semantic-ui-react";
+import { FormProvider, useForm, useFieldArray } from "react-hook-form";
+import { useIntl } from "react-intl";
+import QxContext from "@truedat/qx/components/QxContext";
+import InformationForm from "./InformationForm";
+import DatasetForm from "./DatasetForm";
+import AggregationForm from "./AggregationForm";
+import SelectionForm from "./SelectionForm";
+import CancelButton from "../actions/CancelButton";
+
+export default function SimpleDataViewEditor({
+  selectedDataView,
+  context,
+  onSubmit,
+  onCancel,
+  isSubmitting,
+  mode,
+}) {
+  const form = useForm({
+    mode: "onTouched",
+    defaultValues: selectedDataView,
+  });
+
+  const [activeStep, setActiveStep] = useState(0);
+  const [stepInformation, setStepInformation] = useState({});
+  const [stepState, setStepState] = useState({});
+  const { formatMessage } = useIntl();
+  const { control, handleSubmit, watch, trigger } = form;
+
+  const { insert, remove } = useFieldArray({ control, name: "queryables" });
+
+  const isEditForm = !_.isNil(selectedDataView?.id);
+  const sourceId = watch("source_id");
+
+  const doSubmit = async (data) => {
+    const ok = await trigger();
+
+    if (ok) {
+      const queryables = _.propOr([], "queryables")(data);
+      onSubmit({ ...data, mode, queryables });
+    }
+  };
+  const updateStepInformation = (key, data) =>
+    setStepInformation({ ...stepInformation, [key]: data });
+
+  const updateStatusState = async (steps) => {
+    const validations = await Promise.all(
+      _.map.convert({ cap: false })(async (step) => {
+        const ok = await trigger(stepInformation[step]["fieldNames"], {
+          shouldFocus: true,
+        });
+        const content = ok ? { status: "valid" } : { status: "error" };
+        return [step, content];
+      })(steps)
+    );
+
+    setStepState({ ...stepState, ..._.fromPairs(validations) });
+  };
+
+  const moveToStep = async (step) => {
+    if (step < activeStep) {
+      await updateStatusState(_.range(0, activeStep + 1));
+      setActiveStep(step);
+    } else {
+      await updateStatusState(_.range(0, step));
+      const ok = await trigger(stepInformation[activeStep]["fieldNames"], {
+        shouldFocus: true,
+      });
+
+      if (ok) {
+        setActiveStep(step);
+      }
+    }
+  };
+
+  const stepProps = (step) => {
+    if (_.has(step)(stepInformation) && step !== activeStep)
+      return { link: true, onClick: () => moveToStep(step) };
+    return {};
+  };
+
+  const statusIcon = (step, defaultName) => {
+    const defaultIcon = { name: defaultName };
+
+    const status = stepState[step]?.status;
+    if (status === "valid") {
+      return { name: "check", color: "green" };
+    }
+
+    if (status === "error") {
+      return { name: "x", color: "red" };
+    }
+
+    return defaultIcon;
+  };
+
+  if (!selectedDataView) return null;
+
+  return (
+    <Fragment>
+      <Grid>
+        <Grid.Column width="12">
+          <Grid.Row textAlign="center">
+            <Step.Group>
+              <Step active={activeStep == 0} {...stepProps(0)}>
+                <Icon {...statusIcon(0, "info")} />
+                <Step.Content>
+                  <Step.Title>
+                    {formatMessage({
+                      id: "dataViews.form.step.information.title",
+                    })}
+                  </Step.Title>
+                  <Step.Description>
+                    {formatMessage({
+                      id: "dataViews.form.step.information.description",
+                    })}
+                  </Step.Description>
+                </Step.Content>
+              </Step>
+
+              <Step active={activeStep == 1} {...stepProps(1)}>
+                <Icon {...statusIcon(1, "database")} />
+                <Step.Content>
+                  <Step.Title>
+                    {formatMessage({ id: "dataViews.form.step.dataset.title" })}
+                  </Step.Title>
+                  <Step.Description>
+                    {formatMessage({
+                      id: "dataViews.form.step.dataset.description",
+                    })}
+                  </Step.Description>
+                </Step.Content>
+              </Step>
+
+              <Step active={activeStep == 2} {...stepProps(2)}>
+                <Icon {...statusIcon(2, "calculator")} />
+                <Step.Content>
+                  <Step.Title>
+                    {formatMessage({
+                      id: "dataViews.form.step.aggregations.title",
+                    })}
+                  </Step.Title>
+                  <Step.Description>
+                    {formatMessage({
+                      id: "dataViews.form.step.aggregations.description",
+                    })}
+                  </Step.Description>
+                </Step.Content>
+              </Step>
+              <Step active={activeStep == 3} {...stepProps(3)}>
+                <Icon {...statusIcon(3, "columns")} />
+                <Step.Content>
+                  <Step.Title>
+                    {formatMessage({ id: "dataViews.form.step.select.title" })}
+                  </Step.Title>
+                  <Step.Description>
+                    {formatMessage({
+                      id: "dataViews.form.step.select.description",
+                    })}
+                  </Step.Description>
+                </Step.Content>
+              </Step>
+            </Step.Group>
+          </Grid.Row>
+          <Divider hidden />
+          <Grid.Row>
+            <FormProvider {...form}>
+              <Form>
+                <div style={{ display: activeStep == 0 ? "block" : "none" }}>
+                  <InformationForm
+                    isEditForm={isEditForm}
+                    stepInformation={stepInformation[0]}
+                    setStepInformation={updateStepInformation}
+                  />
+                </div>
+                {!_.isNil(sourceId) && (
+                  <QxContext value={{ ...context, sourceId }}>
+                    <div
+                      style={{ display: activeStep == 1 ? "block" : "none" }}
+                    >
+                      <DatasetForm
+                        insert={insert}
+                        remove={remove}
+                        stepInformation={stepInformation[1]}
+                        stepState={stepState[1]}
+                        setStepInformation={updateStepInformation}
+                      />
+                    </div>
+                    <div
+                      style={{ display: activeStep == 2 ? "block" : "none" }}
+                    >
+                      <AggregationForm
+                        insert={insert}
+                        remove={remove}
+                        stepInformation={stepInformation[2]}
+                        setStepInformation={updateStepInformation}
+                      />
+                    </div>
+                    <div
+                      style={{ display: activeStep == 3 ? "block" : "none" }}
+                    >
+                      <SelectionForm
+                        stepInformation={stepInformation[3]}
+                        setStepInformation={updateStepInformation}
+                      />
+                    </div>
+                  </QxContext>
+                )}
+                {activeStep === 3 && (
+                  <>
+                    <Button
+                      floated="right"
+                      content={formatMessage({ id: "actions.save" })}
+                      primary
+                      disabled={isSubmitting}
+                      onClick={handleSubmit((data) => doSubmit(data))}
+                    />
+                  </>
+                )}
+                {activeStep < 3 && (
+                  <>
+                    <Button
+                      content={formatMessage({
+                        id: "dataViews.action.forward",
+                      })}
+                      floated="right"
+                      primary
+                      disabled={isSubmitting}
+                      onClick={() => moveToStep(activeStep + 1)}
+                    />
+                  </>
+                )}
+                {activeStep > 0 && (
+                  <>
+                    <Button
+                      floated="right"
+                      content={formatMessage({ id: "dataViews.action.back" })}
+                      onClick={() => moveToStep(activeStep - 1)}
+                    />
+                  </>
+                )}
+                <CancelButton
+                  onConfirm={() => onCancel()}
+                  disabled={isSubmitting}
+                />
+              </Form>
+            </FormProvider>
+          </Grid.Row>
+        </Grid.Column>
+      </Grid>
+    </Fragment>
+  );
+}
+
+SimpleDataViewEditor.propTypes = {
+  selectedDataView: PropTypes.object,
+  context: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  isSubmitting: PropTypes.bool,
+  mode: PropTypes.string,
+};