Merge pull request #585 from thecartercenter/9402_searchbox_filter

9402 advanced search filter

Author: Tom Smyth

app/assets/javascripts/views/search_form_view.js.coffee

@@ -17,7 +17,7 @@ class ELMO.Views.SearchFormView extends ELMO.Views.ApplicationView
 
   # Add or replace the specified search qualifier
   setQualifier: (qualifier, val) ->
-    search_box = this.$('#search_str')
+    search_box = this.$('.search-str')
     current_search = search_box.val()
 
     # Remove the qualifier text if it's already in the current search

app/assets/stylesheets/global/_search.scss

@@ -1,7 +1,7 @@
 form.search-form {
   margin-bottom: 10px;
 
-  input#search_str {
+  input.search-str {
     width: 500px;
     margin-#{$right}: 5px;
     padding: 3px;

app/assets/stylesheets/local/search/_filters.scss

@@ -1,5 +1,13 @@
 .filters {
   margin-bottom: 4px;
+
+  .btn-toolbar {
+    margin-bottom: 5px;
+  }
+
+  .btn-margin-left {
+    margin-left: 5px;
+  }
 }
 
 .filters-popover {

app/javascript/components/search/AdvancedSearchFilter.js

@@ -0,0 +1,60 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "react-bootstrap/lib/Button";
+
+import {isQueryParamTruthy} from "./utils";
+
+class AdvancedSearchFilter extends React.Component {
+  constructor(props) {
+    super();
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  handleKeyDown(event) {
+    const {onSubmit} = this.props;
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onSubmit();
+    }
+  }
+
+  render() {
+    const {advancedSearchText, onChangeAdvancedSearch, onClear, onSubmit} = this.props;
+
+    return (
+      <div>
+        <input
+          autoComplete="off"
+          className="form-control search-str"
+          name="search"
+          onChange={onChangeAdvancedSearch}
+          onKeyDown={this.handleKeyDown}
+          placeholder={I18n.t("filter.advancedSearch")}
+          type="text"
+          value={advancedSearchText} />
+        <Button
+          className="btn-apply btn-advanced-search"
+          onClick={onSubmit}>
+          {I18n.t("common.search")}
+        </Button>
+        {isQueryParamTruthy("search") ? (
+          <Button
+            className="btn-clear btn-margin-left"
+            onClick={onClear}>
+            {I18n.t("common.clear")}
+          </Button>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+AdvancedSearchFilter.propTypes = {
+  advancedSearchText: PropTypes.string.isRequired,
+  onChangeAdvancedSearch: PropTypes.func.isRequired,
+  onClear: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+export default AdvancedSearchFilter;

app/javascript/components/search/Filters.js

@@ -4,29 +4,38 @@ import ButtonToolbar from "react-bootstrap/lib/ButtonToolbar";
 
 import {CONTROLLER_NAME, getFilterString, submitSearch} from "./utils";
 import FormFilter from "./FormFilter";
+import AdvancedSearchFilter from "./AdvancedSearchFilter";
 
 class Filters extends React.Component {
   constructor(props) {
     super();
 
-    const {selectedFormIds} = props;
+    const {
+      selectedFormIds,
+      advancedSearchText,
+    } = props;
 
     /*
      * The state for all filters is held here.
      * Individual filters invoke callbacks to notify this parent component of changes.
      */
-    this.state = {selectedFormIds};
+    this.state = {
+      selectedFormIds,
+      advancedSearchText,
+    };
 
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleSelectForm = this.handleSelectForm.bind(this);
     this.handleClearFormSelection = this.handleClearFormSelection.bind(this);
+    this.handleChangeAdvancedSearch = this.handleChangeAdvancedSearch.bind(this);
+    this.handleClearFilters = this.handleClearFilters.bind(this);
     this.renderFilterButtons = this.renderFilterButtons.bind(this);
   }
 
   handleSubmit() {
     const {allForms} = this.props;
     const {selectedFormIds} = this.state;
-    const filterString = getFilterString(selectedFormIds, allForms);
+    const filterString = getFilterString(allForms, this.state);
     submitSearch(filterString);
   }
 
@@ -38,12 +47,20 @@ class Filters extends React.Component {
     this.setState({selectedFormIds: []});
   }
 
+  handleChangeAdvancedSearch(event) {
+    this.setState({advancedSearchText: event.target.value});
+  }
+
+  handleClearFilters() {
+    submitSearch(null);
+  }
+
   renderFilterButtons() {
     const {allForms, selectedFormIds: originalFormIds} = this.props;
     const {selectedFormIds} = this.state;
 
     return (
-      <ButtonToolbar className="filters">
+      <ButtonToolbar>
         <FormFilter
           allForms={allForms}
           onClearSelection={this.handleClearFormSelection}
@@ -57,23 +74,36 @@ class Filters extends React.Component {
 
   render() {
     const {controllerName} = this.props;
+    const {advancedSearchText} = this.state;
     const shouldRenderButtons = controllerName === CONTROLLER_NAME.RESPONSES;
 
     return (
-      <React.Fragment>
+      <div className="filters">
         {shouldRenderButtons ? this.renderFilterButtons() : null}
-      </React.Fragment>
+
+        <AdvancedSearchFilter
+          advancedSearchText={advancedSearchText}
+          onChangeAdvancedSearch={this.handleChangeAdvancedSearch}
+          onClear={this.handleClearFilters}
+          onSubmit={this.handleSubmit} />
+      </div>
     );
   }
 }
 
 Filters.propTypes = {
+  advancedSearchText: PropTypes.string.isRequired,
   allForms: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     name: PropTypes.string
   })).isRequired,
-  controllerName: PropTypes.string.isRequired,
+  controllerName: PropTypes.string,
   selectedFormIds: PropTypes.arrayOf(PropTypes.string).isRequired
 };
 
+Filters.defaultProps = {
+  // This is expected to be null if the feature flag is disabled.
+  controllerName: null,
+};
+
 export default Filters;

app/javascript/components/search/utils.js

@@ -1,4 +1,5 @@
 import isEmpty from "lodash/isEmpty";
+import queryString from "query-string";
 
 const MAX_HINTS_BEFORE_ELLIPSIZE = 1;
 
@@ -37,12 +38,13 @@ export function getFormNameFromId(allForms, searchId) {
  * Given all of the different filter states,
  * return a stringified version for the backend.
  */
-export function getFilterString(selectedFormIds, allForms) {
+export function getFilterString(allForms, {selectedFormIds, advancedSearchText}) {
   const selectedFormNames = selectedFormIds
     .map((id) => JSON.stringify(getFormNameFromId(allForms, id)));
 
   const parts = [
     isEmpty(selectedFormNames) ? null : `form:(${selectedFormNames.join("|")})`,
+    advancedSearchText,
   ].filter(Boolean);
 
   return parts.join(" ");
@@ -52,5 +54,20 @@ export function getFilterString(selectedFormIds, allForms) {
  * Reload the page with the given search.
  */
 export function submitSearch(filterString) {
-  window.location.assign(`?search=${encodeURIComponent(filterString)}`);
+  const parsed = queryString.parse(window.location.search);
+  // The `search` query param will be removed from the URL if it's `undefined`.
+  const search = filterString || undefined;
+  const params = queryString.stringify({...parsed, search});
+
+  window.location.assign(params
+    ? `?${params}`
+    : window.location.pathname);
+}
+
+/**
+ * Returns true if the given param name exists and is non-empty.
+ */
+export function isQueryParamTruthy(paramName) {
+  const parsed = queryString.parse(window.location.search);
+  return Boolean(parsed[paramName]);
 }

app/views/searches/_form.html.erb

@@ -1,7 +1,8 @@
 <form class="search-form form-inline">
   <%= react_component("search/Filters", {
     controllerName: Settings.filters_beta.present? ? controller_name.to_json : nil,
-    allForms: [
+    advancedSearchText: params[:search] || "",
+    allForms: Settings.filters_beta.present? ? [
       {
         id: "1",
         name: "Form A"
@@ -14,16 +15,9 @@
         id: "3",
         name: "Q\"uo'te`s"
       }
-    ],
-    selectedFormIds: ["2"]
+    ] : [],
+    selectedFormIds: Settings.filters_beta.present? ? ["2"] : []
   }) %>
-  <input type="text" class="form-control" name="search"
-    value="<%= params[:search] %>" id="search_str" placeholder="<%= t("common.search") %>" autocomplete="off">
-  <input type="submit" value="<%= t("common.search") %>" class="btn btn-default">
-  <% if params[:search].present? %>
-    <input type="button" value="<%= t("common.clear") %>" class="btn btn-default btn-clear">
-  <% end %>
-  <br/>
   <div class="search-footer">
     <%= search_examples %>
     <a href="#"><%= t('search.help_link') %></a>

config/locales/en/main.yml

@@ -1284,6 +1284,7 @@ en:
   filter:
     form: "Form"
     chooseForm: "Choose a form"
+    advancedSearch: "Advanced search"
 
   form:
     select_api_users: "Select all users who can access form data via the API:"

package.json

@@ -19,6 +19,7 @@
     "jquery": "3.3.1",
     "lodash": "4.17.11",
     "prop-types": "^15.6.1",
+    "query-string": "6.3.0",
     "react": "^16.4.1",
     "react-bootstrap": "0.32.4",
     "react-dom": "^16.4.1",

spec/features/forms/question/question_index_spec.rb

@@ -22,7 +22,7 @@
       visit("/en/m/#{mission.compact_name}/questions")
 
       # do a search
-      fill_in "search_str", with: "dup"
+      fill_in class: "search-str", with: "dup"
       click_on "Search"
 
       # clear search box