From b84812339b87b0b417486394c15c5be736674afb Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Mon, 8 Feb 2021 14:20:52 +0300 Subject: [PATCH] Expose more events for flexibility --- src/components/datatable/ColumnFilter.vue | 15 +++++++++++---- src/components/datatable/DataTable.vue | 7 +++++-- src/components/datatable/TableHeader.vue | 9 ++++++--- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue index 836382e73..ec66a614d 100644 --- a/src/components/datatable/ColumnFilter.vue +++ b/src/components/datatable/ColumnFilter.vue @@ -54,7 +54,7 @@ import Dropdown from 'primevue/dropdown'; import Button from 'primevue/button'; export default { - emits: ['filter-change', 'filter-apply'], + emits: ['filter-change','filter-apply','operator-change','matchmode-change','constraint-add','constraint-remove','filter-clear','apply-click'], props: { field: { type: String, @@ -163,11 +163,13 @@ export default { _filters[this.field].matchMode = this.defaultMatchMode; } + this.$emit('filter-clear'); this.$emit('filter-change', _filters); this.$emit('filter-apply'); this.hide(); }, applyFilter() { + this.$emit('apply-click', {field: this.field, constraints: this.filters[this.field]}); this.$emit('filter-apply'); this.hide(); }, @@ -230,6 +232,7 @@ export default { onRowMatchModeChange(matchMode) { let _filters = {...this.filters}; _filters[this.field].matchMode = matchMode; + this.$emit('matchmode-change', {field: this.field, matchMode: matchMode}); this.$emit('filter-change', _filters); this.$emit('filter-apply'); this.hide(); @@ -269,14 +272,15 @@ export default { _filters[this.field].operator = value; this.$emit('filter-change', _filters); + this.$emit('operator-change', {field: this.field, operator: value}); if (!this.showApplyButton) { this.$emit('filter-apply'); } - }, onMenuMatchModeChange(value, index) { let _filters = {...this.filters}; _filters[this.field].constraints[index].matchMode = value; + this.$emit('matchmode-change', {field: this.field, matchMode: value, index: index}); if (!this.showApplyButton) { this.$emit('filter-apply'); @@ -284,7 +288,9 @@ export default { }, addConstraint() { let _filters = {...this.filters}; - _filters[this.field].constraints.push({value: null, matchMode: this.defaultMatchMode}); + let newConstraint = {value: null, matchMode: this.defaultMatchMode}; + _filters[this.field].constraints.push(newConstraint); + this.$emit('constraint-add', {field: this.field, constraing: newConstraint}); this.$emit('filter-change', _filters); if (!this.showApplyButton) { @@ -293,7 +299,8 @@ export default { }, removeConstraint(index) { let _filters = {...this.filters}; - _filters[this.field].constraints.splice(index, 1); + let removedConstraint = _filters[this.field].constraints.splice(index, 1); + this.$emit('constraint-remove', {field: this.field, constraing: removedConstraint}); this.$emit('filter-change', _filters); if (!this.showApplyButton) { diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue index 9fb526365..299dd29d3 100755 --- a/src/components/datatable/DataTable.vue +++ b/src/components/datatable/DataTable.vue @@ -82,7 +82,9 @@ :sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" @column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)" - @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" /> + @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" + @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change',$event)" + @constraint-add="$emit('constraint-add',$event)" @constraint-remove="$emit('constraint-remove',$event)" @apply-click="$emit('apply-click',$event)" /> @@ -32,7 +33,8 @@ :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter" :filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col, 'filterMenuStyle')" :filterMenuClass="columnProp(col, 'filterMenuClass')" :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')" - :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" /> + :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" + @operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/> @@ -62,7 +64,8 @@ import ColumnFilter from './ColumnFilter'; export default { emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop', - 'column-resizestart', 'checkbox-change', 'column-click','filter-change', 'filter-apply'], + 'column-resizestart', 'checkbox-change', 'column-click','filter-change', 'filter-apply', + 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'], props: { columnGroup: { type: null,