Skip to content

Commit 6d3931e

Browse files
Zhuk, AlexanderZhuk, Alexander
Zhuk, Alexander
authored and
Zhuk, Alexander
committed
initial data grid added
1 parent cfd213d commit 6d3931e

File tree

10 files changed

+775
-28
lines changed

10 files changed

+775
-28
lines changed

‎.gitignore‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules/
2+
bower_components/
3+
.idea/
4+
.git/
5+
.tmp/
6+
dist/
7+
demo/
8+
target/
9+
*.iml

‎README.md‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,22 @@
11
# angular-data-grid.github.io
2-
Light and flexible Data Grid for AngularJS applications
2+
Light and flexible Data Grid for AngularJS applications.
3+
4+
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.
5+
6+
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
7+
8+
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.
9+
10+
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.
11+
12+
#Sorting:
13+
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.
14+
15+
#Filters:
16+
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.
17+
18+
#Custom Filters:
19+
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.
20+
21+
#Others:
22+
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.

‎contributors.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Eugene Draitsev

‎gulpfile.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
'use strict';
2+
3+
var gulp = require('gulp'),
4+
uglify = require('gulp-uglify'),
5+
sourcemaps = require('gulp-sourcemaps'),
6+
rename = require('gulp-rename'),
7+
concat = require('gulp-concat'),
8+
sass = require('gulp-sass'),
9+
browserSync = require('browser-sync'),
10+
rimraf = require('gulp-rimraf'),
11+
addStream = require('add-stream'),
12+
templateCache = require('gulp-angular-templatecache');
13+
14+
function browserSyncInit(baseDir) {
15+
var server = {
16+
baseDir: baseDir
17+
};
18+
19+
browserSync.instance = browserSync.init({
20+
startPath: '/',
21+
server: server,
22+
open: false
23+
});
24+
}
25+
26+
gulp.task('js', function () {
27+
gulp.src('./src/**/*.js')
28+
.pipe(addStream.obj(prepareTemplates()))
29+
.pipe(concat('index.js'))
30+
.pipe(gulp.dest('./demo/js'));
31+
32+
gulp.src(['./src/**/*.js', '!./src/js/app.js'])
33+
.pipe(addStream.obj(prepareTemplates()))
34+
.pipe(concat('datagrid.js'))
35+
.pipe(gulp.dest('dist'))
36+
.pipe(sourcemaps.init())
37+
.pipe(concat('app.js'))
38+
.pipe(uglify())
39+
.pipe(rename('datagrid.min.js'))
40+
.pipe(sourcemaps.write('./'))
41+
.pipe(gulp.dest('dist'));
42+
43+
});
44+
45+
46+
gulp.task('sass', function () {
47+
gulp.src('./src/**/*.scss')
48+
.pipe(sass().on('error', sass.logError))
49+
.pipe(gulp.dest('./demo'));
50+
});
51+
52+
gulp.task('html', function () {
53+
gulp.src(['./src/**/*.html', '!./src/js/**/*.html'])
54+
.pipe(gulp.dest('./demo'));
55+
});
56+
57+
gulp.task('build', ['js', 'sass', 'html']);
58+
59+
gulp.task('watch', ['build'], function () {
60+
gulp.watch(['./src/**/*.html'], function (event) {
61+
gulp.start('html');
62+
browserSync.reload(event.path);
63+
});
64+
65+
gulp.watch(['./src/**/*.js'], function (event) {
66+
gulp.start('js');
67+
browserSync.reload(event.path);
68+
});
69+
70+
gulp.watch(['./src/**/*.scss'], function (event) {
71+
gulp.start('sass');
72+
browserSync.reload(event.path);
73+
});
74+
});
75+
76+
gulp.task('clean', function () {
77+
return gulp.src(['demo'], {read: false})
78+
.pipe(rimraf());
79+
});
80+
81+
gulp.task('full-clean', ['clean'], function () {
82+
return gulp.src(['bower_components', 'node_modules'], {read: false})
83+
.pipe(rimraf());
84+
});
85+
86+
gulp.task('serve', ['watch'], function () {
87+
browserSyncInit(['demo']);
88+
});
89+
90+
function prepareTemplates() {
91+
return gulp.src('./src/js/**/*.html')
92+
.pipe(templateCache('templates.js', {module: 'dataGrid'}));
93+
}

‎index.html‎

Lines changed: 144 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,145 @@
77
</head>
88
<body>
99
<div class="container" ng-app="myApp" ng-controller="myAppController" ng-cloak>
10+
11+
<div class="container">
12+
<h1>Angular Data Grid</h1>
13+
<div class="row" ng-if="dataLoaded">
14+
<div class="col-xs-12">
15+
<div class="col-md-3">
16+
<div class="form-group">
17+
<input type="text" class="form-control order-search-box"
18+
placeholder="Search By Order #"
19+
ng-change="gridActions.filter()"
20+
ng-model="code"
21+
filter-by="code"
22+
filter-type="text">
23+
</div>
24+
</div>
25+
<div class="col-md-9 buttons-right">
26+
<div class="form-inline margin-bottom-small">
27+
<div class="form-group">
28+
<label class="control-label">From: </label>
29+
30+
<div class="input-group datepicker">
31+
<input type="text"
32+
id="dateFrom"
33+
class="form-control"
34+
is-open="dateFromOpened"
35+
ng-click="dateFromOpened = true"
36+
datepicker-popup="shortDate"
37+
filter-by="placed"
38+
filter-type="dateFrom"
39+
ng-model="dateFrom"
40+
ng-blur="gridActions.filter()"
41+
ng-focus="gridActions.filter()"
42+
max-date="dateTo"
43+
show-weeks="false"
44+
close-text="Close"
45+
placeholder="MM/DD/YY"/>
46+
<span class="input-group-btn">
47+
<label for="dateFrom" class="btn btn-default form-control">
48+
<i class="fa fa-calendar"></i></label>
49+
</span>
50+
</div>
51+
</div>
52+
<div class="form-group">
53+
<label class="control-label">To: </label>
54+
55+
<div class="input-group datepicker">
56+
<input type="text"
57+
id="dateTo"
58+
class="form-control"
59+
is-open="dateToOpened"
60+
ng-click="dateToOpened = true"
61+
min-date="dateFrom"
62+
datepicker-popup="shortDate"
63+
filter-by="placed"
64+
filter-type="dateTo"
65+
ng-model="dateTo"
66+
ng-blur="gridActions.filter()"
67+
ng-focus="gridActions.filter()"
68+
show-weeks="false"
69+
close-text="Close"
70+
placeholder="MM/DD/YY"/>
71+
<span class="input-group-btn">
72+
<label for="dateTo" class="btn btn-default form-control">
73+
<i class="fa fa-calendar"></i></label>
74+
</span>
75+
</div>
76+
</div>
77+
</div>
78+
<div ng-show="dateTo || dateFrom" class="buttons-right">
79+
<a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
80+
</div>
81+
</div>
82+
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
83+
<div class="row margin-bottom-big">
84+
<strong class="col-md-12">
85+
found : {{filtered.length}} items
86+
</strong>
87+
88+
</div>
89+
<!--<div grid-pagination max-size="5" boundary-links="true" class="pagination-sm"></div>-->
90+
<table class="table table-hover table-leo table-condensed table-bordered table-striped">
91+
<thead>
92+
<tr>
93+
<th sortable="code" class="sortable">
94+
Order #
95+
</th>
96+
<th sortable="placed" class="sortable">
97+
Date Placed
98+
</th>
99+
<th sortable="purchaseOrderNumber" class="sortable">
100+
Purchase Order #
101+
</th>
102+
<th class="st-sort-disable th-dropdown">
103+
<select class="form-control width-15"
104+
filter-by="statusDisplay"
105+
filter-type="select"
106+
ng-model="status"
107+
ng-change="filter()">
108+
<option value="">All Statuses</option>
109+
</select>
110+
</th>
111+
<th sortable='total.value' class="sortable">
112+
Total
113+
</th>
114+
<th class="st-sort-disable">
115+
</th>
116+
</tr>
117+
</thead>
118+
<tbody>
119+
<tr grid-item>
120+
<td>
121+
<a href="{{globalData.contextPath + '/my-account/order/' + item.code}}"
122+
ng-bind="item.id"></a>
123+
</td>
124+
<td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
125+
<td ng-bind="item.purchaseOrderNumber"></td>
126+
<td ng-bind="item.statusDisplay"></td>
127+
<td ng-bind="item.total.formattedValue"></td>
128+
<td>
129+
<a class="btn btn-secondary btn-sm"
130+
href="{{globalData.contextPath + '/my-account/order/' + item.code}}">View
131+
Order</a>
132+
</td>
133+
</tr>
134+
</tbody>
135+
</table>
136+
<div class="row">
137+
<div class="col-xs-6">
138+
<!--<div grid-pagination max-size="5" boundary-links="true" class="pagination-sm"></div>-->
139+
</div>
140+
<div class="col-xs-6">
141+
<div grid-item-per-page="10, 25, 50, 75" class="pagination-sm"></div>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
10149
<h1>Flat JSON format for data tables</h1>
11150

12151
<div class="row">
@@ -28,31 +167,9 @@ <h1>Flat JSON format for data tables</h1>
28167
</body>
29168

30169
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
31-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
32-
<script type="text/javascript" src="https://s7.landsend.com/s7viewers/html5/js/BasicZoomViewer.js"></script>
33-
<script>
34-
35-
angular.module('myApp', [])
36-
.controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
37-
$scope.getData = function () {
38-
myAppFactory.getData()
39-
.success(function (response) {
40-
$scope.items = response;
41-
}).error(function () {
42-
});
43-
};
44-
$scope.getData();
45-
}])
46-
.factory('myAppFactory', function ($http) {
47-
var root = 'http://jsonplaceholder.typicode.com';
48-
return {
49-
getData: function () {
50-
return $http.get(root + '/posts', {});
51-
},
52-
postData: function (data) {
53-
return $http.post(contextPath + '/stores/' + storeId + '/rest/payment-method', data);
54-
}
55-
}
56-
});
57-
</script>
170+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
171+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
172+
<script src="src/js/dataGrid.js"></script>
173+
<script src="demo/app.js"></script>
174+
58175
</html>

‎package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "data-grid",
3+
"version": "0.1.0",
4+
"scripts": {
5+
"start": "gulp serve",
6+
"prebuild": "npm install"
7+
},
8+
"dependencies": {
9+
"add-stream": "^1.0.0",
10+
"bower": "^1.6.5",
11+
"browser-sync": "^2.10.0",
12+
"browser-sync-spa": "^1.0.3",
13+
"gulp": "^3.9.0",
14+
"gulp-angular-templatecache": "^1.8.0",
15+
"gulp-concat": "^2.6.0",
16+
"gulp-connect": "^2.2.0",
17+
"gulp-csso": "^1.0.1",
18+
"gulp-rename": "^1.2.2",
19+
"gulp-rimraf": "*",
20+
"gulp-sass": "^2.1.0",
21+
"gulp-sourcemaps": "^1.1.0",
22+
"gulp-uglify": "^1.4.2"
23+
}
24+
}

‎src/css/demo.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.sortable {
2+
&:after {
3+
font-family: 'Material Icons';
4+
font-feature-settings: "liga" 1;
5+
line-height: 1;
6+
content: "compare_arrows";
7+
display: inline-block;
8+
font-size: 18px;
9+
transition: opacity 0.35s, -webkit-transform 0.25s;
10+
transition: opacity 0.35s, transform 0.25s;
11+
opacity: 0;
12+
-webkit-transform: rotate(270deg) translateX(25%);
13+
transform: rotate(270deg) translateY(15%);
14+
}
15+
16+
&:hover:after {
17+
opacity: 1;
18+
}
19+
20+
&.sort-ascent:after {
21+
opacity: 1;
22+
content: "arrow_upward";
23+
vertical-align: top;
24+
-webkit-transform: rotate(180deg);
25+
transform: rotate(180deg);
26+
}
27+
28+
&.sort-descent:after {
29+
opacity: 1;
30+
content: "arrow_upward";
31+
vertical-align: bottom;
32+
-webkit-transform: rotate(0deg);
33+
transform: rotate(0deg);
34+
}
35+
}

‎src/html/gridPaginator.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div pagination ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
2+
total-items="paginationOptions.totalItems"
3+
ng-model="paginationOptions.currentPage"
4+
ng-change="reloadGrid()"
5+
items-per-page="paginationOptions.itemsPerPage">
6+
</div>

0 commit comments

Comments
 (0)