@appbaseio/reactivesearch-vue/dist/cjs/ReactiveComponent.js

A Vue UI components library for building search experiences

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var reactivecore = require('@appbaseio/reactivecore');
var constants = require('@appbaseio/reactivecore/lib/utils/constants');
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-1a877b17.js');
var vue = require('vue');
var VueTypes = _interopDefault(require('vue-types'));
var vueTypes = require('./vueTypes-adf43075.js');
require('@appbaseio/reactivecore/lib/utils/transform');
require('redux');
var index = require('./index-7ca9570e.js');
var ComponentWrapper = require('./ComponentWrapper-3bedbe57.js');
var PreferencesConsumer = require('./PreferencesConsumer-37cab7a0.js');

var _excluded = ["options"];
var updateQuery = reactivecore.Actions.updateQuery,
  setQueryOptions = reactivecore.Actions.setQueryOptions,
  setCustomQuery = reactivecore.Actions.setCustomQuery,
  setDefaultQuery = reactivecore.Actions.setDefaultQuery;
var parseHits = reactivecore.helper.parseHits,
  isEqual = reactivecore.helper.isEqual,
  getCompositeAggsQuery = reactivecore.helper.getCompositeAggsQuery,
  getResultStats = reactivecore.helper.getResultStats,
  extractQueryFromCustomQuery = reactivecore.helper.extractQueryFromCustomQuery,
  getOptionsForCustomQuery = reactivecore.helper.getOptionsForCustomQuery;
var ReactiveComponent = {
  name: 'ReactiveComponent',
  props: {
    componentId: vueTypes.types.stringRequired,
    compoundClause: vueTypes.types.compoundClause,
    aggregationField: vueTypes.types.string,
    aggregationSize: VueTypes.number,
    size: VueTypes.number,
    defaultQuery: vueTypes.types.func,
    customQuery: vueTypes.types.func,
    filterLabel: vueTypes.types.string,
    react: vueTypes.types.react,
    showFilter: VueTypes.bool.def(true),
    URLParams: VueTypes.bool.def(false),
    distinctField: vueTypes.types.string,
    distinctFieldConfig: vueTypes.types.props,
    index: VueTypes.string,
    endpoint: vueTypes.types.endpointConfig
  },
  created: function created() {
    var _this = this;
    var props = this.$props;
    this.internalComponent = null;
    this.$defaultQuery = null;
    // Set custom query in store
    index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
    var customQuery = props.customQuery,
      componentId = props.componentId,
      filterLabel = props.filterLabel,
      showFilter = props.showFilter,
      URLParams = props.URLParams;
    if (customQuery) {
      var calcCustomQuery = customQuery(this.selectedValue, props);
      var query = extractQueryFromCustomQuery(calcCustomQuery);
      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery(calcCustomQuery) : null;
      if (customQueryOptions) {
        this.setQueryOptions(componentId, _rollupPluginBabelHelpers._extends({}, customQueryOptions, this.getAggsQuery()), false);
      } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
      this.updateQuery({
        componentId: componentId,
        query: query,
        value: this.selectedValue || null,
        label: filterLabel,
        showFilter: showFilter,
        URLParams: URLParams
      });
    }
    this.setQuery = function (_ref) {
      var options = _ref.options,
        obj = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_ref, _excluded);
      var queryToBeSet = obj.query;

      // when enableAppbase is true, Backend throws error because of repeated query in request body
      if (queryToBeSet && queryToBeSet.query) {
        queryToBeSet = queryToBeSet.query;
      }
      var customQueryCalc = _rollupPluginBabelHelpers._extends({}, options, {
        query: queryToBeSet
      });
      var rsAPIQuery = customQueryCalc;
      // handle stored queries
      if (queryToBeSet && queryToBeSet.id) {
        rsAPIQuery = queryToBeSet;
      }
      // Update customQuery field for RS API
      _this.setCustomQuery(props.componentId, rsAPIQuery);
      if (options) {
        _this.setQueryOptions(props.componentId, _rollupPluginBabelHelpers._extends({}, _this.getAggsQuery(), options), false);
      }
      _this.updateQuery(_rollupPluginBabelHelpers._extends({}, obj, {
        query: customQueryCalc.query,
        componentId: props.componentId,
        label: props.filterLabel,
        showFilter: props.showFilter,
        URLParams: props.URLParams
      }));
    };
    if (props.defaultQuery) {
      this.internalComponent = props.componentId + "__internal";
    }
    if (this.internalComponent && this.$props.defaultQuery) {
      index.updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
      this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
      var _query = extractQueryFromCustomQuery(this.$defaultQuery);
      var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
      if (queryOptions) {
        this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends({}, queryOptions, this.getAggsQuery()), false);
      } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
      this.updateQuery({
        componentId: this.internalComponent,
        query: _query
      });
    }
  },
  watch: {
    hits: function hits(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.$emit('data', this.getData());
      }
    },
    rawData: function rawData(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.$emit('data', this.getData());
      }
    },
    aggregations: function aggregations(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.$emit('data', this.getData());
      }
    },
    aggregationData: function aggregationData(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.$emit('data', this.getData());
      }
    },
    promotedResults: function promotedResults(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.$emit('data', this.getData());
      }
    },
    hidden: function hidden(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.$emit('data', this.getData());
      }
    },
    total: function total(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.$emit('data', this.getData());
      }
    },
    time: function time(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.$emit('data', this.getData());
      }
    },
    defaultQuery: function defaultQuery(newVal, oldVal) {
      if (newVal && !index.isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
        this.$defaultQuery = newVal(this.selectedValue, this.$props);
        var query = extractQueryFromCustomQuery(this.$defaultQuery);
        var queryOptions = getOptionsForCustomQuery(this.$defaultQuery);
        if (queryOptions) {
          this.setQueryOptions(this.internalComponent, _rollupPluginBabelHelpers._extends({}, queryOptions, this.getAggsQuery()), false);
        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
        // Update default query for RS API
        index.updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
        this.updateQuery({
          componentId: this.internalComponent,
          query: query
        });
      }
    },
    customQuery: function customQuery(newVal, oldVal) {
      if (newVal && !index.isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
        var componentId = this.$props.componentId;
        this.$customQuery = newVal(this.selectedValue, this.$props);
        var query = extractQueryFromCustomQuery(this.$customQuery);
        var queryOptions = getOptionsForCustomQuery(this.$customQuery);
        if (queryOptions) {
          this.setQueryOptions(componentId, _rollupPluginBabelHelpers._extends({}, queryOptions, this.getAggsQuery()), false);
        } else this.setQueryOptions(componentId, this.getAggsQuery(), false);

        // Update custom query for RS API
        index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
        this.updateQuery({
          componentId: componentId,
          query: query
        });
      }
    }
  },
  render: function render() {
    try {
      var dom = this.$slots["default"];
      var error = this.error,
        isLoading = this.isLoading,
        selectedValue = this.selectedValue;
      var propsToBePassed = _rollupPluginBabelHelpers._extends({
        error: error,
        loading: isLoading
      }, this.getData(), {
        value: selectedValue,
        setQuery: this.setQuery
      });
      return vue.createVNode("div", null, [dom(propsToBePassed)]);
    } catch (e) {
      return null;
    }
  },
  methods: {
    getAggsQuery: function getAggsQuery() {
      if (this.aggregationField) {
        return {
          aggs: getCompositeAggsQuery({
            props: this.$props,
            showTopHits: true,
            value: this.selectedValue
          }).aggs
        };
      }
      return {};
    },
    getData: function getData() {
      var hits = this.hits,
        aggregations = this.aggregations,
        aggregationData = this.aggregationData,
        promotedResults = this.promotedResults,
        rawData = this.rawData;
      var filteredResults = parseHits(hits);
      if (promotedResults.length) {
        var ids = promotedResults.map(function (item) {
          return item._id;
        }).filter(Boolean);
        if (ids) {
          filteredResults = filteredResults.filter(function (item) {
            return !ids.includes(item._id);
          });
        }
        filteredResults = [].concat(promotedResults, filteredResults);
      }
      return {
        data: filteredResults,
        aggregationData: aggregationData,
        rawData: rawData,
        aggregations: aggregations,
        promotedData: promotedResults,
        resultStats: this.stats
      };
    }
  },
  computed: {
    stats: function stats() {
      return getResultStats(this);
    }
  }
};
ReactiveComponent.hasInternalComponent = function (props) {
  return !!props.defaultQuery;
};
var mapStateToProps = function mapStateToProps(state, props) {
  return {
    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
    aggregationData: state.compositeAggregations[props.componentId] || [],
    hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
    rawData: state.rawData[props.componentId],
    error: state.error[props.componentId],
    isLoading: state.isLoading[props.componentId],
    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
    promotedResults: state.promotedResults[props.componentId] || [],
    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
    total: state.hits[props.componentId] && state.hits[props.componentId].total,
    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
    componentProps: state.props[props.componentId]
  };
};
var mapDispatchtoProps = {
  setQueryOptions: setQueryOptions,
  updateQuery: updateQuery,
  setCustomQuery: setCustomQuery,
  setDefaultQuery: setDefaultQuery
};
var ConnectedComponent = ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchtoProps)(ReactiveComponent), {
  componentType: constants.componentTypes.reactiveComponent
});
var RcConnected = PreferencesConsumer.PreferencesConsumer({
  name: 'RcConnected',
  render: function render() {
    return vue.h(ConnectedComponent, null, this.$slots);
  }
});
RcConnected.name = ReactiveComponent.name;
RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
// Add componentType for SSR
RcConnected.componentType = constants.componentTypes.reactiveComponent;
RcConnected.install = function (Vue) {
  Vue.component(RcConnected.name, RcConnected);
};

exports.default = RcConnected;