From f52e5fd2c67b4f3024d56d8ecd46f08f431a7f3b Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Wed, 1 Jul 2020 11:55:56 +0300 Subject: [PATCH] Row expansion demo --- public/demo/data/products-orders-small.json | 341 ++++++++++++++++++ src/assets/styles/app/_demo.scss | 29 ++ src/service/ProductService.js | 4 + .../datatable/DataTableColResizeDemo.vue | 2 +- src/views/datatable/DataTableEditDemo.vue | 4 +- src/views/datatable/DataTableFilterDemo.vue | 4 +- .../datatable/DataTablePaginatorDemo.vue | 4 +- .../datatable/DataTableRowExpandDemo.vue | 205 ++++++----- src/views/datatable/DataTableScrollDemo.vue | 2 +- src/views/datatable/DataTableStateDemo.vue | 1 - src/views/datatable/DataTableStyleDemo.vue | 16 +- .../datatable/DataTableTemplatingDemo.vue | 2 +- 12 files changed, 514 insertions(+), 100 deletions(-) create mode 100644 public/demo/data/products-orders-small.json diff --git a/public/demo/data/products-orders-small.json b/public/demo/data/products-orders-small.json new file mode 100644 index 000000000..b66e290f4 --- /dev/null +++ b/public/demo/data/products-orders-small.json @@ -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" + } + ] + } + ] +} \ No newline at end of file diff --git a/src/assets/styles/app/_demo.scss b/src/assets/styles/app/_demo.scss index 05506fe2a..9a2784560 100644 --- a/src/assets/styles/app/_demo.scss +++ b/src/assets/styles/app/_demo.scss @@ -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 { vertical-align: middle; margin-left: .5rem; diff --git a/src/service/ProductService.js b/src/service/ProductService.js index 2ae3079b0..78e3eb2bc 100644 --- a/src/service/ProductService.js +++ b/src/service/ProductService.js @@ -8,5 +8,9 @@ export default class ProductService { getProducts() { 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); } } diff --git a/src/views/datatable/DataTableColResizeDemo.vue b/src/views/datatable/DataTableColResizeDemo.vue index aec2c2ce0..e8a481ffb 100755 --- a/src/views/datatable/DataTableColResizeDemo.vue +++ b/src/views/datatable/DataTableColResizeDemo.vue @@ -18,7 +18,7 @@ - +
Expand Mode
diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue index 9db1597ea..e21cfef0d 100755 --- a/src/views/datatable/DataTableEditDemo.vue +++ b/src/views/datatable/DataTableEditDemo.vue @@ -265,7 +265,7 @@ export default { case 'LOWSTOCK': return 'Low Stock'; - + case 'OUTOFSTOCK': return 'Out of Stock'; @@ -379,7 +379,7 @@ export default { case 'LOWSTOCK': return 'Low Stock'; - + case 'OUTOFSTOCK': return 'Out of Stock'; diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue index 199ad70b7..4d8bb765c 100755 --- a/src/views/datatable/DataTableFilterDemo.vue +++ b/src/views/datatable/DataTableFilterDemo.vue @@ -239,11 +239,11 @@ export default { let month = date.getMonth() + 1; let day = date.getDate(); - if (month < 10) { + if (month < 10) { month = '0' + month; } - if (day < 10) { + if (day < 10) { day = '0' + day; } diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue index 814c5cfa4..267e5432b 100755 --- a/src/views/datatable/DataTablePaginatorDemo.vue +++ b/src/views/datatable/DataTablePaginatorDemo.vue @@ -10,7 +10,7 @@
@@ -33,7 +33,7 @@