@teselagen/ui 0.7.33-beta.6 → 0.7.34

package/FilterAndSortMenu.js

@@ -0,0 +1,391 @@
+import React, { useState } from "react";
+import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
+import { camelCase } 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",
+      "Not Contains",
+      "Starts With",
+      "Ends With",
+      "Is Exactly",
+      "Regex",
+      "In List",
+      "Not In List",
+      "Is Empty",
+      "Not Empty"
+    ];
+  } else if (dataType === "lookup") {
+    filterMenuItems = [
+      "Contains",
+      "Not Contains",
+      "Starts With",
+      "Ends With",
+      "Is Exactly",
+      "Regex"
+    ];
+  } else if (dataType === "boolean") {
+    filterMenuItems = ["True", "False"];
+  } else if (dataType === "number" || dataType === "integer") {
+    // else if (dataType === "lookup") {
+    //   filterMenuItems = ["None"];
+    // }
+    filterMenuItems = [
+      "Greater Than",
+      "Less Than",
+      "In Range",
+      "Outside Range",
+      "Equal To",
+      "In List",
+      "Not In List"
+    ];
+  } else if (dataType === "timestamp") {
+    filterMenuItems = ["Is Between", "Not Between", "Is Before", "Is After"];
+  }
+  return filterMenuItems;
+}

package/FormSeparator.js

@@ -0,0 +1,9 @@
+import React from "react";
+import "./style.css";
+export const FormSeparator = ({ label = "or" } = {}) => {
+  return (
+    <div className="form-separator">
+      <p style={{ opacity: 0.8 }}>{label}</p>
+    </div>
+  );
+};

package/LoadingDots.js

@@ -0,0 +1,14 @@
+import React, { useEffect, useState } from "react";
+
+export const LoadingDots = () => {
+  const [dots, setDots] = useState("");
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDots(dots => {
+        return dots.length === 3 ? "" : dots + ".";
+      });
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+  return <span>{dots}</span>;
+};

package/MatchHeaders.js

@@ -0,0 +1,234 @@
+import React, { useMemo } from "react";
+import { Callout, Card, Intent } from "@blueprintjs/core";
+import immer, { setAutoFreeze } from "immer";
+import { flatMap, forEach } from "lodash-es";
+import { ReactSelectField } from "./FormComponents";
+import showConfirmationDialog from "./showConfirmationDialog";
+import { startCase } from "lodash-es";
+import { typeToCommonType } from "./typeToCommonType";
+import { camelCase } from "lodash-es";
+import { change } from "redux-form";
+import { useDispatch } from "react-redux";
+
+setAutoFreeze(false);
+export const MatchHeaders = ({
+  csvValidationIssue,
+  datatableFormName,
+  datatableFormNames: _datatableFormNames,
+  doAllFilesHaveSameHeaders,
+  fileIndex,
+  filesWIssues,
+  ignoredHeadersMsg,
+  matchedHeaders,
+  onMultiFileUploadSubmit,
+  reduxFormEntitiesArray,
+  searchResults,
+  setFilesWIssues,
+  userSchema
+}) => {
+  const datatableFormNames = _datatableFormNames || [datatableFormName];
+  const dispatch = useDispatch();
+  const flippedMatchedHeaders = useMemo(() => {
+    const _flippedMatchedHeaders = {};
+    forEach(matchedHeaders, (v, k) => {
+      if (v) _flippedMatchedHeaders[v] = k;
+    });
+    return _flippedMatchedHeaders;
+  }, [matchedHeaders]);
+
+  return (
+    <div style={{ maxWidth: 500 }}>
+      {!onMultiFileUploadSubmit && (
+        <Callout style={{ width: "fit-content" }} intent="warning">
+          {csvValidationIssue}
+        </Callout>
+      )}
+      {!onMultiFileUploadSubmit && ignoredHeadersMsg && (
+        <Callout style={{ width: "fit-content" }} intent="warning">
+          {ignoredHeadersMsg}
+        </Callout>
+      )}
+      <br />
+      <tr
+        style={{
+          display: "flex",
+          minHeight: 50,
+          alignItems: "center",
+          justifyContent: "space-between"
+        }}
+      >
+        <td
+          style={{
+            width: 200,
+            marginLeft: 20,
+            display: "flex",
+            fontWeight: "bold"
+          }}
+        >
+          Accepted Headers
+        </td>
+        <td
+          style={{
+            width: 200,
+            marginLeft: 20,
+            display: "flex",
+            fontWeight: "bold"
+          }}
+        >
+          Your Headers
+        </td>
+        <td
+          style={{
+            fontWeight: "bold",
+            marginLeft: 30
+          }}
+        >
+          Data Preview
+        </td>
+      </tr>
+      {searchResults.map(({ path, displayName, type }, i) => {
+        const userMatchedHeader = matchedHeaders[path];
+        const opts = flatMap(userSchema.fields, ({ path: pathInner }) => {
+          if (
+            pathInner !== userMatchedHeader &&
+            flippedMatchedHeaders[pathInner]
+          ) {
+            return [];
+          }
+          return {
+            value: pathInner,
+            label: pathInner
+          };
+        }).sort((a, b) => {
+          const ra = searchResults[i].matches
+            .map(m => m.item.path)
+            .indexOf(a.value);
+          const rb = searchResults[i].matches
+            .map(m => m.item.path)
+            .indexOf(b.value);
+          if (!ra) return -1;
+          if (!rb) return 1;
+          return rb - ra;
+        });
+        return (
+          <Card style={{ padding: 2 }} key={`field-${i}`}>
+            <table>
+              <tbody>
+                <tr
+                  style={{
+                    display: "flex",
+                    minHeight: 50,
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  }}
+                >
+                  <td
+                    style={{
+                      width: 200,
+                      display: "flex"
+                    }}
+                  >
+                    <div
+                      style={{
+                        paddingTop: 2,
+                        marginLeft: 15,
+                        fontSize: 15
+                      }}
+                    >
+                      <span
+                        data-tip={`Column Type: ${
+                          typeToCommonType[type || "string"] || type
+                        }`}
+                      >
+                        {displayName || startCase(camelCase(path))}
+                      </span>
+                    </div>
+                  </td>
+                  <td style={{ width: 200 }}>
+                    <ReactSelectField
+                      noMarginBottom
+                      tooltipError
+                      beforeOnChange={async () => {
+                        const clearEntities = () => {
+                          datatableFormNames.forEach(name => {
+                            dispatch(change(name, "reduxFormEntities", null));
+                          });
+                        };
+                        if (reduxFormEntitiesArray.some(r => r?.isDirty)) {
+                          //when the column mapping changes, update the column in reduxFormEntities (if reduxFormEntities exists)
+                          const doAction = await showConfirmationDialog({
+                            text: "Are you sure you want to edit the columm mapping? This will clear any changes you've already made to the table data",
+                            intent: Intent.DANGER,
+                            confirmButtonText: "Yes",
+                            cancelButtonText: "No"
+                            // canEscapeKeyCancel: true //this is false by default
+                          });
+                          if (doAction) {
+                            clearEntities();
+                          } else {
+                            return { stopEarly: true };
+                          }
+                        } else {
+                          clearEntities();
+                          return { stopEarly: false };
+                        }
+                      }}
+                      onChange={val => {
+                        setFilesWIssues(
+                          immer(filesWIssues, files => {
+                            files.forEach((f, i) => {
+                              const isCurrentFile = fileIndex === i;
+                              if (isCurrentFile || doAllFilesHaveSameHeaders) {
+                                f.matchedHeaders[path] = val;
+                              }
+                            });
+                          })
+                        );
+                      }}
+                      name={path}
+                      // isRequired={!allowEmpty && defaultValue === undefined}
+                      defaultValue={userMatchedHeader}
+                      options={opts}
+                    />
+                  </td>
+                  <td
+                    style={{
+                      marginTop: 10,
+                      marginBottom: 10,
+                      marginLeft: 20,
+                      fontSize: 10 /* color: Colors.RED1 */
+                    }}
+                  >
+                    {userMatchedHeader &&
+                      [
+                        // { [userMatchedHeader]: "Preview:" },
+                        ...(userSchema.userData?.slice(0, 3) || [])
+                        // { [userMatchedHeader]: "..." }
+                      ].map((row, i) => {
+                        return (
+                          <div
+                            style={{
+                              maxWidth: 70,
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap"
+                            }}
+                            key={`userMatchedHeader-${i}`}
+                          >
+                            {row?.[userMatchedHeader] || ""}
+                          </div>
+                        );
+                      })}
+                    {/* {!allowEmpty &&
+                          defaultValue === undefined &&
+                          "(Required)"} */}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};