@teselagen/ui 0.7.32 → 0.7.33-beta.2

package/src/DisabledLoadingComponent.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { ReactTableDefaults } from "@teselagen/react-table";
+const { LoadingComponent } = ReactTableDefaults;
+
+function DisabledLoadingComponent({ disabled, loading, loadingText }) {
+  return (
+    <LoadingComponent
+      className={disabled ? "disabled" : ""}
+      loading={loading}
+      loadingText={disabled ? "" : loadingText}
+    />
+  );
+}
+
+export default DisabledLoadingComponent;

package/src/DisplayOptions.js

@@ -0,0 +1,199 @@
+import React, { useState } from "react";
+import { map, isEmpty, noop, startCase } from "lodash-es";
+import {
+  Button,
+  Checkbox,
+  Menu,
+  MenuItem,
+  Classes,
+  InputGroup,
+  Popover,
+  Switch
+} from "@blueprintjs/core";
+import { getCCDisplayName } from "./utils/queryParams";
+
+const DisplayOptions = ({
+  compact,
+  extraCompact,
+  disabled,
+  hideDisplayOptionsIcon,
+  resetDefaultVisibility = noop,
+  updateColumnVisibility = noop,
+  updateTableDisplayDensity,
+  showForcedHiddenColumns,
+  setShowForcedHidden,
+  hasOptionForForcedHidden,
+  schema
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerms, setSearchTerms] = useState({});
+
+  const changeTableDensity = e => {
+    updateTableDisplayDensity(e.target.value);
+    setIsOpen(false);
+  };
+
+  const toggleForcedHidden = e => setShowForcedHidden(e.target.checked);
+
+  if (hideDisplayOptionsIcon) {
+    return null; //don't show antyhing!
+  }
+  const { fields } = schema;
+  const fieldGroups = {};
+  const mainFields = [];
+
+  fields.forEach(field => {
+    if (field.hideInMenu) return;
+    if (!field.fieldGroup) return mainFields.push(field);
+    if (!fieldGroups[field.fieldGroup]) fieldGroups[field.fieldGroup] = [];
+    fieldGroups[field.fieldGroup].push(field);
+  });
+
+  let numVisible = 0;
+
+  const getFieldCheckbox = (field, i) => {
+    const { displayName, isHidden, isForcedHidden, path } = field;
+    if (isForcedHidden) return;
+    if (!isHidden) numVisible++;
+    return (
+      <Checkbox
+        name={`${path}-${i}`}
+        key={path || i}
+        onChange={() => {
+          if (numVisible <= 1 && !isHidden) {
+            return window.toastr.warning(
+              "We have to display at least one column :)"
+            );
+          }
+          updateColumnVisibility({ shouldShow: isHidden, path });
+        }}
+        checked={!isHidden}
+        label={displayName}
+      />
+    );
+  };
+
+  let fieldGroupMenu;
+  if (!isEmpty(fieldGroups)) {
+    fieldGroupMenu = map(fieldGroups, (groupFields, groupName) => {
+      const searchTerm = searchTerms[groupName] || "";
+      const anyVisible = groupFields.some(
+        field => !field.isHidden && !field.isForcedHidden
+      );
+      const anyNotForcedHidden = groupFields.some(
+        field => !field.isForcedHidden
+      );
+      if (!anyNotForcedHidden) return;
+      return (
+        <MenuItem key={groupName} text={groupName}>
+          <InputGroup
+            leftIcon="search"
+            value={searchTerm}
+            onChange={e => {
+              setSearchTerms(prev => ({
+                ...prev,
+                [groupName]: e.target.value
+              }));
+            }}
+          />
+          <Button
+            className={Classes.MINIMAL}
+            text={(anyVisible ? "Hide" : "Show") + " All"}
+            style={{ margin: "10px 0" }}
+            onClick={() => {
+              updateColumnVisibility({
+                shouldShow: !anyVisible,
+                paths: groupFields.map(field => field.path)
+              });
+            }}
+          />
+          {groupFields
+            .filter(
+              field =>
+                startCase(getCCDisplayName(field)) // We have to use startCase with the camelCase here because the displayName is not always a string
+                  .toLowerCase()
+                  .indexOf(searchTerm.toLowerCase()) > -1
+            )
+            .map(getFieldCheckbox)}
+        </MenuItem>
+      );
+    });
+  }
+
+  return (
+    <Popover
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      content={
+        <Menu>
+          <div style={{ padding: 10, paddingLeft: 20, paddingRight: 20 }}>
+            <h5 style={{ marginBottom: 10 }}>Display Density:</h5>
+            <div className={Classes.SELECT + " tg-table-display-density"}>
+              <select
+                onChange={changeTableDensity}
+                value={
+                  extraCompact ? "extraCompact" : compact ? "compact" : "normal"
+                }
+              >
+                <option className={Classes.POPOVER_DISMISS} value="normal">
+                  Comfortable
+                </option>
+                {/* tnr: as you can see we're calling what was "compact" Normal now in response to https://github.com/TeselaGen/lims/issues/4713 */}
+                <option className={Classes.POPOVER_DISMISS} value="compact">
+                  Normal
+                </option>
+                <option
+                  className={Classes.POPOVER_DISMISS}
+                  value="extraCompact"
+                >
+                  Compact
+                </option>
+              </select>
+            </div>
+            <h5 style={{ marginBottom: 10, marginTop: 10 }}>
+              Displayed Columns:
+            </h5>
+            <div style={{ maxHeight: 260, overflowY: "auto", padding: 2 }}>
+              {mainFields.map(getFieldCheckbox)}
+            </div>
+            <div>{fieldGroupMenu}</div>
+            {hasOptionForForcedHidden && (
+              <div style={{ marginTop: 15 }}>
+                <Switch
+                  label="Show Empty Columns"
+                  checked={showForcedHiddenColumns}
+                  onChange={toggleForcedHidden}
+                />
+              </div>
+            )}
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                justifyContent: "flex-end"
+              }}
+            >
+              <Button
+                onClick={resetDefaultVisibility}
+                title="Display Options"
+                minimal
+              >
+                Reset
+              </Button>
+            </div>
+          </div>
+        </Menu>
+      }
+    >
+      <Button
+        className="tg-table-display-options"
+        onClick={() => setIsOpen(true)}
+        disabled={disabled}
+        minimal
+        icon="cog"
+      />
+    </Popover>
+  );
+};
+
+export default DisplayOptions;

package/src/DropdownCell.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import TgSelect from "../TgSelect";
+
+export const DropdownCell = ({
+  options,
+  isMulti,
+  initialValue,
+  finishEdit,
+  cancelEdit,
+  dataTest
+}) => {
+  const [v, setV] = useState(
+    isMulti
+      ? initialValue.split(",").map(v => ({ value: v, label: v }))
+      : initialValue
+  );
+  return (
+    <div
+      className={classNames("tg-dropdown-cell-edit-container", {
+        "tg-dropdown-cell-edit-container-multi": isMulti
+      })}
+    >
+      <TgSelect
+        small
+        multi={isMulti}
+        autoOpen
+        value={v}
+        onChange={val => {
+          if (isMulti) {
+            setV(val);
+            return;
+          }
+          finishEdit(val ? val.value : null);
+        }}
+        {...dataTest}
+        popoverProps={{
+          onClose: e => {
+            if (isMulti) {
+              if (e && e.key === "Escape") {
+                cancelEdit();
+              } else {
+                finishEdit(
+                  v && v.map
+                    ? v
+                        .map(v => v.value)
+                        .filter(v => v)
+                        .join(",")
+                    : v
+                );
+              }
+            } else {
+              cancelEdit();
+            }
+          }
+        }}
+        options={options.map(value => ({ label: value, value }))}
+      />
+    </div>
+  );
+};

package/src/EditableCell.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef, useState } from "react";
+
+export const EditableCell = ({
+  cancelEdit,
+  dataTest,
+  finishEdit,
+  isNumeric,
+  initialValue
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isNumeric]);
+
+  return (
+    <input
+      style={{
+        border: 0,
+        width: "95%",
+        fontSize: 12,
+        background: "none"
+      }}
+      ref={inputRef}
+      {...dataTest}
+      autoFocus
+      onKeyDown={e => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.target.blur();
+        } else if (e.key === "Escape") {
+          cancelEdit();
+        }
+      }}
+      onBlur={() => finishEdit(value)}
+      onChange={e => setValue(e.target.value)}
+      type={isNumeric ? "number" : undefined}
+      value={value}
+    />
+  );
+};

package/src/FilterAndSortMenu.js

@@ -0,0 +1,388 @@
+import React, { useState } from "react";
+import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
+import { camelCase, startCase } from "lodash-es";
+import classNames from "classnames";
+import {
+  Menu,
+  Intent,
+  MenuDivider,
+  InputGroup,
+  Classes,
+  NumericInput,
+  MenuItem
+} from "@blueprintjs/core";
+import dayjs from "dayjs";
+
+import getDayjsFormatter from "../utils/getDayjsFormatter";
+import { onEnterHelper } from "../utils/handlerHelpers";
+import DialogFooter from "../DialogFooter";
+import TgSelect from "../TgSelect";
+import "@teselagen/react-table/react-table.css";
+import "./style.css";
+import "../toastr";
+
+const filterTypesDictionary = {
+  none: "",
+  startsWith: "text",
+  endsWith: "text",
+  contains: "text",
+  notContains: "text",
+  isExactly: "text",
+  isEmpty: "text",
+  notEmpty: "text",
+  inList: "list",
+  notInList: "list",
+  true: "boolean",
+  false: "boolean",
+  dateIs: "date",
+  notBetween: "dateRange",
+  isBetween: "dateRange",
+  isBefore: "date",
+  isAfter: "date",
+  greaterThan: "number",
+  lessThan: "number",
+  inRange: "numberRange",
+  outsideRange: "numberRange",
+  equalTo: "number",
+  regex: "text"
+};
+
+const isInvalidFilterValue = value => {
+  if (Array.isArray(value) && value.length) {
+    return value.some(item => isInvalidFilterValue(item));
+  }
+  return value === "" || value === undefined || value.length === 0;
+};
+
+const FilterAndSortMenu = ({
+  dataType,
+  togglePopover,
+  filterOn,
+  addFilters,
+  removeSingleFilter,
+  currentFilter
+}) => {
+  const [selectedFilter, setSelectedFilter] = useState(
+    currentFilter?.selectedFilter ?? camelCase(getFilterMenuItems(dataType)[0])
+  );
+  const [filterValue, setFilterValue] = useState(
+    currentFilter?.filterValue ?? ""
+  );
+
+  const handleFilterChange = selectedFilter => {
+    if (
+      filterValue &&
+      !Array.isArray(filterValue) &&
+      filterTypesDictionary[selectedFilter] === "list"
+    ) {
+      setFilterValue(filterValue?.split(" ") || []);
+    } else if (
+      filterTypesDictionary[selectedFilter] === "text" &&
+      Array.isArray(filterValue)
+    ) {
+      setFilterValue(filterValue.join(" "));
+    }
+    setSelectedFilter(camelCase(selectedFilter));
+  };
+
+  const handleFilterValueChange = filterValue => setFilterValue(filterValue);
+
+  const handleFilterSubmit = () => {
+    const ccSelectedFilter = camelCase(selectedFilter);
+    let filterValToUse = filterValue;
+    if (ccSelectedFilter === "true" || ccSelectedFilter === "false") {
+      //manually set the filterValue because none is set when type=boolean
+      filterValToUse = ccSelectedFilter;
+    } else if (ccSelectedFilter === "notEmpty") {
+      // manually set filter value (nothing is selected by user)
+      filterValToUse = true;
+    } else if (ccSelectedFilter === "isEmpty") {
+      // manually set filter value (nothing is selected by user)
+      filterValToUse = false;
+    } else if (
+      ccSelectedFilter === "inList" ||
+      ccSelectedFilter === "notInList"
+    ) {
+      if (dataType === "number") {
+        filterValToUse =
+          filterValue &&
+          filterValue.map(val => parseFloat(val.replaceAll(",", "")));
+      }
+    }
+
+    if (isInvalidFilterValue(filterValToUse)) {
+      togglePopover();
+      return removeSingleFilter(filterOn);
+    }
+    addFilters([
+      {
+        filterOn,
+        selectedFilter: ccSelectedFilter,
+        filterValue: filterValToUse
+      }
+    ]);
+    togglePopover();
+  };
+
+  const filterMenuItems = getFilterMenuItems(dataType);
+  const ccSelectedFilter = camelCase(selectedFilter);
+  const requiresValue = ccSelectedFilter && ccSelectedFilter !== "none";
+
+  return (
+    <Menu className="data-table-header-menu">
+      <div className="custom-menu-item">
+        <div className={classNames(Classes.SELECT, Classes.FILL)}>
+          <select
+            onChange={function (e) {
+              const ccSelectedFilter = camelCase(e.target.value);
+              handleFilterChange(ccSelectedFilter);
+            }}
+            value={ccSelectedFilter}
+          >
+            {filterMenuItems.map(function (menuItem, index) {
+              return (
+                <option key={index} value={camelCase(menuItem)}>
+                  {menuItem}
+                </option>
+              );
+            })}
+          </select>
+        </div>
+      </div>
+      <div className="custom-menu-item">
+        <FilterInput
+          dataType={dataType}
+          requiresValue={requiresValue}
+          handleFilterSubmit={handleFilterSubmit}
+          filterValue={filterValue}
+          handleFilterValueChange={handleFilterValueChange}
+          filterSubType={camelCase(selectedFilter)}
+          filterType={filterTypesDictionary[camelCase(selectedFilter)]}
+        />
+      </div>
+      <MenuDivider />
+      <DialogFooter
+        secondaryClassName={Classes.POPOVER_DISMISS}
+        onClick={() => {
+          handleFilterSubmit();
+        }}
+        intent={Intent.SUCCESS}
+        text="Filter"
+        secondaryText="Clear"
+        secondaryIntent={Intent.DANGER}
+        secondaryAction={() => {
+          if (currentFilter) removeSingleFilter(currentFilter.filterOn);
+        }}
+      />
+    </Menu>
+  );
+};
+
+export default FilterAndSortMenu;
+
+const dateMinMaxHelpers = {
+  minDate: dayjs().subtract(25, "years").toDate(),
+  maxDate: dayjs().add(25, "years").toDate()
+};
+
+const renderCreateNewOption = (query, active, handleClick) => (
+  <MenuItem
+    icon="add"
+    text={query}
+    active={active}
+    onClick={handleClick}
+    shouldDismissPopover={false}
+  />
+);
+
+const FilterInput = ({
+  handleFilterValueChange,
+  handleFilterSubmit,
+  filterValue,
+  filterSubType,
+  filterType
+}) => {
+  //Options: Text, Single number (before, after, equals), 2 numbers (range),
+  //Single Date (before, after, on), 2 dates (range)
+  let inputGroup = <div />;
+  switch (filterType) {
+    case "text":
+      inputGroup =
+        filterSubType === "notEmpty" || filterSubType === "isEmpty" ? (
+          <div />
+        ) : (
+          <div className="custom-menu-item">
+            <InputGroup
+              placeholder="Value"
+              onChange={function (e) {
+                handleFilterValueChange(e.target.value);
+              }}
+              autoFocus
+              {...onEnterHelper(handleFilterSubmit)}
+              value={filterValue}
+            />
+          </div>
+        );
+      break;
+    case "list":
+      inputGroup = (
+        <div className="custom-menu-item">
+          <TgSelect
+            placeholder="Add item"
+            renderCreateNewOption={renderCreateNewOption}
+            noResults={null}
+            multi={true}
+            creatable={true}
+            value={(filterValue || []).map(val => ({
+              label: val,
+              value: val
+            }))}
+            onChange={selectedOptions => {
+              selectedOptions.some(opt => opt.value === "")
+                ? handleFilterSubmit()
+                : handleFilterValueChange(
+                    selectedOptions.map(opt => opt.value)
+                  );
+            }}
+            options={[]}
+          />
+        </div>
+      );
+      break;
+    case "number":
+      inputGroup = (
+        <div className="custom-menu-item">
+          <NumericInput
+            placeholder="Value"
+            onValueChange={function (numVal) {
+              handleFilterValueChange(isNaN(numVal) ? 0 : numVal);
+            }}
+            autoFocus
+            {...onEnterHelper(handleFilterSubmit)}
+            value={filterValue}
+          />
+        </div>
+      );
+      break;
+    case "numberRange":
+      inputGroup = (
+        <div className="custom-menu-item">
+          <NumericInput
+            placeholder="Low"
+            onValueChange={function (numVal) {
+              handleFilterValueChange([
+                isNaN(numVal) ? 0 : numVal,
+                filterValue[1]
+              ]);
+            }}
+            {...onEnterHelper(handleFilterSubmit)}
+            value={filterValue && filterValue[0]}
+          />
+          <NumericInput
+            placeholder="High"
+            onValueChange={function (numVal) {
+              handleFilterValueChange([
+                filterValue[0],
+                isNaN(numVal) ? 0 : numVal
+              ]);
+            }}
+            {...onEnterHelper(handleFilterSubmit)}
+            value={filterValue && filterValue[1]}
+          />
+        </div>
+      );
+      break;
+    case "date":
+      inputGroup = (
+        <div className="custom-menu-item">
+          <DateInput
+            value={filterValue ? dayjs(filterValue).toDate() : undefined}
+            {...getDayjsFormatter("L")}
+            {...dateMinMaxHelpers}
+            onChange={selectedDates => {
+              handleFilterValueChange(selectedDates);
+            }}
+          />
+        </div>
+      );
+      break;
+    case "dateRange":
+      // eslint-disable-next-line no-case-declarations
+      let filterValueToUse;
+      if (Array.isArray(filterValue)) {
+        filterValueToUse = filterValue;
+      } else {
+        filterValueToUse =
+          filterValue && filterValue.split && filterValue.split(";");
+      }
+      inputGroup = (
+        <div className="custom-menu-item">
+          <DateRangeInput
+            value={
+              filterValueToUse && filterValueToUse[0] && filterValueToUse[1]
+                ? [new Date(filterValueToUse[0]), new Date(filterValueToUse[1])]
+                : undefined
+            }
+            popoverProps={{
+              captureDismiss: true
+            }}
+            formatDate={date => (date == null ? "" : date.toLocaleDateString())}
+            parseDate={str => new Date(Date.parse(str))}
+            placeholder="JS Date"
+            {...dateMinMaxHelpers}
+            onChange={selectedDates => {
+              if (selectedDates[0] && selectedDates[1]) {
+                handleFilterValueChange(selectedDates);
+              }
+            }}
+          />
+        </div>
+      );
+      break;
+    default:
+    // to do
+  }
+  return inputGroup;
+};
+
+function getFilterMenuItems(dataType) {
+  let filterMenuItems = [];
+  if (dataType === "string") {
+    filterMenuItems = [
+      "contains",
+      "notContains",
+      "startsWith",
+      "endsWith",
+      "isExactly",
+      "regex",
+      "inList",
+      "notInList",
+      "isEmpty",
+      "notEmpty"
+    ];
+  } else if (dataType === "lookup") {
+    filterMenuItems = [
+      "contains",
+      "notContains",
+      "startsWith",
+      "endsWith",
+      "isExactly",
+      "regex"
+    ];
+  } else if (dataType === "boolean") {
+    filterMenuItems = ["true", "false"];
+  } else if (dataType === "number" || dataType === "integer") {
+    filterMenuItems = [
+      "greaterThan",
+      "lessThan",
+      "inRange",
+      "outsideRange",
+      "equalTo",
+      "inList",
+      "notInList"
+    ];
+  } else if (dataType === "timestamp") {
+    filterMenuItems = ["isBetween", "notBetween", "isBefore", "isAfter"];
+  }
+  return filterMenuItems.map(item => startCase(item));
+}