@teselagen/ui 0.7.33-beta.3 → 0.7.33-beta.5

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

@@ -0,0 +1,250 @@
+import { camelCase } from "lodash-es";
+
+export function tableQueryParamsToHasuraClauses({
+  page,
+  pageSize,
+  searchTerm,
+  filters,
+  order,
+  schema, // Add schema as a parameter
+  additionalFilter
+}) {
+  const ccFields = getFieldsMappedByCCDisplayName(schema);
+  let where = {};
+  const order_by = {};
+  const limit = pageSize || 25;
+  const offset = page && pageSize ? (page - 1) * pageSize : 0;
+
+  if (searchTerm) {
+    const searchTermFilters = [];
+    schema.fields.forEach(field => {
+      const { type, path, searchDisabled } = field;
+      if (searchDisabled || field.filterDisabled || type === "color") return;
+      const filterValue = searchTerm; // No cleaning needed here, we're using _ilike
+
+      if (type === "string" || type === "lookup") {
+        searchTermFilters.push({
+          [path]: { _ilike: `%${filterValue}%` }
+        });
+      } else if (type === "boolean") {
+        let regex;
+        try {
+          regex = new RegExp("^" + searchTerm, "ig");
+        } catch (error) {
+          //ignore
+        }
+        if (regex) {
+          if ("true".replace(regex, "") !== "true") {
+            searchTermFilters.push({
+              [path]: { _eq: true }
+            });
+          } else if ("false".replace(regex, "") !== "false") {
+            searchTermFilters.push({
+              [path]: { _eq: false }
+            });
+          }
+        }
+      } else if (
+        (type === "number" || type === "integer") &&
+        !isNaN(filterValue)
+      ) {
+        searchTermFilters.push({
+          [path]: { _eq: parseFloat(filterValue) }
+        });
+      }
+    });
+    if (searchTermFilters.length > 0) {
+      if (Object.keys(where).length > 0) {
+        where = { _and: [where, { _or: searchTermFilters }] };
+      } else {
+        where = { _or: searchTermFilters };
+      }
+    }
+  }
+
+  if (filters && filters.length > 0) {
+    const filterClauses = filters.map(filter => {
+      let { selectedFilter, filterOn, filterValue } = filter;
+      const fieldSchema = ccFields[filterOn] || {};
+
+      const { path, reference, type } = fieldSchema;
+      let stringFilterValue =
+        filterValue && filterValue.toString
+          ? filterValue.toString()
+          : filterValue;
+      if (stringFilterValue === false) {
+        // we still want to be able to search for the string "false" which will get parsed to false
+        stringFilterValue = "false";
+      } else {
+        stringFilterValue = stringFilterValue || "";
+      }
+      const arrayFilterValue = Array.isArray(filterValue)
+        ? filterValue
+        : stringFilterValue.split(";");
+
+      if (type === "number" || type === "integer") {
+        filterValue = Array.isArray(filterValue)
+          ? filterValue.map(val => Number(val))
+          : Number(filterValue);
+      }
+
+      if (fieldSchema.normalizeFilter) {
+        filterValue = fieldSchema.normalizeFilter(
+          filterValue,
+          selectedFilter,
+          filterOn
+        );
+      }
+
+      if (reference) {
+        filterOn = reference.sourceField;
+      } else {
+        filterOn = path || filterOn;
+      }
+
+      switch (selectedFilter) {
+        case "none":
+          return {};
+        case "startsWith":
+          return { [filterOn]: { _ilike: `${filterValue}%` } };
+        case "endsWith":
+          return { [filterOn]: { _ilike: `%${filterValue}` } };
+        case "contains":
+          return { [filterOn]: { _ilike: `%${filterValue}%` } };
+        case "notContains":
+          return { [filterOn]: { _not_ilike: `%${filterValue}%` } };
+        case "isExactly":
+          return { [filterOn]: { _eq: filterValue } };
+        case "isEmpty":
+          return {
+            _or: [
+              { [filterOn]: { _eq: "" } },
+              { [filterOn]: { _is_null: true } }
+            ]
+          };
+        case "notEmpty":
+          return {
+            _and: [
+              { [filterOn]: { _neq: "" } },
+              { [filterOn]: { _is_null: false } }
+            ]
+          };
+        case "inList":
+          return { [filterOn]: { _in: filterValue } };
+        case "notInList":
+          return { [filterOn]: { _nin: filterValue } };
+        case "true":
+          return { [filterOn]: { _eq: true } };
+        case "false":
+          return { [filterOn]: { _eq: false } };
+        case "dateIs":
+          return { [filterOn]: { _eq: filterValue } };
+        case "notBetween":
+          return {
+            _or: [
+              {
+                [filterOn]: {
+                  _lt: new Date(arrayFilterValue[0])
+                }
+              },
+              {
+                [filterOn]: {
+                  _gt: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+                }
+              }
+            ]
+          };
+        case "isBetween":
+          return {
+            [filterOn]: {
+              _gte: new Date(arrayFilterValue[0]),
+              _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+            }
+          };
+        case "isBefore":
+          return { [filterOn]: { _lt: new Date(filterValue) } };
+        case "isAfter":
+          return { [filterOn]: { _gt: new Date(filterValue) } };
+        case "greaterThan":
+          return { [filterOn]: { _gt: parseFloat(filterValue) } };
+        case "lessThan":
+          return { [filterOn]: { _lt: parseFloat(filterValue) } };
+        case "inRange":
+          return {
+            [filterOn]: {
+              _gte: parseFloat(arrayFilterValue[0]),
+              _lte: parseFloat(arrayFilterValue[1])
+            }
+          };
+        case "outsideRange":
+          return {
+            _or: [
+              {
+                [filterOn]: {
+                  _lt: parseFloat(arrayFilterValue[0])
+                }
+              },
+              {
+                [filterOn]: {
+                  _gt: parseFloat(arrayFilterValue[1])
+                }
+              }
+            ]
+          };
+        case "equalTo":
+          return { [filterOn]: { _eq: parseFloat(filterValue) } };
+        case "regex":
+          return { [filterOn]: { _regex: filterValue } };
+        default:
+          console.warn(`Unsupported filter type: ${selectedFilter}`);
+          return {};
+      }
+    });
+
+    if (filterClauses.length > 0) {
+      if (Object.keys(where).length > 0) {
+        where = { _and: [where, ...filterClauses] };
+      } else {
+        where = { _and: filterClauses };
+      }
+    }
+  }
+
+  if (order && order.length > 0) {
+    order.forEach(item => {
+      const field = item.startsWith("-") ? item.substring(1) : item;
+      const direction = item.startsWith("-") ? "desc" : "asc";
+      order_by[field] = direction;
+    });
+  }
+
+  if (additionalFilter) {
+    where = { _and: [where, additionalFilter] };
+  }
+  return { where, order_by, limit, offset };
+}
+
+/**
+ * Takes a schema and returns an object with the fields mapped by their camelCased display name.
+ * If the displayName is not set or is a jsx element, the path is used instead.
+ * The same conversion must be done when using the result of this method
+ */
+export function getFieldsMappedByCCDisplayName(schema) {
+  if (!schema || !schema.fields) return {};
+  return schema.fields.reduce((acc, field) => {
+    const ccDisplayName = getCCDisplayName(field);
+    acc[ccDisplayName] = field;
+    return acc;
+  }, {});
+}
+
+/**
+ *
+ * @param {object} field
+ * @returns the camelCase display name of the field, to be used for filters, sorting, etc
+ */
+export function getCCDisplayName(field) {
+  return camelCase(
+    typeof field.displayName === "string" ? field.displayName : field.path
+  );
+}

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.test.js

@@ -0,0 +1,206 @@
+import { tableQueryParamsToHasuraClauses } from "./tableQueryParamsToHasuraClauses";
+
+describe("tableQueryParamsToHasuraClauses", () => {
+  const schema = {
+    fields: [
+      { path: "name", type: "string" },
+      { path: "age", type: "number" },
+      { path: "isActive", type: "boolean" },
+      { path: "email", type: "string" }
+    ]
+  };
+
+  it("should handle empty query params", () => {
+    const result = tableQueryParamsToHasuraClauses({});
+    expect(result).toEqual({
+      where: {},
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle page and pageSize", () => {
+    const result = tableQueryParamsToHasuraClauses({ page: 2, pageSize: 10 });
+    expect(result).toEqual({
+      where: {},
+      order_by: {},
+      limit: 10,
+      offset: 10
+    });
+  });
+
+  it("should handle searchTerm with string fields", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test",
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
+      },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle searchTerm with number fields", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "30",
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [
+          { name: { _ilike: "%30%" } },
+          { age: { _eq: 30 } },
+          { email: { _ilike: "%30%" } }
+        ]
+      },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle searchTerm with boolean fields", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "true",
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [
+          { name: { _ilike: "%true%" } },
+          { isActive: { _eq: true } },
+          { email: { _ilike: "%true%" } }
+        ]
+      },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle searchTerm with multiple field types", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test",
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
+      },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle contains filter", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      filters: [
+        {
+          selectedFilter: "contains",
+          filterOn: "name",
+          filterValue: "test"
+        }
+      ]
+    });
+    expect(result).toEqual({
+      where: { _and: [{ name: { _ilike: "%test%" } }] },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle equalTo filter for number", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      filters: [
+        { selectedFilter: "equalTo", filterOn: "age", filterValue: "30" }
+      ],
+      schema
+    });
+    expect(result).toEqual({
+      where: { _and: [{ age: { _eq: 30 } }] },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should handle order", () => {
+    const result = tableQueryParamsToHasuraClauses({ order: ["name", "-age"] });
+    expect(result).toEqual({
+      where: {},
+      order_by: { name: "asc", age: "desc" },
+      limit: 25,
+      offset: 0
+    });
+  });
+
+  it("should combine all params", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      page: 2,
+      pageSize: 10,
+      searchTerm: "test",
+      filters: [
+        {
+          selectedFilter: "greaterThan",
+          filterOn: "age",
+          filterValue: "30"
+        }
+      ],
+      order: ["name"],
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _and: [
+          {
+            _or: [
+              { name: { _ilike: "%test%" } },
+              { email: { _ilike: "%test%" } }
+            ]
+          },
+          { age: { _gt: 30 } }
+        ]
+      },
+      order_by: { name: "asc" },
+      limit: 10,
+      offset: 10
+    });
+  });
+
+  it("should combine searchTerm and filters", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test",
+      filters: [
+        {
+          selectedFilter: "greaterThan",
+          filterOn: "age",
+          filterValue: "30"
+        }
+      ],
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _and: [
+          {
+            _or: [
+              { name: { _ilike: "%test%" } },
+              { email: { _ilike: "%test%" } }
+            ]
+          },
+          { age: { _gt: 30 } }
+        ]
+      },
+      order_by: {},
+      limit: 25,
+      offset: 0
+    });
+  });
+});

package/src/{withTableParams.js → DataTable/utils/withTableParams.js}

@@ -6,13 +6,13 @@ import {
   makeDataTableHandlers,
   getQueryParams,
   setCurrentParamsOnUrl,
-  getCurrentParamsFromUrl,
-  getCCDisplayName
+  getCurrentParamsFromUrl
 } from "./queryParams";
 import { withRouter } from "react-router-dom";
 import getTableConfigFromStorage from "./getTableConfigFromStorage";
 import { useDeepEqualMemo } from "../../utils/hooks/useDeepEqualMemo";
 import { branch, compose } from "recompose";
+import { getCCDisplayName } from "./tableQueryParamsToHasuraClauses";
 
 /**
  *  Note all these options can be passed at Design Time or at Runtime (like reduxForm())

package/src/DialogFooter/index.js

@@ -0,0 +1,86 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+import React, { useRef } from "react";
+import { Intent, Button, Classes } from "@blueprintjs/core";
+import { noop } from "lodash-es";
+import classNames from "classnames";
+
+function DialogFooter({
+  hideModal,
+  loading,
+  submitting,
+  onBackClick,
+  style,
+  onClick = noop,
+  secondaryAction,
+  secondaryDisabled,
+  secondaryNotMinimal,
+  intent = Intent.PRIMARY,
+  secondaryIntent,
+  backText = "Back",
+  secondaryText = "Cancel",
+  additionalButtons,
+  className,
+  secondaryClassName = "",
+  text = "Submit",
+  disabled,
+  containerClassname,
+  noCancel
+}) {
+  const divRef = useRef();
+  return (
+    <div
+      style={style}
+      ref={divRef}
+      className={classNames(Classes.DIALOG_FOOTER, containerClassname)}
+    >
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        {onBackClick && (
+          <Button
+            className={Classes.MINIMAL + " " + secondaryClassName}
+            text={backText}
+            onClick={onBackClick}
+          />
+        )}
+        {!noCancel && (
+          <Button
+            intent={secondaryIntent}
+            disabled={secondaryDisabled}
+            className={
+              (!secondaryNotMinimal ? Classes.MINIMAL : "") +
+              " " +
+              secondaryClassName
+            }
+            text={secondaryText}
+            onClick={
+              secondaryAction ||
+              hideModal ||
+              function () {
+                try {
+                  divRef.current
+                    .closest(".bp3-dialog")
+                    .querySelector(".bp3-dialog-close-button")
+                    .click();
+                } catch (error) {
+                  console.error(`error closing dialog:`, error);
+                }
+              }
+            }
+          />
+        )}
+        {additionalButtons}
+        <Button
+          text={text}
+          intent={intent}
+          type="submit"
+          className={className}
+          onClick={onClick}
+          disabled={disabled}
+          loading={loading || submitting}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default DialogFooter;

package/src/DialogFooter/style.css

@@ -0,0 +1,9 @@
+.tg-dialog-footer-error {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 5;
+}
+
+.tg-dialog-footer-error .bp3-form-group {
+  margin-bottom: 0;
+}