mirror of https://github.com/rancher/ui.git
72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
import Component from '@ember/component';
|
|
import layout from './template';
|
|
import { computed, get, set } from '@ember/object';
|
|
import StatefulPromise from 'shared/utils/stateful-promise';
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
content: [],
|
|
values: [],
|
|
addButtonClass: 'btn bg-link icon-btn mt-10',
|
|
contentFilter: null,
|
|
init() {
|
|
this._super(...arguments);
|
|
if (!get(this, 'content')) {
|
|
set(this, 'content', []);
|
|
}
|
|
|
|
if (!get(this, 'values')) {
|
|
set(this, 'values', []);
|
|
}
|
|
},
|
|
actions: {
|
|
onAdd() {
|
|
const values = get(this, 'values');
|
|
|
|
// We push a null values and replace it so that we can get the filteredContent
|
|
// with the newly selected valu visible to the provider of the contetFilter method.
|
|
values.pushObject(null);
|
|
values.replace(-1, 1, [get(this, 'filteredContent.firstObject.value')]);
|
|
},
|
|
onRemove(index) {
|
|
get(this, 'values').removeAt(index);
|
|
}
|
|
},
|
|
lastValue: computed('values', 'values.[]', {
|
|
get() {
|
|
return get(this, 'values').objectAt(get(this, 'values.length') - 1);
|
|
},
|
|
set(key, value) {
|
|
get(this, 'values').set(get(this, 'values.length') - 1, value);
|
|
|
|
return value;
|
|
}
|
|
}),
|
|
canAddMore: computed('filteredContent.length', 'values.length', function() {
|
|
return get(this, 'filteredContent.length') > 1
|
|
|| get(this, 'filteredContent.length') > 0 && get(this, 'values.length') === 0;
|
|
}),
|
|
lastIndex: computed('values.[]', function() {
|
|
return get(this, 'values.length') - 1;
|
|
}),
|
|
asyncContent: computed('content', function() {
|
|
return StatefulPromise.wrap(this.content, []);
|
|
}),
|
|
selections: computed('values.[]', 'asyncContent.value', function() {
|
|
return this.values
|
|
.slice(0, -1)
|
|
.map((value) => {
|
|
const option = get(this, 'asyncContent.value').find((v) => v.value === value);
|
|
|
|
return option ? option.label : '';
|
|
});
|
|
}),
|
|
filteredContent: computed('asyncContent.value', 'contentFilter', 'values.[]', function() {
|
|
if (!get(this, 'contentFilter')) {
|
|
return get(this, 'asyncContent.value') || [];
|
|
}
|
|
|
|
return this.contentFilter(get(this, 'asyncContent.value'), get(this, 'values').slice(0, -1)) || [];
|
|
}),
|
|
});
|