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

Update editing demo

pull/1643/head
mertsincan 2021-10-04 12:48:04 +03:00
parent dcf60ef1a3
commit 467d6a26d9
2 changed files with 97 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/views/datatable/DataTableDoc.vue
View File

@ -1122,17 +1122,16 @@ export default {
editor defines how the editing is implemented, below example demonstrates two cases. In the first example, simple v-model editors are utilized. This is pretty straightforward in most cases.
On the other hand, second example is more advanced to consider validations and ability to revert values with the escape key.</p>
<pre v-code><code><template v-pre>
&lt;h3&gt;Basic Cell Editing&lt;/h3&gt;
&lt;p&gt;Simple editors with v-model.&lt;/p&gt;
&lt;DataTable :value="cars1" editMode="cell"&gt;
&lt;h5&gt;Cell Editing&lt;/h5&gt;
&lt;DataTable :value="cars" editMode="cell" @cell-edit-complete="onCellEditComplete"&gt;
&lt;Column field="vin" header="Vin"&gt;
&lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.field]" /&gt;
&lt;InputText v-model="slotProps.data[slotProps.field]" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;
&lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.field]" /&gt;
&lt;InputText v-model="slotProps.data[slotProps.field]" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;
@ -1149,17 +1148,7 @@ export default {
&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;
&lt;template #editor="slotProps"&gt;
&lt;InputText v-model="slotProps.data[slotProps.column.field]" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;h3&gt;Advanced Cell Editing&lt;/h3&gt;
&lt;p&gt;Custom implementation with validations, dynamic columns and reverting values with the escape key.&lt;/p&gt;
&lt;DataTable :value="cars2" editMode="cell" @cell-edit-complete="onCellEditComplete"&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;
&lt;template #editor="slotProps"&gt;
&lt;InputText :value="slotProps.data[slotProps.column.field]" @input="onCellEdit($event, slotProps)" /&gt;
&lt;InputText v-model="slotProps.data[slotProps.field]" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
@ -1173,11 +1162,7 @@ import Vue from 'vue';
export default {
data() {
return {
cars1: null,
cars2: null,
cars3: null,
editingCellRows: {},
columns: null,
cars: null,
brands: [
{brand: 'Audi', value: 'Audi'},
{brand: 'BMW', value: 'BMW'},
@ -1194,45 +1179,27 @@ export default {
carService: null,
created() {
this.carService = new CarService();
this.columns = [
{field: 'vin', header: 'Vin'},
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'}
];
},
methods: {
onCellEditComplete(event) {
if (!this.editingCellRows[event.index]) {
return;
}
const editingCellValue = this.editingCellRows[event.index][event.field];
let { data, newValue, field } = event;
switch (event.field) {
case 'year':
if (this.isPositiveInteger(editingCellValue))
Vue.set(this.cars2, event.index, this.editingCellRows[event.index]);
if (this.isPositiveInteger(newValue))
data[field] = newValue;
else
event.preventDefault();
break;
default:
if (editingCellValue.trim().length > 0)
Vue.set(this.cars2, event.index, this.editingCellRows[event.index]);
if (newValue.trim().length > 0)
data[field] = newValue;
else
event.preventDefault();
break;
}
},
onCellEdit(newValue, props) {
if (!this.editingCellRows[props.index]) {
this.editingCellRows[props.index] = {...props.data};
}
this.editingCellRows[props.index][props.column.field] = newValue;
},
isPositiveInteger(val) {
let str = String(val);
str = str.trim();
@ -1245,8 +1212,7 @@ export default {
}
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars1 = data);
this.carService.getCarsSmall().then(data => this.cars2 = data);
this.carService.getCarsSmall().then(data => this.cars = data);
}
}
@ -1256,8 +1222,7 @@ export default {
since <i>editingRows</i> is two-way binding enabled, you may use it to initially display one or more rows in editing more or programmatically toggle row editing.</p>
<pre v-code><code><template v-pre>
&lt;h3&gt;Row Editing&lt;/h3&gt;
&lt;DataTable :value="cars" editMode="row" dataKey="vin" v-model:editingRows="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel"&gt;
&lt;DataTable :value="cars" editMode="row" dataKey="vin" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;
&lt;template #editor="slotProps"&gt;
@ -1291,19 +1256,15 @@ export default {
}
},
carService: null,
originalRows: null,
created() {
this.carService = new CarService();
this.originalRows = {};
},
methods: {
onRowEditInit(event) {
this.originalRows[event.index] = {...this.cars3[event.index]};
onRowEditSave(event) {
let { newData, index } = event;
this.cars[index] = newData;
},
onRowEditCancel(event) {
Vue.set(this.cars3, event.index, this.originalRows[event.index]);
}
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);

317
src/views/datatable/DataTableEditDemo.vue
View File

@ -12,46 +12,12 @@
<div class="content-section implementation p-fluid">
<div class="card">
<h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p>
<DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
<Column field="code" header="Code" style="width:25%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template>
</Column>
<Column field="name" header="Name" style="width:25%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" style="width:25%">
<template #editor="slotProps">
<Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps">
<span :class="'product-badge status-' + slotProps.option.value.toLowerCase()">{{slotProps.option.label}}</span>
</template>
</Dropdown>
</template>
<template #body="slotProps">
{{getStatusLabel(slotProps.data.inventoryStatus)}}
</template>
</Column>
<Column field="price" header="Price" style="width:25%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<h5>Cell Editing</h5>
<p>Validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products1" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%">
<template #editor="slotProps">
<InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
</DataTable>
@ -59,21 +25,20 @@
<div class="card">
<h5>Row Editing</h5>
<DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll">
<DataTable :value="products2" editMode="row" dataKey="id" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave" responsiveLayout="scroll">
<Column field="code" header="Code" style="width:20%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
<Column field="name" header="Name" style="width:20%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" style="width:20%">
<template #editor="slotProps">
<Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #editor="{ data, field }">
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps">
<span :class="'product-badge status-' + slotProps.option.value.toLowerCase()">{{slotProps.option.label}}</span>
</template>
@ -84,8 +49,8 @@
</template>
</Column>
<Column field="price" header="Price" style="width:20%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column>
<Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column>
@ -103,12 +68,10 @@ import ProductService from '../../service/ProductService';
export default {
data() {
return {
editingCellRows: {},
editingRows: [],
columns: null,
products1: null,
products2: null,
products3: null,
statuses: [
{label: 'In Stock', value: 'INSTOCK'},
{label: 'Low Stock', value: 'LOWSTOCK'},
@ -121,46 +84,12 @@ export default {
<template>
<div class="p-fluid">
<div class="card">
<h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p>
<DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
<Column field="code" header="Code" style="width:25%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template>
</Column>
<Column field="name" header="Name" style="width:25%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" style="width:25%">
<template #editor="slotProps">
<Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps">
<span :class="'product-badge status-' + slotProps.option.value.toLowerCase()">{{slotProps.option.label}}</span>
</template>
</Dropdown>
</template>
<template #body="slotProps">
{{getStatusLabel(slotProps.data.inventoryStatus)}}
</template>
</Column>
<Column field="price" header="Price" style="width:25%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products2" editMode="cell" @cellEditComplete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<h5>Cell Editing</h5>
<p>Validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products1" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%">
<template #editor="slotProps">
<InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
</DataTable>
@ -168,21 +97,20 @@ export default {
<div class="card">
<h5>Row Editing</h5>
<DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
@rowEditInit="onRowEditInit" @rowEditCancel="onRowEditCancel" responsiveLayout="scroll">
<DataTable :value="products2" editMode="row" dataKey="id" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave" responsiveLayout="scroll">
<Column field="code" header="Code" style="width:20%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
<Column field="name" header="Name" style="width:20%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" style="width:20%">
<template #editor="slotProps">
<Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #editor="{ data, field }">
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps">
<span :class="'product-badge status-' + slotProps.option.value.toLowerCase()">{{slotProps.option.label}}</span>
</template>
@ -193,14 +121,14 @@ export default {
</template>
</Column>
<Column field="price" header="Price" style="width:20%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column>
<Column :rowEditor="true" style="width: 10%; min-width:8rem" bodyStyle="text-align:center"></Column>
<Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column>
</DataTable>
</div>
</div>
</div>
</template>
<script>
@ -209,12 +137,10 @@ import ProductService from './service/ProductService';
export default {
data() {
return {
editingCellRows: {},
editingRows: [],
columns: null,
products1: null,
products2: null,
products3: null,
statuses: [
{label: 'In Stock', value: 'INSTOCK'},
{label: 'Low Stock', value: 'LOWSTOCK'},
@ -222,7 +148,6 @@ export default {
]
}
},
originalRows: null,
productService: null,
created() {
this.productService = new ProductService();
@ -233,41 +158,28 @@ export default {
{field: 'quantity', header: 'Quantity'},
{field: 'price', header: 'Price'}
];
this.originalRows = {};
},
methods: {
onCellEditComplete(event) {
if (!this.editingCellRows[event.index]) {
return;
}
let { data, newValue, field } = event;
const editingCellValue = this.editingCellRows[event.index][event.field];
switch (event.field) {
switch (field) {
case 'quantity':
case 'price':
if (this.isPositiveInteger(editingCellValue))
this.products2[event.index] = {...this.editingCellRows[event.index]};
if (this.isPositiveInteger(newValue))
data[field] = newValue;
else
event.preventDefault();
break;
default:
if (editingCellValue.trim().length > 0)
this.products2[event.index] = {...this.editingCellRows[event.index]};
if (newValue.trim().length > 0)
data[field] = newValue;
else
event.preventDefault();
break;
}
},
onCellEdit(newValue, props) {
if (!this.editingCellRows[props.index]) {
this.editingCellRows[props.index] = {...props.data};
}
this.editingCellRows[props.index][props.column.props.field] = newValue;
},
isPositiveInteger(val) {
let str = String(val);
str = str.trim();
@ -278,11 +190,10 @@ export default {
var n = Math.floor(Number(str));
return n !== Infinity && String(n) === str && n >= 0;
},
onRowEditInit(event) {
this.originalRows[event.index] = {...this.products3[event.index]};
},
onRowEditCancel(event) {
this.products3[event.index] = this.originalRows[event.index];
onRowEditSave(event) {
let { newData, index } = event;
this.products2[index] = newData;
},
getStatusLabel(status) {
switch(status) {
@ -303,7 +214,6 @@ export default {
mounted() {
this.productService.getProductsSmall().then(data => this.products1 = data);
this.productService.getProductsSmall().then(data => this.products2 = data);
this.productService.getProductsSmall().then(data => this.products3 = data);
}
}
<\\/script>
@ -321,46 +231,12 @@ export default {
<template>
<div class="p-fluid">
<div class="card">
<h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p>
<DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
<Column field="code" header="Code" style="width:25%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template>
</Column>
<Column field="name" header="Name" style="width:25%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" style="width:25%">
<template #editor="slotProps">
<Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps">
<span :class="'product-badge status-' + slotProps.option.value.toLowerCase()">{{slotProps.option.label}}</span>
</template>
</Dropdown>
</template>
<template #body="slotProps">
{{getStatusLabel(slotProps.data.inventoryStatus)}}
</template>
</Column>
<Column field="price" header="Price" style="width:25%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products2" editMode="cell" @cellEditComplete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<h5>Cell Editing</h5>
<p>Validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="products1" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" style="width:25%">
<template #editor="slotProps">
<InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
</DataTable>
@ -368,21 +244,20 @@ export default {
<div class="card">
<h5>Row Editing</h5>
<DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
@rowEditInit="onRowEditInit" @rowEditCancel="onRowEditCancel" responsiveLayout="scroll">
<DataTable :value="products2" editMode="row" dataKey="id" v-model:editingRows="editingRows" @row-edit-save="onRowEditSave" responsiveLayout="scroll">
<Column field="code" header="Code" style="width:20%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
<Column field="name" header="Name" style="width:20%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" style="width:20%">
<template #editor="slotProps">
<Dropdown v-model="slotProps.data['inventoryStatus']" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #editor="{ data, field }">
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
<template #option="slotProps">
<span :class="'product-badge status-' + slotProps.option.value.toLowerCase()">{{slotProps.option.label}}</span>
</template>
@ -393,14 +268,14 @@ export default {
</template>
</Column>
<Column field="price" header="Price" style="width:20%">
<template #editor="slotProps">
<InputText v-model="slotProps.data[slotProps.column.props.field]" />
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column>
<Column :rowEditor="true" style="width: 10%; min-width:8rem" bodyStyle="text-align:center"></Column>
<Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column>
</DataTable>
</div>
</div>
</div>
</template>
<script>
@ -412,11 +287,9 @@ export default {
onMounted(() => {
productService.value.getProductsSmall().then(data => products1.value = data);
productService.value.getProductsSmall().then(data => products2.value = data);
productService.value.getProductsSmall().then(data => products3.value = data);
})
});
const productService = ref(new ProductService());
const editingCellRows = ref({});
const editingRows = ref([]);
const columns = ref([
{field: 'code', header: 'Code'},
@ -426,8 +299,6 @@ export default {
]);
const products1 = ref(null);
const products2 = ref(null);
const products3 = ref(null);
const originalRows = ref({});
const statuses = ref([
{label: 'In Stock', value: 'INSTOCK'},
{label: 'Low Stock', value: 'LOWSTOCK'},
@ -435,36 +306,25 @@ export default {
]);
const onCellEditComplete = (event) => {
if (!editingCellRows.value[event.index]) {
return;
}
let { data, newValue, field } = event;
const editingCellValue = editingCellRows.value[event.index][event.field];
switch (event.field) {
switch (field) {
case 'quantity':
case 'price':
if (isPositiveInteger(editingCellValue))
products2.value[event.index] = {...editingCellRows.value[event.index]};
if (isPositiveInteger(newValue))
data[field] = newValue;
else
event.preventDefault();
break;
default:
if (editingCellValue.trim().length > 0)
products2.value[event.index] = {...editingCellRows.value[event.index]};
if (newValue.trim().length > 0)
data[field] = newValue;
else
event.preventDefault();
break;
}
};
const onCellEdit = (newValue, props) => {
if (!editingCellRows.value[props.index]) {
editingCellRows.value[props.index] = {...props.data};
}
editingCellRows.value[props.index][props.column.props.field] = newValue;
};
const isPositiveInteger = (val) => {
let str = String(val);
str = str.trim();
@ -475,11 +335,10 @@ export default {
var n = Math.floor(Number(str));
return n !== Infinity && String(n) === str && n >= 0;
};
const onRowEditInit = (event) => {
originalRows.value[event.index] = {...products3.value[event.index]};
};
const onRowEditCancel = (event) => {
products3.value[event.index] = originalRows.value[event.index];
const onRowEditSave = (event) => {
let { newData, index } = event;
products2[index] = newData;
};
const getStatusLabel = (status) => {
switch(status) {
@ -497,8 +356,8 @@ export default {
}
};
return { productService, editingCellRows, editingRows, columns, products1, products2, products3, originalRows, statuses, onCellEditComplete,
onCellEdit, isPositiveInteger, onRowEditInit, onRowEditCancel, getStatusLabel }
return { productService, editingRows, columns, products1, products2, statuses, onCellEditComplete,
isPositiveInteger, onRowEditSave, getStatusLabel }
}
}
<\\/script>
@ -513,7 +372,6 @@ export default {
}
}
},
originalRows: null,
productService: null,
created() {
this.productService = new ProductService();
@ -524,41 +382,28 @@ export default {
{field: 'quantity', header: 'Quantity'},
{field: 'price', header: 'Price'}
];
this.originalRows = {};
},
methods: {
onCellEditComplete(event) {
if (!this.editingCellRows[event.index]) {
return;
}
let { data, newValue, field } = event;
const editingCellValue = this.editingCellRows[event.index][event.field];
switch (event.field) {
switch (field) {
case 'quantity':
case 'price':
if (this.isPositiveInteger(editingCellValue))
this.products2[event.index] = {...this.editingCellRows[event.index]};
if (this.isPositiveInteger(newValue))
data[field] = newValue;
else
event.preventDefault();
break;
default:
if (editingCellValue.trim().length > 0)
this.products2[event.index] = {...this.editingCellRows[event.index]};
if (newValue.trim().length > 0)
data[field] = newValue;
else
event.preventDefault();
break;
}
},
onCellEdit(newValue, props) {
if (!this.editingCellRows[props.index]) {
this.editingCellRows[props.index] = {...props.data};
}
this.editingCellRows[props.index][props.column.props.field] = newValue;
},
isPositiveInteger(val) {
let str = String(val);
str = str.trim();
@ -569,11 +414,10 @@ export default {
var n = Math.floor(Number(str));
return n !== Infinity && String(n) === str && n >= 0;
},
onRowEditInit(event) {
this.originalRows[event.index] = {...this.products3[event.index]};
},
onRowEditCancel(event) {
this.products3[event.index] = this.originalRows[event.index];
onRowEditSave(event) {
let { newData, index } = event;
this.products2[index] = newData;
},
getStatusLabel(status) {
switch(status) {
@ -594,7 +438,6 @@ export default {
mounted() {
this.productService.getProductsSmall().then(data => this.products1 = data);
this.productService.getProductsSmall().then(data => this.products2 = data);
this.productService.getProductsSmall().then(data => this.products3 = data);
}
}
</script>
@ -604,4 +447,4 @@ export default {
padding-top: 0;
padding-bottom: 0;
}
</style>
</style>