[B03986] Create Field Profile modal improvements

app/controllers/projectController.js

@@ -19,8 +19,6 @@ metadataTool.controller('ProjectController', function ($controller, $scope, Aler
     $scope.isEditing = false;
     $scope.isSyncing = false;
 
-    $scope.displayResponse = {"status":null,"message":null};
-
     $scope.setFieldProfileForm = function(profile) {
         if (profile) {
             $scope.fieldProfileFormTitle = "Editing "+profile.gloss;
@@ -38,11 +36,9 @@ metadataTool.controller('ProjectController', function ($controller, $scope, Aler
         }
     };
 
-    $scope.setFieldProfileForm();
-
     UserService.userReady().then(function() {
 
-    if($scope.isAdmin() || $scope.isManager()) {
+      if ($scope.isAdmin() || $scope.isManager()) {
         $scope.projectServices.repositories = ProjectRepositoryRepo.getAll();
         $scope.projectServices.authorities = ProjectAuthorityRepo.getAll();
         $scope.projectServices.suggestors = ProjectSuggestorRepo.getAll();
@@ -92,7 +88,35 @@ metadataTool.controller('ProjectController', function ($controller, $scope, Aler
             });
         };
 
-        $scope.projectHasService = function(project, serviceType, index) {
+        $scope.resetFieldProfileForm = function () {
+            $scope.closeModal();
+            $scope.setFieldProfileForm();
+
+            if ($scope.project) {
+              var facets = [
+                "project/" + $scope.project.id + "/add-field-profile",
+                "project/" + $scope.project.id + "/update-field-profile"
+              ];
+
+              var alerts;
+              var j;
+              for (var i in facets) {
+                alerts = AlertService.get(facets[i]);
+
+                if (alerts) {
+                  for (j in alerts.list) {
+                    AlertService.remove(alerts.list[j]);
+                  }
+                }
+              }
+            }
+        };
+
+        $scope.onCancelFieldProfileForm = function () {
+            $scope.resetFieldProfileForm();
+        };
+
+        $scope.projectHasService = function (project, serviceType, index) {
             var hasService = false;
 
             angular.forEach(project[serviceType], function (projectService) {
@@ -106,7 +130,7 @@ metadataTool.controller('ProjectController', function ($controller, $scope, Aler
 
         var manageProject = function(method,project) {
             return ProjectRepo[method](project).then(function() {
-                $scope.closeModal();
+                $scope.resetFieldProfileForm();
             });
         };
 
@@ -118,25 +142,19 @@ metadataTool.controller('ProjectController', function ($controller, $scope, Aler
             var success = false;
             if ($scope.isEditing) {
                 ProjectRepo.updateFieldProfile(projectId, profile, labels).then(function(data) {
-                    var response = processRestResponse(data, 'displayResponse');
-                    if (response) {
+                    if (processRestResponse(data)) {
                         $scope.setFieldProfileForm();
                     }
                 });
             } else {
                 ProjectRepo.addFieldProfile(projectId, profile, labels).then(function(data) {
-                    var response = processRestResponse(data, 'displayResponse');
-                    if (response) {
+                    if (processRestResponse(data)) {
                         $scope.setFieldProfileForm();
                     }
                 });
             }
         };
 
-        $scope.clearDisplayResponse = function() {
-            $scope.displayResponse = {"status":null,"message":null};
-        };
-
         /*
          * Processes Rest response for modal context
          * Writes error message to provided model
@@ -145,21 +163,12 @@ metadataTool.controller('ProjectController', function ($controller, $scope, Aler
          *
          */
 
-        var processRestResponse = function(data, displayModelName) {
+        var processRestResponse = function (data) {
             var response = angular.fromJson(data.body);
-            var result = null;
-            if (response.status == 500) {
-                $scope[displayModelName].status = false;
-                $scope[displayModelName].message = response.error;
-            } else if (response.meta.status == "ERROR") {
-                $scope[displayModelName].status = false;
-                $scope[displayModelName].message = response.meta.message;
-            } else {
-                $scope[displayModelName].status = true;
-                $scope[displayModelName].message = response.meta.message;
-                result = response;
+            if (response.status === 500 || response.meta.status === "ERROR") {
+                return false;
             }
-            return result;
+            return true;
         };
 
         $scope.syncDocuments = function (project) {
@@ -169,11 +178,13 @@ metadataTool.controller('ProjectController', function ($controller, $scope, Aler
                 if (response.meta.status === "SUCCESS") {
                   AlertService.add(response.meta, "app/projects");
                 }
-                $scope.closeModal();
+                $scope.resetFieldProfileForm();
                 $scope.isSyncing = false;
             });
         };
-    }
-  });
+
+        $scope.resetFieldProfileForm();
+      }
+    });
 
 });

app/views/modals/projectFieldProfiles.html

@@ -1,5 +1,5 @@
 <div class="modal-header {{attr.modalHeaderClass}}">
-  <button type="button" class="close modal-close" aria-label="Close" ng-click="closeModal()"><span aria-hidden="true">&times;</span></button>
+  <button type="button" class="close modal-close" aria-label="Close" ng-click="onCancelFieldProfileForm()"><span aria-hidden="true">&times;</span></button>
   <h4 class="modal-title">Edit Field Profiles for {{project.name}}</h4>
 </div>
 <div class="modal-body">
@@ -16,7 +16,7 @@ <h4>Current Field Profiles</h4>
     </div>
     <div class="col-md-6">
       <h4>{{fieldProfileFormTitle}}</h4>
-      <div ng-if="displayResponse.message" class="alert alert-wrapper" ng-class="{'alert-success':displayResponse.status,'alert-danger':!displayResponse.status}" ng-click="clearDisplayResponse()" role="alert">{{displayResponse.message}}</div>
+      <alerts seconds="60" channels="project/{{project.id}}/add-field-profile,project/{{project.id}}/update-field-profile" types="SUCCESS,WARNING,ERROR" exclusive></alerts>
       <form name="manageProfile" novalidate>
         <div class="form-group">
           <label>Gloss</label>
@@ -26,7 +26,7 @@ <h4>{{fieldProfileFormTitle}}</h4>
           <label>Label</label>
           <input ng-if="!isEditing" class="form-control" type="text" name="label" ng-model="managingLabels[0].name" />
           <input ng-if="isEditing" class="form-control" type="text" name="label" ng-model="label.name" ng-repeat="label in managingLabels" />
-        </div>        
+        </div>
         <div class="form-group">
           <label>Default Value</label>
           <input class="form-control" type="text" name="defaultValue" ng-model="managingProfile.defaultValue" />
@@ -87,6 +87,7 @@ <h4>{{fieldProfileFormTitle}}</h4>
             </label>
           </div>
         </div>
+        <button type="button" class="btn btn-default" ng-click="onCancelFieldProfileForm()">Cancel</button>
         <button type="button" class="btn btn-success" ng-click="updateFieldProfile(project.id, managingProfile, managingLabels)">{{isEditing ? 'Update':'Create'}} Profile</button>
         <button ng-if="isEditing" type="button" class="btn btn-warning" ng-click="setFieldProfileForm()">Cancel Edit</button>
       </form>

tests/mocks/models/mockAlert.js

@@ -0,0 +1,43 @@
+var dataAlert1 = {
+    id: 1,
+    channel: "unassigned",
+    class: "info",
+    fade: false,
+    fixed: false,
+    message: "Generic Alert",
+    remove: false,
+    time: 1576249725726,
+    type: "UNKNOWN"
+};
+
+var dataAlert2 = {
+    id: 2,
+    channel: "project/1/add-field-profile",
+    class: "danger",
+    fade: true,
+    fixed: false,
+    message: "(500) No message available",
+    remove: true,
+    time: 1576249725746,
+    type: "ERROR"
+};
+
+var dataAlert3 = {
+    id: 3,
+    channel: "project/1/update-field-profile",
+    class: "success",
+    fade: false,
+    fixed: true,
+    message: "Field Profile updated",
+    remove: true,
+    time: 1576249914577,
+    type: "SUCCESS"
+};
+
+var mockAlert = function($q) {
+    var model = mockModel("Alert", $q, dataAlert1);
+
+    return model;
+};
+
+angular.module('mock.alert', []).service('Alert', mockAlert);

tests/unit/controllers/projectController.js

@@ -1,17 +1,20 @@
 describe('controller: ProjectController', function () {
 
-    var controller, q, scope;
+    var controller, q, scope, AlertService;
 
     var initializeController = function(settings) {
-        inject(function ($controller, $q, $rootScope, $window, _MetadataRepo_, _ModalService_, _RestApi_, _ProjectAuthorityRepo_, _ProjectRepo_, _ProjectRepositoryRepo_, _StorageService_, _ProjectSuggestorRepo_, _UserService_, _WsApi_) {
+        inject(function ($controller, $q, $rootScope, $window, _AlertService_, _MetadataRepo_, _ModalService_, _RestApi_, _ProjectAuthorityRepo_, _ProjectRepo_, _ProjectRepositoryRepo_, _StorageService_, _ProjectSuggestorRepo_, _UserService_, _WsApi_) {
             q = $q;
             scope = $rootScope.$new();
 
+            AlertService = _AlertService_;
+
             sessionStorage.role = settings && settings.role ? settings.role : "ROLE_ADMIN";
 
             controller = $controller('ProjectController', {
                 $scope: scope,
                 $window: $window,
+                AlertService: AlertService,
                 MetadataRepo: _MetadataRepo_,
                 ModalService: _ModalService_,
                 ProjectAuthorityRepo: _ProjectAuthorityRepo_,
@@ -34,6 +37,7 @@ describe('controller: ProjectController', function () {
     beforeEach(function() {
         module('core');
         module('metadataTool');
+        module('mock.alert');
         module('mock.metadataRepo');
         module('mock.modalService');
         module('mock.projectAuthorityRepo');
@@ -65,10 +69,6 @@ describe('controller: ProjectController', function () {
     });
 
     describe('Are the scope methods defined', function () {
-        it('clearDisplayResponse should be defined', function () {
-            expect(scope.clearDisplayResponse).toBeDefined();
-            expect(typeof scope.clearDisplayResponse).toEqual("function");
-        });
         it('create should be defined', function () {
             expect(scope.create).toBeDefined();
             expect(typeof scope.create).toEqual("function");
@@ -77,10 +77,18 @@ describe('controller: ProjectController', function () {
             expect(scope.delete).toBeDefined();
             expect(typeof scope.delete).toEqual("function");
         });
+        it('onCancelFieldProfileForm should be defined', function () {
+            expect(scope.onCancelFieldProfileForm).toBeDefined();
+            expect(typeof scope.onCancelFieldProfileForm).toEqual("function");
+        });
         it('projectHasService should be defined', function () {
             expect(scope.projectHasService).toBeDefined();
             expect(typeof scope.projectHasService).toEqual("function");
         });
+        it('resetFieldProfileForm should be defined', function () {
+            expect(scope.resetFieldProfileForm).toBeDefined();
+            expect(typeof scope.resetFieldProfileForm).toEqual("function");
+        });
         it('setFieldProfileForm should be defined', function () {
             expect(scope.setFieldProfileForm).toBeDefined();
             expect(typeof scope.setFieldProfileForm).toEqual("function");
@@ -100,14 +108,6 @@ describe('controller: ProjectController', function () {
     });
 
     describe('Do the scope methods work as expected', function () {
-        it('clearDisplayResponse should clear the response', function () {
-            delete scope.displayResponse;
-
-            scope.clearDisplayResponse();
-
-            expect(scope.displayResponse.status).toBe(null);
-            expect(scope.displayResponse.message).toBe(null);
-        });
         it('create should create a new project', function () {
             var services = {};
 
@@ -132,12 +132,19 @@ describe('controller: ProjectController', function () {
             expect(scope.newProjectServices).toBeDefined();
         });
         it('delete should delete an existing project', function () {
-            spyOn(scope, 'closeModal');
+            spyOn(scope, 'resetFieldProfileForm');
 
             scope.delete(dataProject1);
             scope.$digest();
 
-            expect(scope.closeModal).toHaveBeenCalled();
+            expect(scope.resetFieldProfileForm).toHaveBeenCalled();
+        });
+        it('onCancelFieldProfileForm should clear the response', function () {
+            spyOn(scope, 'resetFieldProfileForm');
+
+            scope.onCancelFieldProfileForm();
+
+            expect(scope.resetFieldProfileForm).toHaveBeenCalled();
         });
         it('projectHasService should return a boolean', function () {
             var response;
@@ -154,6 +161,35 @@ describe('controller: ProjectController', function () {
 
             expect(response).toBe(true);
         });
+        it('resetFieldProfileForm should clear the response', function () {
+            var mockedAlerts;
+
+            AlertService.get = function() {
+              return mockedAlerts;
+            };
+
+            scope.project = new mockProject(q);
+
+            spyOn(scope, 'closeModal');
+            spyOn(scope, 'setFieldProfileForm');
+
+            scope.resetFieldProfileForm();
+            expect(scope.closeModal).toHaveBeenCalled();
+            expect(scope.setFieldProfileForm).toHaveBeenCalled();
+
+
+            spyOn(AlertService, 'remove');
+
+            mockedAlerts = {
+              list: [
+                dataAlert2,
+                dataAlert3
+              ]
+            };
+
+            scope.resetFieldProfileForm();
+            expect(AlertService.remove).toHaveBeenCalled();
+        });
         it('setFieldProfileForm should setup the profile', function () {
             var profile = {
                 gloss: "Test Profile",
@@ -174,13 +210,13 @@ describe('controller: ProjectController', function () {
         it('syncDocuments should sync documents', function () {
             delete scope.isSyncing;
 
-            spyOn(scope, 'closeModal');
+            spyOn(scope, 'resetFieldProfileForm');
 
             scope.syncDocuments(scope.projects[0]);
             scope.$digest();
 
             expect(scope.isSyncing).toBe(false);
-            expect(scope.closeModal).toHaveBeenCalled();
+            expect(scope.resetFieldProfileForm).toHaveBeenCalled();
 
             delete scope.isSyncing;
 
@@ -196,13 +232,13 @@ describe('controller: ProjectController', function () {
             project.name += " updated";
             project.dirty = function() {};
 
-            spyOn(scope, 'closeModal');
+            spyOn(scope, 'resetFieldProfileForm');
             spyOn(project, 'dirty');
 
             scope.update(project);
             scope.$digest();
 
-            expect(scope.closeModal).toHaveBeenCalled();
+            expect(scope.resetFieldProfileForm).toHaveBeenCalled();
             expect(project.dirty).toHaveBeenCalled();
 
             project.dirty = function() {};