Add toast message support in senerios page

Change-Id: Ib499fe21ae85b2edc79ae7c5492d9f76449bb548
Signed-off-by: thuva4 <tharma.thuva@gmail.com>

3 files changed, 73 insertions, 48 deletions

diff --git a/testapi/opnfv_testapi/ui/components/scenarios/scenario/scenario.html b/testapi/opnfv_testapi/ui/components/scenarios/scenario/scenario.html
index 4f0a580..d6d4257 100644
--- a/testapi/opnfv_testapi/ui/components/scenarios/scenario/scenario.html
+++ b/testapi/opnfv_testapi/ui/components/scenarios/scenario/scenario.html
@@ -225,14 +225,10 @@
     </div>
 </div>
 <div class="row" style="margin-bottom:24px;"></div>
-<div class='clo-md-12'>
-    <div ng-show="ctrl.showError" class="alert alert-danger" role="alert">
-        <span class="pull-right">&nbsp;{{ctrl.error}}</span>
-        <span class="glyphicon glyphicon-exclamation-sign pull-right" aria-hidden="true" >Error:</span>
-    </div>
-    <div ng-show="ctrl.showSuccess" class="alert alert-success" role="alert">
-        <span class="pull-right">&nbsp;{{ctrl.success}}</span>
-        <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span>
-    </div>
-</div>
+<div ng-class="{'show': ctrl.showError}" id="toast" class="error">
+    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true" ></span>
+    {{ctrl.error}}</div>
+<div ng-class="{'show': ctrl.showSuccess}" id="toast" class="success">
+    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+    {{ctrl.success}}</div>
 <div class="row" style="margin-bottom:24px;"></div>
\ No newline at end of file
diff --git a/testapi/opnfv_testapi/ui/components/scenarios/scenario/scenarioController.js b/testapi/opnfv_testapi/ui/components/scenarios/scenario/scenarioController.js
index a0cd5eb..e17718f 100644
--- a/testapi/opnfv_testapi/ui/components/scenarios/scenario/scenarioController.js
+++ b/testapi/opnfv_testapi/ui/components/scenarios/scenario/scenarioController.js
@@ -21,7 +21,7 @@
 
         ScenarioController.$inject = [
         '$scope', '$http', '$filter', '$state', '$window', '$uibModal', 'testapiApiUrl','raiseAlert',
-        'confirmModal', 'authenticate'
+        'confirmModal', 'authenticate', '$timeout'
     ];
 
     /**
@@ -30,7 +30,7 @@
      * through Scenario declared in TestAPI.
      */
     function ScenarioController($scope, $http, $filter, $state, $window, $uibModal, testapiApiUrl,
-        raiseAlert, confirmModal, authenticate) {
+        raiseAlert, confirmModal, authenticate, $timeout) {
         var ctrl = this;
         ctrl.name = $state.params['name'];
         ctrl.url = testapiApiUrl + '/scenarios?name=' + ctrl.name;
@@ -73,7 +73,18 @@
         ctrl.buttonInstaller = true
         ctrl.buttonVersion = true
         ctrl.buttonProject = true
+        ctrl.toastError = toastError
+        ctrl.toastSuccess = toastSuccess
 
+        function toastError() {
+            ctrl.showError = true
+            $timeout(function(){ ctrl.showError = false;}, 3000);
+        }
+
+        function toastSuccess() {
+            ctrl.showSuccess = true
+            $timeout(function(){ ctrl.showSuccess = false;}, 3000);
+        }
         /**
          * This will contact the TestAPI to get a listing of declared projects.
          */
@@ -84,8 +95,8 @@
                     ctrl.data = data;
                 }).catch(function (error) {
                     ctrl.data = null;
-                    ctrl.showError = true;
                     ctrl.error = error.statusText
+                    ctrl.toastError()
                 });
         }
 
@@ -203,13 +214,13 @@
         function deleteInstaller(data){
             ctrl.installerReqest = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/installers"
             $http.delete(ctrl.installerReqest, {data: data.installers, headers: {'Content-Type': 'application/json'}}).success(function (data){
-                ctrl.showSuccess = true ;
                 ctrl.success = "Installer is successfully deleted."
+                ctrl.toastSuccess();
                 ctrl.loadDetails();
             })
             .catch(function (data) {
-                ctrl.showError = true;
                 ctrl.error = data.statusText;
+                ctrl.toastError()
             });
         }
 
@@ -225,16 +236,18 @@
         function addInstaller(installer){
             var installers = []
             installers.push(installer)
-            ctrl.installerReqest = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/installers"
-            $http.post(ctrl.installerReqest, installers).success(function (data){
-                ctrl.showSuccess = true ;
+            ctrl.installerRequestUrl = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/installers"
+            ctrl.installerRequest = $http.post(ctrl.installerRequestUrl, installers)
+            ctrl.installerRequest.success(function (data){
                 ctrl.success = "Installers are successfully updated."
                 ctrl.loadDetails();
+                ctrl.toastSuccess();
             })
             .catch(function (data) {
-                ctrl.showError = true;
                 ctrl.error = data.statusText;
+                ctrl.toastError();
             });
+            return ctrl.installerRequest
         }
 
         function openAddInstaller(){
@@ -254,16 +267,18 @@
         }
 
         function addVersion(versions, installer){
-            ctrl.versionReqest = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/versions?installer="+installer
-            $http.post(ctrl.versionReqest, versions).success(function (data){
-                ctrl.showSuccess = true ;
+            ctrl.versionRequestUrl = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/versions?installer="+installer
+            ctrl.versionRequest = $http.post(ctrl.versionRequestUrl, versions)
+            ctrl.versionRequest.success(function (data){
                 ctrl.success = "Versions are successfully updated."
                 ctrl.loadDetails();
+                ctrl.toastSuccess()
             })
             .catch(function (data) {
-                ctrl.showError = true;
                 ctrl.error = data.statusText;
+                ctrl.toastError()
             });
+            return ctrl.versionRequest;
         }
 
         function openDeleteVersionModal(version, installer){
@@ -279,13 +294,13 @@
         function deleteVersion(data){
             ctrl.versionReqest = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/versions?installer="+data.installer
             $http.delete(ctrl.versionReqest, {data: data.version, headers: {'Content-Type': 'application/json'}}).success(function (data){
-                ctrl.showSuccess = true ;
                 ctrl.success = "Versions are successfully deleted."
                 ctrl.loadDetails();
+                ctrl.toastSuccess();
             })
             .catch(function (data) {
-                ctrl.showError = true;
                 ctrl.error = data.statusText;
+                ctrl.toastError();
             });
         }
 
@@ -307,16 +322,18 @@
         }
 
         function addProject(project, version, installer){
-            ctrl.projectReqest = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/projects?installer="+installer+"&version="+version
-            $http.post(ctrl.projectReqest, project).success(function (data){
-                ctrl.showSuccess = true ;
+            ctrl.projectRequestUrl = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/projects?installer="+installer+"&version="+version
+            ctrl.projectRequest= $http.post(ctrl.projectRequestUrl, project)
+            ctrl.projectRequest.success(function (data){
                 ctrl.success = "Projects are successfully updated."
                 ctrl.loadDetails();
+                ctrl.toastSuccess();
             })
             .catch(function (data) {
-                ctrl.showError = true;
                 ctrl.error = data.statusText;
+                ctrl.toastError();
             });
+            return ctrl.projectRequest;
         }
 
         function openAddProjectModal(version, installer){
@@ -338,16 +355,18 @@
         }
 
         function addCustom(custom,project,version,installer){
-            ctrl.customReqest = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/customs?installer="+installer+"&version="+version+"&project="+ project
-            $http.post(ctrl.customReqest, custom).success(function (data){
-                ctrl.showSuccess = true ;
+            ctrl.customRequestUrl = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/customs?installer="+installer+"&version="+version+"&project="+ project
+            ctrl.customRequest = $http.post(ctrl.customRequestUrl, custom)
+            ctrl.customRequest.success(function (data){
                 ctrl.success = "Customs are successfully updated."
                 ctrl.loadDetails();
+                ctrl.toastSuccess();
             })
             .catch(function (data) {
-                ctrl.showError = true;
                 ctrl.error = data.statusText;
+                ctrl.toastError();
             });
+            return ctrl.customRequest
         }
 
         function openDeleteCustomModal(custom,project,version,installer){
@@ -365,13 +384,13 @@
         function deleteCustom(data){
             ctrl.customReqest = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/customs?installer="+data.installer+"&version="+data.version+"&project="+ data.project
             $http.delete(ctrl.customReqest, {data: data.customs, headers: {'Content-Type': 'application/json'}}).success(function (data){
-                ctrl.showSuccess = true ;
                 ctrl.success = "Customs are successfully deleted."
                 ctrl.loadDetails();
+                ctrl.toastSuccess();
             })
             .catch(function (data) {
-                ctrl.showError = true;
                 ctrl.error = data.statusText;
+                ctrl.toastError();
             });
         }
 
@@ -408,13 +427,13 @@
         function deleteProject(data){
             ctrl.projectReqest = testapiApiUrl+ "/scenarios/"+ ctrl.name + "/projects?installer="+data.installer+"&version="+data.version
             $http.delete(ctrl.projectReqest, {data: data.projects, headers: {'Content-Type': 'application/json'}}).success(function (data){
-                ctrl.showSuccess = true ;
-                ctrl.success = "Projects are successfully Deleted."
+                ctrl.success = "Projects are successfully Deleted.";
+                ctrl.toastSuccess();
                 ctrl.loadDetails();
             })
             .catch(function (data) {
-                ctrl.showError = true;
                 ctrl.error = data.statusText;
+                ctrl.toastError();
             });
         }
 
@@ -443,8 +462,11 @@
                 ctrl.customs = custom.split(/[ ,]+/).filter(Boolean);
             }
             console.log(ctrl.customs)
-            ctrl.data.successHandler(ctrl.customs,ctrl.data.project,ctrl.data.version,ctrl.data.installer);
-            $uibModalInstance.dismiss('cancel');
+            ctrl.data.successHandler(
+                ctrl.customs, ctrl.data.project,
+                ctrl.data.version,ctrl.data.installer).success(function(){
+                    $uibModalInstance.dismiss('cancel');
+                });
 
         }
 
@@ -486,8 +508,10 @@
          */
         function confirm() {
             ctrl.projects.push(ctrl.project)
-            ctrl.data.successHandler(ctrl.projects, ctrl.data.version, ctrl.data.installer);
-            $uibModalInstance.dismiss('cancel');
+            ctrl.data.successHandler(
+                ctrl.projects, ctrl.data.version, ctrl.data.installer).success( function(){
+                    $uibModalInstance.dismiss('cancel');
+                });
 
         }
 
@@ -545,8 +569,9 @@
          */
         function confirm() {
             ctrl.versions.push(ctrl.version)
-            ctrl.data.successHandler(ctrl.versions, ctrl.data.installer);
-            $uibModalInstance.dismiss('cancel');
+            ctrl.data.successHandler(ctrl.versions, ctrl.data.installer).success(function(){
+                $uibModalInstance.dismiss('cancel');
+            });
 
         }
 
diff --git a/testapi/opnfv_testapi/ui/components/scenarios/scenariosController.js b/testapi/opnfv_testapi/ui/components/scenarios/scenariosController.js
index 240287c..e966ce1 100644
--- a/testapi/opnfv_testapi/ui/components/scenarios/scenariosController.js
+++ b/testapi/opnfv_testapi/ui/components/scenarios/scenariosController.js
@@ -183,8 +183,8 @@
      * edit the project's details
      */
     angular.module('testapiApp').controller('scenarioModalController', scenarioModalController);
-    scenarioModalController.$inject = ['$scope', '$uibModal', '$uibModalInstance', 'data'];
-    function scenarioModalController($scope, $uibModal, $uibModalInstance, data) {
+    scenarioModalController.$inject = ['$scope', '$uibModal', '$uibModalInstance', 'data', '$q'];
+    function scenarioModalController($scope, $uibModal, $uibModalInstance, data, $q) {
         var ctrl = this;
         ctrl.confirm = confirm;
         ctrl.cancel = cancel;
@@ -215,6 +215,9 @@
 
         function handleModalData(installer){
            ctrl.scenario.installers.push(installer)
+           var deferred = $q.defer();
+           deferred.resolve();
+           return deferred.promise;
         }
 
         function openInstallerModal(){
@@ -259,8 +262,9 @@
          * inputs.
          */
         function confirm() {
-            ctrl.data.successHandler(ctrl.installer);
-            $uibModalInstance.dismiss('cancel');
+            ctrl.data.successHandler(ctrl.installer).success(function(){
+               $uibModalInstance.dismiss('cancel');
+            });
 
         }