ContextMenu and Responsive update
cagataycivici
parent
847a8d460d
commit
2b2b98633b
|
|
@ -9,11 +9,15 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
<DataTable :value="products" contextMenu :contextMenuSelection.sync="selectedProduct" @row-contextmenu="onRowContextMenu">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="price" header="Price">
|
||||
<template #body="slotProps">
|
||||
{{formatCurrency(slotProps.data.price)}}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
|
|
@ -25,11 +29,15 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
<DataTable :value="products" contextMenu :contextMenuSelection.sync="selectedProduct" @row-contextmenu="onRowContextMenu">
|
||||
<Column field="code" header="Code"></Column>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column field="category" header="Category"></Column>
|
||||
<Column field="price" header="Price">
|
||||
<template #body="slotProps">
|
||||
{{formatCurrency(slotProps.data.price)}}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
<ContextMenu :model="menuModel" ref="cm" />
|
||||
|
|
@ -37,37 +45,40 @@
|
|||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
import ProductService from '../../service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
selectedCar: null,
|
||||
products: null,
|
||||
selectedProduct: null,
|
||||
menuModel: [
|
||||
{label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewCar(this.selectedCar)},
|
||||
{label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteCar(this.selectedCar)}
|
||||
{label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
|
||||
{label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
|
||||
]
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
productService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
},
|
||||
methods: {
|
||||
onRowContextMenu(event) {
|
||||
this.$refs.cm.show(event.originalEvent);
|
||||
},
|
||||
viewCar(car) {
|
||||
this.$toast.add({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
|
||||
viewProduct(product) {
|
||||
this.$toast.add({severity: 'info', summary: 'Product Selected', detail: product.name});
|
||||
},
|
||||
deleteCar(car) {
|
||||
this.cars = this.cars.filter((c) => c.vin !== car.vin);
|
||||
this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand});
|
||||
this.selectedCar = null;
|
||||
deleteProduct(product) {
|
||||
this.products = this.products.filter((p) => p.id !== product.id);
|
||||
this.$toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name});
|
||||
this.selectedProduct = null;
|
||||
},
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -79,37 +90,40 @@ export default {
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CarService from '../../service/CarService';
|
||||
import ProductService from '../../service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
selectedCar: null,
|
||||
products: null,
|
||||
selectedProduct: null,
|
||||
menuModel: [
|
||||
{label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewCar(this.selectedCar)},
|
||||
{label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteCar(this.selectedCar)}
|
||||
{label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
|
||||
{label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
|
||||
]
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
productService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
this.productService.getProductsSmall().then(data => this.products = data);
|
||||
},
|
||||
methods: {
|
||||
onRowContextMenu(event) {
|
||||
this.$refs.cm.show(event.originalEvent);
|
||||
},
|
||||
viewCar(car) {
|
||||
this.$toast.add({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
|
||||
viewProduct(product) {
|
||||
this.$toast.add({severity: 'info', summary: 'Product Selected', detail: product.name});
|
||||
},
|
||||
deleteCar(car) {
|
||||
this.cars = this.cars.filter((c) => c.vin !== car.vin);
|
||||
this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand});
|
||||
this.selectedCar = null;
|
||||
deleteProduct(product) {
|
||||
this.products = this.products.filter((p) => p.id !== product.id);
|
||||
this.$toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name});
|
||||
this.selectedProduct = null;
|
||||
},
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,32 +9,32 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<DataTable :value="cars" class="p-datatable-responsive-demo" :paginator="true" :rows="10" paginatorPosition="both">
|
||||
<DataTable :value="products" class="p-datatable-responsive-demo" :paginator="true" :rows="10">
|
||||
<template #header>
|
||||
Responsive
|
||||
</template>
|
||||
<Column field="vin" header="Vin">
|
||||
<Column field="code" header="Code">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Vin</span>
|
||||
{{slotProps.data.vin}}
|
||||
<span class="p-column-title">Code</span>
|
||||
{{slotProps.data.code}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year">
|
||||
<Column field="name" header="Name">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Year</span>
|
||||
{{slotProps.data.year}}
|
||||
<span class="p-column-title">Name</span>
|
||||
{{slotProps.data.name}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand">
|
||||
<Column field="category" header="Category">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Brand</span>
|
||||
{{slotProps.data.brand}}
|
||||
<span class="p-column-title">Category</span>
|
||||
{{slotProps.data.category}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color">
|
||||
<Column field="quantity" header="Quantity">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Color</span>
|
||||
{{slotProps.data.color}}
|
||||
<span class="p-column-title">Quantity</span>
|
||||
{{slotProps.data.quantity}}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -46,32 +46,32 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" class="p-datatable-responsive" :paginator="true" rows="10" paginatorPosition="both">
|
||||
<DataTable :value="products" class="p-datatable-responsive-demo" :paginator="true" :rows="10">
|
||||
<template #header>
|
||||
Responsive
|
||||
</template>
|
||||
<Column field="vin" header="Vin">
|
||||
<Column field="code" header="Code">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Vin</span>
|
||||
{{slotProps.data.vin}}
|
||||
<span class="p-column-title">Code</span>
|
||||
{{slotProps.data.code}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year">
|
||||
<Column field="name" header="Name">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Year</span>
|
||||
{{slotProps.data.year}}
|
||||
<span class="p-column-title">Name</span>
|
||||
{{slotProps.data.name}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand">
|
||||
<Column field="category" header="Category">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Brand</span>
|
||||
{{slotProps.data.brand}}
|
||||
<span class="p-column-title">Category</span>
|
||||
{{slotProps.data.category}}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color">
|
||||
<Column field="quantity" header="Quantity">
|
||||
<template #body="slotProps">
|
||||
<span class="p-column-title">Color</span>
|
||||
{{slotProps.data.color}}
|
||||
<span class="p-column-title">Quantity</span>
|
||||
{{slotProps.data.quantity}}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -79,20 +79,20 @@
|
|||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
import ProductService from '../../service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null
|
||||
products: null
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
productService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
this.productService.getProducts().then(data => this.products = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
|
@ -113,10 +113,10 @@ export default {
|
|||
.p-datatable-tbody > tr > td {
|
||||
text-align: left;
|
||||
display: block;
|
||||
border: 0 none !important;
|
||||
width: 100% !important;
|
||||
width: 100%;
|
||||
float: left;
|
||||
clear: left;
|
||||
border: 0 none;
|
||||
|
||||
.p-column-title {
|
||||
padding: .4rem;
|
||||
|
|
@ -125,6 +125,10 @@ export default {
|
|||
margin: -.4em 1em -.4em -.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -137,20 +141,20 @@ export default {
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CarService from '../../service/CarService';
|
||||
import ProductService from '../../service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null
|
||||
products: null
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
productService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
this.productService = new ProductService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsMedium().then(data => this.cars = data);
|
||||
this.productService.getProducts().then(data => this.products = data);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -171,8 +175,7 @@ export default {
|
|||
.p-datatable-tbody > tr > td {
|
||||
text-align: left;
|
||||
display: block;
|
||||
border: 0 none !important;
|
||||
width: 100% !important;
|
||||
width: 100%;
|
||||
float: left;
|
||||
clear: left;
|
||||
border: 0 none;
|
||||
|
|
@ -184,6 +187,10 @@ export default {
|
|||
margin: -.4em 1em -.4em -.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue