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 { export default {
name: 'BodyCell', name: 'BodyCell',
emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 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: { props: {
rowData: { rowData: {
type: Object, type: Object,
@ -74,6 +74,10 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
editingMeta: {
type: Object,
default: null
},
editMode: { editMode: {
type: String, type: String,
default: null default: null
@ -156,6 +160,7 @@ export default {
}, },
switchCellToViewMode() { switchCellToViewMode() {
this.d_editing = false; this.d_editing = false;
this.$emit('editing-cell-change', {data: this.rowData, field: this.columnProp('field'), index: this.rowIndex, editing: false});
this.unbindDocumentEditListener(); this.unbindDocumentEditListener();
OverlayEventBus.off('overlay-click', this.overlayEventListener); OverlayEventBus.off('overlay-click', this.overlayEventListener);
this.overlayEventListener = null; this.overlayEventListener = null;
@ -167,6 +172,7 @@ export default {
if (!this.d_editing) { if (!this.d_editing) {
this.d_editing = true; this.d_editing = true;
this.bindDocumentEditListener(); 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.columnProp('field'), index: this.rowIndex});
this.overlayEventListener = (e) => { this.overlayEventListener = (e) => {
@ -296,13 +302,16 @@ export default {
return (DomHandler.find(this.$el, '.p-invalid').length === 0); return (DomHandler.find(this.$el, '.p-invalid').length === 0);
}, },
onRowEditInit(event) { 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) { 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) { 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() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
@ -328,7 +337,7 @@ export default {
}, },
computed: { computed: {
editingRowData() { editingRowData() {
return this.d_editing ? {...this.rowData} : this.rowData; return this.editingMeta[this.rowIndex] ? this.editingMeta[this.rowIndex].data : this.rowData;
}, },
containerClass() { containerClass() {
return [this.columnProp('bodyClass'), this.columnProp('class'), { 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)" <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" :rowTogglerIcon="columnProp(col,'expander') ? rowTogglerIcon(rowData): null" :frozenRow="frozenRow"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null" :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)" @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)" /> @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)" />
</template> </template>
</tr> </tr>
@ -52,7 +52,7 @@ export default {
emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown', 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', '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', '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: { props: {
value: { value: {
type: Array, type: Array,
@ -183,7 +183,8 @@ export default {
}, },
data() { data() {
return { return {
rowGroupHeaderStyleObject: {} rowGroupHeaderStyleObject: {},
editingMeta: {}
} }
}, },
methods: { methods: {
@ -429,6 +430,26 @@ export default {
onCheckboxChange(event) { onCheckboxChange(event) {
this.$emit('checkbox-change', 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) { onCellEditInit(event) {
this.$emit('cell-edit-init', event); this.$emit('cell-edit-init', event);
}, },