Commit 02e7d683a976e4ec280f6aad6132ba627b450adf
1 parent
9fd4ca8a
datatable
Showing
1 changed file
with
143 additions
and
15 deletions
controllets/data-table-controllet/data-table-controllet.html
@@ -38,6 +38,16 @@ | @@ -38,6 +38,16 @@ | ||
38 | --paper-icon-button-ink-color: #FFFFFF; | 38 | --paper-icon-button-ink-color: #FFFFFF; |
39 | } | 39 | } |
40 | 40 | ||
41 | + paper-icon-button.order { | ||
42 | + height: 24px; | ||
43 | + width: 24px; | ||
44 | + cursor: pointer; | ||
45 | + } | ||
46 | + | ||
47 | + paper-icon-button.order:hover { | ||
48 | + color: #FFFFFF; | ||
49 | + } | ||
50 | + | ||
41 | paper-tooltip { | 51 | paper-tooltip { |
42 | --paper-tooltip-background: black; | 52 | --paper-tooltip-background: black; |
43 | } | 53 | } |
@@ -145,22 +155,22 @@ | @@ -145,22 +155,22 @@ | ||
145 | text-align: left; | 155 | text-align: left; |
146 | } | 156 | } |
147 | 157 | ||
148 | - br { | 158 | + #data_table_container br { |
149 | display: block; | 159 | display: block; |
150 | margin-top: 8px; | 160 | margin-top: 8px; |
151 | content: " "; | 161 | content: " "; |
152 | } | 162 | } |
153 | 163 | ||
154 | - p { | 164 | + #data_table_container p { |
155 | margin: 0; | 165 | margin: 0; |
156 | padding: 0; | 166 | padding: 0; |
157 | } | 167 | } |
158 | 168 | ||
159 | - p .type{ | 169 | + #data_table_container p .type{ |
160 | font-weight: 700; | 170 | font-weight: 700; |
161 | } | 171 | } |
162 | 172 | ||
163 | - p .warning{ | 173 | + #data_table_container p .warning{ |
164 | font-weight: 700; | 174 | font-weight: 700; |
165 | color: #F44336; | 175 | color: #F44336; |
166 | } | 176 | } |
@@ -175,10 +185,13 @@ | @@ -175,10 +185,13 @@ | ||
175 | <tbody id="tbody"> | 185 | <tbody id="tbody"> |
176 | <tr> | 186 | <tr> |
177 | <template is="dom-repeat" items="{{fields}}"> | 187 | <template is="dom-repeat" items="{{fields}}"> |
178 | - <th id="id_{{index}}">{{item.name}}</th> | 188 | + <th id="id_{{index}}"> |
189 | + {{item.name}} | ||
190 | + <paper-icon-button id="{{index}}" class="order" on-click="_order" icon="unfold-more"></paper-icon-button> | ||
191 | + </th> | ||
179 | </template> | 192 | </template> |
180 | </tr> | 193 | </tr> |
181 | - <template is="dom-repeat" items="{{data}}"> | 194 | + <template is="dom-repeat" items="{{shownData}}"> |
182 | <tr> | 195 | <tr> |
183 | <template is="dom-repeat" items="{{_toArray(item)}}"> | 196 | <template is="dom-repeat" items="{{_toArray(item)}}"> |
184 | <td title="{{item.value}}">{{item.value}}</td> | 197 | <td title="{{item.value}}">{{item.value}}</td> |
@@ -189,7 +202,7 @@ | @@ -189,7 +202,7 @@ | ||
189 | </table> | 202 | </table> |
190 | 203 | ||
191 | <template is="dom-repeat" items="{{fields}}"> | 204 | <template is="dom-repeat" items="{{fields}}"> |
192 | - <paper-tooltip for="{{_fieldId(index)}}" offset="-12"> | 205 | + <paper-tooltip for="{{_fieldId(index)}}" offset="8"> |
193 | <p> | 206 | <p> |
194 | <span class="type">{{_type()}}:</span> {{item.type}} | 207 | <span class="type">{{_type()}}:</span> {{item.type}} |
195 | <template is="dom-if" if={{item.errorsDescription.length}}> | 208 | <template is="dom-if" if={{item.errorsDescription.length}}> |
@@ -202,17 +215,16 @@ | @@ -202,17 +215,16 @@ | ||
202 | 215 | ||
203 | <div id="footer"> | 216 | <div id="footer"> |
204 | <div class="footer_block"> | 217 | <div class="footer_block"> |
205 | - <!--<span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets">--> | ||
206 | - <span id="showing"></span> 1 <span id="to"></span> 100 <span id="of"></span> 1234 <span id="rows"></span> | 218 | + <span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="rows"></span> |
207 | </div> | 219 | </div> |
208 | <div class="footer_block"> | 220 | <div class="footer_block"> |
209 | <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button> | 221 | <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button> |
210 | <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button> | 222 | <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button> |
211 | </div> | 223 | </div> |
212 | <div class="footer_block"> | 224 | <div class="footer_block"> |
213 | - <paper-input id="datasets_filter" value={{filter}} no-label-float label=""> | 225 | + <paper-input id="filter" value={{filter}} no-label-float> |
214 | <iron-icon class="search" icon="search" prefix></iron-icon> | 226 | <iron-icon class="search" icon="search" prefix></iron-icon> |
215 | - <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button> | 227 | + <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear"></paper-icon-button> |
216 | </paper-input> | 228 | </paper-input> |
217 | </div> | 229 | </div> |
218 | </div> | 230 | </div> |
@@ -234,15 +246,18 @@ | @@ -234,15 +246,18 @@ | ||
234 | value : [] | 246 | value : [] |
235 | }, | 247 | }, |
236 | 248 | ||
237 | - fields : { | ||
238 | - type : Array, | ||
239 | - value : [] | 249 | + filter : { |
250 | + type : String, | ||
251 | + value : "", | ||
252 | + observer : '_filter' | ||
240 | } | 253 | } |
241 | 254 | ||
242 | }, | 255 | }, |
243 | 256 | ||
244 | ready : function() { | 257 | ready : function() { |
245 | $(this.$.tbody).perfectScrollbar(); | 258 | $(this.$.tbody).perfectScrollbar(); |
259 | + | ||
260 | + this.step = 100; | ||
246 | }, | 261 | }, |
247 | 262 | ||
248 | attached : function(){ | 263 | attached : function(){ |
@@ -261,7 +276,7 @@ | @@ -261,7 +276,7 @@ | ||
261 | this.$.of.innerHTML = ln["of_" + ln["localization"]]; | 276 | this.$.of.innerHTML = ln["of_" + ln["localization"]]; |
262 | this.$.rows.innerHTML = ln["rows_" + ln["localization"]]; | 277 | this.$.rows.innerHTML = ln["rows_" + ln["localization"]]; |
263 | 278 | ||
264 | - this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]); | 279 | + this.$.filter.setAttribute("label", ln["search_" + ln["localization"]]); |
265 | }, | 280 | }, |
266 | 281 | ||
267 | _type : function() {return ln["type_" + ln["localization"]];}, | 282 | _type : function() {return ln["type_" + ln["localization"]];}, |
@@ -276,6 +291,119 @@ | @@ -276,6 +291,119 @@ | ||
276 | result = converter.cast(result); | 291 | result = converter.cast(result); |
277 | this.fields = ArrayUtils.toFieldsArray(result.types); | 292 | this.fields = ArrayUtils.toFieldsArray(result.types); |
278 | this.data = result.dataset; | 293 | this.data = result.dataset; |
294 | + | ||
295 | + this.filter = ""; | ||
296 | + $(".order").attr("icon", "unfold-more"); | ||
297 | + | ||
298 | + this.prev = 1; | ||
299 | + this.next = this.step; | ||
300 | + this.length = this.data.length; | ||
301 | + | ||
302 | + this.shownPrev = Math.min(this.prev, this.length); | ||
303 | + this.shownNext = Math.min(this.next, this.length); | ||
304 | + this.shownData = this.data.slice(this.prev-1, this.next); | ||
305 | + }, | ||
306 | + | ||
307 | + _onPrevClick : function(){ | ||
308 | + if(this.prev != 1) { | ||
309 | + this.prev -= this.step; | ||
310 | + this.next -= this.step; | ||
311 | + | ||
312 | + this.shownPrev = Math.min(this.prev, this.length); | ||
313 | + this.shownNext = Math.min(this.next, this.length); | ||
314 | + this.shownData = this.data.slice(this.prev - 1, this.next); | ||
315 | + } | ||
316 | + $(this.$.tbody).animate({ scrollTop: 0}, 0); | ||
317 | + }, | ||
318 | + | ||
319 | + _onNextClick : function(){ | ||
320 | + if(this.next < this.length) { | ||
321 | + this.prev += this.step; | ||
322 | + this.next += this.step; | ||
323 | + | ||
324 | + this.shownPrev = Math.min(this.prev, this.length); | ||
325 | + this.shownNext = Math.min(this.next, this.length); | ||
326 | + this.shownData = this.data.slice(this.prev - 1, this.next); | ||
327 | + } | ||
328 | + $(this.$.tbody).animate({ scrollTop: 0}, 0); | ||
329 | + }, | ||
330 | + | ||
331 | + _filter : function() { | ||
332 | + this.debounce('_filter', function () { | ||
333 | + if(this.data.length) { | ||
334 | + var filter = this.filter.toLowerCase(); | ||
335 | + | ||
336 | + if(filter == "") | ||
337 | + this.shownData = this.data | ||
338 | + else { | ||
339 | + var keys = Object.keys(this.data[0]); | ||
340 | + this.shownData = this.data.filter(function (el) { | ||
341 | + var values = keys.map(function (key) { | ||
342 | + return el[key]; | ||
343 | + }); | ||
344 | + for (var i in values) | ||
345 | + if (values[i] && String(values[i]).toLowerCase().indexOf(filter) > -1) | ||
346 | + return true; | ||
347 | + return false; | ||
348 | + }); | ||
349 | + } | ||
350 | + | ||
351 | + this.prev = 1; | ||
352 | + this.next = this.step; | ||
353 | + this.length = this.shownData.length; | ||
354 | + | ||
355 | + this.shownPrev = Math.min(this.prev, this.length); | ||
356 | + this.shownNext = Math.min(this.next, this.length); | ||
357 | + this.shownData = this.shownData.slice(this.prev - 1, this.next); | ||
358 | + | ||
359 | + $(this.$.tbody).animate({ scrollTop: 0}, 0); | ||
360 | + } | ||
361 | + }, 300); | ||
362 | + }, | ||
363 | + | ||
364 | + _clearInput : function() { | ||
365 | + this.$.filter.value = ""; | ||
366 | + }, | ||
367 | + | ||
368 | + _order : function(e) { | ||
369 | + t = $(e.target).parents("paper-icon-button")[0]; | ||
370 | + | ||
371 | + var icon = t.getAttribute("icon"); | ||
372 | + var id = t.getAttribute("id"); | ||
373 | + var field = this.fields[id]; | ||
374 | + var reverse = false; | ||
375 | + | ||
376 | + if(icon.indexOf("unfold-more") > -1){ | ||
377 | + t.setAttribute("icon", "arrow-drop-up"); | ||
378 | + } | ||
379 | + else if(icon.indexOf("arrow-drop-up") > -1){ | ||
380 | + t.setAttribute("icon", "arrow-drop-down"); | ||
381 | + reverse = true; | ||
382 | + } | ||
383 | + else if(icon.indexOf("arrow-drop-down") > -1){ | ||
384 | + t.setAttribute("icon", "arrow-drop-up"); | ||
385 | + } | ||
386 | + | ||
387 | + | ||
388 | + if(field.type == "NUMBER") | ||
389 | +// this.data = this.data.sort(this._sort_by(field.name, reverse, parseInt)); | ||
390 | + this.data = this.data.sort(this._sort_by(field.name, reverse, function(a){return (isNaN(a) ? -Number.MAX_VALUE : a)})); | ||
391 | + else | ||
392 | + this.data = this.data.sort(this._sort_by(field.name, reverse, function(a){return (a ? a.toLowerCase() : "")})); | ||
393 | + this._filter(); | ||
394 | + }, | ||
395 | + | ||
396 | + _sort_by : function(field, reverse, primer){ | ||
397 | + | ||
398 | + var key = primer ? | ||
399 | + function(x) {return primer(x[field])} : | ||
400 | + function(x) {return x[field]}; | ||
401 | + | ||
402 | + reverse = !reverse ? 1 : -1; | ||
403 | + | ||
404 | + return function (a, b) { | ||
405 | + return a = key(a), b = key(b), reverse * ((a > b) - (b > a)); | ||
406 | + } | ||
279 | }, | 407 | }, |
280 | 408 | ||
281 | _toArray: function(obj) { | 409 | _toArray: function(obj) { |