WebCompDev / COMPONENTS

Commit 02e7d683a976e4ec280f6aad6132ba627b450adf

Authored by Renato De Donato
1 parent 9fd4ca8a

datatable

Inline Side-by-side
Showing 1 changed file with 143 additions and 15 deletions
controllets/data-table-controllet/data-table-controllet.html
  View file @02e7d68
... ... @@ -38,6 +38,16 @@
38 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 51 paper-tooltip {
42 52 --paper-tooltip-background: black;
43 53 }
... ... @@ -145,22 +155,22 @@
145 155 text-align: left;
146 156 }
147 157  
148   - br {
  158 + #data_table_container br {
149 159 display: block;
150 160 margin-top: 8px;
151 161 content: " ";
152 162 }
153 163  
154   - p {
  164 + #data_table_container p {
155 165 margin: 0;
156 166 padding: 0;
157 167 }
158 168  
159   - p .type{
  169 + #data_table_container p .type{
160 170 font-weight: 700;
161 171 }
162 172  
163   - p .warning{
  173 + #data_table_container p .warning{
164 174 font-weight: 700;
165 175 color: #F44336;
166 176 }
... ... @@ -175,10 +185,13 @@
175 185 <tbody id="tbody">
176 186 <tr>
177 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 192 </template>
180 193 </tr>
181   - <template is="dom-repeat" items="{{data}}">
  194 + <template is="dom-repeat" items="{{shownData}}">
182 195 <tr>
183 196 <template is="dom-repeat" items="{{_toArray(item)}}">
184 197 <td title="{{item.value}}">{{item.value}}</td>
... ... @@ -189,7 +202,7 @@
189 202 </table>
190 203  
191 204 <template is="dom-repeat" items="{{fields}}">
192   - <paper-tooltip for="{{_fieldId(index)}}" offset="-12">
  205 + <paper-tooltip for="{{_fieldId(index)}}" offset="8">
193 206 <p>
194 207 <span class="type">{{_type()}}:</span> {{item.type}}
195 208 <template is="dom-if" if={{item.errorsDescription.length}}>
... ... @@ -202,17 +215,16 @@
202 215  
203 216 <div id="footer">
204 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 219 </div>
208 220 <div class="footer_block">
209 221 <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
210 222 <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
211 223 </div>
212 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 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 228 </paper-input>
217 229 </div>
218 230 </div>
... ... @@ -234,15 +246,18 @@
234 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 257 ready : function() {
245 258 $(this.$.tbody).perfectScrollbar();
  259 +
  260 + this.step = 100;
246 261 },
247 262  
248 263 attached : function(){
... ... @@ -261,7 +276,7 @@
261 276 this.$.of.innerHTML = ln["of_" + ln["localization"]];
262 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 282 _type : function() {return ln["type_" + ln["localization"]];},
... ... @@ -276,6 +291,119 @@
276 291 result = converter.cast(result);
277 292 this.fields = ArrayUtils.toFieldsArray(result.types);
278 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 409 _toArray: function(obj) {
... ...