From 8760c67f8bb5191a7df5a3a43b290cb358579a16 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Wed, 10 Jul 2019 13:48:20 +0300 Subject: [PATCH] Source code display for DataTable demos --- .../datatable/DataTableColToggleDemo.vue | 49 +++++++ src/views/datatable/DataTableCrudDemo.vue | 129 ++++++++++++++++++ src/views/datatable/DataTableExportDemo.vue | 46 +++++++ src/views/datatable/DataTableFilterDemo.vue | 88 ++++++++++++ src/views/datatable/DataTableLazyDemo.vue | 66 ++++++++- .../datatable/DataTablePaginatorDemo.vue | 42 ++++++ .../datatable/DataTableResponsiveDemo.vue | 89 ++++++++++++ .../datatable/DataTableSelectionDemo.vue | 113 +++++++++++++-- src/views/datatable/DataTableSortDemo.vue | 45 ++++++ .../datatable/DataTableTemplatingDemo.vue | 3 - 10 files changed, 656 insertions(+), 14 deletions(-) diff --git a/src/views/datatable/DataTableColToggleDemo.vue b/src/views/datatable/DataTableColToggleDemo.vue index 1523a1024..2417a1134 100644 --- a/src/views/datatable/DataTableColToggleDemo.vue +++ b/src/views/datatable/DataTableColToggleDemo.vue @@ -20,6 +20,55 @@ + +
+ + + + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + columns: null, + columnOptions: null, + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + + this.columns = [ + {field: 'year', header: 'Year'}, + {field: 'brand', header: 'Brand'}, + {field: 'color', header: 'Color'} + ]; + + this.columnOptions = [...this.columns]; + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + } +} + + + +
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue index afc95a4f1..42493d938 100644 --- a/src/views/datatable/DataTableCrudDemo.vue +++ b/src/views/datatable/DataTableCrudDemo.vue @@ -57,6 +57,135 @@ + +
+ + + + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + cars: null, + dialogVisible: false, + car: null, + selectedCar: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + }, + methods: { + addNewCar() { + this.car = {vin: this.generateVin(), year: '', brand: '', color: ''}; + this.dialogVisible = true; + }, + deleteCar() { + let index = this.findIndexByVin(this.car.vin); + this.cars = this.cars.filter((val,i) => i !== index); + this.dialogVisible = false; + this.car = null; + this.selectedCar = null; + }, + saveCar() { + let index = this.findIndexByVin(this.car.vin); + let cars = [...this.cars]; + if (index === -1) + cars.push(this.car); + else + cars[index] = this.car; + + this.cars = cars; + this.dialogVisible = false; + this.car = null; + this.selectedCar = null; + }, + onRowSelect(event) { + this.car = {...event.data}; + this.dialogVisible = true; + }, + generateVin() { + let result = ''; + let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + let charactersLength = characters.length; + for ( var i = 0; i < 8; i++ ) { + result += characters.charAt(Math.floor(Math.random() * charactersLength)); + } + return result; + }, + findIndexByVin(vin) { + let index = -1; + for (let i = 0; i < this.cars.length; i++) { + if (this.cars[i].vin === vin) { + index = i; + break; + } + } + + return index; + } + } +} + + + +
diff --git a/src/views/datatable/DataTableExportDemo.vue b/src/views/datatable/DataTableExportDemo.vue index 4f3a71a73..4965deab3 100644 --- a/src/views/datatable/DataTableExportDemo.vue +++ b/src/views/datatable/DataTableExportDemo.vue @@ -22,6 +22,52 @@ + +
+ + + + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + }, + methods: { + exportCSV() { + this.$refs.dt.exportCSV(); + } + } +} + + + +
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue index d28a53758..91ffe7e83 100644 --- a/src/views/datatable/DataTableFilterDemo.vue +++ b/src/views/datatable/DataTableFilterDemo.vue @@ -46,6 +46,94 @@ + +
+ + + + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + filters: {}, + brands: [ + {brand: 'Audi', value: 'Audi'}, + {brand: 'BMW', value: 'BMW'}, + {brand: 'Fiat', value: 'Fiat'}, + {brand: 'Honda', value: 'Honda'}, + {brand: 'Jaguar', value: 'Jaguar'}, + {brand: 'Mercedes', value: 'Mercedes'}, + {brand: 'Renault', value: 'Renault'}, + {brand: 'Volkswagen', value: 'Volkswagen'}, + {brand: 'Volvo', value: 'Volvo'} + ], + colors: [ + {name: 'White', value: 'White'}, + {name: 'Green', value: 'Green'}, + {name: 'Silver', value: 'Silver'}, + {name: 'Black', value: 'Black'}, + {name: 'Red', value: 'Red'}, + {name: 'Maroon', value: 'Maroon'}, + {name: 'Brown', value: 'Brown'}, + {name: 'Orange', value: 'Orange'}, + {name: 'Blue', value: 'Blue'} + ], + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsLarge().then(data => this.cars = data); + } +} + + + +
diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue index 2a5d0483f..3033e6b60 100644 --- a/src/views/datatable/DataTableLazyDemo.vue +++ b/src/views/datatable/DataTableLazyDemo.vue @@ -6,7 +6,8 @@

DataTable - Lazy

Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. - Sample belows imitates lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist. + Sample belows imitates lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration + so that paginator displays the UI assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.

@@ -20,6 +21,67 @@ + +
+ + + + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + loading: false, + totalRecords: 0, + cars: null + } + }, + datasource: null, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.loading = true; + + setTimeout(() => { + this.carService.getCarsLarge().then(data => { + this.datasource = data; + this.totalRecords = data.length, + this.cars = this.datasource.slice(0, 10); + this.loading = false; + }); + }, 1000); + }, + methods: { + onPage(event) { + this.loading = true; + + setTimeout(() => { + this.carService.getCarsLarge().then(data => { + this.cars = this.datasource.slice(event.first, event.first + event.rows); + this.loading = false; + }); + }, 1000); + } + } +} + + + +
@@ -53,8 +115,6 @@ export default { }, 1000); }, methods: { - - onPage(event) { this.loading = true; diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue index 9d6bf14e5..92490b970 100644 --- a/src/views/datatable/DataTablePaginatorDemo.vue +++ b/src/views/datatable/DataTablePaginatorDemo.vue @@ -23,6 +23,48 @@ + +
+ + + + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsLarge().then(data => this.cars = data); + } +} + + + +
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue index cd3e820ba..bfd929147 100644 --- a/src/views/datatable/DataTableResponsiveDemo.vue +++ b/src/views/datatable/DataTableResponsiveDemo.vue @@ -40,6 +40,95 @@ + +
+ + + + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + } +} + + + +.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title { + display: none; +} + +@media screen and (max-width: 40em) { + .p-datatable-responsive .p-datatable-thead > tr > th, + .p-datatable-responsive .p-datatable-tfoot > tr > td { + display: none !important; + } + + .p-datatable-responsive .p-datatable-tbody > tr > td { + text-align: left; + display: block; + border: 0 none; + width: 100% !important; + float: left; + clear: left; + } + + .p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title { + padding: .4em; + min-width: 30%; + display: inline-block; + margin: -.4em 1em -.4em -.4em; + font-weight: bold; + } +} + + + +
diff --git a/src/views/datatable/DataTableSelectionDemo.vue b/src/views/datatable/DataTableSelectionDemo.vue index ed873374f..3dd524ce0 100644 --- a/src/views/datatable/DataTableSelectionDemo.vue +++ b/src/views/datatable/DataTableSelectionDemo.vue @@ -73,14 +73,116 @@ - +
+ + + + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + cars: null, + selectedCar1: null, + selectedCar2: null, + selectedCar3: null, + selectedCars1: null, + selectedCars2: null, + selectedCars3: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + }, + methods: { + onRowSelect(event) { + this.$toast.add({severity: 'info', summary: 'Car Selected', detail: 'Vin: ' + event.data.vin, life: 3000}); + }, + onRowUnselect(event) { + this.$toast.add({severity: 'warn', summary: 'Car Unselected', detail: 'Vin: ' + event.data.vin, life: 3000}); + } + } +} + + + +
- - \ No newline at end of file + \ No newline at end of file diff --git a/src/views/datatable/DataTableSortDemo.vue b/src/views/datatable/DataTableSortDemo.vue index 08038f2a6..f9b68aca9 100644 --- a/src/views/datatable/DataTableSortDemo.vue +++ b/src/views/datatable/DataTableSortDemo.vue @@ -26,6 +26,51 @@ + +
+ + + + + + + +import CarService from '../../service/CarService'; + +export default { + data() { + return { + cars: null + } + }, + carService: null, + created() { + this.carService = new CarService(); + }, + mounted() { + this.carService.getCarsSmall().then(data => this.cars = data); + } +} + + + +
diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue index f28fd7b3b..13a30257a 100644 --- a/src/views/datatable/DataTableTemplatingDemo.vue +++ b/src/views/datatable/DataTableTemplatingDemo.vue @@ -43,9 +43,6 @@
- - View on GitHub -