From b5fd87dcd6595e6df3695637455eacfaff7b2e15 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 4 Oct 2021 10:36:36 +0300
Subject: [PATCH] Refactor #1273

---
 src/components/datatable/BodyCell.vue  | 33 ++++++++++++----------
 src/components/datatable/DataTable.vue | 33 ++++++++++++++++++++--
 src/components/datatable/TableBody.vue | 39 +++++++++-----------------
 3 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 1ad17e368..2f7580202 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -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'" />
@@ -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,
@@ -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() {
@@ -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', {
@@ -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;
@@ -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)) {
@@ -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,
@@ -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:
@@ -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')) {
@@ -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,
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index e0e5d4d9b..138ad2f2f 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -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"
@@ -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>
@@ -328,6 +330,7 @@ export default {
             d_expandedRowKeys: null,
             d_columnOrder: null,
             d_editingRowKeys: null,
+            d_editingMeta: {},
             d_filters: this.cloneFilters(this.filters)
         };
     },
@@ -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;
 
@@ -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},
@@ -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);
@@ -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'));
@@ -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,
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index c43dbc90b..18be716a2 100755
--- a/src/components/datatable/TableBody.vue
+++ b/src/components/datatable/TableBody.vue
@@ -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">
@@ -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,
@@ -146,6 +147,10 @@ export default {
             type: null,
             default: null
         },
+        editingMeta: {
+            type: Object,
+            default: null
+        },
         loading: {
             type: Boolean,
             default: false
@@ -183,8 +188,7 @@ export default {
     },
     data() {
         return {
-            rowGroupHeaderStyleObject: {},
-            editingMeta: {}
+            rowGroupHeaderStyleObject: {}
         }
     },
     methods: {
@@ -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);
         },
@@ -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';
         },