Container: Introduce index table and crud

Change-Id: I79727221c3c39cc54a10be479b5921306d8aaa6f
Signed-off-by: Endre Karlson <endre.karlson@gmail.com>

diff --git a/bower.json b/bower.json
index cbf1ea4697ce382539020c4de1e8cfe99837126b..05828e9b2c0a162b1cbb5adecafd91e0fcea85c1 100644 (file)
--- a/bower.json
+++ b/bower.json
@@ -17,5 +17,7 @@
     "angular-ui-router": "http://cloudistic.me/angular-ui-router.min.js",
     "d3": "~3.3.2"
   },
-  "dependencies": {}
+  "dependencies": {
+    "ng-grid": "~2.0.7"
+  }
 }

diff --git a/build.config.js b/build.config.js
index 487e13c702ce3f29dcf84f59fc30e0bb59b7af3c..1a97fe27f8398f3df255ccfe89a803e4e2a15047 100644 (file)
--- a/build.config.js
+++ b/build.config.js
@@ -74,12 +74,14 @@ module.exports = {
       'vendor/angular-route/index.js',
       'vendor/angular-ui-router/index.js',
       'vendor/angular-ui-select2/index.js',
+      'vendor/ng-grid/ng-grid-2.0.7.min.js',
       'vendor/restangular/dist/restangular.min.js'
     ],
     css: [
       'vendor/bootstrap/dist/css/bootstrap.min.css',
       'vendor/select2/select2.css',
-      'vendor/select2-bootstrap-css/select2-bootstrap.css'
+      'vendor/select2-bootstrap-css/select2-bootstrap.css',
+      'vendor/ng-grid/ng-grid.min.css'
     ],
     assets: [
       'vendor/**/*.gif',

diff --git a/src/app/app.js b/src/app/app.js
index 93b8571c64f5b6426d1d2dcc10971a199fa5f138..f69c7f1008263a5f1fe4fd8abd47cfef2c85ffb7 100644 (file)
--- a/src/app/app.js
+++ b/src/app/app.js
@@ -8,6 +8,7 @@ var dlux = angular.module('dlux', [
   'restangular',
   'ui.router',
   'ui.select2',
+  'ngGrid',
   'dlux.nbapi',
   'dlux.auth',
   'dlux.navigation',

diff --git a/src/app/container/container.js b/src/app/container/container.js
index 726e480f100ed73b02c0402303665156a054892f..92021aabd4d7453e26f8e756f4cea737964f2249 100644 (file)
--- a/src/app/container/container.js
+++ b/src/app/container/container.js
@@ -9,7 +9,42 @@ angular.module('dlux.container', [])
 
   $stateProvider.state('container.index', {
     url: '/index',
-    templateUrl: 'container/index.tpl.html'
+    views: {
+      '': {
+        templateUrl: 'container/index.tpl.html',
+        controller: function ($scope, ContainerSvc) {
+          $scope.svc = ContainerSvc;
+
+          $scope.gridOptions = {
+            data: 'data["container-config"]',
+            selectedItems: [],
+            enableRowSelection: true,
+            showSelectionCheckbox: true,
+            selectWithCheckboxOnly: true,
+            columnDefs: [
+              {
+                field: 'container', displayName: 'Name',
+              },
+              {
+                field: 'nodeConnectors.length', displayName: 'Connector Count',
+              },
+              {
+                displayName: 'Options', cellTemplate: '<div><a ng-click="console.log(row)"><span class="glyphicon glyphicon-remove"></span> Delete</a></div>'
+              }
+            ]
+          }
+
+          $scope.$watch(
+            function () {
+              return ContainerSvc.data;
+            },
+            function (data) {
+              $scope.data = data;
+            }
+          );
+        }
+      }
+    }
   });
 
   $stateProvider.state('container.detail', {
@@ -18,7 +53,11 @@ angular.module('dlux.container', [])
       '': {
         templateUrl: 'container/detail.tpl.html',
         controller: function ($scope, ContainerSvc) {
-          $scope.data = ContainerSvc.containerUrl($scope.$stateParams.container).get();
+          ContainerSvc.containerUrl($scope.$stateParams.container).get().then(
+            function (data) {
+              $scope.data = data;
+            }
+          );
         }
       }
     }

diff --git a/src/app/container/index.tpl.html b/src/app/container/index.tpl.html
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..78b8d7313ba44ee06958506f24123c1993a7fb00 100644 (file)
--- a/src/app/container/index.tpl.html
+++ b/src/app/container/index.tpl.html
@@ -0,0 +1,6 @@
+<div class="col-md-6">
+  <ctrl-reload service="svc"></ctrl-reload>
+  <ctrl-delete service="svc"></ctrl-delete>
+  <count-selected data="gridOptions.selectedItems"></count-selected>
+  <div style='height: 300px; width: 100%;' ng-grid="gridOptions"></div>
+</div>

diff --git a/src/common/api-services.js b/src/common/api-services.js
index 61b8f9dcf9d839149ac0dbf027681361150064e4..090479ac2408b8cbb98c1b6ae6c7f7739d2730f6 100644 (file)
--- a/src/common/api-services.js
+++ b/src/common/api-services.js
@@ -57,6 +57,11 @@ angular.module('dlux.nbapi', [])
     return svc.base().one('container', container);
   };
 
+  svc.delete = function (container) {
+    container = angular.isObject(container) ? container.container : container
+    return svc.containerUrl(container).remove()
+  }
+
   svc.getAll = function() {
     svc.containersUrl().getList().then(function (data) {
       svc.data = data;

diff --git a/src/common/directives/navigation.js b/src/common/directives/navigation.js
index 1efcfcd2d4e4a4c705e841c29e8f3ab85fcb8175..998a2dd43cb5b7e2737aa328a05a59918875fcf9 100644 (file)
--- a/src/common/directives/navigation.js
+++ b/src/common/directives/navigation.js
@@ -170,4 +170,61 @@ angular.module('dlux.directives.navigation', [])
       }
     }
   };
-});
+})
+
+
+.directive('showSelected', function() {
+  // Runs during compile
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      'data': '='
+    },
+    template: '<div>{{data.length}}</div>',
+  };
+})
+
+.directive('ctrlReload', function() {
+  // Runs during compile
+  return {
+    replace: true,
+    restrict: 'E',
+    scope: {
+      svc: '=service'
+    },
+    template: '<button class="btn btn-primary btn-xs" ng-click="svc.getAll()"><i class="glyphicon glyphicon-refresh"></i></button>',
+    link: function ($scope, iElm, iAttrs, controller) {
+      $scope.$on('evt:refresh', function() {
+        $scope.svc.getAll();
+      })
+    }
+  };
+})
+
+.directive('ctrlDelete', function($rootScope) {
+  // Runs during compile
+  return {
+    replace: true,
+    restrict: 'E',
+    template: '<button class="btn btn-danger btn-xs" ng-click="deleteSelected()" ng-disabled="gridOptions.selectedItems.length == 0"><i class="glyphicon glyphicon-remove"></i></button>',
+    link: function($scope, iElm, iAttrs, controller) {
+      var i = 0;
+      var selected = $scope.gridOptions.selectedItems;
+
+      // Fire up a evt:refresh event once done.
+      $scope.deleteSelected = function () {
+        angular.forEach(selected, function(value, key) {
+          $scope.svc.delete(value).then(
+            function () {
+              i++;
+              if (i == selected.length) {
+                $rootScope.$broadcast('evt:refresh')
+              }
+            }
+          )
+        });
+      }
+    }
+  };
+})
\ No newline at end of file