adding additional components to Locator component (#120)

yext · Aug 7, 2019 · e334eef · e334eef
1 parent cca933e
commit e334eef
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 4 deletions.
diff --git a/src/ui/components/filters/filterboxcomponent.js b/src/ui/components/filters/filterboxcomponent.js
@@ -42,6 +42,13 @@ export default class FilterBoxComponent extends Component {
      */
     this._searchOnChange = config.searchOnChange || false;
 
+    /**
+     * If true, save filters on select
+     * @type {boolean}
+     * @private
+     */
+    this._saveOnChange = config.saveOnChange || false;
+
     /**
      * The selector of the apply button
      * @type {string}
@@ -117,11 +124,16 @@ export default class FilterBoxComponent extends Component {
    * @param {Filter} filter The new filter
    */
   onFilterChange (index, filter) {
+    console.log(this._saveOnChange)
     this._filters[index] = filter;
     if (this._searchOnChange) {
       this._saveFiltersToStorage();
       this._search();
     }
+    if (this._saveOnChange) {
+      console.log('go')
+      this._saveFiltersToStorage();
+    }
   }
 
   /**

diff --git a/src/ui/components/results/locatorcomponent.js b/src/ui/components/results/locatorcomponent.js
@@ -1,6 +1,7 @@
 /** @module SearchComponent */
 
 import Component from '../component';
+import DOM from '../../dom/dom';
 
 /**
  * LocatorComponent creates a Map next to a Results component,
@@ -15,6 +16,20 @@ export default class LocatorComponent extends Component {
     this._resultsConfig = config.resultsConfig || {};
     this._mapConfig = config.mapConfig || {};
     this._filtersConfig = config.filtersConfig || {};
+    this._searchBarConfig = config.searchBarConfig || {};
+    this._filterSearchConfig = config.filterSearchConfig || {};
+
+    /**
+     * Locator param: Determines whether or not to make the filters collapsable
+     * @type {boolean}
+     */
+    this._filterToggle = config.filterToggle || false;
+
+    /**
+     * Locator param: Text for the filter toggle button
+     * @type {string}
+     */
+    this._filterToggleText = config.filterToggleText || 'Advanced Filters';
 
     /**
      * Locator param: The template name to use for rendering with handlebars
@@ -27,6 +42,13 @@ export default class LocatorComponent extends Component {
     return 'Locator';
   }
 
+  setState(data) {
+    return super.setState(Object.assign({
+      filterToggle: this._filterToggle,
+      filterToggleText: this._filterToggleText
+    }, data));
+  }
+
   /**
    * Adds Results and Map lower level components
    */
@@ -37,6 +59,23 @@ export default class LocatorComponent extends Component {
     if (Object.keys(this._filtersConfig).length > 0) {
       this.initFilters();
     }
+
+    if (Object.keys(this._searchBarConfig).length > 0) {
+      this.initSearch();
+    }
+
+    if (Object.keys(this._filterSearchConfig).length > 0) {
+      this.initFilterSearch();
+    }
+
+    if (this._filterToggle) {
+      const toggleButton = DOM.query('.jx-yxt-locatorFilterToggle');
+      toggleButton.addEventListener('click', () => {
+        const filtersWrapper = DOM.query('.js-yxt-locatorFiltersWrapper');
+        filtersWrapper.classList.toggle('is-collapsed');
+        toggleButton.classList.toggle('is-expanded');
+      })
+    }
   }
 
   /**
@@ -66,6 +105,26 @@ export default class LocatorComponent extends Component {
     this.componentManager.create('FilterBox', Object.assign({
       parent: this,
       container: '.js-yxt-locatorFilters'
-    }, this._filtersConfig));
+    }, this._filtersConfig)).mount();
+  }
+
+  /**
+   * A helper method to mount the FilterBox component
+   */
+  initSearch () {
+    this.componentManager.create('SearchBar', Object.assign({
+      parent: this,
+      container: '.js-yxt-locatorSearch'
+    }, this._searchBarConfig)).mount();
+  }
+
+  /**
+   * A helper method to mount the FilterBox component
+   */
+  initFilterSearch () {
+    this.componentManager.create('FilterSearch', Object.assign({
+      parent: this,
+      container: '.js-yxt-locatorFiltersSearch'
+    }, this._filterSearchConfig)).mount();
   }
 }
diff --git a/src/ui/components/search/filtersearchcomponent.js b/src/ui/components/search/filtersearchcomponent.js
@@ -101,6 +101,12 @@ export default class FilterSearchComponent extends Component {
      * @type {string}
      */
     this.filter = opts.filter || this.getUrlParams().get(`${this.name}.filter`) || '';
+
+    /**
+     * The placeholder for the input box
+     * @type {string}
+     */
+    this._placeholder = opts.placeholder || null;
   }
 
   static get type () {
@@ -188,7 +194,8 @@ export default class FilterSearchComponent extends Component {
       title: this.title,
       searchText: this.searchText,
       query: this.query,
-      filter: this.filter
+      filter: this.filter,
+      placeholder: this._placeholder
     }, data));
   }
 

diff --git a/src/ui/components/search/searchcomponent.js b/src/ui/components/search/searchcomponent.js
@@ -209,6 +209,7 @@ export default class SearchComponent extends Component {
 
     if (this._verticalKey) {
       const allFilters = this.core.storage.getAll(StorageKeys.FILTER);
+      console.log(allFilters)
       const totalFilter = allFilters.length > 1
         ? Filter.and(...allFilters)
         : allFilters[0];

diff --git a/src/ui/templates/results/locator.hbs b/src/ui/templates/results/locator.hbs
@@ -1,6 +1,17 @@
 <div class="yxt-Locator">
   <div class="yxt-Locator-contentWrapper">
-    <div class="js-yxt-locatorFilters yxt-Locator-filtersWrapper"></div>
+    <div class="yxt-Locator-searchWrapper">
+      <div class="js-yxt-locatorSearch yxt-Locator-searchBar"></div>
+      {{#if filterToggle}}
+        <button class="jx-yxt-locatorFilterToggle yxt-Locator-filterToggle">
+          {{filterToggleText}}
+        </button>
+      {{/if}}
+      <div class="js-yxt-locatorFiltersWrapper yxt-Locator-filtersWrapper{{#if filterToggle}} is-collapsed{{/if}}">
+        <div class="js-yxt-locatorFiltersSearch yxt-Locator-filtersSearch"></div>
+        <div class="js-yxt-locatorFilters yxt-Locator-filtersBox"></div>
+      </div>
+    </div>
     <div class="js-yxt-locatorResults yxt-Locator-resultsWrapper"></div>
   </div>
   <div class="js-yxt-locatorMap yxt-Locator-mapWrapper"></div>

diff --git a/src/ui/templates/search/filtersearch.hbs b/src/ui/templates/search/filtersearch.hbs
@@ -1,6 +1,6 @@
 <h1>{{title}}</h1>
 <div class="yext-search-container">
   <label for="query">{{searchText}}</label>
-  <input class="js-yext-query" type="text" name="query" value="{{query}}"></input>
+  <input class="js-yext-query" type="text" name="query" value="{{query}}"{{#if placeholder}} placeholder="{{placeholder}}"{{/if}}></input>
   <div class="yext-search-autocomplete"></div>
 </div>