From: thuva4 <tharma.thuva@gmail.com>
Date: Thu, 7 Dec 2017 04:17:08 +0000 (+0530)
Subject: Redesign the projects page & project page
X-Git-Url: https://gerrit.opnfv.org/gerrit/gitweb?a=commitdiff_plain;h=4e98903ccae3363090de8fefb463b64a943b8f9f;p=releng-testresults.git

Redesign the projects page & project page

redesign the projects page like pods page
included the delete, filter, create, edit,
batch delete in the projects page.
Unify the update modal for projects page and
project page.
Fix authenticate - fault opertaions

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

diff --git a/testapi/opnfv_testapi/ui/app.js b/testapi/opnfv_testapi/ui/app.js
index 28e5810..8c85686 100644
--- a/testapi/opnfv_testapi/ui/app.js
+++ b/testapi/opnfv_testapi/ui/app.js
@@ -124,14 +124,14 @@
         .run(setup);
 
     setup.$inject = [
-        '$http', '$rootScope', '$window', '$state', 'testapiApiUrl'
+        '$http', '$rootScope', '$window', '$state', 'testapiApiUrl', "authenticate"
     ];
 
     /**
      * Set up the app with injections into $rootscope. This is mainly for auth
      * functions.
      */
-    function setup($http, $rootScope, $window, $state, testapiApiUrl) {
+    function setup($http, $rootScope, $window, $state, testapiApiUrl, authenticate) {
 
         $rootScope.auth = {};
         $rootScope.auth.doSignIn = doSignIn;
@@ -165,7 +165,11 @@
                 success(function (data) {
                     $rootScope.auth.currentUser = data;
                     $rootScope.auth.isAuthenticated = true;
-                    $rootScope.auth.projectNames = $rootScope.auth.doSubmitterCheck(data.groups);
+                    if(authenticate){
+                        $rootScope.auth.projectNames = $rootScope.auth.doSubmitterCheck(data.groups);
+                    }else{
+                        $rootScope.auth.projectNames = ["anonymous"]
+                    }
                 }).
                 error(function () {
                     $rootScope.auth.currentUser = null;
diff --git a/testapi/opnfv_testapi/ui/components/projects/modals/projectModal.html b/testapi/opnfv_testapi/ui/components/projects/modals/projectModal.html
new file mode 100644
index 0000000..ca00f80
--- /dev/null
+++ b/testapi/opnfv_testapi/ui/components/projects/modals/projectModal.html
@@ -0,0 +1,39 @@
+<div class="ball" style="padding:5px;">
+    <div class="modal-body">
+        <div class="form-horizontal">
+            <fieldset>
+                <div class="form-group">
+                    <legend>{{ProjectModalCtrl.data.text}}</legend>
+                    <div class="row">
+                        <div ng-repeat="require in ProjectModalCtrl.createRequirements" style="margin-left:15px">
+                            <div class="update-project">
+                                <label for="cpid" class="control-label col-sm-2">{{require.label|capitalize}}: </label>
+                                <div class="col-sm-9">
+                                    <a ng-if="require.type == 'select'">
+                                            <select class="form-control" dynamic-model="'ProjectModalCtrl.project.' + require.label" ng-options="option for option in require.selects"></select>
+                                    </a>
+                                    <a ng-if="require.type == 'text'">
+                                        <input type="text" class="form-control" dynamic-model="'ProjectModalCtrl.project.' + require.label"/>
+                                    </a>
+                                    <a ng-if="require.type == 'textarea'">
+                                        <textarea rows="2" class="form-control" cols="50" dynamic-model="'ProjectModalCtrl.project.' + require.label">
+                                        </textarea>
+                                    </a>
+                                    <p class="help-block"></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <div ng-show="ProjectModalCtrl.showCreateError" style="padding:0px;" class="col-md-6 alert alert-danger" role="alert">
+                <span class="pull-right">&nbsp;{{ProjectModalCtrl.error}}</span>
+                <span class="glyphicon glyphicon-exclamation-sign pull-right" aria-hidden="true" >Error:</span>
+        </div>
+        <button class="btn btn-primary" ng-click="ProjectModalCtrl.confirm()">Ok</button>
+        <button class="btn btn-default" ng-click="ProjectModalCtrl.cancel()">Cancel</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/testapi/opnfv_testapi/ui/components/projects/project/project.html b/testapi/opnfv_testapi/ui/components/projects/project/project.html
index 9d46364..82dc0ec 100644
--- a/testapi/opnfv_testapi/ui/components/projects/project/project.html
+++ b/testapi/opnfv_testapi/ui/components/projects/project/project.html
@@ -1,25 +1,44 @@
-<div ng-show="ctrl.data" class="projects-table" style="margin-top:24px; margin-left:8px;">
-    <table class="table">
+<legend>Project</legend>
+<div style="padding-right:0px">
+    <div class="table-responsive">
+        <table class="table"  ng-data="ctrl.data.pods">
             <tbody>
-                <tr> <td class="col-md-3">Name</td> <td class="col-md-9">{{ctrl.data.name}}</td> </tr>
-                <tr> <td>Description</td> <td>{{ctrl.data.description}}</td> </tr>
-                <tr> <td>Creation date</td> <td>{{ctrl.data.creation_date}}</td> </tr>
+                <tr style="padding:9px">
+                    <td class="podsTableTd">Id&nbsp;:</td>
+                    <td class="podsTableLeftTd">{{ctrl.data._id}}</td>
+                </tr>
+                <tr style="padding:9px">
+                    <td class="podsTableTd">Name&nbsp;:</td>
+                    <td width="90%" class="podsTableLeftTd">{{ctrl.data.name}}</td>
+                </tr>
+                <tr style="padding:9px">
+                    <td class="podsTableTd">Owner&nbsp;:</td>
+                    <td width="90%" class="podsTableLeftTd">{{ctrl.data.owner}}</td>
+                </tr>
+                <tr style="padding:9px">
+                    <td class="podsTableTd">Created&nbsp;at&nbsp;:</td>
+                    <td width="90%" class="podsTableLeftTd">{{ctrl.data['creation_date']}}</td>
+                </tr>
+                <tr style="padding:9px">
+                    <td class="podsTableTd">Description&nbsp;:</td>
+                    <td  width="90%" class="podsTableLeftTd">{{ctrl.data.description}}</td>
+                </tr>
             </tbody>
-    </table>
+        </table>
+    </div>
 </div>
-
 <div class="row" style="margin-bottom:24px;"></div>
 <div class="project-create col-md-3" style="margin-top:10px" ng-class="{ 'hidden': ! ((auth.projectNames.length>0) &&
     auth.isAuthenticated) }">
         <button type="submit" class="btn btn-primary" ng-click="ctrl.openDeleteModal()">Delete Project</button>
         <button type="submit" class="btn btn-primary" ng-click="ctrl.openUpdateModal()">Update Project</button>
 </div>
-<div ng-show="ctrl.showError" class="alert alert-danger col-md-9" role="alert">
+<div ng-show="ctrl.showError" class="alert alert-danger col-md-9" role="alert" style="margin-top:0px">
         <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 col-md-9" role="alert">
+<div ng-show="ctrl.showSuccess" class="alert alert-success col-md-9" role="alert" style="margin-top:0px">
     <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
     Update Success
 </div>
\ No newline at end of file
diff --git a/testapi/opnfv_testapi/ui/components/projects/project/projectController.js b/testapi/opnfv_testapi/ui/components/projects/project/projectController.js
index 8f4bd20..e8d7bd6 100644
--- a/testapi/opnfv_testapi/ui/components/projects/project/projectController.js
+++ b/testapi/opnfv_testapi/ui/components/projects/project/projectController.js
@@ -41,34 +41,29 @@
         ctrl.openUpdateModal = openUpdateModal;
         ctrl.updateProject = updateProject;
 
-
         /**
          * This will contact the TestAPI to update an existing project.
          */
-        function updateProject(name,description) {
+        function updateProject(name,project) {
             ctrl.showError = false;
             ctrl.showSuccess = false;
-            if(ctrl.name != ""){
-                var projects_url = ctrl.url;
-                var body = {
-                    name: name,
-                    description: description
-                };
-                ctrl.projectsRequest =
-                    $http.put(projects_url, body).success(function (data){
-                        ctrl.showSuccess = true ;
-                    })
-                    .error(function (data) {
-                        ctrl.showError = true;
-                        ctrl.error = 'Error updating the existing Project from server: ' + angular.toJson(data);
-                    });
-                ctrl.name = "";
-                ctrl.description="";
-            }
-            else{
-                ctrl.showError = true;
-                ctrl.error = 'Name is missing.'
-            }
+            var projects_url = ctrl.url;
+            var body = {
+                name: project.name,
+                description: project.description
+            };
+            ctrl.projectsRequest =
+                $http.put(projects_url, body).success(function (data){
+                    ctrl.showSuccess = true ;
+                    ctrl.name = body.name;
+                    $state.go('project', {'name':ctrl.name}, {reload: true});
+                })
+                .catch(function (error) {
+                    ctrl.showError = true;
+                    ctrl.error = error.statusText
+                });
+
+
         }
 
         /**
@@ -79,14 +74,11 @@
             ctrl.showSuccess = false;
             ctrl.projectsRequest =
             $http.delete(ctrl.url).success(function (data) {
-                $state.go('projects', {}, {reload: true});
+                $state.go('projects', {'name':ctrl.name}, {reload: true});
                 ctrl.showSuccess = true ;
-
-            }).error(function (error) {
+            }).catch(function (error) {
                 ctrl.showError = true;
-                ctrl.error =
-                    'Error deleting project from server: ' +
-                    angular.toJson(error);
+                ctrl.error = error.statusText
             });
         }
 
@@ -104,15 +96,15 @@
          */
         function openUpdateModal(){
                 $uibModal.open({
-                    templateUrl: 'testapi-ui/components/projects/project/updateModal.html',
-                    controller: 'ModalInstanceCtrl as updateModal',
+                    templateUrl: 'testapi-ui/components/projects/modals/projectModal.html',
+                    controller: 'ProjectModalCtrl as ProjectModalCtrl',
                     size: 'md',
                     resolve: {
                         data: function () {
                             return {
-                                text: "Update",
+                                text: "Update Project",
                                 successHandler: ctrl.updateProject,
-                                project: ctrl.data
+                                project : ctrl.data
                             };
                         }
                     }
@@ -127,57 +119,12 @@
             ctrl.projectsRequest =
                 $http.get(ctrl.url).success(function (data) {
                     ctrl.data = data;
-                }).error(function (error) {
+                }).catch(function (error) {
                     ctrl.data = null;
                     ctrl.showError = true;
-                    ctrl.error =
-                        'Error retrieving projects from server: ' +
-                        angular.toJson(error);
+                    ctrl.error = error.statusText
                 });
         }
         ctrl.loadDetails();
     }
-
-
-    /**
-     * TestAPI Modal instance Controller
-     * This controller is for the update modal where a user can update
-     * the project information.
-     */
-    angular.module('testapiApp').controller('ModalInstanceCtrl', ModalInstanceCtrl);
-    ModalInstanceCtrl.$inject = ['$scope', '$uibModalInstance', 'data'];
-    function ModalInstanceCtrl($scope, $uibModalInstance, data) {
-        var ctrl = this;
-        ctrl.confirm = confirm;
-        ctrl.cancel = cancel;
-        ctrl.data = angular.copy(data);
-
-        ctrl.createRequirements = [
-            {label: 'name', type: 'text', required: true},
-            {label: 'description', type: 'textarea', required: false}
-        ];
-
-        ctrl.name = ctrl.data.project.name;
-        ctrl.description = ctrl.data.project.description;
-
-        /**
-         * Initiate confirmation and call the success handler with the
-         * inputs.
-         */
-        function confirm() {
-            $uibModalInstance.close();
-            if (angular.isDefined(ctrl.data.successHandler)) {
-                ctrl.data.successHandler(ctrl.name,ctrl.description);
-            }
-        }
-
-        /**
-         * Close the confirm modal without initiating changes.
-         */
-        function cancel() {
-            $uibModalInstance.dismiss('cancel');
-        }
-    }
-
-
 })();
diff --git a/testapi/opnfv_testapi/ui/components/projects/project/updateModal.html b/testapi/opnfv_testapi/ui/components/projects/project/updateModal.html
deleted file mode 100644
index ab8d64e..0000000
--- a/testapi/opnfv_testapi/ui/components/projects/project/updateModal.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="modal-header"><h3 class="modal-title">Confirm</h3></div>
-<div class="modal-body">
-    <div class="form-group">
-        <h4>Update</h4>
-        <div class="row">
-            <div ng-repeat="require in updateModal.createRequirements">
-                <div class="update-project" style="margin-left:24px;">
-                    <p class="input-group">
-                        <label for="cpid">{{require.label|capitalize}}: </label>
-                        <a ng-if="require.type == 'text'">
-                            <input type="text" dynamic-model="'updateModal.' + require.label"/>
-                        </a>
-                        <a ng-if="require.type == 'textarea'">
-                            <textarea rows="2" cols="50" value={{require.vaule}} dynamic-model="'updateModal.' + require.label">
-                            </textarea>
-                        </a>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-<div class="modal-footer">
-    <button class="btn btn-primary" ng-click="updateModal.confirm()">Ok</button>
-    <button class="btn btn-default" ng-click="updateModal.cancel()">Cancel</button>
-</div>
diff --git a/testapi/opnfv_testapi/ui/components/projects/projects.html b/testapi/opnfv_testapi/ui/components/projects/projects.html
index 28c08b1..e8bb947 100644
--- a/testapi/opnfv_testapi/ui/components/projects/projects.html
+++ b/testapi/opnfv_testapi/ui/components/projects/projects.html
@@ -1,76 +1,72 @@
 <h3>Projects</h3>
 
 <div class="row" style="margin-bottom:24px;"></div>
-<div class="project-create" ng-class="{ 'hidden': ! ((auth.projectNames.length>0) &&
-    auth.isAuthenticated) }">
-    <h4>Create</h4>
-    <div class="row">
-        <div ng-repeat="require in ctrl.createRequirements">
-            <div class="create-project" style="margin-left:24px;">
-                <p class="input-group">
-                    <label for="cpid">{{require.label|capitalize}}: </label>
-                    <a ng-if="require.type == 'text'">
-                        <input type="text" dynamic-model="'ctrl.' + require.label"/>
-                    </a>
-                    <a ng-if="require.type == 'textarea'">
-                        <textarea rows="2" cols="50" dynamic-model="'ctrl.' + require.label">
-                        </textarea>
-                    </a>
-                </p>
-            </div>
-        </div>
-        <div class="col-md-1 col-sm-1 col-xs-1 " style="margin-top:15px;">
-                <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.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.showCreateSuccess" class="alert alert-success" role="alert">
-                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
-                Create Success
-            </div>
-        </div>
+<div class="row podsTable" style="vertical-align:middle">
+    <div class="col-sm-1 pull-right" ng-class="{ 'hidden': ! ((auth.projectNames.length>0) &&
+        auth.isAuthenticated) }" >
+            <button type="button" class="btn btn-danger" ng-click="ctrl.openBatchDeleteModal()">
+              <i class="fa fa-minus"></i> Delete</button>
+    </div>
+    <div class="col-sm-1 pull-right"  ng-class="{ 'hidden': ! ((auth.projectNames.length>0) &&
+        auth.isAuthenticated) }">
+        <button type="button" class="btn btn-success" ng-click="ctrl.openCreateModal()">
+          <i class="fa fa-plus"></i> Create</button>
+    </div>
+    <div class="col-sm-1 pull-right">
+        <button type="button" class="btn btn-success" ng-click="ctrl.listProjects()">
+          <i class="fa fa-search"></i> Filter</button>
+    </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-Model="ctrl.filterText" style="width:80%;" placeholder="Search By Name">
     </div>
 </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 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.showCreateSuccess" 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-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">
+<div class='clo-md-12' style="padding-right:0px">
+    <div class="table-responsive">
+        <table class="table table-bordered table-hover"  ng-data="ctrl.data.projects">
+        <thead>
+        <tr style="
+        text-align: center;">
+            <th style="width: 1%;">Bulk Select</th>
+            <th style="width: 19%;">Name</th>
+            <th style="width: 70%;">Description</th>
+            <th style="width: 10%;">Operations</th>
+        </tr>
+        </thead>
         <tbody>
-            <tr ng-repeat-start="(index, project) in ctrl.data.projects">
-                <td>
-                    <a ui-sref='project({name: project.name})'>{{project.name}}</a>
-                </td>
-            </tr>
-            <tr ng-repeat-end=>
-            </tr>
+        <tr ng-repeat-start="(index, project) in ctrl.data.projects" style="padding:9px">
+            <td>
+            <div class="text-center">
+                    <input type="checkbox" value="{{project.name}}"  ng-model="ctrl.checkBox[index]" >
+                </div>
+            </td>
+            <td>{{project.name}}</td>
+            <td>{{project.description}}</td>
+            <td>
+                <span class="podsTable-col">
+                    <a class="text-warning" ng-click="ctrl.openUpdateModal(project.name)" title="Edit" ng-class="{'hidden': ! ((auth.projectNames.length>0) &&
+                        auth.isAuthenticated)}" >
+                        <i class="fa fa-pencil-square-o"></i></a>
+                    <a class="text-danger"  ng-click="ctrl.openDeleteModal(project.name)" title="Delete" ng-class="{'hidden': ! ((auth.projectNames.length>0) &&
+                        auth.isAuthenticated)}">
+                        <i class="fa fa-trash-o"></i></a>
+                    <a class="text-info" ng-click="ctrl.viewProject(project.name)"><i class="fa fa-eye"></i></a>
+                </span>
+            </td>
+        </tr>
+        <tr ng-repeat-end=>
+        </tr>
         </tbody>
-    </table>
+        </table>
+    </div>
 </div>
\ No newline at end of file
diff --git a/testapi/opnfv_testapi/ui/components/projects/projectsController.js b/testapi/opnfv_testapi/ui/components/projects/projectsController.js
index 468407b..38764ea 100644
--- a/testapi/opnfv_testapi/ui/components/projects/projectsController.js
+++ b/testapi/opnfv_testapi/ui/components/projects/projectsController.js
@@ -20,7 +20,8 @@
         .controller('ProjectsController', ProjectsController);
 
         ProjectsController.$inject = [
-        '$scope', '$http', '$filter', '$state', 'testapiApiUrl','raiseAlert'
+        '$scope', '$http', '$filter', '$state', '$window', '$uibModal', 'testapiApiUrl',
+        'raiseAlert', 'confirmModal'
     ];
 
     /**
@@ -28,80 +29,248 @@
      * This controller is for the '/projects' page where a user can browse
      * through projects declared in TestAPI.
      */
-    function ProjectsController($scope, $http, $filter, $state, testapiApiUrl,
-        raiseAlert) {
+    function ProjectsController($scope, $http, $filter, $state, $window, $uibModal, testapiApiUrl,
+        raiseAlert, confirmModal) {
         var ctrl = this;
         ctrl.url = testapiApiUrl + '/projects';
+
         ctrl.create = create;
+        ctrl.listProjects = listProjects;
+        ctrl.openCreateModal = openCreateModal;
+        ctrl.viewProject = viewProject;
+        ctrl.openUpdateModal = openUpdateModal;
         ctrl.update = update;
-        ctrl.clearFilters = clearFilters;
-
-        ctrl.createRequirements = [
-            {label: 'name', type: 'text', required: true},
-            {label: 'description', type: 'textarea', required: false}
-        ];
+        ctrl.openDeleteModal = openDeleteModal;
+        ctrl.openBatchDeleteModal = openBatchDeleteModal;
+        ctrl.projectDelete = projectDelete;
+        ctrl.batchDelete = batchDelete;
 
+        ctrl.checkBox = [];
+        ctrl.checkBoxList = [];
         ctrl.name = '';
         ctrl.details = '';
-        ctrl.filterName='';
+        ctrl.filterText='';
+
         /**
          * This will contact the TestAPI to create a new project.
          */
-        function create() {
-            ctrl.showCreateError = false;
+        function create(project) {
+            ctrl.showError = false;
             ctrl.showCreateSuccess = false;
-            if(ctrl.name != ""){
-                var projects_url = ctrl.url;
-                var body = {
-                    name: ctrl.name,
-                    description: ctrl.description
-                };
-                ctrl.projectsRequest =
-                    $http.post(projects_url, body).success(function (data){
-                        ctrl.showCreateSuccess = true ;
-                        ctrl.update();
-                    }).catch(function (data) {
-                        ctrl.showCreateError = true;
-                        ctrl.error = data.statusText;
-                    });
-                ctrl.name = "";
-                ctrl.description="";
-            }
-            else{
-                ctrl.showCreateError = true;
-                ctrl.error = 'Name is missing.'
+            var projects_url = ctrl.url;
+            var body = {
+                name: project.name,
+                description: project.description
+            };
+            ctrl.projectsRequest =
+                $http.post(projects_url, body).success(function (data){
+                    ctrl.showCreateSuccess = true ;
+                    ctrl.success = "Project is successfully created."
+                    ctrl.listProjects();
+                }).catch(function (data) {
+                    ctrl.showError = true;
+                    ctrl.error = data.statusText;
+                });
+        }
+
+        /**
+         * This will open the modal that will show the create
+         * project view
+         */
+        function openCreateModal(){
+            $uibModal.open({
+                templateUrl: 'testapi-ui/components/projects/modals/projectModal.html',
+                controller: 'ProjectModalCtrl as ProjectModalCtrl',
+                size: 'md',
+                resolve: {
+                    data: function () {
+                        return {
+                            text: "Create Project",
+                            successHandler: ctrl.create
+                        };
+                    }
+                }
+            });
+        }
+
+        /**
+         * This will open the modal that will show the update
+         * project view
+         */
+        function openUpdateModal(name){
+            var project;
+            var index;
+            for(index in ctrl.data.projects){
+                if(ctrl.data.projects[index].name==name){
+                    project = ctrl.data.projects[index]
+                    continue
+                }
             }
+            $uibModal.open({
+                templateUrl: 'testapi-ui/components/projects/modals/projectModal.html',
+                controller: 'ProjectModalCtrl as ProjectModalCtrl',
+                size: 'md',
+                resolve: {
+                    data: function () {
+                        return {
+                            text: "Update Project",
+                            successHandler: ctrl.update,
+                            project : project
+                        };
+                    }
+                }
+            });
+        }
+
+        /**
+         * This will contact the TestAPI to update an existing test case.
+         */
+        function update(name, project) {
+            ctrl.showError = false;
+            ctrl.showSuccess = false;
+            var projectUrl = ctrl.url + '/' + name;
+            ctrl.testCasesRequest =
+                $http.put(projectUrl, project).success(function (data){
+                    ctrl.showSuccess = true ;
+                    ctrl.success = "Project is successfully updated."
+                    listProjects();
+                })
+                .catch(function (data) {
+                    ctrl.showError = true;
+                    ctrl.error = data.statusText;
+                });
         }
 
         /**
          * This will contact the TestAPI to get a listing of declared projects.
          */
-        function update() {
-            ctrl.showUpdateError = false;
+        function listProjects() {
+            ctrl.showError = false;
             var content_url = ctrl.url + '?';
-            var name  = ctrl.filterName;
-            if(name){
+            var filterText  = ctrl.filterText;
+            if(filterText != ''){
                 content_url = content_url + 'name=' +
-                name;
+                filterText;
             }
             ctrl.resultsRequest =
                 $http.get(content_url).success(function (data) {
                     ctrl.data = data;
                 }).catch(function (data)  {
                     ctrl.data = null;
-                    ctrl.showUpdateError = true;
+                    ctrl.showError = true;
                     ctrl.error = data.statusText;
                 });
         }
 
+        function viewProject(name){
+            $state.go('project', {'name':name}, {reload: true});
+        }
+
+        /**
+         * This will contact the TestAPI to delete a project for given
+         * name.
+         */
+        function projectDelete(projectName){
+            var projectUrl = ctrl.url + "/" + projectName
+            $http.delete(projectUrl).success(function(){
+                ctrl.showSuccess = true ;
+                ctrl.success = "Projects is successfully deleted"
+                ctrl.listProjects();
+            }).catch(function (data)  {
+                ctrl.showError = true;
+                ctrl.showSuccess = false;
+                ctrl.error = data.statusText;
+            });
+        }
+
         /**
-         * This function will clear all filters and update the projects
-         * listing.
+         * This will  delete list of projects.
          */
-        function clearFilters() {
-            ctrl.filterName = null;
-            ctrl.showUpdateError = false;
-            ctrl.update();
+        function batchDelete(){
+            var index;
+            var checkedBox = [];
+            ctrl.checkBox.forEach(function(project, index){
+                if(!ctrl.showError){
+                    if(project){
+                        projectDelete(ctrl.data.projects[index].name);
+                    }
+                }
+              });
+            ctrl.checkBox = []
+        }
+
+        /**
+         * This will open the modal that will show the batch delete confirm
+         * message
+         */
+        function openBatchDeleteModal() {
+            confirmModal("Delete",ctrl.batchDelete);
+        }
+
+        /**
+         * This will open the modal that will show the delete confirm
+         * message
+         */
+        function openDeleteModal(name) {
+            confirmModal("Delete", ctrl.projectDelete, name);
+        }
+
+        ctrl.listProjects();
+    }
+
+    /**
+     * TestAPI Project  Modal Controller
+     * This controller is for the create modal where a user can create
+     * the project information and for the edit modal where user can
+     * edit the project's details
+     */
+    angular.module('testapiApp').controller('ProjectModalCtrl', ProjectModalCtrl);
+    ProjectModalCtrl.$inject = ['$scope', '$uibModalInstance', 'data'];
+    function ProjectModalCtrl($scope, $uibModalInstance, data) {
+        var ctrl = this;
+        ctrl.confirm = confirm;
+        ctrl.cancel = cancel;
+        ctrl.data = angular.copy(data);
+        ctrl.createRequirements = [
+            {label: 'name', type: 'text', required: true},
+            {label: 'description', type: 'textarea', required: false}
+        ];
+        ctrl.project = {
+            name : '',
+            description : ''
+        }
+        if(ctrl.data.project){
+            ctrl.projectName = ctrl.data.project.name
+            ctrl.project = ctrl.data.project
+            delete ctrl.project._id;
+        }
+
+        /**
+         * Initiate confirmation and call the success handler with the
+         * inputs.
+         */
+        function confirm() {
+            if (angular.isDefined(ctrl.data.successHandler)) {
+                if(ctrl.project.name != ""){
+                    $uibModalInstance.close();
+                    if(ctrl.data.project){
+                        ctrl.data.successHandler(ctrl.projectName, ctrl.project);
+                    }else{
+                        ctrl.data.successHandler(ctrl.project);
+                    }
+                }else{
+                    ctrl.showCreateError = true;
+                    ctrl.error = 'Name is missing.'
+                }
+            }
+        }
+
+        /**
+         * Close the confirm modal without initiating changes.
+         */
+        function cancel() {
+            $uibModalInstance.dismiss('cancel');
         }
     }
+
 })();
diff --git a/testapi/opnfv_testapi/ui/config.json b/testapi/opnfv_testapi/ui/config.json
index 5d48c7b..26dfd08 100644
--- a/testapi/opnfv_testapi/ui/config.json
+++ b/testapi/opnfv_testapi/ui/config.json
@@ -1 +1,2 @@
-{"testapiApiUrl": "http://localhost:8000/api/v1"}
+{"testapiApiUrl": "http://localhost:8000/api/v1",
+"authenticate": true}
diff --git a/testapi/opnfv_testapi/ui/shared/alerts/confirmModalFactory.js b/testapi/opnfv_testapi/ui/shared/alerts/confirmModalFactory.js
index fc0bfe6..5e79775 100644
--- a/testapi/opnfv_testapi/ui/shared/alerts/confirmModalFactory.js
+++ b/testapi/opnfv_testapi/ui/shared/alerts/confirmModalFactory.js
@@ -46,7 +46,6 @@
         ctrl.cancel = cancel;
 
         ctrl.data = angular.copy(data);
-        console.log(ctrl.data)
         /**
          * Initiate confirmation and call the success handler with the
          * input text.