98 lines
2.7 KiB
JavaScript
98 lines
2.7 KiB
JavaScript
|
import {module} from '../module';
|
||
|
|
import Component from '../component';
|
||
|
|
import getModifiedData from '../modified';
|
||
|
|
import copyObject from '../copy';
|
||
|
|
import isEquals from '../equals';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Component that checks for changes on a specific model property and
|
||
|
|
* asks the user to save or discard it when the state changes.
|
||
|
|
* Also it can save the data to the server when the @url and @idField
|
||
|
|
* properties are provided.
|
||
|
|
*/
|
||
|
|
export default class Watcher extends Component {
|
||
|
|
constructor($element, $state, $transitions, $http, vnAppLogger) {
|
||
|
|
super($element);
|
||
|
|
this.$state = $state;
|
||
|
|
this.$http = $http;
|
||
|
|
this.vnAppLogger = vnAppLogger;
|
||
|
|
|
||
|
|
this.state = null;
|
||
|
|
this.deregisterCallback = $transitions.onStart({},
|
||
|
|
(transition) => this.callback(transition));
|
||
|
|
this.copyData();
|
||
|
|
}
|
||
|
|
submit() {
|
||
|
|
if (!this.dataChanged()) {
|
||
|
|
this.vnAppLogger.showMessage('No changes detected');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let id = this.data[this.idField];
|
||
|
|
let changedData = getModifiedData(this.data, this.orgData);
|
||
|
|
|
||
|
|
if (id) {
|
||
|
|
this.$http.put(`${this.url}/${id}`, changedData).then(
|
||
|
|
json => {
|
||
|
|
this.data = json.data;
|
||
|
|
this.copyData();
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
changedData.id = id;
|
||
|
|
this.$http.post(this.url, changedData).then(
|
||
|
|
json => {
|
||
|
|
this.data = json.data;
|
||
|
|
copyObject(this.data, this.orgData);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
copyData() {
|
||
|
|
this.orgData = {};
|
||
|
|
copyObject(this.data, this.orgData);
|
||
|
|
}
|
||
|
|
callback(transition) {
|
||
|
|
if (!this.state && this.dataChanged()) {
|
||
|
|
this.state = transition.to().name;
|
||
|
|
let dialog = this.element.querySelector('vn-confirm');
|
||
|
|
dialog.$ctrl.show();
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
$onChanges(changes) {
|
||
|
|
if(this.data) {
|
||
|
|
this.copyData();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
dataChanged() {
|
||
|
|
return !isEquals(this.data, this.orgData);
|
||
|
|
}
|
||
|
|
$onDestroy() {
|
||
|
|
this.deregisterCallback();
|
||
|
|
}
|
||
|
|
onConfirmResponse(response) {
|
||
|
|
if(response == 'ACCEPT') {
|
||
|
|
copyObject(this.orgData, this.data);
|
||
|
|
this.$state.go(this.state);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.state = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
Watcher.$inject = ['$element', '$state', '$transitions', '$http', 'vnAppLogger'];
|
||
|
|
|
||
|
|
module.component('vnWatcher', {
|
||
|
|
template: require('./index.html'),
|
||
|
|
bindings: {
|
||
|
|
url: '@?',
|
||
|
|
idField: '@?',
|
||
|
|
data: '<'
|
||
|
|
},
|
||
|
|
controller: Watcher
|
||
|
|
});
|