@truedat/qx 7.13.6 → 7.13.8

package/src/components/dataViews/DataViewEditor.js

@@ -1,194 +1,185 @@
 import _ from "lodash/fp";
-import { lazy, Fragment, useEffect } from "react";
-import PropTypes from "prop-types";
+import { Fragment, useState, useEffect } from "react";
+import { useQuery } from "@apollo/client";
 import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
+import { Loading } from "@truedat/core/components";
+import { Button, Divider, Segment } from "semantic-ui-react";
+import { useParams, useNavigate } from "react-router";
 import {
-  Button,
-  Container,
-  Divider,
-  Grid,
-  GridColumn,
-  Header,
-  Form,
-} from "semantic-ui-react";
-import { FormProvider, useForm, Controller } from "react-hook-form";
+  useDataViewFetch,
+  useDataViews,
+  useDataViewCreate,
+  useDataViewUpdate,
+} from "@truedat/qx/hooks/useDataViews";
+import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
+import { DATA_VIEWS } from "@truedat/core/routes";
+import { useFunctions } from "@truedat/qx/hooks/useFunctions";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
+import AdvancedDataViewEditor from "./advancedForm/AdvancedDataViewEditor";
+import SimpleDataViewEditor from "./simpleForm/SimpleDataViewEditor";
+import BreadCrumb from "./BreadCrumb";
 import { ConfirmModal } from "@truedat/core/components";
-import { DescriptionInput } from "@truedat/qx/components/common";
-import QxContext from "@truedat/qx/components/QxContext";
-import DataViewSelect from "./DataViewSelect";
-import Queryables from "./Queryables";
-
-const SourceSelector = lazy(
-  () => import("@truedat/cx/sources/components/SourceSelector")
-);
-
-export default function DataViewEditor({
-  selectedDataView,
-  context,
-  onSubmit,
-  onCancel,
-  onDelete,
-  isSubmitting,
-  setDirty,
-}) {
+
+const NEW_DATA_VIEW = {
+  name: "",
+  description: "",
+  mode: "guided",
+  queryables: [
+    {
+      id: 0,
+      alias: "",
+      type: "from",
+      properties: {
+        resource: null,
+      },
+    },
+  ],
+  select: { type: "select" },
+};
+
+export function DataViewDetailEditor({ dataView }) {
+  const selectedDataView = _.defaultTo(NEW_DATA_VIEW)(dataView);
+  const viewMode = selectedDataView?.mode || "advanced";
+  const [mode, setMode] = useState("guided");
   const { formatMessage } = useIntl();
-  const form = useForm({
-    mode: "onTouched",
-    defaultValues: selectedDataView,
-  });
-  const { control, handleSubmit, watch, formState } = form;
-  const { isDirty, isValid } = formState;
+  const navigate = useNavigate();
+  const { data: functionsData, loading: functionsLoading } = useFunctions();
+  const { data, loading: dataViewsLoading } = useDataViews();
+  const { data: referenceDatasetsData, loading: referenceDatasetsLoading } =
+    useQuery(REFERENCE_DATASETS_HEADERS_QUERY);
+  const loading =
+    dataViewsLoading || functionsLoading || referenceDatasetsLoading;
+  const dataViews = _.orderBy(["id"], ["asc"])(data?.data);
+  const functions = functionsData?.data;
+  const referenceDatasets = _.flow(
+    _.getOr([], "referenceDatasets"),
+    _.sortBy([({ name }) => lowerDeburrTrim(name), "name"]),
+    _.map((row) => ({ ...row, id: Number(row?.id) }))
+  )(referenceDatasetsData);
 
   useEffect(() => {
-    setDirty(isDirty);
-  }, [setDirty, isDirty]);
+    setMode(viewMode);
+  }, [viewMode, setMode]);
+
+  const context = {
+    dataViews,
+    referenceDatasets,
+    functions,
+    currentDataViewId: selectedDataView?.id,
+  };
 
-  const isEditForm = !_.isNil(selectedDataView?.id);
-  const sourceId = watch("source_id");
-  if (!selectedDataView) return null;
+  const { trigger: createDataView, isMutating: isCreating } =
+    useDataViewCreate();
+
+  const { trigger: updateDataView, isMutating: isUpdating } =
+    useDataViewUpdate(selectedDataView);
+
+  const isSubmitting = isCreating || isUpdating;
+  const onDataViewCreate = (data_view) => {
+    const mutateDataView = selectedDataView?.id
+      ? updateDataView
+      : createDataView;
+
+    mutateDataView({ data_view }).then(() => {
+      navigate(DATA_VIEWS);
+    });
+  };
+
+  const clearForm = () => {
+    navigate(DATA_VIEWS);
+  };
+
+  const editorProps = {
+    selectedDataView: selectedDataView,
+    context: context,
+    onCancel: clearForm,
+    onSubmit: onDataViewCreate,
+    isSubmitting: isSubmitting,
+    mode: mode,
+  };
 
   return (
-    <Fragment>
-      <FormProvider {...form}>
-        <Form>
-          <Header as="h3" dividing>
-            {watch("name") || formatMessage({ id: "dataViews.action.new" })}
-          </Header>
-          <Grid>
-            <GridColumn>
-              <Grid.Row>
-                <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>
-                      <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>
-                  )}
-                />
-              </Grid.Row>
-              <Grid.Row>
-                <Controller
-                  name="description"
-                  control={control}
-                  render={({ field: { onBlur, onChange, value } }) => (
-                    <DescriptionInput
-                      onBlur={onBlur}
-                      value={value}
-                      onChange={(_e, { value }) => onChange(value)}
-                    />
-                  )}
-                />
-              </Grid.Row>
-            </GridColumn>
-          </Grid>
-          <Controller
-            control={control}
-            name="source_id"
-            rules={{ required: true }}
-            render={({ field: { onChange, value } }) => (
-              <Form.Field required>
-                <label>{formatMessage({ id: "dataViews.form.source" })}</label>
-                <SourceSelector
-                  disabled={isEditForm}
-                  value={value + ""}
-                  onChange={(_e, { value }) => onChange(value)}
-                />
-              </Form.Field>
-            )}
-          />
-          {!_.isNil(sourceId) ? (
-            <QxContext value={{ ...context, sourceId }}>
-              <Queryables />
-              <DataViewSelect />
-            </QxContext>
-          ) : null}
-          <Divider hidden />
-          <Container textAlign="right">
+    <Segment loading={loading}>
+      <Button.Group floated={"right"}>
+        <ConfirmModal
+          trigger={
             <Button
-              onClick={handleSubmit((data) => onSubmit(data))}
-              primary
-              loading={isSubmitting}
-              disabled={!isValid || !isDirty}
-              content={formatMessage({ id: "actions.save" })}
+              positive={mode === "guided"}
+              disabled={viewMode === "advanced" || mode == "guided"}
+              icon="compass"
+              content={formatMessage({ id: "actions.mode.guided" })}
+              
             />
-            {isDirty ? (
-              <ConfirmModal
-                trigger={
-                  <Button
-                    content={formatMessage({ id: "actions.cancel" })}
-                    disabled={isSubmitting}
-                  />
-                }
-                header={formatMessage({
-                  id: "actions.discard.confirmation.header",
-                })}
-                content={formatMessage({
-                  id: "actions.discard.confirmation.content",
-                })}
-                onConfirm={onCancel}
-                onOpen={(e) => e.stopPropagation()}
-                onClose={(e) => e.stopPropagation()}
-              />
-            ) : (
-              <Button
-                content={formatMessage({ id: "actions.cancel" })}
-                disabled={isSubmitting}
-                onClick={onCancel}
-              />
-            )}
-            {onDelete ? (
-              <ConfirmModal
-                trigger={
-                  <Button
-                    color="red"
-                    content={formatMessage({ id: "actions.delete" })}
-                    disabled={isSubmitting}
-                  />
-                }
-                header={formatMessage({
-                  id: "dataViews.action.delete.header",
-                })}
-                content={formatMessage({
-                  id: "dataViews.action.delete.content",
-                })}
-                onConfirm={onDelete}
-                onOpen={(e) => e.stopPropagation()}
-                onClose={(e) => e.stopPropagation()}
-              />
-            ) : null}
-          </Container>
-        </Form>
-      </FormProvider>
-    </Fragment>
+          }
+          header={formatMessage({ id: "actions.mode.confirmation.header" })}
+          size="small"
+          content={formatMessage({ id: "actions.mode.confirmation.content" })}
+          onConfirm={() => setMode("guided")}
+          onOpen={(e) => e.stopPropagation()}
+          onClose={(e) => e.stopPropagation()}
+        />
+        <Button.Or text={formatMessage({ id: "actions.or" })} />
+        <ConfirmModal
+          trigger={
+            <Button
+              positive={mode === "advanced"}
+              disabled={mode === "advanced"}
+              icon="code"
+              content={formatMessage({ id: "actions.mode.advanced" })}
+              
+            />
+          }
+          header={formatMessage({ id: "actions.mode.confirmation.header" })}
+          size="small"
+          content={formatMessage({ id: "actions.mode.confirmation.content" })}
+          onConfirm={() => setMode("advanced")}
+          onOpen={(e) => e.stopPropagation()}
+          onClose={(e) => e.stopPropagation()}
+        />
+      </Button.Group>
+
+      <Divider hidden />
+      <Fragment>
+        {mode === "guided" ? (
+          <SimpleDataViewEditor {...editorProps} />
+        ) : (
+          <AdvancedDataViewEditor {...editorProps} />
+        )}
+        <Divider hidden />
+      </Fragment>
+    </Segment>
   );
 }
 
-DataViewEditor.propTypes = {
-  selectedDataView: PropTypes.object,
-  context: PropTypes.object,
-  onSubmit: PropTypes.func,
-  onCancel: PropTypes.func,
-  onDelete: PropTypes.func,
-  isSubmitting: PropTypes.bool,
-  setDirty: PropTypes.func,
+DataViewDetailEditor.propTypes = {
+  dataView: PropTypes.object,
 };
+
+export default function DataViewEditor() {
+  const { id } = useParams();
+  const { formatMessage } = useIntl();
+
+  if (_.isNil(id)) {
+    return (
+      <>
+        <BreadCrumb text={formatMessage({ id: "dataViews.new" })} />
+        <Divider hidden />
+        <DataViewDetailEditor />
+      </>
+    );
+  }
+
+  const { dataView, loading, error } = useDataViewFetch(id);
+
+  if (error) return null;
+  if (loading) return <Loading />;
+
+  return (
+    <>
+      <BreadCrumb text={dataView?.name} />
+      <Divider hidden />
+      <DataViewDetailEditor dataView={dataView} />
+    </>
+  );
+}

package/src/components/dataViews/DataViews.js

@@ -1,168 +1,146 @@
 import _ from "lodash/fp";
-import { useState } from "react";
-import { useIntl, FormattedMessage } from "react-intl";
-import { useQuery } from "@apollo/client";
+import { useMemo, useState } from "react";
+import { compile } from "path-to-regexp";
 import {
+  Card,
   Button,
-  Grid,
-  GridColumn,
+  Divider,
   Header,
   Icon,
-  List,
+  Input,
   Segment,
 } from "semantic-ui-react";
-import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
-import { lowerDeburrTrim } from "@truedat/core/services/sort";
+import { Link } from "react-router";
+import { useIntl } from "react-intl";
+import PropTypes from "prop-types";
+import { DATA_VIEW, DATA_VIEWS_NEW } from "@truedat/core/routes";
 import {
   useDataViews,
-  useDataViewCreate,
   useDataViewDelete,
-  useDataViewUpdate,
 } from "@truedat/qx/hooks/useDataViews";
-import { useFunctions } from "@truedat/qx/hooks/useFunctions";
-import DataViewEditor from "./DataViewEditor";
+import DeleteButton from "./actions/DeleteButton";
 
-const NEW_DATA_VIEW = {
-  name: "",
-  description: "",
-  queryables: [
-    {
-      id: 0,
-      alias: "",
-      type: "from",
-      properties: {
-        resource: null,
-      },
-    },
-  ],
-  select: {
-    type: "select",
-  },
-};
+export function filterDataView(data, searchTerm, keys) {
+  if (!searchTerm.trim()) return data;
 
-export default function DataViews() {
-  const { formatMessage } = useIntl();
-  const { data, loading: dataViewsLoading, mutate } = useDataViews();
-  const { data: functionsData, loading: functionsLoading } = useFunctions();
-  const { data: referenceDatasetsData, loading: referenceDatasetsLoading } =
-    useQuery(REFERENCE_DATASETS_HEADERS_QUERY);
+  const lower = searchTerm.toLowerCase();
 
-  const loading =
-    dataViewsLoading || functionsLoading || referenceDatasetsLoading;
-  const [selectedDataView, setSelectedDataView] = useState();
-  const [isDirty, setDirty] = useState(false);
+  return data.filter((item) =>
+    (keys ?? Object.keys(item)).some((key) => {
+      const value = item[key];
+      return value && String(value).toLowerCase().includes(lower);
+    })
+  );
+}
 
-  const dataViews = _.orderBy(["id"], ["asc"])(data?.data);
-  const functions = functionsData?.data;
-  const referenceDatasets = _.flow(
-    _.getOr([], "referenceDatasets"),
-    _.sortBy([({ name }) => lowerDeburrTrim(name), "name"]),
-    _.map((row) => ({ ...row, id: Number(row?.id) }))
-  )(referenceDatasetsData);
+function DataViewCard({ dataView, onDeleteSuccess }) {
+  const { formatMessage } = useIntl();
+  const { trigger: deleteDataView, isMutating: isDeleting } =
+    useDataViewDelete(dataView);
 
-  const context = {
-    dataViews,
-    referenceDatasets,
-    functions,
-    currentDataViewId: selectedDataView?.id,
+  const onDelete = () => {
+    deleteDataView({ data_view: dataView }).then(() => {
+      onDeleteSuccess?.();
+    });
   };
 
-  const changeSelectedDataView = (selection) => {
-    setSelectedDataView(null);
-    setSelectedDataView(selection);
-  };
-  const setStateNewDataView = () => changeSelectedDataView(NEW_DATA_VIEW);
-  const clearForm = () => {
-    setSelectedDataView(null);
-    setDirty(false);
-  };
+  return (
+    <Card>
+      <Card.Content>
+        <Card.Header
+          as={Link}
+          to={compile(DATA_VIEW)({ id: `${dataView.id}` })}
+        >
+          <Icon
+            name={formatMessage({
+              id: `dataViews.mode.icon.${dataView.mode || "advanced"}`,
+            })}
+            size="small"
+          />
+          {dataView.name || formatMessage({ id: "dataViews.untitled" })}
+        </Card.Header>
+        {dataView.description && (
+          <Card.Description>{dataView.description}</Card.Description>
+        )}
+      </Card.Content>
 
-  const { trigger: createDataView, isMutating: isCreating } =
-    useDataViewCreate();
+      <Card.Content extra>
+        <div className="ui actions">
+          <DeleteButton
+            floated="right"
+            onConfirm={onDelete}
+            disabled={isDeleting}
+          />
+        </div>
+      </Card.Content>
+    </Card>
+  );
+}
 
-  const { trigger: updateDataView, isMutating: isUpdating } =
-    useDataViewUpdate(selectedDataView);
+DataViewCard.propTypes = {
+  dataView: PropTypes.object.isRequired,
+  onDeleteSuccess: PropTypes.func,
+};
 
-  const { trigger: deleteDataView, isMutating: isDeleting } =
-    useDataViewDelete(selectedDataView);
+export default function DataViews() {
+  const { formatMessage } = useIntl();
+  const { data, loading: dataViewsLoading, mutate } = useDataViews();
+  const dataViews = _.orderBy(["id"], ["asc"])(data?.data || []);
+  const [searchInput, setSearchInput] = useState("");
+
+  const filteredData = useMemo(
+    () => filterDataView(dataViews, searchInput, ["name", "description"]),
+    [dataViews, searchInput]
+  );
 
-  const isSubmitting = isCreating || isUpdating || isDeleting;
-  const onDataViewCreate = (data_view) => {
-    const mutateDataView = selectedDataView?.id
-      ? updateDataView
-      : createDataView;
-    mutateDataView({ data_view }).then(() => {
-      clearForm();
-      mutate();
-    });
-  };
-  const onDataViewDelete = (data_view) => {
-    deleteDataView({ data_view }).then(() => {
-      clearForm();
-      mutate();
-    });
-  };
   return (
-    <Segment loading={loading}>
+    <Segment loading={dataViewsLoading}>
       <Header as="h2">
         <Icon circular name="archive" />
         <Header.Content>
-          <FormattedMessage id="dataViews.header" />
+          {formatMessage({ id: "dataViews.header" })}
           <Header.Subheader>
-            <FormattedMessage id="dataViews.subheader" />
+            {formatMessage({ id: "dataViews.subheader" })}
           </Header.Subheader>
         </Header.Content>
       </Header>
-      <Grid>
-        <GridColumn width={4}>
-          <Button fluid onClick={setStateNewDataView} disabled={isDirty}>
-            {formatMessage({ id: "dataViews.action.new" })}
-          </Button>
-          <List divided selection={!isDirty}>
-            {!_.isEmpty(dataViews) ? (
-              dataViews.map((dataView, key) => (
-                <List.Item
-                  key={key}
-                  onClick={() => !isDirty && changeSelectedDataView(dataView)}
-                >
-                  <List.Content>
-                    <List.Header>{dataView.name || "DataView"}</List.Header>
-                  </List.Content>
-                </List.Item>
-              ))
-            ) : (
-              <List.Item>
-                <List.Content>
-                  <List.Header>
-                    {formatMessage({ id: "dataViews.empty_list" })}
-                  </List.Header>
-                </List.Content>
-              </List.Item>
-            )}
-          </List>
-        </GridColumn>
-        <GridColumn width={11}>
-          {selectedDataView ? (
-            <DataViewEditor
-              key={selectedDataView?.id || "new"}
-              selectedDataView={selectedDataView}
-              context={context}
-              onCancel={clearForm}
-              onSubmit={onDataViewCreate}
-              onDelete={selectedDataView?.id ? onDataViewDelete : null}
-              isSubmitting={isSubmitting}
-              setDirty={setDirty}
-            />
-          ) : (
-            <Header as="h2" icon textAlign="center">
-              <Icon name="hand pointer outline" />
-              <Header.Subheader>
-                {formatMessage({ id: "dataViews.no_selection" })}
-              </Header.Subheader>
-            </Header>
-          )}
-        </GridColumn>
-      </Grid>
+      <Divider hidden />
+      <Button
+        floated="right"
+        content={formatMessage({ id: "dataViews.action.new" })}
+        primary
+        as={Link}
+        to={DATA_VIEWS_NEW}
+      />
+      {dataViews.length === 0 ? (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            {formatMessage({ id: "dataViews.empty_list" })}
+          </Header.Content>
+        </Header>
+      ) : (
+        <>
+          <Input
+            icon
+            placeholder={formatMessage({ id: "search.placeholder" })}
+            onChange={(e, { value }) => setSearchInput(value)}
+          >
+            <input />
+            <Icon name="search" />
+          </Input>
+          <Divider hidden />
+          <Card.Group stackable itemsPerRow={5}>
+            {filteredData.map((dv) => (
+              <DataViewCard
+                key={dv.id}
+                dataView={dv}
+                onDeleteSuccess={mutate}
+              />
+            ))}
+          </Card.Group>
+        </>
+      )}
     </Segment>
   );
 }