From ad1f310ff3b3cd73784449c26027fb9a9fdb5de8 Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Mon, 28 Dec 2015 18:47:43 +0300 Subject: [PATCH 001/119] removing uib- references --- index.html | 12 ++++++------ src/css/variables.scss | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 4822e91..488cd6d 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@

Angular Data Grid

class="form-control" is-open="dateFromOpened" ng-click="dateFromOpened = true" - uib-datepicker-popup="shortDate" + datepicker-popup="shortDate" filter-by="placed" filter-type="dateFrom" ng-model="dateFrom" @@ -61,7 +61,7 @@

Angular Data Grid

is-open="dateToOpened" ng-click="dateToOpened = true" min-date="dateFrom" - uib-datepicker-popup="shortDate" + datepicker-popup="shortDate" filter-by="placed" filter-type="dateTo" ng-model="dateTo" @@ -88,14 +88,14 @@

Angular Data Grid

- + items-per-page="paginationOptions.itemsPerPage"> @@ -144,14 +144,14 @@

Angular Data Grid

- + items-per-page="paginationOptions.itemsPerPage">
diff --git a/src/css/variables.scss b/src/css/variables.scss index 627e9e5..0ed9536 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -1,3 +1,3 @@ -$activeBg = rgb(16,108,200); -$activeText = #fff; -$textColor = #444; \ No newline at end of file +$activeBg: rgb(16,108,200); +$activeText: #fff; +$textColor: #444; \ No newline at end of file From 11ef4e93e6bd0a0a476a9a5c399d4c5185ea6cda Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Mon, 28 Dec 2015 19:36:43 +0300 Subject: [PATCH 002/119] correcting readme file --- README.md | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index b47f7eb..da49605 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,14 @@ #Angular Data Grid - Light and flexible Data Grid for AngularJS applications. -``` -var s = "JavaScript syntax highlighting"; -alert(s); -``` - -You can use ```data-trigger``` Data Grid module to easily display data in grids with built-in sorting, outer filters and url-synchronization. To use it, you must add grid-data directive to element and pass 2 required parameters grid-options and grid-actions. +You can use Data Grid module to easily display data in grids with built-in sorting, outer filters and url-synchronization. To use it, you must add grid-data directive to element and pass 2 required parameters ```grid-options``` and ```grid-actions```. -grid-options : Name of object in your controller with start options for grid. You must create this object with at least 1 required parameter - data +```grid-options``` : Name of object in your controller with start options for grid. You must create this object with at least 1 required parameter - data. -grid-actions: Name of object in your controller with functions for updating grid. You can can just pass string or create empty object in controller. Use this object for calling methods of directive: sort, filter, refresh. +```grid-actions```: Name of object in your controller with functions for updating grid. You can can just pass string or create empty object in controller. Use this object for calling methods of directive: sort, filter, refresh. -Inside the grid-data directive you can use grid-pagination directive. It's just wrapper of angular-ui pagination directive. You can pass any parameters from pagination directive. Also you can use grid-item-per-page directive and pass into it array of value (f.e. "10, 25, 50"). If you need get size of current displayed items you can use filtered variable. +Inside the ```grid-data``` directive you can use grid-pagination directive. It's just wrapper of angular-ui pagination directive. You can pass any parameters from pagination directive. Also you can use grid-item-per-page directive and pass into it array of value (f.e. "10, 25, 50"). If you need get size of current displayed items you can use filtered variable. ##Sorting: You can use the sortable directive to have a built in sort feature. You add the attribute sortable to your table headers. This will specify the property name you want to sort by. Also if you add class sortable to your element, sort arrows will be displayed for acs/decs sort directions. From cc71080f7d2025c9775f880968a144765f2c3fc2 Mon Sep 17 00:00:00 2001 From: Eugene Draitsev Date: Tue, 29 Dec 2015 14:27:45 +0300 Subject: [PATCH 003/119] Promises bug fix. --- dist/dataGrid.js | 25 +++++++++++++++---------- dist/dataGrid.min.js | 2 +- index.html | 2 +- src/js/dataGrid.js | 25 +++++++++++++++---------- 4 files changed, 32 insertions(+), 22 deletions(-) diff --git a/dist/dataGrid.js b/dist/dataGrid.js index 69d53c7..937aa9a 100644 --- a/dist/dataGrid.js +++ b/dist/dataGrid.js @@ -34,6 +34,7 @@ angular $scope.$watch('_gridOptions.data', function (newValue) { if (newValue && newValue.length) { + $scope.filtered = angular.copy($scope._gridOptions.data); if ($scope.urlSync) { parseUrl($location.path()); } else { @@ -61,7 +62,9 @@ angular clearTimeout($scope.getDataTimeout); $scope.getDataTimeout = setTimeout(getData, $scope.getDataDelay); } - parseUrl($location.path()); + if ($scope.filtered) { + parseUrl($location.path()); + } } }); @@ -310,15 +313,17 @@ angular function generateOptions(values, predicate) { var array = []; - values.forEach(function (item) { - if (!~array.indexOf(item[predicate])) { - array.push(item[predicate]); - } - }); - - return array.map(function (option) { - return {text: option, value: option}; - }); + if (values) { + values.forEach(function (item) { + if (!~array.indexOf(item[predicate])) { + array.push(item[predicate]); + } + }); + + return array.map(function (option) { + return {text: option, value: option}; + }); + } } } } diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js index 2c3351e..d7b72d9 100644 --- a/dist/dataGrid.min.js +++ b/dist/dataGrid.min.js @@ -1 +1 @@ -function deepFind(t,e){var i,n=e.split("."),r=t;for(i=0;it.filtered.length?t.paginationOptions.currentPage=1:t.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");t.sortOptions.predicate=decodeURIComponent(a[0]),t.sortOptions.direction=decodeURIComponent(a[1])}t.serverPagination||l()}function s(){var e=n.path().slice(1);t._gridOptions.getData("?"+e,function(e,i){t.filtered=e,t.paginationOptions.totalItems=i})}function l(){t.filtered=angular.copy(t._gridOptions.data),c(),t.filtered=i("orderBy")(t.filtered,t.sortOptions.predicate,"desc"===t.sortOptions.direction),t.paginationOptions.totalItems=t.filtered.length}function c(){t.filters.forEach(function(e){var i=e.filterBy,n=e.model,a=t[n],o=e.filterType;if(t.customFilters[n])t.filtered=t.customFilters[n](t.filtered,a,i);else if(a&&o){var s=r.getFilterByType(o);s&&(t.filtered=s(t.filtered,a,i))}})}t._gridOptions=deepFind(t,e.attr("grid-options")),t._gridActions=deepFind(t,e.attr("grid-actions")),t.serverPagination="true"===e.attr("server-pagination"),t.getDataDelay=e.attr("get-delay")||350,t._gridActions||(t.$parent[e.attr("grid-actions")]={},t._gridActions=t.$parent[e.attr("grid-actions")]),t.filtered=angular.copy(t._gridOptions.data),t.paginationOptions=t._gridOptions.pagination?angular.copy(t._gridOptions.pagination):{},t.defaultsPaginationOptions={itemsPerPage:t.paginationOptions.itemsPerPage||10,currentPage:t.paginationOptions.currentPage||1},t.paginationOptions=angular.copy(t.defaultsPaginationOptions),t.sortOptions=t._gridOptions.sort?angular.copy(t._gridOptions.sort):{},t.customFilters=t._gridOptions.customFilters?angular.copy(t._gridOptions.customFilters):{},t.urlSync=t._gridOptions.urlSync,t.$watch("_gridOptions.data",function(e){e&&e.length&&(t.urlSync?o(n.path()):l())}),t.sort=function(e){var i=t.sortOptions.predicate===e&&"desc"===t.sortOptions.direction?"asc":"desc";t.sortOptions.predicate=e,t.sortOptions.direction=i,t.paginationOptions.currentPage=1,t.reloadGrid()},t.filter=function(){t.paginationOptions.currentPage=1,t.reloadGrid()},t.$on("$locationChangeSuccess",function(){(t.urlSync||t.serverPagination)&&(t.serverPagination&&(clearTimeout(t.getDataTimeout),t.getDataTimeout=setTimeout(s,t.getDataDelay)),o(n.path()))}),t.reloadGrid=function(){t.urlSync||t.serverPagination?a():l()},t._gridActions.refresh=t.reloadGrid,t._gridActions.filter=t.filter,t._gridActions.sort=t.sort}]).directive("gridData",["$compile","$animate",function(t,e){return{restrict:"EA",transclude:!0,replace:!0,controller:"gridController",link:function(i,n,r,a,o){function s(t,e){var i=[];return t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})}var l=[],c=[],g=[],p=i.$new(),d=n.parent(),u=r.id,f="true"===r.serverPagination;o(i,function(t){e.enter(t,n)}),angular.forEach(angular.element(d[0].querySelectorAll("[sortable]")),function(e){var i=angular.element(e),n=i.attr("sortable");l.push(i),i.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),i.attr("ng-click","sort('"+n+"')"),t(i)(p)}),angular.forEach(angular.element(document.querySelectorAll("[filter-by]")),function(e){var r=angular.element(e),a=d.find(r).length>0,o=r.attr("filter-by"),l=r.attr("filter-type")||"",g=r.attr("ng-model"),p=r.attr("disable-url");if(!u||!r.attr("grid-id")||u==r.attr("grid-id")){if("select"===l){var f=s(deepFind(i,n.attr("grid-options")+".data"),o);i[g+"Options"]=f}!~l.indexOf("date")||r.attr("ng-focus")||r.attr("ng-blur")||(r.attr("ng-focus","filter('{"+g+" : this."+g+"}')"),r.attr("ng-blur","filter('{"+g+" : this."+g+"}')"),t(r)(i)),g||(g=o,r.attr("ng-model",o),r.attr("ng-change","filter()"),t(r)(i)),c.push({model:g,isInScope:a,filterBy:o,filterType:l,disableUrl:p})}}),angular.forEach(angular.element(d[0].querySelectorAll("[grid-item]")),function(e){var i=angular.element(e);g.push(i),f?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage"),t(i)(p)}),i.sorting=l,i.rows=g,i.filters=c}}}]).directive("gridItemPerPage",["$compile",function(t){return{replace:!0,template:'
    ',link:function(e,i,n){if(n.gridItemPerPage){var r=n.gridItemPerPage.replace(/ /g,"").split(",");r.forEach(function(n){if(Number(n)){n=Number(n);var r=angular.element("
  • "),a=angular.element(""+n+"");a.attr("ng-click","paginationOptions.itemsPerPage = "+n+"; reloadGrid()"),r.attr("ng-class",'{"active" : paginationOptions.itemsPerPage == '+n+"}"),r.append(a),i.append(r),i.append(" "),t(r)(e)}})}}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~t[i].toLowerCase().indexOf(e.toLowerCase()):!0})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function n(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(r){switch(r){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return n;default:return null}}}}); \ No newline at end of file +function deepFind(t,e){var i,n=e.split("."),r=t;for(i=0;it.filtered.length?t.paginationOptions.currentPage=1:t.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");t.sortOptions.predicate=decodeURIComponent(a[0]),t.sortOptions.direction=decodeURIComponent(a[1])}t.serverPagination||l()}function s(){var e=n.path().slice(1);t._gridOptions.getData("?"+e,function(e,i){t.filtered=e,t.paginationOptions.totalItems=i})}function l(){t.filtered=angular.copy(t._gridOptions.data),g(),t.filtered=i("orderBy")(t.filtered,t.sortOptions.predicate,"desc"===t.sortOptions.direction),t.paginationOptions.totalItems=t.filtered.length}function g(){t.filters.forEach(function(e){var i=e.filterBy,n=e.model,a=t[n],o=e.filterType;if(t.customFilters[n])t.filtered=t.customFilters[n](t.filtered,a,i);else if(a&&o){var s=r.getFilterByType(o);s&&(t.filtered=s(t.filtered,a,i))}})}t._gridOptions=deepFind(t,e.attr("grid-options")),t._gridActions=deepFind(t,e.attr("grid-actions")),t.serverPagination="true"===e.attr("server-pagination"),t.getDataDelay=e.attr("get-delay")||350,t._gridActions||(t.$parent[e.attr("grid-actions")]={},t._gridActions=t.$parent[e.attr("grid-actions")]),t.filtered=angular.copy(t._gridOptions.data),t.paginationOptions=t._gridOptions.pagination?angular.copy(t._gridOptions.pagination):{},t.defaultsPaginationOptions={itemsPerPage:t.paginationOptions.itemsPerPage||10,currentPage:t.paginationOptions.currentPage||1},t.paginationOptions=angular.copy(t.defaultsPaginationOptions),t.sortOptions=t._gridOptions.sort?angular.copy(t._gridOptions.sort):{},t.customFilters=t._gridOptions.customFilters?angular.copy(t._gridOptions.customFilters):{},t.urlSync=t._gridOptions.urlSync,t.$watch("_gridOptions.data",function(e){e&&e.length&&(t.filtered=angular.copy(t._gridOptions.data),t.urlSync?o(n.path()):l())}),t.sort=function(e){var i=t.sortOptions.predicate===e&&"desc"===t.sortOptions.direction?"asc":"desc";t.sortOptions.predicate=e,t.sortOptions.direction=i,t.paginationOptions.currentPage=1,t.reloadGrid()},t.filter=function(){t.paginationOptions.currentPage=1,t.reloadGrid()},t.$on("$locationChangeSuccess",function(){(t.urlSync||t.serverPagination)&&(t.serverPagination&&(clearTimeout(t.getDataTimeout),t.getDataTimeout=setTimeout(s,t.getDataDelay)),t.filtered&&o(n.path()))}),t.reloadGrid=function(){t.urlSync||t.serverPagination?a():l()},t._gridActions.refresh=t.reloadGrid,t._gridActions.filter=t.filter,t._gridActions.sort=t.sort}]).directive("gridData",["$compile","$animate",function(t,e){return{restrict:"EA",transclude:!0,replace:!0,controller:"gridController",link:function(i,n,r,a,o){function s(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}var l=[],g=[],c=[],p=i.$new(),d=n.parent(),u=r.id,f="true"===r.serverPagination;o(i,function(t){e.enter(t,n)}),angular.forEach(angular.element(d[0].querySelectorAll("[sortable]")),function(e){var i=angular.element(e),n=i.attr("sortable");l.push(i),i.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),i.attr("ng-click","sort('"+n+"')"),t(i)(p)}),angular.forEach(angular.element(document.querySelectorAll("[filter-by]")),function(e){var r=angular.element(e),a=d.find(r).length>0,o=r.attr("filter-by"),l=r.attr("filter-type")||"",c=r.attr("ng-model"),p=r.attr("disable-url");if(!u||!r.attr("grid-id")||u==r.attr("grid-id")){if("select"===l){var f=s(deepFind(i,n.attr("grid-options")+".data"),o);i[c+"Options"]=f}!~l.indexOf("date")||r.attr("ng-focus")||r.attr("ng-blur")||(r.attr("ng-focus","filter('{"+c+" : this."+c+"}')"),r.attr("ng-blur","filter('{"+c+" : this."+c+"}')"),t(r)(i)),c||(c=o,r.attr("ng-model",o),r.attr("ng-change","filter()"),t(r)(i)),g.push({model:c,isInScope:a,filterBy:o,filterType:l,disableUrl:p})}}),angular.forEach(angular.element(d[0].querySelectorAll("[grid-item]")),function(e){var i=angular.element(e);c.push(i),f?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage"),t(i)(p)}),i.sorting=l,i.rows=c,i.filters=g}}}]).directive("gridItemPerPage",["$compile",function(t){return{replace:!0,template:'
      ',link:function(e,i,n){if(n.gridItemPerPage){var r=n.gridItemPerPage.replace(/ /g,"").split(",");r.forEach(function(n){if(Number(n)){n=Number(n);var r=angular.element("
    • "),a=angular.element(""+n+"");a.attr("ng-click","paginationOptions.itemsPerPage = "+n+"; reloadGrid()"),r.attr("ng-class",'{"active" : paginationOptions.itemsPerPage == '+n+"}"),r.append(a),i.append(r),i.append(" "),t(r)(e)}})}}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~t[i].toLowerCase().indexOf(e.toLowerCase()):!0})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function n(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(r){switch(r){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return n;default:return null}}}}); \ No newline at end of file diff --git a/index.html b/index.html index 488cd6d..b614f5e 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@

      Angular Data Grid

      -
      +
      diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js index 69d53c7..937aa9a 100644 --- a/src/js/dataGrid.js +++ b/src/js/dataGrid.js @@ -34,6 +34,7 @@ angular $scope.$watch('_gridOptions.data', function (newValue) { if (newValue && newValue.length) { + $scope.filtered = angular.copy($scope._gridOptions.data); if ($scope.urlSync) { parseUrl($location.path()); } else { @@ -61,7 +62,9 @@ angular clearTimeout($scope.getDataTimeout); $scope.getDataTimeout = setTimeout(getData, $scope.getDataDelay); } - parseUrl($location.path()); + if ($scope.filtered) { + parseUrl($location.path()); + } } }); @@ -310,15 +313,17 @@ angular function generateOptions(values, predicate) { var array = []; - values.forEach(function (item) { - if (!~array.indexOf(item[predicate])) { - array.push(item[predicate]); - } - }); - - return array.map(function (option) { - return {text: option, value: option}; - }); + if (values) { + values.forEach(function (item) { + if (!~array.indexOf(item[predicate])) { + array.push(item[predicate]); + } + }); + + return array.map(function (option) { + return {text: option, value: option}; + }); + } } } } From a0a4cbd3a03a04bdadcfc4c12d8be2c0e51fa254 Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Tue, 29 Dec 2015 16:05:16 +0300 Subject: [PATCH 004/119] add material theme --- demo/demo.css | 146 ++++++++------------- demo/index.html | 160 ++++++++++++++++++++++- dist/{dataGrid.css => material.css} | 12 +- gulpfile.js | 2 +- index.html | 5 +- src/css/demo.scss | 67 +++++++++- src/css/{dataGrid.scss => material.scss} | 11 +- 7 files changed, 297 insertions(+), 106 deletions(-) rename dist/{dataGrid.css => material.css} (87%) rename src/css/{dataGrid.scss => material.scss} (88%) diff --git a/demo/demo.css b/demo/demo.css index e4b5e63..ff25c8c 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -1,93 +1,59 @@ -table { - border-collapse: collapse; - border-spacing: 0; } - -:focus { - outline: none; } - -.pagination { - display: inline-block; - box-sizing: border-box; } - -.pagination > li { - display: inline-block; - vertical-align: middle; - width: auto; - height: 30px; - position: relative; - border-radius: 2px; +*, *:before, *:after { box-sizing: border-box; } -.pagination a { - color: #444; - font-size: 16px; - padding: 0 10px; - line-height: 30px; - display: inline-block; - text-decoration: none; - box-sizing: border-box; } - .pagination a .md-ripple-container { - border-radius: 2px; } - -.pagination-none-svg svg { - display: none !important; } - -.pagination-none-svg .pagination-prev a, -.pagination-none-svg .pagination-next a, -.pagination-none-svg .pagination-first a, -.pagination-none-svg .pagination-last a { - width: 30px; - text-align: center; - line-height: 24px; } - -.pagination-page { - transition: background .1s ease-out, color .1s ease-out; } - .pagination-page.active { - background: #106cc8; } - .pagination-page.active a { - color: #fff; } - -.pagination { - transition: background .1s ease-out, color .1s ease-out; } - .pagination .active { - background: #106cc8; } - .pagination .active a { - color: #fff; } - -.table td { - border-bottom: 1px rgba(0, 0, 0, 0.12) solid; - padding: 12px; } - -.table th { - padding: 12px; - border-bottom: 1px rgba(0, 0, 0, 0.12) solid; } - -th.sortable { - line-height: 24px; - padding-right: 31px; } - th.sortable svg { - height: 18px; - width: 18px; - margin: 0 4px; - transition: fill .25s,-webkit-transform .25s; - transition: fill .25s,transform .25s; +body { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } + +h1 { + margin-top: 20px; + margin-bottom: 10px; + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; + font-size: 36px; } + +.container { + max-width: 1170px; + margin: 0 auto; + padding-right: 15px; + padding-left: 15px; } + +.b-change-theme { + padding: 20px; } + .b-change-theme__link { + font-size: 16px; + line-height: 20px; + font-weight: 400; + color: #000; + display: inline-block; vertical-align: middle; - display: none !important; } - th.sortable.sort-descent { - padding-right: 0; } - th.sortable.sort-descent svg { - display: inline-block !important; } - th.sortable.sort-ascent { - padding-right: 0; } - th.sortable.sort-ascent svg { - display: inline-block !important; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); } - -.items-per-page .active { - background: #106cc8; } - .items-per-page .active a { - color: #fff; } - -.items-per-page a { - cursor: pointer; } + text-decoration: none; } + .b-change-theme__link + .b-change-theme__link { + margin-left: 30px; } + .b-change-theme__link:before { + width: 20px; + height: 20px; + content: ''; + border-radius: 2px; + border: 1px solid #999; + margin-right: 8px; + vertical-align: bottom; + display: inline-block; } + .b-change-theme__link:hover { + text-decoration: underline; + color: #000; } + .b-change-theme__link._active { + text-decoration: none; + position: relative; } + .b-change-theme__link._active:after { + content: ''; + width: 12px; + height: 6px; + border-left: 2px solid #444; + border-bottom: 2px solid #444; + transform-origin: center; + transform: rotate(-45deg); + left: 4px; + top: 5px; + position: absolute; } diff --git a/demo/index.html b/demo/index.html index e71ae2c..b0fc361 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,17 +3,169 @@ Flat JSON format for data tables - + + -
      +
      -

      TEST Go back

      +

      Angular Data Grid

      +
      + Material Design + Bootstrap +
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      + + +
      + + + + +
      +
      +
      + + +
      + + + + +
      +
      +
      +
      + Clear Dates +
      +
      +
      +
      + + found : {{filtered.length}} items + + +
      + + + + + + + + + + + + + + + + + + + + + + +
      + Order # + + Date Placed + + Purchase Order # + + + + Total + +
      + + + View + Order +
      +
      + +
      +
      +
      +
      +
      - + + + + \ No newline at end of file diff --git a/dist/dataGrid.css b/dist/material.css similarity index 87% rename from dist/dataGrid.css rename to dist/material.css index e4b5e63..823b576 100644 --- a/dist/dataGrid.css +++ b/dist/material.css @@ -1,6 +1,8 @@ table { border-collapse: collapse; - border-spacing: 0; } + border-spacing: 0; + margin: 8px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); } :focus { outline: none; } @@ -55,12 +57,12 @@ table { color: #fff; } .table td { - border-bottom: 1px rgba(0, 0, 0, 0.12) solid; - padding: 12px; } + border-top: 1px rgba(0, 0, 0, 0.12) solid; + padding: 12px 24px; } .table th { - padding: 12px; - border-bottom: 1px rgba(0, 0, 0, 0.12) solid; } + padding: 12px 24px; + border-top: 1px rgba(0, 0, 0, 0.12) solid; } th.sortable { line-height: 24px; diff --git a/gulpfile.js b/gulpfile.js index a763b39..4fe7687 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -38,7 +38,7 @@ gulp.src('./src/css/demo.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./demo')); - gulp.src('./src/css/dataGrid.scss') + gulp.src('./src/css/material.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./dist')); }); diff --git a/index.html b/index.html index b614f5e..cda5e65 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,10 @@

      Angular Data Grid

      - +
      + Bootstrap + Material Design +
      diff --git a/src/css/demo.scss b/src/css/demo.scss index 3a09c2e..0085554 100644 --- a/src/css/demo.scss +++ b/src/css/demo.scss @@ -1 +1,66 @@ -@import 'dataGrid'; \ No newline at end of file +*, *:before, *:after { + box-sizing: border-box; +} +body { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; +} +h1 { + margin-top: 20px; + margin-bottom: 10px; + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; + font-size: 36px; +} +.container { + max-width: 1170px; + margin: 0 auto; + padding-right: 15px; + padding-left: 15px; +} +.b-change-theme { + padding: 20px; + &__link { + font-size: 16px; + line-height: 20px; + font-weight: 400; + color: #000; + display: inline-block; + vertical-align: middle; + text-decoration: none; + &+& { + margin-left: 30px; + } + &:before { + width: 20px; + height: 20px; + content: ''; + border-radius: 2px; + border: 1px solid #999; + margin-right: 8px; + vertical-align: bottom; + display: inline-block; + } + &:hover { + text-decoration: underline; + color: #000; + } + &._active{ + text-decoration: none; + position: relative; + &:after { + content: ''; + width: 12px; + height: 6px; + border-left: 2px solid #444; + border-bottom: 2px solid #444; + transform-origin: center; + transform: rotate(-45deg); + left: 4px; + top: 5px; + position: absolute; + } + } + } +} \ No newline at end of file diff --git a/src/css/dataGrid.scss b/src/css/material.scss similarity index 88% rename from src/css/dataGrid.scss rename to src/css/material.scss index 8089c55..b68987d 100644 --- a/src/css/dataGrid.scss +++ b/src/css/material.scss @@ -2,6 +2,9 @@ table { border-collapse: collapse; border-spacing: 0; + + margin: 8px; + box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12); } :focus { outline: none; @@ -66,12 +69,12 @@ table { } .table { td { - border-bottom: 1px rgba(0,0,0,.12) solid; - padding: 12px; + border-top: 1px rgba(0,0,0,.12) solid; + padding: 12px 24px; } th { - padding: 12px; - border-bottom: 1px rgba(0,0,0,.12) solid; + padding: 12px 24px; + border-top: 1px rgba(0,0,0,.12) solid; } } th.sortable { From 76fb41b538e8707a4a943021261fc98cd8c09839 Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Tue, 29 Dec 2015 16:09:51 +0300 Subject: [PATCH 005/119] updating docs --- README.md | 54 +++++++++++++++++++++++++++++++++++++++++++---- demo/demoApp.js | 9 +------- src/js/demoApp.js | 9 +------- 3 files changed, 52 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index da49605..21a58e5 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,55 @@ #Angular Data Grid -Light and flexible Data Grid for AngularJS applications. +Light and flexible Data Grid for AngularJS, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, +seamless synchronization with browser address bar and total freedom in choosing mark-up and styling suitable for your application. + +### Features + + - Does not have any hard-coded template so you can choose any mark-up you need, from basic ```html ``` layout to any ```html
      ``` structure. + - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes. + - Built-in sync with browser address bar (URL), so you copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. + - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive, so it can be easily synchronized with any data changes inside your controller. !With great power comes great responsibility, so be careful to use non-isolated API correctly. + +## Setup + +1. Include scripts in you application: dataGrid.min.js and pagination.min.js (include the second one only if you need pagination), like: + + ```javascript + + + ``` + +2. Inject dataGrid dependency in your module: + + ```javascript +angular.module('myApp', ['dataGrid', 'pagination']) + ``` + +3. Initialize grid with additional options in your controller, like: + + ```javascript + $scope.gridOptions = { + data: [], //required parameter - array with data + //optional parameter - start sort options + sort: { + predicate: 'companyName', + direction: 'asc' + }, + //optional parameter - custom rules for filters (see explanation below) + customFilters: { + startFrom: function (items, value, predicate) { + return items.filter(function (item) { + return value && item[predicate] ? !item[predicate].toLowerCase().indexOf(value.toLowerCase()) : true; + }); + } + }, + //optional parameter - URL synchronization + urlSync: true + }; +``` + +## Sorting +You can use the sortable directive to have a built in sort feature. You add the attribute sortable to your table headers. This will specify the property name you want to sort by. Also if you add class sortable to your element, sort arrows will be displayed for acs/decs sort directions. You can use Data Grid module to easily display data in grids with built-in sorting, outer filters and url-synchronization. To use it, you must add grid-data directive to element and pass 2 required parameters ```grid-options``` and ```grid-actions```. @@ -10,9 +59,6 @@ You can use Data Grid module to easily display data in grids with built-in sort Inside the ```grid-data``` directive you can use grid-pagination directive. It's just wrapper of angular-ui pagination directive. You can pass any parameters from pagination directive. Also you can use grid-item-per-page directive and pass into it array of value (f.e. "10, 25, 50"). If you need get size of current displayed items you can use filtered variable. -##Sorting: -You can use the sortable directive to have a built in sort feature. You add the attribute sortable to your table headers. This will specify the property name you want to sort by. Also if you add class sortable to your element, sort arrows will be displayed for acs/decs sort directions. - ##Filters: Data Grid module has 4 types built in filters. To use it, you must add attribute filter-by to any element and pass property name, which you want filtering. Also you need add attribute filter-type with type of filter (text, select, dateFrom, dateTo). After that you need call filter() method in ng-change for text or select inputs and in ng-blur/ng-focus for datepickers. Filters synchronize with URL by ng-model value. diff --git a/demo/demoApp.js b/demo/demoApp.js index 6b1ff9f..c58a3c2 100644 --- a/demo/demoApp.js +++ b/demo/demoApp.js @@ -13,16 +13,9 @@ angular.module('myApp', ['dataGrid', 'pagination']) $scope.gridOptions = { data: $scope.items, - urlSync: true + urlSync: false }; - //$scope.items = [ - // {"firstName": "John", "lastName": "Doe"}, - // {"firstName": "Anna", "lastName": "Smith"}, - // {"firstName": "Peter", "lastName": "Jones"} - //]; - - }]) .factory('myAppFactory', function ($http) { var root = 'http://jsonplaceholder.typicode.com'; diff --git a/src/js/demoApp.js b/src/js/demoApp.js index 6b1ff9f..c58a3c2 100644 --- a/src/js/demoApp.js +++ b/src/js/demoApp.js @@ -13,16 +13,9 @@ angular.module('myApp', ['dataGrid', 'pagination']) $scope.gridOptions = { data: $scope.items, - urlSync: true + urlSync: false }; - //$scope.items = [ - // {"firstName": "John", "lastName": "Doe"}, - // {"firstName": "Anna", "lastName": "Smith"}, - // {"firstName": "Peter", "lastName": "Jones"} - //]; - - }]) .factory('myAppFactory', function ($http) { var root = 'http://jsonplaceholder.typicode.com'; From fc1616aa20b20ab589a4c9622568bbcdff874a1a Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Tue, 29 Dec 2015 16:16:52 +0300 Subject: [PATCH 006/119] more docs updates --- README.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 21a58e5..7d9740b 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,18 @@ -#Angular Data Grid +##Angular Data Grid Light and flexible Data Grid for AngularJS, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, seamless synchronization with browser address bar and total freedom in choosing mark-up and styling suitable for your application. -### Features +Samples: http://angular-data-grid.github.io/ - - Does not have any hard-coded template so you can choose any mark-up you need, from basic ```html
      ``` layout to any ```html
      ``` structure. +### Features + + - Does not have any hard-coded template so you can choose any mark-up you need, from basic ```javascript
      ``` layout to any ```javascript
      ``` structure. - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes. - Built-in sync with browser address bar (URL), so you copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive, so it can be easily synchronized with any data changes inside your controller. !With great power comes great responsibility, so be careful to use non-isolated API correctly. -## Setup +### Setup 1. Include scripts in you application: dataGrid.min.js and pagination.min.js (include the second one only if you need pagination), like: @@ -48,7 +50,7 @@ angular.module('myApp', ['dataGrid', 'pagination']) }; ``` -## Sorting +### Sorting You can use the sortable directive to have a built in sort feature. You add the attribute sortable to your table headers. This will specify the property name you want to sort by. Also if you add class sortable to your element, sort arrows will be displayed for acs/decs sort directions. You can use Data Grid module to easily display data in grids with built-in sorting, outer filters and url-synchronization. To use it, you must add grid-data directive to element and pass 2 required parameters ```grid-options``` and ```grid-actions```. @@ -59,11 +61,11 @@ You can use Data Grid module to easily display data in grids with built-in sort Inside the ```grid-data``` directive you can use grid-pagination directive. It's just wrapper of angular-ui pagination directive. You can pass any parameters from pagination directive. Also you can use grid-item-per-page directive and pass into it array of value (f.e. "10, 25, 50"). If you need get size of current displayed items you can use filtered variable. -##Filters: +### Filters Data Grid module has 4 types built in filters. To use it, you must add attribute filter-by to any element and pass property name, which you want filtering. Also you need add attribute filter-type with type of filter (text, select, dateFrom, dateTo). After that you need call filter() method in ng-change for text or select inputs and in ng-blur/ng-focus for datepickers. Filters synchronize with URL by ng-model value. -##Custom Filters: +### Custom Filters If you need use some custom filters (f.e. filter by first letter), you must add filter-by to specify property name, which you want filtering and add ng-model property. Then create in gridOptions.customFilters variable named as it ng-model value and contain filtering function. Filtering function accept items, value, predicate arguments and must return filtered array. -##Others: +### Others All filters has parameter disable-url. If you set it as true value - URL-synchronization for this filter will be disabled. If you need use 2 or more grids on page, you must add id to grids, and use grid-id attribute on filters to specify their grid. From 299c2b54438ca048a588e679269337c4c2440dec Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Tue, 29 Dec 2015 16:17:39 +0300 Subject: [PATCH 007/119] more docs updates2 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7d9740b..30d429a 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Samples: http://angular-data-grid.github.io/ ### Features - - Does not have any hard-coded template so you can choose any mark-up you need, from basic ```javascript
      ``` layout to any ```javascript
      ``` structure. + - Does not have any hard-coded template so you can choose any mark-up you need, from basic ```
      ``` layout to any ```
      ``` structure. - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes. - Built-in sync with browser address bar (URL), so you copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive, so it can be easily synchronized with any data changes inside your controller. !With great power comes great responsibility, so be careful to use non-isolated API correctly. From a6e25dfee7801c5a50672bd9d9fb9b81f75981e8 Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Tue, 29 Dec 2015 16:33:36 +0300 Subject: [PATCH 008/119] adding bower.json --- bower.json | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 bower.json diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..7d0146a --- /dev/null +++ b/bower.json @@ -0,0 +1,32 @@ +{ + "name": "angular-data-grid", + "version": "0.0.1", + "homepage": "https://github.com/angular-data-grid/angular-data-grid.github.io", + "authors": [ + "Zhuk", + "Alexander " + ], + "description": "Light and flexible Data Grid for AngularJS, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, seamless synchronization with browser address bar and total freedom in choosing mark-up and styling suitable for your application.", + "main": "dist/dataGrid.js", + "keywords": [ + "DataGrid", + "Angular", + "DataGrid", + "Angular", + "table", + "Angular", + "Data", + "Table", + "AngularJS", + "AngularJS", + "grid" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} From 62e3df2674206d70aee8d32ee2db4a72ce0d85ec Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Tue, 29 Dec 2015 17:30:43 +0300 Subject: [PATCH 009/119] update table data --- demo/demo.css | 74 ++- demo/demoApp.js | 1177 ++++++++++++++++++++++++++++++++++++++++++++- index.html | 15 +- src/css/demo.scss | 84 +++- src/js/demoApp.js | 1177 ++++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 2469 insertions(+), 58 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index ff25c8c..78558f5 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -35,9 +35,9 @@ h1 { width: 20px; height: 20px; content: ''; - border-radius: 2px; border: 1px solid #999; margin-right: 8px; + border-radius: 50%; vertical-align: bottom; display: inline-block; } .b-change-theme__link:hover { @@ -46,14 +46,64 @@ h1 { .b-change-theme__link._active { text-decoration: none; position: relative; } - .b-change-theme__link._active:after { - content: ''; - width: 12px; - height: 6px; - border-left: 2px solid #444; - border-bottom: 2px solid #444; - transform-origin: center; - transform: rotate(-45deg); - left: 4px; - top: 5px; - position: absolute; } + .b-change-theme__link._active:before { + box-shadow: inset 0 0 0 3px #fff; + background: #999; } + +.table td { + padding: 12px 24px !important; + vertical-align: middle !important; } + +.table th { + padding: 12px 24px !important; + vertical-align: middle !important; } + +th.sortable { + line-height: 24px; + position: relative; } + th.sortable.sort-descent:before { + content: ''; + position: absolute; + left: 12px; + width: 2px; + background: #333; + height: 12px; + top: 0; + bottom: 0; + margin: auto 0; } + th.sortable.sort-descent:after { + content: ''; + position: absolute; + left: 9px; + border-top: 2px solid #333; + border-left: 2px solid #333; + transform-origin: center; + transform: rotate(-135deg); + height: 8px; + width: 8px; + top: 6px; + bottom: 0; + margin: auto 0; } + th.sortable.sort-ascent:before { + content: ''; + position: absolute; + left: 12px; + width: 2px; + background: #333; + height: 12px; + top: 0; + bottom: 0; + margin: auto 0; } + th.sortable.sort-ascent:after { + content: ''; + position: absolute; + left: 9px; + border-top: 2px solid #333; + border-left: 2px solid #333; + transform-origin: center; + transform: rotate(45deg); + height: 8px; + width: 8px; + top: 0; + bottom: 6px; + margin: auto 0; } diff --git a/demo/demoApp.js b/demo/demoApp.js index c58a3c2..0328a1b 100644 --- a/demo/demoApp.js +++ b/demo/demoApp.js @@ -1,28 +1,1173 @@ angular.module('myApp', ['dataGrid', 'pagination']) .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) { - $scope.getData = function () { - myAppFactory.getData() - .success(function (response) { - $scope.gridOptions.data = response; - $scope.dataLoaded = true; - }).error(function () { - }); - }; - $scope.getData(); - $scope.gridOptions = { - data: $scope.items, + data: myAppFactory.getData(), urlSync: false }; }]) - .factory('myAppFactory', function ($http) { - var root = 'http://jsonplaceholder.typicode.com'; + .factory('myAppFactory', function () { return { getData: function () { - return $http.get(root + '/posts', {}); + //return $http.get(root + '/posts', {}); + return [{ + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 6100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$6,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Valid", + "code": "3747453", + "placed": 1417402800000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747092", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747116", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1025.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,025.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747118", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1080.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,080.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747093", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747099", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1080.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,080.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747090", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1135.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,135.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747094", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747119", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 150.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$150.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747095", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747102", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747170", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747174", + "placed": 1401073200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 980.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$980.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747104", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1091.90, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,091.90" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747260", + "placed": 1404788400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747171", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747086", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1092.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,092.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747173", + "placed": 1401073200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747084", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747106", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 950.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$950.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747122", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1025.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,025.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747100", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 75.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$75.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747070", + "placed": 1394766000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1122.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,122.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747164", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747107", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747083", + "placed": 1396580400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747081", + "placed": 1395975600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1075.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,075.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747088", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747091", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1315.45, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,315.45" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747176", + "placed": 1401073200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747103", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1136.90, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,136.90" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747087", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1005.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,005.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747101", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747098", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747105", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1073.80, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,073.80" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747165", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747167", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1035.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,035.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747125", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747082", + "placed": 1395975600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747085", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1179.75, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,179.75" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747168", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747172", + "placed": 1401073200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 950.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$950.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747123", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 950.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$950.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747108", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747117", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1030.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,030.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747124", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1475.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,475.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747121", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747120", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747169", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747175", + "placed": 1401073200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747166", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 5.95, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$5.95" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747349", + "placed": 1410145200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 59.50, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$59.50" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747352", + "placed": 1410145200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3746995", + "placed": 1392260400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3746996", + "placed": 1392260400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747016", + "placed": 1392606000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 61.90, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$61.90" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Valid", + "code": "3746998", + "placed": 1392260400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 3125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$3,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3746993", + "placed": 1391569200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 130.95, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$130.95" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3746994", + "placed": 1392174000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747015", + "placed": 1392606000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747043", + "placed": 1392606000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747044", + "placed": 1392692400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747014", + "placed": 1392606000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 20.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$20.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747017", + "placed": 1392606000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747045", + "placed": 1392692400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 75.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$75.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747046", + "placed": 1392692400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747054", + "placed": 1393470000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1541.09, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,541.09" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3746952", + "placed": 1384484400000 + }]; } } - }); - + }); \ No newline at end of file diff --git a/index.html b/index.html index cda5e65..1ad4606 100644 --- a/index.html +++ b/index.html @@ -128,10 +128,21 @@

      Angular Data Grid

      + + + + + + + + + + + + diff --git a/src/css/demo.scss b/src/css/demo.scss index 0085554..05c77cc 100644 --- a/src/css/demo.scss +++ b/src/css/demo.scss @@ -36,9 +36,9 @@ h1 { width: 20px; height: 20px; content: ''; - border-radius: 2px; border: 1px solid #999; margin-right: 8px; + border-radius: 50%; vertical-align: bottom; display: inline-block; } @@ -49,18 +49,78 @@ h1 { &._active{ text-decoration: none; position: relative; - &:after { - content: ''; - width: 12px; - height: 6px; - border-left: 2px solid #444; - border-bottom: 2px solid #444; - transform-origin: center; - transform: rotate(-45deg); - left: 4px; - top: 5px; - position: absolute; + &:before { + box-shadow: inset 0 0 0 3px #fff; + background: #999; } } } +} +.table { + td { + padding: 12px 24px !important; + vertical-align: middle !important; + } + th { + padding: 12px 24px !important; + vertical-align: middle !important; + } +} +th.sortable { + line-height: 24px; + position: relative; + &.sort-descent { + &:before { + content: ''; + position: absolute; + left: 12px; + width: 2px; + background: #333; + height: 12px; + top: 0; + bottom: 0; + margin: auto 0; + } + &:after { + content: ''; + position: absolute; + left: 9px; + border-top: 2px solid #333; + border-left: 2px solid #333; + transform-origin:center; + transform: rotate(-135deg); + height: 8px; + width: 8px; + top: 6px; + bottom: 0; + margin: auto 0; + } + } + &.sort-ascent { + &:before { + content: ''; + position: absolute; + left: 12px; + width: 2px; + background: #333; + height: 12px; + top: 0; + bottom: 0; + margin: auto 0; + } + &:after { + content: ''; + position: absolute; + left: 9px; + border-top: 2px solid #333; + border-left: 2px solid #333; + transform-origin:center; + transform: rotate(45deg); + height: 8px; + width: 8px; + top: 0; + bottom: 6px; + margin: auto 0; + } + } } \ No newline at end of file diff --git a/src/js/demoApp.js b/src/js/demoApp.js index c58a3c2..0328a1b 100644 --- a/src/js/demoApp.js +++ b/src/js/demoApp.js @@ -1,28 +1,1173 @@ angular.module('myApp', ['dataGrid', 'pagination']) .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) { - $scope.getData = function () { - myAppFactory.getData() - .success(function (response) { - $scope.gridOptions.data = response; - $scope.dataLoaded = true; - }).error(function () { - }); - }; - $scope.getData(); - $scope.gridOptions = { - data: $scope.items, + data: myAppFactory.getData(), urlSync: false }; }]) - .factory('myAppFactory', function ($http) { - var root = 'http://jsonplaceholder.typicode.com'; + .factory('myAppFactory', function () { return { getData: function () { - return $http.get(root + '/posts', {}); + //return $http.get(root + '/posts', {}); + return [{ + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 6100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$6,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Valid", + "code": "3747453", + "placed": 1417402800000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747092", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747116", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1025.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,025.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747118", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1080.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,080.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747093", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747099", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1080.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,080.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747090", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1135.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,135.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747094", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747119", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 150.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$150.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747095", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747102", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747170", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747174", + "placed": 1401073200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 980.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$980.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747104", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1091.90, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,091.90" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747260", + "placed": 1404788400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747171", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747086", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1092.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,092.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747173", + "placed": 1401073200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747084", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747106", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 950.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$950.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747122", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1025.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,025.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747100", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 75.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$75.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747070", + "placed": 1394766000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1122.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,122.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747164", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747107", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747083", + "placed": 1396580400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747081", + "placed": 1395975600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1075.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,075.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747088", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747091", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1315.45, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,315.45" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747176", + "placed": 1401073200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747103", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1136.90, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,136.90" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747087", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1005.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,005.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747101", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747098", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747105", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1073.80, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,073.80" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747165", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747167", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1035.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,035.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747125", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747082", + "placed": 1395975600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747085", + "placed": 1397790000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1179.75, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,179.75" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747168", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747172", + "placed": 1401073200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 950.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$950.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747123", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 950.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$950.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747108", + "placed": 1398049200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747117", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1030.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,030.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747124", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1475.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,475.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747121", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747120", + "placed": 1398135600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747169", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747175", + "placed": 1401073200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747166", + "placed": 1400727600000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 5.95, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$5.95" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747349", + "placed": 1410145200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 59.50, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$59.50" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747352", + "placed": 1410145200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3746995", + "placed": 1392260400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3746996", + "placed": 1392260400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747016", + "placed": 1392606000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 61.90, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$61.90" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Valid", + "code": "3746998", + "placed": 1392260400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 3125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$3,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3746993", + "placed": 1391569200000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 130.95, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$130.95" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3746994", + "placed": 1392174000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747015", + "placed": 1392606000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747043", + "placed": 1392606000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747044", + "placed": 1392692400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747014", + "placed": 1392606000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 20.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$20.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747017", + "placed": 1392606000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747045", + "placed": 1392692400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 75.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$75.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747046", + "placed": 1392692400000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747054", + "placed": 1393470000000 + }, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1541.09, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,541.09" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3746952", + "placed": 1384484400000 + }]; } } - }); - + }); \ No newline at end of file From d75853d5aa549d130ef397b4d578b6d2c928481b Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Tue, 29 Dec 2015 18:32:35 +0300 Subject: [PATCH 010/119] update material theme --- demo/demo.css | 17 ++- demo/index.html | 229 ++++++++++++++++++++--------------------- dist/material.css | 138 +++++++++++++++++++++++++ index.html | 12 --- src/css/demo.scss | 17 +++ src/css/material.scss | 154 ++++++++++++++++++++++++++- src/css/variables.scss | 5 +- 7 files changed, 436 insertions(+), 136 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index 78558f5..846df99 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -20,7 +20,8 @@ h1 { padding-left: 15px; } .b-change-theme { - padding: 20px; } + padding: 20px; + margin-bottom: 20px; } .b-change-theme__link { font-size: 16px; line-height: 20px; @@ -107,3 +108,17 @@ th.sortable { top: 0; bottom: 6px; margin: auto 0; } + +.col-wrap { + font-size: 0; + padding: 25px 0; } + .col-wrap .col2 { + vertical-align: top; + display: inline-block; + width: 50%; + padding: 0 15px; } + .col-wrap .col3 { + vertical-align: top; + display: inline-block; + width: 33.33%; + padding: 0 15px; } diff --git a/demo/index.html b/demo/index.html index b0fc361..36716cf 100644 --- a/demo/index.html +++ b/demo/index.html @@ -11,140 +11,130 @@

      Angular Data Grid

      - Material Design Bootstrap + Material Design
      -
      -
      -
      +
      +
      +
      - +
      -
      -
      -
      - - -
      - - - - -
      -
      -
      - - -
      - - - - -
      +
      +
      +
      + +
      Clear Dates
      -
      -
      - - found : {{filtered.length}} items - - +
      +
      +
      + + +
      - -
      - +
      - - - - - - - - - - - - - - - - - - - - -
      - Order # - - Date Placed - - Purchase Order # - - - - Total - -
      - - - View - Order -
      -
      +
      +
      +
      +
      + + found : {{filtered.length}} items + +
      + + + + + + + + + + + + + + + + + + + + + + +
      + Order # + + Date Placed + + Purchase Order # + + + + Total + +
      + + + View + Order +
      +
      +
      Angular Data Grid ng-model="paginationOptions.currentPage" ng-change="reloadGrid()" items-per-page="paginationOptions.itemsPerPage"> +
      +
      @@ -160,6 +152,7 @@

      Angular Data Grid

      +
      diff --git a/dist/material.css b/dist/material.css index 823b576..b84d354 100644 --- a/dist/material.css +++ b/dist/material.css @@ -1,6 +1,8 @@ table { border-collapse: collapse; border-spacing: 0; + width: 100%; + font-size: 16px; margin: 8px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); } @@ -93,3 +95,139 @@ th.sortable { .items-per-page a { cursor: pointer; } + +.pagination-prev a { + font-size: 0; + width: 30px; + position: relative; } + .pagination-prev a:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + display: block; + width: 10px; + height: 10px; + content: ''; + transform-origin: center; + border-left: 2px solid #333; + border-bottom: 2px solid #333; + transform: rotate(45deg); } + +.pagination-next a { + font-size: 0; + width: 30px; + position: relative; } + .pagination-next a:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + display: block; + width: 10px; + height: 10px; + content: ''; + transform-origin: center; + border-left: 2px solid #333; + border-bottom: 2px solid #333; + transform: rotate(-135deg); } + +.pagination-first a { + font-size: 0; + width: 30px; + position: relative; } + .pagination-first a:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + display: block; + width: 10px; + height: 10px; + content: ''; + transform-origin: center; + border-left: 2px solid #333; + border-bottom: 2px solid #333; + transform: rotate(45deg); } + .pagination-first a:after { + left: 4px; + width: 2px; + height: 14px; + content: ''; + top: 0; + bottom: 0; + position: absolute; + margin: auto 0; + background: #333; } + +.pagination-last a { + font-size: 0; + width: 30px; + position: relative; } + .pagination-last a:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + display: block; + width: 10px; + height: 10px; + content: ''; + transform-origin: center; + border-left: 2px solid #333; + border-bottom: 2px solid #333; + transform: rotate(-135deg); } + .pagination-last a:after { + right: 4px; + width: 2px; + height: 14px; + content: ''; + top: 0; + bottom: 0; + position: absolute; + margin: auto 0; + background: #333; } + +.form-group { + position: relative; } + +input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea { + background-color: transparent; + border: none; + border-bottom: 1px solid #444; + border-radius: 0; + outline: none; + height: 3rem; + width: 100%; + font-size: 1rem; + margin: 0 0 15px 0; + padding: 0; + box-shadow: none; + box-sizing: content-box; + transition: all .2s; } + input:not([type]):focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=url]:focus, input[type=time]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=search]:focus, textarea.materialize-textarea:focus { + border-bottom: 1px solid #106cc8; + box-shadow: 0 1px 0 0 #106cc8; } + input:not([type]):focus ~ .input-label, input[type=text]:focus ~ .input-label, input[type=password]:focus ~ .input-label, input[type=email]:focus ~ .input-label, input[type=url]:focus ~ .input-label, input[type=time]:focus ~ .input-label, input[type=date]:focus ~ .input-label, input[type=datetime-local]:focus ~ .input-label, input[type=tel]:focus ~ .input-label, input[type=number]:focus ~ .input-label, input[type=search]:focus ~ .input-label, textarea.materialize-textarea:focus ~ .input-label { + -webkit-transform: translateY(-140%) scale(1); + transform: translateY(-140%) scale(1); + color: #106cc8; } + +.input-label { + color: #444; + position: absolute; + top: 0.8rem; + left: 0; + font-size: 1rem; + cursor: text; + transition: all .2s; + transform: scale(1.25); + transform-origin: left bottom; } diff --git a/index.html b/index.html index 1ad4606..f16c8d0 100644 --- a/index.html +++ b/index.html @@ -128,18 +128,6 @@

      Angular Data Grid

      - - - - - - - - - - - - diff --git a/src/css/demo.scss b/src/css/demo.scss index 05c77cc..1b60d93 100644 --- a/src/css/demo.scss +++ b/src/css/demo.scss @@ -21,6 +21,7 @@ h1 { } .b-change-theme { padding: 20px; + margin-bottom: 20px; &__link { font-size: 16px; line-height: 20px; @@ -123,4 +124,20 @@ th.sortable { margin: auto 0; } } +} +.col-wrap { + font-size: 0; + padding: 25px 0; + .col2 { + vertical-align: top; + display: inline-block; + width: 50%; + padding: 0 15px; + } + .col3 { + vertical-align: top; + display: inline-block; + width: 33.33%; + padding: 0 15px; + } } \ No newline at end of file diff --git a/src/css/material.scss b/src/css/material.scss index b68987d..fa69a9a 100644 --- a/src/css/material.scss +++ b/src/css/material.scss @@ -3,6 +3,8 @@ table { border-collapse: collapse; border-spacing: 0; + width: 100%; + font-size: 16px; margin: 8px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12); } @@ -52,7 +54,7 @@ table { .pagination-page { transition: background .1s ease-out, color .1s ease-out; &.active { - background: $activeBg; + background: $activeColor; a { color: $activeText; } @@ -61,7 +63,7 @@ table { .pagination { transition: background .1s ease-out, color .1s ease-out; .active { - background: $activeBg; + background: $activeColor; a { color: $activeText; } @@ -107,7 +109,7 @@ th.sortable { .items-per-page { .active { - background: $activeBg; + background: $activeColor; a { color: $activeText; } @@ -115,4 +117,150 @@ th.sortable { a { cursor: pointer; } +} + +.pagination-prev a { + font-size: 0; + width: 30px; + position: relative; + &:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + display: block; + width: 10px; + height: 10px; + content: ''; + transform-origin:center; + border-left: 2px solid $iconsColor; + border-bottom: 2px solid $iconsColor; + transform: rotate(45deg); + } +} +.pagination-next a { + font-size: 0; + width: 30px; + position: relative; + &:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + display: block; + width: 10px; + height: 10px; + content: ''; + transform-origin:center; + border-left: 2px solid $iconsColor; + border-bottom: 2px solid $iconsColor; + transform: rotate(-135deg); + } +} +.pagination-first a { + font-size: 0; + width: 30px; + position: relative; + &:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + display: block; + width: 10px; + height: 10px; + content: ''; + transform-origin:center; + border-left: 2px solid $iconsColor; + border-bottom: 2px solid $iconsColor; + transform: rotate(45deg); + } + &:after { + left: 4px; + width: 2px; + height: 14px; + content: ''; + top: 0; + bottom: 0; + position: absolute; + margin: auto 0; + background: $iconsColor; + } +} +.pagination-last a { + font-size: 0; + width: 30px; + position: relative; + &:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + display: block; + width: 10px; + height: 10px; + content: ''; + transform-origin:center; + border-left: 2px solid $iconsColor; + border-bottom: 2px solid $iconsColor; + transform: rotate(-135deg); + } + &:after { + right: 4px; + width: 2px; + height: 14px; + content: ''; + top: 0; + bottom: 0; + position: absolute; + margin: auto 0; + background: $iconsColor; + } +} + +.form-group { + position: relative; +} +input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea { + background-color: transparent; + border: none; + border-bottom: 1px solid $textColor; + border-radius: 0; + outline: none; + height: 3rem; + width: 100%; + font-size: 1rem; + margin: 0 0 15px 0; + padding: 0; + box-shadow: none; + box-sizing: content-box; + transition: all .2s; + &:focus { + border-bottom: 1px solid $activeColor; + box-shadow: 0 1px 0 0 $activeColor; + &~.input-label{ + -webkit-transform: translateY(-140%) scale(1); + transform: translateY(-140%) scale(1); + color: $activeColor; + } + } +} +.input-label { + color: $textColor; + position: absolute; + top: 0.8rem; + left: 0; + font-size: 1rem; + cursor: text; + transition: all .2s; + transform: scale(1.25); + transform-origin: left bottom; } \ No newline at end of file diff --git a/src/css/variables.scss b/src/css/variables.scss index 0ed9536..6217f6b 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -1,3 +1,4 @@ -$activeBg: rgb(16,108,200); +$activeColor: rgb(16,108,200); $activeText: #fff; -$textColor: #444; \ No newline at end of file +$textColor: #444; +$iconsColor: #333; \ No newline at end of file From 5f2f9600426a1ca8770c6fa6d728b352d6e130d8 Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Wed, 30 Dec 2015 13:08:47 +0300 Subject: [PATCH 011/119] add Angular Material --- demo/demo.css | 67 +++------- demo/demoApp.js | 4 +- demo/index.html | 140 +++++++++++---------- dist/material.css | 242 +++++++++--------------------------- index.html | 7 +- src/css/demo.scss | 78 +++++------- src/css/material.scss | 269 ++++++++++------------------------------- src/css/variables.scss | 8 +- 8 files changed, 250 insertions(+), 565 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index 846df99..d72570b 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -1,6 +1,9 @@ *, *:before, *:after { box-sizing: border-box; } +:focus { + outline: none; } + body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } @@ -62,63 +65,33 @@ h1 { th.sortable { line-height: 24px; position: relative; } - th.sortable.sort-descent:before { + th.sortable.sort-descent:before, th.sortable.sort-descent:after, th.sortable.sort-ascent:before, th.sortable.sort-ascent:after { content: ''; position: absolute; + margin: auto 0; } + th.sortable.sort-descent:before, th.sortable.sort-ascent:before { left: 12px; width: 2px; background: #333; - height: 12px; - top: 0; - bottom: 0; - margin: auto 0; } - th.sortable.sort-descent:after { - content: ''; - position: absolute; + height: 12px; } + th.sortable.sort-descent:after, th.sortable.sort-ascent:after { left: 9px; border-top: 2px solid #333; border-left: 2px solid #333; transform-origin: center; - transform: rotate(-135deg); height: 8px; - width: 8px; - top: 6px; - bottom: 0; - margin: auto 0; } + width: 8px; } + th.sortable.sort-descent:before, th.sortable.sort-descent:after { + bottom: 0; } + th.sortable.sort-descent:before { + top: 0; } + th.sortable.sort-descent:after { + transform: rotate(-135deg); + top: 6px; } + th.sortable.sort-ascent:before, th.sortable.sort-ascent:after { + top: 0; } th.sortable.sort-ascent:before { - content: ''; - position: absolute; - left: 12px; - width: 2px; - background: #333; - height: 12px; - top: 0; - bottom: 0; - margin: auto 0; } + bottom: 0; } th.sortable.sort-ascent:after { - content: ''; - position: absolute; - left: 9px; - border-top: 2px solid #333; - border-left: 2px solid #333; - transform-origin: center; transform: rotate(45deg); - height: 8px; - width: 8px; - top: 0; - bottom: 6px; - margin: auto 0; } - -.col-wrap { - font-size: 0; - padding: 25px 0; } - .col-wrap .col2 { - vertical-align: top; - display: inline-block; - width: 50%; - padding: 0 15px; } - .col-wrap .col3 { - vertical-align: top; - display: inline-block; - width: 33.33%; - padding: 0 15px; } + bottom: 6px; } diff --git a/demo/demoApp.js b/demo/demoApp.js index 0328a1b..5122559 100644 --- a/demo/demoApp.js +++ b/demo/demoApp.js @@ -1,4 +1,5 @@ -angular.module('myApp', ['dataGrid', 'pagination']) +angular + .module('myApp', ['dataGrid', 'pagination', 'ngMaterial']) .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) { $scope.gridOptions = { @@ -10,7 +11,6 @@ angular.module('myApp', ['dataGrid', 'pagination']) .factory('myAppFactory', function () { return { getData: function () { - //return $http.get(root + '/posts', {}); return [{ "total": { "currencyIso": "USD", diff --git a/demo/index.html b/demo/index.html index 36716cf..d3b2211 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,6 +3,7 @@ Flat JSON format for data tables + @@ -15,64 +16,51 @@

      Angular Data Grid

      Material Design
      -
      -
      -
      - - -
      -
      -
      -
      -
      - - -
      -
      -
      - Clear Dates -
      -
      -
      -
      -
      - - -
      -
      -
      +
      + + + + + + + + + + + +
      @@ -101,13 +89,20 @@

      Angular Data Grid

      Purchase Order # - + + + + + All Statuses + + {{option.text}} + + + Total @@ -133,8 +128,8 @@

      Angular Data Grid

      -
      -
      +
      + Angular Data Grid ng-model="paginationOptions.currentPage" ng-change="reloadGrid()" items-per-page="paginationOptions.itemsPerPage"> -
      -
      + +
      -
      +
      @@ -155,8 +150,11 @@

      Angular Data Grid

      - + + + + diff --git a/dist/material.css b/dist/material.css index b84d354..3e7484c 100644 --- a/dist/material.css +++ b/dist/material.css @@ -6,88 +6,36 @@ table { margin: 8px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); } -:focus { - outline: none; } - -.pagination { - display: inline-block; - box-sizing: border-box; } - -.pagination > li { - display: inline-block; - vertical-align: middle; - width: auto; - height: 30px; - position: relative; - border-radius: 2px; - box-sizing: border-box; } - -.pagination a { - color: #444; - font-size: 16px; - padding: 0 10px; - line-height: 30px; - display: inline-block; - text-decoration: none; - box-sizing: border-box; } - .pagination a .md-ripple-container { - border-radius: 2px; } - -.pagination-none-svg svg { - display: none !important; } - -.pagination-none-svg .pagination-prev a, -.pagination-none-svg .pagination-next a, -.pagination-none-svg .pagination-first a, -.pagination-none-svg .pagination-last a { - width: 30px; - text-align: center; - line-height: 24px; } - -.pagination-page { - transition: background .1s ease-out, color .1s ease-out; } - .pagination-page.active { - background: #106cc8; } - .pagination-page.active a { - color: #fff; } - .pagination { transition: background .1s ease-out, color .1s ease-out; } + .pagination > li { + display: inline-block; + vertical-align: middle; + height: 30px; + position: relative; + border-radius: 2px; } + .pagination a { + color: #444; + font-size: 16px; + padding: 0 10px; + line-height: 30px; + display: inline-block; + text-decoration: none; } .pagination .active { background: #106cc8; } .pagination .active a { color: #fff; } - -.table td { + .pagination-page { + transition: background .1s ease-out, color .1s ease-out; } + .pagination-page.active { + background: #106cc8; } + .pagination-page.active a { + color: #fff; } + +.table td, .table th { border-top: 1px rgba(0, 0, 0, 0.12) solid; padding: 12px 24px; } -.table th { - padding: 12px 24px; - border-top: 1px rgba(0, 0, 0, 0.12) solid; } - -th.sortable { - line-height: 24px; - padding-right: 31px; } - th.sortable svg { - height: 18px; - width: 18px; - margin: 0 4px; - transition: fill .25s,-webkit-transform .25s; - transition: fill .25s,transform .25s; - vertical-align: middle; - display: none !important; } - th.sortable.sort-descent { - padding-right: 0; } - th.sortable.sort-descent svg { - display: inline-block !important; } - th.sortable.sort-ascent { - padding-right: 0; } - th.sortable.sort-ascent svg { - display: inline-block !important; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); } - .items-per-page .active { background: #106cc8; } .items-per-page .active a { @@ -96,138 +44,56 @@ th.sortable { .items-per-page a { cursor: pointer; } -.pagination-prev a { +.pagination-prev a, +.pagination-next a, +.pagination-first a, +.pagination-last a { font-size: 0; width: 30px; position: relative; } - .pagination-prev a:before { + .pagination-prev a:before, + .pagination-next a:before, + .pagination-first a:before, + .pagination-last a:before { left: 0; top: 0; bottom: 0; right: 0; margin: auto; position: absolute; - display: block; - width: 10px; - height: 10px; content: ''; - transform-origin: center; - border-left: 2px solid #333; - border-bottom: 2px solid #333; - transform: rotate(45deg); } - -.pagination-next a { - font-size: 0; - width: 30px; - position: relative; } - .pagination-next a:before { - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - position: absolute; display: block; width: 10px; height: 10px; - content: ''; transform-origin: center; border-left: 2px solid #333; - border-bottom: 2px solid #333; - transform: rotate(-135deg); } + border-bottom: 2px solid #333; } -.pagination-first a { - font-size: 0; - width: 30px; - position: relative; } - .pagination-first a:before { - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - position: absolute; - display: block; - width: 10px; - height: 10px; - content: ''; - transform-origin: center; - border-left: 2px solid #333; - border-bottom: 2px solid #333; - transform: rotate(45deg); } - .pagination-first a:after { - left: 4px; - width: 2px; - height: 14px; - content: ''; - top: 0; - bottom: 0; - position: absolute; - margin: auto 0; - background: #333; } +.pagination-first a:after, +.pagination-last a:after { + content: ''; + top: 0; + bottom: 0; + position: absolute; + margin: auto 0; + width: 2px; + height: 14px; + background: #333; } -.pagination-last a { - font-size: 0; - width: 30px; - position: relative; } - .pagination-last a:before { - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - position: absolute; - display: block; - width: 10px; - height: 10px; - content: ''; - transform-origin: center; - border-left: 2px solid #333; - border-bottom: 2px solid #333; - transform: rotate(-135deg); } - .pagination-last a:after { - right: 4px; - width: 2px; - height: 14px; - content: ''; - top: 0; - bottom: 0; - position: absolute; - margin: auto 0; - background: #333; } +.pagination-prev a:before { + transform: rotate(45deg); } -.form-group { - position: relative; } +.pagination-next a:before { + transform: rotate(-135deg); } -input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea { - background-color: transparent; - border: none; - border-bottom: 1px solid #444; - border-radius: 0; - outline: none; - height: 3rem; - width: 100%; - font-size: 1rem; - margin: 0 0 15px 0; - padding: 0; - box-shadow: none; - box-sizing: content-box; - transition: all .2s; } - input:not([type]):focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=url]:focus, input[type=time]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=search]:focus, textarea.materialize-textarea:focus { - border-bottom: 1px solid #106cc8; - box-shadow: 0 1px 0 0 #106cc8; } - input:not([type]):focus ~ .input-label, input[type=text]:focus ~ .input-label, input[type=password]:focus ~ .input-label, input[type=email]:focus ~ .input-label, input[type=url]:focus ~ .input-label, input[type=time]:focus ~ .input-label, input[type=date]:focus ~ .input-label, input[type=datetime-local]:focus ~ .input-label, input[type=tel]:focus ~ .input-label, input[type=number]:focus ~ .input-label, input[type=search]:focus ~ .input-label, textarea.materialize-textarea:focus ~ .input-label { - -webkit-transform: translateY(-140%) scale(1); - transform: translateY(-140%) scale(1); - color: #106cc8; } +.pagination-first a:before { + transform: rotate(45deg); } -.input-label { - color: #444; - position: absolute; - top: 0.8rem; - left: 0; - font-size: 1rem; - cursor: text; - transition: all .2s; - transform: scale(1.25); - transform-origin: left bottom; } +.pagination-first a:after { + left: 4px; } + +.pagination-last a:before { + transform: rotate(-135deg); } + +.pagination-last a:after { + right: 4px; } diff --git a/index.html b/index.html index f16c8d0..6f1283e 100644 --- a/index.html +++ b/index.html @@ -118,6 +118,8 @@

      Angular Data Grid

      ng-model="status" ng-change="filter()"> + @@ -166,8 +168,11 @@

      Angular Data Grid

      - + + + + diff --git a/src/css/demo.scss b/src/css/demo.scss index 1b60d93..961b684 100644 --- a/src/css/demo.scss +++ b/src/css/demo.scss @@ -1,6 +1,10 @@ +@import 'variables'; *, *:before, *:after { box-sizing: border-box; } +:focus { + outline: none; +} body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } @@ -57,6 +61,7 @@ h1 { } } } + .table { td { padding: 12px 24px !important; @@ -70,74 +75,53 @@ h1 { th.sortable { line-height: 24px; position: relative; - &.sort-descent { - &:before { + &.sort-descent, + &.sort-ascent { + &:before, + &:after { content: ''; position: absolute; + margin: auto 0; + } + &:before { left: 12px; width: 2px; - background: #333; + background: $backgroundIcons; height: 12px; - top: 0; - bottom: 0; - margin: auto 0; } &:after { - content: ''; - position: absolute; left: 9px; - border-top: 2px solid #333; - border-left: 2px solid #333; + border-top: 2px solid $backgroundIcons; + border-left: 2px solid $backgroundIcons; transform-origin:center; - transform: rotate(-135deg); height: 8px; width: 8px; - top: 6px; + } + } + &.sort-descent { + &:before, + &:after { bottom: 0; - margin: auto 0; + } + &:before { + top: 0; + } + &:after { + transform: rotate(-135deg); + top: 6px; } } &.sort-ascent { - &:before { - content: ''; - position: absolute; - left: 12px; - width: 2px; - background: #333; - height: 12px; + &:before, + &:after { top: 0; + } + &:before { bottom: 0; - margin: auto 0; } &:after { - content: ''; - position: absolute; - left: 9px; - border-top: 2px solid #333; - border-left: 2px solid #333; - transform-origin:center; transform: rotate(45deg); - height: 8px; - width: 8px; - top: 0; bottom: 6px; - margin: auto 0; } } -} -.col-wrap { - font-size: 0; - padding: 25px 0; - .col2 { - vertical-align: top; - display: inline-block; - width: 50%; - padding: 0 15px; - } - .col3 { - vertical-align: top; - display: inline-block; - width: 33.33%; - padding: 0 15px; - } } \ No newline at end of file diff --git a/src/css/material.scss b/src/css/material.scss index fa69a9a..49c4557 100644 --- a/src/css/material.scss +++ b/src/css/material.scss @@ -2,116 +2,55 @@ table { border-collapse: collapse; border-spacing: 0; - width: 100%; font-size: 16px; margin: 8px; box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12); } -:focus { - outline: none; -} .pagination { - display: inline-block; - box-sizing: border-box; -} -.pagination > li{ - display: inline-block; - vertical-align: middle; - width: auto; - height: 30px; - position: relative; - border-radius: 2px; - box-sizing: border-box; -} -.pagination a { - color: $textColor; - font-size: 16px; - padding: 0 10px; - line-height: 30px; - display: inline-block; - text-decoration: none; - box-sizing: border-box; - .md-ripple-container { + transition: background .1s ease-out, color .1s ease-out; + & > li{ + display: inline-block; + vertical-align: middle; + height: 30px; + position: relative; border-radius: 2px; } -} -.pagination-none-svg { - svg { - display: none !important; - } - .pagination-prev, - .pagination-next, - .pagination-first, - .pagination-last { - a { - width: 30px; - text-align: center; - line-height: 24px; - } + a { + color: $foregroundDefault; + font-size: 16px; + padding: 0 10px; + line-height: 30px; + display: inline-block; + text-decoration: none; } -} -.pagination-page { - transition: background .1s ease-out, color .1s ease-out; - &.active { - background: $activeColor; + .active { + background: $backgroundActive; a { - color: $activeText; + color: $foregroundActive; } } -} -.pagination { - transition: background .1s ease-out, color .1s ease-out; - .active { - background: $activeColor; - a { - color: $activeText; + &-page { + transition: background .1s ease-out, color .1s ease-out; + &.active { + background: $backgroundActive; + a { + color: $foregroundActive; + } } } } .table { - td { + td, th { border-top: 1px rgba(0,0,0,.12) solid; padding: 12px 24px; } - th { - padding: 12px 24px; - border-top: 1px rgba(0,0,0,.12) solid; - } -} -th.sortable { - line-height: 24px; - svg { - height: 18px; - width: 18px; - margin: 0 4px; - transition: fill .25s,-webkit-transform .25s; - transition: fill .25s,transform .25s; - vertical-align: middle; - display: none !important; - } - padding-right: 31px; - &.sort-descent { - padding-right: 0; - svg { - display: inline-block !important; - } - } - &.sort-ascent { - padding-right: 0; - svg { - display: inline-block !important; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - } - } } - .items-per-page { .active { - background: $activeColor; + background: $backgroundActive; a { - color: $activeText; + color: $foregroundActive; } } a { @@ -119,148 +58,68 @@ th.sortable { } } -.pagination-prev a { - font-size: 0; - width: 30px; - position: relative; - &:before { - left: 0; +.pagination-prev, +.pagination-next, +.pagination-first, +.pagination-last { + a { + font-size: 0; + width: 30px; + position: relative; + &:before { + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + position: absolute; + content: ''; + display: block; + width: 10px; + height: 10px; + transform-origin:center; + border-left: 2px solid $backgroundIcons; + border-bottom: 2px solid $backgroundIcons; + } + } +} +.pagination-first, +.pagination-last { + a:after { + content: ''; top: 0; bottom: 0; - right: 0; - margin: auto; position: absolute; - display: block; - width: 10px; - height: 10px; - content: ''; - transform-origin:center; - border-left: 2px solid $iconsColor; - border-bottom: 2px solid $iconsColor; + margin: auto 0; + width: 2px; + height: 14px; + background: $backgroundIcons; + } +} + +.pagination-prev a { + &:before { transform: rotate(45deg); } } .pagination-next a { - font-size: 0; - width: 30px; - position: relative; &:before { - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - position: absolute; - display: block; - width: 10px; - height: 10px; - content: ''; - transform-origin:center; - border-left: 2px solid $iconsColor; - border-bottom: 2px solid $iconsColor; transform: rotate(-135deg); } } .pagination-first a { - font-size: 0; - width: 30px; - position: relative; &:before { - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - position: absolute; - display: block; - width: 10px; - height: 10px; - content: ''; - transform-origin:center; - border-left: 2px solid $iconsColor; - border-bottom: 2px solid $iconsColor; transform: rotate(45deg); } &:after { left: 4px; - width: 2px; - height: 14px; - content: ''; - top: 0; - bottom: 0; - position: absolute; - margin: auto 0; - background: $iconsColor; } } .pagination-last a { - font-size: 0; - width: 30px; - position: relative; &:before { - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - position: absolute; - display: block; - width: 10px; - height: 10px; - content: ''; - transform-origin:center; - border-left: 2px solid $iconsColor; - border-bottom: 2px solid $iconsColor; transform: rotate(-135deg); } &:after { right: 4px; - width: 2px; - height: 14px; - content: ''; - top: 0; - bottom: 0; - position: absolute; - margin: auto 0; - background: $iconsColor; - } -} - -.form-group { - position: relative; -} -input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea { - background-color: transparent; - border: none; - border-bottom: 1px solid $textColor; - border-radius: 0; - outline: none; - height: 3rem; - width: 100%; - font-size: 1rem; - margin: 0 0 15px 0; - padding: 0; - box-shadow: none; - box-sizing: content-box; - transition: all .2s; - &:focus { - border-bottom: 1px solid $activeColor; - box-shadow: 0 1px 0 0 $activeColor; - &~.input-label{ - -webkit-transform: translateY(-140%) scale(1); - transform: translateY(-140%) scale(1); - color: $activeColor; - } } -} -.input-label { - color: $textColor; - position: absolute; - top: 0.8rem; - left: 0; - font-size: 1rem; - cursor: text; - transition: all .2s; - transform: scale(1.25); - transform-origin: left bottom; } \ No newline at end of file diff --git a/src/css/variables.scss b/src/css/variables.scss index 6217f6b..40d2f45 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -1,4 +1,4 @@ -$activeColor: rgb(16,108,200); -$activeText: #fff; -$textColor: #444; -$iconsColor: #333; \ No newline at end of file +$backgroundActive: rgb(16,108,200); +$foregroundActive: #fff; +$foregroundDefault: #444; +$backgroundIcons: #333; \ No newline at end of file From 1573f7bdbadb0be5afa4835ecf87d02411b37dae Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Wed, 30 Dec 2015 16:56:30 +0300 Subject: [PATCH 012/119] remove link from first column --- index.html | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/index.html b/index.html index 1ad4606..fa98fbf 100644 --- a/index.html +++ b/index.html @@ -128,21 +128,9 @@

      Angular Data Grid

      - - - - - - - - - - - - - + From 55ba372ac9f4ccb1f187d9a478ab6e2459b914c1 Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Mon, 4 Jan 2016 12:46:04 +0300 Subject: [PATCH 013/119] more docs updates --- README.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 48 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 30d429a..dd0bb52 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,29 @@ ##Angular Data Grid -Light and flexible Data Grid for AngularJS, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, +Light and flexible Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, seamless synchronization with browser address bar and total freedom in choosing mark-up and styling suitable for your application. -Samples: http://angular-data-grid.github.io/ +Demo Material Design: http://angular-data-grid.github.io/demo/ +Demo Bootstrap: http://angular-data-grid.github.io/ ### Features - Does not have any hard-coded template so you can choose any mark-up you need, from basic `````` layout to any ```
      ``` structure. - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes. - - Built-in sync with browser address bar (URL), so you copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. - - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive, so it can be easily synchronized with any data changes inside your controller. !With great power comes great responsibility, so be careful to use non-isolated API correctly. + - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. + - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. !With great power comes great responsibility, so be careful to use non-isolated API correctly. + +### Installation + + - Using Bower + +``` +bower install angular-data-grid +``` + + - Download ZIP archive [from here](https://github.com/angular-data-grid/angular-data-grid.github.io/archive/master.zip) + + Then use files from ```dist``` folder. ### Setup @@ -27,7 +40,9 @@ Samples: http://angular-data-grid.github.io/ angular.module('myApp', ['dataGrid', 'pagination']) ``` -3. Initialize grid with additional options in your controller, like: +3. Initialize grid with additional options in your controller + +JS: ```javascript $scope.gridOptions = { @@ -49,6 +64,34 @@ angular.module('myApp', ['dataGrid', 'pagination']) urlSync: true }; ``` + +And HTML: + +``` + +
      + /// grid mark-up goes here +
      + + ``` + +### Fetch Data + + - For client-side pagination/filtering to fetch all data at once: just assign ```gridOptions.data``` to any JSON array object. + + - For server side pagination/filtering to fetch data by page: assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter: + + ```javascript + $scope.gridOptions = { + getData: getServerData, + }; + function getServerData(params, callback) { + $http.get(contextPath + '/some/list' + params).then(function (response) { + var data = response.data.some, + totalItems = response.data.someCount; + callback(data, totalItems); + }; +``` ### Sorting You can use the sortable directive to have a built in sort feature. You add the attribute sortable to your table headers. This will specify the property name you want to sort by. Also if you add class sortable to your element, sort arrows will be displayed for acs/decs sort directions. From 3eabc58e555dcfdb1c7bedea5567e7ba20d42a13 Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Mon, 4 Jan 2016 12:48:24 +0300 Subject: [PATCH 014/119] try to apply HTML syntax highlight --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dd0bb52..ceec1bf 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,7 @@ JS: And HTML: -``` +```HTML
      /// grid mark-up goes here From 685c9d207d7ff2a83b61f38f289161cdd2fab18e Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Mon, 4 Jan 2016 13:09:55 +0300 Subject: [PATCH 015/119] API description update --- README.md | 75 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 50 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index ceec1bf..b87bc1e 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,17 @@ ##Angular Data Grid - Light and flexible Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, -seamless synchronization with browser address bar and total freedom in choosing mark-up and styling suitable for your application. +seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. -Demo Material Design: http://angular-data-grid.github.io/demo/ +Demo Material Design: http://angular-data-grid.github.io/demo/material.html Demo Bootstrap: http://angular-data-grid.github.io/ ### Features - - Does not have any hard-coded template so you can choose any mark-up you need, from basic ```
      ``` layout to any ```
      ``` structure. - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes. - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. !With great power comes great responsibility, so be careful to use non-isolated API correctly. ### Installation - - Using Bower ``` @@ -23,11 +20,10 @@ bower install angular-data-grid - Download ZIP archive [from here](https://github.com/angular-data-grid/angular-data-grid.github.io/archive/master.zip) - Then use files from ```dist``` folder. +> Then use files from ```dist``` folder (see below). ### Setup - -1. Include scripts in you application: dataGrid.min.js and pagination.min.js (include the second one only if you need pagination), like: +1. Include scripts in you application: ```dataGrid.min.js``` and ```pagination.min.js``` (include the second one only if you need pagination), like: ```javascript @@ -40,9 +36,15 @@ bower install angular-data-grid angular.module('myApp', ['dataGrid', 'pagination']) ``` -3. Initialize grid with additional options in your controller +3. Initialize grid with additional options in your controller. To do that, add ```grid-data``` directive to element and pass 2 required parameters ```grid-options``` and ```grid-actions```: + +```HTML -JS: +
      + /// grid mark-up goes here +
      + + ``` ```javascript $scope.gridOptions = { @@ -64,19 +66,8 @@ JS: urlSync: true }; ``` - -And HTML: - -```HTML - -
      - /// grid mark-up goes here -
      - - ``` ### Fetch Data - - For client-side pagination/filtering to fetch all data at once: just assign ```gridOptions.data``` to any JSON array object. - For server side pagination/filtering to fetch data by page: assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter: @@ -94,21 +85,55 @@ And HTML: ``` ### Sorting -You can use the sortable directive to have a built in sort feature. You add the attribute sortable to your table headers. This will specify the property name you want to sort by. Also if you add class sortable to your element, sort arrows will be displayed for acs/decs sort directions. +To enable sorting, just add attribute ```sortable``` to your table headers. This will specify the property name you want to sort by. Also you can add class ```sortable``` to display acs/decs arrows. -You can use Data Grid module to easily display data in grids with built-in sorting, outer filters and url-synchronization. To use it, you must add grid-data directive to element and pass 2 required parameters ```grid-options``` and ```grid-actions```. +```HTML +
      + +``` +### Basic API ```grid-options``` : Name of object in your controller with start options for grid. You must create this object with at least 1 required parameter - data. ```grid-actions```: Name of object in your controller with functions for updating grid. You can can just pass string or create empty object in controller. Use this object for calling methods of directive: sort, filter, refresh. -Inside the ```grid-data``` directive you can use grid-pagination directive. It's just wrapper of angular-ui pagination directive. You can pass any parameters from pagination directive. Also you can use grid-item-per-page directive and pass into it array of value (f.e. "10, 25, 50"). If you need get size of current displayed items you can use filtered variable. +Inside the ```grid-data``` directive you can use grid-pagination directive. You can pass any parameters from pagination directive. Also you can use grid-item-per-page directive and pass into it array of value (e.g. "10, 25, 50"). If you need get size of current displayed items you can use filtered variable. ### Filters -Data Grid module has 4 types built in filters. To use it, you must add attribute filter-by to any element and pass property name, which you want filtering. Also you need add attribute filter-type with type of filter (text, select, dateFrom, dateTo). After that you need call filter() method in ng-change for text or select inputs and in ng-blur/ng-focus for datepickers. Filters synchronize with URL by ng-model value. +Data Grid supports 4 built-in types of filters: ```text```, ```select```, ```dateFrom``` and ```dateTo```. To use it, add attribute ```filter-by``` to any element and pass property name, which you want filtering. Also you need add attribute ```filter-type``` with type of filter. After that you need call ```filter()``` method in ```ng-change``` for text or select inputs and in ```ng-blur/ng-focus``` for datepickers. Filters synchronize with URL by ```ng-model``` value. + +```HTML + + + +``` ### Custom Filters If you need use some custom filters (f.e. filter by first letter), you must add filter-by to specify property name, which you want filtering and add ng-model property. Then create in gridOptions.customFilters variable named as it ng-model value and contain filtering function. Filtering function accept items, value, predicate arguments and must return filtered array. +```javascript + + $scope.gridOptions = { + data: [], + customFilters: { + startFrom: function (items, value, predicate) { + return items.filter(function (item) { + return value && item[predicate] ? !item[predicate].toLowerCase().indexOf(value.toLowerCase()) : true; + }); + } + } + }; + +``` + ### Others All filters has parameter disable-url. If you set it as true value - URL-synchronization for this filter will be disabled. If you need use 2 or more grids on page, you must add id to grids, and use grid-id attribute on filters to specify their grid. From ddd21d3d4501935f008f203f95c65c395117fedd Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Mon, 4 Jan 2016 13:42:44 +0300 Subject: [PATCH 016/119] pagination API added --- README.md | 93 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 82 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index b87bc1e..9e6767c 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ Light and flexible Data Grid for AngularJS apps, with built-in sorting, paginati seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Demo Material Design: http://angular-data-grid.github.io/demo/material.html + Demo Bootstrap: http://angular-data-grid.github.io/ ### Features @@ -12,15 +13,16 @@ Demo Bootstrap: http://angular-data-grid.github.io/ - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. !With great power comes great responsibility, so be careful to use non-isolated API correctly. ### Installation - - Using Bower + +Using Bower: ``` bower install angular-data-grid ``` - - Download ZIP archive [from here](https://github.com/angular-data-grid/angular-data-grid.github.io/archive/master.zip) +Using direct download: get ZIP archive [from here](https://github.com/angular-data-grid/angular-data-grid.github.io/archive/master.zip) -> Then use files from ```dist``` folder (see below). +Then use files from ```dist``` folder (see below). ### Setup 1. Include scripts in you application: ```dataGrid.min.js``` and ```pagination.min.js``` (include the second one only if you need pagination), like: @@ -61,15 +63,30 @@ angular.module('myApp', ['dataGrid', 'pagination']) return value && item[predicate] ? !item[predicate].toLowerCase().indexOf(value.toLowerCase()) : true; }); } - }, - //optional parameter - URL synchronization - urlSync: true + } }; ``` + +### Basic API + +1. ```grid-options```: object in your controller with start options for grid. You must create this object with at least 1 required parameter - data. +2. ```grid-actions```: object in your controller with functions for updating grid. You can pass string or create empty object in controller. +Use this object for calling methods of directive: ```sort()```, ```filter()```, ```refresh()```. +3. Inside ```grid-data``` directive you can use ```pagination``` directive. +4. Also you can use ```grid-item-per-page``` directive and pass into it array of values (e.g. 10, 25, 50). +5. If you need get size of current displayed items you can use ```{{filtered.length}}``` value. ### Fetch Data - For client-side pagination/filtering to fetch all data at once: just assign ```gridOptions.data``` to any JSON array object. + ```javascript + + $scope.gridOptions = { + data: [], //required parameter - array with data + }; + + ``` + - For server side pagination/filtering to fetch data by page: assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter: ```javascript @@ -96,12 +113,65 @@ To enable sorting, just add attribute ```sortable``` to your table headers. This ``` -### Basic API -```grid-options``` : Name of object in your controller with start options for grid. You must create this object with at least 1 required parameter - data. +```javascript +$scope.gridOptions = { + data: [], //required parameter - array with data + //optional parameter - start sort options + sort: { + predicate: 'companyName', + direction: 'asc' + } + }; +``` + +### Pagination + +You can optionally use ```pagination``` directive to display paging with previous/next and first/last controls. +Directive is built on a base of excellent [Angular UI](https://angular-ui.github.io/bootstrap/) component and share extensive API: + +```HTML + + +``` + +*Pagination Settings* +Settings can be provided as attributes in the or globally configured through the paginationConfig. + + ```ng-change``` : ng-change can be used together with ng-model to call a function whenever the page changes. + + ```ng-model``` : Current page number. First page is 1. + + ```ng-disabled``` : Used to disable the pagination component + + ```total-items``` : Total number of items in all pages. + + ```items-per-page``` (Defaults: 10) : Maximum number of items per page. A value less than one indicates all items on one page. + + ```max-size``` (Defaults: null) : Limit number for pagination size. + + ```num-pages``` readonly (Defaults: angular.noop) : An optional expression assigned the total number of pages to display. + + ```rotate``` (Defaults: true) : Whether to keep current page in the middle of the visible ones. + + ```direction-links``` (Default: true) : Whether to display Previous / Next buttons. + + ```previous-text``` (Default: 'Previous') : Text for Previous button. + + ```next-text``` (Default: 'Next') : Text for Next button. + + ```boundary-links``` (Default: false) : Whether to display First / Last buttons. + + ```first-text``` (Default: 'First') : Text for First button. -```grid-actions```: Name of object in your controller with functions for updating grid. You can can just pass string or create empty object in controller. Use this object for calling methods of directive: sort, filter, refresh. + ```last-text``` (Default: 'Last') : Text for Last button. -Inside the ```grid-data``` directive you can use grid-pagination directive. You can pass any parameters from pagination directive. Also you can use grid-item-per-page directive and pass into it array of value (e.g. "10, 25, 50"). If you need get size of current displayed items you can use filtered variable. + ```template-url``` (Default: 'template/pagination/pagination.html') : Override the template for the component with a custom provided template ### Filters Data Grid supports 4 built-in types of filters: ```text```, ```select```, ```dateFrom``` and ```dateTo```. To use it, add attribute ```filter-by``` to any element and pass property name, which you want filtering. Also you need add attribute ```filter-type``` with type of filter. After that you need call ```filter()``` method in ```ng-change``` for text or select inputs and in ```ng-blur/ng-focus``` for datepickers. Filters synchronize with URL by ```ng-model``` value. @@ -136,4 +206,5 @@ If you need use some custom filters (f.e. filter by first letter), you must add ``` ### Others -All filters has parameter disable-url. If you set it as true value - URL-synchronization for this filter will be disabled. If you need use 2 or more grids on page, you must add id to grids, and use grid-id attribute on filters to specify their grid. +All filters have parameter disable-url. If you set it as ```true```, URL-synchronization for this filter will be disabled. +If you need use 2 or more grids on page, you must add id to grids, and use ```grid-id``` attribute on filters to specify their grid. \ No newline at end of file From 11dc3b49089fba772153871c1e3bb791983e28e7 Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Mon, 4 Jan 2016 13:47:12 +0300 Subject: [PATCH 017/119] fixing styling --- README.md | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 9e6767c..ebe6f30 100644 --- a/README.md +++ b/README.md @@ -129,18 +129,13 @@ $scope.gridOptions = { You can optionally use ```pagination``` directive to display paging with previous/next and first/last controls. Directive is built on a base of excellent [Angular UI](https://angular-ui.github.io/bootstrap/) component and share extensive API: -```HTML - - +```HTML + + ``` -*Pagination Settings* +**Pagination Setting** Settings can be provided as attributes in the or globally configured through the paginationConfig. ```ng-change``` : ng-change can be used together with ng-model to call a function whenever the page changes. From d6a9341c37be905c652071ad1ef67319352cc9f8 Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Mon, 4 Jan 2016 13:55:58 +0300 Subject: [PATCH 018/119] fixing docs styling2 --- README.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index ebe6f30..09bd05c 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,8 @@ Demo Bootstrap: http://angular-data-grid.github.io/ - Does not have any hard-coded template so you can choose any mark-up you need, from basic ```
      + Order # + + Date Placed +
      ``` layout to any ```
      ``` structure. - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes. - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. - - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. !With great power comes great responsibility, so be careful to use non-isolated API correctly. + - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. + NOTE! With great power comes great responsibility, so use non-isolated API carefully. ### Installation @@ -130,12 +131,15 @@ You can optionally use ```pagination``` directive to display paging with previou Directive is built on a base of excellent [Angular UI](https://angular-ui.github.io/bootstrap/) component and share extensive API: ```HTML - + ``` -**Pagination Setting** Settings can be provided as attributes in the or globally configured through the paginationConfig. ```ng-change``` : ng-change can be used together with ng-model to call a function whenever the page changes. @@ -183,7 +187,7 @@ Data Grid supports 4 built-in types of filters: ```text```, ```select```, ```dat ``` ### Custom Filters -If you need use some custom filters (f.e. filter by first letter), you must add filter-by to specify property name, which you want filtering and add ng-model property. Then create in gridOptions.customFilters variable named as it ng-model value and contain filtering function. Filtering function accept items, value, predicate arguments and must return filtered array. +If you need use some custom filters (f.e. filter by first letter), you must add `filter-by` to specify property name, which you want filtering and add `ng-model` property. Then create in `gridOptions.customFilters` variable named as `ng-model` value and contain filtering function. Filtering function accept items, value, predicate arguments and must return filtered array. ```javascript From db901a48d1872eb60979e97fbfbc5d1f5b447e60 Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Mon, 4 Jan 2016 14:05:59 +0300 Subject: [PATCH 019/119] adding HTML table sample to docs --- README.md | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 09bd05c..fac06d6 100644 --- a/README.md +++ b/README.md @@ -43,8 +43,34 @@ angular.module('myApp', ['dataGrid', 'pagination']) ```HTML -
      - /// grid mark-up goes here +
      + ///sample table layout goes below, but remember that you can you any mark-up here! +
      + + + + + + + + + + + + + + + + +
      + Order # + + Date Placed + + Purchase Order # + + Total +
      ``` From 5d79c49d1b012b9941c17e1cc5c9584303a78797 Mon Sep 17 00:00:00 2001 From: "Zhuk, Alexander" Date: Mon, 4 Jan 2016 14:26:49 +0300 Subject: [PATCH 020/119] README: simplifying code syntax --- README.md | 57 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 31 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index fac06d6..551a1ec 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Demo Material Design: http://angular-data-grid.github.io/demo/material.html Demo Bootstrap: http://angular-data-grid.github.io/ ### Features - - Does not have any hard-coded template so you can choose any mark-up you need, from basic `````` layout to any ```
      ``` structure. + - Does not have any hard-coded template so you can choose any mark-up you need, from basic `
      ` layout to any `
      ` structure. - Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes. - Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side. - Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller. @@ -23,28 +23,28 @@ bower install angular-data-grid Using direct download: get ZIP archive [from here](https://github.com/angular-data-grid/angular-data-grid.github.io/archive/master.zip) -Then use files from ```dist``` folder (see below). +Then use files from *dist* folder (see below). ### Setup -1. Include scripts in you application: ```dataGrid.min.js``` and ```pagination.min.js``` (include the second one only if you need pagination), like: +1. Include scripts in you application: `dataGrid.min.js` and `pagination.min.js` (include the second one only if you need pagination). ```javascript - - + + ``` -2. Inject dataGrid dependency in your module: +2. Inject dataGrid dependency in your module. ```javascript angular.module('myApp', ['dataGrid', 'pagination']) ``` -3. Initialize grid with additional options in your controller. To do that, add ```grid-data``` directive to element and pass 2 required parameters ```grid-options``` and ```grid-actions```: +3. Initialize grid with additional options in your controller. To do that, add `grid-data` directive to element and pass 2 required parameters `grid-options` and `grid-actions`: ```HTML -
      - ///sample table layout goes below, but remember that you can you any mark-up here! +
      +
      @@ -96,22 +96,20 @@ angular.module('myApp', ['dataGrid', 'pagination']) ### Basic API -1. ```grid-options```: object in your controller with start options for grid. You must create this object with at least 1 required parameter - data. -2. ```grid-actions```: object in your controller with functions for updating grid. You can pass string or create empty object in controller. -Use this object for calling methods of directive: ```sort()```, ```filter()```, ```refresh()```. -3. Inside ```grid-data``` directive you can use ```pagination``` directive. -4. Also you can use ```grid-item-per-page``` directive and pass into it array of values (e.g. 10, 25, 50). -5. If you need get size of current displayed items you can use ```{{filtered.length}}``` value. +1. `grid-options`: object in your controller with start options for grid. You must create this object with at least 1 required parameter - data. +2. `grid-actions`: object in your controller with functions for updating grid. You can pass string or create empty object in controller. +Use this object for calling methods of directive: `sort()`, `filter()`, `refresh()`. +3. Inside `grid-data` directive you can use `pagination` directive. +4. Also you can use `grid-item-per-page` directive and pass into it array of values (e.g. 10, 25, 50). +5. If you need get size of current displayed items you can use `{{filtered.length}}` value. ### Fetch Data - - For client-side pagination/filtering to fetch all data at once: just assign ```gridOptions.data``` to any JSON array object. - - ```javascript + - For client-side pagination/filtering to fetch all data at once: just assign `gridOptions.data` to any JSON array object. +```javascript $scope.gridOptions = { data: [], //required parameter - array with data }; - ``` - For server side pagination/filtering to fetch data by page: assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter: @@ -129,7 +127,8 @@ Use this object for calling methods of directive: ```sort()```, ```filter()```, ``` ### Sorting -To enable sorting, just add attribute ```sortable``` to your table headers. This will specify the property name you want to sort by. Also you can add class ```sortable``` to display acs/decs arrows. +To enable sorting, just add attribute `sortable` to your table headers. This will specify the property name you want to sort by. +Also you can add class `sortable` to display acs/decs arrows. ```HTML
      @@ -153,8 +152,8 @@ $scope.gridOptions = { ### Pagination -You can optionally use ```pagination``` directive to display paging with previous/next and first/last controls. -Directive is built on a base of excellent [Angular UI](https://angular-ui.github.io/bootstrap/) component and share extensive API: +You can optionally use `pagination` directive to display paging with previous/next and first/last controls. +Directive is built on a base of excellent [Angular UI](https://angular-ui.github.io/bootstrap/) component and shares extensive API: ```HTML or globally configure ```template-url``` (Default: 'template/pagination/pagination.html') : Override the template for the component with a custom provided template ### Filters -Data Grid supports 4 built-in types of filters: ```text```, ```select```, ```dateFrom``` and ```dateTo```. To use it, add attribute ```filter-by``` to any element and pass property name, which you want filtering. Also you need add attribute ```filter-type``` with type of filter. After that you need call ```filter()``` method in ```ng-change``` for text or select inputs and in ```ng-blur/ng-focus``` for datepickers. Filters synchronize with URL by ```ng-model``` value. +Data Grid supports 4 built-in types of filters: `text`, `select`, `dateFrom` and `dateTo`. +To use it, add attribute `filter-by` to any element and pass property name, which you want filtering. +Also you need add attribute `filter-type` with type of filter. +After that you need call `filter()` method in `ng-change` for text or select inputs and in `ng-blur/ng-focus` for datepickers. +Filters are synchronized with URL by `ng-model` value. ```HTML @@ -213,7 +216,8 @@ Data Grid supports 4 built-in types of filters: ```text```, ```select```, ```dat ``` ### Custom Filters -If you need use some custom filters (f.e. filter by first letter), you must add `filter-by` to specify property name, which you want filtering and add `ng-model` property. Then create in `gridOptions.customFilters` variable named as `ng-model` value and contain filtering function. Filtering function accept items, value, predicate arguments and must return filtered array. +If you need use some custom filters (f.e. filter by first letter), add `filter-by` to specify property name, which you want filtering and add `ng-model` property. +Then create in `gridOptions.customFilters` variable named as `ng-model` with filtering function. Filtering function accepts items, value, predicate arguments and returns filtered array. ```javascript @@ -231,5 +235,6 @@ If you need use some custom filters (f.e. filter by first letter), you must add ``` ### Others -All filters have parameter disable-url. If you set it as ```true```, URL-synchronization for this filter will be disabled. -If you need use 2 or more grids on page, you must add id to grids, and use ```grid-id``` attribute on filters to specify their grid. \ No newline at end of file +All filters have optional parameter `disable-url`. If you set it to **true**, URL-synchronization for this filter will be disabled. + +If you need to use 2 or more grids on page, please add id to grids, and then use ```grid-id``` attribute on filters to specify their corresponding grid. \ No newline at end of file From e57d17f4e9c3bef539a2524a7aeb8f5f691c1d80 Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Mon, 4 Jan 2016 16:24:08 +0300 Subject: [PATCH 021/119] change project structure, update material theme --- demo/demo.css | 97 -- demo/demo.scss | 0 demo/demoApp.js | 6 +- demo/index.html | 162 --- demo/material.html | 163 +++ .../scss/angular-data-grid.material.scss | 65 + .../scss/angular-data-grid.variables.scss | 2 +- dist/dataGrid.js | 2 +- dist/dataGrid.min.js | 2 +- dist/material.css | 99 -- gulpfile.js | 12 +- index.html | 293 ++-- src/css/demo.scss | 127 -- src/css/material.scss | 125 -- src/js/dataGrid.js | 2 +- src/js/demoApp.js | 1173 ----------------- 16 files changed, 388 insertions(+), 1942 deletions(-) create mode 100644 demo/demo.scss delete mode 100644 demo/index.html create mode 100644 demo/material.html create mode 100644 demo/material/scss/angular-data-grid.material.scss rename src/css/variables.scss => demo/material/scss/angular-data-grid.variables.scss (66%) delete mode 100644 dist/material.css delete mode 100644 src/css/demo.scss delete mode 100644 src/css/material.scss delete mode 100644 src/js/demoApp.js diff --git a/demo/demo.css b/demo/demo.css index d72570b..e69de29 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -1,97 +0,0 @@ -*, *:before, *:after { - box-sizing: border-box; } - -:focus { - outline: none; } - -body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } - -h1 { - margin-top: 20px; - margin-bottom: 10px; - font-family: inherit; - font-weight: 500; - line-height: 1.1; - color: inherit; - font-size: 36px; } - -.container { - max-width: 1170px; - margin: 0 auto; - padding-right: 15px; - padding-left: 15px; } - -.b-change-theme { - padding: 20px; - margin-bottom: 20px; } - .b-change-theme__link { - font-size: 16px; - line-height: 20px; - font-weight: 400; - color: #000; - display: inline-block; - vertical-align: middle; - text-decoration: none; } - .b-change-theme__link + .b-change-theme__link { - margin-left: 30px; } - .b-change-theme__link:before { - width: 20px; - height: 20px; - content: ''; - border: 1px solid #999; - margin-right: 8px; - border-radius: 50%; - vertical-align: bottom; - display: inline-block; } - .b-change-theme__link:hover { - text-decoration: underline; - color: #000; } - .b-change-theme__link._active { - text-decoration: none; - position: relative; } - .b-change-theme__link._active:before { - box-shadow: inset 0 0 0 3px #fff; - background: #999; } - -.table td { - padding: 12px 24px !important; - vertical-align: middle !important; } - -.table th { - padding: 12px 24px !important; - vertical-align: middle !important; } - -th.sortable { - line-height: 24px; - position: relative; } - th.sortable.sort-descent:before, th.sortable.sort-descent:after, th.sortable.sort-ascent:before, th.sortable.sort-ascent:after { - content: ''; - position: absolute; - margin: auto 0; } - th.sortable.sort-descent:before, th.sortable.sort-ascent:before { - left: 12px; - width: 2px; - background: #333; - height: 12px; } - th.sortable.sort-descent:after, th.sortable.sort-ascent:after { - left: 9px; - border-top: 2px solid #333; - border-left: 2px solid #333; - transform-origin: center; - height: 8px; - width: 8px; } - th.sortable.sort-descent:before, th.sortable.sort-descent:after { - bottom: 0; } - th.sortable.sort-descent:before { - top: 0; } - th.sortable.sort-descent:after { - transform: rotate(-135deg); - top: 6px; } - th.sortable.sort-ascent:before, th.sortable.sort-ascent:after { - top: 0; } - th.sortable.sort-ascent:before { - bottom: 0; } - th.sortable.sort-ascent:after { - transform: rotate(45deg); - bottom: 6px; } diff --git a/demo/demo.scss b/demo/demo.scss new file mode 100644 index 0000000..e69de29 diff --git a/demo/demoApp.js b/demo/demoApp.js index 5122559..2a950b4 100644 --- a/demo/demoApp.js +++ b/demo/demoApp.js @@ -1,5 +1,7 @@ -angular - .module('myApp', ['dataGrid', 'pagination', 'ngMaterial']) +// TO DO +// fully separate bootstrap and material related files: css and html + +angular.module('myApp', ['dataGrid', 'pagination', 'ngMaterial']) .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) { $scope.gridOptions = { diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index d3b2211..0000000 --- a/demo/index.html +++ /dev/null @@ -1,162 +0,0 @@ - - - - - Flat JSON format for data tables - - - - - -
      -
      -

      Angular Data Grid

      -
      - Bootstrap - Material Design -
      -
      -
      - - - - - - - - - - - - -
      -
      -
      - - found : {{filtered.length}} items - -
      - - - - - - - - - - - - - - - - - - - - - - -
      - Order # - - Date Placed - - Purchase Order # - - - - - - All Statuses - - {{option.text}} - - - - - Total - -
      - - - View - Order -
      -
      - - - - -
      -       -
      -
      -
      -
      -
      - - - - - - - - - - - - - \ No newline at end of file diff --git a/demo/material.html b/demo/material.html new file mode 100644 index 0000000..e3fdcba --- /dev/null +++ b/demo/material.html @@ -0,0 +1,163 @@ + + + + + Angular Data Grid + + + + + + +
      + +
      + Angular Data Grid — Material Design + + + + Change theme + + + + Bootstrap + + + Material Design + + + +
      +       + +
      +
      +
      + + + + +
      +
      + +
      +
      + +
      +
      +
      +
      + + found : {{filtered.length}} items + +
      + + + + + + + + + + + + + + + + + + +
      + Order # + + + All Statuses + + {{option.text}} + + + + Date Placed + + Total +
      + +
      +
      + +
      +
      + +
      +
      +
      +
      +
      +
      +       +
      + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/material/scss/angular-data-grid.material.scss b/demo/material/scss/angular-data-grid.material.scss new file mode 100644 index 0000000..31a1b0d --- /dev/null +++ b/demo/material/scss/angular-data-grid.material.scss @@ -0,0 +1,65 @@ +@import 'angular-data-grid.variables'; + +th:focus, +a:focus { + outline: none; +} +table { + margin: 0 auto 30px; +} +.max-width { + max-width: 1170px; + margin: 0 auto; + padding: 0 16px; + box-sizing: border-box; +} +th md-select { + margin: 0; +} +.md-datepicker-input { + width: 300px; +} +.pagination { + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); + padding: 0; + font-size: 0; + margin: 10px; + & > li{ + display: inline-block; + vertical-align: middle; + height: 30px; + border: 1px solid #ddd; + border-left: 0; + &:first-child { + border-left: 1px solid #ddd; + border-radius: 2px 0 0 2px; + } + &:last-child { + border-radius: 0 2px 2px 0; + } + } + a { + color: $foregroundDefault; + font-size: 13px; + padding: 0 10px; + line-height: 30px; + display: inline-block; + text-decoration: none; + } + .active { + background: $backgroundActive; + border-color: $backgroundActive; + a { + color: $foregroundActive; + } + } + &-page { + transition: background .1s ease-out, color .1s ease-out; + &.active { + background: $backgroundActive; + a { + color: $foregroundActive; + } + } + } +} \ No newline at end of file diff --git a/src/css/variables.scss b/demo/material/scss/angular-data-grid.variables.scss similarity index 66% rename from src/css/variables.scss rename to demo/material/scss/angular-data-grid.variables.scss index 40d2f45..8f426d4 100644 --- a/src/css/variables.scss +++ b/demo/material/scss/angular-data-grid.variables.scss @@ -1,4 +1,4 @@ -$backgroundActive: rgb(16,108,200); +$backgroundActive: rgb(63, 81, 181); $foregroundActive: #fff; $foregroundDefault: #444; $backgroundIcons: #333; \ No newline at end of file diff --git a/dist/dataGrid.js b/dist/dataGrid.js index 937aa9a..abdceb6 100644 --- a/dist/dataGrid.js +++ b/dist/dataGrid.js @@ -342,7 +342,7 @@ angular return; } var li = angular.element('
    • '); - var button = angular.element('' + value + ''); + var button = angular.element('' + value + ''); button.attr('ng-click', 'paginationOptions.itemsPerPage = ' + value + '; reloadGrid()'); li.attr('ng-class', '{"active" : paginationOptions.itemsPerPage == ' + value + '}'); li.append(button); diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js index d7b72d9..eda6278 100644 --- a/dist/dataGrid.min.js +++ b/dist/dataGrid.min.js @@ -1 +1 @@ -function deepFind(t,e){var i,n=e.split("."),r=t;for(i=0;it.filtered.length?t.paginationOptions.currentPage=1:t.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");t.sortOptions.predicate=decodeURIComponent(a[0]),t.sortOptions.direction=decodeURIComponent(a[1])}t.serverPagination||l()}function s(){var e=n.path().slice(1);t._gridOptions.getData("?"+e,function(e,i){t.filtered=e,t.paginationOptions.totalItems=i})}function l(){t.filtered=angular.copy(t._gridOptions.data),g(),t.filtered=i("orderBy")(t.filtered,t.sortOptions.predicate,"desc"===t.sortOptions.direction),t.paginationOptions.totalItems=t.filtered.length}function g(){t.filters.forEach(function(e){var i=e.filterBy,n=e.model,a=t[n],o=e.filterType;if(t.customFilters[n])t.filtered=t.customFilters[n](t.filtered,a,i);else if(a&&o){var s=r.getFilterByType(o);s&&(t.filtered=s(t.filtered,a,i))}})}t._gridOptions=deepFind(t,e.attr("grid-options")),t._gridActions=deepFind(t,e.attr("grid-actions")),t.serverPagination="true"===e.attr("server-pagination"),t.getDataDelay=e.attr("get-delay")||350,t._gridActions||(t.$parent[e.attr("grid-actions")]={},t._gridActions=t.$parent[e.attr("grid-actions")]),t.filtered=angular.copy(t._gridOptions.data),t.paginationOptions=t._gridOptions.pagination?angular.copy(t._gridOptions.pagination):{},t.defaultsPaginationOptions={itemsPerPage:t.paginationOptions.itemsPerPage||10,currentPage:t.paginationOptions.currentPage||1},t.paginationOptions=angular.copy(t.defaultsPaginationOptions),t.sortOptions=t._gridOptions.sort?angular.copy(t._gridOptions.sort):{},t.customFilters=t._gridOptions.customFilters?angular.copy(t._gridOptions.customFilters):{},t.urlSync=t._gridOptions.urlSync,t.$watch("_gridOptions.data",function(e){e&&e.length&&(t.filtered=angular.copy(t._gridOptions.data),t.urlSync?o(n.path()):l())}),t.sort=function(e){var i=t.sortOptions.predicate===e&&"desc"===t.sortOptions.direction?"asc":"desc";t.sortOptions.predicate=e,t.sortOptions.direction=i,t.paginationOptions.currentPage=1,t.reloadGrid()},t.filter=function(){t.paginationOptions.currentPage=1,t.reloadGrid()},t.$on("$locationChangeSuccess",function(){(t.urlSync||t.serverPagination)&&(t.serverPagination&&(clearTimeout(t.getDataTimeout),t.getDataTimeout=setTimeout(s,t.getDataDelay)),t.filtered&&o(n.path()))}),t.reloadGrid=function(){t.urlSync||t.serverPagination?a():l()},t._gridActions.refresh=t.reloadGrid,t._gridActions.filter=t.filter,t._gridActions.sort=t.sort}]).directive("gridData",["$compile","$animate",function(t,e){return{restrict:"EA",transclude:!0,replace:!0,controller:"gridController",link:function(i,n,r,a,o){function s(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}var l=[],g=[],c=[],p=i.$new(),d=n.parent(),u=r.id,f="true"===r.serverPagination;o(i,function(t){e.enter(t,n)}),angular.forEach(angular.element(d[0].querySelectorAll("[sortable]")),function(e){var i=angular.element(e),n=i.attr("sortable");l.push(i),i.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),i.attr("ng-click","sort('"+n+"')"),t(i)(p)}),angular.forEach(angular.element(document.querySelectorAll("[filter-by]")),function(e){var r=angular.element(e),a=d.find(r).length>0,o=r.attr("filter-by"),l=r.attr("filter-type")||"",c=r.attr("ng-model"),p=r.attr("disable-url");if(!u||!r.attr("grid-id")||u==r.attr("grid-id")){if("select"===l){var f=s(deepFind(i,n.attr("grid-options")+".data"),o);i[c+"Options"]=f}!~l.indexOf("date")||r.attr("ng-focus")||r.attr("ng-blur")||(r.attr("ng-focus","filter('{"+c+" : this."+c+"}')"),r.attr("ng-blur","filter('{"+c+" : this."+c+"}')"),t(r)(i)),c||(c=o,r.attr("ng-model",o),r.attr("ng-change","filter()"),t(r)(i)),g.push({model:c,isInScope:a,filterBy:o,filterType:l,disableUrl:p})}}),angular.forEach(angular.element(d[0].querySelectorAll("[grid-item]")),function(e){var i=angular.element(e);c.push(i),f?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage"),t(i)(p)}),i.sorting=l,i.rows=c,i.filters=g}}}]).directive("gridItemPerPage",["$compile",function(t){return{replace:!0,template:'
        ',link:function(e,i,n){if(n.gridItemPerPage){var r=n.gridItemPerPage.replace(/ /g,"").split(",");r.forEach(function(n){if(Number(n)){n=Number(n);var r=angular.element("
      • "),a=angular.element(""+n+"");a.attr("ng-click","paginationOptions.itemsPerPage = "+n+"; reloadGrid()"),r.attr("ng-class",'{"active" : paginationOptions.itemsPerPage == '+n+"}"),r.append(a),i.append(r),i.append(" "),t(r)(e)}})}}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~t[i].toLowerCase().indexOf(e.toLowerCase()):!0})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function n(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(r){switch(r){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return n;default:return null}}}}); \ No newline at end of file +function deepFind(t,e){var i,r=e.split("."),n=t;for(i=0;it.filtered.length?t.paginationOptions.currentPage=1:t.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");t.sortOptions.predicate=decodeURIComponent(a[0]),t.sortOptions.direction=decodeURIComponent(a[1])}t.serverPagination||l()}function s(){var e=r.path().slice(1);t._gridOptions.getData("?"+e,function(e,i){t.filtered=e,t.paginationOptions.totalItems=i})}function l(){t.filtered=angular.copy(t._gridOptions.data),g(),t.filtered=i("orderBy")(t.filtered,t.sortOptions.predicate,"desc"===t.sortOptions.direction),t.paginationOptions.totalItems=t.filtered.length}function g(){t.filters.forEach(function(e){var i=e.filterBy,r=e.model,a=t[r],o=e.filterType;if(t.customFilters[r])t.filtered=t.customFilters[r](t.filtered,a,i);else if(a&&o){var s=n.getFilterByType(o);s&&(t.filtered=s(t.filtered,a,i))}})}t._gridOptions=deepFind(t,e.attr("grid-options")),t._gridActions=deepFind(t,e.attr("grid-actions")),t.serverPagination="true"===e.attr("server-pagination"),t.getDataDelay=e.attr("get-delay")||350,t._gridActions||(t.$parent[e.attr("grid-actions")]={},t._gridActions=t.$parent[e.attr("grid-actions")]),t.filtered=angular.copy(t._gridOptions.data),t.paginationOptions=t._gridOptions.pagination?angular.copy(t._gridOptions.pagination):{},t.defaultsPaginationOptions={itemsPerPage:t.paginationOptions.itemsPerPage||10,currentPage:t.paginationOptions.currentPage||1},t.paginationOptions=angular.copy(t.defaultsPaginationOptions),t.sortOptions=t._gridOptions.sort?angular.copy(t._gridOptions.sort):{},t.customFilters=t._gridOptions.customFilters?angular.copy(t._gridOptions.customFilters):{},t.urlSync=t._gridOptions.urlSync,t.$watch("_gridOptions.data",function(e){e&&e.length&&(t.filtered=angular.copy(t._gridOptions.data),t.urlSync?o(r.path()):l())}),t.sort=function(e){var i=t.sortOptions.predicate===e&&"desc"===t.sortOptions.direction?"asc":"desc";t.sortOptions.predicate=e,t.sortOptions.direction=i,t.paginationOptions.currentPage=1,t.reloadGrid()},t.filter=function(){t.paginationOptions.currentPage=1,t.reloadGrid()},t.$on("$locationChangeSuccess",function(){(t.urlSync||t.serverPagination)&&(t.serverPagination&&(clearTimeout(t.getDataTimeout),t.getDataTimeout=setTimeout(s,t.getDataDelay)),t.filtered&&o(r.path()))}),t.reloadGrid=function(){t.urlSync||t.serverPagination?a():l()},t._gridActions.refresh=t.reloadGrid,t._gridActions.filter=t.filter,t._gridActions.sort=t.sort}]).directive("gridData",["$compile","$animate",function(t,e){return{restrict:"EA",transclude:!0,replace:!0,controller:"gridController",link:function(i,r,n,a,o){function s(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}var l=[],g=[],c=[],p=i.$new(),d=r.parent(),u=n.id,f="true"===n.serverPagination;o(i,function(t){e.enter(t,r)}),angular.forEach(angular.element(d[0].querySelectorAll("[sortable]")),function(e){var i=angular.element(e),r=i.attr("sortable");l.push(i),i.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+r+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+r+"' && sortOptions.direction === 'desc'}"),i.attr("ng-click","sort('"+r+"')"),t(i)(p)}),angular.forEach(angular.element(document.querySelectorAll("[filter-by]")),function(e){var n=angular.element(e),a=d.find(n).length>0,o=n.attr("filter-by"),l=n.attr("filter-type")||"",c=n.attr("ng-model"),p=n.attr("disable-url");if(!u||!n.attr("grid-id")||u==n.attr("grid-id")){if("select"===l){var f=s(deepFind(i,r.attr("grid-options")+".data"),o);i[c+"Options"]=f}!~l.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+c+" : this."+c+"}')"),n.attr("ng-blur","filter('{"+c+" : this."+c+"}')"),t(n)(i)),c||(c=o,n.attr("ng-model",o),n.attr("ng-change","filter()"),t(n)(i)),g.push({model:c,isInScope:a,filterBy:o,filterType:l,disableUrl:p})}}),angular.forEach(angular.element(d[0].querySelectorAll("[grid-item]")),function(e){var i=angular.element(e);c.push(i),f?i.attr("ng-repeat","item in filtered"):i.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage"),t(i)(p)}),i.sorting=l,i.rows=c,i.filters=g}}}]).directive("gridItemPerPage",["$compile",function(t){return{replace:!0,template:'
          ',link:function(e,i,r){if(r.gridItemPerPage){var n=r.gridItemPerPage.replace(/ /g,"").split(",");n.forEach(function(r){if(Number(r)){r=Number(r);var n=angular.element("
        • "),a=angular.element(""+r+"");a.attr("ng-click","paginationOptions.itemsPerPage = "+r+"; reloadGrid()"),n.attr("ng-class",'{"active" : paginationOptions.itemsPerPage == '+r+"}"),n.append(a),i.append(n),i.append(" "),t(n)(e)}})}}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~t[i].toLowerCase().indexOf(e.toLowerCase()):!0})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}}); \ No newline at end of file diff --git a/dist/material.css b/dist/material.css deleted file mode 100644 index 3e7484c..0000000 --- a/dist/material.css +++ /dev/null @@ -1,99 +0,0 @@ -table { - border-collapse: collapse; - border-spacing: 0; - width: 100%; - font-size: 16px; - margin: 8px; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); } - -.pagination { - transition: background .1s ease-out, color .1s ease-out; } - .pagination > li { - display: inline-block; - vertical-align: middle; - height: 30px; - position: relative; - border-radius: 2px; } - .pagination a { - color: #444; - font-size: 16px; - padding: 0 10px; - line-height: 30px; - display: inline-block; - text-decoration: none; } - .pagination .active { - background: #106cc8; } - .pagination .active a { - color: #fff; } - .pagination-page { - transition: background .1s ease-out, color .1s ease-out; } - .pagination-page.active { - background: #106cc8; } - .pagination-page.active a { - color: #fff; } - -.table td, .table th { - border-top: 1px rgba(0, 0, 0, 0.12) solid; - padding: 12px 24px; } - -.items-per-page .active { - background: #106cc8; } - .items-per-page .active a { - color: #fff; } - -.items-per-page a { - cursor: pointer; } - -.pagination-prev a, -.pagination-next a, -.pagination-first a, -.pagination-last a { - font-size: 0; - width: 30px; - position: relative; } - .pagination-prev a:before, - .pagination-next a:before, - .pagination-first a:before, - .pagination-last a:before { - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - position: absolute; - content: ''; - display: block; - width: 10px; - height: 10px; - transform-origin: center; - border-left: 2px solid #333; - border-bottom: 2px solid #333; } - -.pagination-first a:after, -.pagination-last a:after { - content: ''; - top: 0; - bottom: 0; - position: absolute; - margin: auto 0; - width: 2px; - height: 14px; - background: #333; } - -.pagination-prev a:before { - transform: rotate(45deg); } - -.pagination-next a:before { - transform: rotate(-135deg); } - -.pagination-first a:before { - transform: rotate(45deg); } - -.pagination-first a:after { - left: 4px; } - -.pagination-last a:before { - transform: rotate(-135deg); } - -.pagination-last a:after { - right: 4px; } diff --git a/gulpfile.js b/gulpfile.js index 4fe7687..50b6017 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -22,7 +22,7 @@ } gulp.task('js', function () { - gulp.src(['./src/**/*.js', '!./src/js/demoApp.js']) + gulp.src(['./src/**/*.js']) .pipe(rename({dirname: ''})) .pipe(gulp.dest('./dist')) .pipe(uglify()) @@ -30,17 +30,15 @@ suffix: ".min" })) .pipe(gulp.dest('./dist')); - gulp.src('./src/js/demoApp.js') - .pipe(gulp.dest('./demo')); }); gulp.task('sass', function () { - gulp.src('./src/css/demo.scss') + gulp.src('./demo/demo.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./demo')); - gulp.src('./src/css/material.scss') + gulp.src('./demo/material/scss/angular-data-grid.material.scss') .pipe(sass().on('error', sass.logError)) - .pipe(gulp.dest('./dist')); + .pipe(gulp.dest('./demo/material/css/')); }); gulp.task('build', ['js', 'sass']); @@ -52,7 +50,7 @@ browserSync.reload(event.path); }); - gulp.watch(['./src/**/*.scss'], function (event) { + gulp.watch(['./**/*.scss'], function (event) { gulp.start('sass'); browserSync.reload(event.path); }); diff --git a/index.html b/index.html index 8c0aa9c..617bed0 100644 --- a/index.html +++ b/index.html @@ -6,161 +6,160 @@ - -
          - + + +
          +
          +
          +
          -
          -
          -
          -
          - +
          +
          +
          + + +
          + + + +
          -
          -
          -
          - - -
          - - - - -
          -
          -
          - +
          + -
          - - - - -
          -
          -
          -
          - Clear Dates +
          + + + +
          -
          -
          - - found : {{filtered.length}} items - +
          +
          + Clear Dates +
          +
          +
          +
          +
          +
          +
          + + found : {{filtered.length}} items + -
          +
          + + + + + + + + + + + + + + + + + +
          + Order # + + Date Placed + + + + Total +
          + +
          +
          - - - - - - - - - - - - - - - - - - - - - -
          - Order # - - Date Placed - - Purchase Order # - - - - Total - -
          - - - View - Order -
          -
          -
          - -
          -
          -
          -
          -
          + boundary-links="true" + class="pagination-sm" + ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage" + total-items="paginationOptions.totalItems" + ng-model="paginationOptions.currentPage" + ng-change="reloadGrid()" + items-per-page="paginationOptions.itemsPerPage"> +
          +
          + +
          +
          +
          @@ -168,6 +167,8 @@

          Angular Data Grid

          + + diff --git a/src/css/demo.scss b/src/css/demo.scss deleted file mode 100644 index 961b684..0000000 --- a/src/css/demo.scss +++ /dev/null @@ -1,127 +0,0 @@ -@import 'variables'; -*, *:before, *:after { - box-sizing: border-box; -} -:focus { - outline: none; -} -body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -} -h1 { - margin-top: 20px; - margin-bottom: 10px; - font-family: inherit; - font-weight: 500; - line-height: 1.1; - color: inherit; - font-size: 36px; -} -.container { - max-width: 1170px; - margin: 0 auto; - padding-right: 15px; - padding-left: 15px; -} -.b-change-theme { - padding: 20px; - margin-bottom: 20px; - &__link { - font-size: 16px; - line-height: 20px; - font-weight: 400; - color: #000; - display: inline-block; - vertical-align: middle; - text-decoration: none; - &+& { - margin-left: 30px; - } - &:before { - width: 20px; - height: 20px; - content: ''; - border: 1px solid #999; - margin-right: 8px; - border-radius: 50%; - vertical-align: bottom; - display: inline-block; - } - &:hover { - text-decoration: underline; - color: #000; - } - &._active{ - text-decoration: none; - position: relative; - &:before { - box-shadow: inset 0 0 0 3px #fff; - background: #999; - } - } - } -} - -.table { - td { - padding: 12px 24px !important; - vertical-align: middle !important; - } - th { - padding: 12px 24px !important; - vertical-align: middle !important; - } -} -th.sortable { - line-height: 24px; - position: relative; - &.sort-descent, - &.sort-ascent { - &:before, - &:after { - content: ''; - position: absolute; - margin: auto 0; - } - &:before { - left: 12px; - width: 2px; - background: $backgroundIcons; - height: 12px; - } - &:after { - left: 9px; - border-top: 2px solid $backgroundIcons; - border-left: 2px solid $backgroundIcons; - transform-origin:center; - height: 8px; - width: 8px; - } - } - &.sort-descent { - &:before, - &:after { - bottom: 0; - } - &:before { - top: 0; - } - &:after { - transform: rotate(-135deg); - top: 6px; - } - } - &.sort-ascent { - &:before, - &:after { - top: 0; - } - &:before { - bottom: 0; - } - &:after { - transform: rotate(45deg); - bottom: 6px; - } - } -} \ No newline at end of file diff --git a/src/css/material.scss b/src/css/material.scss deleted file mode 100644 index 49c4557..0000000 --- a/src/css/material.scss +++ /dev/null @@ -1,125 +0,0 @@ -@import 'variables'; -table { - border-collapse: collapse; - border-spacing: 0; - width: 100%; - font-size: 16px; - margin: 8px; - box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12); -} -.pagination { - transition: background .1s ease-out, color .1s ease-out; - & > li{ - display: inline-block; - vertical-align: middle; - height: 30px; - position: relative; - border-radius: 2px; - } - a { - color: $foregroundDefault; - font-size: 16px; - padding: 0 10px; - line-height: 30px; - display: inline-block; - text-decoration: none; - } - .active { - background: $backgroundActive; - a { - color: $foregroundActive; - } - } - &-page { - transition: background .1s ease-out, color .1s ease-out; - &.active { - background: $backgroundActive; - a { - color: $foregroundActive; - } - } - } -} -.table { - td, th { - border-top: 1px rgba(0,0,0,.12) solid; - padding: 12px 24px; - } -} -.items-per-page { - .active { - background: $backgroundActive; - a { - color: $foregroundActive; - } - } - a { - cursor: pointer; - } -} - -.pagination-prev, -.pagination-next, -.pagination-first, -.pagination-last { - a { - font-size: 0; - width: 30px; - position: relative; - &:before { - left: 0; - top: 0; - bottom: 0; - right: 0; - margin: auto; - position: absolute; - content: ''; - display: block; - width: 10px; - height: 10px; - transform-origin:center; - border-left: 2px solid $backgroundIcons; - border-bottom: 2px solid $backgroundIcons; - } - } -} -.pagination-first, -.pagination-last { - a:after { - content: ''; - top: 0; - bottom: 0; - position: absolute; - margin: auto 0; - width: 2px; - height: 14px; - background: $backgroundIcons; - } -} - -.pagination-prev a { - &:before { - transform: rotate(45deg); - } -} -.pagination-next a { - &:before { - transform: rotate(-135deg); - } -} -.pagination-first a { - &:before { - transform: rotate(45deg); - } - &:after { - left: 4px; - } -} -.pagination-last a { - &:before { - transform: rotate(-135deg); - } - &:after { - right: 4px; - } -} \ No newline at end of file diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js index 937aa9a..abdceb6 100644 --- a/src/js/dataGrid.js +++ b/src/js/dataGrid.js @@ -342,7 +342,7 @@ angular return; } var li = angular.element('
        • '); - var button = angular.element('' + value + ''); + var button = angular.element('' + value + ''); button.attr('ng-click', 'paginationOptions.itemsPerPage = ' + value + '; reloadGrid()'); li.attr('ng-class', '{"active" : paginationOptions.itemsPerPage == ' + value + '}'); li.append(button); diff --git a/src/js/demoApp.js b/src/js/demoApp.js deleted file mode 100644 index 0328a1b..0000000 --- a/src/js/demoApp.js +++ /dev/null @@ -1,1173 +0,0 @@ -angular.module('myApp', ['dataGrid', 'pagination']) - .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) { - - $scope.gridOptions = { - data: myAppFactory.getData(), - urlSync: false - }; - - }]) - .factory('myAppFactory', function () { - return { - getData: function () { - //return $http.get(root + '/posts', {}); - return [{ - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 6100.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$6,100.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Valid", - "code": "3747453", - "placed": 1417402800000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1100.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,100.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747092", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1125.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,125.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747116", - "placed": 1398135600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1025.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,025.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747118", - "placed": 1398135600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1080.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,080.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747093", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1050.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,050.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747099", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1080.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,080.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747090", - "placed": 1397790000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1135.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,135.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747094", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 975.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$975.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747119", - "placed": 1398135600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 150.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$150.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747095", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 975.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$975.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747102", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1067.85, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,067.85" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747170", - "placed": 1400727600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1067.85, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,067.85" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747174", - "placed": 1401073200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 980.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$980.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747104", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1091.90, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,091.90" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747260", - "placed": 1404788400000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1067.85, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,067.85" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747171", - "placed": 1400727600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1100.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,100.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747086", - "placed": 1397790000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1092.85, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,092.85" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747173", - "placed": 1401073200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1125.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,125.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747084", - "placed": 1397790000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 975.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$975.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747106", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 950.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$950.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747122", - "placed": 1398135600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1025.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,025.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747100", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 75.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$75.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Complete", - "code": "3747070", - "placed": 1394766000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1122.85, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,122.85" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747164", - "placed": 1400727600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 975.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$975.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747107", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 50.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$50.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747083", - "placed": 1396580400000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 0.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$0.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747081", - "placed": 1395975600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1075.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,075.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747088", - "placed": 1397790000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1100.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,100.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747091", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1315.45, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,315.45" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747176", - "placed": 1401073200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1050.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,050.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747103", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1136.90, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,136.90" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747087", - "placed": 1397790000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1005.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,005.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747101", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1050.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,050.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747098", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 975.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$975.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747105", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1073.80, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,073.80" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747165", - "placed": 1400727600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1067.85, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,067.85" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747167", - "placed": 1400727600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1035.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,035.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747125", - "placed": 1398135600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 0.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$0.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747082", - "placed": 1395975600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1125.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,125.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747085", - "placed": 1397790000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1179.75, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,179.75" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747168", - "placed": 1400727600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1067.85, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,067.85" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747172", - "placed": 1401073200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 950.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$950.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747123", - "placed": 1398135600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 950.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$950.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747108", - "placed": 1398049200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1050.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,050.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747117", - "placed": 1398135600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1030.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,030.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747124", - "placed": 1398135600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1475.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,475.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747121", - "placed": 1398135600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 975.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$975.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747120", - "placed": 1398135600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1067.85, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,067.85" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747169", - "placed": 1400727600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1067.85, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,067.85" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747175", - "placed": 1401073200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1067.85, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,067.85" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747166", - "placed": 1400727600000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 5.95, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$5.95" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Complete", - "code": "3747349", - "placed": 1410145200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 59.50, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$59.50" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Complete", - "code": "3747352", - "placed": 1410145200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1125.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,125.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Complete", - "code": "3746995", - "placed": 1392260400000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 50.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$50.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Complete", - "code": "3746996", - "placed": 1392260400000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 0.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$0.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747016", - "placed": 1392606000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 61.90, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$61.90" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Valid", - "code": "3746998", - "placed": 1392260400000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 3125.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$3,125.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3746993", - "placed": 1391569200000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 130.95, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$130.95" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3746994", - "placed": 1392174000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 0.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$0.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747015", - "placed": 1392606000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 0.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$0.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747043", - "placed": 1392606000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 0.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$0.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Complete", - "code": "3747044", - "placed": 1392692400000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 0.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$0.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747014", - "placed": 1392606000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 20.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$20.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747017", - "placed": 1392606000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 50.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$50.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Complete", - "code": "3747045", - "placed": 1392692400000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 75.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$75.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Complete", - "code": "3747046", - "placed": 1392692400000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 50.00, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$50.00" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3747054", - "placed": 1393470000000 - }, { - "total": { - "currencyIso": "USD", - "priceType": "BUY", - "value": 1541.09, - "maxQuantity": null, - "minQuantity": null, - "formattedValue": "$1,541.09" - }, - "guid": null, - "managers": null, - "purchaseOrderNumber": null, - "status": null, - "b2bPermissionResults": null, - "statusDisplay": "Hold", - "code": "3746952", - "placed": 1384484400000 - }]; - } - } - }); \ No newline at end of file From 186277b5d0005afade12ea750b75ebf2f522b8fe Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Mon, 4 Jan 2016 16:25:59 +0300 Subject: [PATCH 022/119] add material css file --- .../css/angular-data-grid.material.css | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 demo/material/css/angular-data-grid.material.css diff --git a/demo/material/css/angular-data-grid.material.css b/demo/material/css/angular-data-grid.material.css new file mode 100644 index 0000000..815b918 --- /dev/null +++ b/demo/material/css/angular-data-grid.material.css @@ -0,0 +1,53 @@ +th:focus, +a:focus { + outline: none; } + +table { + margin: 0 auto 30px; } + +.max-width { + max-width: 1170px; + margin: 0 auto; + padding: 0 16px; + box-sizing: border-box; } + +th md-select { + margin: 0; } + +.md-datepicker-input { + width: 300px; } + +.pagination { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + padding: 0; + font-size: 0; + margin: 10px; } + .pagination > li { + display: inline-block; + vertical-align: middle; + height: 30px; + border: 1px solid #ddd; + border-left: 0; } + .pagination > li:first-child { + border-left: 1px solid #ddd; + border-radius: 2px 0 0 2px; } + .pagination > li:last-child { + border-radius: 0 2px 2px 0; } + .pagination a { + color: #444; + font-size: 13px; + padding: 0 10px; + line-height: 30px; + display: inline-block; + text-decoration: none; } + .pagination .active { + background: #3f51b5; + border-color: #3f51b5; } + .pagination .active a { + color: #fff; } + .pagination-page { + transition: background .1s ease-out, color .1s ease-out; } + .pagination-page.active { + background: #3f51b5; } + .pagination-page.active a { + color: #fff; } From 1cb9ea9db3eb556e8de0591e95ed7bd4bf535246 Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Mon, 4 Jan 2016 17:17:40 +0300 Subject: [PATCH 023/119] update bootstrap theme --- demo/demo.css | 2 + demo/demo.scss | 3 + demo/demoApp.js | 2 +- demo/material.html | 9 +- .../scss/angular-data-grid.material.scss | 1 + dist/pagination.js | 4 +- dist/pagination.min.js | 2 +- index.html | 145 +++++++++--------- src/js/pagination.js | 4 +- 9 files changed, 89 insertions(+), 83 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index e69de29..96b0c2f 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -0,0 +1,2 @@ +.row { + margin-bottom: 10px; } diff --git a/demo/demo.scss b/demo/demo.scss index e69de29..e742237 100644 --- a/demo/demo.scss +++ b/demo/demo.scss @@ -0,0 +1,3 @@ +.row { + margin-bottom: 10px; +} \ No newline at end of file diff --git a/demo/demoApp.js b/demo/demoApp.js index 2a950b4..be19a27 100644 --- a/demo/demoApp.js +++ b/demo/demoApp.js @@ -1,7 +1,7 @@ // TO DO // fully separate bootstrap and material related files: css and html -angular.module('myApp', ['dataGrid', 'pagination', 'ngMaterial']) +angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'ngMaterial']) .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) { $scope.gridOptions = { diff --git a/demo/material.html b/demo/material.html index e3fdcba..f84cddf 100644 --- a/demo/material.html +++ b/demo/material.html @@ -122,17 +122,17 @@
          - + items-per-page="paginationOptions.itemsPerPage">
          - + items-per-page="paginationOptions.itemsPerPage">
          @@ -152,6 +152,7 @@ + diff --git a/demo/material/scss/angular-data-grid.material.scss b/demo/material/scss/angular-data-grid.material.scss index 31a1b0d..205c057 100644 --- a/demo/material/scss/angular-data-grid.material.scss +++ b/demo/material/scss/angular-data-grid.material.scss @@ -24,6 +24,7 @@ th md-select { padding: 0; font-size: 0; margin: 10px; + //display: inline-block; & > li{ display: inline-block; vertical-align: middle; diff --git a/dist/pagination.js b/dist/pagination.js index e792ef2..efafe67 100644 --- a/dist/pagination.js +++ b/dist/pagination.js @@ -204,7 +204,7 @@ angular forceEllipses: false }) - .directive('pagination', ['$parse', 'paginationConfig', function ($parse, paginationConfig) { + .directive('gridPagination', ['$parse', 'paginationConfig', function ($parse, paginationConfig) { return { scope: { totalItems: '=', @@ -214,7 +214,7 @@ angular lastText: '@', ngDisabled: '=' }, - require: ['pagination', '?ngModel'], + require: ['gridPagination', '?ngModel'], controller: 'PaginationController', controllerAs: 'pagination', templateUrl: function (element, attrs) { diff --git a/dist/pagination.min.js b/dist/pagination.min.js index 2a4c7d5..dcb3412 100644 --- a/dist/pagination.min.js +++ b/dist/pagination.min.js @@ -1 +1 @@ -angular.module("paging",[]).factory("paging",["$parse",function(e){return{create:function(a,n,t){a.setNumPages=t.numPages?e(t.numPages).assign:angular.noop,a.ngModelCtrl={$setViewValue:angular.noop},a.init=function(i,r){a.ngModelCtrl=i,a.config=r,i.$render=function(){a.render()},t.itemsPerPage?n.$parent.$watch(e(t.itemsPerPage),function(e){a.itemsPerPage=parseInt(e,10),n.totalPages=a.calculateTotalPages(),a.updatePage()}):a.itemsPerPage=r.itemsPerPage,n.$watch("totalItems",function(e,t){(angular.isDefined(e)||e!==t)&&(n.totalPages=a.calculateTotalPages(),a.updatePage())})},a.calculateTotalPages=function(){var e=a.itemsPerPage<1?1:Math.ceil(n.totalItems/a.itemsPerPage);return Math.max(e||0,1)},a.render=function(){n.page=parseInt(a.ngModelCtrl.$viewValue,10)||1},n.selectPage=function(e,t){t&&t.preventDefault();var i=!n.ngDisabled||!t;i&&n.page!==e&&e>0&&e<=n.totalPages&&(t&&t.target&&t.target.blur(),a.ngModelCtrl.$setViewValue(e),a.ngModelCtrl.$render())},n.getText=function(e){return n[e+"Text"]||a.config[e+"Text"]},n.noPrevious=function(){return 1===n.page},n.noNext=function(){return n.page===n.totalPages},a.updatePage=function(){a.setNumPages(n.$parent,n.totalPages),n.page>n.totalPages?n.selectPage(n.totalPages):a.ngModelCtrl.$render()}}}}]),angular.module("pagination",["paging"]).controller("PaginationController",["$scope","$attrs","$parse","paging","paginationConfig",function(e,a,n,t,i){function r(e,a,n){return{number:e,text:a,active:n}}function s(e,a){var n=[],t=1,i=a,s=angular.isDefined(g)&&a>g;s&&(o?(t=Math.max(e-Math.floor(g/2),1),i=t+g-1,i>a&&(i=a,t=i-g+1)):(t=(Math.ceil(e/g)-1)*g+1,i=Math.min(t+g-1,a)));for(var l=t;i>=l;l++){var p=r(l,l,l===e);n.push(p)}if(s&&g>0&&(!o||u||c)){if(t>1){if(!c||t>3){var f=r(t-1,"...",!1);n.unshift(f)}if(c){if(3===t){var d=r(2,"2",!1);n.unshift(d)}var P=r(1,"1",!1);n.unshift(P)}}if(a>i){if(!c||a-2>i){var v=r(i+1,"...",!1);n.push(v)}if(c){if(i===a-2){var m=r(a-1,a-1,!1);n.push(m)}var $=r(a,a,!1);n.push($)}}}return n}var l=this,g=angular.isDefined(a.maxSize)?e.$parent.$eval(a.maxSize):i.maxSize,o=angular.isDefined(a.rotate)?e.$parent.$eval(a.rotate):i.rotate,u=angular.isDefined(a.forceEllipses)?e.$parent.$eval(a.forceEllipses):i.forceEllipses,c=angular.isDefined(a.boundaryLinkNumbers)?e.$parent.$eval(a.boundaryLinkNumbers):i.boundaryLinkNumbers;e.boundaryLinks=angular.isDefined(a.boundaryLinks)?e.$parent.$eval(a.boundaryLinks):i.boundaryLinks,e.directionLinks=angular.isDefined(a.directionLinks)?e.$parent.$eval(a.directionLinks):i.directionLinks,t.create(this,e,a),a.maxSize&&e.$parent.$watch(n(a.maxSize),function(e){g=parseInt(e,10),l.render()});var p=this.render;this.render=function(){p(),e.page>0&&e.page<=e.totalPages&&(e.pages=s(e.page,e.totalPages))}}]).constant("paginationConfig",{itemsPerPage:10,boundaryLinks:!1,boundaryLinkNumbers:!1,directionLinks:!0,firstText:"First",previousText:"Previous",nextText:"Next",lastText:"Last",rotate:!0,forceEllipses:!1}).directive("pagination",["$parse","paginationConfig",function(e,a){return{scope:{totalItems:"=",firstText:"@",previousText:"@",nextText:"@",lastText:"@",ngDisabled:"="},require:["pagination","?ngModel"],controller:"PaginationController",controllerAs:"pagination",templateUrl:function(e,a){return a.templateUrl||"src/template/pagination/pagination.html"},replace:!0,link:function(e,n,t,i){var r=i[0],s=i[1];s&&r.init(s,a)}}}]).run(["$templateCache",function(e){e.put("src/template/pagination/pagination.html","")}]); \ No newline at end of file +angular.module("paging",[]).factory("paging",["$parse",function(e){return{create:function(a,n,t){a.setNumPages=t.numPages?e(t.numPages).assign:angular.noop,a.ngModelCtrl={$setViewValue:angular.noop},a.init=function(i,r){a.ngModelCtrl=i,a.config=r,i.$render=function(){a.render()},t.itemsPerPage?n.$parent.$watch(e(t.itemsPerPage),function(e){a.itemsPerPage=parseInt(e,10),n.totalPages=a.calculateTotalPages(),a.updatePage()}):a.itemsPerPage=r.itemsPerPage,n.$watch("totalItems",function(e,t){(angular.isDefined(e)||e!==t)&&(n.totalPages=a.calculateTotalPages(),a.updatePage())})},a.calculateTotalPages=function(){var e=a.itemsPerPage<1?1:Math.ceil(n.totalItems/a.itemsPerPage);return Math.max(e||0,1)},a.render=function(){n.page=parseInt(a.ngModelCtrl.$viewValue,10)||1},n.selectPage=function(e,t){t&&t.preventDefault();var i=!n.ngDisabled||!t;i&&n.page!==e&&e>0&&e<=n.totalPages&&(t&&t.target&&t.target.blur(),a.ngModelCtrl.$setViewValue(e),a.ngModelCtrl.$render())},n.getText=function(e){return n[e+"Text"]||a.config[e+"Text"]},n.noPrevious=function(){return 1===n.page},n.noNext=function(){return n.page===n.totalPages},a.updatePage=function(){a.setNumPages(n.$parent,n.totalPages),n.page>n.totalPages?n.selectPage(n.totalPages):a.ngModelCtrl.$render()}}}}]),angular.module("pagination",["paging"]).controller("PaginationController",["$scope","$attrs","$parse","paging","paginationConfig",function(e,a,n,t,i){function r(e,a,n){return{number:e,text:a,active:n}}function s(e,a){var n=[],t=1,i=a,s=angular.isDefined(g)&&a>g;s&&(o?(t=Math.max(e-Math.floor(g/2),1),i=t+g-1,i>a&&(i=a,t=i-g+1)):(t=(Math.ceil(e/g)-1)*g+1,i=Math.min(t+g-1,a)));for(var l=t;i>=l;l++){var p=r(l,l,l===e);n.push(p)}if(s&&g>0&&(!o||u||c)){if(t>1){if(!c||t>3){var f=r(t-1,"...",!1);n.unshift(f)}if(c){if(3===t){var d=r(2,"2",!1);n.unshift(d)}var P=r(1,"1",!1);n.unshift(P)}}if(a>i){if(!c||a-2>i){var v=r(i+1,"...",!1);n.push(v)}if(c){if(i===a-2){var m=r(a-1,a-1,!1);n.push(m)}var $=r(a,a,!1);n.push($)}}}return n}var l=this,g=angular.isDefined(a.maxSize)?e.$parent.$eval(a.maxSize):i.maxSize,o=angular.isDefined(a.rotate)?e.$parent.$eval(a.rotate):i.rotate,u=angular.isDefined(a.forceEllipses)?e.$parent.$eval(a.forceEllipses):i.forceEllipses,c=angular.isDefined(a.boundaryLinkNumbers)?e.$parent.$eval(a.boundaryLinkNumbers):i.boundaryLinkNumbers;e.boundaryLinks=angular.isDefined(a.boundaryLinks)?e.$parent.$eval(a.boundaryLinks):i.boundaryLinks,e.directionLinks=angular.isDefined(a.directionLinks)?e.$parent.$eval(a.directionLinks):i.directionLinks,t.create(this,e,a),a.maxSize&&e.$parent.$watch(n(a.maxSize),function(e){g=parseInt(e,10),l.render()});var p=this.render;this.render=function(){p(),e.page>0&&e.page<=e.totalPages&&(e.pages=s(e.page,e.totalPages))}}]).constant("paginationConfig",{itemsPerPage:10,boundaryLinks:!1,boundaryLinkNumbers:!1,directionLinks:!0,firstText:"First",previousText:"Previous",nextText:"Next",lastText:"Last",rotate:!0,forceEllipses:!1}).directive("gridPagination",["$parse","paginationConfig",function(e,a){return{scope:{totalItems:"=",firstText:"@",previousText:"@",nextText:"@",lastText:"@",ngDisabled:"="},require:["gridPagination","?ngModel"],controller:"PaginationController",controllerAs:"pagination",templateUrl:function(e,a){return a.templateUrl||"src/template/pagination/pagination.html"},replace:!0,link:function(e,n,t,i){var r=i[0],s=i[1];s&&r.init(s,a)}}}]).run(["$templateCache",function(e){e.put("src/template/pagination/pagination.html","")}]); \ No newline at end of file diff --git a/index.html b/index.html index 617bed0..0ecd356 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,8 @@ Angular Data Grid — Bootstrap
          • - +
            • Bootstrap @@ -27,7 +28,7 @@
              -
              +
              -
              -
              -
              - - -
              - - - - -
              -
              -
              - - -
              - - - - -
              -
              -
              +
              +

              + + + + +

              Clear Dates
              +
              +

              + + + + +

              +
              @@ -100,7 +98,6 @@ found : {{filtered.length}} items -
              @@ -119,7 +116,8 @@ ng-change="filter()"> + value="{{option.value}}">{{option.text}} +
              @@ -139,24 +137,24 @@
              - +
              - +
              @@ -170,6 +168,7 @@ + diff --git a/src/js/pagination.js b/src/js/pagination.js index e792ef2..efafe67 100644 --- a/src/js/pagination.js +++ b/src/js/pagination.js @@ -204,7 +204,7 @@ angular forceEllipses: false }) - .directive('pagination', ['$parse', 'paginationConfig', function ($parse, paginationConfig) { + .directive('gridPagination', ['$parse', 'paginationConfig', function ($parse, paginationConfig) { return { scope: { totalItems: '=', @@ -214,7 +214,7 @@ angular lastText: '@', ngDisabled: '=' }, - require: ['pagination', '?ngModel'], + require: ['gridPagination', '?ngModel'], controller: 'PaginationController', controllerAs: 'pagination', templateUrl: function (element, attrs) { From 9731e9d9d212e8d059c05aecf346c2e7f3348a08 Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Mon, 4 Jan 2016 18:29:06 +0300 Subject: [PATCH 024/119] add arrows, remove demo.css --- .../scss/angular-data-grid.bootstrap.scss | 24 +++ demo/demo.css | 2 - demo/demo.scss | 3 - demo/demoApp.js | 3 - demo/material.html | 31 ++-- .../css/angular-data-grid.material.css | 29 +++- .../scss/angular-data-grid.material.scss | 33 ++++- gulpfile.js | 6 +- index.html | 137 +++++++++--------- 9 files changed, 165 insertions(+), 103 deletions(-) create mode 100644 demo/bootstrap/scss/angular-data-grid.bootstrap.scss delete mode 100644 demo/demo.css delete mode 100644 demo/demo.scss diff --git a/demo/bootstrap/scss/angular-data-grid.bootstrap.scss b/demo/bootstrap/scss/angular-data-grid.bootstrap.scss new file mode 100644 index 0000000..03bcdae --- /dev/null +++ b/demo/bootstrap/scss/angular-data-grid.bootstrap.scss @@ -0,0 +1,24 @@ +.nopadding { + padding: 0; +} +.items { + float: left; + line-height: 30px; +} +.pagination { + margin: 0 auto 20px; +} +.sortable { + &:after { + font: 14px/1 FontAwesome; + content: "\f0dc"; + } + &.sort-ascent:after { + content: '\f0de'; + vertical-align: bottom; + } + &.sort-descent:after { + content: "\f0dd"; + vertical-align: top; + } +} \ No newline at end of file diff --git a/demo/demo.css b/demo/demo.css deleted file mode 100644 index 96b0c2f..0000000 --- a/demo/demo.css +++ /dev/null @@ -1,2 +0,0 @@ -.row { - margin-bottom: 10px; } diff --git a/demo/demo.scss b/demo/demo.scss deleted file mode 100644 index e742237..0000000 --- a/demo/demo.scss +++ /dev/null @@ -1,3 +0,0 @@ -.row { - margin-bottom: 10px; -} \ No newline at end of file diff --git a/demo/demoApp.js b/demo/demoApp.js index be19a27..620fb78 100644 --- a/demo/demoApp.js +++ b/demo/demoApp.js @@ -1,6 +1,3 @@ -// TO DO -// fully separate bootstrap and material related files: css and html - angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'ngMaterial']) .controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) { diff --git a/demo/material.html b/demo/material.html index f84cddf..69874e7 100644 --- a/demo/material.html +++ b/demo/material.html @@ -4,8 +4,8 @@ Angular Data Grid + - @@ -77,12 +77,17 @@
              -
              - - found : {{filtered.length}} items - +
              + Found: {{filtered.length}} items +
              - @@ -121,17 +126,7 @@
              -
              - -
              -
              +
              -
              +
              diff --git a/demo/material/css/angular-data-grid.material.css b/demo/material/css/angular-data-grid.material.css index 815b918..005394d 100644 --- a/demo/material/css/angular-data-grid.material.css +++ b/demo/material/css/angular-data-grid.material.css @@ -3,7 +3,11 @@ a:focus { outline: none; } table { - margin: 0 auto 30px; } + margin: 0 auto 20px; + min-width: 700px; } + +.mdl-data-table tr { + transition: none !important; } .max-width { max-width: 1170px; @@ -11,9 +15,18 @@ table { padding: 0 16px; box-sizing: border-box; } +.controls-wrap { + max-width: 700px; + margin: 0 auto 20px; + text-align: right; } + th md-select { margin: 0; } +.items { + float: left; + line-height: 30px; } + .md-datepicker-input { width: 300px; } @@ -21,7 +34,7 @@ th md-select { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); padding: 0; font-size: 0; - margin: 10px; } + display: inline-block; } .pagination > li { display: inline-block; vertical-align: middle; @@ -51,3 +64,15 @@ th md-select { background: #3f51b5; } .pagination-page.active a { color: #fff; } + +.sortable:after { + font: 14px/1 FontAwesome; + content: "\f0dc"; } + +.sortable.sort-ascent:after { + content: '\f0de'; + vertical-align: bottom; } + +.sortable.sort-descent:after { + content: "\f0dd"; + vertical-align: top; } diff --git a/demo/material/scss/angular-data-grid.material.scss b/demo/material/scss/angular-data-grid.material.scss index 205c057..de2218c 100644 --- a/demo/material/scss/angular-data-grid.material.scss +++ b/demo/material/scss/angular-data-grid.material.scss @@ -5,7 +5,11 @@ a:focus { outline: none; } table { - margin: 0 auto 30px; + margin: 0 auto 20px; + min-width: 700px; +} +.mdl-data-table tr { + transition: none !important; } .max-width { max-width: 1170px; @@ -13,9 +17,18 @@ table { padding: 0 16px; box-sizing: border-box; } +.controls-wrap { + max-width: 700px; + margin: 0 auto 20px; + text-align: right; +} th md-select { margin: 0; } +.items { + float: left; + line-height: 30px; +} .md-datepicker-input { width: 300px; } @@ -23,8 +36,7 @@ th md-select { box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); padding: 0; font-size: 0; - margin: 10px; - //display: inline-block; + display: inline-block; & > li{ display: inline-block; vertical-align: middle; @@ -63,4 +75,19 @@ th md-select { } } } +} + +.sortable { + &:after { + font: 14px/1 FontAwesome; + content: "\f0dc"; + } + &.sort-ascent:after { + content: '\f0de'; + vertical-align: bottom; + } + &.sort-descent:after { + content: "\f0dd"; + vertical-align: top; + } } \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 50b6017..59b1137 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -33,12 +33,12 @@ }); gulp.task('sass', function () { - gulp.src('./demo/demo.scss') - .pipe(sass().on('error', sass.logError)) - .pipe(gulp.dest('./demo')); gulp.src('./demo/material/scss/angular-data-grid.material.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./demo/material/css/')); + gulp.src('./demo/bootstrap/scss/angular-data-grid.bootstrap.scss') + .pipe(sass().on('error', sass.logError)) + .pipe(gulp.dest('./demo/bootstrap/css/')); }); gulp.task('build', ['js', 'sass']); diff --git a/index.html b/index.html index 0ecd356..1efb539 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,8 @@ Flat JSON format for data tables - + +
              -
              - -
              -
              -

              - +

              +
              + +
              +
              +

              + -

              -
              - Clear Dates +

              +
              + Clear Dates +
              -
              -
              -

              - +

              +

              + -

              +

              +
              -
              +
              -
              - - found : {{filtered.length}} items - +
              + Found: {{filtered.length}} items +
              @@ -136,17 +145,7 @@
              -
              - -
              -
              +
              -
              +
              From 3c7b7f481a867b804830d1bf49a22864702dc543 Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Mon, 4 Jan 2016 18:33:45 +0300 Subject: [PATCH 025/119] add bootstrap css --- .../css/angular-data-grid.bootstrap.css | 24 +++++++++++++++++++ .../scss/angular-data-grid.bootstrap.scss | 3 +++ 2 files changed, 27 insertions(+) create mode 100644 demo/bootstrap/css/angular-data-grid.bootstrap.css diff --git a/demo/bootstrap/css/angular-data-grid.bootstrap.css b/demo/bootstrap/css/angular-data-grid.bootstrap.css new file mode 100644 index 0000000..4f62a72 --- /dev/null +++ b/demo/bootstrap/css/angular-data-grid.bootstrap.css @@ -0,0 +1,24 @@ +.nopadding { + padding: 0; } + +.table > thead > tr > th { + vertical-align: middle; } + +.items { + float: left; + line-height: 30px; } + +.pagination { + margin: 0 auto 20px; } + +.sortable:after { + font: 14px/1 FontAwesome; + content: "\f0dc"; } + +.sortable.sort-ascent:after { + content: '\f0de'; + vertical-align: bottom; } + +.sortable.sort-descent:after { + content: "\f0dd"; + vertical-align: top; } diff --git a/demo/bootstrap/scss/angular-data-grid.bootstrap.scss b/demo/bootstrap/scss/angular-data-grid.bootstrap.scss index 03bcdae..38ca55f 100644 --- a/demo/bootstrap/scss/angular-data-grid.bootstrap.scss +++ b/demo/bootstrap/scss/angular-data-grid.bootstrap.scss @@ -1,6 +1,9 @@ .nopadding { padding: 0; } +.table>thead>tr>th { + vertical-align: middle; +} .items { float: left; line-height: 30px; From 7af1bd073b70b11a1d17c25aab99a4bb635b08b7 Mon Sep 17 00:00:00 2001 From: IvanBisultanov Date: Mon, 4 Jan 2016 18:51:06 +0300 Subject: [PATCH 026/119] material css bug fixing --- demo/data.json | 1157 +++++++++++++++++ demo/material.html | 2 +- .../css/angular-data-grid.material.css | 2 +- .../scss/angular-data-grid.material.scss | 2 +- 4 files changed, 1160 insertions(+), 3 deletions(-) create mode 100644 demo/data.json diff --git a/demo/data.json b/demo/data.json new file mode 100644 index 0000000..f2c15dc --- /dev/null +++ b/demo/data.json @@ -0,0 +1,1157 @@ +[{ + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 6100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$6,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Valid", + "code": "3747453", + "placed": 1417402800000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747092", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747116", + "placed": 1398135600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1025.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,025.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747118", + "placed": 1398135600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1080.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,080.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747093", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747099", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1080.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,080.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747090", + "placed": 1397790000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1135.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,135.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747094", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747119", + "placed": 1398135600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 150.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$150.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747095", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747102", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747170", + "placed": 1400727600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747174", + "placed": 1401073200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 980.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$980.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747104", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1091.90, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,091.90" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747260", + "placed": 1404788400000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747171", + "placed": 1400727600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747086", + "placed": 1397790000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1092.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,092.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747173", + "placed": 1401073200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747084", + "placed": 1397790000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747106", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 950.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$950.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747122", + "placed": 1398135600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1025.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,025.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747100", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 75.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$75.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747070", + "placed": 1394766000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1122.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,122.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747164", + "placed": 1400727600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747107", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747083", + "placed": 1396580400000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747081", + "placed": 1395975600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1075.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,075.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747088", + "placed": 1397790000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1100.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,100.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747091", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1315.45, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,315.45" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747176", + "placed": 1401073200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747103", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1136.90, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,136.90" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747087", + "placed": 1397790000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1005.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,005.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747101", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747098", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747105", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1073.80, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,073.80" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747165", + "placed": 1400727600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747167", + "placed": 1400727600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1035.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,035.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747125", + "placed": 1398135600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747082", + "placed": 1395975600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747085", + "placed": 1397790000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1179.75, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,179.75" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747168", + "placed": 1400727600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747172", + "placed": 1401073200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 950.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$950.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747123", + "placed": 1398135600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 950.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$950.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747108", + "placed": 1398049200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1050.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,050.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747117", + "placed": 1398135600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1030.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,030.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747124", + "placed": 1398135600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1475.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,475.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747121", + "placed": 1398135600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 975.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$975.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747120", + "placed": 1398135600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747169", + "placed": 1400727600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747175", + "placed": 1401073200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1067.85, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,067.85" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747166", + "placed": 1400727600000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 5.95, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$5.95" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747349", + "placed": 1410145200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 59.50, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$59.50" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747352", + "placed": 1410145200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3746995", + "placed": 1392260400000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3746996", + "placed": 1392260400000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747016", + "placed": 1392606000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 61.90, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$61.90" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Valid", + "code": "3746998", + "placed": 1392260400000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 3125.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$3,125.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3746993", + "placed": 1391569200000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 130.95, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$130.95" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3746994", + "placed": 1392174000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747015", + "placed": 1392606000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747043", + "placed": 1392606000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747044", + "placed": 1392692400000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 0.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$0.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747014", + "placed": 1392606000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 20.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$20.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747017", + "placed": 1392606000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747045", + "placed": 1392692400000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 75.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$75.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Complete", + "code": "3747046", + "placed": 1392692400000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 50.00, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$50.00" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3747054", + "placed": 1393470000000 +}, { + "total": { + "currencyIso": "USD", + "priceType": "BUY", + "value": 1541.09, + "maxQuantity": null, + "minQuantity": null, + "formattedValue": "$1,541.09" + }, + "guid": null, + "managers": null, + "purchaseOrderNumber": null, + "status": null, + "b2bPermissionResults": null, + "statusDisplay": "Hold", + "code": "3746952", + "placed": 1384484400000 +}] \ No newline at end of file diff --git a/demo/material.html b/demo/material.html index 69874e7..d74e11a 100644 --- a/demo/material.html +++ b/demo/material.html @@ -77,7 +77,7 @@
              -
              +
              Found: {{filtered.length}} items Date: Mon, 4 Jan 2016 19:20:27 +0300 Subject: [PATCH 027/119] minor Bootstrap demo update --- index.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 1efb539..ae281cc 100644 --- a/index.html +++ b/index.html @@ -8,16 +8,16 @@ -