add filters

server/crm/src/main/java/com/pudonghot/ambition/crm/controller/CustomerController.java

@@ -6,6 +6,7 @@ import java.util.HashMap;
 import javax.validation.Valid;
 import com.alibaba.fastjson.JSON;
 import lombok.extern.slf4j.Slf4j;
+import com.alibaba.fastjson.JSONObject;
 import me.chyxion.tigon.mybatis.Search;
 import me.chyxion.tigon.model.ViewModel;
 import javax.validation.constraints.Max;
@@ -18,14 +19,11 @@ import org.springframework.stereotype.Controller;
 import com.pudonghot.ambition.crm.model.Customer;
 import org.apache.shiro.authz.annotation.RequiresRoles;
 import org.springframework.web.multipart.MultipartFile;
-import com.pudonghot.ambition.crm.model.CustomerProperty;
 import com.pudonghot.ambition.crm.service.CustomerService;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RequestMethod;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.RequestMapping;
 import com.pudonghot.ambition.crm.model.CustomerYearToDateSale;
-import com.pudonghot.ambition.crm.service.CustomerPropertyService;
 import com.pudonghot.ambition.crm.form.create.CustomerFormForCreate;
 import com.pudonghot.ambition.crm.form.update.CustomerFormForUpdate;
 
@@ -76,9 +74,6 @@ public class CustomerController
         CRITERION_COLS.put("ytdSale", CustomerYearToDateSale.YTD_SALE);
     }
 
-    @Autowired
-    private CustomerPropertyService customerPropertyService;
-
     @RequestMapping("/list")
     public ListResult<ViewModel<Customer>> list(
         @Min(0)
@@ -92,24 +87,18 @@ public class CustomerController
         final String strSearch,
         @RequestParam(value = "criteria", required = false)
         final String criteria,
+        @RequestParam(value = "filters", required = false)
+        final String filters,
         @RequestParam(value = "sorters", required = false)
         final String sorters) {
 
-        final Search search = new Search();
+        final Search search = filters(new Search(), filters);
         User user = getUser().getData();
         if (!user.isAdmin()) {
             search.setAttr(User.ACCOUNT, user.getAccount());
         }
         final ListResult<ViewModel<Customer>> result =
             listViewModels(search(criteria(search, criteria), start, limit, strSearch, sorters));
-
-        // status for advance search
-        result.setAttr("statusList",
-            customerPropertyService.list(
-                new Search(CustomerProperty.TYPE,
-                    CustomerProperty.TYPE_STATUS)
-                .eq(CustomerProperty.ENABLED, true)
-                .asc(CustomerProperty.SORT)));
         return result;
     }
 
@@ -222,4 +211,40 @@ public class CustomerController
         }
         return search;
     }
+
+    private Search filters(final Search search, final String strFilters) {
+
+        if (StringUtils.isBlank(strFilters)) {
+            log.debug("No filters given.");
+            return search;
+        }
+
+        final JSONObject joFilters;
+        try {
+            joFilters = JSON.parseObject(decodeParam(strFilters));
+        }
+        catch (Exception e) {
+            throw new IllegalStateException(
+                "Invalid Filters [" + strFilters + "]", e);
+        }
+
+        filter(search, joFilters, "ms");
+        filter(search, joFilters, "region");
+        filter(search, joFilters, "salesperson");
+        filter(search, joFilters, "status");
+
+        return search;
+    }
+
+    private Search filter(final Search search, final JSONObject joFilters, final String field) {
+        final String col = CRITERION_COLS.get(field);
+        if (StringUtils.isNotBlank(col)) {
+            final String[] filters =
+                joFilters.getObject(field, String[].class);
+            if (filters != null && filters.length > 0) {
+                search.in(col, filters);
+            }
+        }
+        return search;
+    }
 }

server/crm/src/main/java/com/pudonghot/ambition/crm/controller/CustomerPropertyController.java

@@ -47,7 +47,8 @@ public class CustomerPropertyController
         final String enabled,
         @RequestParam(value = "search", required = false)
         final String strSearch) {
-        final Search search = new Search(CustomerProperty.TYPE, type);
+        final Search search = new Search(CustomerProperty.TYPE, type)
+            .asc(CustomerProperty.SORT);
         if (StringUtils.isNotBlank(enabled)) {
             search.eq(CustomerProperty.ENABLED,
                 Boolean.parseBoolean(enabled));

server/crm/src/main/java/com/pudonghot/ambition/crm/service/support/CustomerServiceSupport.java

@@ -2,6 +2,8 @@ package com.pudonghot.ambition.crm.service.support;
 
 import java.util.*;
 import java.io.InputStream;
+
+import com.pudonghot.ambition.crm.mapper.CustomerPropertyMapper;
 import lombok.extern.slf4j.Slf4j;
 import me.chyxion.tigon.mybatis.Search;
 import me.chyxion.tigon.model.ViewModel;
@@ -40,6 +42,8 @@ public class CustomerServiceSupport
     private CustomerPermissionMapper customerPermissionMapper;
     @Autowired
     private CustomerIssueService customerIssueService;
+    @Autowired
+    private CustomerPropertyMapper customerPropertyMapper;
 
     /**
      * override find by id with find by search
@@ -72,8 +76,17 @@ public class CustomerServiceSupport
     @Override
     public ListResult<ViewModel<Customer>> listViewModelsPage(Search search) {
         final String account = search.getAttr(User.ACCOUNT);
-        return new ListResult<>(toViewModel(mapper.listForShow(search, account)),
-            mapper.countForShow(search, account));
+        ListResult<ViewModel<Customer>> result =
+            new ListResult<>(toViewModel(
+                mapper.listForShow(search, account)),
+                mapper.countForShow(search, account));
+        result.setAttr("msList", mapper.listMs());
+        result.setAttr("regionList", mapper.listRegion());
+        result.setAttr("salespersonList", mapper.listSalesperson());
+        result.setAttr("statusList",
+            customerPropertyMapper.listForFilter(CustomerProperty.TYPE_STATUS));
+
+        return result;
     }
 
     /**
@@ -137,11 +150,13 @@ public class CustomerServiceSupport
             @Override
             public void afterParsed() {
                 // disable existed records
+                /*
                 final Map<String, Object> update = new HashMap<>();
                 update.put(Customer.ENABLED, false);
                 update.put(Customer.UPDATED_BY, operator);
                 update.put(Customer.DATE_UPDATED, now);
                 customerPermissionMapper.update(update, (Search) null);
+                */
             }
 
             /**

server/mapper/src/main/java/com/pudonghot/ambition/crm/mapper/CustomerMapper.java

@@ -1,6 +1,8 @@
 package com.pudonghot.ambition.crm.mapper;
 
 import java.util.List;
+import java.util.Map;
+
 import me.chyxion.tigon.mybatis.Search;
 import me.chyxion.tigon.mybatis.BaseMapper;
 import org.apache.ibatis.annotations.Param;
@@ -42,4 +44,8 @@ public interface CustomerMapper extends BaseMapper<String, Customer> {
     int countForShow(
         @NotNull @Param("s") Search search,
         @Param("account") String account);
+
+    List<Map<String, String>> listMs();
+    List<Map<String, String>> listRegion();
+    List<Map<String, String>> listSalesperson();
 }

server/mapper/src/main/java/com/pudonghot/ambition/crm/mapper/CustomerPropertyMapper.java

@@ -3,6 +3,10 @@ package com.pudonghot.ambition.crm.mapper;
 import me.chyxion.tigon.mybatis.BaseMapper;
 import org.apache.ibatis.annotations.Param;
 import com.pudonghot.ambition.crm.model.CustomerProperty;
+import org.hibernate.validator.constraints.NotBlank;
+
+import java.util.List;
+import java.util.Map;
 
 /**
  * @version 0.0.1
@@ -13,4 +17,14 @@ import com.pudonghot.ambition.crm.model.CustomerProperty;
 public interface CustomerPropertyMapper extends BaseMapper<String, CustomerProperty> {
 
     int findNextSort(@Param("type") String type);
+
+    /**
+     * list for customer filter
+     * @param type
+     * @return
+     */
+    List<Map<String, Object>> listForFilter(
+        @NotBlank
+        @Param("type")
+        String type);
 }

server/mapper/src/main/resources/mybatis/mappers/customer-mapper.xml

@@ -111,5 +111,21 @@
 		left join crm_customer_property prop
 		on customer.status = prop.id
 	</sql>
+
+	<select id="listMs" resultType="map">
+		select distinct ms value, ms text
+		from <include refid="table" />
+	</select>
+
+	<select id="listRegion" resultType="map">
+		select distinct region value, region text
+		from <include refid="table" />
+	</select>
+
+	<select id="listSalesperson" resultType="map">
+		select distinct salesperson value, salesperson text
+		from <include refid="table" />
+	</select>
+
 </mapper>
 

server/mapper/src/main/resources/mybatis/mappers/customer-property-mapper.xml

@@ -17,4 +17,11 @@
 		from <include refid="table" />
 		where type = #{type}
 	</select>
+
+	<select id="listForFilter" resultType="map">
+		select id value, name text
+		from <include refid="table" />
+		where type = #{type}
+		order by sort
+	</select>
 </mapper>

web/app/components/form-input-chosen-select.js

@@ -0,0 +1,73 @@
+import Ember from 'ember';
+import BaseFormInput from './base-form-input';
+
+export default BaseFormInput.extend({
+    tagName: 'div',
+    classNames: ['form-group'],
+    classNameBindings: ['hasError:has-error'],
+    colWidth: 6,
+    'col-width': Ember.computed.alias('colWidth'),
+
+    configNames: ['allow-single-deselect',
+        'disable-search',
+        'disable-search-threshold',
+        'enable-split-word-search',
+        'inherit-select-classes',
+        'max-selected-options',
+        'no-results-text',
+        'placeholder-text-multiple',
+        'placeholder-text-single',
+        'search-contains',
+        'single-backstroke-delete',
+        'width',
+        'display-disabled-options',
+        'display-selected-options',
+        'include-group-label-in-selected',
+        'max-shown-results',
+        'case-sensitive-search',
+        'hide-results-on-select',
+        'rtl'
+    ],
+
+    // chosen options
+    'allow-single-deselect': false,
+    'disable-search': false,
+    'disable-search-threshold': 0,
+    'enable-split-word-search': true,
+    'inherit-select-classes': false,
+    'max-selected-options': Infinity,
+    'no-results-text': 'No results match',
+    'placeholder-text-multiple': 'Select Some Options',
+    'placeholder-text-single': 'Select an Option',
+    'search-contains': false,
+    'single-backstroke-delete': true,
+    'width': '100%',
+    'display-disabled-options': true,
+    'display-selected-options': true,
+    'include-group-label-in-selected': false,
+    'max-shown-results': undefined,
+    'case-sensitive-search': false,
+    'hide-results-on-select': true,
+    'rtl': false,
+
+    didInsertElement() {
+        let me = this;
+        me._super(...arguments);
+
+        let config = {};
+        me.get('configNames').forEach(n => config[n.replace(/\-/g, '_')] = me.get(n));
+
+        me.$('select').chosen(config).change(function(e, option) {
+            let value = option.selected;
+            if (value) {
+                Ember.set(me.findOption(value), 'selected', 'selected');
+            }
+            else {
+                Ember.set(me.findOption(option.deselected), 'selected', false);
+            }
+        });
+    },
+    findOption(value) {
+        return this.get('options').find(option => {return option.value == value});
+    }
+});

web/app/components/modal-dialog.js

@@ -1,3 +1,27 @@
 import Ember from 'ember';
+import BaseComponentMixin from '../mixins/components/base-component';
 
-export default Ember.Component.extend({});
+export default Ember.Component.extend(BaseComponentMixin, {
+    classNames: ['modal', 'fade'],
+    'init-modal': true,
+    transitionToParentRouteAfterClose: true,
+    didInsertElement() {
+        let me = this;
+        if (me.get('init-modal')) {
+            me.$().modal().on('hidden.bs.modal', ()=> {
+                me.$() && me.get('transitionToParentRouteAfterClose') && 
+                me.get('router').transitionTo(
+                    me.get('parentRouteName') || 
+                    me.get('routeName').replace(/\.[^.]+$/, ''));
+                let onClose = me.get('on-close');
+                onClose && onClose();
+            }).on('shown.bs.modal', () => {
+                let onShown = me.get('on-shown');
+                onShown && onShown();
+            });
+        }
+    },
+    willDestroyElement() {
+        this.$().modal('hide');
+    }
+});

web/app/components/pagination-bar.js

@@ -2,7 +2,6 @@ import Ember from 'ember';
 import BaseComponent from './base-component';
 
 export default BaseComponent.extend({
-    trimIndex: true,
     classNames: ['widget-toolbox', 'clearfix'],
     total: Ember.computed.alias('route.controller.model.total'),
     prevPage: Ember.computed('currPage', function() {

web/app/components/reload-btn.js

@@ -2,7 +2,6 @@ import Ember from 'ember';
 import BaseComponent from './base-component';
 
 export default BaseComponent.extend({
-    trimIndex: true,
     tagName: 'a',
     classNames: ['cursor-pointer'],
     attributeBindings: ['title'],

web/app/components/search-box.js

@@ -3,7 +3,6 @@ import BaseComponentMixin from '../mixins/components/base-component';
 
 export default Ember.Component.extend(BaseComponentMixin, {
     classNames: ['widget-toolbar', 'no-border'],
-    trimIndex: true,
     searchText: Ember.computed.oneWay('route.controller.search'),
     actions: {
         search() {

web/app/components/sortable-th.js

@@ -3,7 +3,6 @@ import BaseComponentMixin from '../mixins/components/base-component';
 
 export default Ember.Component.extend(BaseComponentMixin, {
     tagName: 'th',
-    trimIndex: true,
     order: Ember.computed('route.controller.sorters', function() {
         return this.getDir();
     }),

web/app/components/th-filter.js

@@ -0,0 +1,41 @@
+import Ember from 'ember';
+import BaseComponentMixin from '../mixins/components/base-component';
+
+export default Ember.Component.extend(BaseComponentMixin, {
+    tagName: 'span',
+    classNames: ['cursor-pointer'],
+    didReceiveAttrs() {
+        let me = this;
+        let filters = me.getFilters()[me.get('name')];
+        if (filters && filters.length) {
+            me.get('options').forEach(option => {
+                option.selected = filters.includes(option.value);
+            });
+        }
+    },
+    getFilters() {
+        let me = this;
+        let strFitlers = me.get('route.controller.filters');
+        if (strFitlers) {
+            return JSON.parse(strFitlers);
+        }
+        return {};
+    },
+    actions: {
+        onClick() {
+            let me = this;
+            me.set('showModal', true);
+        },
+        onModalClose() {
+            let me = this;
+            me.set('showModal', false);
+        },
+        onModalSubmit() {
+            let me = this;
+            me.set('showModal', false);
+            let filters = me.getFilters();
+            filters[me.get('name')] = me.get('options').filter(f => f.selected).map(f => f.value);
+            me.set('route.controller.filters', JSON.stringify(filters));
+        }
+    }
+});

web/app/instance-initializers/tooltip.js

@@ -8,10 +8,13 @@ export function initialize(/* appInstance */) {
     didInsertElement() {
       let me = this;
       me._super(...arguments);
-      if ('tooltip' === me.get('data-rel') && me.get('title')) {
-          me.$().tooltip();
+      if (me.tagName) {
+        if ('tooltip' === me.get('data-rel') 
+            && me.get('title')) {
+            me.$().tooltip();
+        }
+        me.$('[data-rel=tooltip]').tooltip();
       }
-      me.$('[data-rel=tooltip]').tooltip();
     }
   });
 }

web/app/mixins/components/base-component.js

@@ -3,10 +3,11 @@ import Ember from 'ember';
 export default Ember.Mixin.create({
     toolService: Ember.inject.service('tool-service'),
     routeName: Ember.computed.alias('router.currentRouteName'),
+    'trim-index': true,
     route: Ember.computed('routeName', function() {
         let me = this;
         let routeName = me.get('routeName');
-        return me.getRoute(me.get('trimIndex') ? 
+        return me.getRoute(me.get('trim-index') ? 
             routeName.replace(/\.index$/, '') : routeName);
     }),
     service: Ember.computed('routeName', function() {
@@ -15,7 +16,7 @@ export default Ember.Mixin.create({
     params: Ember.computed('router.location.lastSetURL', function() {
         let me = this;
         let routeName = me.get('routeName');
-        return me.getRouteParams(me.get('trimIndex') ? 
+        return me.getRouteParams(me.get('trim-index') ? 
             routeName.replace(/\.index$/, '') : routeName);
     }),
     getRouteParams(routeName) {

web/app/routes/customer/list.js

@@ -56,6 +56,9 @@ export default BaseListRoute.extend({
     queryParams: {
         criteria: {
           refreshModel: true
+        },
+        filters: {
+          refreshModel: true
         }
     },
     breadcrumbs: [{text: 'Customers'}],

web/app/templates/components/form-input-chosen-select.hbs

@@ -0,0 +1,15 @@
+<label class="col-xs-12 col-sm-3 col-md-3 control-label no-padding-right"> {{label}} </label>
+<div class="col-xs-12 col-sm-5 no-padding-right">
+    <div class="row col-xs-12 no-padding">
+        <div class="col-xs-{{colWidth}} no-padding-right">
+            <select multiple={{multiple}}
+            data-placeholder={{if placeholder placeholder label}}
+            class="form-control chosen-select">
+                {{#each options as |option|}}
+                    <option value="{{option.value}}" selected={{option.selected}}>{{option.text}}</option>
+                {{/each}}
+            </select>
+        </div>
+    </div>
+</div>
+{{form-input-errors-msg name=name}}

web/app/templates/components/form-input-enabled.hbs

@@ -9,7 +9,6 @@
 
     <div>
         <label class="line-height-1 red">
-            <!-- <input name="gender" value="false" type="radio" class="ace" /> -->
             {{radio-button value=false groupValue=(mut (get model name)) class="ace"}}
             <span class="lbl"> {{disabledText}}</span>
         </label>

web/app/templates/components/modal-dialog.hbs

@@ -1,16 +1,25 @@
-{{#modal-frame title=title}}
-    <div class="modal-body no-padding">
-        {{yield}}
-    </div>
+<div class="modal-dialog modal-lg">
+    <div class="modal-content">
+        <div class="modal-header" style="padding: 9px;">
+            <button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true">
+                &times;
+            </button>
+            <h4 class="blue">{{title}}</h4>
+        </div>
 
-    <div class="modal-footer no-margin-top">
-        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">
-            <i class="ace-icon fa fa-times"></i>
-            Cancel
-        </button>
-        <button type="button" class="btn btn-sm btn-primary" {{action (if submit submit (route-action 'submit'))}}>
-            <i class="ace-icon fa fa-check"></i>
-            OK
-        </button>
+        <div class="modal-body no-padding">
+            {{yield}}
+        </div>
+
+        <div class="modal-footer no-margin-top">
+            <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">
+                <i class="ace-icon fa fa-times"></i>
+                Cancel
+            </button>
+            <button type="button" class="btn btn-sm btn-primary" {{action (if submit submit (route-action 'submit'))}}>
+                <i class="ace-icon fa fa-check"></i>
+                OK
+            </button>
+        </div>
     </div>
-{{/modal-frame}}
+</div>

web/app/templates/components/query-criterion.hbs

@@ -22,7 +22,7 @@
             {{#if valOptions}}
                 {{#x-select class='form-control' action=(action 'onValChanged') value=criterion.val as |xs|}}
                     {{#each valOptions as |val|}}
-                        {{#xs.option value=val.id}}{{val.name}}{{/xs.option}}
+                        {{#xs.option value=val.value}}{{val.text}}{{/xs.option}}
                     {{/each}}
                 {{/x-select}}
             {{else}}

web/app/templates/components/th-filter.hbs

@@ -0,0 +1,15 @@
+<span {{action 'onClick'}}>
+    {{!--<i class="ui-icon ace-icon fa fa-filter bigger-60"></i>--}}
+    {{text}}
+</span>
+{{#if showModal}}
+    {{#modal-dialog title='Data Filter' submit=(action 'onModalSubmit') on-close=(action 'onModalClose') transitionToParentRouteAfterClose=false}}
+        <div class="widget-body">
+            <div class="widget-main">
+                <form class="form-horizontal">
+                    {{form-input-chosen-select multiple=true col-width=12 label='MS Filter' options=options}}
+                </form>
+            </div>
+        </div>
+    {{/modal-dialog}}
+{{/if}}

web/app/templates/customer/list.hbs

@@ -64,16 +64,24 @@
                             <th class="hidden-480">City</th>
                         {{/if}}
                         {{#if tableOptions.showMs}}
-                            {{sortable-th name='ms' text='MS' class='hidden-480'}}
+                            {{#sortable-th name='ms' class='hidden-480'}}
+                                {{th-filter name='ms' text='MS' options=model.msList}}
+                            {{/sortable-th}}
                         {{/if}}
                         {{#if tableOptions.showRegion}}
-                            {{sortable-th name='region' text='Region' class='hidden-480'}}
+                            {{#sortable-th name='region' text='Region' class='hidden-480'}}
+                                {{th-filter name='region' text='Region' options=model.regionList}}
+                            {{/sortable-th}}
                         {{/if}}
                         {{#if tableOptions.showSalesperson}}
-                            {{sortable-th name='salesperson' text='Salesperson' class='hidden-480'}}
+                            {{#sortable-th name='salesperson' text='Salesperson' class='hidden-480'}}
+                                {{th-filter name='salesperson' text='Salesperson' options=model.salespersonList}}
+                            {{/sortable-th}}
                         {{/if}}
                         {{#if tableOptions.showStatus}}
-                            <th class="hidden-480">Status</th>
+                            <th class="hidden-480">
+                                {{th-filter name='status' text='Status' options=model.statusList}}
+                            </th>
                         {{/if}}
                         {{#if tableOptions.showIssue1}}
                             <th class="hidden-480">Comment 1</th>
@@ -126,13 +134,11 @@
                                 {{#if it.sumYtdSales}}
                                     {{#if it.expand}}
                                     <a style="cursor: pointer;" {{action (route-action 'collapseYtdSales' it)}}>
-                                        <span class="ui-icon ace-icon fa fa-minus center blue">
-                                        </span>
+                                        <i class="ui-icon ace-icon fa fa-minus center blue"></i>
                                     </a>
                                     {{else}}
                                     <a style="cursor: pointer;" {{action (route-action 'expandYtdSales' it)}}>
-                                        <span class="ui-icon ace-icon fa fa-plus center blue">
-                                        </span>
+                                        <i class="ui-icon ace-icon fa fa-plus center blue"></i>
                                     </a>
                                     {{/if}}
                                 {{/if}}

web/app/templates/customer/list/advanced-query.hbs

@@ -1,82 +1,69 @@
-{{#modal-frame title='Advanced Query'}}
-    <div class="modal-body no-padding">
-        <div class="widget-main row">
-            <div class="col-xs-12 col-sm-5">
-                <div class="widget-box">
-                    <div class="widget-header">
-                        <h5 class="widget-title">Show Columns</h5>
-                    </div>
+{{#modal-dialog title='Advanced Query' submit=(route-action 'query')}}
+    <div class="widget-main row">
+        <div class="col-xs-12 col-sm-5">
+            <div class="widget-box">
+                <div class="widget-header">
+                    <h5 class="widget-title">Show Columns</h5>
+                </div>
 
-                    <div class="widget-body">
-                        <div class="widget-main">
-                            <div class="row">
-                                <div class="col-xs-5 col-sm-5">
-                                    <div class="control-group">
-                                        {{ace-checkbox label='ID' value=model.tableOptions.showId}}
-                                        {{ace-checkbox label='Name' value=model.tableOptions.showName}}
-                                        {{ace-checkbox label='Years' value=model.tableOptions.showYears}}
-                                        {{ace-checkbox label='Date Added' value=model.tableOptions.showDateAdded}}
-                                        {{ace-checkbox label='YTD Sales' value=model.tableOptions.showYtdSale}}
-                                        {{ace-checkbox label='Country' value=model.tableOptions.showCountryCode}}
-                                        {{ace-checkbox label='State' value=model.tableOptions.showState}}
-                                    </div>
-                                </div>
-                                <div class="col-xs-5 col-sm-5">
-                                    <div class="control-group">
-                                        {{ace-checkbox label='City' value=model.tableOptions.showCity}}
-                                        {{ace-checkbox label='MS' value=model.tableOptions.showMs}}
-                                        {{ace-checkbox label='Region' value=model.tableOptions.showRegion}}
-                                        {{ace-checkbox label='Salesperson' value=model.tableOptions.showSalesperson}}
-                                        {{ace-checkbox label='Status' value=model.tableOptions.showStatus}}
-                                        {{ace-checkbox label='Select All' value=model.tableOptions.showAll}}
-                                    </div>
+                <div class="widget-body">
+                    <div class="widget-main">
+                        <div class="row">
+                            <div class="col-xs-5 col-sm-5">
+                                <div class="control-group">
+                                    {{ace-checkbox label='ID' value=model.tableOptions.showId}}
+                                    {{ace-checkbox label='Name' value=model.tableOptions.showName}}
+                                    {{ace-checkbox label='Years' value=model.tableOptions.showYears}}
+                                    {{ace-checkbox label='Date Added' value=model.tableOptions.showDateAdded}}
+                                    {{ace-checkbox label='YTD Sales' value=model.tableOptions.showYtdSale}}
+                                    {{ace-checkbox label='Country' value=model.tableOptions.showCountryCode}}
+                                    {{ace-checkbox label='State' value=model.tableOptions.showState}}
                                 </div>
                             </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-xs-12 col-sm-7">
-                <div class="control-group">
-                    <div class="widget-box">
-                        <div class="widget-header">
-                            <h5 class="widget-title">Query Criteria</h5>
-                            <span class="widget-toolbar">
-                                <a href="#" {{action (route-action 'addCriterion')}}>
-                                    <i class="green ace-icon fa fa-plus"></i>
-                                </a>
-                            </span>
-                        </div>
-
-                        <div class="widget-body">
-                            <div class="widget-main">
-								<form class="form-horizontal" role="form">
-                                    {{#each model.criteria as |criterion|}}
-                                        {{query-criterion 
-                                            cols=model.cols 
-                                            ops=model.ops 
-                                            valOptions=(if (eq 'status' criterion.col) model.statusList)
-                                            criterion=criterion 
-                                            removeCriterion=(route-action 'removeCriterion')}}
-                                    {{/each}}
-								</form>
+                            <div class="col-xs-5 col-sm-5">
+                                <div class="control-group">
+                                    {{ace-checkbox label='City' value=model.tableOptions.showCity}}
+                                    {{ace-checkbox label='MS' value=model.tableOptions.showMs}}
+                                    {{ace-checkbox label='Region' value=model.tableOptions.showRegion}}
+                                    {{ace-checkbox label='Salesperson' value=model.tableOptions.showSalesperson}}
+                                    {{ace-checkbox label='Status' value=model.tableOptions.showStatus}}
+                                    {{ace-checkbox label='Select All' value=model.tableOptions.showAll}}
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="modal-footer no-margin-top">
-        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">
-            <i class="ace-icon fa fa-times"></i>
-            Cancel
-        </button>
-        <button type="button" class="btn btn-sm btn-primary"  {{action (route-action 'query')}}>
-            <i class="ace-icon fa fa-check"></i>
-            Query
-        </button>
+        <div class="col-xs-12 col-sm-7">
+            <div class="control-group">
+                <div class="widget-box">
+                    <div class="widget-header">
+                        <h5 class="widget-title">Query Criteria</h5>
+                        <span class="widget-toolbar">
+                            <a href="#" {{action (route-action 'addCriterion')}}>
+                                <i class="green ace-icon fa fa-plus"></i>
+                            </a>
+                        </span>
+                    </div>
+
+                    <div class="widget-body">
+                        <div class="widget-main">
+                            <form class="form-horizontal" role="form">
+                                {{#each model.criteria as |criterion|}}
+                                    {{query-criterion 
+                                        cols=model.cols 
+                                        ops=model.ops 
+                                        valOptions=(if (eq 'status' criterion.col) model.statusList)
+                                        criterion=criterion 
+                                        removeCriterion=(route-action 'removeCriterion')}}
+                                {{/each}}
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-{{/modal-frame}}
+{{/modal-dialog}}

web/bower.json

@@ -19,7 +19,8 @@
     "fuelux": "^3.15.4",
     "jquery.hotkeys": "*",
     "bootstrap-wysiwyg": "*",
-    "bootstrap-treeview": "^1.2.0"
+    "bootstrap-treeview": "^1.2.0",
+    "chosen": "^1.7.0"
   },
   "resolutions": {
     "ember": "release"

web/ember-cli-build.js

@@ -82,6 +82,14 @@ module.exports = function(defaults) {
         destDir: '/assets/fonts'
     });
 
+    // jquery choosen
+    importVendor(app, 'bower_components/chosen/chosen.jquery.js');
+    importVendor(app, 'bower_components/chosen/chosen.css');
+    let chosenAssets = new Funnel('bower_components/chosen', {
+        include: ['*.png'],
+        destDir: '/assets/css'
+    });
+
     // bootstrap color picker
     importVendor(app, 'bower_components/mjolnic-bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css');
     importVendor(app, 'bower_components/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js');
@@ -143,6 +151,7 @@ module.exports = function(defaults) {
     return app.toTree([bootstrapAssets,
         jqColorboxAssets,
         faAssets,
+        chosenAssets, 
         bcpAssets,
         aceFonts,
         aceImages,

web/tests/integration/components/form-input-chosen-select-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('form-input-chosen-select', 'Integration | Component | form input chosen select', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{form-input-chosen-select}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#form-input-chosen-select}}
+      template block text
+    {{/form-input-chosen-select}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

web/tests/integration/components/th-filter-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('th-filter', 'Integration | Component | th filter', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{th-filter}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#th-filter}}
+      template block text
+    {{/th-filter}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});