ENH: Collection filterings (#42)

Fixes #21
Fixes #28
Fixes #34

app/components/ccdb-filter.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({ });

app/components/collection/list-container.js

@@ -8,9 +8,10 @@ export default Component.extend({
 
   columns: [
     { label: 'Project', valuePath: 'project.name', },
+    { label: 'Region', valuePath: 'studyLocation.site.region.name', },
+    { label: 'Site', valuePath: 'studyLocation.site.name', },
     { label: 'Study Location', valuePath: 'studyLocation.code', },
-    { label: 'Method', valuePath: 'collectionMethod.code', },
+    { label: 'Method', valuePath: 'collectionMethod.name', },
-    { label: 'Type', valuePath: 'collectionType.name', },
     { label: '# of Traps', valuePath: 'numberOfTraps', },
     { label: 'Start', valuePath: 'startDateTime', },
     { label: 'End', valuePath: 'endDateTime', },

app/controllers/collections/index.js

@@ -1,10 +1,36 @@
 import Ember from 'ember';
 
-const { Controller } = Ember;
+const { Controller, computed, get, set } = Ember;
+
 
 export default Controller.extend({
-  queryParams: ['page'],
+  queryParams: ['page', 'project', 'region', 'site', 'study_location',
+                'collection_method', 'number_of_traps', 'collection_start_date',
+                'collection_end_date'],
   page: 1,
+  project: [],
+  region: [],
+  site: [],
+  study_location: [],
+  collection_method: [],
+  number_of_traps: '',
+  collection_start_date: '',
+  collection_end_date: '',
+
+  options: computed('projectOptions', 'regionOptions', 'siteOptions',
+                    'studyLocationOptions', 'collectionMethodOptions', function() {
+    return {
+      projects: this.get('projectOptions'),
+      regions: this.get('regionOptions'),
+      sites: this.get('siteOptions'),
+      studyLocations: this.get('studyLocationOptions'),
+      collectionMethods: this.get('collectionMethodOptions'),
+    };
+  }),
+
+  _coerceId(model) {
+    return +get(model, 'id');
+  },
 
   actions: {
     changePage(page) {
@@ -16,5 +42,30 @@ export default Controller.extend({
     createCollection() {
       this.transitionToRoute('collections.create');
     },
+    changeFilter(filter) {
+      // Need to reset the page so that things don't get weird
+      set(this, 'page', 1);
+
+      const filterModelFields = ['project', 'region', 'site', 'study_location',
+                                 'collection_method'];
+
+      filterModelFields.forEach((field) => {
+        let fields = get(filter, field);
+        fields = fields.map(this._coerceId);
+        set(this, field, fields);
+      });
+
+      set(this, 'number_of_traps', get(filter, 'number_of_traps'));
+
+      ['collection_start_date', 'collection_end_date'].forEach((field) => {
+        let value = get(filter, field);
+        if (value) {
+          value = value.toJSON().split('T')[0];
+        } else {
+          value = '';
+        }
+        set(this, field, value);
+      });
+    },
   },
 });

app/models/region.js

@@ -0,0 +1,11 @@
+import DS from 'ember-data';
+
+const { Model, attr, hasMany } = DS;
+
+export default Model.extend({
+  name:      attr('string'),
+  code:      attr('string'),
+  sortOrder: attr('number'),
+
+  site: hasMany('site'),
+});

app/models/site.js

@@ -0,0 +1,13 @@
+import DS from 'ember-data';
+
+const { Model, attr, hasMany, belongsTo } = DS;
+
+export default Model.extend({
+  name:        attr('string'),
+  code:        attr('string'),
+  description: attr('string'),
+  sortOrder:   attr('number'),
+
+  region:        belongsTo('region'),
+  studyLocation: hasMany('study-location'),
+});

app/models/study-location.js

@@ -1,6 +1,6 @@
 import DS from 'ember-data';
 
-const { Model, attr } = DS;
+const { Model, attr, belongsTo } = DS;
 
 export default Model.extend({
   name:               attr('string'),
@@ -10,4 +10,6 @@ export default Model.extend({
   collectingLocation: attr('string'),
   description:        attr('string'),
   sortOrder:          attr('number'),
+
+  site: belongsTo('site'),
 });

app/routes/collections/index.js

@@ -1,14 +1,72 @@
 import Ember from 'ember';
 
-const { Route } = Ember;
+const { Route, RSVP } = Ember;
 
 export default Route.extend({
   queryParams: {
+    // qps are snake_case for the django api
     page: { refreshModel: true },
+    project: { refreshModel: true },
+    region: { refreshModel: true },
+    site: { refreshModel: true },
+    study_location: { refreshModel: true },
+    collection_method: { refreshModel: true },
+    number_of_traps: { refreshModel: true },
+    collection_start_date: { refreshModel: true },
+    collection_end_date: { refreshModel: true },
   },
 
   model(params) {
-    const include = {include: 'project,study-location,collection-method,collection-type'};
+    const store = this.get('store');
-    return this.get('store').query('collection', Object.assign(params, include));
+    const opts = {
+      include: 'project,study-location,study-location.site,site,collection-method',
+    };
+
+    return RSVP.hash({
+      projectOptions: store.findAll('project'),
+      regionOptions: store.findAll('region'),
+      siteOptions: store.findAll('site'),
+      studyLocationOptions: store.findAll('study-location'),
+      collectionMethodOptions: store.findAll('collection-method'),
+      model: store.query('collection', Object.assign(params, opts)),
+    });
+  },
+
+  setupController(controller, models) {
+    this._super(...arguments);
+    controller.setProperties(models);
+
+    const store = this.get('store');
+
+    let project = controller.get('project');
+    project = project.map(id => store.peekRecord('project', id));
+
+    let region = controller.get('region');
+    region = region.map(id => store.peekRecord('region', id));
+
+    let site = controller.get('site');
+    site = site.map(id => store.peekRecord('site', id));
+
+    let studyLocation = controller.get('study_location');
+    studyLocation = studyLocation.map(id => store.peekRecord('study-location', id));
+
+    let collectionMethod = controller.get('collection_method');
+    collectionMethod = collectionMethod.map(id => store.peekRecord('collection-method', id));
+
+    const numberOfTraps = controller.get('number_of_traps');
+    const collectionStartDate = controller.get('collection_start_date');
+    const collectionEndDate = controller.get('collection_end_date');
+
+    let filter = {
+      project,
+      region,
+      site,
+      study_location: studyLocation,
+      collection_method: collectionMethod,
+      number_of_traps: numberOfTraps,
+      collection_start_date: collectionStartDate,
+      collection_end_date: collectionEndDate,
+    }
+    controller.set('filters', filter);
   },
 });

app/styles/app.css

@@ -50,6 +50,10 @@
   border-top-right-radius: 0;
 }
 
+.top-buffer {
+  margin-top: 20px;
+}
+
 /* Sidebar */
 .sidebar {
   position: fixed;

app/templates/collections/index.hbs

@@ -1,6 +1,9 @@
 {{
   collection/list-container
   model=model
+  filters=filters
+  options=options
+  changeFilter=(action 'changeFilter')
   changePage=(action 'changePage')
   onRowClick=(action 'rowClick')
   createCollection=(action 'createCollection')

app/templates/components/ccdb-filter.hbs

@@ -0,0 +1 @@
+{{yield}}

app/templates/components/collection/list-container.hbs

@@ -4,6 +4,119 @@
   label='New Collection'
   onClick=(action createCollection)
 }}
+
+<hr>
+
+{{#ccdb-filter
+  filters=filters
+  options=options
+}}
+  <div class="well">
+    <div class="row">
+      <div class="col-md-3">
+        <label>Projects</label>
+        {{#power-select-multiple
+          options=options.projects
+          selected=filters.project
+          onchange=(action (mut filters.project))
+          searchField='name'
+          as |project|
+        }}
+          {{project.name}}
+        {{/power-select-multiple}}
+      </div>
+      <div class="col-md-3">
+        <label>Regions</label>
+        {{#power-select-multiple
+          options=options.regions
+          selected=filters.region
+          onchange=(action (mut filters.region))
+          searchField='name'
+          as |region|
+        }}
+          {{region.name}}
+        {{/power-select-multiple}}
+      </div>
+      <div class="col-md-3">
+        <label>Sites</label>
+        {{#power-select-multiple
+          options=options.sites
+          selected=filters.site
+          onchange=(action (mut filters.site))
+          searchField='name'
+          as |site|
+        }}
+          {{site.name}}
+        {{/power-select-multiple}}
+      </div>
+      <div class="col-md-3">
+        <label>Study Locations</label>
+        {{#power-select-multiple
+          options=options.studyLocations
+          selected=filters.study_location
+          onchange=(action (mut filters.study_location))
+          searchField='code'
+          as |studyLocation|
+        }}
+          {{studyLocation.code}}
+        {{/power-select-multiple}}
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-3">
+        <label>Collection Methods</label>
+        {{#power-select-multiple
+          options=options.collectionMethods
+          selected=filters.collection_method
+          onchange=(action (mut filters.collection_method))
+          searchField='name'
+          as |collectionMethod|
+        }}
+          {{collectionMethod.name}}
+        {{/power-select-multiple}}
+      </div>
+      <div class="col-md-3">
+        <label>Number of Traps</label>
+        {{input type="text" class="form-control" value=filters.number_of_traps}}
+      </div>
+      <div class="col-md-3">
+        <label>Start Date</label>
+        {{
+          pikaday-input
+          onSelection=(action (mut filters.collection_start_date))
+          value=filters.collection_start_date
+          useUTC=true
+          format='YYYY-MM-DD'
+          class='form-control'
+        }}
+      </div>
+      <div class="col-md-3">
+        <label>End Date</label>
+        {{
+          pikaday-input
+          onSelection=(action (mut filters.collection_end_date))
+          value=filters.collection_end_date
+          useUTC=true
+          format='YYYY-MM-DD'
+          class='form-control'
+        }}
+      </div>
+    </div>
+
+    <div class="row top-buffer">
+      <div class="col-md-12">
+        {{
+          action-button
+          isSuccess=true
+          label='Search'
+          onClick=(action changeFilter filters)
+        }}
+      </div>
+    </div>
+  </div>
+{{/ccdb-filter}}
+
 {{
   ccdb-table
   model=model

package.json

@@ -29,6 +29,7 @@
     "ember-cli-htmlbars": "^2.0.1",
     "ember-cli-htmlbars-inline-precompile": "^0.4.3",
     "ember-cli-inject-live-reload": "^1.4.1",
+    "ember-cli-moment-shim": "^3.5.0",
     "ember-cli-qunit": "^4.0.0",
     "ember-cli-shims": "^1.1.0",
     "ember-cli-sri": "^2.1.0",
@@ -40,6 +41,7 @@
     "ember-light-table": "^1.10.0",
     "ember-load-initializers": "^1.0.0",
     "ember-moment": "7.3.1",
+    "ember-pikaday": "^2.2.3",
     "ember-power-select": "^1.8.5",
     "ember-power-select-with-create": "0.4.3",
     "ember-resolver": "^4.0.0",

tests/unit/models/region-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('region', 'Unit | Model | region', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});

tests/unit/models/site-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('site', 'Unit | Model | site', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});