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

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

        this.state = null;
        this.deregisterCallback = $transitions.onStart({},
            transition => this.callback(transition));
        this.updateOriginalData();
    }

    $onInit() {
        if (this.get && this.url) {
            this.fetchData();
        } else if (this.get && !this.url) {
            throw new Error('Error: Parameter url ommitted');
        }
    }

    $onChanges(changes) {
        if (this.data) {
            this.updateOriginalData();
        }
    }

    $onDestroy() {
        this.deregisterCallback();
    }

    fetchData() {
        let id = this.data[this.idField];
       // return new Promise((resolve, reject) => {
        this.$http.get(`${this.url}/${id}`).then(
            json => {
                this.data = copyObject(json.data);
                this.updateOriginalData();
            }
            // json => reject(json)
        );
      //  });
    }
    /**
     * Submits the data and goes back in the history.
     */
    submitBack() {
        return this.submit().then(
            () => this.window.history.back()
        );
    }
    /**
     * Submits the data and goes another state.
     *
     * @param {String} state The state name
     */
    submitGo(state) {
        return this.submit().then(
            () => this.$state.go(state)
        );
    }
    /**
     * Submits the data to the server.
     *
     * @return {Promise} The http request promise
     */
    submit() {
        if (this.form) {
            this.form.$setSubmitted();

            if (!this.form.$valid)
                return new Promise(
                    (resolve, reject) => this.invalidForm(reject)
                );
        }
        if (!this.dataChanged()) {
            return new Promise(
                (resolve, reject) => this.noChanges(reject)
            );
        }
        let changedData = getModifiedData(this.data, this.orgData);

        if (this.save) {
            this.save.model = changedData;
            return new Promise((resolve, reject) => {
                this.save.accept().then(
                    json => this.writeData({data: json}, resolve),
                    json => reject(json)
                );
            });
        }

        // XXX: Alternative when mgCrud is not used

        let id = this.orgData[this.idField];

        if (id) {
            return new Promise((resolve, reject) => {
                this.$http.patch(`${this.url}/${id}`, changedData).then(
                    json => this.writeData(json, resolve),
                    json => reject(json)
                );
            });
        }

        return new Promise((resolve, reject) => {
            this.$http.post(this.url, this.data).then(
                json => this.writeData(json, resolve),
                json => reject(json)
            );
        });
    }

    writeData(json, resolve) {
        Object.assign(this.data, json.data);
        this.updateOriginalData();
        resolve(json);
    }

    noChanges(resolve) {
        this.vnApp.showMessage(
            this.$translate.instant('No changes to save')
        );
        resolve();
    }

    invalidForm(resolve) {
        this.vnApp.showMessage(
            this.$translate.instant('Some fields are invalid')
        );
        resolve();
    }

    updateOriginalData() {
        this.orgData = this.copyInNewObject(this.data);
    }

    copyInNewObject(data) {
        let newCopy = {};
        if (data && typeof data === 'object') {
            Object.keys(data).forEach(
                val => {
                    if (data[val] !== "" && data[val] !== undefined && data[val] !== null) {
                        if (typeof data[val] === 'object') {
                            newCopy[val] = this.copyInNewObject(data[val]);
                        } else {
                            newCopy[val] = data[val];
                        }
                    }
                }
            );
        }
        return newCopy;
    }

    callback(transition) {
        let dataChanged = this.dataChanged();
        if (!this.state && dataChanged) {
            this.state = transition.to().name;
            this.$scope.confirm.show();
            return false;
        }

        return true;
    }

    dataChanged() {
        let newData = this.copyInNewObject(this.data);
        return !isEqual(newData, this.orgData);
    }

    onConfirmResponse(response) {
        if (response === 'ACCEPT') {
            Object.assign(this.data, this.orgData);
            this.$state.go(this.state);
        } else {
            this.state = null;
        }
    }
}

Watcher.$inject = ['$element', '$scope', '$state', '$transitions', '$http', 'vnApp', '$translate'];

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