yoqw/web/cms/app/components/editable-cell.js
2020-07-01 15:22:07 +08:00

104 lines
3.9 KiB
JavaScript

import Ember from 'ember';
import BaseComponent from './basic-component';
import { assign } from '@ember/polyfills';
import $ from 'jquery';
export default BaseComponent.extend({
'allow-blank': true,
tagName: '',
allowBlank: Ember.computed.alias('allow-blank'),
type: 'text',
step: 1, // for number
'confirm-update': true,
'on-updated': false,
'col-width': 12,
actions: {
doEdit() {
var me = this;
me.set('oldValue', me.getFieldValue());
me.set('isEditing', true)
Ember.run.later(() => {
$(me.element).children(
'input[type="text"][name="' + me.get('model.id') + '"]').focus();
}, 320);
},
doUpdate() {
let me = this;
if (me.get('isUpdating')) {
console.log('Cell Is Updating, Ignore.');
return;
}
me.set('isUpdating', true);
let newValue = me.getFieldValue();
if (me.valueChanged(newValue)) {
if (!me.get('allow-blank') && !newValue) {
me.get('message').warn('Property could not be blank');
// reset field value
me.resetValue();
me.set('isUpdating', false);
}
else {
let service = me.get('service');
let model = me.get('model');
let vr = service.updateValidate(model);
if (vr) {
console.log('Validate Result: ', vr);
me.get('message').warn(Object.keys(vr).map((e)=> {
return vr[e];
}).reduce((msg, e)=> {
return (msg ? msg + '<br />' : '') + e.join('<br />');
}, ''));
// reset field value
me.resetValue();
me.set('isUpdating', false);
}
else if (me.get('confirm-update')) {
me.get('dialog').confirm('Are you sure to update?', () => {
me.get('service').ajaxPost('update-field',
assign({id: model.id,
field: me.get('field'),
value: me.getFieldValue()},
me.get('params') || {}), true).then(r => {
const onUpdated = me.get('on-updated');
onUpdated && onUpdated(r);
});
me.set('isUpdating', false);
},
() => {
// reset field value
me.resetValue();
me.set('isUpdating', false);
});
}
else {
let onUpdated = me.get('on-updated');
onUpdated ? service.update(model).then(r => onUpdated(r)) : service.update(model, true);
me.set('isUpdating', false);
}
}
}
else {
console.log('Cell value not changed.')
me.set('isUpdating', false);
}
me.set('isEditing', false);
}
},
getFieldValue() {
return this.get('model.' + this.get('field'));
},
resetValue() {
let me = this;
me.set('model.' + me.get('field'), me.get('oldValue'));
},
valueChanged(newValue) {
let me = this;
let oldValue = me.get('oldValue');
// both null or blank
if (!newValue && !oldValue) {
return false;
}
return oldValue != newValue;
}
});