From 368428217fd182ab7a939b69c5abd7adc6bc30eb Mon Sep 17 00:00:00 2001
From: thuva4 <tharma.thuva@gmail.com>
Date: Thu, 23 Nov 2017 12:44:38 +0530
Subject: Add filter option in projects page

Implemented the filter option for the projects by
following params.

name - Check the  project's name.

Edit the Error message view.

Change-Id: Ib2f0e0ccd9726353dbbedbc44d98747ec8e2d4f9
Signed-off-by: thuva4 <tharma.thuva@gmail.com>
---
 .../ui/components/projects/projects.html           | 28 ++++++++++++-
 .../ui/components/projects/projectsController.js   | 49 ++++++++++++++--------
 2 files changed, 57 insertions(+), 20 deletions(-)

(limited to 'testapi/opnfv_testapi/ui')

diff --git a/testapi/opnfv_testapi/ui/components/projects/projects.html b/testapi/opnfv_testapi/ui/components/projects/projects.html
index 55f8683..28c08b1 100644
--- a/testapi/opnfv_testapi/ui/components/projects/projects.html
+++ b/testapi/opnfv_testapi/ui/components/projects/projects.html
@@ -23,12 +23,12 @@
                 <button type="submit" class="btn btn-primary" ng-click="ctrl.create()">Create</button>
         </div>
         <div class="col-md-11  col-sm-11 col-xs-11">
-            <div ng-show="ctrl.showError" class="alert alert-danger" role="alert">
+            <div ng-show="ctrl.showCreateError" class="alert alert-danger" role="alert">
                 <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                 <span class="sr-only">Error:</span>
                 {{ctrl.error}}
             </div>
-            <div ng-show="ctrl.showSuccess" class="alert alert-success" role="alert">
+            <div ng-show="ctrl.showCreateSuccess" class="alert alert-success" role="alert">
                 <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                 Create Success
             </div>
@@ -37,6 +37,30 @@
 </div>
 
 
+<div class="project-filters">
+    <h4>Filters</h4>
+    <div class="row">
+        <div class="col-md-3">
+            <label for="cpid">Name</label>
+                <input type="text" class="form-control"
+                    ng-model="ctrl.filterName"/>
+        </div>
+        <div class="col-md-1" style="margin-top:24px;">
+            <button type="submit" class="btn btn-primary" ng-click="ctrl.update()">Filter</button>
+        </div>
+        <div class="col-md-1" style="margin-top:24px;">
+            <button type="submit" class="btn btn-primary btn-danger" ng-click="ctrl.clearFilters()">Clear</button>
+        </div>
+        <div class="col-md-7"  style="margin-top:10px;">
+            <div ng-show="ctrl.showUpdateError" class="alert alert-danger" role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span>
+                {{ctrl.error}}
+            </div>
+        </div>
+    </div>
+</div>
+
 <div ng-show="ctrl.data" class="projects-table" style="margin-top:24px; margin-left:8px;">
     <table ng-data="ctrl.data.projects" ng-show="ctrl.data" class="table table-striped table-hover">
         <tbody>
diff --git a/testapi/opnfv_testapi/ui/components/projects/projectsController.js b/testapi/opnfv_testapi/ui/components/projects/projectsController.js
index 16002f6..468407b 100644
--- a/testapi/opnfv_testapi/ui/components/projects/projectsController.js
+++ b/testapi/opnfv_testapi/ui/components/projects/projectsController.js
@@ -34,6 +34,7 @@
         ctrl.url = testapiApiUrl + '/projects';
         ctrl.create = create;
         ctrl.update = update;
+        ctrl.clearFilters = clearFilters;
 
         ctrl.createRequirements = [
             {label: 'name', type: 'text', required: true},
@@ -42,13 +43,13 @@
 
         ctrl.name = '';
         ctrl.details = '';
-
+        ctrl.filterName='';
         /**
          * This will contact the TestAPI to create a new project.
          */
         function create() {
-            ctrl.showError = false;
-            ctrl.showSuccess = false;
+            ctrl.showCreateError = false;
+            ctrl.showCreateSuccess = false;
             if(ctrl.name != ""){
                 var projects_url = ctrl.url;
                 var body = {
@@ -57,18 +58,17 @@
                 };
                 ctrl.projectsRequest =
                     $http.post(projects_url, body).success(function (data){
-                        ctrl.showSuccess = true ;
+                        ctrl.showCreateSuccess = true ;
                         ctrl.update();
-                    })
-                    .error(function (data) {
-                        ctrl.showError = true;
-                        ctrl.error = 'Error creating the new Project from server:' + angular.toJson(data);
+                    }).catch(function (data) {
+                        ctrl.showCreateError = true;
+                        ctrl.error = data.statusText;
                     });
                 ctrl.name = "";
                 ctrl.description="";
             }
             else{
-                ctrl.showError = true;
+                ctrl.showCreateError = true;
                 ctrl.error = 'Name is missing.'
             }
         }
@@ -77,18 +77,31 @@
          * This will contact the TestAPI to get a listing of declared projects.
          */
         function update() {
-            ctrl.showError = false;
-            ctrl.projectsRequest =
-                $http.get(ctrl.url).success(function (data) {
+            ctrl.showUpdateError = false;
+            var content_url = ctrl.url + '?';
+            var name  = ctrl.filterName;
+            if(name){
+                content_url = content_url + 'name=' +
+                name;
+            }
+            ctrl.resultsRequest =
+                $http.get(content_url).success(function (data) {
                     ctrl.data = data;
-                }).error(function (error) {
+                }).catch(function (data)  {
                     ctrl.data = null;
-                    ctrl.showError = true;
-                    ctrl.error =
-                        'Error retrieving projects from server: ' +
-                        angular.toJson(error);
+                    ctrl.showUpdateError = true;
+                    ctrl.error = data.statusText;
                 });
         }
-        ctrl.update();
+
+        /**
+         * This function will clear all filters and update the projects
+         * listing.
+         */
+        function clearFilters() {
+            ctrl.filterName = null;
+            ctrl.showUpdateError = false;
+            ctrl.update();
+        }
     }
 })();
-- 
cgit 1.2.3-korg