Directive type ngExcel with ng-grid

README.md

@@ -1,2 +1,12 @@
 ngExcel
 =======
+
+I changed from service type to directive type.
+
+You can see the demo site like below.
+
+http://sheepgrid.herokuapp.com/multi.html
+
+cf. This demo includes socket.io integration.
+
+o to-do : we need to extract the service of grid (such as CRUD function)

app/index.html

@@ -68,10 +68,12 @@
 
         <!-- build:js({.tmp,app}) scripts/scripts.js -->
         <script src="scripts/app.js"></script>
+        <script src="scripts/controllers/main.js"></script>
+        <script src="scripts/directives/ng-excel.js"></script>
 	    <script src="http://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.7/ng-grid.js"></script>
         <!-- endbuild -->
 
-    <div ng-controller="MainCtrl">
+    <div ng-controller="MainCtrl" data-ng-init="init('%some_backend_value%')">
         <div>
             <div class="form-horizontal">
                 <div class="control-group">
@@ -94,7 +96,7 @@
             </div>
         </div>
 
-        <ng-excel excel-data="myData" rows="100" cols="100" width="800" height="200"></ng-excel>
+		<ng-excel id="myGrid" data="ngExcelData" rows="100" cols="100" width="100%" height="200"></ng-excel>
 
     </div>
 </body>

app/scripts/app.js

@@ -1,56 +1,10 @@
 'use strict';
 
-angular.module('ngGridApp', ['ngGrid'])
-	.controller('MainCtrl', function($scope){
-	    $scope.cellValue;
-	    var checkboxCellTemplate='<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div>';
-		$scope.columnDefs = [
-			        {field:'CHK', displayName:'chk', width: 50 , 
-			            cellTemplate:checkboxCellTemplate,
-			            sortable:false, pinned:false, enableCellEdit: false },
-			        {field:'name', displayName:'name', width: 100, enableCellEdit: true},
-			        {field:'contact', displayName:'contact', width: 300, enableCellEdit: true}
-			        ];
+var config = {
+	development: true
+};
 
-		$scope.ngExcelData = [
-						{CHK: "1", name: "Moroni", contact: '010-2241-9445'},
-	                    {CHK: "0", name: "Tiancum", contact: '010-2241-9446'}
-	                    ];
-		$scope.addContact = function(){
-			$scope.ngExcelData.push({name:$scope.newName, contact:$scope.newContact});
-		}
-	})
-	.directive('ngExcel', function($compile){
-		return {
-			template: "<div ng-grid=\"gridOptions\" ng-style=\"myprop()\"></div>",
-			restrict : "EA",
-			controller : function($scope){
-				$scope.gridOptions = {
-			        data: 'ngExcelData',
-			        multiSelect: false,  
-			        enableCellSelection: true,
-			        enableRowSelection: true,
-			        enableSorting: true,
-			        columnDefs: 'columnDefs',
-			        selectedItems: []
-			    };
-			},
-			link : function(scope, element, attr, ctrl){
-				scope.gridOptions.attr = attr;
-				scope.$watch('ngExcelData', function(newData){
-					scope.myprop = function() {
-						var attr = scope.gridOptions.attr;
-						if(attr) {
-				            return {
-				                width: attr["width"] + 'px',
-				                height: attr["height"] + 'px'
-				            };
-						} else {
-							return {};
-						}
-			        };
-					console.log(newData);
-				}, true);
-			}
-		};
-	});
+var app = angular.module('ngGridApp', ['ngGrid']);
+
+app.constant('config', config);
+

app/scripts/controllers/main.js

@@ -1,10 +1,30 @@
 'use strict';
 
-angular.module('ngGridApp')
-  .controller('MainCtrl', function ($scope) {
-    $scope.awesomeThings = [
-      'HTML5 Boilerplate',
-      'AngularJS',
-      'Karma'
-    ];
-  });
+app.controller('MainCtrl', function($scope){
+	  console.log('-------------');
+	    $scope.cellValue;
+	    var checkboxCellTemplate='<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div>';
+	    var columnDefs = [
+			        {field:'CHK', displayName:'chk', width: 50 , 
+			            cellTemplate:checkboxCellTemplate,
+			            sortable:false, pinned:false, enableCellEdit: false },
+			        {field:'name', displayName:'name', width: 100, enableCellEdit: true},
+			        {field:'contact', displayName:'contact', width: 300, enableCellEdit: true}
+			        ];
+
+		$scope.ngExcelData = [
+						{CHK: "1", name: "Moroni", contact: '010-2241-9445'},
+	                    {CHK: "0", name: "Tiancum", contact: '010-2241-9446'}
+	                    ];
+
+		$scope.addContact = function(){
+			$scope.ngExcelData.push({name:$scope.newName, contact:$scope.newContact});
+		}
+
+		$scope.$watch('ngExcelData', function(){
+			debugger;
+		    $scope.gridInit(null, columnDefs);  // null -> service class 구현 해야 
+//		    $scope.getDatas();s
+		}, true);
+
+	});

app/scripts/directives/ng-excel.js

@@ -0,0 +1,196 @@
+'use strict';
+
+app.directive('ngExcel', function($compile, $timeout, config){
+
+	var _service;
+	var _grid;
+	var _dataset;	// ex) uip_center
+	var _datasets;	// ex) uip_centers
+	var _input;		// params
+
+	var getTemplate = function(grid) {
+		return "<div ng-grid=\"" + grid + "\" ng-style=\"myprop()\"></div>";
+	};
+
+	var linker = function(scope, element, attr) {
+		_grid = attr['id'];
+		_dataset = attr['data'];
+
+		scope.gridInit = function(service, columnDefs, input) {
+			_service = service;
+			_input = input;
+			_datasets = _dataset + 's';
+
+			scope[_grid] = {
+			        data: _dataset,
+			        multiSelect: false,  
+			        enableCellSelection: true,
+			        enableCellEditOnFocus: true,
+			        enableRowSelection: true,
+			        enablePinning: true,
+			        enableSorting: true,
+			        columnDefs: columnDefs,
+			        selectedItems: []
+			    };
+
+			element.html(getTemplate(_grid)).show();
+//			element.bind('click', function() {
+//				eval('scope.' + attr["type"] + attr["data"] + '()');
+//				return;
+//			});
+			$compile(element.contents())(scope);
+
+			scope[_grid].attr = attr;
+		};		
+
+		scope.updateEntity = function(column, row, cellValue) {
+	        var data = scope[_dataset][row.rowIndex];
+	        var status = scope[_dataset][row.rowIndex].status;
+	        if(status && status == 'I') {
+	        } else {
+	            if(data[column.colDef.field] != cellValue) {
+	                scope[_dataset][row.rowIndex].status = 'U';
+	            }
+	        }
+	        row.entity[column.field] = cellValue;
+	    };
+
+		scope.$watch(_dataset, function(newData){
+			scope.myprop = function() {
+				var attr = scope[_grid].attr;
+				if(attr) {
+		            return {
+		                width: attr["width"] + 'px',
+		                height: attr["height"] + 'px'
+		            };
+				} else {
+					return {};
+				}
+	        };
+		}, true);
+
+		scope.getDatas = function(input) {
+	    	var params = {};
+	    	if(input) params = input;
+	    	_service.get(params, function(data) {
+	            for (var i = 0; i < data[_datasets].length; i++) {
+	                data[_datasets][i].status = 'R';
+	            };
+	            scope[_dataset] = data[_datasets];
+	        });
+	    };
+
+	    scope.retrieveData = function (input) {
+	    	if(_input) input = _input;
+	    	scope.getDatas(input);
+	    };
+
+	    scope.insertData = function () {
+	        var data = scope[_grid].columnDefs;
+	        var newData = getAddRow(data);
+	        if(_input) newData = mergeData(_input, newData);
+	        newData.status = 'I';
+	        scope[_dataset].unshift(newData);
+
+	        var selectRow = function() {
+	            scope[_grid].selectRow(0, true);
+	            //$($($(".ngCellText.col3.colt1")[1]).parent()).parent().focus();
+	        }
+	        $timeout(selectRow, 500);
+	    };
+
+	    scope.deleteData = function () {
+	        var id = scope[_grid].selectedItems[0].id;
+	        for (var i = 0; i < scope[_dataset].length; i++) {
+	            if(scope[_dataset][i].id == id) {
+	                if(scope[_dataset][i].status == 'I') {
+	                    scope[_dataset].splice(i, 1);
+	                } else {
+	                    scope[_dataset][i].status = 'D';
+	                }
+	            }
+	        };
+	    };
+
+	    scope.initData = function () {
+	    	if(!scope[_grid].selectedItems[0]) return;
+	        var id = scope[_grid].selectedItems[0].id;
+	        for (var i = 0; i < scope[_dataset].length; i++) {
+	            if(scope[_dataset][i].id == id) {
+	                for (var j = 0; j < Object.keys(scope[_dataset][i]).length; j++) {
+	                    scope[_dataset][i][Object.keys(scope[_dataset][i])[j]] = null;
+	                };
+	                break;
+	            }
+	        };
+	    };
+
+	    scope.saveData = function () {
+	        var dataset = scope[_dataset];
+	        for (var i = 0; i < dataset.length; i++) {
+	            var status = dataset[i].status;
+	            var currow = i;
+	            delete dataset[i].status;
+	            var params = {};
+	            if(status == 'I') {
+	                params[_dataset] = dataset[i];
+	                if(config.server == 'spring') params = dataset[i]; // java
+	                _service.save(params, function (data) {
+	                    scope[_dataset][0].id = data[_dataset].id;
+	                })
+	            } else if(status == 'U') {
+	            	params[_dataset] = dataset[i];
+	            	params.id = dataset[i].id;
+	                if(config.server == 'spring') params = params[_dataset]; // java
+	                _service.update(params, function (data) {
+	                    scope[_dataset][currow] = data[_dataset];
+	                })
+	            } else if(status == 'D') {
+	            	scope.uip_center.curid = dataset[i].id;
+            		_service.delete({"id" : dataset[i].id}, function (data) {
+            			lookupDs(scope.uip_center.curid, function (row){
+							scope[_dataset].splice(row, 1);
+						});
+                	})
+	            }
+	            scope[_dataset][i].status = 'R';
+	        };
+	    };
+
+		var lookupDs = function ( id, callback ) {
+	    	for (var i = 0; i < scope[_dataset].length; i++) {
+	    		if (scope[_dataset][i].id == (id + '')) {
+					callback(i);
+					break;
+				}
+			}
+		}
+
+		var getAddRow = function(source) {
+	        var data = angular.copy(source);
+	        var target = {};
+	        for (var i = 0; i < data.length; i++) {
+	            if(data[i].field 
+	            	&& data[i].field != 'link'
+	            	&& data[i].field != 'CHK') {
+	                target[data[i].field] = null;
+	            }
+	        };
+	        return target;
+	    };		
+
+	    var mergeData = function(source, target) {
+	        for (var j = 0; j < Object.keys(source).length; j++) {
+                target[Object.keys(source)[j]] = source[Object.keys(source)[j]];
+            };
+	        return target;
+	    };
+
+	};
+
+	return {
+		restrict : 'EA',
+		link : linker,
+		replace : true
+	};
+});