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>

3 files changed, 55 insertions, 115 deletions

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>