vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #1273

pull/1643/head
mertsincan 2021-10-04 09:01:09 +03:00
parent 69e7d3b167
commit fa4d6344e5
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/datatable/BodyCell.vue
View File

@ -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'), {

29
src/components/datatable/TableBody.vue
View File

@ -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);
},