Skip to content

Commit

Permalink
Refactor #1273
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Oct 4, 2021
1 parent 2a05640 commit b5fd87d
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 43 deletions.
33 changes: 18 additions & 15 deletions src/components/datatable/BodyCell.vue
View file
@@ -1,8 +1,8 @@
<template>
<td :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell">
<span v-if="responsiveLayout === 'stack'" class="p-column-title">{{columnProp('header')}}</span>
<component :is="column.children.body" :data="rowData" :column="column" :index="rowIndex" :frozenRow="frozenRow" v-if="column.children && column.children.body && !d_editing" />
<component :is="column.children.editor" :data="editingRowData" :column="column" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.editor && d_editing" />
<component :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-if="column.children && column.children.body && !d_editing" />
<component :is="column.children.editor" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.editor && d_editing" />
<template v-else-if="columnProp('selectionMode')">
<DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="columnProp('selectionMode') === 'single'" />
<DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="columnProp('selectionMode') ==='multiple'" />
Expand Down Expand Up @@ -40,7 +40,7 @@ import Ripple from 'primevue/ripple';
export default {
name: 'BodyCell',
emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel',
'row-toggle', 'radio-change', 'checkbox-change', 'editing-cell-change'],
'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
props: {
rowData: {
type: Object,
Expand Down Expand Up @@ -99,6 +99,9 @@ export default {
watch: {
editing(newValue) {
this.d_editing = newValue;
},
'$data.d_editing': function(newValue) {
this.$emit('editing-meta-change', {data: this.rowData, field: (this.field || `field_${this.index}`), index: this.rowIndex, editing: newValue});
}
},
mounted() {
Expand All @@ -122,7 +125,7 @@ export default {
return ObjectUtils.getVNodeProp(this.column, prop);
},
resolveFieldData() {
return ObjectUtils.resolveFieldData(this.rowData, this.columnProp('field'));
return ObjectUtils.resolveFieldData(this.rowData, this.field);
},
toggleRow(event) {
this.$emit('row-toggle', {
Expand Down Expand Up @@ -160,7 +163,6 @@ export default {
},
switchCellToViewMode() {
this.d_editing = false;
this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: false});
this.unbindDocumentEditListener();
OverlayEventBus.off('overlay-click', this.overlayEventListener);
this.overlayEventListener = null;
Expand All @@ -172,8 +174,7 @@ export default {
if (!this.d_editing) {
this.d_editing = true;
this.bindDocumentEditListener();
this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: true});
this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex});
this.overlayEventListener = (e) => {
if (this.$el && this.$el.contains(e.target)) {
Expand All @@ -189,7 +190,9 @@ export default {
originalEvent: event,
data: this.rowData,
newData: this.editingRowData,
field: this.columnProp('field'),
value: this.rowData[this.field],
newValue: this.editingRowData[this.field],
field: this.field,
index: this.rowIndex,
type: type,
defaultPrevented: false,
Expand All @@ -213,7 +216,7 @@ export default {
case 27:
this.switchCellToViewMode();
this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex});
break;
case 9:
Expand Down Expand Up @@ -302,16 +305,13 @@ export default {
return (DomHandler.find(this.$el, '.p-invalid').length === 0);
},
onRowEditInit(event) {
this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: true});
this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.columnProp('field'), index: this.rowIndex});
this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
},
onRowEditSave(event) {
this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.columnProp('field'), index: this.rowIndex});
this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: false});
this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
},
onRowEditCancel(event) {
this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.columnProp('field'), index: this.rowIndex});
this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: false});
this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
Expand Down Expand Up @@ -339,6 +339,9 @@ export default {
editingRowData() {
return this.editingMeta[this.rowIndex] ? this.editingMeta[this.rowIndex].data : this.rowData;
},
field() {
return this.columnProp('field');
},
containerClass() {
return [this.columnProp('bodyClass'), this.columnProp('class'), {
'p-selection-column': this.columnProp('selectionMode') != null,
Expand Down
33 changes: 31 additions & 2 deletions src/components/datatable/DataTable.vue
View file
Expand Up @@ -32,7 +32,8 @@
@row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
@row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)" />
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
:editingMeta="d_editingMeta" @editing-meta-change="onEditingMetaChange" />
<DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy" :scrollable="scrollable"
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
Expand All @@ -41,7 +42,8 @@
@row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
@row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)" />
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
:editingMeta="d_editingMeta" @editing-meta-change="onEditingMetaChange" />
<DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
</table>
</div>
Expand Down Expand Up @@ -328,6 +330,7 @@ export default {
d_expandedRowKeys: null,
d_columnOrder: null,
d_editingRowKeys: null,
d_editingMeta: {},
d_filters: this.cloneFilters(this.filters)
};
},
Expand Down Expand Up @@ -420,6 +423,8 @@ export default {
return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
},
onPage(event) {
this.clearEditingMetaData();
this.d_first = event.first;
this.d_rows = event.rows;
Expand Down Expand Up @@ -479,6 +484,8 @@ export default {
}
},
sortSingle(value) {
this.clearEditingMetaData();
if (this.groupRowsBy && this.groupRowsBy === this.sortField) {
this.d_multiSortMeta = [
{field: this.sortField, order: this.sortOrder || this.defaultSortOrder},
Expand Down Expand Up @@ -513,6 +520,8 @@ export default {
return data;
},
sortMultiple(value) {
this.clearEditingMetaData();
if (this.groupRowsBy && (this.d_groupRowsSortMeta || (this.d_multiSortMeta.length && this.groupRowsBy === this.d_multiSortMeta[0].field))) {
const firstSortMeta = this.d_multiSortMeta[0];
!this.d_groupRowsSortMeta && (this.d_groupRowsSortMeta = firstSortMeta);
Expand Down Expand Up @@ -570,6 +579,8 @@ export default {
return;
}
this.clearEditingMetaData();
let globalFilterFieldsArray;
if (this.filters['global']) {
globalFilterFieldsArray = this.globalFilterFields|| this.columns.map(col => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
Expand Down Expand Up @@ -1602,6 +1613,24 @@ export default {
this.$emit('update:editingRows', _editingRows);
this.$emit('row-edit-cancel', event);
},
onEditingMetaChange(event) {
let { data, field, index, editing } = event;
let meta = this.d_editingMeta[index];
if (editing) {
!meta && (meta = this.d_editingMeta[index] = { data: { ...data }, fields: [] });
meta['fields'].push(field);
}
else if (meta) {
const fields = meta['fields'].filter(f => f !== field);
!fields.length ? (delete this.d_editingMeta[index]) : (meta['fields'] = fields);
}
},
clearEditingMetaData() {
if (this.editMode) {
this.d_editingMeta = {};
}
},
createLazyLoadEvent(event) {
return {
originalEvent: event,
Expand Down
39 changes: 13 additions & 26 deletions src/components/datatable/TableBody.vue
View file
Expand Up @@ -18,10 +18,11 @@
<DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :rowData="rowData" :column="col" :rowIndex="index" :index="i" :selected="isSelected(rowData)"
:rowTogglerIcon="columnProp(col,'expander') ? rowTogglerIcon(rowData): null" :frozenRow="frozenRow"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
:editingMeta="editingMeta" :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout"
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout"
@radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)" @editing-cell-change="onEditingCellChange"
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)" />
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
:editingMeta="editingMeta" @editing-meta-change="onEditingMetaChange"/>
</template>
</tr>
<tr class="p-datatable-row-expansion" v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'" role="row">
Expand Down Expand Up @@ -52,7 +53,7 @@ export default {
emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown',
'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle',
'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel',
'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-cell-change'],
'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-meta-change'],
props: {
value: {
type: Array,
Expand Down Expand Up @@ -146,6 +147,10 @@ export default {
type: null,
default: null
},
editingMeta: {
type: Object,
default: null
},
loading: {
type: Boolean,
default: false
Expand Down Expand Up @@ -183,8 +188,7 @@ export default {
},
data() {
return {
rowGroupHeaderStyleObject: {},
editingMeta: {}
rowGroupHeaderStyleObject: {}
}
},
methods: {
Expand Down Expand Up @@ -430,26 +434,6 @@ export default {
onCheckboxChange(event) {
this.$emit('checkbox-change', event);
},
onEditingCellChange(event) {
let { data, field, index, editing } = event;
let meta = this.editingMeta[index];
if (editing) {
if (!meta) {
this.editingMeta[index] = { data: { ...data }, fields: [] };
}
this.editingMeta[index]['fields'].push(field);
}
else if (meta) {
let fields = meta['fields'];
fields = fields.filter(f => f !== field);
if (!fields.length)
delete this.editingMeta[index];
else
meta['fields'] = fields;
}
},
onCellEditInit(event) {
this.$emit('cell-edit-init', event);
},
Expand All @@ -468,6 +452,9 @@ export default {
onRowEditCancel(event) {
this.$emit('row-edit-cancel', event);
},
onEditingMetaChange(event) {
this.$emit('editing-meta-change', event);
},
updateFrozenRowStickyPosition() {
this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
},
Expand Down

0 comments on commit b5fd87d

Please sign in to comment.