|
3 | 3 |
|
4 | 4 | 'use strict'; |
5 | 5 |
|
| 6 | + const PROPERTY_HASH_PARAMS = ['sortOn', 'groupOn', 'descending']; |
| 7 | + |
6 | 8 | Polymer({ |
7 | 9 |
|
8 | 10 | is: 'cosmoz-omnitable', |
|
101 | 103 | value: '' |
102 | 104 | }, |
103 | 105 |
|
| 106 | + sortOnColumn: { |
| 107 | + type: Object, |
| 108 | + computed: '_getColumn(sortOn, "name", columns)' |
| 109 | + }, |
| 110 | + |
104 | 111 | /** |
105 | 112 | * The column name to group on. |
106 | 113 | */ |
|
117 | 124 | type: Object, |
118 | 125 | notify: true, |
119 | 126 | observer: '_debounceGroupItems', |
120 | | - computed: '_computeGroupOnColumn(groupOn, columns)' |
| 127 | + computed: '_getColumn(groupOn, "name", columns)' |
121 | 128 | }, |
122 | 129 |
|
123 | 130 | /** |
|
182 | 189 | _filterIsTooStrict: { |
183 | 190 | type: Boolean, |
184 | 191 | computed: '_computeFilterIsTooStrict(_dataIsValid, sortedFilteredGroupedItems.length)' |
185 | | - } |
| 192 | + }, |
| 193 | + |
| 194 | + hashParam: { |
| 195 | + type: String |
| 196 | + }, |
| 197 | + |
| 198 | + _routeHashParams: { |
| 199 | + type: Object, |
| 200 | + notify: true |
| 201 | + }, |
186 | 202 | }, |
187 | 203 |
|
188 | 204 | observers: [ |
189 | 205 | '_dataChanged(data.*)', |
190 | | - '_debounceSortItems(sortOn, descending, filteredGroupedItems)' |
| 206 | + '_debounceSortItems(sortOn, descending, filteredGroupedItems)', |
| 207 | + '_routeHashParamsChanged(_routeHashParams.*, hashParam, columns)' |
191 | 208 | ], |
192 | 209 |
|
193 | 210 | behaviors: [ |
|
200 | 217 | 'update-item-size': '_onUpdateItemSize', |
201 | 218 | 'cosmoz-column-title-changed': '_onColumnTitleChanged', |
202 | 219 | 'cosmoz-column-hidden-changed': '_debounceUpdateColumns', |
203 | | - 'cosmoz-column-filter-changed': '_debounceFilterItems' |
| 220 | + 'cosmoz-column-filter-changed': '_filterChanged', |
204 | 221 | }, |
205 | 222 |
|
206 | 223 | /** ELEMENT LIFECYCLE */ |
|
243 | 260 | return groupOn ? columns.filter(c => c.name !== this.groupOn) : columns.slice(); |
244 | 261 | }, |
245 | 262 |
|
246 | | - _computeGroupOnColumn(groupOn) { |
247 | | - return this._getColumn(groupOn); |
248 | | - }, |
249 | | - |
250 | 263 | _computeDataValidity(data) { |
251 | 264 | return data && Array.isArray(data) && data.length > 0; |
252 | 265 | }, |
|
444 | 457 | * @param {String} attribute The attribute name of the column. |
445 | 458 | * @returns {Object} The found column. |
446 | 459 | */ |
447 | | - _getColumn(attributeValue, attribute = 'name') { |
448 | | - if (!attributeValue || !this.columns) { |
| 460 | + _getColumn(attributeValue, attribute = 'name', columns = this.columns) { |
| 461 | + if (!attributeValue || !columns) { |
449 | 462 | return; |
450 | 463 | } |
451 | | - const column = this.columns.find(column => column[attribute] === attributeValue); |
| 464 | + const column = columns.find(column => column[attribute] === attributeValue); |
452 | 465 | if (!column) { |
453 | 466 | console.warn(`Cannot find column with ${attribute} ${attributeValue}`); |
454 | 467 | } |
455 | 468 | return column; |
456 | 469 | }, |
457 | 470 |
|
| 471 | + _filterChanged: function (e, detail) { |
| 472 | + this._debounceFilterItems(); |
| 473 | + this._filterForRouteChanged(detail.column); |
| 474 | + }, |
| 475 | + |
458 | 476 | _debounceFilterItems: function () { |
459 | 477 | this.debounce('filterItems', this._filterItems); |
460 | 478 | }, |
|
493 | 511 | return; |
494 | 512 | } |
495 | 513 |
|
| 514 | + this._updateRouteParam('groupOn'); |
| 515 | + |
496 | 516 | var groupOnColumn = this.groupOnColumn, |
497 | 517 | groups; |
498 | 518 |
|
|
561 | 581 | return; |
562 | 582 | } |
563 | 583 |
|
564 | | - var sortOnColumn = this._getColumn(this.sortOn), |
| 584 | + var sortOnColumn = this.sortOnColumn, |
565 | 585 | items = [], |
566 | 586 | numGroups = this.filteredGroupedItems.length, |
567 | 587 | mappedItems, |
568 | 588 | results = 0, |
569 | 589 | itemMapper; |
570 | 590 |
|
| 591 | + this._updateRouteParam('sortOn'); |
| 592 | + this._updateRouteParam('descending'); |
| 593 | + |
571 | 594 | if (!this.sortOn || !sortOnColumn) { |
572 | 595 | this.sortedFilteredGroupedItems = this.filteredGroupedItems; |
573 | 596 | this._debounceAdjustColumns(); |
|
1008 | 1031 | return; |
1009 | 1032 | } |
1010 | 1033 | gl.highlightItem(i, reverse); |
| 1034 | + }, |
| 1035 | + |
| 1036 | + _serializeFilter: function (obj) { |
| 1037 | + const type = {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase(); |
| 1038 | + let value = obj; |
| 1039 | + |
| 1040 | + if (type === 'array' && !value.length) { |
| 1041 | + value = null; |
| 1042 | + } else if (type === 'object') { |
| 1043 | + const keys = Object.keys(obj).filter(k => obj[k] != null); |
| 1044 | + if (keys.length > 0) { |
| 1045 | + value = keys.reduce((acc, k) => { |
| 1046 | + acc[k] = obj[k]; |
| 1047 | + return acc; |
| 1048 | + }, {}); |
| 1049 | + } else { |
| 1050 | + value = null; |
| 1051 | + } |
| 1052 | + } |
| 1053 | + return this.serialize(value); |
| 1054 | + }, |
| 1055 | + |
| 1056 | + _deserializeFilter: function (obj, type = Object) { |
| 1057 | + if (type === Object && obj == null) { |
| 1058 | + return {}; |
| 1059 | + } |
| 1060 | + if (type === Array && obj == null) { |
| 1061 | + return []; |
| 1062 | + } |
| 1063 | + return this.deserialize(obj, type); |
| 1064 | + }, |
| 1065 | + |
| 1066 | + _routeHashParamsChanged: function (changes, hashParam, columns) { |
| 1067 | + if (!changes || !hashParam || !columns || !columns.length) { |
| 1068 | + return; |
| 1069 | + } |
| 1070 | + |
| 1071 | + PROPERTY_HASH_PARAMS.forEach(key => { |
| 1072 | + const hashValue = this.get(['_routeHashParams', hashParam + '-' + key]), |
| 1073 | + deserialized = this.deserialize(hashValue, this.properties[key].type); |
| 1074 | + |
| 1075 | + if (hashValue === undefined || deserialized === this.get(key)) { |
| 1076 | + return; |
| 1077 | + } |
| 1078 | + |
| 1079 | + this.set(key, deserialized); |
| 1080 | + }); |
| 1081 | + |
| 1082 | + let rule = new RegExp('^' + hashParam + '-filter\-\-([a-z0-9\-]+)$'), |
| 1083 | + routeParams = changes.base; |
| 1084 | + |
| 1085 | + Object.keys(routeParams).forEach(key => { |
| 1086 | + const hashValue = routeParams[key], |
| 1087 | + matches = key.match(rule), |
| 1088 | + name = matches && matches[1], |
| 1089 | + column = name && columns.find(c => c.name === name); |
| 1090 | + |
| 1091 | + if (!column) { |
| 1092 | + if (name) { |
| 1093 | + console.warn('column with name', name, 'for param', key, 'not found!'); |
| 1094 | + } |
| 1095 | + return; |
| 1096 | + } |
| 1097 | + |
| 1098 | + let filter = column.filter; |
| 1099 | + |
| 1100 | + if (hashValue === this._serializeFilter(filter)) { |
| 1101 | + return; |
| 1102 | + } |
| 1103 | + column.set('filter', this._deserializeFilter(hashValue, filter && filter.constructor || undefined)); |
| 1104 | + }); |
| 1105 | + |
| 1106 | + }, |
| 1107 | + |
| 1108 | + _updateRouteParam: function (key) { |
| 1109 | + if (!this.hashParam || !this._routeHashParams) { |
| 1110 | + return; |
| 1111 | + } |
| 1112 | + |
| 1113 | + const path = ['_routeHashParams', this.hashParam + '-' + key], |
| 1114 | + hashValue = this.get(path), |
| 1115 | + value = this.get(key), |
| 1116 | + serialized = this.serialize(value, this.properties[key].type); |
| 1117 | + |
| 1118 | + if (serialized === hashValue || hashValue == null && value === '') { |
| 1119 | + return; |
| 1120 | + } |
| 1121 | + |
| 1122 | + this.set(path, serialized === undefined ? null : serialized); |
| 1123 | + }, |
| 1124 | + |
| 1125 | + _filterForRouteChanged: function (column) { |
| 1126 | + if (!this.hashParam || !this._routeHashParams || !this.data || !this.data.length) { |
| 1127 | + return; |
| 1128 | + } |
| 1129 | + |
| 1130 | + const path = ['_routeHashParams', this.hashParam + '-filter--' + column.name], |
| 1131 | + hashValue = this.get(path), |
| 1132 | + serialized = this._serializeFilter(column.filter); |
| 1133 | + |
| 1134 | + if (serialized === hashValue) { |
| 1135 | + return; |
| 1136 | + } |
| 1137 | + |
| 1138 | + this.set(path, serialized === undefined ? null : serialized); |
1011 | 1139 | } |
1012 | 1140 | }); |
1013 | 1141 | }()); |
0 commit comments