bvedad / ember-slack-search-input

Ember Addon

ember-slack-search-input

Attempt to replicate slack search input field as ember addon.

Demo

Like search input field in slack, special keywords(modifiers) are used to filter out the search. This modifiers are passed as form of config object with options like:

  configHash: {
    "@": { // '@' is special key (modifier) which highlighted in input
      type: 'list', // type of modifier (either list or date)
      defaultHint: 'any user', // displayed when modifier is active but has no value
      sectionTitle: 'Users', // used as header when all modifiers content displayed
      content: [ // content to be used for displaying list
        {value: 'abrahm', label: 'Abrahm Micanski' },
        {value: 'lilly', label: 'Lilly Richards' },
        {value: 'emma', label: 'Emma Roberts' },
      ]
    },

    "before:": {
      type: 'date',
      defaultHint: 'a date',
    }
  }

{{slack-search-input
  placeholder='search for objects'
  configHash=configHash
  inputValue=''
  isPopupHidden=false
  maxlength=250
  valueChange=(action 'searchValueChange')
  modifierAutoComplete=(action 'modifierAutoComplete')
  enter=(action 'search')
  focus-in=(action 'inputFocusedIn')
  focus-out=(action 'inputFocusedOut')
}}

There is also help popup which is displayed when user focuses input first time. The content of popup should be passed to slack-search-input in block form.

{{#slack-search-input as |concatToInputValue|}}
  <div class="help-title">
    Search with Filters
  </div>
  <span class='help-text'>Narrow your search using filter <span onmousedown={{action concatToInputValue 'before:'}} class='modifier'>before:</span>, <span onmousedown={{action concatToInputValue 'channel:'}} class='modifier'>channel:</span> or <span onmousedown={{action concatToInputValue '@'}} class='modifier'>@</span>. Or press plus key <span onmousedown={{action concatToInputValue '+'}} class='modifier'>+</span> to get all available filters</span>
{{/slack-search-input}}

slack-search-input options

placeholder:String

Simple placeholder displayed when input has no value

configHash:Object

Config object used for getting modifiers

inputValue:String

Initial value of input

isPopupHidden:Boolean

Can be used to hide popups

maxlength:Number

Max character length of input

valueChange(newValue:String)

Fired when inputValue changes

modifierAutoComplete(newValue:String, modifierValue:Object)

Fired when modifier has valid value

escape()

Fired when the escape key is hit

Modifier Types

Currently two types of modifiers are supported list and date:

• Date - Date picker popup is showed when modifier is active.
• List - List is simple list of possible options

Deserialize Query String

Once you got query string, you can deserialze it to object.

  import { deserializeQueryString } from `ember-slack-search-input`;


  search() {
    let queryString = get(this, 'queryString');
    console.log(queryString) // `before:2000-23-23 lorem`
    let modifiers = deserializeQueryString(queryString);
    let before = modifiers['before:'];
    let { model, fullText, modifier, value } = before[0]; //first occurance of `before:`
    console.log(model); // moment date
    console.log(fullText); // before:2000-23-23
    console.log(modifier); // before:
    console.log(value); // 2000-23-23
  }

Requirements

Currently addon styles has hard dependency on bootstrap 3.x.x, bootstrap should be installed already to styles work properly. For input field to react properly to paste/cut events, they should be added to customEvents hash in app.js.

App = Ember.Application.extend({
  customEvents: {
    paste: "paste",
    cut: "cut"
  },
  ...
});

Installation

ember install ember-slack-search-input

TODO

• write more tests
• add more modifier types
• remove bootstrap dependency