Angular 中 Ensemble 工作流的 UI

function RESTSrvc($http, $q) { 
    return {
        getPromise:
        function(config) { 
            var deferred = $q.defer();
            $http(config)
                .success(function(data, status, headers, config) {
                    deferred.resolve(data);
                })
                .error(function(data, status, headers, config) {
                    deferred.reject(data, status, headers, config);
                });
                return deferred.promise; 
        }
    }
};

RESTSrvc.$inject = ['$http', '$q']; servicesModule.factory('RESTSrvc', RESTSrvc);

// Session service
function SessionSrvc(RESTSrvc) {
    return {
        // save worklist object
        logout:
        function (baseAuthToken) {
            return RESTSrvc.getPromise({
                method: 'GET', url: RESTWebApp.appName + '/logout',
                headers: { 'Authorization': baseAuthToken }
            });
        }
    }
};

SessionSrvc.$inject = ['RESTSrvc'];
servicesModule.factory('SessionSrvc', SessionSrvc);

        // Function to get value of property of the object by name
        // Example:
        // var obj = {car: {body: {company: {name: 'Mazda'}}}};
        // getPropertyValue(obj, 'car.body.company.name')
        getPropertyValue:
        function (item, propertyStr) {
            var value = item;

            try {
                var properties = propertyStr.split('.');

                for (var i = 0; i < properties.length; i++) {
                    value = value[properties[i]];

                    if (value !== Object(value))
                        break;
                }
            }
            catch (ex) {
                console.log('Something goes wrong :/');
            }

            return value == undefined ? '' : value;
        }
    }
};

UtilSrvc.$inject = ['$cookies'];
servicesModule.factory('UtilSrvc', UtilSrvc);

// Worklist service
function WorklistSrvc(RESTSrvc) {
    return {
        // save worklist object
        save:
        function (worklist, baseAuthToken) {
            return RESTSrvc.getPromise({
                method: 'POST', url: RESTWebApp.appName + '/tasks/' + worklist._id, data: worklist,
                headers: { 'Authorization': baseAuthToken }
            });
        },

        // get worklist by id
        get:
        function (id, baseAuthToken) {
            return RESTSrvc.getPromise({ method: 'GET', url: RESTWebApp.appName + '/tasks/' + id, headers: { 'Authorization': baseAuthToken } });
        },

        // get all worklists for current user
        getAll:
        function (baseAuthToken) {
            return RESTSrvc.getPromise({ method: 'GET', url: RESTWebApp.appName + '/tasks', headers: { 'Authorization': baseAuthToken } });
        }
    }
};

WorklistSrvc.$inject = ['RESTSrvc'];
servicesModule.factory('WorklistSrvc', WorklistSrvc);

// Main controller
// Controls the authentication. Loads all the worklists for user.
function MainCtrl($scope, $location, $cookies, WorklistSrvc, SessionSrvc, UtilSrvc) {
    $scope.page = {};
    $scope.page.alerts = [];
    $scope.utils = UtilSrvc;
    $scope.page.loading = false;
    $scope.page.loginState = $cookies['Token'] ? 1 : 0;
    $scope.page.authToken = $cookies['Token'];

    $scope.page.closeAlert = function (index) {
        if ($scope.page.alerts.length) {
            $('.alert:nth-child(' + (index + 1) + ')').animate({ opacity: 0, top: "-=150" }, 400, function () {
                $scope.page.alerts.splice(index, 1); $scope.$apply();
            });
        }
    };

    $scope.page.addAlert = function (alert) {
        $scope.page.alerts.push(alert);

        if ($scope.page.alerts.length > 5) {
            $scope.page.closeAlert(0);
        }
    };

    /* Authentication section */
    $scope.page.makeBaseAuth = function (user, password) {
        var token = user + ':' + password;
        var hash = Base64.encode(token);
        return "Basic " + hash;
    }

    // login
    $scope.page.doLogin = function (login, password) {
        var authToken = $scope.page.makeBaseAuth(login, password);
        $scope.page.loading = true;

        WorklistSrvc.getAll(authToken).then(
            function (data) {
                $scope.page.alerts = [];
                $scope.page.loginState = 1;
                $scope.page.authToken = authToken;
                // set cookie to restore loginState after page reload
                $cookies['User'] = login.toLowerCase();
                $cookies['Token'] = $scope.page.authToken;

                // refresh the data on page
                $scope.page.loadSuccess(data);
            },
            function (data, status, headers, config) {
                if (data.Error) {
                    $scope.page.addAlert({ type: 'danger', msg: data.Error });
                }
                else {
                    $scope.page.addAlert({ type: 'danger', msg: "Login unsuccessful" });
                }
            })
            .then(function () { $scope.page.loading = false; })
    };

    // logout
    $scope.page.doExit = function () {
        SessionSrvc.logout($scope.page.authToken).then(
            function (data) {
                $scope.page.loginState = 0;
                $scope.page.grid.items = null;
                $scope.page.loading = false;
                // clear cookies
                delete $cookies['User'];
                delete $cookies['Token'];
                document.cookie = "CacheBrowserId" + "=; Path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
                document.cookie = "CSPSESSIONID" + "=; Path=" + RESTWebApp.appName + "; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
                document.cookie = "CSPWSERVERID" + "=; Path=" + RESTWebApp.appName + "; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
            },
            function (data, status, headers, config) {
                $scope.page.addAlert({ type: 'danger', msg: data.Error });
            });
    };

}

MainCtrl.$inject = ['$scope', '$location', '$cookies', 'WorklistSrvc', 'SessionSrvc', 'UtilSrvc'];
controllersModule.controller('MainCtrl', MainCtrl);

// TasksGrid controller
// dependency injection
function TasksGridCtrl($scope, $window, $modal, $cookies, WorklistSrvc) {

    // Initialize grid.
    // grid data:
    // grid title, css grid class, column names
    $scope.page.grid = {
        caption: 'Inbox Tasks',
        cssClass: 'table table-condensed table-bordered table-hover',
        columns: [{ name: '', property: 'New', align: 'center' },
        { name: 'Priority', property: 'Priority' },
        { name: 'Subject', property: 'Subject' },
        { name: 'Message', property: 'Message' },
        { name: 'Role', property: 'RoleName' },
        { name: 'Assigned To', property: 'AssignedTo' },
        { name: 'Time Created', property: 'TimeCreated' },
        { name: 'Age', property: 'Age' }]
    };

    // data initialization for Worklist
    $scope.page.dataInit = function () {
        if ($scope.page.loginState) {
            $scope.page.loadTasks();
        }
    };

    $scope.page.loadSuccess = function (data) {
        $scope.page.grid.items = data.children;
        // if we get data for other user - logout
        if (!$scope.page.checkUserValidity()) {
            $scope.page.doExit();
        }

        var date = new Date();

        var hours = (date.getHours() > 9) ? date.getHours() : '0' + date.getHours();
        var minutes = (date.getMinutes() > 9) ? date.getMinutes() : '0' + date.getMinutes();
        var secs = (date.getSeconds() > 9) ? date.getSeconds() : '0' + date.getSeconds();

        $('#updateTime').animate({ opacity: 0 }, 100, function () { $('#updateTime').animate({ opacity: 1 }, 1000); });

        $scope.page.grid.updateTime = ' [Last Update: ' + hours;
        $scope.page.grid.updateTime += ':' + minutes + ':' + secs + ']';

    };

    // all user's tasks loading
    $scope.page.loadTasks = function () {
        $scope.page.loading = true;

        WorklistSrvc.getAll($scope.page.authToken).then(
            function (data) {
                $scope.page.loadSuccess(data);
            },
            function (data, status, headers, config) {
                $scope.page.addAlert({ type: 'danger', msg: data.Error });
            })
            .then(function () { $scope.page.loading = false; })
    };

    // load task (worklist) by id
    $scope.page.loadTask = function (id) {
        WorklistSrvc.get(id, $scope.page.authToken).then(
            function (data) {
                $scope.page.task = data;
            },
            function (data, status, headers, config) {
                $scope.page.addAlert({ type: 'danger', msg: data.Error });
            });
    };

    // 'Accept' button handler.
    // Send worklist object with '$Accept' action to server.
    $scope.page.accept = function (id) {
        // nothing to do, if no id
        if (!id) return;

        // get full worklist, set action and submit worklist.
        WorklistSrvc.get(id).then(
            function (data) {
                data.Task["%Action"] = "$Accept";
                $scope.page.submit(data);
            },
            function (data, status, headers, config) {
                $scope.page.addAlert({ type: 'danger', msg: data.Error });
            });
    };

    // 'Yield' button handler.
    // Send worklist object with '$Relinquish' action to server.
    $scope.page.yield = function (id) {
        // nothing to do, if no id
        if (!id) return;

        // get full worklist, set action and submit worklist.
        WorklistSrvc.get(id).then(
            function (data) {
                data.Task["%Action"] = "$Relinquish";
                $scope.page.submit(data);
            },
            function (data, status, headers, config) {
                $scope.page.addAlert({ type: 'danger', msg: data.Error });
            });
    };

    // submit the worklist object
    $scope.page.submit = function (worklist) {
        // send object to server. If ok, refresh data on page.
        WorklistSrvc.save(worklist, $scope.page.authToken).then(
            function (data) {
                $scope.page.dataInit();
            },
            function (data, status, headers, config) {
                $scope.page.addAlert({ type: 'danger', msg: data.Error });
            }
        );
    };

    /* table section */

    // sorting table
    $scope.page.sort = function (property, isUp) {
        $scope.page.predicate = property;
        $scope.page.isUp = !isUp;
        // change sorting icon
        $scope.page.sortIcon = 'fa fa-sort-' + ($scope.page.isUp ? 'up' : 'down') + ' pull-right';
    };

    // selecting row in table
    $scope.page.select = function (item) {
        if ($scope.page.grid.selected) {
            $scope.page.grid.selected.rowCss = '';

            if ($scope.page.grid.selected == item) {
                $scope.page.grid.selected = null;
                return;
            }
        }

        $scope.page.grid.selected = item;
        // change css class to highlight the row
        $scope.page.grid.selected.rowCss = 'info';
    };

    // count currently displayed tasks
    $scope.page.totalCnt = function () {
        return $window.document.getElementById('tasksTable').getElementsByTagName('TR').length - 2;
    };

    // if AssignedTo matches with current user - return 'true'
    $scope.page.isAssigned = function (selected) {
        if (selected) {
            if (selected.AssignedTo.toLowerCase() === $cookies['User'].toLowerCase())
                return true;
        }
        return false;
    };

    // watching for changes in 'Search' input
    // if there is change, reset the selection.
    $scope.$watch('query', function () {
        if ($scope.page.grid.selected) {
            $scope.page.select($scope.page.grid.selected);
        }
    });

    /* modal window open */

    $scope.page.modalOpen = function (size, id) {
        // if no id - nothing to do
        if (!id) return;

        // obtainig the full object by id. If ok - open modal.
        WorklistSrvc.get(id).then(
            function (data) {
                // see http://angular-ui.github.io/bootstrap/ for more options
                var modalInstance = $modal.open({
                    templateUrl: 'partials/task.csp',
                    controller: 'TaskCtrl',
                    size: size,
                    backdrop: true,
                    resolve: {
                        task: function () { return data; },
                        submit: function () { return $scope.page.submit }
                    }
                });

                // onResult
                modalInstance.result.then(
                    function (reason) {
                        if (reason === 'save') {
                            $scope.page.addAlert({ type: 'success', msg: 'Task saved' });
                        }
                    },
                    function () { });
            },
            function (data, status, headers, config) {
                $scope.page.addAlert({ type: 'danger', msg: data.Error });
            });

    };

    /*  User's validity checking. */

    // If we get the data for other user, logout immediately
    $scope.page.checkUserValidity = function () {
        var user = $cookies['User'];

        for (var i = 0; i < $scope.page.grid.items.length; i++) {
            if ($scope.page.grid.items[i].AssignedTo && (user.toLowerCase() !== $scope.page.grid.items[i].AssignedTo.toLowerCase())) {
                return false;
            }
            else if ($scope.page.grid.items[i].AssignedTo && (user.toLowerCase() == $scope.page.grid.items[i].AssignedTo.toLowerCase())) {
                return true;
            }
        }

        return true;
    };

    // Check user's validity every 10 minutes.
    setInterval(function () { $scope.page.dataInit() }, 600000);

    /* Initialize */

    // sort table (by Age, asc)
    // to change sorting column change 'columns[<index>]'
    $scope.page.sort($scope.page.grid.columns[7].property, true);

    $scope.page.dataInit();
}

TasksGridCtrl.$inject = ['$scope', '$window', '$modal', '$cookies', 'WorklistSrvc'];
controllersModule.controller('TasksGridCtrl', TasksGridCtrl);

function TaskCtrl($scope, $routeParams, $location, $modalInstance, WorklistSrvc, task, submit) {
    $scope.page = { task: {} };
    $scope.page.task = task;
    $scope.page.actions = "";
    $scope.page.formFields = "";
    $scope.page.formValues = task.Task['%FormValues'];

    if (task.Task['%TaskStatus'].Request['%Actions']) {
        $scope.page.actions = task.Task['%TaskStatus'].Request['%Actions'].split(',');
    }

    if (task.Task['%TaskStatus'].Request['%FormFields']) {
        $scope.page.formFields = task.Task['%TaskStatus'].Request['%FormFields'].split(',');
    }

    // dismiss modal
    $scope.page.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    // perform a specified action
    $scope.page.doAction = function (action) {
        $scope.page.task.Task["%Action"] = action;
        $scope.page.task.Task['%FormValues'] = $scope.page.formValues;

        submit($scope.page.task);
        $modalInstance.close(action);
    }

}

// resolving minification problems
TaskCtrl.$inject = ['$scope', '$routeParams', '$location', '$modalInstance', 'WorklistSrvc', 'task', 'submit'];
controllersModule.controller('TaskCtrl', TaskCtrl);

otherwise
Set default route.

$routeParams.id - :id parameter.
*/

var servicesModule = angular.module('servicesModule', []);
var controllersModule = angular.module('controllersModule', []);
var app = angular.module('app', ['ngRoute', 'ngCookies', 'ui.bootstrap', 'servicesModule', 'controllersModule']);

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/tasks', { templateUrl: 'partials/tasks.csp' });
    $routeProvider.when('/tasks/:id', { templateUrl: 'partials/task.csp', controller: 'TaskCtrl' });

    $routeProvider.otherwise({ redirectTo: '/tasks' });
}]);

otherwise
Set default route.

$routeParams.id - :id parameter.
*/

var servicesModule = angular.module('servicesModule', []);
var controllersModule = angular.module('controllersModule', []);
var app = angular.module('app', ['ngRoute', 'ngCookies', 'ui.bootstrap', 'servicesModule', 'controllersModule']);

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/tasks', { templateUrl: 'partials/tasks.csp' });
    $routeProvider.when('/tasks/:id', { templateUrl: 'partials/task.csp', controller: 'TaskCtrl' });

    $routeProvider.otherwise({ redirectTo: '/tasks' });
}]);