thermokarst/hymenobacterdotinfo
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sortable table component

Browse source
This commit is contained in:
Matthew Dillon 2015-06-04 20:32:39 -08:00
parent e623d52f34
commit 6ba5cf2322
23 changed files with 225 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/pods/characteristics/controller.js
View file

@ -1,5 +0,0 @@
import SortableController from '../../controllers/sortable';
export default SortableController.extend({
sortBy: 'characteristicName',
});

11
app/pods/characteristics/route.js
View file

@ -4,5 +4,14 @@ import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixi
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model: function() {
return this.store.findAll('characteristic');
}
},
setupController: function(controller, model) {
var tableAttrs = [
{ name: 'Name', attr: 'characteristicName' },
{ name: 'Type', attr: 'characteristicType' }
];
controller.set('model', model);
controller.set('tableAttrs', tableAttrs);
controller.set('row', 'characteristic-index-row');
},
});

19
app/pods/characteristics/template.hbs
View file

@ -1,19 +1,4 @@
<h2>{{genus-name}} Characteristics</h2>
<h3>Total characteristics: {{controller.length}}</h3>
<h3>Total characteristics: {{model.length}}</h3>
<table class="flakes-table">
<thead>
<tr>
<th {{action "setSortBy" "characteristicName"}}>Name</th>
<th {{action "setSortBy" "characteristicType"}}>Type</th>
</tr>
</thead>
<tbody>
{{#each characteristic in controller}}
<tr>
<td>{{characteristic.characteristicName}}</td>
<td>{{characteristic.characteristicType}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{sortable-table content=model tableAttrs=tableAttrs row=row}}

5
app/pods/components/characteristic-index-row/component.js Normal file
View file

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

6
app/pods/components/characteristic-index-row/template.hbs Normal file
View file

@ -0,0 +1,6 @@
<td>
{{data.characteristicName}}
</td>
<td>
{{data.characteristicType}}
</td>

13
app/pods/components/sortable-table-header/component.js Normal file
View file

@ -0,0 +1,13 @@
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'th',
upArrow: '&#9650',
downArrow: '&#9660',
actions: {
sortBy: function(sortProperty, ascending) {
this.sendAction('action', sortProperty, ascending);
}
},
});

3
app/pods/components/sortable-table-header/template.hbs Normal file
View file

@ -0,0 +1,3 @@
{{title}}
<span {{action 'sortBy' sortProperty true}}>{{{upArrow}}}</span>
<span {{action 'sortBy' sortProperty false}}>{{{downArrow}}}</span>

13
app/pods/components/sortable-table/component.js Normal file
View file

@ -0,0 +1,13 @@
import Ember from 'ember';
export default Ember.Component.extend(Ember.SortableMixin, {
tagName: 'table',
classNames: ['flakes-table'],
actions: {
sortBy: function(property, ascending) {
this.set('sortAscending', ascending);
this.set('sortProperties', [property]);
}
},
});

13
app/pods/components/sortable-table/template.hbs Normal file
View file

@ -0,0 +1,13 @@
<thead>
<tr>
{{#each a in tableAttrs}}
{{sortable-table-header title=a.name sortProperty=a.attr action="sortBy"}}
{{/each}}
</tr>
</thead>
<tbody>
{{#each item in arrangedContent}}
{{component row data=item}}
{{/each}}
</tbody>

5
app/pods/components/species-index-row/component.js Normal file
View file

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

13
app/pods/components/species-index-row/template.hbs Normal file
View file

@ -0,0 +1,13 @@
<td>
{{#link-to 'species.show' data}}
{{data.speciesName}}
{{/link-to}}
</td>
<td>
{{#each data.strains as |strain index|}}
{{if index ","}}
{{#link-to 'strains.show' strain.id}}
{{strain.strainName}}
{{/link-to}}
{{/each}}
</td>

5
app/pods/components/strain-index-row/component.js Normal file
View file

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

8
app/pods/components/strain-index-row/template.hbs Normal file
View file

@ -0,0 +1,8 @@
<td>
{{#link-to 'strains.show' data.id}}
{{scientific-name strain=data}}
{{/link-to}}
</td>
<td>
{{data.totalMeasurements}}
</td>

11
app/pods/species/index/route.js
View file

@ -4,5 +4,14 @@ import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixi
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model: function() {
return this.store.findAll('species');
}
},
setupController: function(controller, model) {
var tableAttrs = [
{ name: 'Name', attr: 'speciesName' },
{ name: 'Strains', attr: 'totalStrains' }
];
controller.set('model', model);
controller.set('tableAttrs', tableAttrs);
controller.set('row', 'species-index-row');
},
});

28
app/pods/species/index/template.hbs
View file

@ -8,30 +8,4 @@
{{/link-to}}
{{/if}}
<table class="flakes-table">
<thead>
<tr>
<th {{action "setSortBy" "speciesName"}}>Name</th>
<th {{action "setSortBy" "totalStrains"}}>Strains</th>
</tr>
</thead>
<tbody>
{{#each species in controller}}
<tr>
<td>
{{#link-to 'species.show' species}}
{{species.speciesName}}
{{/link-to}}
</td>
<td>
{{#each species.strains as |strain index|}}
{{if index ","}}
{{#link-to 'strains.show' strain.id}}
{{strain.strainName}}
{{/link-to}}
{{/each}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{sortable-table content=model tableAttrs=tableAttrs row=row}}

11
app/pods/strains/index/route.js
View file

@ -4,5 +4,14 @@ import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixi
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model: function() {
return this.store.findAll('strain');
}
},
setupController: function(controller, model) {
var tableAttrs = [
{ name: 'Name', attr: 'fullName' },
{ name: 'Total Measurements', attr: 'totalMeasurements' }
];
controller.set('model', model);
controller.set('tableAttrs', tableAttrs);
controller.set('row', 'strain-index-row');
},
});

23
app/pods/strains/index/template.hbs
View file

@ -1,5 +1,5 @@
<h2>{{genus-name}} Strains</h2>
<h3>Total strains: {{controller.length}}</h3>
<h3>Total strains: {{model.length}}</h3>
{{#if (can "add strain")}}
{{! Does nothing ATM }}
@ -8,23 +8,4 @@
{{/link-to}}
{{/if}}
<table class="flakes-table">
<thead>
<tr>
<th {{action "setSortBy" "fullName"}}>Name</th>
<th {{action "setSortBy" "totalMeasurements"}}>Total Measurements</th>
</tr>
</thead>
<tbody>
{{#each strain in controller}}
<tr>
<td>
{{#link-to 'strains.show' strain.id}}
{{scientific-name strain=strain}}
{{/link-to}}
</td>
<td>{{strain.totalMeasurements}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{sortable-table content=model tableAttrs=tableAttrs row=row}}

2
app/styles/app.css
View file

@ -2,7 +2,7 @@
padding: 2em 0em 0em 0em;
}
.flakes-table thead tr {
.flakes-table thead tr th span {
cursor: pointer;
}