Refactor #1273

primefaces · Oct 4, 2021 · fa4d634 · fa4d634
1 parent 69e7d3b
commit fa4d634
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 9 deletions.
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
@@ -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'],
+            'row-toggle', 'radio-change', 'checkbox-change', 'editing-cell-change'],
     props: {
         rowData: {
             type: Object,
@@ -74,6 +74,10 @@ export default {
             type: Boolean,
             default: false
         },
+        editingMeta: {
+            type: Object,
+            default: null
+        },
         editMode: {
             type: String,
             default: null
@@ -156,6 +160,7 @@ 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;
@@ -167,6 +172,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.overlayEventListener = (e) => {
@@ -296,13 +302,16 @@ export default {
             return (DomHandler.find(this.$el, '.p-invalid').length === 0);
         },
         onRowEditInit(event) {
-            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
+            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});
         },
         onRowEditSave(event) {
-            this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
+            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});
         },
         onRowEditCancel(event) {
-            this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
+            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});
         },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
@@ -328,7 +337,7 @@ export default {
     },
     computed: {
         editingRowData() {
-            return this.d_editing ? {...this.rowData} : this.rowData;
+            return this.editingMeta[this.rowIndex] ? this.editingMeta[this.rowIndex].data : this.rowData;
         },
         containerClass() {
             return [this.columnProp('bodyClass'), this.columnProp('class'), {

diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
@@ -18,9 +18,9 @@
                         <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"
-                            :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout"
+                            :editingMeta="editingMeta" :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)"
+                            @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)" />
                     </template>
                 </tr>
@@ -52,7 +52,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'],
+        'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-cell-change'],
     props: {
         value: {
             type: Array,
@@ -183,7 +183,8 @@ export default {
     },
     data() {
         return {
-            rowGroupHeaderStyleObject: {}
+            rowGroupHeaderStyleObject: {},
+            editingMeta: {}
         }
     },
     methods: {
@@ -429,6 +430,26 @@ 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);
         },