move self-developed front-end codes to ui/

Change-Id: I0b64661e73d940a577f27ded9322086788e4f5f3
Signed-off-by: SerenaFeng <feng.xiaowei@zte.com.cn>

3 files changed, 234 insertions, 0 deletions

diff --git a/testapi/opnfv_testapi/ui/components/projects/project/project.html b/testapi/opnfv_testapi/ui/components/projects/project/project.html
new file mode 100644
index 0000000..9d46364
--- /dev/null
+++ b/testapi/opnfv_testapi/ui/components/projects/project/project.html
@@ -0,0 +1,25 @@
+<div ng-show="ctrl.data" class="projects-table" style="margin-top:24px; margin-left:8px;">
+    <table class="table">
+            <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>
+            </tbody>
+    </table>
+</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">
+        <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">
+    <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
new file mode 100644
index 0000000..8f4bd20
--- /dev/null
+++ b/testapi/opnfv_testapi/ui/components/projects/project/projectController.js
@@ -0,0 +1,183 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+    'use strict';
+
+    angular
+        .module('testapiApp')
+        .controller('ProjectController', ProjectController);
+
+        ProjectController.$inject = [
+        '$scope', '$http', '$filter', '$state', '$window', '$uibModal', 'testapiApiUrl','raiseAlert',
+        'confirmModal'
+    ];
+
+    /**
+     * TestAPI Project Controller
+     * This controller is for the '/projects' page where a user can browse
+     * through projects declared in TestAPI.
+     */
+    function ProjectController($scope, $http, $filter, $state, $window, $uibModal, testapiApiUrl,
+        raiseAlert, confirmModal) {
+        var ctrl = this;
+        ctrl.name = $state.params['name'];
+        ctrl.url = testapiApiUrl + '/projects/' + ctrl.name;
+
+        ctrl.loadDetails = loadDetails;
+        ctrl.deleteProject = deleteProject;
+        ctrl.openDeleteModal = openDeleteModal;
+        ctrl.openUpdateModal = openUpdateModal;
+        ctrl.updateProject = updateProject;
+
+
+        /**
+         * This will contact the TestAPI to update an existing project.
+         */
+        function updateProject(name,description) {
+            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.'
+            }
+        }
+
+        /**
+         * This will contact the TestAPI to delete an existing project.
+        */
+        function deleteProject() {
+            ctrl.showError = false;
+            ctrl.showSuccess = false;
+            ctrl.projectsRequest =
+            $http.delete(ctrl.url).success(function (data) {
+                $state.go('projects', {}, {reload: true});
+                ctrl.showSuccess = true ;
+
+            }).error(function (error) {
+                ctrl.showError = true;
+                ctrl.error =
+                    'Error deleting project from server: ' +
+                    angular.toJson(error);
+            });
+        }
+
+        /**
+         * This will open the modal that will show the delete confirm
+         * message
+         */
+        function openDeleteModal() {
+            confirmModal("Delete",ctrl.deleteProject);
+        }
+
+        /**
+         * This will open the modal that will show the update
+         * view
+         */
+        function openUpdateModal(){
+                $uibModal.open({
+                    templateUrl: 'testapi-ui/components/projects/project/updateModal.html',
+                    controller: 'ModalInstanceCtrl as updateModal',
+                    size: 'md',
+                    resolve: {
+                        data: function () {
+                            return {
+                                text: "Update",
+                                successHandler: ctrl.updateProject,
+                                project: ctrl.data
+                            };
+                        }
+                    }
+                });
+        }
+
+        /**
+         * This will contact the TestAPI to get a listing of declared projects.
+         */
+        function loadDetails() {
+            ctrl.showError = false;
+            ctrl.projectsRequest =
+                $http.get(ctrl.url).success(function (data) {
+                    ctrl.data = data;
+                }).error(function (error) {
+                    ctrl.data = null;
+                    ctrl.showError = true;
+                    ctrl.error =
+                        'Error retrieving projects from server: ' +
+                        angular.toJson(error);
+                });
+        }
+        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
new file mode 100644
index 0000000..ab8d64e
--- /dev/null
+++ b/testapi/opnfv_testapi/ui/components/projects/project/updateModal.html
@@ -0,0 +1,26 @@
+<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>