@truedat/qx 5.14.1 → 5.15.0

package/src/components/functions/__tests__/__snapshots__/FunctionParams.spec.js.snap

@@ -111,7 +111,7 @@ exports[`<FunctionParams /> matches the latest snapshot with param 1`] = `
                             <span
                               class="text"
                             >
-                              numeric
+                              number
                             </span>
                           </div>
                           <div

package/src/hooks/__tests__/{useDataSets.spec.js → useDataViews.spec.js}

@@ -1,8 +1,8 @@
 import useSWR from "swr";
 import { renderHook } from "@testing-library/react-hooks";
 import { apiJson } from "@truedat/core/services/api";
-import { API_DATA_SETS } from "../../api";
-import { useDataSets } from "../useDataSets";
+import { API_DATA_VIEWS } from "../../api";
+import { useDataViews } from "../useDataViews";
 
 jest.mock("swr", () => ({
   __esModule: true,
@@ -13,9 +13,9 @@ jest.mock("swr", () => ({
   })),
 }));
 
-describe("useDataSets", () => {
+describe("useDataViews", () => {
   it("calls useSWR with correct api route", () => {
-    const { result } = renderHook(() => useDataSets());
+    const { result } = renderHook(() => useDataViews());
 
     expect(result.current).toMatchObject({
       data: "data",
@@ -23,6 +23,6 @@ describe("useDataSets", () => {
       loading: false,
     });
 
-    expect(useSWR).toHaveBeenCalledWith(API_DATA_SETS, apiJson);
+    expect(useSWR).toHaveBeenCalledWith(API_DATA_VIEWS, apiJson);
   });
 });

package/src/hooks/useDataViews.js

@@ -0,0 +1,33 @@
+import { compile } from "path-to-regexp";
+import useSWR from "swr";
+import useSWRMutations from "swr/mutation";
+import {
+  apiJson,
+  apiJsonPost,
+  apiJsonPatch,
+  apiJsonDelete,
+} from "@truedat/core/services/api";
+import { API_DATA_VIEWS, API_DATA_VIEW } from "../api";
+
+export const useDataViews = () => {
+  const { data, error, mutate } = useSWR(API_DATA_VIEWS, apiJson);
+  return { data: data?.data, error, loading: !error && !data, mutate };
+};
+
+export const useDataViewCreate = () => {
+  return useSWRMutations(API_DATA_VIEWS, (url, { arg }) =>
+    apiJsonPost(url, arg)
+  );
+};
+
+export const useDataViewUpdate = (dataView) => {
+  const id = dataView?.id || 0;
+  const url = compile(API_DATA_VIEW)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
+};
+
+export const useDataViewDelete = (dataView) => {
+  const id = dataView?.id || 0;
+  const url = compile(API_DATA_VIEW)({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonDelete(url, arg));
+};

package/src/styles/Expression.less

@@ -10,6 +10,16 @@
   display: flex;
   align-items: center;
 }
+.flex-center-gap {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.flex-justify-center {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
 .flex-column {
   display: flex;
   flex-direction: column;
@@ -100,3 +110,143 @@ ul.function-tree {
 .function-tree li:last-child:after {
   display: none;
 }
+
+.clause-and-group {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  margin-bottom: 5px;
+  height: 32px;
+}
+
+.condition-row {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.condition-operator-trigger {
+  margin-right: 15px;
+  margin-left: 15px;
+  padding: 6.5px;
+  border: 1px solid rgba(34,36,38, 0.15);
+  border-radius: 4px;
+  min-width: 50px;
+  text-align: center;
+}
+
+.vertical-space {
+  margin: 10px 0px 5px 0px;
+}
+
+.queryable-label {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  height: 32px;
+}
+
+.delete-expression-column {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+
+
+
+
+
+.join_type{
+  display:inline-flex;
+  left: 25%;
+}
+.join_type .circle{
+  display:flex;
+  box-sizing: border-box;
+  width:20px;
+  height:20px;
+  border-radius:50%;
+  border: 2px solid black;
+  z-index: 1;
+}
+.join_type .circle.fill{
+  background:orange;
+}
+.join_type .circle.fill.white {
+  background:white;
+}
+.join_type .circle-left{
+  display:block;
+  overflow:hidden;
+  position:relative;
+}
+.join_type .circle-center{
+  top: -2px;
+  right: calc(-75% + 2px);
+  position:absolute;
+}
+.join_type .circle-right{
+  overflow:hidden;
+  position:relative;
+  right: 25%;
+  z-index: 0;
+}
+
+.error-popup {
+  white-space: normal;
+  background: #ffffff !important;
+  border: 1px solid #E0B4B4 !important;
+  color: #9F3A38 !important;
+  padding: 0.5833em 0.833em !important;
+  font-size: 0.85714286rem !important;
+  font-weight: 700 !important;
+}
+
+.select-field-dropdown {
+  padding: 0.36em 1em !important;   
+   display: flex !important;
+  align-items: center;
+}
+
+//JOIN TYPE ICONS
+
+.join-type-dropdown {
+  padding: 0.57em 1em !important;
+  cursor: pointer;
+  word-wrap: break-word;
+  line-height: 1em;
+  white-space: normal;
+  outline: 0;
+  transform: rotateZ(0deg);
+  min-width: 14em;
+  min-height: 2.71428571em;
+  background: #ffffff;
+  color: #0d0d0d;
+  box-shadow: none;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  border-radius: 0.28571429rem;
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.join-type-dropdown-menu {
+  overflow-x: hidden;
+  overflow-y: auto;
+  backface-visibility: hidden;
+  -webkit-overflow-scrolling: touch;
+  border-top-width: 0px !important;
+  width: auto;
+  outline: none;
+  margin: 0px -1px;
+  min-width: calc(100% + 2px );
+  width: calc(100% + 2px );
+  border-radius: 0em 0em 0.28571429rem 0.28571429rem;
+  box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
+  transition: opacity 0.1s ease;
+}
+.join-type-dropdown-item {
+  display: flex !important;
+  align-items: center;
+}

package/src/types.js

@@ -1,9 +1,11 @@
 import _ from "lodash/fp";
+import React from "react";
+import { Label } from "semantic-ui-react";
 
 export const types = [
   "boolean",
   "string",
-  "numeric",
+  "number",
   "date",
   "timestamp",
   "any",
@@ -16,7 +18,7 @@ export const typeToIcon = (value) => {
     value
   )({
     string: "font",
-    numeric: "hashtag",
+    number: "hashtag",
     date: "calendar alternate outline",
     timestamp: "clock outline",
     // "any": "asterisk",
@@ -31,8 +33,14 @@ export const typeToColor = (value) => {
   )({
     boolean: "teal",
     string: "purple",
-    numeric: "blue",
+    number: "blue",
     date: "olive",
     timestamp: "brown",
   });
 };
+
+export const typeLabel = (value) => (
+  <Label size="tiny" circular color={typeToColor(value)} width="100px">
+    {value[0]}
+  </Label>
+);

package/src/components/DataSets.js

@@ -1,64 +0,0 @@
-import React from "react";
-import { useIntl, FormattedMessage } from "react-intl";
-import { columnDecorator } from "@truedat/core/services";
-import { Header, Icon, Table, Segment } from "semantic-ui-react";
-
-import { useDataSets } from "../hooks/useDataSets";
-
-export default function DataSets() {
-  const { formatMessage } = useIntl();
-  const { data, loading } = useDataSets();
-
-  const dataSets = data?.data;
-
-  const columns = [
-    { name: "name" },
-    {
-      name: "data_structure",
-      fieldDecorator: (ds) => ds?.external_id,
-    },
-  ];
-
-  return (
-    <Segment loading={loading}>
-      <Header as="h2">
-        <Icon circular name="archive" />
-        <Header.Content>
-          <FormattedMessage id="data_sets.header" />
-          <Header.Subheader>
-            <FormattedMessage id="data_sets.subheader" />
-          </Header.Subheader>
-        </Header.Content>
-      </Header>
-      <Table basic="very">
-        <Table.Header>
-          <Table.Row>
-            {columns.map((column, i) => (
-              <Table.HeaderCell
-                key={i}
-                content={formatMessage({
-                  id: `data_sets.column.${column.name}`,
-                  defaultMessage: column.name,
-                })}
-              />
-            ))}
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {dataSets
-            ? dataSets.map((dataSet, i) => (
-                <Table.Row key={i}>
-                  {columns.map((column, key) => (
-                    <Table.Cell
-                      key={key}
-                      content={columnDecorator(column)(dataSet)}
-                    />
-                  ))}
-                </Table.Row>
-              ))
-            : null}
-        </Table.Body>
-      </Table>
-    </Segment>
-  );
-}

package/src/components/__tests__/DataSets.spec.js

@@ -1,46 +0,0 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import DataSets from "../DataSets";
-
-jest.mock("../../hooks/useDataSets.js", () => {
-  const originalModule = jest.requireActual("../../hooks/useDataSets.js");
-
-  return {
-    __esModule: true,
-    ...originalModule,
-    useDataSets: jest.fn(() => ({
-      data: {
-        data: [
-          {
-            name: "DataSet1",
-            data_structure: { external_id: "Structure1" },
-          },
-          {
-            name: "DataSet2",
-            data_structure: { external_id: "Structure2" },
-          },
-        ],
-      },
-      loading: false,
-    })),
-  };
-});
-
-describe("<DataSets />", () => {
-  const renderOpts = {
-    messages: {
-      en: {
-        "data_sets.header": "data_sets.header",
-        "data_sets.subheader": "data_sets.subheader",
-        "data_sets.column.name": "data_sets.column.name",
-        "data_sets.column.data_structure": "data_sets.column.data_structure",
-      },
-    },
-    fallback: "lazy",
-  };
-
-  it("matches the latest snapshot", () => {
-    const { container } = render(<DataSets />, renderOpts);
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/__tests__/__snapshots__/DataSets.spec.js.snap

@@ -1,82 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<DataSets /> matches the latest snapshot 1`] = `
-<div>
-  <div
-    class="ui segment"
-  >
-    <h2
-      class="ui header"
-    >
-      <i
-        aria-hidden="true"
-        class="archive circular icon"
-      />
-      <div
-        class="content"
-      >
-        data_sets.header
-        <div
-          class="sub header"
-        >
-          data_sets.subheader
-        </div>
-      </div>
-    </h2>
-    <table
-      class="ui very basic table"
-    >
-      <thead
-        class=""
-      >
-        <tr
-          class=""
-        >
-          <th
-            class=""
-          >
-            data_sets.column.name
-          </th>
-          <th
-            class=""
-          >
-            data_sets.column.data_structure
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class=""
-      >
-        <tr
-          class=""
-        >
-          <td
-            class=""
-          >
-            DataSet1
-          </td>
-          <td
-            class=""
-          >
-            Structure1
-          </td>
-        </tr>
-        <tr
-          class=""
-        >
-          <td
-            class=""
-          >
-            DataSet2
-          </td>
-          <td
-            class=""
-          >
-            Structure2
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;

package/src/components/functions/expressions/Expression.js

@@ -1,40 +0,0 @@
-import _ from "lodash/fp";
-import React, { useContext, useEffect } from "react";
-import PropTypes from "prop-types";
-import { useFormContext } from "react-hook-form";
-import QxContext from "@truedat/qx/components/QxContext";
-import ShapeSelector from "./ShapeSelector";
-import FunctionSelector from "./FunctionSelector";
-import ParamSelector from "./ParamSelector";
-import FieldSelector from "./FieldSelector";
-import ConstantSelector from "./ConstantSelector";
-
-export default function Expression({ defaultShape = "function" }) {
-  const { field } = useContext(QxContext);
-  const { watch, setValue } = useFormContext();
-  const shape = watch(`${field}.shape`);
-
-  useEffect(() => {
-    if (!shape) {
-      setValue(`${field}.shape`, defaultShape, { shouldValidate: true });
-    }
-  }, [shape]);
-
-  const valueComponentForShape = {
-    function: <FunctionSelector />,
-    constant: <ConstantSelector />,
-    param: <ParamSelector />,
-    field: <FieldSelector />,
-  };
-
-  return (
-    <div className="expression-container">
-      <ShapeSelector />
-      {shape ? valueComponentForShape[shape] : null}
-    </div>
-  );
-}
-
-Expression.propTypes = {
-  defaultShape: PropTypes.string,
-};

package/src/components/functions/expressions/FieldSelector.js

@@ -1,56 +0,0 @@
-import _ from "lodash/fp";
-import React, { useContext } from "react";
-import { Controller, useFormContext } from "react-hook-form";
-import { Dropdown, Label } from "semantic-ui-react";
-
-import QxContext from "@truedat/qx/components/QxContext";
-
-export const fieldsToOptions = (fields) =>
-  _.map((field) => ({
-    key: JSON.stringify(field),
-    value: field,
-    text: field.name,
-    content: (
-      <>
-        {field.dataset ? (
-          <Label
-            color={field.dataset?.color}
-            content={field.dataset?.alias || field.dataset?.name}
-          />
-        ) : null}
-        {field.name}
-      </>
-    ),
-    color: field.dataset?.color,
-  }))(fields);
-
-export default function FieldSelector() {
-  const { field, type, fields } = useContext(QxContext);
-  const { control } = useFormContext();
-  const fieldOptions = _.flow(
-    _.filter((field) => type === "any" || field.type == type),
-    fieldsToOptions
-  )(fields);
-
-  return _.isEmpty(fieldOptions) ? null : (
-    <Controller
-      control={control}
-      name={`${field}.value`}
-      rules={{ required: true }}
-      render={({
-        field: { onBlur, onChange, value },
-        fieldState: { error },
-      }) => (
-        <Dropdown
-          selection
-          fluid
-          onBlur={onBlur}
-          error={!!error}
-          options={fieldOptions}
-          value={value}
-          onChange={(_e, { value }) => onChange(value)}
-        />
-      )}
-    />
-  );
-}