agregar opciones de filtrar segun lo mostrado en la tabla
This commit is contained in:
dehernandezm
parent
16e8bb7a18
commit
54e513f01c
156
PivotTableUI.js
156
PivotTableUI.js
@ -86,8 +86,10 @@ var DraggableAttribute = exports.DraggableAttribute = function (_React$Component
|
||||
var _this2 = this;
|
||||
|
||||
// const showMenu = Object.keys(this.props.attrValues).length < this.props.menuLimit;
|
||||
console.log(' this.props.attrValues ', this.props.attrValues);
|
||||
var values = Object.keys(this.props.attrValues);
|
||||
// const 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 truncatedShown = values.filter(this.matchesFilter.bind(this)).sort(this.props.sorter);
|
||||
// .slice(0, this.props.menuLimit);
|
||||
@ -128,9 +130,33 @@ var DraggableAttribute = exports.DraggableAttribute = function (_React$Component
|
||||
_react2.default.createElement(
|
||||
'p',
|
||||
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', {
|
||||
type: 'text',
|
||||
placeholder: 'Filter values',
|
||||
placeholder: 'Filtrar Opciones',
|
||||
className: 'pvtSearch',
|
||||
value: this.state.filterText,
|
||||
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)));
|
||||
}
|
||||
},
|
||||
'Select ',
|
||||
values.length === shown.length ? 'All' : shown.length
|
||||
'Seleccionar ',
|
||||
values.length === shown.length ? 'Todo' : shown.length
|
||||
),
|
||||
' ',
|
||||
_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)));
|
||||
}
|
||||
},
|
||||
'Deselect ',
|
||||
values.length === shown.length ? 'All' : shown.length
|
||||
'Deseleccionar ',
|
||||
values.length === shown.length ? 'Todo' : shown.length
|
||||
)
|
||||
),
|
||||
_react2.default.createElement(
|
||||
@ -354,15 +380,18 @@ var PivotTableUI = function (_React$PureComponent2) {
|
||||
this.materializeInput(this.props.data);
|
||||
}
|
||||
}, {
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate() {
|
||||
console.log(' componentDidUpdate ');
|
||||
console.log(' componentDidUpdate this.props.data ', this.props.data);
|
||||
console.log(' componentDidUpdate state ', this.state);
|
||||
console.log(' componentDidUpdate this.props.valueFilter ', this.props.valueFilter);
|
||||
key: 'updateFilterOptions',
|
||||
value: function updateFilterOptions() {
|
||||
var showAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
||||
|
||||
if (showAll) {
|
||||
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 keysFilter = Object.keys(_valuefilter);
|
||||
console.log(' componentDidUpdate keysFilter ', keysFilter);
|
||||
var filteredData = this.props.data.filter(function (row) {
|
||||
if (typeof _valuefilter !== 'undefined' && _valuefilter !== null) {
|
||||
for (var idx = 0; idx < keysFilter.length; idx++) {
|
||||
@ -380,23 +409,10 @@ var PivotTableUI = function (_React$PureComponent2) {
|
||||
}
|
||||
return true;
|
||||
});
|
||||
console.log(' componentDidUpdate filteredData ', filteredData);
|
||||
this.materializeInput(this.props.data);
|
||||
}
|
||||
}, {
|
||||
key: 'materializeInput',
|
||||
value: function materializeInput(nextData) {
|
||||
if (this.state.data === nextData) {
|
||||
return;
|
||||
}
|
||||
var newState = {
|
||||
data: nextData,
|
||||
attrValues: {},
|
||||
materializedInput: []
|
||||
};
|
||||
var newState = JSON.parse(JSON.stringify(this.state));
|
||||
newState.attrValuesReduced = {};
|
||||
var recordsProcessed = 0;
|
||||
_Utilities.PivotData.forEachRecord(newState.data, this.props.derivedAttributes, function (record) {
|
||||
newState.materializedInput.push(record);
|
||||
_Utilities.PivotData.forEachRecord(filteredData, this.props.derivedAttributes, function (record) {
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
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) {
|
||||
var attr = _step.value;
|
||||
|
||||
if (!(attr in newState.attrValues)) {
|
||||
newState.attrValues[attr] = {};
|
||||
if (!(attr in newState.attrValuesReduced)) {
|
||||
newState.attrValuesReduced[attr] = {};
|
||||
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';
|
||||
if (!(value in newState.attrValues[_attr])) {
|
||||
newState.attrValues[_attr][value] = 0;
|
||||
if (!(value in newState.attrValuesReduced[_attr])) {
|
||||
newState.attrValuesReduced[_attr][value] = 0;
|
||||
}
|
||||
newState.attrValues[_attr][value]++;
|
||||
newState.attrValuesReduced[_attr][value]++;
|
||||
}
|
||||
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);
|
||||
}
|
||||
}, {
|
||||
@ -532,7 +609,8 @@ var PivotTableUI = function (_React$PureComponent2) {
|
||||
addValuesToFilter: _this7.addValuesToFilter.bind(_this7),
|
||||
moveFilterBoxToTop: _this7.moveFilterBoxToTop.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)
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "v-react-pivottable",
|
||||
"version": "0.11.39",
|
||||
"version": "0.11.40",
|
||||
"description": "A React-based pivot table",
|
||||
"main": "PivotTableUI.js",
|
||||
"files": [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user