mirror of https://github.com/rancher/ui.git
111 lines
2.6 KiB
JavaScript
111 lines
2.6 KiB
JavaScript
import { next, once } from '@ember/runloop';
|
|
import Component from '@ember/component';
|
|
import layout from './template';
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
// Inputs
|
|
// You can either set model or name+description
|
|
model : null,
|
|
name : null,
|
|
description : null,
|
|
|
|
_name : '',
|
|
_description : '',
|
|
|
|
nameLabel : 'formNameDescription.name.label',
|
|
namePlaceholder : 'formNameDescription.name.placeholder',
|
|
nameHelpText : '',
|
|
nameRequired : false,
|
|
nameDisabled : false,
|
|
|
|
descriptionLabel : 'formNameDescription.description.label',
|
|
descriptionHelp : '',
|
|
descriptionPlaceholder : 'formNameDescription.description.placeholder',
|
|
descriptionRequired : false,
|
|
descriptionDisabled : false,
|
|
descriptionShown : true,
|
|
descriptionExpanded : false,
|
|
expandDescriptionAction: 'formNameDescription.description.expand',
|
|
|
|
rowClass: 'row',
|
|
bothColClass: 'col span-6',
|
|
colClass: 'col span-12',
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
|
|
if ( this.get('model') ) {
|
|
this.modelChanged();
|
|
} else {
|
|
this.setProperties({
|
|
_name: this.get('name'),
|
|
_description: this.get('description'),
|
|
});
|
|
}
|
|
|
|
if ( (this.get('_description')||'').length ) {
|
|
this.set('descriptionExpanded', true);
|
|
}
|
|
},
|
|
|
|
actions: {
|
|
expandDescription() {
|
|
this.set('descriptionExpanded', true);
|
|
next(() => {
|
|
if ( this.isDestroyed || this.isDestroying ) {
|
|
return;
|
|
}
|
|
|
|
var el = this.$('.description')[0];
|
|
if ( el ) {
|
|
el.focus();
|
|
}
|
|
});
|
|
},
|
|
},
|
|
|
|
modelChanged: function() {
|
|
this.setProperties({
|
|
_name: this.get('model.name'),
|
|
_description: this.get('model.description'),
|
|
});
|
|
|
|
if ( (this.get('model.description')||'').length ) {
|
|
this.set('descriptionExpanded', true);
|
|
}
|
|
}.observes('model'),
|
|
|
|
nameChanged: function() {
|
|
once(() => {
|
|
let val = this.get('_name');
|
|
if ( this.get('model') ) {
|
|
this.set('model.name', val);
|
|
} else {
|
|
this.set('name', val);
|
|
}
|
|
});
|
|
}.observes('_name'),
|
|
|
|
descriptionChanged: function() {
|
|
once(() => {
|
|
let val = this.get('_description');
|
|
if ( this.get('model') ) {
|
|
this.set('model.description', val);
|
|
} else {
|
|
this.set('description', val);
|
|
}
|
|
});
|
|
}.observes('_description'),
|
|
|
|
didInsertElement() {
|
|
next(() => {
|
|
if ( this.isDestroyed || this.isDestroying ) {
|
|
return;
|
|
}
|
|
|
|
this.$('INPUT')[0].focus();
|
|
});
|
|
},
|
|
});
|