rancher
/
ui
mirror of https://github.com/rancher/ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add sortable table to labels component

This commit is contained in:
Westly Wright 2017-03-03 16:06:40 -07:00
parent c5870aa065
commit f206536f38
No known key found for this signature in database
GPG Key ID: 90C6F54EB2513CAE
2 changed files with 39 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/labels-section/component.js
View File

@ -1,21 +1,33 @@
import Ember from 'ember'; import Ember from 'ember';
import ManageLabels from 'ui/mixins/manage-labels'; import ManageLabels from 'ui/mixins/manage-labels';
import Sortable from 'ui/mixins/sortable';
export default Ember.Component.extend(ManageLabels, Sortable, { export default Ember.Component.extend(ManageLabels, {
model : null, model : null,
labelSource : Ember.computed.alias('model.labels'), labelSource : Ember.computed.alias('model.labels'),
sortableContent : Ember.computed.alias('labelArray'),
sortBy : 'kind', sortBy : 'kind',
showKind : true, showKind : true,
descending : true, descending : true,
sorts: { headers: [
kind : ['type','key'], {
key : ['key'], name: 'kind',
value : ['value','key'], sort: ['type','key'],
translationKey: 'labelsSection.kind',
width: '90',
}, },
{
name: 'key',
sort: ['key'],
translationKey: 'labelsSection.key',
width: '350',
},
{
name: 'value',
sort: ['value','key'],
translationKey: 'labelsSection.value',
},
],
labelsObserver: Ember.observer('model.labels', function () { labelsObserver: Ember.observer('model.labels', function () {
this.initLabels(this.get('labelSource')); this.initLabels(this.get('labelSource'));

35
app/components/labels-section/template.hbs
View File

@ -1,22 +1,19 @@
<table class="grid fixed" style="margin-bottom: 0;"> {{#sortable-table
<thead> classNames="grid fixed mb-0 sortable-table"
{{#if labelArray.length}} bulkActions=false
<tr> paging=false
{{#if showKind}}{{sortable-th sortable=this action="changeSort" name="kind" label='labelsSection.kind' width="90"}}{{/if}} search=false
{{sortable-th sortable=this action="changeSort" name="key" label='labelsSection.key' width="350"}} sortBy=sortBy
{{sortable-th sortable=this action="changeSort" name="value" label='labelsSection.value'}} descending=descending
</tr> headers=headers
{{/if}} body=labelArray
</thead> as |label kind|
<tbody> }}
{{#each arranged as |label|}} {{#if (eq kind "row")}}
<tr>
{{#if showKind}}<td data-title="{{t 'labelsSection.kind'}}:" class="valign-top">{{uc-first label.type}}</td>{{/if}} {{#if showKind}}<td data-title="{{t 'labelsSection.kind'}}:" class="valign-top">{{uc-first label.type}}</td>{{/if}}
<td data-title="{{t 'labelsSection.key'}}:" class="force-wrap valign-top">{{label.key}}</td> <td data-title="{{t 'labelsSection.key'}}:" class="force-wrap valign-top">{{label.key}}</td>
<td data-title="{{t 'labelsSection.value'}}:" class="force-wrap valign-top">{{pretty-json value=label.value}}</td> <td data-title="{{t 'labelsSection.value'}}:" class="force-wrap valign-top">{{pretty-json value=label.value}}</td>
</tr> {{else if (eq kind "norows")}}
{{else}} <td colspan="headers.length" class="text-center text-muted">{{t 'labelsSection.noData'}}</td>
<tr><td colspan="3" class="text-center text-muted">{{t 'labelsSection.noData'}}</td></tr> {{/if}}
{{/each}} {{/sortable-table}}
</tbody>
</table>