Catalysts · mangei · Feb 13, 2015
diff --git a/src/main/javascript/controller/cat-base-edit-controller.js b/src/main/javascript/controller/cat-base-edit-controller.js
@@ -0,0 +1,147 @@
+'use strict';
+
+angular.module('cat.controller.base.edit', [])
+
+/**
+ * @ngdoc controller
+ * @name cat.controller.base.edit:CatBaseEditController
+ *
+ * @description
+ * The CatBaseEditController takes care of providing several common properties and functions to the scope
+ * of every edit page. It also instantiates the controller given via the config.controller parameter and shares
+ * the same scope with it.
+ *
+ * Common properties include:
+ * * detail - the actual object to view
+ * * editDetail - a copy of the detail object used for editing
+ * * breadcrumbs - the breadcrumbs array
+ * * uiStack - the ui stack array if parents exist
+ * * editTemplate - the url of the edit template
+ * * mainViewTemplate - the url of the main view template
+ * * additionalViewTemplate - the url of the additional view template if it exists
+ * * $fieldErrors - a map of validation errors returned by the server
+ *
+ * Common functions include:
+ * * save - the save function to update / create an object
+ * * cancelEdit - a function to switch from edit to view mode (discarding all changes)
+ * * title - a function to resolve a 'title' of the current object
+ *
+ * @param {object} $scope DOCTODO
+ * @param {object} $state DOCTODO
+ * @param {object} $stateParams DOCTODO
+ * @param {object} $window DOCTODO
+ * @param {object} $globalMessages DOCTODO
+ * @param {object} $controller DOCTODO
+ * @param {object} $log DOCTODO
+ * @param {object} catBreadcrumbsService DOCTODO
+ * @param {Object} config holds data like the current api endpoint, template urls, base url, the model constructor, etc.
+ * @param {object} catValidationService DOCTODO
+ * @constructor
+ */
+    .controller('CatBaseEditController', CatBaseEditController);
+
+function CatBaseEditController($scope, $state, $stateParams, $window, $globalMessages, $controller, $log, catBreadcrumbsService, catValidationService, config) {
+    $scope.detail = config.detail;
+    $scope.editDetail = undefined;
+    $scope.$fieldErrors = {};
+
+    $scope.config = config;
+    var endpoint = config.endpoint;
+    var baseUrl = config.baseUrl;
+    var templateUrls = config.templateUrls;
+    var Model = config.Model;
+
+    $scope.uiStack = catBreadcrumbsService.generateFromConfig(config);
+
+    if ($stateParams.id === 'new' || $stateParams.id === undefined) {
+        catBreadcrumbsService.push({
+            title: 'New',
+            key: 'cc.catalysts.general.new'
+        });
+    } else {
+        catBreadcrumbsService.push({});
+    }
+
+    $scope.editTemplate = templateUrls.edit;
+
+    if (_.isObject(templateUrls.view)) {
+        $scope.mainViewTemplate = templateUrls.view.main;
+        $scope.additionalViewTemplate = templateUrls.view.additional;
+    } else {
+        $scope.mainViewTemplate = templateUrls.view;
+    }
+
+    $scope.baseUrl = baseUrl;
+
+    /**
+     * @returns {String|Number} A title of the current object or the 'id' as fallback
+     */
+    $scope.title = function () {
+        var data = $scope.detail;
+        if (_.isUndefined(data)) {
+            return '';
+        }
+        return !!data.breadcrumbTitle ? data.breadcrumbTitle() : (!!data.name ? data.name : data.id);
+    };
+
+    /**
+     * reloads the current object from the server
+     */
+    $scope.reloadDetails = function () {
+        endpoint.get($stateParams.id).then(function (data) {
+            $scope.detail = data;
+            update();
+        });
+    };
+
+    $scope.exists = !!$stateParams.id && $stateParams.id !== 'new';
+
+    $scope.cancelEdit = function () {
+        $scope.$broadcast('formReset'); // TODO necessary to call?
+        if ($scope.exists) {
+            $state.go(config.name + '.detail', {id: config.detail.id});
+        } else {
+            $window.history.back();
+        }
+    };
+
+    /**
+     * Calls the save function of the current endpoint.
+     * Upon success the view mode of the details of the currently created / updated object will be shown.
+     * Upon an error the reported errors (global & field errors) will be shown to the user and the edit mode
+     * will remain active.
+     *
+     * * @param {object} stayInEdit If true the view stays in detail edit state after save instead of switching to
+     *                              detail view state.
+     */
+    $scope.save = function (stayInEdit) {
+        endpoint.save($scope.editDetail).then(function (data) {
+            catValidationService.clearValidationErrors();
+            $scope.$broadcast('formReset');
+            $globalMessages.addMessage('success', 'Saved successfully.', true);
+            if (stayInEdit) {
+                $state.go('^.edit', {id: data.id});
+            } else {
+                $state.go('^.detail', {id: data.id});
+            }
+        });
+    };
+
+    try {
+        // extend with custom controller
+        $controller(config.controller, {
+            $scope: $scope,
+            detail: config.detail,
+            parents: config.parents,
+            config: config
+        });
+    } catch (unused) {
+        $log.info('Couldn\'t instantiate controller with name ' + config.controller);
+    }
+
+    // set edit object with parent relations
+    $scope.editDetail = $scope.detail;
+    if (_.isFunction($scope.editDetail.setParent)) {
+        $scope.editDetail.setParent(config.parents[0]);
+    }
+}
diff --git a/src/main/javascript/controller/cat-base-list-controller.js b/src/main/javascript/controller/cat-base-list-controller.js
@@ -1,6 +1,5 @@
 'use strict';
 
-
 /**
  * @ngdoc controller
  * @name cat.controller.base.list:CatBaseListController
@@ -25,8 +24,9 @@
  * @param {object} catBreadcrumbsService catBreadcrumbsService
  * @param {object} catListDataLoadingService catListDataLoadingService
  * @param {object} config holds data like the listData object, the template url, base url, the model constructor, etc.
+ * @param {object} $globalMessages $globalMessages
  */
-function CatBaseListController($scope, $state, $controller, $log, catBreadcrumbsService, catListDataLoadingService, config) {
+function CatBaseListController($scope, $state, $controller, $log, catBreadcrumbsService, catListDataLoadingService, $globalMessages, config) {
     if (!_.isUndefined(config.listData)) {
         this.titleKey = 'cc.catalysts.cat-breadcrumbs.entry.' + config.listData.endpoint.getEndpointName();
 
@@ -58,6 +58,7 @@ function CatBaseListController($scope, $state, $controller, $log, catBreadcrumbs
     this.remove = function (id) {
         config.listData.endpoint.remove(id)
             .then(function () {
+                $globalMessages.addMessage('success', 'Successfully deleted entry.', true);
                 catListDataLoadingService.load(config.listData.endpoint, config.listData.searchRequest).then(
                     function (data) {
                         _.assign($scope.listData, data);
@@ -77,4 +78,4 @@ function CatBaseListController($scope, $state, $controller, $log, catBreadcrumbs
 
 angular.module('cat.controller.base.list', ['cat.service.breadcrumbs'])
     .controller('CatBaseListController',
-        ['$scope', '$state', '$controller', '$log', 'catBreadcrumbsService', 'catListDataLoadingService', 'config', CatBaseListController]);
+        ['$scope', '$state', '$controller', '$log', 'catBreadcrumbsService', 'catListDataLoadingService', '$globalMessages', 'config', CatBaseListController]);
diff --git a/src/main/javascript/service/cat-route-service.js b/src/main/javascript/service/cat-route-service.js
@@ -1,12 +1,34 @@
 'use strict';
 
+angular.module('cat.service.route', [
+    'ui.router',
+    'cat.service.message',
+    'cat.service.breadcrumbs',
+    'cat.service.validation'
+])
+
 /**
  * @ngdoc service
  * @name cat.service.route:catRouteServiceProvider
  * @description
  * This service provider delegates to the $stateProvider and actually creates 2 separate routes after applying various
  * conventions / defaults
  */
+    .provider('catRouteService', CatRouteServiceProvider)
+
+    .run(['$rootScope', '$log', '$globalMessages', 'catBreadcrumbsService', 'catValidationService',
+        function ($rootScope, $log, $globalMessages, catBreadcrumbsService, catValidationService) {
+            $rootScope.$on('$stateChangeError', function () {
+                var exception = arguments[arguments.length - 1];
+                $globalMessages.addMessage('warning', exception);
+                $log.warn(exception);
+            });
+            $rootScope.$on('$stateChangeSuccess', function () {
+                catBreadcrumbsService.clear();
+                catValidationService.clearValidationErrors();
+            });
+        }]);
+
 function CatRouteServiceProvider($stateProvider) {
     var viewNames = [];
 
@@ -54,6 +76,20 @@ function CatRouteServiceProvider($stateProvider) {
         }
     }
 
+    function _registerCreateState(config, name) {
+        var stateName = _getStateName(name, config);
+        var createConfig = _getCreateConfig(config, name);
+        $stateProvider
+            .state(stateName + '.create', createConfig);
+    }
+
+    function _registerEditState(config, name) {
+        var stateName = _getStateName(name, config);
+        var editConfig = _getEditConfig(config, name);
+        $stateProvider
+            .state(stateName + '.edit', editConfig);
+    }
+
     function _registerListState(config, name) {
         var stateName = _getStateName(name, config);
         var listConfig = _getListConfig(config, name);
@@ -87,6 +123,46 @@ function CatRouteServiceProvider($stateProvider) {
         };
     }
 
+    /**
+     * A helper function which basically just overrides the controller, url and template of the detail config.
+     * @param config
+     * @param name
+     * @returns {{templateUrl: (string), controller: string, reloadOnSearch: (boolean), resolve: {config: (object)}}}
+     * @private
+     */
+    function _getCreateConfig(config, name) {
+        var _config = _.assign({name: name}, config);
+        var detailConfig = _getEditConfig(config, name);
+
+        detailConfig.url = _config.url || '/new';
+
+        return detailConfig;
+    }
+
+    /**
+     * A helper function which basically just overrides the controller, url and template of the detail config.
+     * @param config
+     * @param name
+     * @returns {{templateUrl: (string), controller: string, reloadOnSearch: (boolean), resolve: {config: (object)}}}
+     * @private
+     */
+    function _getEditConfig(config, name) {
+        var _config = _.assign({name: name}, config);
+
+        return {
+            url: _config.url || '/:id/edit',
+            templateUrl: _config.templateUrl || 'template/cat-base-edit.tpl.html',
+            controller: 'CatBaseEditController',
+            reloadOnSearch: _config.reloadOnSearch,
+            resolve: {
+                config: function ($stateParams, catViewConfigService) {
+                    // TODO $stateParams needs to be passed from here because otherwise it's empty...
+                    return catViewConfigService.getDetailConfig(_config, $stateParams);
+                }
+            }
+        };
+    }
+
     /**
      * A helper function for list routes which applies a few optimizations and some auto configuration.
      * In the current state it handles 4 settings:
@@ -167,7 +243,9 @@ function CatRouteServiceProvider($stateProvider) {
         var listUrl = _getListUrl(baseUrl, name, config);
 
         _registerAbstractState(listUrl, stateName);
+        _registerCreateState(_.assign({}, config.create, viewData), name);
         _registerDetailState(_.assign({}, config.details, viewData), name);
+        _registerEditState(_.assign({}, config.list, viewData), name);
         _registerListState(_.assign({}, config.list, viewData), name);
     };
 
@@ -184,24 +262,3 @@ function CatRouteServiceProvider($stateProvider) {
         return viewNames;
     };
 }
-
-angular
-    .module('cat.service.route', [
-        'ui.router',
-        'cat.service.message',
-        'cat.service.breadcrumbs',
-        'cat.service.validation'
-    ])
-    .provider('catRouteService', CatRouteServiceProvider)
-    .run(['$rootScope', '$log', '$globalMessages', 'catBreadcrumbsService', 'catValidationService',
-        function ($rootScope, $log, $globalMessages, catBreadcrumbsService, catValidationService) {
-            $rootScope.$on('$stateChangeError', function () {
-                var exception = arguments[arguments.length - 1];
-                $globalMessages.addMessage('warning', exception);
-                $log.warn(exception);
-            });
-            $rootScope.$on('$stateChangeSuccess', function () {
-                catBreadcrumbsService.clear();
-                catValidationService.clearValidationErrors();
-            });
-        }]);
diff --git a/src/main/javascript/service/cat-view-config-service.js b/src/main/javascript/service/cat-view-config-service.js
@@ -16,7 +16,7 @@ function CatViewConfigService($q, catApiService, catListDataLoadingService) {
         var detailPromise;
 
         var detailId = $stateParams.id;
-        if (detailId === 'new') {
+        if (detailId === 'new' || detailId === undefined) {
             detailPromise = $q.when(new Model());
         } else {
             detailPromise = endpoint.get(detailId);

diff --git a/src/main/resources/template/cat-base-detail.tpl.html b/src/main/resources/template/cat-base-detail.tpl.html
@@ -4,7 +4,7 @@
 
 <div class="panel panel-default">
     <div class="panel-heading">
-        <div class="pull-right edit-buttons" ng-if="!editDetail && !!editTemplate">
+        <div class="pull-right edit-buttons" ng-if="!!editTemplate">
             <div class="btn-group">
                 <button type="button" class="btn btn-xs btn-default" cat-confirm-click cat-on-confirm="remove()"
                         cat-element-visible="cat.base.delete" cat-element-data="config">
@@ -20,36 +20,20 @@
                         cat-element-visible="cat.base.edit" cat-element-data="config"
                         cat-activate-on-shortcut="alt+e"><span cat-icon="edit" size="xs"></span>
                     <span cat-i18n="cc.catalysts.general.edit">Edit</span>
-                </button>
+                </a>
             </div>
             &nbsp;
             <a ui-sref="^.detail({id: 'new'})" class="btn btn-xs btn-default"
                cat-element-visible="cat.base.new" cat-element-data="config">
                 <span cat-icon="create" size="xs"></span>
                 <span cat-i18n="cc.catalysts.general.new">New</span></a>
         </div>
-        <h5 ng-if="exists">{{title()}}</h5>
-        <h5 ng-if="!exists" cat-i18n="cc.catalysts.general.new">New</h5>
+        <h5>{{title()}}</h5>
     </div>
     <!-- create form element if editing -->
     <div class="panel-body">
-        <form name="form" novalidate class="form-horizontal"
-              ng-if="!!editDetail && !!editTemplate">
-            <div ng-include="editTemplate"></div>
-        </form>
-
-        <div ng-include="mainViewTemplate" ng-if="!editDetail"></div>
-    </div>
-    <div class="panel-footer text-right" ng-if="!!editDetail">
-        <button type="button" class="btn btn-xs btn-default" ng-click="cancelEdit()"
-                cat-activate-on-shortcut="alt+esc"><span class="glyphicon glyphicon-remove"></span>
-            <span cat-i18n="cc.catalysts.general.cancel">Cancel</span>
-        </button>
-        <button type="submit" class="btn btn-xs btn-primary" ng-click="save()"
-                ng-disabled="form.$pristine"><span class="glyphicon glyphicon-floppy-disk"></span>
-            <span cat-i18n="cc.catalysts.general.save">Save</span>
-        </button>
+        <div ng-include="mainViewTemplate"></div>
     </div>
 </div>
-<div ng-if="!editDetail && !!additionalViewTemplate" ng-include="additionalViewTemplate"
+<div ng-if="!!additionalViewTemplate" ng-include="additionalViewTemplate"
      ng-controller="baseTabsController"></div>