330 lines
12 KiB
Vue
330 lines
12 KiB
Vue
<template>
|
|
<DocSectionText v-bind="$attrs">
|
|
<p>
|
|
Row editing is configured with setting <i>editMode</i> as <i>row</i> and defining <i>editingRows</i> with the v-model directive to hold the reference of the editing rows. Similarly with cell edit mode, defining input elements with
|
|
<i>editor</i> slot of a Column and implementing <i>row-edit-save</i> are necessary to update the state. The column to control the editing state should have <i>editor</i> templating applied.
|
|
</p>
|
|
</DocSectionText>
|
|
<div class="card p-fluid">
|
|
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
|
|
<Column field="code" header="Code" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<InputText v-model="data[field]" />
|
|
</template>
|
|
</Column>
|
|
<Column field="name" header="Name" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<InputText v-model="data[field]" />
|
|
</template>
|
|
</Column>
|
|
<Column field="inventoryStatus" header="Status" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
|
|
<template #option="slotProps">
|
|
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
|
|
</template>
|
|
</Dropdown>
|
|
</template>
|
|
<template #body="slotProps">
|
|
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
|
|
</template>
|
|
</Column>
|
|
<Column field="price" header="Price" style="width: 20%">
|
|
<template #body="{ data, field }">
|
|
{{ formatCurrency(data[field]) }}
|
|
</template>
|
|
<template #editor="{ data, field }">
|
|
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
|
|
</template>
|
|
</Column>
|
|
<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
|
|
</DataTable>
|
|
</div>
|
|
<DocSectionCode :code="code" :service="['ProductService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
|
|
</template>
|
|
|
|
<script>
|
|
import { ProductService } from '@/service/ProductService';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
products: null,
|
|
editingRows: [],
|
|
statuses: [
|
|
{ label: 'In Stock', value: 'INSTOCK' },
|
|
{ label: 'Low Stock', value: 'LOWSTOCK' },
|
|
{ label: 'Out of Stock', value: 'OUTOFSTOCK' }
|
|
],
|
|
code: {
|
|
basic: `
|
|
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
|
|
@row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
|
|
<Column field="code" header="Code" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<InputText v-model="data[field]" />
|
|
</template>
|
|
</Column>
|
|
<Column field="name" header="Name" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<InputText v-model="data[field]" />
|
|
</template>
|
|
</Column>
|
|
<Column field="inventoryStatus" header="Status" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
|
|
<template #option="slotProps">
|
|
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
|
|
</template>
|
|
</Dropdown>
|
|
</template>
|
|
<template #body="slotProps">
|
|
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
|
|
</template>
|
|
</Column>
|
|
<Column field="price" header="Price" style="width: 20%">
|
|
<template #body="{ data, field }">
|
|
{{ formatCurrency(data[field]) }}
|
|
</template>
|
|
<template #editor="{ data, field }">
|
|
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
|
|
</template>
|
|
</Column>
|
|
<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
|
|
</DataTable>`,
|
|
options: `
|
|
<template>
|
|
<div class="card p-fluid">
|
|
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
|
|
@row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
|
|
<Column field="code" header="Code" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<InputText v-model="data[field]" />
|
|
</template>
|
|
</Column>
|
|
<Column field="name" header="Name" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<InputText v-model="data[field]" />
|
|
</template>
|
|
</Column>
|
|
<Column field="inventoryStatus" header="Status" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
|
|
<template #option="slotProps">
|
|
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
|
|
</template>
|
|
</Dropdown>
|
|
</template>
|
|
<template #body="slotProps">
|
|
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
|
|
</template>
|
|
</Column>
|
|
<Column field="price" header="Price" style="width: 20%">
|
|
<template #body="{ data, field }">
|
|
{{ formatCurrency(data[field]) }}
|
|
</template>
|
|
<template #editor="{ data, field }">
|
|
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
|
|
</template>
|
|
</Column>
|
|
<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
|
|
</DataTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ProductService } from '@/service/ProductService';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
products: null,
|
|
editingRows: [],
|
|
statuses: [
|
|
{ label: 'In Stock', value: 'INSTOCK' },
|
|
{ label: 'Low Stock', value: 'LOWSTOCK' },
|
|
{ label: 'Out of Stock', value: 'OUTOFSTOCK' }
|
|
]
|
|
};
|
|
},
|
|
mounted() {
|
|
ProductService.getProductsMini().then((data) => (this.products = data));
|
|
},
|
|
methods: {
|
|
onRowEditSave(event) {
|
|
let { newData, index } = event;
|
|
|
|
this.products[index] = newData;
|
|
},
|
|
getStatusLabel(status) {
|
|
switch (status) {
|
|
case 'INSTOCK':
|
|
return 'success';
|
|
|
|
case 'LOWSTOCK':
|
|
return 'warning';
|
|
|
|
case 'OUTOFSTOCK':
|
|
return 'danger';
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
},
|
|
formatCurrency(value) {
|
|
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
|
|
}
|
|
}
|
|
};
|
|
<\/script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep(.editable-cells-table td.p-cell-editing) {
|
|
padding-top: 0.6rem;
|
|
padding-bottom: 0.6rem;
|
|
}
|
|
</style>`,
|
|
composition: `
|
|
<template>
|
|
<div class="card p-fluid">
|
|
<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
|
|
@row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
|
|
<Column field="code" header="Code" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<InputText v-model="data[field]" />
|
|
</template>
|
|
</Column>
|
|
<Column field="name" header="Name" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<InputText v-model="data[field]" />
|
|
</template>
|
|
</Column>
|
|
<Column field="inventoryStatus" header="Status" style="width: 20%">
|
|
<template #editor="{ data, field }">
|
|
<Dropdown v-model="data[field]" :options="statuses" optionLabel="label" optionValue="value" placeholder="Select a Status">
|
|
<template #option="slotProps">
|
|
<Tag :value="slotProps.option.value" :severity="getStatusLabel(slotProps.option.value)" />
|
|
</template>
|
|
</Dropdown>
|
|
</template>
|
|
<template #body="slotProps">
|
|
<Tag :value="slotProps.data.inventoryStatus" :severity="getStatusLabel(slotProps.data.inventoryStatus)" />
|
|
</template>
|
|
</Column>
|
|
<Column field="price" header="Price" style="width: 20%">
|
|
<template #body="{ data, field }">
|
|
{{ formatCurrency(data[field]) }}
|
|
</template>
|
|
<template #editor="{ data, field }">
|
|
<InputNumber v-model="data[field]" mode="currency" currency="USD" locale="en-US" />
|
|
</template>
|
|
</Column>
|
|
<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
|
|
</DataTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { ProductService } from '@/service/ProductService';
|
|
|
|
const products = ref();
|
|
const editingRows = ref([]);
|
|
const statuses = ref([
|
|
{ label: 'In Stock', value: 'INSTOCK' },
|
|
{ label: 'Low Stock', value: 'LOWSTOCK' },
|
|
{ label: 'Out of Stock', value: 'OUTOFSTOCK' }
|
|
]);
|
|
|
|
onMounted(() => {
|
|
ProductService.getProductsMini().then((data) => (products.value = data));
|
|
});
|
|
|
|
const onRowEditSave = (event) => {
|
|
let { newData, index } = event;
|
|
|
|
products.value[index] = newData;
|
|
};
|
|
const getStatusLabel = (status) => {
|
|
switch (status) {
|
|
case 'INSTOCK':
|
|
return 'success';
|
|
|
|
case 'LOWSTOCK':
|
|
return 'warning';
|
|
|
|
case 'OUTOFSTOCK':
|
|
return 'danger';
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
const formatCurrency = (value) => {
|
|
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
|
|
}
|
|
|
|
<\/script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep(.editable-cells-table td.p-cell-editing) {
|
|
padding-top: 0.6rem;
|
|
padding-bottom: 0.6rem;
|
|
}
|
|
</style>`,
|
|
data: `
|
|
{
|
|
id: '1000',
|
|
code: 'f230fh0g3',
|
|
name: 'Bamboo Watch',
|
|
description: 'Product Description',
|
|
image: 'bamboo-watch.jpg',
|
|
price: 65,
|
|
category: 'Accessories',
|
|
quantity: 24,
|
|
inventoryStatus: 'INSTOCK',
|
|
rating: 5
|
|
},
|
|
...
|
|
`
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
ProductService.getProductsMini().then((data) => (this.products = data));
|
|
},
|
|
methods: {
|
|
onRowEditSave(event) {
|
|
let { newData, index } = event;
|
|
|
|
this.products[index] = newData;
|
|
},
|
|
getStatusLabel(status) {
|
|
switch (status) {
|
|
case 'INSTOCK':
|
|
return 'success';
|
|
|
|
case 'LOWSTOCK':
|
|
return 'warning';
|
|
|
|
case 'OUTOFSTOCK':
|
|
return 'danger';
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
},
|
|
formatCurrency(value) {
|
|
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep(.editable-cells-table td.p-cell-editing) {
|
|
padding-top: 0.6rem;
|
|
padding-bottom: 0.6rem;
|
|
}
|
|
</style>
|