Add, Edit, Del contracts 47/39047/2
authormichal.kovacik <michal.kovacik@pantheon.tech>
Wed, 18 May 2016 13:41:27 +0000 (15:41 +0200)
committermichal.kovacik <michal.kovacik@pantheon.tech>
Wed, 18 May 2016 14:02:09 +0000 (16:02 +0200)
It's possible to Add, Edit, Delete Contract via UI now
amend: comments removed

Change-Id: I16265d54a9523ce93e75bc447c17f6e5a29064f4
Signed-off-by: michal.kovacik <michal.kovacik@pantheon.tech>
groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js
groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js
groupbasedpolicy-ui/module/src/main/resources/gbp/contract/add-contract.controller.js [new file with mode: 0644]
groupbasedpolicy-ui/module/src/main/resources/gbp/contract/contract-list.service.js
groupbasedpolicy-ui/module/src/main/resources/gbp/contract/contract.controller.js
groupbasedpolicy-ui/module/src/main/resources/gbp/contract/contract.service.js
groupbasedpolicy-ui/module/src/main/resources/gbp/contract/contract.tpl.html
groupbasedpolicy-ui/module/src/main/resources/gbp/contract/dialog-add-contract.tpl.html [new file with mode: 0644]

index 9d44ace27938d4614c8fcf497fe974f31f86310e..8575dad5f0d477f840e42c8fa500b875d720dcd8 100644 (file)
@@ -18,7 +18,6 @@ define(['app/gbp/common/gbp.service'], function () {
         $scope.closeSidePanel = closeSidePanel;
         $scope.openSidePanel = openSidePanel;
         $scope.setRootTenant = setRootTenant;
-        $scope.disableButton = disableButton;
 
         RootGbpService.setMainClass();
         console.log('RootGbpCtrl initialized');
@@ -31,7 +30,7 @@ define(['app/gbp/common/gbp.service'], function () {
          * and opens/closes side panel
          */
         function init() {
-            $scope.rootTenants.clear();
+            $scope.rootTenants.clearData();
             $scope.rootTenants.get('config');
         }
 
@@ -64,15 +63,6 @@ define(['app/gbp/common/gbp.service'], function () {
             $scope.sidePanelPage = true;
         }
 
-        function disableButton() {
-            if (Object.keys($scope.rootTenant.data) > 0) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        }
-
         function enableButtons() {
             $scope.policyDisabled = false;
         }
index ee59eb9c37bfb14d729a57c35d2b9100cc26421a..11db2640daf02e98c98011cf26fa7a1365433806 100644 (file)
@@ -27,6 +27,7 @@ define([
         /*$translatePartialLoaderProvider.addPart('app/gbp/assets/data/locale');*/
 
         NavHelperProvider.addControllerUrl('app/gbp/common/gbp.controller');
+        NavHelperProvider.addControllerUrl('app/gbp/contract/add-contract.controller');
         NavHelperProvider.addControllerUrl('app/gbp/contract/contract.controller');
         NavHelperProvider.addControllerUrl('app/gbp/epg/epg.controller');
         NavHelperProvider.addControllerUrl('app/gbp/policy/policy.controller');
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/contract/add-contract.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/contract/add-contract.controller.js
new file mode 100644 (file)
index 0000000..199d78f
--- /dev/null
@@ -0,0 +1,32 @@
+define([
+    'app/gbp/contract/contract.service'
+], function () {
+    'use strict';
+
+    angular.module('app.gbp').controller('AddContractController', AddContractController);
+
+    AddContractController.$inject = ['$mdDialog', '$scope', 'ContractService', 'contract'];
+    /* @ngInject */
+    function AddContractController($mdDialog, $scope, ContractService, contract) {
+        /* properties */
+        $scope.contract = contract ? contract : ContractService.createObject();
+
+        /* methods */
+        $scope.closeDialog = closeDialog;
+        $scope.save = save;
+        /* Implementations */
+
+        function closeDialog(){
+            $mdDialog.cancel();
+            $scope.getContractList();
+        }
+
+        function save() {
+            $scope.contract.put($scope.rootTenant.data.id, function (data) {
+                $scope.closeDialog();
+            }, function (err) {
+            } );
+        }
+
+    }
+});
index 6d184b752167d23fe709284acae6962efd4ef21e..c33ece87d919edf3b5157208ab4df8bab7d5af11 100644 (file)
@@ -16,6 +16,7 @@ define([], function () {
             /* methods */
             this.setData = setData;
             this.get = get;
+            this.clearData = clearData;
 
             /* Implementation */
             /**
@@ -29,18 +30,19 @@ define([], function () {
                 });
             }
 
+            function clearData() {
+                var self = this;
+                self.data = [];
+            }
+
             function get(tenantId) {
                 /* jshint validthis:true */
                 var self = this;
 
-                // var restObj = Restangular.one('restconf').one(dataStore).one('policy:tenants')
-                // .one('tenant').one('tenant1').one('policy');
                 var restObj = Restangular.one('restconf').one('config').one('policy:tenants')
                     .one('tenant').one(tenantId).one('policy');
 
                 return restObj.get().then(function (data) {
-                    // if (data.policy.contract) {
-                    //     self.setData(data.policy.contract);
                     self.setData(data.policy.contract);
                 });
             }
index d19c9156daced470f98afb9b1fb90d96643045d2..b4827603357e3e9aab6fd157745349284a585960 100644 (file)
@@ -6,10 +6,11 @@ define([
 
     angular.module('app.gbp').controller('ContractController', ContractController);
 
-    ContractController.$inject = ['$scope', 'TenantListService', 'TenantService', 'ContractService', 'ContractListService', '$stateParams'];
+    ContractController.$inject = ['$mdDialog', '$scope', 'TenantListService', 'TenantService', 'ContractService', 'ContractListService', '$stateParams'];
 
-    function ContractController($scope, TenantListService, TenantService, ContractService, ContractListService, $stateParams) {
+    function ContractController($mdDialog, $scope, TenantListService, TenantService, ContractService, ContractListService, $stateParams) {
         $scope.contracts = ContractListService.createList();
+        $scope.openContractDialog = openContractDialog;
         $scope.contractsTableQuery = {
             order: 'data.id',
             limit: 25,
@@ -17,25 +18,48 @@ define([
             options: [25, 50, 100],
             filter: '',
         };
+        $scope.getContractList = getContractList;
+        $scope.deleteContractDialog = deleteContractDialog;
 
-        getContracts();
+        getContractList();
 
-        /* if ($stateParams.contractId) {
-            $scope.contractId = $stateParams.contractId;
-            console.log('contract.ctrl.if.$scope.contractId', $scope.contractId);
-            $scope.contract.get($scope.contractId);
+        function getContractList() {
+            $scope.contracts.clearData();
+            $scope.contracts.get($scope.rootTenant.data.id);
         }
-        else {
-            console.log('contract.ctrl.else.$scope.contractId', $scope.contractId);
-            $scope.contract.get($scope.$parent.tenantId);
-        }*/
 
-        function getContracts() {
-            $scope.contracts.data = [];
-            $scope.contracts.get($scope.rootTenant.data.id);
+        function openContractDialog(contractData) {
+            $mdDialog.show({
+                clickOutsideToClose: true,
+                controller: 'AddContractController',
+                preserveScope: true,
+                templateUrl: 'src/app/gbp/contract/dialog-add-contract.tpl.html',
+                parent: angular.element(document.body),
+                scope: $scope,
+                locals: {
+                    contract: contractData,
+                },
+            });
         }
 
+        function deleteContractDialog(contractData) {
+            var confirm = $mdDialog.confirm()
+                .title('Delete contract')
+                .textContent('Do you want to delete contract ' + contractData.data.id + '?')
+                .ok('Delete')
+                .cancel('Cancel');
+
+            $mdDialog.show(confirm).then(function () {
+                contractData.deleteContract($scope.rootTenant.data.id,
+                    function () {
+                        $scope.getContractList();
+                    }
+                );
+            }, function () {
+
+            });
+        }
 
-        $scope.$on('ROOT_TENANT_CHANGED', getContracts);
+        $scope.$on('ROOT_TENANT_CHANGED', getContractList);
     }
 });
index 7827182fd37f76817cf64cafc50d70170e2e8455..4f7073dd5dabce55cdfa4f63286ebf7d26e6f58d 100644 (file)
@@ -19,6 +19,8 @@ define([], function () {
             /* methods */
             this.setData = setData;
             this.get = get;
+            this.put = put;
+            this.deleteContract = deleteContract;
 
             /* Implementation */
             /**
@@ -46,9 +48,6 @@ define([], function () {
             function get(id) {
                 var self = this;
 
-                // var restObj = Restangular.one('restconf').one('config').one('policy:tenants')
-                //             .one('tenant').one('tenant1').one('policy').one('contract').one(this.data.id || id);
-
                 var restObj = Restangular.one('restconf').one('config').one('policy:tenants')
                             .one('tenant').one(id).one('policy').one('contract').one(id);
 
@@ -56,6 +55,34 @@ define([], function () {
                     self.setData(data.contract[0]);
                 });
             }
+
+            function put(id, successCallback) {
+                var self = this;
+
+                var restObj = Restangular.one('restconf').one('config').one('policy:tenants').one('tenant')
+                    .one(id).one('policy').one('contract').one(self.data.id),
+                    dataObj = { contract: [self.data] };
+
+                return restObj.customPUT(dataObj).then(function (data) {
+                    successCallback(data);
+                }, function (res) {
+
+                });
+            }
+
+            function deleteContract(id, successCallback) {
+                var self = this;
+
+                var restObj = Restangular.one('restconf').one('config').one('policy:tenants').one('tenant')
+                    .one(id).one('policy').one('contract').one(self.data.id);
+
+                return restObj.remove().then(function (data) {
+                    successCallback(data);
+                }, function (res) {
+
+                });
+            }
+
         }
 
         /**
index fc6e317791f5e492974f1c0c20fd67cf652c1714..071990e5721446ea4905d9448236d4076f6f75f3 100644 (file)
@@ -1,4 +1,8 @@
 <section flex layout="column">
+    <div flex layout="row">
+        <md-button ng-click="openContractDialog()" class="md-primary">Add</md-button>
+        <md-button ng-click="getContractList()" class="md-primary">Reload</md-button>
+    </div>
     <md-table-container ng-if="contracts.data.length" ng-hide="contractId.length">
         <table md-table>
             <thead md-head md-order="contractsTableQuery.order">
                 <td md-cell>{{contract.data.parent}}</td>
                 <td md-cell>{{contract.data.description}}</td>
                 <td md-cell>
-                    <md-button class="md-icon-button" ng-click="edit(contract)">
+                    <md-button class="md-icon-button" ng-click="openContractDialog(contract)">
                         <md-icon>edit</md-icon>
                     </md-button>
-                    <md-button class="md-icon-button" ng-click="delete(contract)">
+                    <md-button class="md-icon-button" ng-click="deleteContractDialog(contract)">
                         <md-icon>delete</md-icon>
                     </md-button>
                 </td>
         <u>Quality object:</u><br />{{contract.data.quality}}
     </section>
 
-
-
-
-
 </section>
-
-
-
-
-
-
-
-
-<!-- <div class="md-menu-demo" ng-controller="PositionDemoCtrl as ctrl" ng-cloak style="min-height:350px;">
-  <div class="menu-demo-container" layout-align="start center" layout="column" >
-    <div layout-align="start center" layout="column" style="min-height:150px;" >
-      <h2 class="md-title">Position Mode Demos</h2>
-      <p>The <code>md-position-mode</code> attribute can be used to specify the positioning along the <code>x</code> and <code>y</code> axis.</p>
-      <hr/>
-      <h3 class="md-subhead">Target-Based Position Modes</h3>
-    </div>
-    <div class="menus"  layout-wrap layout="row" layout-fill layout-align="space-between center" style="min-height:200px;">
-      <div layout="column" flex="33" flex-sm="100" layout-align="center center">
-        <p>Target Mode Positioning (default)</p>
-        <md-menu>
-          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
-            <md-icon md-menu-origin md-svg-icon="call:business"></md-icon>
-          </md-button>
-          <md-menu-content width="6">
-            <md-menu-item ng-repeat="item in [1, 2, 3]">
-              <md-button ng-click="ctrl.announceClick($index)">
-                <md-icon md-menu-align-target md-svg-icon="call:no-sim"></md-icon>
-                Option {{item}}
-              </md-button>
-            </md-menu-item>
-          </md-menu-content>
-        </md-menu>
-      </div>
-      <div layout="column" flex-sm="100" flex="33" layout-align="center center">
-        <p>Target mode with <code>md-offset</code></p>
-        <md-menu md-offset="0 -5">
-          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
-            <md-icon md-menu-origin md-svg-icon="call:ring-volume"></md-icon>
-          </md-button>
-          <md-menu-content width="4">
-            <md-menu-item ng-repeat="item in [1, 2, 3]">
-              <md-button ng-click="ctrl.announceClick($index)"> <span md-menu-align-target>Option</span> {{item}} </md-button>
-            </md-menu-item>
-          </md-menu-content>
-        </md-menu>
-      </div>
-      <div layout="column" flex-sm="100" flex="33" layout-align="center center">
-        <p><code>md-position-mode="target-right target"</code></p>
-        <md-menu md-position-mode="target-right target" >
-          <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
-            <md-icon md-menu-origin md-svg-icon="call:portable-wifi-off"></md-icon>
-          </md-button>
-          <md-menu-content width="4" >
-            <md-menu-item ng-repeat="item in [1, 2, 3]">
-              <md-button ng-click="ctrl.announceClick($index)">
-                  <div layout="row">
-                    <p flex>Option {{item}}</p>
-                    <md-icon md-menu-align-target md-svg-icon="call:portable-wifi-off" style="margin: auto 3px auto 0;"></md-icon>
-                  </div>
-              </md-button>
-            </md-menu-item>
-          </md-menu-content>
-        </md-menu>
-      </div>
-    </div>
-    </div>
-  </div>
-</div> -->
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/contract/dialog-add-contract.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/contract/dialog-add-contract.tpl.html
new file mode 100644 (file)
index 0000000..8e84c1a
--- /dev/null
@@ -0,0 +1,50 @@
+<md-dialog ng-cloak class="gbpDialogWrapper">
+    <form name="contractForm">
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2>contract</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="contract.data.id" ng-required="true">
+                        <div ng-messages="contractForm.id.$error">
+                            <div ng-message="required">Required field</div>
+                        </div>
+                    </md-input-container>
+                    <md-input-container flex>
+                        <label>Parent</label>
+                        <input name="parent" ng-model="contract.data.parent" ng-pattern="/^[a-zA-Z]([a-zA-Z0-9\\-_.])*$/" ng-required="true">
+                        <div ng-messages="contractForm.parent.$error">
+                            <div ng-message="required">Required field.</div>
+                            <div ng-message="pattern">
+                                Invalid pattern.
+                                <md-tooltip md-direction="right" style="padding-left: 10px;">Value must match: ^[a-zA-Z]([a-zA-Z0-9\\-_.])*$</md-tooltip>
+                            </div>
+                        </div>
+                    </md-input-container>
+                </div>
+                <div layout="row">
+                    <md-input-container flex>
+                        <label>Description</label>
+                        <input name="description" ng-model="contract.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="contractForm.$invalid" class="md-primary">
+                Save
+            </md-button>
+        </md-dialog-actions>
+    </form>
+</md-dialog>