Merge "Redesign the projects page & project page"

9 files changed, 378 insertions, 230 deletions

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.