@civicactions/cmsds-open-data-components 2.0.0-alpha.9 → 2.0.0

package/lib/components/ResourceConditionField/index.js

@@ -0,0 +1,246 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _designSystem = require("@cmsgov/design-system");
+
+var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
+
+var _close = _interopRequireDefault(require("../../assets/icons/close"));
+
+require("react-datepicker/dist/react-datepicker.css");
+
+function convertUTCToLocalDate(date) {
+  if (!date) {
+    return date;
+  }
+
+  date = new Date(date);
+  date = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+  return date;
+}
+
+function buildOperatorOptions(type) {
+  switch (type) {
+    case 'text': // Will change from text to string in future update
+
+    case 'string':
+      return [{
+        label: 'Is',
+        value: '='
+      }, {
+        label: 'Contains',
+        value: 'like'
+      }, {
+        label: 'Is Not',
+        value: '<>'
+      }, {
+        label: 'Or',
+        value: 'in'
+      }];
+
+    case 'date':
+      return [{
+        label: 'Is',
+        value: '='
+      }, {
+        label: 'Is Not',
+        value: '<>'
+      }, {
+        label: 'Greater Than',
+        value: '>'
+      }, {
+        label: 'Less Than',
+        value: '<'
+      }];
+
+    default:
+      // These 2 should be safe for all data types
+      return [{
+        label: 'Is',
+        value: '='
+      }, {
+        label: 'Is Not',
+        value: '<>'
+      }];
+  }
+}
+
+function cleanText(value, operator) {
+  var newValue = value;
+
+  if (Array.isArray(newValue)) {
+    newValue = newValue.join(',');
+  }
+
+  return newValue.replace(/(^\%+|\%+$)/gm, '');
+}
+
+var ResourceConditionField = function ResourceConditionField(_ref) {
+  var data = _ref.data,
+      index = _ref.index,
+      remove = _ref.remove,
+      schema = _ref.schema,
+      update = _ref.update;
+  var fields = schema.fields;
+
+  var _React$useState = _react["default"].useState(data.value ? new Date(data.value) : new Date()),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      startDate = _React$useState2[0],
+      setStartDate = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(Object.keys(fields).map(function (key) {
+    return {
+      label: fields[key].description ? fields[key].description : key,
+      value: key
+    };
+  })),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      propertyOptions = _React$useState4[0],
+      setPropertyOptions = _React$useState4[1];
+
+  var _React$useState5 = _react["default"].useState(data.property),
+      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+      property = _React$useState6[0],
+      setProperty = _React$useState6[1];
+
+  var _React$useState7 = _react["default"].useState(data.operator),
+      _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+      operator = _React$useState8[0],
+      setOperator = _React$useState8[1];
+
+  var _React$useState9 = _react["default"].useState([{
+    label: '--',
+    value: ''
+  }]),
+      _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+      operatorOptions = _React$useState10[0],
+      setOperatorOptions = _React$useState10[1];
+
+  var _React$useState11 = _react["default"].useState(data.value),
+      _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
+      value = _React$useState12[0],
+      setValue = _React$useState12[1];
+
+  _react["default"].useEffect(function () {
+    if (property) {
+      var opOptions = buildOperatorOptions(fields[property].mysql_type ? fields[property].mysql_type : fields[property].type).map(function (opt) {
+        return {
+          label: opt.label,
+          value: opt.value
+        };
+      });
+      update(index, 'property', property);
+
+      if (!operator) {
+        setOperator(opOptions[0].value);
+      }
+
+      setOperatorOptions(opOptions);
+
+      if (fields[property].mysql_type && fields[property].mysql_type === 'date' || fields[property].type === 'date') {
+        setValue(startDate.toJSON().slice(0, 10));
+      }
+    } else {
+      update(index, 'property', property);
+      setOperator('');
+      setValue('');
+      setOperatorOptions([{
+        label: '--',
+        value: ''
+      }]);
+    }
+  }, [property, operator]);
+
+  _react["default"].useEffect(function () {
+    if (operator) {
+      update(index, 'operator', operator);
+    } else {
+      update(index, 'operator', '');
+    }
+  }, [operator]);
+
+  _react["default"].useEffect(function () {
+    if (value) {
+      update(index, 'value', value);
+    } else {
+      update(index, 'value', '');
+    }
+  }, [value]);
+
+  return /*#__PURE__*/_react["default"].createElement("fieldset", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ds-l-form-row"
+  }, /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
+    options: [{
+      label: 'Select column',
+      value: ''
+    }].concat((0, _toConsumableArray2["default"])(propertyOptions)),
+    value: property,
+    onChange: function onChange(e) {
+      return setProperty(e.target.value);
+    },
+    label: "Filter column",
+    labelClassName: "ds-u-margin-top--0 ds-u-visibility--screen-reader",
+    name: "column_name_".concat(index),
+    className: "ds-l-col--6"
+  }), /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
+    options: (0, _toConsumableArray2["default"])(operatorOptions),
+    value: operator,
+    disabled: !property ? true : false,
+    onChange: function onChange(e) {
+      return setOperator(e.target.value);
+    },
+    labelClassName: "ds-u-margin-top--0 ds-u-visibility--screen-reader",
+    size: "small",
+    label: "Filter operator",
+    name: "filter_operator_".concat(index),
+    className: "ds-l-col--3"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ds-l-form-row"
+  }, property && (fields[property].mysql_type === 'date' || fields[property].type === 'date') ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ds-u-clearfix ds-l-col--11"
+  }, /*#__PURE__*/_react["default"].createElement(_reactDatepicker["default"], {
+    selected: convertUTCToLocalDate(startDate),
+    onChange: function onChange(date) {
+      setStartDate(date);
+      setValue(date.toJSON().slice(0, 10));
+    },
+    showMonthDropdown: true,
+    showYearDropdown: true,
+    dropdownMode: "select",
+    className: "ds-c-field"
+  })) : /*#__PURE__*/_react["default"].createElement(_designSystem.TextField, {
+    hint: operator.toLowerCase() === 'in' ? "Separate values with a comma." : '',
+    value: cleanText(value, operator),
+    disabled: !property ? true : false,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    label: "Filter value",
+    labelClassName: "ds-u-margin-top--0",
+    name: "filter_value_".concat(index),
+    className: "ds-l-col--11"
+  }), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
+    className: "ds-l-col--1",
+    variation: "transparent",
+    "aria-label": "Remove filter",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      remove(index);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_close["default"], null))));
+};
+
+var _default = ResourceConditionField;
+exports["default"] = _default;

package/lib/components/ResourceFilter/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _qs = _interopRequireDefault(require("qs"));
+
+var _designSystem = require("@cmsgov/design-system");
+
+var _ResourceConditionField = _interopRequireDefault(require("../ResourceConditionField"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var ResourceFilter = function ResourceFilter(_ref) {
+  var id = _ref.id,
+      filterOpen = _ref.filterOpen,
+      setFilterOpen = _ref.setFilterOpen,
+      defaultCondition = _ref.defaultCondition,
+      resource = _ref.resource,
+      includeSearchParams = _ref.includeSearchParams;
+  var setConditions = resource.setConditions,
+      schema = resource.schema,
+      conditions = resource.conditions;
+
+  var _React$useState = _react["default"].useState(conditions && conditions.length ? conditions : [_objectSpread({}, defaultCondition)]),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      formConditions = _React$useState2[0],
+      setFormConditions = _React$useState2[1];
+
+  _react["default"].useEffect(function () {
+    if (includeSearchParams) {
+      var url = new URL(window.location);
+
+      var urlString = _qs["default"].stringify({
+        conditions: conditions
+      }, {
+        encodeValuesOnly: true,
+        addQueryPrefix: true
+      });
+
+      window.history.pushState({}, '', "".concat(url.origin).concat(url.pathname).concat(urlString));
+    }
+  }, [conditions]);
+
+  function removeByIndex(index) {
+    var newConditions = (0, _toConsumableArray2["default"])(formConditions);
+    newConditions.splice(index, 1);
+    setFormConditions(newConditions);
+    setConditions(newConditions);
+  }
+
+  function updateByIndex(index, key, value) {
+    var newConditions = (0, _toConsumableArray2["default"])(formConditions);
+    newConditions[index][key] = value;
+    setFormConditions(newConditions);
+  }
+
+  function removeAll() {
+    setFormConditions([]);
+    setConditions([]);
+  }
+
+  function submitFilters(e) {
+    e.preventDefault();
+
+    if (formConditions.length) {
+      var updatedConditions = formConditions.filter(function (cond) {
+        if (cond.property) {
+          return cond;
+        }
+
+        return false;
+      }).map(function (cond) {
+        if (cond.operator === '=' || cond.operator === '<>') {
+          if (Array.isArray(cond.value)) {
+            cond.value = cond.value.join();
+          }
+
+          cond.value = cond.value.replace(/(^\%+|\%+$)/gm, '');
+        }
+
+        if (cond.operator.toLowerCase() === 'like') {
+          if (Array.isArray(cond.value)) {
+            cond.value = cond.value.join();
+          }
+
+          var cleanedValue = cond.value.replace(/(^\%+|\%+$)/gm, '');
+          cond.value = "%".concat(cleanedValue, "%");
+        }
+
+        if (cond.operator.toLowerCase() === 'in') {
+          if (!Array.isArray(cond.value)) {
+            cond.value = cond.value.split(',');
+          }
+        }
+
+        if (Array.isArray(cond.value)) {
+          cond.value = cond.value.map(function (v) {
+            return v.trim().replace(/(^\%+|\%+$)/gm, '');
+          });
+        }
+
+        return cond;
+      });
+      setConditions(updatedConditions);
+    }
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_designSystem.HelpDrawer, {
+    footerTitle: "Update actions",
+    footerBody: /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
+      className: "ds-u-margin-right--1",
+      onClick: function onClick(e) {
+        return submitFilters(e, formConditions);
+      }
+    }, "Update table"),
+    heading: "Add filters",
+    className: "dc-c-filterd-resouce-drawer",
+    onCloseClick: function onCloseClick() {
+      setFilterOpen(!filterOpen);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("form", {
+    onSubmit: function onSubmit(e) {
+      return submitFilters(e, formConditions);
+    }
+  }, Object.keys(schema).length && formConditions.map(function (f, index) {
+    return /*#__PURE__*/_react["default"].createElement(_ResourceConditionField["default"], {
+      key: index,
+      data: f,
+      index: index,
+      remove: removeByIndex,
+      schema: schema[id],
+      update: updateByIndex
+    });
+  }), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
+    className: "ds-u-margin-right--1",
+    variation: "transparent",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      setFormConditions([].concat((0, _toConsumableArray2["default"])(formConditions), [_objectSpread({}, defaultCondition)]));
+    }
+  }, "+ Add another filter")), formConditions.length > 1 ? /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
+    variation: "transparent",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      removeAll();
+    }
+  }, "Remove all filters") : '');
+};
+
+ResourceFilter.defaultProps = {
+  defaultCondition: {
+    property: '',
+    value: '',
+    operator: ''
+  },
+  includeSearchParams: true
+};
+var _default = ResourceFilter;
+exports["default"] = _default;