salix/client/core/src/watcher/index.js

import {module} from '../module';
import Component from '../component';
import getModifiedData from '../modified';
import copyObject from '../copy';
import isEqual 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, $scope, $state, $transitions, $http, vnAppLogger) {
        super($element);
        this.$scope = $scope;
        this.$state = $state;
        this.$http = $http;
        this.vnAppLogger = vnAppLogger;

        this.state = null;
        this.deregisterCallback = $transitions.onStart({},
            (transition) => this.callback(transition));
        this.copyData();
    }
    $onInit() {
        if(this.get) {
            this.fetchData();
        }
    }
    $onChanges(changes) {
        if(this.data) {
            this.copyData();
        }
    }
    $onDestroy() {
        this.deregisterCallback();
    }
    fetchData() {
        let id = this.data[this.idField];
        return new Promise((resolve, reject) => {
            this.$http.get(`${this.url}/${id}`).then(
                json => {
                    copyObject(json.data, this.data);
                    this.copyData();
                    resolve(json);
                },
                json => reject(json)
            );
        });
    }
    submit() {
        if (!this.dataChanged()) {
            this.vnAppLogger.showMessage('No changes detected');
            return;
        }

        let id = this.orgData[this.idField];
        let changedData = getModifiedData(this.data, this.orgData);

        if(id) {
            return new Promise((resolve, reject) => {
                this.$http.put(`${this.url}/${id}`, changedData).then(
                    json => {
                        this.data = json.data;
                        this.copyData();
                        resolve(json);
                    },
                    json => reject(json)
                );
            });
        }
        else {
            return new Promise((resolve, reject) => {
                this.$http.post(this.url, this.data).then(
                    json => {
                        this.data = json.data;
                        copyObject(this.data, this.orgData);
                        resolve(json);
                    },
                    json => reject(json)
                );
            });
        }
    }
    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;
    }
    dataChanged() {
        return !isEqual(this.data, this.orgData);
    }
    onConfirmResponse(response) {
        if(response == 'ACCEPT') {
            copyObject(this.orgData, this.data);
            this.$state.go(this.state);
        }
        else {
            this.state = null;
        }
    }
}
Watcher.$inject = ['$element', '$scope', '$state', '$transitions', '$http', 'vnAppLogger'];

module.component('vnWatcher', {
    template: require('./index.html'),
    bindings: {
        url: '@?',
        idField: '@?',
        data: '<',
        get: '=?'
    },
    controller: Watcher
});