Tenant crud part 1

- popup forms example
- tenant form
- put is working

Change-Id: I1509df72ad4e430190b7239283e86d0af5b4de35
Signed-off-by: Daniel Malachovsky <dmalacho@cisco.com>

diff --git a/groupbasedpolicy-ui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml b/groupbasedpolicy-ui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml
index 59ee158ad7c4a9e4db57580ca3479c78f9ba05f2..f9c434be9282f22e1e148b45753e44367763f12d 100644 (file)
--- a/groupbasedpolicy-ui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml
+++ b/groupbasedpolicy-ui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml
@@ -14,6 +14,7 @@
                 <value>src/app/gbp/common/gbp.css</value>
                 <value>src/app/gbp/vendor/angular-material/angular-material.css</value>
                 <value>src/app/gbp/vendor/angular-material-data-table/dist/md-data-table.min.css</value>
+                <value>src/app/gbp/vendor/roboto-fontface/css/roboto-fontface.css</value>
             </list>
         </property>
     </bean>

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css
index 9c3bb0e55ccfe2cbf32182081fad4198b99571d6..c0c84c02c542234123dfc5885bf554df36f3f136 100644 (file)
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css
@@ -37,3 +37,18 @@
 .gbpUiWrapper.flt-r {
     float: right;
 }
+
+/* LAYOUT */
+.layout-padding-lr15 {
+    padding: 0 15px;
+}
+
+/* TABLES */
+.gbpUiWrapper .md-table span {
+    color: rgba(0,0,0,.87);
+}
+
+/* BUTTONS */
+.gbpUiWrapper button.md-primary span {
+    color: rgb(33,150,243);
+}

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js
index 9a00557a1e6427cef8d12e9b3e72b602dcde0205..37773cfb2fbcf4d2251582b88ab6c5778ad052fb 100644 (file)
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js
@@ -5,11 +5,12 @@ define([
     'angular-animate',
     'angular-aria',
     'angular-material',
-    'angular-material-data-table'], function () {
+    'angular-material-data-table',
+    'angular-messages'], function () {
 
     var gbp = angular.module('app.gbp',
         [
-            'app.core', 'ui.router.state', 'restangular', 'ngAnimate', 'ngAria', 'ngMaterial', 'md.data.table',
+            'app.core', 'ui.router.state', 'restangular', 'ngAnimate', 'ngAria', 'ngMaterial', 'md.data.table', 'ngMessages'
         ]);
 
     gbp.register = gbp; // for adding services, controllers, directives etc. to angular module before bootstrap
@@ -29,6 +30,7 @@ define([
         NavHelperProvider.addControllerUrl('app/gbp/contract/contract.controller');
         NavHelperProvider.addControllerUrl('app/gbp/epg/epg.controller');
         NavHelperProvider.addControllerUrl('app/gbp/policy/policy.controller');
+        NavHelperProvider.addControllerUrl('app/gbp/tenant/add-tenant.controller');
         NavHelperProvider.addControllerUrl('app/gbp/tenant/tenant.controller');
 
         NavHelperProvider.addToMenu('gbp', {
@@ -38,8 +40,8 @@ define([
             'icon': 'icon-level-down',
             'page': {
                 'title': 'GBP',
-                'description': 'GBP ui',
-            },
+                'description': 'GBP ui'
+            }
         });
 
         var access = routingConfig.accessLevels;
@@ -50,7 +52,7 @@ define([
             // access: access.public,
             views: {
                 'content': {
-                    templateUrl: 'src/app/gbp/common/views/root.tpl.html',
+                    templateUrl: 'src/app/gbp/common/views/root.tpl.html'
 
                 },
             },
@@ -62,7 +64,7 @@ define([
             views: {
                 '': {
                     controller: 'RootGbpCtrl',
-                    templateUrl: 'src/app/gbp/common/views/index.tpl.html',
+                    templateUrl: 'src/app/gbp/common/views/index.tpl.html'
                 },
             },
         });

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/main.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/main.js
index 6bff651359fae118a47ef58f57c440c5d4c5bc18..b84195acf3949522dc8406a4c993cdd8f749ab40 100644 (file)
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/main.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/main.js
@@ -5,12 +5,14 @@ require.config({
         'angular-aria': 'app/gbp/vendor/angular-aria/angular-aria.min',
         'lodash': 'app/gbp/vendor/lodash/dist/lodash.min',
         'angular-material-data-table': 'app/gbp/vendor/angular-material-data-table/dist/md-data-table.min',
+        'angular-messages' : 'app/gbp/vendor/angular-messages/angular-messages.min'
     },
     shim: {
         'angular-material': ['angular'],
         'angular-animate': ['angular'],
         'angular-aria': ['angular'],
         'angular-material-data-table': ['angular', 'angular-material'],
+        'angular-messages' : ['angular'],
     },
 });
 

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/add-tenant.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/add-tenant.controller.js
new file mode 100644 (file)
index 0000000..fc12c4c
--- /dev/null
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/add-tenant.controller.js
@@ -0,0 +1,31 @@
+define([
+    'app/gbp/tenant/tenant.service'
+], function () {
+    'use strict';
+
+    angular.module('app.gbp').controller('AddTenantController', AddTenantController);
+
+    AddTenantController.$inject = ['$mdDialog', '$scope', 'TenantService'];
+    /* @ngInject */
+    function AddTenantController($mdDialog, $scope, TenantService) {
+        /* properties */
+        $scope.tenant = TenantService.createObject();
+
+        /* methods */
+        $scope.closeDialog = closeDialog;
+        $scope.save = save;
+
+        /* Implementations */
+
+        function closeDialog(){
+            $mdDialog.cancel();
+        }
+
+        function save() {
+            $scope.tenant.put(function(data) {
+                $scope.closeDialog();
+            }, function(err) {
+            } );
+        }
+    }
+});

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/dialog-add-tenant.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/dialog-add-tenant.tpl.html
new file mode 100644 (file)
index 0000000..17347c9
--- /dev/null
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/dialog-add-tenant.tpl.html
@@ -0,0 +1,46 @@
+<md-dialog ng-cloak>
+    <form name="tenantForm">
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2>Tenant</h2>
+                <span flex></span>
+                <md-button ng-click="closeDialog()" class="md-button">Close dialog</md-button>
+            </div>
+        </md-toolbar>
+        <md-dialog-content style="width:350px;">
+            <div layout="column" class="layout-padding-lr15">
+                <div layout="row">
+                    <md-input-container flex>
+                        <label>Id</label>
+                        <input name="id" ng-model="tenant.data.id" ng-required="true">
+                        <div ng-messages="tenantForm.id.$error" md-auto-hide="false">
+                            <div ng-message="required">Required field</div>
+                        </div>
+                    </md-input-container>
+                    <md-input-container flex>
+                        <label>Name</label>
+                        <input name="name" ng-model="tenant.data.name" ng-required="true">
+                        <div ng-messages="tenantForm.name.$error" md-auto-hide="false">
+                            <div ng-message="required">Required field</div>
+                        </div>
+                    </md-input-container>
+                </div>
+                <div layout="row">
+                    <md-input-container flex>
+                        <label>Description</label>
+                        <input name="description" ng-model="tenant.data.description">
+                    </md-input-container>
+                </div>
+            </div>
+        </md-dialog-content>
+        <md-dialog-actions layout="row">
+            <span flex></span>
+            <md-button ng-click="closeDialog()" class="md-primary">
+                Close
+            </md-button>
+            <md-button ng-click="save()" style="margin-right:20px;" ng-disabled="tenantForm.$invalid" class="md-primary">
+                Save
+            </md-button>
+        </md-dialog-actions>
+    </form>
+</md-dialog>

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.controller.js
index d252b43a52bb59bbf3ecb31aa354670082c9f6c9..69e921c91675392136a15a54accb5b8a6fdb006f 100644 (file)
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.controller.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.controller.js
@@ -6,18 +6,57 @@ define([
 
     angular.module('app.gbp').controller('TenantController', TenantController);
 
-    TenantController.$inject = ['$scope', 'TenantService', 'TenantListService'];
+    TenantController.$inject = ['$mdDialog', '$scope', 'TenantListService'];
     /* @ngInject */
-    function TenantController($scope, TenantService, TenantListService) {
-        $scope.tenantsTableQuery = {
-            order: "data.id",
-            limit: 25,
-            page: 1,
-            options: [25, 50, 100],
-            filter: ''
-        };
-
+    function TenantController($mdDialog, $scope, TenantListService) {
+        /* properties */
         $scope.tenants = TenantListService.createList();
-        $scope.tenants.get('config');
+        $scope.tenantsTableQuery = {};
+
+        /* methods */
+        $scope.getTenantList = getTenantList;
+        $scope.openTenantDialog = openTenantDialog;
+
+        init();
+
+        /* Implementations */
+
+        /**
+         * fills $scope.tenants array with data from data store
+         */
+        function getTenantList() {
+            $scope.tenants.get('config');
+        }
+
+        /**
+         * Initializing function
+         */
+        function init() {
+            $scope.tenantsTableQuery = {
+                order: "data.id",
+                limit: 25,
+                page: 1,
+                options: [25, 50, 100],
+                filter: ''
+            };
+
+            getTenantList();
+        }
+
+        function openTenantDialog() {
+            $mdDialog.show({
+                clickOutsideToClose: true,
+                controller: 'AddTenantController',
+                preserveScope: true,
+                templateUrl: 'src/app/gbp/tenant/dialog-add-tenant.tpl.html',
+                parent: angular.element(document.body),
+                scope: $scope,
+                locals: {
+                    //policy: $scope.selectedObjects.policy
+                }
+            });
+        }
+
+
     }
 });

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.service.js
index 8d9d3891e1104d56903303299ddb441baa55526e..b6457bd213d67b43b46c104b2ea34a0732b0cc98 100644 (file)
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.service.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.service.js
@@ -20,6 +20,7 @@ define([], function () {
             /* methods */
             this.setData = setData;
             this.get = get;
+            this.put = put;
 
             /* Implementation */
             /**
@@ -51,6 +52,20 @@ define([], function () {
                     self.setData(data.tenant[0]);
                 });
             }
+
+            function put(successCallback) {
+                var self = this;
+
+                var restObj = Restangular.one('restconf').one('config').one('policy:tenants').one('tenant')
+                    .one(self.data.id),
+                    dataObj = {tenant: [self.data]};
+
+                return restObj.customPUT(dataObj).then(function(data) {
+                    successCallback(data);
+                }, function(res) {
+
+                });
+            }
         }
 
         /**

diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.tpl.html
index 92eca4dd1d9803432a3b5515be3d97d0a0d0542a..17f33cf638713ea1ee51003f1cc04471c6256094 100644 (file)
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.tpl.html
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.tpl.html
@@ -1,5 +1,9 @@
 <section flex layout="column">
-    <md-table-container ng-if="tenants.data.length">
+    <div flex layout="row">
+        <md-button ng-click="openTenantDialog()" class="md-primary">Add</md-button>
+        <md-button ng-click="getTenantList()" class="md-primary">Reload</md-button>
+    </div>
+    <md-table-container>
         <table md-table>
             <thead md-head md-order="tenantsTableQuery.order">
             <tr md-row>