From d491fc95409e78d2a28e82487144b3686c680f55 Mon Sep 17 00:00:00 2001
From: thuva4 <tharma.thuva@gmail.com>
Date: Sun, 15 Apr 2018 22:14:39 +0530
Subject: Add toast message in pods page

User can view the error/success message in
any part of the web page.

JIRA: RELENG-392

Change-Id: If2564bec92b17cecb847bccfee8a57979d23b45c
Signed-off-by: thuva4 <tharma.thuva@gmail.com>
---
 testapi/opnfv_testapi/ui/components/pods/pods.html | 16 ++++------
 .../ui/components/pods/podsController.js           | 35 +++++++++++++++-------
 2 files changed, 31 insertions(+), 20 deletions(-)

(limited to 'testapi/opnfv_testapi')

diff --git a/testapi/opnfv_testapi/ui/components/pods/pods.html b/testapi/opnfv_testapi/ui/components/pods/pods.html
index 8e66a9c..b5dadf5 100644
--- a/testapi/opnfv_testapi/ui/components/pods/pods.html
+++ b/testapi/opnfv_testapi/ui/components/pods/pods.html
@@ -19,22 +19,18 @@
         <div class="col-sm-1 pull-right">
             <button type="button" class="btn btn-success" ng-click="ctrl.listPods()">
               <i class="fa fa-search"></i> Filter</button>
+            <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>
         <div class="col-sm-3 pull-right">
             <span style="margin-top:6px">Search:&nbsp;&nbsp;</span>
             <input type="text" class="form-control search" ng-enter="ctrl.listPods()"  ng-Model="ctrl.filterText" placeholder="Search String">
         </div>
 </div>
-<div class="col-md-12">
-    <div ng-show="ctrl.showError" class="col-md-12 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="col-md-12 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 class="col-md-12" style="padding-right:0px">
     <div class="table-responsive">
         <table class="table table-bordered table-hover"  ng-data="ctrl.data.pods">
diff --git a/testapi/opnfv_testapi/ui/components/pods/podsController.js b/testapi/opnfv_testapi/ui/components/pods/podsController.js
index c50fa5a..3a94338 100644
--- a/testapi/opnfv_testapi/ui/components/pods/podsController.js
+++ b/testapi/opnfv_testapi/ui/components/pods/podsController.js
@@ -21,7 +21,7 @@
 
     PodsController.$inject = [
         '$scope', '$http', '$filter', '$state', '$window', '$uibModal', 'testapiApiUrl','raiseAlert',
-        'confirmModal', 'keepState', 'sortService'
+        'confirmModal', 'keepState', 'sortService', '$timeout'
     ];
 
     /**
@@ -30,7 +30,7 @@
      * through pods declared in TestAPI.
      */
     function PodsController($scope, $http, $filter, $state, $window, $uibModal, testapiApiUrl,
-        raiseAlert, confirmModal, keepState, sortService) {
+        raiseAlert, confirmModal, keepState, sortService, $timeout) {
         var ctrl = this;
         ctrl.url = testapiApiUrl + '/pods';
         ctrl.checkBox = []
@@ -48,6 +48,18 @@
         ctrl.batchDelete = batchDelete;
         ctrl.viewPod = viewPod
         ctrl.sortBy = sortBy
+        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);
+        }
 
         function sortBy(field){
             ctrl.data.pods = sortService.sortFunction(ctrl.data.pods, field , ctrl.sorting[field] )
@@ -84,17 +96,19 @@
                 };
                 ctrl.podsRequest =
                     $http.post(pods_url, body).success(function (data) {
-                        ctrl.showSuccess = true ;
                         ctrl.success = "Create Success"
+                        ctrl.toastSuccess()
                         ctrl.listPods();
+                        return true;
                     }).catch(function (data)  {
-                        ctrl.showError = true;
                         ctrl.error = data.statusText;
+                        ctrl.toastError()
+                        return false;
                     });
             }
             else{
-                ctrl.showError = true;
                 ctrl.error = 'Name is missing.'
+                ctrl.toastError()
             }
         }
 
@@ -124,8 +138,8 @@
                     }
                 }).catch(function (data) {
                     ctrl.data = null;
-                    ctrl.showError = true;
                     ctrl.error = data.statusText;
+                    ctrl.toastError()
                 });
         }
 
@@ -139,12 +153,12 @@
         function podDelete(podName){
             var pods_url = ctrl.url + "/" + podName
             $http.delete(pods_url).success(function(){
-                ctrl.showSuccess = true ;
                 ctrl.success = "Delete Success"
+                ctrl.toastSuccess()
                 ctrl.listPods();
             }).catch(function (data)  {
-                ctrl.showError = true;
                 ctrl.error = data.statusText;
+                ctrl.toastError()
             });
         }
 
@@ -247,9 +261,10 @@
          * inputs.
          */
         function confirm() {
-            $uibModalInstance.close();
             if (angular.isDefined(ctrl.data.successHandler)) {
-                ctrl.data.successHandler(ctrl.pod);
+                if(ctrl.data.successHandler(ctrl.pod)){
+                    $uibModalInstance.close();
+                }
             }
         }
 
-- 
cgit 1.2.3-korg