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

A Vue UI components library for building search experiences

import { Actions, helper } from '@appbaseio/reactivecore';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import { a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-5e8399d7.js';
import { createVNode, h } from 'vue';
import VueTypes from 'vue-types';
import { t as types } from './vueTypes-5d575822.js';
import '@appbaseio/reactivecore/lib/utils/transform';
import 'redux';
import { j as updateCustomQuery, u as updateDefaultQuery, i as isQueryIdentical, c as connect } from './index-3af85a74.js';
import { C as ComponentWrapper } from './ComponentWrapper-90d42a29.js';
import { P as PreferencesConsumer } from './PreferencesConsumer-a2bd59db.js';

var _excluded = ["options"];
var updateQuery = Actions.updateQuery,
  setQueryOptions = Actions.setQueryOptions,
  setCustomQuery = Actions.setCustomQuery,
  setDefaultQuery = Actions.setDefaultQuery;
var parseHits = helper.parseHits,
  isEqual = helper.isEqual,
  getCompositeAggsQuery = helper.getCompositeAggsQuery,
  getResultStats = helper.getResultStats,
  extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
  getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
var ReactiveComponent = {
  name: 'ReactiveComponent',
  props: {
    componentId: types.stringRequired,
    compoundClause: types.compoundClause,
    aggregationField: types.string,
    aggregationSize: VueTypes.number,
    size: VueTypes.number,
    defaultQuery: types.func,
    customQuery: types.func,
    filterLabel: types.string,
    react: types.react,
    showFilter: VueTypes.bool.def(true),
    URLParams: VueTypes.bool.def(false),
    distinctField: types.string,
    distinctFieldConfig: types.props,
    index: VueTypes.string,
    endpoint: types.endpointConfig
  },
  created: function created() {
    var _this = this;
    var props = this.$props;
    this.internalComponent = null;
    this.$defaultQuery = null;
    // Set custom query in store
    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, _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 = _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 = _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, _extends({}, _this.getAggsQuery(), options), false);
      }
      _this.updateQuery(_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) {
      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, _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 && !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, _extends({}, queryOptions, this.getAggsQuery()), false);
        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
        // Update default query for RS API
        updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
        this.updateQuery({
          componentId: this.internalComponent,
          query: query
        });
      }
    },
    customQuery: function customQuery(newVal, oldVal) {
      if (newVal && !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, _extends({}, queryOptions, this.getAggsQuery()), false);
        } else this.setQueryOptions(componentId, this.getAggsQuery(), false);

        // Update custom query for RS API
        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 = _extends({
        error: error,
        loading: isLoading
      }, this.getData(), {
        value: selectedValue,
        setQuery: this.setQuery
      });
      return 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(connect(mapStateToProps, mapDispatchtoProps)(ReactiveComponent), {
  componentType: componentTypes.reactiveComponent
});
var RcConnected = PreferencesConsumer({
  name: 'RcConnected',
  render: function render() {
    return h(ConnectedComponent, null, this.$slots);
  }
});
RcConnected.name = ReactiveComponent.name;
RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
// Add componentType for SSR
RcConnected.componentType = componentTypes.reactiveComponent;
RcConnected.install = function (Vue) {
  Vue.component(RcConnected.name, RcConnected);
};

export default RcConnected;