From 68439d35cc651005bcd67fa0bac6c39d4df8ba39 Mon Sep 17 00:00:00 2001 From: Dewey Hong Date: Fri, 25 Oct 2013 12:19:54 +0900 Subject: [PATCH 1/5] divide files according to the func. --- app/scripts/app.js | 59 +++--------------------------- app/scripts/controllers/main.js | 27 ++++++++++---- app/scripts/directives/ng-excel.js | 37 +++++++++++++++++++ 3 files changed, 63 insertions(+), 60 deletions(-) create mode 100644 app/scripts/directives/ng-excel.js diff --git a/app/scripts/app.js b/app/scripts/app.js index f31b903..8602696 100644 --- a/app/scripts/app.js +++ b/app/scripts/app.js @@ -1,56 +1,9 @@ 'use strict'; -angular.module('ngGridApp', ['ngGrid']) - .controller('MainCtrl', function($scope){ - $scope.cellValue; - var checkboxCellTemplate='
'; - $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: "
", - 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); - } - }; - }); +angular.module('ngGridApp', ['ngGrid']) + .constant('config', config); + \ No newline at end of file diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js index 6c0bd25..72794ad 100644 --- a/app/scripts/controllers/main.js +++ b/app/scripts/controllers/main.js @@ -1,10 +1,23 @@ 'use strict'; angular.module('ngGridApp') - .controller('MainCtrl', function ($scope) { - $scope.awesomeThings = [ - 'HTML5 Boilerplate', - 'AngularJS', - 'Karma' - ]; - }); + .controller('MainCtrl', function($scope){ + console.log('-------------'); + $scope.cellValue; + var checkboxCellTemplate='
'; + $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} + ]; + + $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}); + } + }); diff --git a/app/scripts/directives/ng-excel.js b/app/scripts/directives/ng-excel.js new file mode 100644 index 0000000..4137830 --- /dev/null +++ b/app/scripts/directives/ng-excel.js @@ -0,0 +1,37 @@ +'use strict'; + +angular.module('ngGridApp') + .directive('ngExcel', function($compile){ + return { + template: "
", + 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); + } + }; + }); \ No newline at end of file From 08898f8d53aac7b474fdf742277484c2d47d0fb1 Mon Sep 17 00:00:00 2001 From: Dewey Hong Date: Fri, 25 Oct 2013 12:21:39 +0900 Subject: [PATCH 2/5] . --- app/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/index.html b/app/index.html index 93598a2..ef8d0af 100644 --- a/app/index.html +++ b/app/index.html @@ -68,6 +68,8 @@ + + From 719c3511b9cba63f24bf7c3a00580ad11ef78733 Mon Sep 17 00:00:00 2001 From: Dewey Hong Date: Fri, 25 Oct 2013 12:28:53 +0900 Subject: [PATCH 3/5] make module to variable --- app/scripts/app.js | 5 +++-- app/scripts/controllers/main.js | 3 +-- app/scripts/directives/ng-excel.js | 3 +-- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/app/scripts/app.js b/app/scripts/app.js index 8602696..935e6e0 100644 --- a/app/scripts/app.js +++ b/app/scripts/app.js @@ -4,6 +4,7 @@ var config = { development: true }; -angular.module('ngGridApp', ['ngGrid']) - .constant('config', config); +var app = angular.module('ngGridApp', ['ngGrid']); + +app.constant('config', config); \ No newline at end of file diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js index 72794ad..00853ef 100644 --- a/app/scripts/controllers/main.js +++ b/app/scripts/controllers/main.js @@ -1,7 +1,6 @@ 'use strict'; -angular.module('ngGridApp') - .controller('MainCtrl', function($scope){ +app.controller('MainCtrl', function($scope){ console.log('-------------'); $scope.cellValue; var checkboxCellTemplate='
'; diff --git a/app/scripts/directives/ng-excel.js b/app/scripts/directives/ng-excel.js index 4137830..6fbe95b 100644 --- a/app/scripts/directives/ng-excel.js +++ b/app/scripts/directives/ng-excel.js @@ -1,7 +1,6 @@ 'use strict'; -angular.module('ngGridApp') - .directive('ngExcel', function($compile){ +app.directive('ngExcel', function($compile){ return { template: "
", restrict : "EA", From 728959d0e0644e914a592b2ab28321b6a6e3d3de Mon Sep 17 00:00:00 2001 From: Dewey Hong Date: Sat, 9 Nov 2013 16:59:12 +0900 Subject: [PATCH 4/5] 1st revise --- app/index.html | 4 +- app/scripts/controllers/main.js | 10 +- app/scripts/directives/ng-excel.js | 214 +++++++++++++++++++++++++---- 3 files changed, 198 insertions(+), 30 deletions(-) diff --git a/app/index.html b/app/index.html index ef8d0af..ed294f9 100644 --- a/app/index.html +++ b/app/index.html @@ -73,7 +73,7 @@ -
+
@@ -96,7 +96,7 @@
- +
diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js index 00853ef..0e3d53a 100644 --- a/app/scripts/controllers/main.js +++ b/app/scripts/controllers/main.js @@ -4,7 +4,7 @@ app.controller('MainCtrl', function($scope){ console.log('-------------'); $scope.cellValue; var checkboxCellTemplate='
'; - $scope.columnDefs = [ + var columnDefs = [ {field:'CHK', displayName:'chk', width: 50 , cellTemplate:checkboxCellTemplate, sortable:false, pinned:false, enableCellEdit: false }, @@ -16,7 +16,15 @@ app.controller('MainCtrl', function($scope){ {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); + }); diff --git a/app/scripts/directives/ng-excel.js b/app/scripts/directives/ng-excel.js index 6fbe95b..801e424 100644 --- a/app/scripts/directives/ng-excel.js +++ b/app/scripts/directives/ng-excel.js @@ -1,36 +1,196 @@ 'use strict'; -app.directive('ngExcel', function($compile){ - return { - template: "
", - restrict : "EA", - controller : function($scope){ - $scope.gridOptions = { - data: 'ngExcelData', +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 "
"; + }; + + 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', + 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); + + 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; + } } - }; - }); \ No newline at end of file + } + + 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 + }; +}); \ No newline at end of file From ec7014a31fadcdfd520b04a36fc0d2a88523071b Mon Sep 17 00:00:00 2001 From: Dewey Hong Date: Sat, 9 Nov 2013 17:12:00 +0900 Subject: [PATCH 5/5] Update README.md --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 0389033..44f6f77 100644 --- a/README.md +++ b/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)