Row expansion demo
cagataycivici
parent
0d881a1ad9
commit
f52e5fd2c6
|
|
@ -0,0 +1,341 @@
|
||||||
|
{
|
||||||
|
"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,
|
||||||
|
"orders": [
|
||||||
|
{
|
||||||
|
"id": "1000",
|
||||||
|
"productCode": "f230fh0g3",
|
||||||
|
"date": "2020-09-13",
|
||||||
|
"amount": 65,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "David James",
|
||||||
|
"status": "PENDING"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1001",
|
||||||
|
"productCode": "f230fh0g3",
|
||||||
|
"date": "2020-05-14",
|
||||||
|
"amount": 130,
|
||||||
|
"quantity": 2,
|
||||||
|
"customer": "Leon Rodrigues",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1002",
|
||||||
|
"productCode": "f230fh0g3",
|
||||||
|
"date": "2019-01-04",
|
||||||
|
"amount": 65,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Juan Alejandro",
|
||||||
|
"status": "RETURNED"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1003",
|
||||||
|
"productCode": "f230fh0g3",
|
||||||
|
"date": "2020-09-13",
|
||||||
|
"amount": 195,
|
||||||
|
"quantity": 3,
|
||||||
|
"customer": "Claire Morrow",
|
||||||
|
"status": "CANCELLED"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1001",
|
||||||
|
"code": "nvklal433",
|
||||||
|
"name": "Black Watch",
|
||||||
|
"description": "Product Description",
|
||||||
|
"image": "black-watch.jpg",
|
||||||
|
"price": 72,
|
||||||
|
"category": "Accessories",
|
||||||
|
"quantity": 61,
|
||||||
|
"inventoryStatus": "INSTOCK",
|
||||||
|
"rating": 4,
|
||||||
|
"orders": [
|
||||||
|
{
|
||||||
|
"id": "2000",
|
||||||
|
"productCode": "nvklal433",
|
||||||
|
"date": "2020-05-14",
|
||||||
|
"amount": 72,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Maisha Jefferson",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2001",
|
||||||
|
"productCode": "nvklal433",
|
||||||
|
"date": "2020-02-28",
|
||||||
|
"amount": 144,
|
||||||
|
"quantity": 2,
|
||||||
|
"customer": "Octavia Murillo",
|
||||||
|
"status": "PENDING"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1002",
|
||||||
|
"code": "zz21cz3c1",
|
||||||
|
"name": "Blue Band",
|
||||||
|
"description": "Product Description",
|
||||||
|
"image": "blue-band.jpg",
|
||||||
|
"price": 79,
|
||||||
|
"category": "Fitness",
|
||||||
|
"quantity": 2,
|
||||||
|
"inventoryStatus": "LOWSTOCK",
|
||||||
|
"rating": 3,
|
||||||
|
"orders": [
|
||||||
|
{
|
||||||
|
"id": "3000",
|
||||||
|
"productCode": "zz21cz3c1",
|
||||||
|
"date": "2020-07-05",
|
||||||
|
"amount": 79,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Stacey Leja",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "3001",
|
||||||
|
"productCode": "zz21cz3c1",
|
||||||
|
"date": "2020-02-06",
|
||||||
|
"amount": 79,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Ashley Wickens",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1003",
|
||||||
|
"code": "244wgerg2",
|
||||||
|
"name": "Blue T-Shirt",
|
||||||
|
"description": "Product Description",
|
||||||
|
"image": "blue-t-shirt.jpg",
|
||||||
|
"price": 29,
|
||||||
|
"category": "Clothing",
|
||||||
|
"quantity": 25,
|
||||||
|
"inventoryStatus": "INSTOCK",
|
||||||
|
"rating": 5,
|
||||||
|
"orders": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1004",
|
||||||
|
"code": "h456wer53",
|
||||||
|
"name": "Bracelet",
|
||||||
|
"description": "Product Description",
|
||||||
|
"image": "bracelet.jpg",
|
||||||
|
"price": 15,
|
||||||
|
"category": "Accessories",
|
||||||
|
"quantity": 73,
|
||||||
|
"inventoryStatus": "INSTOCK",
|
||||||
|
"rating": 4,
|
||||||
|
"orders": [
|
||||||
|
{
|
||||||
|
"id": "5000",
|
||||||
|
"productCode": "h456wer53",
|
||||||
|
"date": "2020-09-05",
|
||||||
|
"amount": 60,
|
||||||
|
"quantity": 4,
|
||||||
|
"customer": "Mayumi Misaki",
|
||||||
|
"status": "PENDING"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "5001",
|
||||||
|
"productCode": "h456wer53",
|
||||||
|
"date": "2019-04-16",
|
||||||
|
"amount": 2,
|
||||||
|
"quantity": 30,
|
||||||
|
"customer": "Francesco Salvatore",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1005",
|
||||||
|
"code": "av2231fwg",
|
||||||
|
"name": "Brown Purse",
|
||||||
|
"description": "Product Description",
|
||||||
|
"image": "brown-purse.jpg",
|
||||||
|
"price": 120,
|
||||||
|
"category": "Accessories",
|
||||||
|
"quantity": 0,
|
||||||
|
"inventoryStatus": "OUTOFSTOCK",
|
||||||
|
"rating": 4,
|
||||||
|
"orders": [
|
||||||
|
{
|
||||||
|
"id": "6000",
|
||||||
|
"productCode": "av2231fwg",
|
||||||
|
"date": "2020-01-25",
|
||||||
|
"amount": 120,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Isabel Sinclair",
|
||||||
|
"status": "RETURNED"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "6001",
|
||||||
|
"productCode": "av2231fwg",
|
||||||
|
"date": "2019-03-12",
|
||||||
|
"amount": 240,
|
||||||
|
"quantity": 2,
|
||||||
|
"customer": "Lionel Clifford",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "6002",
|
||||||
|
"productCode": "av2231fwg",
|
||||||
|
"date": "2019-05-05",
|
||||||
|
"amount": 120,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Cody Chavez",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1006",
|
||||||
|
"code": "bib36pfvm",
|
||||||
|
"name": "Chakra Bracelet",
|
||||||
|
"description": "Product Description",
|
||||||
|
"image": "chakra-bracelet.jpg",
|
||||||
|
"price": 32,
|
||||||
|
"category": "Accessories",
|
||||||
|
"quantity": 5,
|
||||||
|
"inventoryStatus": "LOWSTOCK",
|
||||||
|
"rating": 3,
|
||||||
|
"orders": [
|
||||||
|
{
|
||||||
|
"id": "7000",
|
||||||
|
"productCode": "bib36pfvm",
|
||||||
|
"date": "2020-02-24",
|
||||||
|
"amount": 32,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Arvin Darci",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "7001",
|
||||||
|
"productCode": "bib36pfvm",
|
||||||
|
"date": "2020-01-14",
|
||||||
|
"amount": 64,
|
||||||
|
"quantity": 2,
|
||||||
|
"customer": "Izzy Jones",
|
||||||
|
"status": "PENDING"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1007",
|
||||||
|
"code": "mbvjkgip5",
|
||||||
|
"name": "Galaxy Earrings",
|
||||||
|
"description": "Product Description",
|
||||||
|
"image": "galaxy-earrings.jpg",
|
||||||
|
"price": 34,
|
||||||
|
"category": "Accessories",
|
||||||
|
"quantity": 23,
|
||||||
|
"inventoryStatus": "INSTOCK",
|
||||||
|
"rating": 5,
|
||||||
|
"orders": [
|
||||||
|
{
|
||||||
|
"id": "8000",
|
||||||
|
"productCode": "mbvjkgip5",
|
||||||
|
"date": "2020-06-19",
|
||||||
|
"amount": 34,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Jennifer Smith",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1008",
|
||||||
|
"code": "vbb124btr",
|
||||||
|
"name": "Game Controller",
|
||||||
|
"description": "Product Description",
|
||||||
|
"image": "game-controller.jpg",
|
||||||
|
"price": 99,
|
||||||
|
"category": "Electronics",
|
||||||
|
"quantity": 2,
|
||||||
|
"inventoryStatus": "LOWSTOCK",
|
||||||
|
"rating": 4,
|
||||||
|
"orders": [
|
||||||
|
{
|
||||||
|
"id": "9000",
|
||||||
|
"productCode": "vbb124btr",
|
||||||
|
"date": "2020-01-05",
|
||||||
|
"amount": 99,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Jeanfrancois David",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "9001",
|
||||||
|
"productCode": "vbb124btr",
|
||||||
|
"date": "2020-01-19",
|
||||||
|
"amount": 198,
|
||||||
|
"quantity": 2,
|
||||||
|
"customer": "Ivar Greenwood",
|
||||||
|
"status": "RETURNED"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1009",
|
||||||
|
"code": "cm230f032",
|
||||||
|
"name": "Gaming Set",
|
||||||
|
"description": "Product Description",
|
||||||
|
"image": "gaming-set.jpg",
|
||||||
|
"price": 299,
|
||||||
|
"category": "Electronics",
|
||||||
|
"quantity": 63,
|
||||||
|
"inventoryStatus": "INSTOCK",
|
||||||
|
"rating": 3,
|
||||||
|
"orders": [
|
||||||
|
{
|
||||||
|
"id": "10000",
|
||||||
|
"productCode": "cm230f032",
|
||||||
|
"date": "2020-06-24",
|
||||||
|
"amount": 299,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Kadeem Mujtaba",
|
||||||
|
"status": "PENDING"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "10001",
|
||||||
|
"productCode": "cm230f032",
|
||||||
|
"date": "2020-05-11",
|
||||||
|
"amount": 299,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Ashley Wickens",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "10002",
|
||||||
|
"productCode": "cm230f032",
|
||||||
|
"date": "2019-02-07",
|
||||||
|
"amount": 299,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Julie Johnson",
|
||||||
|
"status": "DELIVERED"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "10003",
|
||||||
|
"productCode": "cm230f032",
|
||||||
|
"date": "2020-04-26",
|
||||||
|
"amount": 299,
|
||||||
|
"quantity": 1,
|
||||||
|
"customer": "Tony Costa",
|
||||||
|
"status": "CANCELLED"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -61,6 +61,35 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.order-badge {
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: .25em .5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: .3px;
|
||||||
|
|
||||||
|
&.order-delivered {
|
||||||
|
background: #C8E6C9;
|
||||||
|
color: #256029;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.order-cancelled {
|
||||||
|
background: #FFCDD2;
|
||||||
|
color: #C63737;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.order-pending {
|
||||||
|
background: #FEEDAF;
|
||||||
|
color: #8A5340;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.order-returned {
|
||||||
|
background: #ECCFFF;
|
||||||
|
color: #694382;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.image-text {
|
.image-text {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-left: .5rem;
|
margin-left: .5rem;
|
||||||
|
|
|
||||||
|
|
@ -8,5 +8,9 @@ export default class ProductService {
|
||||||
|
|
||||||
getProducts() {
|
getProducts() {
|
||||||
return axios.get('demo/data/products.json').then(res => res.data.data);
|
return axios.get('demo/data/products.json').then(res => res.data.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
getProductsWithOrdersSmall() {
|
||||||
|
return axios.get('demo/data/products-orders-small.json').then(res => res.data.data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -239,11 +239,11 @@ export default {
|
||||||
let month = date.getMonth() + 1;
|
let month = date.getMonth() + 1;
|
||||||
let day = date.getDate();
|
let day = date.getDate();
|
||||||
|
|
||||||
if (month < 10) {
|
if (month < 10) {
|
||||||
month = '0' + month;
|
month = '0' + month;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (day < 10) {
|
if (day < 10) {
|
||||||
day = '0' + day;
|
day = '0' + day;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,31 +9,60 @@
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
|
<DataTable :value="products" :expandedRows.sync="expandedRows" dataKey="id"
|
||||||
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
|
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="table-header-container">
|
<div class="table-header-container">
|
||||||
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" />
|
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
|
||||||
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
|
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<Column :expander="true" headerStyle="width: 3em" />
|
<Column :expander="true" headerStyle="width: 3rem" />
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="name" header="Name" sortable></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column header="Image">
|
||||||
<Column field="brand" header="Brand"></Column>
|
<template #body="slotProps">
|
||||||
<Column field="color" header="Color"></Column>
|
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column field="price" header="Price" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
{{formatCurrency(slotProps.data.price)}}
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column field="category" header="Category" sortable></Column>
|
||||||
|
<Column field="rating" header="Reviews" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
<Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column header="Status" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
<template #expansion="slotProps">
|
<template #expansion="slotProps">
|
||||||
<div class="car-details">
|
<div class="orders-subtable">
|
||||||
<div>
|
<h5>Orders for {{slotProps.data.name}}</h5>
|
||||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
<DataTable :value="slotProps.data.orders">
|
||||||
<div class="p-grid">
|
<Column field="id" header="Id" sortable></Column>
|
||||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
<Column field="customer" header="Customer" sortable></Column>
|
||||||
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
<Column field="date" header="Date" sortable></Column>
|
||||||
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
<Column field="amount" header="Amount" sortable>
|
||||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
<template #body="slotProps" sortable>
|
||||||
</div>
|
{{formatCurrency(slotProps.data.amount)}}
|
||||||
</div>
|
</template>
|
||||||
<Button icon="pi pi-search"></Button>
|
</Column>
|
||||||
|
<Column header="Status" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
<span :class="'order-badge order-' + slotProps.data.status.toLowerCase()">{{slotProps.data.status}}</span>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column headerStyle="width:4rem">
|
||||||
|
<template #body>
|
||||||
|
<Button icon="pi pi-search" />
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
@ -45,31 +74,60 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
|
<DataTable :value="products" :expandedRows.sync="expandedRows" dataKey="id"
|
||||||
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
|
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="table-header-container">
|
<div class="table-header-container">
|
||||||
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" />
|
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
|
||||||
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
|
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<Column :expander="true" headerStyle="width: 3em" />
|
<Column :expander="true" headerStyle="width: 3rem" />
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="name" header="Name" sortable></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column header="Image">
|
||||||
<Column field="brand" header="Brand"></Column>
|
<template #body="slotProps">
|
||||||
<Column field="color" header="Color"></Column>
|
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column field="price" header="Price" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
{{formatCurrency(slotProps.data.price)}}
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column field="category" header="Category" sortable></Column>
|
||||||
|
<Column field="rating" header="Reviews" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
<Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column header="Status" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
<template #expansion="slotProps">
|
<template #expansion="slotProps">
|
||||||
<div class="car-details">
|
<div class="orders-subtable">
|
||||||
<div>
|
<h5>Orders for {{slotProps.data.name}}</h5>
|
||||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
<DataTable :value="slotProps.data.orders">
|
||||||
<div class="p-grid">
|
<Column field="id" header="Id" sortable></Column>
|
||||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
<Column field="customer" header="Customer" sortable></Column>
|
||||||
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
<Column field="date" header="Date" sortable></Column>
|
||||||
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
<Column field="amount" header="Amount" sortable>
|
||||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
<template #body="slotProps" sortable>
|
||||||
</div>
|
{{formatCurrency(slotProps.data.amount)}}
|
||||||
</div>
|
</template>
|
||||||
<Button icon="pi pi-search"></Button>
|
</Column>
|
||||||
|
<Column header="Status" sortable>
|
||||||
|
<template #body="slotProps">
|
||||||
|
<span :class="'order-badge order-' + slotProps.data.status.toLowerCase()">{{slotProps.data.status}}</span>
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
<Column headerStyle="width:4rem">
|
||||||
|
<template #body>
|
||||||
|
<Button icon="pi pi-search" />
|
||||||
|
</template>
|
||||||
|
</Column>
|
||||||
|
</DataTable>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
|
|
@ -77,36 +135,39 @@
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="javascript">
|
<CodeHighlight lang="javascript">
|
||||||
import CarService from '../../service/CarService';
|
import ProductService from '../../service/ProductService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cars: null,
|
products: null,
|
||||||
expandedRows: []
|
expandedRows: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
carService: null,
|
productService: null,
|
||||||
created() {
|
created() {
|
||||||
this.carService = new CarService();
|
this.productService = new ProductService();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
this.productService.getProductsWithOrdersSmall().then(data => this.products = data);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onRowExpand(event) {
|
onRowExpand(event) {
|
||||||
this.$toast.add({severity: 'info', summary: 'Row Expanded', detail: 'Vin: ' + event.data.vin, life: 3000});
|
this.$toast.add({severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000});
|
||||||
},
|
},
|
||||||
onRowCollapse(event) {
|
onRowCollapse(event) {
|
||||||
this.$toast.add({severity: 'success', summary: 'Row Collapsed', detail: 'Vin: ' + event.data.vin, life: 3000});
|
this.$toast.add({severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000});
|
||||||
},
|
},
|
||||||
expandAll() {
|
expandAll() {
|
||||||
this.expandedRows = this.cars.filter(car => car.vin);
|
this.expandedRows = this.products.filter(p => p.id);
|
||||||
this.$toast.add({severity: 'success', summary: 'All Rows Expanded', life: 3000});
|
this.$toast.add({severity: 'success', summary: 'All Rows Expanded', life: 3000});
|
||||||
},
|
},
|
||||||
collapseAll() {
|
collapseAll() {
|
||||||
this.expandedRows = null;
|
this.expandedRows = null;
|
||||||
this.$toast.add({severity: 'success', summary: 'All Rows Collapsed', life: 3000});
|
this.$toast.add({severity: 'success', summary: 'All Rows Collapsed', life: 3000});
|
||||||
|
},
|
||||||
|
formatCurrency(value) {
|
||||||
|
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -118,75 +179,51 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CarService from '../../service/CarService';
|
import ProductService from '../../service/ProductService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cars: null,
|
products: null,
|
||||||
expandedRows: []
|
expandedRows: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
carService: null,
|
productService: null,
|
||||||
created() {
|
created() {
|
||||||
this.carService = new CarService();
|
this.productService = new ProductService();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
this.productService.getProductsWithOrdersSmall().then(data => this.products = data);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onRowExpand(event) {
|
onRowExpand(event) {
|
||||||
this.$toast.add({severity: 'info', summary: 'Row Expanded', detail: 'Vin: ' + event.data.vin, life: 3000});
|
this.$toast.add({severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000});
|
||||||
},
|
},
|
||||||
onRowCollapse(event) {
|
onRowCollapse(event) {
|
||||||
this.$toast.add({severity: 'success', summary: 'Row Collapsed', detail: 'Vin: ' + event.data.vin, life: 3000});
|
this.$toast.add({severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000});
|
||||||
},
|
},
|
||||||
expandAll() {
|
expandAll() {
|
||||||
this.expandedRows = this.cars.filter(car => car.vin);
|
this.expandedRows = this.products.filter(p => p.id);
|
||||||
this.$toast.add({severity: 'success', summary: 'All Rows Expanded', life: 3000});
|
this.$toast.add({severity: 'success', summary: 'All Rows Expanded', life: 3000});
|
||||||
},
|
},
|
||||||
collapseAll() {
|
collapseAll() {
|
||||||
this.expandedRows = null;
|
this.expandedRows = null;
|
||||||
this.$toast.add({severity: 'success', summary: 'All Rows Collapsed', life: 3000});
|
this.$toast.add({severity: 'success', summary: 'All Rows Collapsed', life: 3000});
|
||||||
|
},
|
||||||
|
formatCurrency(value) {
|
||||||
|
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.table-header-container {
|
.product-image {
|
||||||
text-align: left;
|
width: 100px;
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
|
||||||
button {
|
|
||||||
min-width: 10rem;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-right: .5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.car-details {
|
.orders-subtable {
|
||||||
display: flex;
|
padding: 1rem;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 2rem;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-right: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.car-details {
|
|
||||||
img {
|
|
||||||
width: 75px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -285,7 +285,7 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
loadChunk(index, length) {
|
loadChunk(index, length) {
|
||||||
let chunk = [];
|
let chunk = [];
|
||||||
for (let i = 0; i < length; i++) {
|
for (let i = 0; i < length; i++) {
|
||||||
chunk[i] = {...this.inmemoryData[i]};
|
chunk[i] = {...this.inmemoryData[i]};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -298,7 +298,6 @@ export default {
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CustomerService from '../../service/CustomerService';
|
import CustomerService from '../../service/CustomerService';
|
||||||
import DataTableDoc from './DataTableDoc';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
|
||||||
|
|
@ -66,9 +66,11 @@ export default {
|
||||||
},
|
},
|
||||||
stockClass(data) {
|
stockClass(data) {
|
||||||
return [
|
return [
|
||||||
{'outofstock': data.quantity === 0,
|
{
|
||||||
'lowstock': data.quantity > 0 && data.quantity < 10,
|
'outofstock': data.quantity === 0,
|
||||||
'instock': data.quantity > 10}
|
'lowstock': data.quantity > 0 && data.quantity < 10,
|
||||||
|
'instock': data.quantity > 10
|
||||||
|
}
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -125,9 +127,11 @@ export default {
|
||||||
},
|
},
|
||||||
stockClass(data) {
|
stockClass(data) {
|
||||||
return [
|
return [
|
||||||
{'outofstock': data.quantity === 0,
|
{
|
||||||
'lowstock': data.quantity > 0 && data.quantity < 10,
|
'outofstock': data.quantity === 0,
|
||||||
'instock': data.quantity > 10}
|
'lowstock': data.quantity > 0 && data.quantity<10,
|
||||||
|
'instock': data.quantity > 10
|
||||||
|
}
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue