dehernandezm/v-react-pivottable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

agregar opciones de filtrar segun lo mostrado en la tabla

Browse Source
This commit is contained in:
dehernandezm 2025-02-06 17:02:32 -06:00
parent 16e8bb7a18
commit 54e513f01c
3 changed files with 119 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
PivotTableUI.js
View File

@ -86,8 +86,10 @@ var DraggableAttribute = exports.DraggableAttribute = function (_React$Component
var _this2 = this; var _this2 = this;
// const showMenu = Object.keys(this.props.attrValues).length < this.props.menuLimit; // const showMenu = Object.keys(this.props.attrValues).length < this.props.menuLimit;
console.log(' this.props.attrValues ', this.props.attrValues); // const values = Object.keys(this.props.attrValues);
var values = Object.keys(this.props.attrValues); var stringAttr = JSON.stringify(this.props.attrValues);
var stringAttrReduced = JSON.stringify(this.props.attrValuesReduced);
var values = Object.keys(this.props.attrValuesReduced);
var shown = values.filter(this.matchesFilter.bind(this)).sort(this.props.sorter); var shown = values.filter(this.matchesFilter.bind(this)).sort(this.props.sorter);
var truncatedShown = values.filter(this.matchesFilter.bind(this)).sort(this.props.sorter); var truncatedShown = values.filter(this.matchesFilter.bind(this)).sort(this.props.sorter);
// .slice(0, this.props.menuLimit); // .slice(0, this.props.menuLimit);
@ -128,9 +130,33 @@ var DraggableAttribute = exports.DraggableAttribute = function (_React$Component
_react2.default.createElement( _react2.default.createElement(
'p', 'p',
null, null,
_react2.default.createElement(
'a',
{
role: 'button',
className: 'pvtButton ' + (stringAttr === stringAttrReduced ? 'disabled' : ''),
onClick: function onClick() {
_this2.props.updateFilterOptions(true);
}
},
'Mostrar Todas las Opciones'
),
' ',
_react2.default.createElement(
'a',
{
role: 'button',
className: 'pvtButton',
onClick: function onClick() {
_this2.props.updateFilterOptions();
}
},
'Mostrar Opciones en Tabla'
),
_react2.default.createElement('br', null),
_react2.default.createElement('input', { _react2.default.createElement('input', {
type: 'text', type: 'text',
placeholder: 'Filter values', placeholder: 'Filtrar Opciones',
className: 'pvtSearch', className: 'pvtSearch',
value: this.state.filterText, value: this.state.filterText,
onChange: function onChange(e) { onChange: function onChange(e) {
@ -149,8 +175,8 @@ var DraggableAttribute = exports.DraggableAttribute = function (_React$Component
_this2.props.removeValuesFromFilter(_this2.props.name, Object.keys(_this2.props.attrValues).filter(_this2.matchesFilter.bind(_this2))); _this2.props.removeValuesFromFilter(_this2.props.name, Object.keys(_this2.props.attrValues).filter(_this2.matchesFilter.bind(_this2)));
} }
}, },
'Select ', 'Seleccionar ',
values.length === shown.length ? 'All' : shown.length values.length === shown.length ? 'Todo' : shown.length
), ),
' ', ' ',
_react2.default.createElement( _react2.default.createElement(
@ -162,8 +188,8 @@ var DraggableAttribute = exports.DraggableAttribute = function (_React$Component
return _this2.props.addValuesToFilter(_this2.props.name, Object.keys(_this2.props.attrValues).filter(_this2.matchesFilter.bind(_this2))); return _this2.props.addValuesToFilter(_this2.props.name, Object.keys(_this2.props.attrValues).filter(_this2.matchesFilter.bind(_this2)));
} }
}, },
'Deselect ', 'Deseleccionar ',
values.length === shown.length ? 'All' : shown.length values.length === shown.length ? 'Todo' : shown.length
) )
), ),
_react2.default.createElement( _react2.default.createElement(
@ -354,15 +380,18 @@ var PivotTableUI = function (_React$PureComponent2) {
this.materializeInput(this.props.data); this.materializeInput(this.props.data);
} }
}, { }, {
key: 'componentDidUpdate', key: 'updateFilterOptions',
value: function componentDidUpdate() { value: function updateFilterOptions() {
console.log(' componentDidUpdate '); var showAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
console.log(' componentDidUpdate this.props.data ', this.props.data);
console.log(' componentDidUpdate state ', this.state); if (showAll) {
console.log(' componentDidUpdate this.props.valueFilter ', this.props.valueFilter); var _newState = JSON.parse(JSON.stringify(this.state));
_newState.attrValuesReduced = JSON.parse(JSON.stringify(this.state.attrValues));
this.setState(_newState);
return;
}
var _valuefilter = this.props.valueFilter; var _valuefilter = this.props.valueFilter;
var keysFilter = Object.keys(_valuefilter); var keysFilter = Object.keys(_valuefilter);
console.log(' componentDidUpdate keysFilter ', keysFilter);
var filteredData = this.props.data.filter(function (row) { var filteredData = this.props.data.filter(function (row) {
if (typeof _valuefilter !== 'undefined' && _valuefilter !== null) { if (typeof _valuefilter !== 'undefined' && _valuefilter !== null) {
for (var idx = 0; idx < keysFilter.length; idx++) { for (var idx = 0; idx < keysFilter.length; idx++) {
@ -380,23 +409,10 @@ var PivotTableUI = function (_React$PureComponent2) {
} }
return true; return true;
}); });
console.log(' componentDidUpdate filteredData ', filteredData); var newState = JSON.parse(JSON.stringify(this.state));
this.materializeInput(this.props.data); newState.attrValuesReduced = {};
}
}, {
key: 'materializeInput',
value: function materializeInput(nextData) {
if (this.state.data === nextData) {
return;
}
var newState = {
data: nextData,
attrValues: {},
materializedInput: []
};
var recordsProcessed = 0; var recordsProcessed = 0;
_Utilities.PivotData.forEachRecord(newState.data, this.props.derivedAttributes, function (record) { _Utilities.PivotData.forEachRecord(filteredData, this.props.derivedAttributes, function (record) {
newState.materializedInput.push(record);
var _iteratorNormalCompletion = true; var _iteratorNormalCompletion = true;
var _didIteratorError = false; var _didIteratorError = false;
var _iteratorError = undefined; var _iteratorError = undefined;
@ -405,10 +421,10 @@ var PivotTableUI = function (_React$PureComponent2) {
for (var _iterator = Object.keys(record)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { for (var _iterator = Object.keys(record)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var attr = _step.value; var attr = _step.value;
if (!(attr in newState.attrValues)) { if (!(attr in newState.attrValuesReduced)) {
newState.attrValues[attr] = {}; newState.attrValuesReduced[attr] = {};
if (recordsProcessed > 0) { if (recordsProcessed > 0) {
newState.attrValues[attr].null = recordsProcessed; newState.attrValuesReduced[attr].null = recordsProcessed;
} }
} }
} }
@ -427,16 +443,77 @@ var PivotTableUI = function (_React$PureComponent2) {
} }
} }
for (var _attr in newState.attrValues) { for (var _attr in newState.attrValuesReduced) {
var value = _attr in record ? record[_attr] : 'null'; var value = _attr in record ? record[_attr] : 'null';
if (!(value in newState.attrValues[_attr])) { if (!(value in newState.attrValuesReduced[_attr])) {
newState.attrValues[_attr][value] = 0; newState.attrValuesReduced[_attr][value] = 0;
} }
newState.attrValues[_attr][value]++; newState.attrValuesReduced[_attr][value]++;
} }
recordsProcessed++; recordsProcessed++;
}); });
console.log(' newState attrValues ', newState.attrValues); this.setState(newState);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.materializeInput(this.props.data);
}
}, {
key: 'materializeInput',
value: function materializeInput(nextData) {
if (this.state.data === nextData) {
return;
}
var newState = {
data: nextData,
attrValues: {},
attrValuesReduced: {},
materializedInput: []
};
var recordsProcessed = 0;
_Utilities.PivotData.forEachRecord(newState.data, this.props.derivedAttributes, function (record) {
newState.materializedInput.push(record);
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = Object.keys(record)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var attr = _step2.value;
if (!(attr in newState.attrValues)) {
newState.attrValues[attr] = {};
if (recordsProcessed > 0) {
newState.attrValues[attr].null = recordsProcessed;
}
}
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
for (var _attr2 in newState.attrValues) {
var value = _attr2 in record ? record[_attr2] : 'null';
if (!(value in newState.attrValues[_attr2])) {
newState.attrValues[_attr2][value] = 0;
}
newState.attrValues[_attr2][value]++;
}
recordsProcessed++;
});
newState.attrValuesReduced = JSON.parse(JSON.stringify(newState.attrValues));
this.setState(newState); this.setState(newState);
} }
}, { }, {
@ -532,7 +609,8 @@ var PivotTableUI = function (_React$PureComponent2) {
addValuesToFilter: _this7.addValuesToFilter.bind(_this7), addValuesToFilter: _this7.addValuesToFilter.bind(_this7),
moveFilterBoxToTop: _this7.moveFilterBoxToTop.bind(_this7), moveFilterBoxToTop: _this7.moveFilterBoxToTop.bind(_this7),
removeValuesFromFilter: _this7.removeValuesFromFilter.bind(_this7), removeValuesFromFilter: _this7.removeValuesFromFilter.bind(_this7),
zIndex: _this7.state.zIndices[x] || _this7.state.maxZIndex zIndex: _this7.state.zIndices[x] || _this7.state.maxZIndex,
updateFilterOptions: _this7.updateFilterOptions.bind(_this7)
}); });
}) })
); );

2
PivotTableUI.js.map
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "v-react-pivottable", "name": "v-react-pivottable",
"version": "0.11.39", "version": "0.11.40",
"description": "A React-based pivot table", "description": "A React-based pivot table",
"main": "PivotTableUI.js", "main": "PivotTableUI.js",
"files": [ "files": [