@bento-core/facet-filter 1.0.1-ccdihub.34 → 1.0.1-ccdihub.36

package/dist/FacetFilterController.js

@@ -29,7 +29,8 @@ const FacetFilterController = props => {
     activeFilters,
     data,
     facetsConfig,
-    facetSectionConfig
+    facetSectionConfig,
+    unknownAgesState
   } = props;
   const filterState = {};
   // console.log(activeFilters);
@@ -152,8 +153,10 @@ const FacetFilterController = props => {
           if (facet.type === _Types.InputTypes.SLIDER) {
             const lowerBound = data[apiForFiltering][ApiLowerBoundName];
             const upperBound = data[apiForFiltering][ApiUpperBoundName];
+            const unknownAges = (unknownAgesState === null || unknownAgesState === void 0 ? void 0 : unknownAgesState[facet.datafield]) || 'include';
             updateFacet.minLowerBound = lowerBound;
             updateFacet.maxUpperBound = upperBound;
+            updateFacet.unknownAges = unknownAges;
             updateFacet.facetValues = [lowerBound, upperBound];
             updateFacet.style = facet.style;
           }

package/dist/NewFacetFilterController.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _Types = require("./components/inputs/Types");
+var _NewFacetFilterView = _interopRequireDefault(require("./NewFacetFilterView"));
+const _excluded = ["section"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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) { _defineProperty(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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const NewFacetFilterController = props => {
+  /**
+   * update checkbox state
+   * 1. checkbox state
+   * 2. subject state
+   */
+  const {
+    activeFilters,
+    data,
+    facetsConfig,
+    facetSectionConfig,
+    selectedSection,
+    unknownAgesState
+  } = props;
+  const filterState = {};
+  // console.log(activeFilters);
+  for (const [key, value] of Object.entries(activeFilters)) {
+    if (key !== 'participant_ids') {
+      filterState[key] = value;
+    }
+  }
+  const updateFacetState = filterSections => {
+    const updateSections = [...filterSections];
+    if (!_lodash.default.isEmpty(filterState)) {
+      for (const [key, value] of Object.entries(filterState)) {
+        updateSections.forEach(sideBar => {
+          if (sideBar.type === _Types.InputTypes.CHECKBOX && sideBar.datafield === key) {
+            sideBar.facetValues.forEach(item => {
+              // item.isChecked = value[item.name] ? value[item.name] : false;
+              item.isChecked = value.indexOf(item.name) > -1;
+            });
+          }
+          if (sideBar.type === _Types.InputTypes.SLIDER && sideBar.datafield === key) {
+            sideBar.facetValues = value;
+          }
+        });
+      }
+    } else {
+      updateSections.forEach(sideBar => {
+        if (sideBar.type === _Types.InputTypes.CHECKBOX) {
+          sideBar.facetValues.forEach(item => {
+            item.isChecked = false;
+          });
+        }
+        /**
+         * set default value for slider - on clear all filter
+         */
+        if (sideBar.type === _Types.InputTypes.SLIDER) {
+          const {
+            minLowerBound,
+            maxUpperBound
+          } = sideBar;
+          sideBar.facetValues = [minLowerBound, maxUpperBound];
+        }
+      });
+    }
+    return updateSections;
+  };
+  const arrangeBySections = arr => {
+    const sideBar = {};
+    arr.forEach(_ref => {
+      let {
+          section
+        } = _ref,
+        item = _objectWithoutProperties(_ref, _excluded);
+      const {
+        isExpanded
+      } = facetSectionConfig[section];
+      if (!sideBar[section]) {
+        sideBar[section] = {
+          name: section,
+          sectionName: section,
+          expandSection: isExpanded !== undefined && typeof isExpanded === 'boolean' ? isExpanded : true,
+          items: []
+        };
+      }
+      sideBar[section].items.push(_objectSpread({
+        section
+      }, item));
+    });
+    return Object.values(sideBar);
+  };
+
+  /**
+   * Construct filter object
+   * 1. add facet values to facets
+   * 2. add 'name' key to each facet value
+   */
+  const addFacetValues = facets => {
+    const updateFacets = [];
+    if (facets) {
+      facets.forEach(facet => {
+        const updateFacet = _objectSpread(_objectSpread({}, facet), {}, {
+          facetValues: []
+        });
+        const {
+          field,
+          ApiLowerBoundName,
+          ApiUpperBoundName,
+          apiForFiltering
+        } = updateFacet;
+        if (data[apiForFiltering]) {
+          if (Array.isArray(data[apiForFiltering])) {
+            const validValues = [];
+            const updateField = data[apiForFiltering].map(item => {
+              const addField = _objectSpread({}, item);
+              addField.name = item[field];
+              validValues.push(addField.name);
+              return addField;
+            });
+            /**
+             * Check if there are orphen filter values and add them to the facet values
+             */
+            if (filterState !== undefined) {
+              const facetFilter = filterState[facet.datafield];
+              if (facetFilter) {
+                facetFilter.forEach(item => {
+                  if (validValues.indexOf(item) === -1) {
+                    const tmp = {};
+                    tmp.group = item;
+                    tmp.name = item;
+                    tmp.subjects = 0;
+                    updateField.push(tmp);
+                  }
+                });
+              }
+            }
+            updateFacet.facetValues = updateField;
+          }
+          /**
+          * add object to facet values
+          */
+          if (facet.type === _Types.InputTypes.SLIDER) {
+            const lowerBound = data[apiForFiltering][ApiLowerBoundName];
+            const upperBound = data[apiForFiltering][ApiUpperBoundName];
+            const unknownAges = (unknownAgesState === null || unknownAgesState === void 0 ? void 0 : unknownAgesState[facet.datafield]) || 'include';
+            updateFacet.minLowerBound = lowerBound;
+            updateFacet.maxUpperBound = upperBound;
+            updateFacet.unknownAges = unknownAges;
+            updateFacet.facetValues = [lowerBound, upperBound];
+            updateFacet.style = facet.style;
+          }
+        }
+        updateFacets.push(updateFacet);
+      });
+    }
+    return updateFacets;
+  };
+
+  /**
+   * Generate facet sections state
+   *
+   */
+  // const displayFacets = facetsConfig.filter((facet) => facet.show).slice(0, 16);
+  const displayFacets = facetsConfig.filter(facet => facet.show);
+  const facetStates = addFacetValues(displayFacets);
+  const updateState = updateFacetState(facetStates);
+  const facetSections = arrangeBySections(updateState);
+  const facetSection = facetSections[selectedSection];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_NewFacetFilterView.default, _extends({}, props, {
+    facetSection: facetSection
+  })));
+};
+const mapStateToProps = state => {
+  var _state$statusReducer;
+  return {
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.unknownAgesState) || {}
+  };
+};
+var _default = (0, _reactRedux.connect)(mapStateToProps, null)(NewFacetFilterController);
+exports.default = _default;

package/dist/NewFacetFilterView.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@material-ui/core");
+var _FacetFilterStyle = _interopRequireDefault(require("./FacetFilterStyle"));
+var _ReduxNewFacetView = _interopRequireDefault(require("./components/facet/ReduxNewFacetView"));
+var _FilterItems = _interopRequireDefault(require("./components/inputs/FilterItems"));
+var _ReduxNewSearchFacetView = _interopRequireDefault(require("./components/facet/ReduxNewSearchFacetView"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable arrow-body-style */
+/* eslint-disable padded-blocks */
+
+const BentoFacetFilter = _ref => {
+  let {
+    facetSection,
+    CustomFacetSection,
+    CustomFacetView,
+    queryParams
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, CustomFacetSection && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CustomFacetSection, {
+    section: facetSection,
+    expanded: true
+  })), facetSection.items.map(facet => {
+    if (facet.search) {
+      return /*#__PURE__*/_react.default.createElement(_ReduxNewSearchFacetView.default, {
+        facet: facet,
+        queryParams: queryParams,
+        CustomView: CustomFacetView
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_ReduxNewFacetView.default, {
+      facet: facet,
+      queryParams: queryParams,
+      CustomView: CustomFacetView
+    }, /*#__PURE__*/_react.default.createElement(_core.List, {
+      className: "List_".concat(facet.label)
+    }, /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+      facet: facet
+    })));
+  }));
+};
+var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);
+exports.default = _default;

package/dist/components/facet/FacetView.js

@@ -29,8 +29,10 @@ const FacetView = _ref => {
     facet,
     onClearFacetSection,
     onClearSliderSection,
+    onUnknownAgesChange,
     CustomView,
-    queryParams
+    queryParams,
+    unknownAgesState
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
   const onExpandFacet = () => setExpand(!expand);
@@ -55,11 +57,22 @@ const FacetView = _ref => {
     const field = facet.datafield;
     const paramValue = {};
     paramValue[field] = '';
+
+    // Also clear the corresponding unknownAges parameter if it exists
+    const unknownAgesField = "".concat(field, "_unknownAges");
+    if (queryParams.includes(unknownAgesField)) {
+      paramValue[unknownAgesField] = '';
+    }
     const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
     navigate("/explore".concat(queryStr), {
       replace: true
     });
     setSortBy(null);
+
+    // Reset the corresponding unknownAges parameter in Redux state
+    if (queryParams.includes(unknownAgesField) && onUnknownAgesChange) {
+      onUnknownAgesChange(field, 'include');
+    }
     if (facet.type === _Types.InputTypes.SLIDER) {
       onClearSliderSection(facet);
     } else {
@@ -76,7 +89,12 @@ const FacetView = _ref => {
   const selectedItems = facetValues && facetValues.filter(item => item.isChecked);
   const displayFacet = _objectSpread({}, facet);
   displayFacet.facetValues = selectedItems;
-  const isActiveFacet = [...selectedItems].length > 0;
+
+  // Check if facet is active based on selected items or unknown ages selection
+  const hasSelectedItems = [...selectedItems].length > 0;
+  const unknownAges = (unknownAgesState === null || unknownAgesState === void 0 ? void 0 : unknownAgesState[facet.datafield]) || 'include';
+  const hasUnknownAgesSelection = unknownAges !== 'include';
+  const isActiveFacet = hasSelectedItems || type === _Types.InputTypes.SLIDER && hasUnknownAgesSelection;
   const limitCheckBoxCount = (facet === null || facet === void 0 ? void 0 : facet.showCheckboxCount) || 5;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Accordion, {
     square: true,

package/dist/components/facet/NewFacetStyle.js

@@ -0,0 +1,210 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Search_Icon = _interopRequireDefault(require("./assets/Search_Icon.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = () => ({
+  expansionPanelDetailsRoot: {
+    display: 'block'
+  },
+  expansionPanelsideBarItem: {
+    boxShadow: 'none',
+    marginTop: '8px',
+    margin: 'auto',
+    position: 'initial',
+    '&:before': {
+      position: 'initial'
+    }
+  },
+  subSectionSummaryText: {
+    marginLeft: '10px',
+    lineHeight: 0,
+    color: '#323232',
+    fontFamily: 'Raleway',
+    fontSize: '13px',
+    fontWeight: 'bold',
+    letterSpacing: '0.25px'
+  },
+  sortGroup: {
+    paddingTop: '10px',
+    marginBottom: '5px',
+    textAlign: 'left',
+    marginLeft: '-5px',
+    borderTop: 'none',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  sortGroupIcon: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '12px',
+    marginLeft: '24px'
+  },
+  sortGroupItem: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '32px'
+  },
+  NonSortGroup: {
+    marginBottom: '5px',
+    borderTop: '1px solid #B1B1B1',
+    textAlign: 'left',
+    paddingLeft: '10px'
+  },
+  NonSortGroupItem: {
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    marginRight: '32px'
+  },
+  sortGroupItemCounts: {
+    cursor: 'pointer',
+    fontFamily: 'Nunito',
+    fontSize: '10px',
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '5px'
+  },
+  highlight: {
+    color: '#b2c6d6'
+  },
+  showMore: {
+    textAlign: 'right',
+    paddingRight: '5px',
+    cursor: 'pointer',
+    fontSize: '10px',
+    width: '100%'
+  },
+  searchContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  searchBox: {
+    fontSize: '11px',
+    fontFamily: 'Nunito',
+    width: 'calc(100% - 26px)',
+    height: '30px',
+    marginTop: '12px',
+    borderRadius: '5px',
+    background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
+    marginLeft: '6px',
+    border: '1px solid',
+    padding: '5px'
+  },
+  searchBoxWithText: {
+    fontSize: '11px',
+    fontFamily: 'Nunito',
+    width: 'calc(100% - 26px)',
+    height: '30px',
+    marginTop: '12px',
+    borderRadius: '5px',
+    marginLeft: '6px',
+    border: '1px solid',
+    padding: '5px'
+  },
+  expandedDisplayButton: {
+    backgroundColor: '#4D889E !important',
+    color: 'white',
+    width: 'calc(100% - 26px)',
+    height: '30px',
+    marginBottom: '5px',
+    marginLeft: '6px',
+    borderRadius: '5px',
+    fontSize: '12px',
+    fontWeight: '600',
+    top: '8px'
+  },
+  clearTextButton: {
+    padding: '0px',
+    height: '20px',
+    position: 'absolute',
+    right: '14px',
+    top: '14px'
+  },
+  timeUnitToggle: {
+    marginLeft: '8px',
+    marginRight: '20px',
+    height: '32px',
+    '& .MuiToggleButtonGroup-grouped': {
+      borderRadius: '8px',
+      '&:not(:first-child)': {
+        marginLeft: '0px',
+        borderLeft: '1px solid #D3D3D3',
+        borderTopLeftRadius: '0px',
+        borderBottomLeftRadius: '0px'
+      },
+      '&:not(:last-child)': {
+        borderTopRightRadius: '0px',
+        borderBottomRightRadius: '0px'
+      }
+    }
+  },
+  toggleButton: props => {
+    const primaryColor = props.facet && props.facet.style && props.facet.style.colorPrimary ? props.facet.style.colorPrimary.color : '#3f51b5';
+    return {
+      fontFamily: 'Poppins !important',
+      fontSize: '11px !important',
+      fontWeight: '400 !important',
+      fontStyle: 'normal !important',
+      lineHeight: '100% !important',
+      letterSpacing: '0.02em !important',
+      padding: '6px 24px',
+      textTransform: 'uppercase !important',
+      border: '1px solid #D3D3D3',
+      borderRadius: '8px',
+      backgroundColor: '#EDEDED',
+      color: '#000000',
+      '& .MuiToggleButton-label': {
+        fontFamily: 'Poppins !important',
+        fontSize: '11px !important',
+        fontWeight: '400 !important',
+        lineHeight: '100% !important',
+        letterSpacing: '0.02em !important',
+        textTransform: 'uppercase !important'
+      },
+      '&:hover': {
+        backgroundColor: '#E0E0E0'
+      },
+      '&.Mui-disabled': {
+        backgroundColor: '#F5F5F5',
+        color: '#BDBDBD',
+        border: '1px solid #E0E0E0',
+        cursor: 'not-allowed',
+        '& .MuiToggleButton-label': {
+          color: '#BDBDBD'
+        }
+      },
+      '&.Mui-selected': {
+        backgroundColor: primaryColor,
+        color: '#FFFFFF',
+        '& .MuiToggleButton-label': {
+          fontFamily: 'Poppins !important',
+          fontSize: '11px !important',
+          fontWeight: '400 !important',
+          lineHeight: '100% !important',
+          letterSpacing: '0.02em !important',
+          textTransform: 'uppercase !important'
+        },
+        '&:hover': {
+          backgroundColor: primaryColor
+        }
+      }
+    };
+  },
+  toggleButtonSelected: props => {
+    const primaryColor = props.facet && props.facet.style && props.facet.style.colorPrimary ? props.facet.style.colorPrimary.color : '#3f51b5';
+    return {
+      backgroundColor: primaryColor,
+      color: '#FFFFFF !important',
+      '&:hover': {
+        backgroundColor: primaryColor
+      }
+    };
+  }
+});
+exports.default = _default;