Fix/sp71 fix issues related to faceted search dev040

app-facet-search/src/App.js

@@ -18,79 +18,69 @@ class FacetSearch extends React.Component {
       is_enable: true,
       list_title: {},
       list_facet: {},
+      list_order: {}
     };
-    this.getTitle = this.getTitle.bind(this);
+    this.getTitleAndOrder = this.getTitleAndOrder.bind(this);
     this.get_facet_search_list = this.get_facet_search_list.bind(this);
     this.convertData = this.convertData.bind(this);
-    this.getUrlVars = this.getUrlVars.bind(this);
   }
 
-  getTitle() {
+  getTitleAndOrder() {
     let titleLst = {};
-    fetch("/facet-search/get-title", {method: "POST"})
+    let orderLst = {};
+    fetch("/facet-search/get-title-and-order", {method: "POST"})
       .then((r) => r.json())
       .then((response) => {
         if (response.status) {
-          titleLst = response.data;
+          titleLst = response.data.titles;
+          orderLst =response.data.order;
         }
         this.setState({ list_title: titleLst });
+        this.setState({ list_order: orderLst });
       });
   }
 
   get_facet_search_list() {
-    let search = window.location.search;
-    let url = "/api/records/";
-    let params = this.getUrlVars();
-    if (params.search_type && String(params.search_type) === "2") {
-      url = "/api/index/";
-    }
-    fetch(url + search)
+    let search = new URLSearchParams(window.location.search);
+    let url = search.get('search_type') == 2 ? "/api/index/" : "/api/records/";
+    fetch(url + '?' + search.toString())
       .then((r) => r.json())
       .then((res) => {
-        if (params.search_type && String(params.search_type) === "2") {
+        if (search.get('search_type') == 2) {
           // Index faceted search
-          const data =
-            res &&
-              res.aggregations &&
-              res.aggregations.path &&
-              res.aggregations.path.buckets &&
-              res.aggregations.path.buckets[0]
-              ? res.aggregations.path.buckets[0]
-              : {};
-          this.convertData(data && data[0] ? data[0] : {});
+          let aggregations = res && res.aggregations && res.aggregations.aggregations
+              ? res.aggregations.aggregations[0] : {};
+          this.convertData(aggregations);
         } else {
           // default faceted search
           this.convertData(res && res.aggregations ? res.aggregations : {});
         }
       });
   }
 
-  getUrlVars() {
-    let vars = {};
-    let pattern = /[?&]+([^=&]+)=([^&]*)/gi;
-    window.location.href.replace(pattern, function (m, key, value) {
-      vars[key] = value;
-    });
-    return vars;
-  }
-
   convertData(data) {
     let list_facet = {};
+    const {list_order} = this.state;
     if (data) {
-      Object.keys(data).map(function (name, k) {
-        let val = data[name][name] ? data[name][name] : data[name];
-        let hasBuckets = val["key"] && val["key"].hasOwnProperty("buckets");
-        hasBuckets = val.hasOwnProperty("buckets") || hasBuckets;
-        if (hasBuckets) {
-          list_facet[name] = val[name] ? val[name] : val;
-        }
+      Object.keys(list_order).map(function (order, key_order) {
+        list_facet[list_order[order]] = {'buckets': []};
+        Object.keys(data).map(function (name, k) {
+          if (list_order[order] == name) {
+            let val = data[name][name] ? data[name][name] : data[name];
+            let hasBuckets = val["key"] && val["key"].hasOwnProperty("buckets");
+            hasBuckets = val.hasOwnProperty("buckets") || hasBuckets;
+            if (hasBuckets) {
+              list_facet[name] = val[name] ? val[name] : val;
+            }
+          }
+        });
       });
     }
-    this.setState({ list_facet: list_facet });
+    this.setState({list_facet: list_facet});
   }
 
   componentDidMount() {
-    this.getTitle();
+    this.getTitleAndOrder();
     this.get_facet_search_list();
   }
 

app-facet-search/src/components/RangeFacet.jsx

@@ -34,10 +34,10 @@ function RangeFacet({ item, nameshow, name, key, labels }) {
       <Collapse isOpen={isOpen}>
         <div className="panel-body index-body">
           {!check_temp(name) && (
-            <RangeSelect value={item.buckets} name={name} labels={labels} />
+            <RangeSelect values={item.buckets} name={name} labels={labels} />
           )}
           {check_temp(name) && false && (
-            <RangeSlider value={item.buckets} name={name} labels={labels} />
+            <RangeSlider values={item.buckets} name={name} labels={labels} />
           )}
         </div>
       </Collapse>

app-facet-search/src/components/RangeSelect.jsx

@@ -3,7 +3,7 @@ import "rc-tooltip/assets/bootstrap.css";
 import React from "react";
 import Select from "react-select";
 
-function RangeSelect({ value, name, labels }) {
+function RangeSelect({ values, name, labels }) {
   function handleChange(params) {
     let searchUrl = "";
     if (search.indexOf("&") >= 0) {
@@ -21,36 +21,39 @@ function RangeSelect({ value, name, labels }) {
     }
     params.map(function (subitem, k) {
       const pattern =
-        encodeURIComponent(name) + "=" + encodeURIComponent(subitem.value);
+          encodeURIComponent(name) + "=" + encodeURIComponent(subitem.value);
       search += "&" + pattern;
     });
+    search = search.replace("q=0", "q=");
+    search += search.indexOf('is_facet_search=') == -1 ? '&is_facet_search=true' : '';
     window.location.href = "/search" + search;
   }
 
   let search = window.location.search.replace(",", "%2C") || "?";
-  let options_default = [];
+  let params = window.location.search.substring(1).split('&');
+  for (let i = 0; i < params.length; i++) {
+    params[i] = decodeURIComponent(params[i]);
+  }
+  let defaultOptions = [];
   let options = [];
-  if (value) {
-    value.map(function (subitem, k) {
-      let option = { label: "", value: "" };
-      const pattern =
-        encodeURIComponent(name) + "=" + encodeURIComponent(subitem.key);
-      const is_check = search.indexOf(pattern + "&") >= 0 ? true : false;
-      const is_end = search.endsWith(pattern);
-      option.label =
-        (labels[subitem.key] || subitem.key) + "(" + subitem.doc_count + ")";
-      option.value = subitem.key;
+  if (values) {
+    values.map(function (subitem, k) {
+      let option = {
+        label: (labels[subitem.key] || subitem.key) + "(" + subitem.doc_count + ")",
+        value: subitem.key
+      };
       options.push(option);
-      if (is_check || is_end) {
-        options_default.push(option);
+      let pattern = name + "=" + subitem.key;
+      if (params.indexOf(pattern) != -1) {
+        defaultOptions.push(option);
       }
     });
   }
   return (
     <div>
       <div className="select-container">
         <Select
-          defaultValue={options_default}
+          defaultValue={defaultOptions}
           isMulti
           name="Facet_Search"
           onChange={(_selectedOption) => {

app-facet-search/src/components/RangeSlider.jsx

@@ -9,7 +9,6 @@ function RangeSlider({ value, name, labels }) {
     let searchUrl = "";
     if (search.indexOf("&") >= 0) {
       let arrSearch = search.split("&");
-      console.log(arrSearch)
       for (let i = 0; i < arrSearch.length; i++) {
         if (arrSearch[i].indexOf(encodeURIComponent(name) + "=") < 0) {
           searchUrl += "&" + arrSearch[i];