@civicactions/cmsds-open-data-components 3.0.0-alpha.3 → 3.0.0-alpha.5

package/lib/templates/FilteredResource/QueryBuilder.js

@@ -1,235 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-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 = _interopRequireWildcard(require("react"));
-
-var _qs = _interopRequireDefault(require("qs"));
-
-var _designSystem = require("@cmsgov/design-system");
-
-var _QueryRow = _interopRequireDefault(require("./QueryRow"));
-
-var _QueryTitle = _interopRequireDefault(require("./QueryTitle"));
-
-var _functions = require("./functions");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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; }
-
-function updateQueryForDatastore(condition) {
-  var cond = condition;
-  delete cond.key;
-
-  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;
-}
-
-var QueryBuilder = function QueryBuilder(_ref) {
-  var resource = _ref.resource,
-      id = _ref.id,
-      includeSearchParams = _ref.includeSearchParams,
-      customColumns = _ref.customColumns;
-  var conditions = resource.conditions,
-      schema = resource.schema,
-      setConditions = resource.setConditions;
-  var fields = Object.keys(schema[id].fields);
-  var hasConditions = conditions.length > 0;
-
-  var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      queryCount = _useState2[0],
-      setQueryCount = _useState2[1];
-
-  var _useState3 = (0, _react.useState)([]),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      queryConditions = _useState4[0],
-      setQueryConditions = _useState4[1];
-
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      titleConditions = _useState6[0],
-      setTitleConditions = _useState6[1]; // Add use effect to load conditions on first load if needed
-
-
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      conditionsChanged = _useState8[0],
-      setConditionsChanged = _useState8[1];
-
-  var addCondition = function addCondition(condition) {
-    if (Array.isArray(condition)) {
-      var keyedConditions = condition.map(function (oc) {
-        return _objectSpread(_objectSpread({}, oc), {}, {
-          key: Date.now() + oc.value + oc.property
-        });
-      });
-      setQueryConditions(keyedConditions);
-    } else {
-      setQueryConditions([].concat((0, _toConsumableArray2["default"])(queryConditions), [{
-        property: fields[0],
-        value: '',
-        operator: (0, _functions.buildOperatorOptions)(schema[id].fields[fields[0]].mysql_type)[0].value,
-        key: Date.now()
-      }]));
-    }
-  };
-
-  _react["default"].useEffect(function () {
-    addCondition(conditions);
-    setTitleConditions(conditions);
-  }, []);
-
-  var propertyOptions = fields.map(function (f) {
-    if (schema[id].fields[f].description) {
-      return {
-        label: schema[id].fields[f].description,
-        value: f
-      };
-    }
-
-    return {
-      label: f,
-      value: f
-    };
-  });
-
-  var submitConditions = function submitConditions(e) {
-    e.preventDefault();
-    var submitConditions = queryConditions.filter(function (oc) {
-      if (oc.property) {
-        return oc;
-      }
-
-      return false;
-    }).map(function (oc) {
-      var cond = Object.assign({}, oc);
-      return updateQueryForDatastore(cond);
-    });
-    setConditions(submitConditions);
-    setTitleConditions(queryConditions.map(function (oc) {
-      return Object.assign({}, oc);
-    }));
-    setConditionsChanged(false);
-
-    if (includeSearchParams) {
-      var url = new URL(window.location);
-
-      var urlString = _qs["default"].stringify({
-        conditions: submitConditions
-      }, {
-        encodeValuesOnly: true,
-        addQueryPrefix: true
-      });
-
-      window.history.pushState({}, '', "".concat(url.origin).concat(url.pathname).concat(urlString));
-    }
-  };
-
-  var updateCondition = function updateCondition(index, key, value) {
-    var newConditions = (0, _toConsumableArray2["default"])(queryConditions);
-    newConditions[index][key] = value;
-    setQueryConditions(newConditions);
-    setConditionsChanged(true);
-  };
-
-  var removeCondition = function removeCondition(index) {
-    var newConditions = queryConditions.map(function (oc) {
-      return Object.assign({}, oc);
-    });
-    newConditions.splice(index, 1);
-    setQueryConditions(newConditions);
-    setConditionsChanged(true);
-  };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "dc-query-builder ds-u-margin-bottom--3"
-  }, /*#__PURE__*/_react["default"].createElement(_designSystem.Accordion, {
-    bordered: true
-  }, /*#__PURE__*/_react["default"].createElement(_designSystem.AccordionItem, {
-    heading: /*#__PURE__*/_react["default"].createElement(_QueryTitle["default"], {
-      schema: schema[id],
-      conditions: titleConditions,
-      customColumns: customColumns
-    }),
-    defaultOpen: false
-  }, /*#__PURE__*/_react["default"].createElement("form", {
-    onSubmit: function onSubmit(e) {
-      return submitConditions(e);
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", null, queryConditions.map(function (qf, index) {
-    return /*#__PURE__*/_react["default"].createElement(_QueryRow["default"], {
-      key: qf.key,
-      id: id,
-      schema: schema,
-      condition: qf,
-      index: index,
-      propertyOptions: propertyOptions,
-      update: updateCondition,
-      remove: removeCondition
-    });
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "dc-query-bulder--form-buttons ds-u-padding-y--2"
-  }, /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    variation: "transparent",
-    onClick: function onClick() {
-      return addCondition(null);
-    }
-  }, "+ Add filter"), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    disabled: !conditionsChanged,
-    className: "ds-u-float--right",
-    type: "submit"
-  }, "Apply filters"))))));
-};
-
-QueryBuilder.defaultProps = {
-  includeSearchParams: true
-};
-var _default = QueryBuilder;
-exports["default"] = _default;

package/lib/templates/FilteredResource/QueryRow.js

@@ -1,175 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
-
-var _reactResponsive = require("react-responsive");
-
-var _designSystem = require("@cmsgov/design-system");
-
-var _functions = require("./functions");
-
-require("react-datepicker/dist/react-datepicker.css");
-
-var _close = _interopRequireDefault(require("../../assets/icons/close"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function getStartDate(condition, schema, id) {
-  if (schema[id].fields[condition.property].mysql_type === 'date') {
-    var newDate = new Date(condition.value);
-
-    if (newDate instanceof Date && !isNaN(newDate)) {
-      return newDate;
-    }
-  }
-
-  return new Date();
-}
-
-var QueryRow = function QueryRow(_ref) {
-  var id = _ref.id,
-      condition = _ref.condition,
-      index = _ref.index,
-      update = _ref.update,
-      remove = _ref.remove,
-      propertyOptions = _ref.propertyOptions,
-      schema = _ref.schema;
-  var md = (0, _reactResponsive.useMediaQuery)({
-    minWidth: 0,
-    maxWidth: 768
-  });
-
-  var _useState = (0, _react.useState)(condition.operator),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      operator = _useState2[0],
-      setOperator = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(condition.property),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      property = _useState4[0],
-      setProperty = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(condition.value),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      value = _useState6[0],
-      setValue = _useState6[1];
-
-  var _React$useState = _react["default"].useState(getStartDate(condition, schema, id)),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      startDate = _React$useState2[0],
-      setStartDate = _React$useState2[1];
-
-  (0, _react.useEffect)(function () {
-    if (property !== condition.property) {
-      if (property) {
-        update(index, 'property', property);
-      } else {
-        update(index, 'property', '');
-      }
-
-      if (schema[id].fields[condition.property].mysql_type === 'date') {
-        if (!value) {
-          setValue(startDate.toJSON().slice(0, 10));
-        }
-      }
-    }
-  }, [property, value, startDate, schema, id, condition]);
-  (0, _react.useEffect)(function () {
-    if (operator !== condition.operator) {
-      if (operator) {
-        update(index, 'operator', operator);
-      } else {
-        update(index, 'operator', '');
-      }
-    }
-  }, [operator]);
-  (0, _react.useEffect)(function () {
-    if (value !== condition.value) {
-      if (value) {
-        update(index, 'value', value);
-      } else {
-        update(index, 'value', '');
-      }
-    }
-  }, [value]);
-  return /*#__PURE__*/_react["default"].createElement("fieldset", {
-    className: "ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center"
-  }, /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
-    options: propertyOptions,
-    value: property,
-    label: "Property",
-    name: "".concat(condition.key, "_property"),
-    onChange: function onChange(e) {
-      return setProperty(e.target.value);
-    }
-  }), /*#__PURE__*/_react["default"].createElement(_designSystem.Dropdown, {
-    options: (0, _functions.buildOperatorOptions)(schema[id].fields[property].mysql_type),
-    value: operator,
-    size: "small",
-    label: "Operator",
-    name: "".concat(condition.key, "_operator"),
-    onChange: function onChange(e) {
-      return setOperator(e.target.value);
-    }
-  }), schema[id].fields[property].mysql_type === 'date' ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
-    className: "ds-c-label",
-    htmlFor: "".concat(condition.key, "_date_value"),
-    id: "".concat(condition.key, "_date_value-label")
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "Value")), /*#__PURE__*/_react["default"].createElement(_reactDatepicker["default"], {
-    name: "".concat(condition.key, "_date_value"),
-    selected: (0, _functions.convertUTCToLocalDate)(startDate),
-    onChange: function onChange(date) {
-      setStartDate(date);
-      setValue(date.toJSON().slice(0, 10));
-    },
-    showMonthDropdown: true,
-    showYearDropdown: true,
-    dropdownMode: "select",
-    className: "ds-c-field",
-    withPortal: true // popperPlacement="top-end"
-    // popperModifiers={[
-    //   {
-    //     name: 'preventOverflow',
-    //     options: {
-    //       rootBoundary: 'viewport',
-    //       // tether: true,
-    //       altAxis: true,
-    //     },
-    //   },
-    // ]}
-
-  })) : /*#__PURE__*/_react["default"].createElement(_designSystem.TextField, {
-    label: "Value",
-    name: "".concat(condition.key, "_value"),
-    value: (0, _functions.cleanText)(value, operator),
-    onChange: function onChange(e) {
-      return setValue(e.target.value);
-    }
-  }), /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    variation: md ? 'transparent' : null,
-    size: "small",
-    className: "ds-u-margin-top--3",
-    "aria-label": "Delete filter",
-    onClick: function onClick() {
-      return remove(index);
-    }
-  }, !md ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Delete filter") : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_close["default"], null), ' ')));
-};
-
-var _default = QueryRow;
-exports["default"] = _default;

package/lib/templates/FilteredResource/QueryTitle.js

@@ -1,89 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _designSystem = require("@cmsgov/design-system");
-
-var _functions = require("./functions");
-
-var QueryTitle = function QueryTitle(_ref) {
-  var conditions = _ref.conditions,
-      schema = _ref.schema,
-      customColumns = _ref.customColumns;
-  var fields = schema.fields;
-
-  if (!conditions.length) {
-    return 'Add a filter';
-  }
-
-  function formatValue(text, property) {
-    if (customColumns.length > 0) {
-      var newValue = text;
-      var customColumn = customColumns.find(function (c) {
-        return c.accessor === property;
-      });
-
-      if (customColumn && customColumn.Cell) {
-        return customColumn.Cell({
-          value: text
-        });
-      }
-
-      return text;
-    } else {
-      return text;
-    }
-  }
-
-  function buildTitle() {
-    var newTitle = conditions.map(function (c) {
-      var field = fields[c.property];
-      var description = field && field.description ? field.description : c.property;
-
-      var operator = _functions.operatorMapping.find(function (op) {
-        return op.value === c.operator;
-      });
-
-      return "".concat(description, " ").concat(operator.label, " ").concat((0, _functions.cleanText)(c.value));
-    });
-    return newTitle.join(' AND ');
-  }
-
-  return /*#__PURE__*/_react["default"].createElement("span", {
-    className: "dc-querybuilder-title"
-  }, conditions.map(function (c) {
-    var field = fields[c.property];
-    var description = field && field.description ? field.description : c.property;
-
-    var operator = _functions.operatorMapping.find(function (op) {
-      return op.value === c.operator;
-    });
-
-    var cleanedText = (0, _functions.cleanText)(c.value);
-    var formattedText = formatValue(cleanedText, c.property);
-    return /*#__PURE__*/_react["default"].createElement("span", {
-      className: "ds-u-fill--background ds-u-padding--1 ds-u-margin-y--1 ds-u-display--inline-block ds-u-font-weight--semibold"
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: "ds-u-font-weight--bold"
-    }, description), ' ', /*#__PURE__*/_react["default"].createElement("span", {
-      className: "ds-u-font-weight--normal"
-    }, operator.label.toUpperCase()), ' ', /*#__PURE__*/_react["default"].createElement("span", {
-      className: "ds-u-color--success"
-    }, formattedText));
-  }).reduce(function (prev, curr) {
-    return [prev, /*#__PURE__*/_react["default"].createElement(_designSystem.Badge, {
-      className: "ds-u-margin-x--1",
-      variation: "info"
-    }, "AND"), curr];
-  }));
-};
-
-var _default = QueryTitle;
-exports["default"] = _default;

package/lib/templates/FilteredResource/functions.js

@@ -1,142 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.buildCustomColHeaders = buildCustomColHeaders;
-exports.buildOperatorOptions = buildOperatorOptions;
-exports.cleanText = cleanText;
-exports.convertUTCToLocalDate = convertUTCToLocalDate;
-exports.operatorMapping = void 0;
-
-// Example custom column headers, where only effective date has an ! at the end
-// [
-//  {schema: 'date', Cell: ({ value }) => localeDate(value),},
-//  {accessor: 'effective_date',Cell: ({ value }) => localeDate(value) + '!',},
-// ]
-function buildCustomColHeaders(customHeaders, columns, schema) {
-  return columns.map(function (column) {
-    var customAccessorIndex = customHeaders.findIndex(function (header) {
-      return header.accessor === column;
-    });
-    var customSchemaIndex = customHeaders.findIndex(function (header) {
-      return header.schema === schema.fields[column].mysql_type;
-    });
-    var newColumn = {}; // If specific accessor is passed, this will override a general mysql_type Cell rewrite.
-
-    if (customAccessorIndex > -1) {
-      newColumn.Header = schema && schema.fields[column].description ? schema.fields[column].description : column;
-      newColumn.accessor = column;
-      newColumn.Cell = customHeaders[customAccessorIndex].Cell;
-    } else {
-      newColumn.Header = schema && schema.fields[column].description ? schema.fields[column].description : column;
-      newColumn.accessor = column;
-
-      if (customSchemaIndex > -1) {
-        newColumn.Cell = customHeaders[customSchemaIndex].Cell;
-      }
-    }
-
-    return newColumn;
-  });
-}
-
-function convertUTCToLocalDate(date) {
-  if (!date) {
-    return date;
-  }
-
-  date = new Date(date);
-  date = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
-  return date;
-}
-
-function cleanText(value, operator) {
-  var newValue = value;
-
-  if (Array.isArray(newValue)) {
-    newValue = newValue.join(',');
-  } // return newValue.replace(/(^\%+|\%+$)/gm, '');
-
-
-  return newValue;
-}
-
-var operatorMapping = [{
-  label: 'Is',
-  value: '='
-}, {
-  label: 'Starts With',
-  value: 'starts with'
-}, {
-  label: 'Contains',
-  value: 'contains'
-}, {
-  label: 'Is Not',
-  value: '<>'
-}, {
-  label: 'Or',
-  value: 'in'
-}, {
-  label: 'Is',
-  value: '='
-}, {
-  label: 'Is Not',
-  value: '<>'
-}, {
-  label: 'Greater Than',
-  value: '>'
-}, {
-  label: 'Less Than',
-  value: '<'
-}];
-exports.operatorMapping = operatorMapping;
-
-function buildOperatorOptions(type) {
-  switch (type) {
-    case 'text': // Will change from text to string in future update
-
-    case 'string':
-      return [{
-        label: 'Is',
-        value: '='
-      }, {
-        label: 'Starts With',
-        value: 'starts with'
-      }, {
-        label: 'Contains',
-        value: 'contains'
-      }, {
-        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: '<>'
-      }];
-  }
-}