bulk-search.html

<!--
Copyright 2017 Next Century Corporation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymer-fontawesome-iconset/fa-all.html">
<link rel="import" href="../button-action/button-action.html">
<link rel="import" href="../icon-button/icon-button.html">
<link rel="import" href="../iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../lodash-import/lodash.html">
<link rel="import" href="../styled-dialog/styled-dialog.html">
<link rel="import" href="../styled-dialog/styled-dialog-styles.html">
<link rel="import" href="../stylized-icon/stylized-icon.html">
<link rel="import" href="../terms-transformer/terms-transformer.html">
<link rel="import" href="../vaadin-upload/vaadin-upload.html">

<!--
A Polymer element that allows multiple searches simultaneously.

### Example
```js
var searchFields = [{
  color: "cyan",
  dateProperties: {},
  facetTransform: transFunc(),
  facets: true,
  field:"knowledge_graph.caliber_gauge.key",
  icon:"maps:local-offer",
  key:"caliber_gauge",
  link:"entity",
  queryField:"knowledge_graph.caliber_gauge.value",
  result:"header",
  search:true,
  sort: {
    sortId:1,
    sortType:"entity"
  },
  styleClass:"entity-cyan",
  title:"Caliber or Gauge",
  titlePlural:"Calibers or Gauges",
  type:"string",
},
{
  color: "pink",
  dateProperties: {},
  facetTransform: transFunc(),
  facets: true,
  field:"knowledge_graph.city.key",
  icon:"maps:place",
  key:"city",
  link:"entity",
  queryField:"knowledge_graph.city.value",
  result:"header",
  search:true,
  sort: {
    sortId:1,
    sortType:"entity"
  },
  styleClass:"entity-pink",
  title:"City",
  titlePlural:"Cities",
  type:"location",
}];
```

```html
<bulk-search
  search-fields="[[searchFields]]"
  parameter-key="[[searchFields.0.key]]"
  search-parameters="{{searchParameters}}"
  process-request="{{processRequest}}">
</bulk-search>
```

@demo demo/index.html
-->

<dom-module id="bulk-search">
  <template>
    <style include="iron-flex iron-flex-alignment"></style>
    <style include="styled-dialog-styles"></style>

    <style>
      :host {
        display: block;
      }

      stylized-icon {
        margin: 0 10px;
      }

      .hide {
        display: none;
      }

      .pointer > * {
        cursor: pointer;
      }

      iron-autogrow-textarea {
        border: unset;
        display: block;
        padding: 0;
        --iron-autogrow-textarea: {
          background-color: var(--paper-grey-100);
          padding: 5px;
        }
        /* Subtract the padding for the inner textarea. */
        height: calc(100% - 10px);
        width: calc(100% - 10px);
      }

      vaadin-upload {
        padding: 20px;
      }

      .warning.message {
        --stylized-icon-color: #ff0000;
      }
    </style>

    <terms-transformer category="[[_getCategory(searchFields, searchFieldsKeyProperty, searchFieldsTitleProperty, parameterKey)]]" search-default-value="optional"></terms-transformer>

    <styled-dialog id="bulkSearchDialog" header="Bulk Search from Uploaded File or Text" fill>
      <div class="layout horizontal">
        <div class="layout vertical styled-dialog-right-space">
          <span class="styled-dialog-name styled-dialog-tall styled-dialog-right-space">Instructions</span>
          <span class="styled-dialog-name styled-dialog-tall styled-dialog-right-space">Supported file types</span>
          <span class="styled-dialog-name styled-dialog-tall styled-dialog-right-space">Supported delimiters</span>
        </div>
        <div class="layout vertical">
          <span class="styled-dialog-tall styled-dialog-text">Please enter or paste search terms in the text box below or upload your own files.</span>
          <span class="styled-dialog-tall styled-dialog-text">plain text files (including .csv and .txt)</span>
          <span class="styled-dialog-tall styled-dialog-text">commas, semicolons, whitespace (including spaces, tabs, and newlines)</span>
        </div>
      </div>

      <div class="styled-dialog-divider"></div>

      <dropdown-menu
        data="[[_sortedSearchFields]]"
        label="Field"
        large
        no-label-float
        selected="{{parameterKey}}"
        title-property="[[searchFieldsTitleProperty]]"
        value-property="[[searchFieldsKeyProperty]]">
      </dropdown-menu>

      <template is="dom-if" if="[[!disableResetFields]]">
        <div class="layout horizontal center pointer styled-dialog-tall">
          <icon-button
            active="[[_resetTerms]]"
            bigger
            class="styled-dialog-right-space"
            icon="[[_getCheckboxIcon(_resetTerms)]]"
            padded
            title-tooltip="Reset Search Terms"
            on-tap="_toggleResetTerms">
          </icon-button>
          <span class="styled-dialog-text styled-dialog-right-space" on-tap="_toggleResetTerms">Reset Search Terms</span>
        </div>
      </template>

      <div class="styled-dialog-divider"></div>

      <!-- paper-textarea is broken so use iron-autogrow-textarea -->
      <iron-autogrow-textarea placeholder="Enter or Paste Search Terms" value="{{_termsInput}}" on-input="_handleParameterKeyOrTermsInputChange"></iron-autogrow-textarea>

      <vaadin-upload
        files="{{_files}}"
        method="POST"
        target="[[uploadEndpoint]]"
        on-upload-success="_setTermsInputWithFileText">
      </vaadin-upload>

      <div class="layout horizontal center">
        <button-action
          class$="styled-dialog-right-space [[_getButtonStyleClass('clean', _cleanInput, parameterKey, _termsInput)]]"
          disabled="[[_disableCleanButton(parameterKey, _termsInput)]]"
          icon="fa:wrench"
          text="Clean"
          click-listener="[[_createCleanListener()]]">
        </button-action>

        <button-action
          class$="styled-dialog-right-space [[_getButtonStyleClass('search', _cleanInput, parameterKey, _termsInput)]]"
          disabled="[[!_cleanInput]]"
          icon="fa:search"
          text="Search"
          click-listener="[[_createSearchListener()]]">
        </button-action>

        <button-action
          class="styled-dialog-right-space"
          icon="fa:undo"
          text="Reset"
          click-listener="[[_createResetListener()]]">
        </button-action>

        <stylized-icon class$="[[_getWarningMessageStyleClass(parameterKey, _termsInput)]]" icon="icons:warning"></stylized-icon>
        <span class$="styled-dialog-text [[_getWarningMessageStyleClass(parameterKey, _termsInput)]]">You must select a Field before you may Search.</span>

        <stylized-icon class$="[[_getWarningMessageStyleClass(_cleanInput, _termsInput)]]" icon="icons:warning"></stylized-icon>
        <span class$="styled-dialog-text [[_getWarningMessageStyleClass(_cleanInput, _termsInput)]]">You must Clean before you may Search.</span>
      </div>
    </styled-dialog>
  </template>

  <script>
  (function() {
    'use strict';

    Polymer({
      is: 'bulk-search',

      properties: {
        /**
         * Builds and returns the search state object from the given config object.
         *
         * @param {Object} config
         * @return {Object}
         */
        buildSearchState: {
          type: Object
        },

        /**
         * Whether the reset search fields is disabled.
         */
        disableResetFields: {
          type: Boolean,
          value: false
        },

        /**
         * The chosen key in the `searchParameters`.
         *
         * @type {String}
         */
        parameterKey: {
          observer: '_handleParameterKeyOrTermsInputChange',
          type: String,
          value: ''
        },

        /**
         * Whether DIG may process the current query request.
         *
         * @type {Boolean}
         */
        processRequest: {
          notify: true,
          type: Boolean
        },

        /**
         * The list of search field objects to show in the dropdown menu.
         *
         * @type {Array}
         */
        searchFields: {
          type: Array
        },

        /**
         * The property in the search field objects for the key.
         *
         * @type {String}
         * @default 'key'
         */
        searchFieldsKeyProperty: {
          type: String,
          value: 'key'
        },

        /**
         * The property in the search field objects for the title.
         *
         * @type {String}
         * @default 'title'
         */
        searchFieldsTitleProperty: {
          type: String,
          value: 'title'
        },

        /**
         * The search parameters.
         *
         * @type {Object}
         */
        searchParameters: {
          notify: true,
          type: Object
        },

        /**
         * The file upload endpoint.
         *
         * @type {String}
         * @default '/upload'
         */
        uploadEndpoint: {
          type: String,
          value: '/upload'
        },

        /**
         * Whether the terms input is clean.
         *
         * @type {Boolean}
         * @default false
         * @private
         */
        _cleanInput: {
          type: Boolean,
          value: false
        },

        /**
         * The uploaded files.
         *
         * @type {Array}
         * @private
         */
        _files: {
          type: Array
        },

        /**
         * Whether to reset all the searchParameters whenever a search is run.
         *
         * @type {Boolean}
         * @default true
         */
        _resetTerms: {
          type: Boolean,
          value: true
        },

        /**
         * The sorted list of search fields.
         *
         * @type {Array}
         * @private
         */
        _sortedSearchFields: {
          computed: '_sortSearchFields(searchFields, searchFieldsTitleProperty)',
          type: Array
        },

        /**
         * The terms input for the dialog.
         *
         * @type {String}
         * @default ''
         * @private
         */
        _termsInput: {
          type: String,
          value: ''
        }
      },

      /**
       * Returns the on-click listener object for the search button-action.
       *
       * @return {Object}
       * @private
       */
      _createCleanListener: function() {
        var self = this;
        return {
          onClick: function() {
            if(self.parameterKey && self._termsInput) {
              self._termsInput = self._termsInput.trim();
              // TODO Move out of element!
              if(self.parameterKey === 'phone') {
                self._termsInput = self._unformatPhones(self._termsInput);
              }
              self._cleanInput = !!self._termsInput;
            }
          }
        };
      },

      /**
       * Returns the on-click listener object for the search button-action.
       *
       * @return {Object}
       * @private
       */
      _createSearchListener: function() {
        var self = this;
        return {
          onClick: function() {
            if(self.parameterKey && self._termsInput && self._cleanInput) {
              var termsTransformer = self.$$('terms-transformer');
              var termsArray = self._termsInput.replace(/\n/g, ' ').split(' ');
              var termsParameter = termsTransformer.createObjectFromList(termsArray);
              self.$$('#bulkSearchDialog').close();
              self.set('processRequest', false);
              if(self._resetTerms) {
                var parameters = {};
                parameters[self.parameterKey] = termsParameter;
                self.set('searchParameters', self.buildSearchState(parameters, self.searchParameters));
              } else {
                self.set('searchParameters.' + self.parameterKey, termsParameter);
              }
              self.set('processRequest', true);
              self.set('_termsInput', '');
              self.set('_files', []);
            }
          }
        };
      },

      /**
       * Returns the on-click listener object for the reset button-action.
       *
       * @return {Object}
       * @private
       */
      _createResetListener: function() {
        var self = this;
        return {
          onClick: function() {
            self.set('_termsInput', '');
            self.set('_cleanInput', false);
            self.set('_files', []);
          }
        };
      },

      /**
       * Returns whether to disable the clean button.
       *
       * @param {String} parameterKey
       * @param {String} termsInput
       * @return {Boolean}
       * @private
       */
      _disableCleanButton: function(parameterKey, termsInput) {
        return !parameterKey || !termsInput;
      },

      /**
       * Returns the style class for the button of the given type.
       *
       * @param {String} type
       * @param {Boolean} cleanInput
       * @param {String} parameterKey
       * @param {String} termsInput
       * @return {String}
       * @private
       */
      _getButtonStyleClass: function(type, cleanInput, parameterKey, termsInput) {
        if(type === 'clean') {
          return (!!termsInput && !!parameterKey && !cleanInput ? 'active' : '');
        }
        if(type === 'search') {
          return (!!termsInput && !!parameterKey && cleanInput ? 'active' : '');
        }
        return '';
      },

      /**
       * Returns the category of the search field with the given parameter key.
       *
       * @param {Array} searchFields
       * @param {String} keyProperty
       * @param {String} titleProperty
       * @param {String} parameterKey
       * @return {String}
       * @private
       */
      _getCategory: function(searchFields, keyProperty, titleProperty, parameterKey) {
        if(!searchFields || !keyProperty || !titleProperty || !parameterKey) {
          return;
        }
        for(var i = 0; i < searchFields.length; ++i) {
          if(searchFields[i][keyProperty] === parameterKey) {
            return searchFields[i][titleProperty];
          }
        }
        return undefined;
      },

      /**
       * Returns the checkbox icon for the given setting.
       *
       * @param {Boolean} setting
       * @return {String}
       * @private
       */
      _getCheckboxIcon: function(setting) {
        return setting ? 'check-box' : 'check-box-outline-blank';
      },

      /**
       * Returns the given property in the given item.
       *
       * @param {Object} item
       * @param {String} property
       * @return {Object}
       * @private
       */
      _getProperty: function(item, property) {
        return item[property];
      },

      /**
       * Returns the style class for whether to show or hide the warning message icon and text.
       *
       * @param {Boolean|String} prerequisite
       * @param {String} termsInput
       * @return {String}
       * @private
       */
      _getWarningMessageStyleClass: function(prerequisite, termsInput) {
        return (!prerequisite && termsInput) ? 'warning message' : 'hide';
      },

      /**
       * Handles change in the parameter key or terms input.  Sets _cleanInput to false.
       *
       * @private
       */
      _handleParameterKeyOrTermsInputChange: function() {
        this._cleanInput = false;
      },

      /**
       * Sets the terms input in the dialog with the file text.
       *
       * @event success
       * @private
       */
      _setTermsInputWithFileText: function(event) {
        if(event.detail && event.detail.xhr && event.detail.xhr.response) {
          this._termsInput = (this._termsInput || '') + event.detail.xhr.response;
          this._cleanInput = false;
        }
      },

      /**
       * Returns the sorted list of search fields.
       *
       * @param {Array} searchFields
       * @param {String} titleProperty
       * @return {Array}
       * @private
       */
      _sortSearchFields: function(searchFields, titleProperty) {
        // Use concat to create a copy.
        if(!searchFields || !titleProperty) {
          return;
        }
        return searchFields.concat().sort(function(a, b) {
          return a[titleProperty].localeCompare(b[titleProperty]);
        });
      },

      /**
       * Toggles _resetTerms.
       *
       * @private
       */
      _toggleResetTerms: function() {
        this.set('_resetTerms', !this._resetTerms);
      },

      /**
       * Returns a string of unformatted phones separated by newlines.
       *
       * @param {String} phone
       * @return {String}
       * @private
       */
      _unformatPhones: function(phone) {
        // Replace all delimiters (whitespace, commas, and, semicolons) with single spaces.
        return phone.replace(/[\s,;]/g, ' ')
          // Remove all non-digit, non-whitespace characters.
          .replace(/[^\d\s]/g, '')
          // Remove extra spaces.
          .replace(/\s+/g, '\n')
          .trim();
      },

      /**
       * Opens the dialog.
       */
      open: function() {
        this.$$('#bulkSearchDialog').open();
      }
    });
  })();
  </script>
</dom-module>