From cb1ebca82df692b79412a5e907824403de95327b Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 2 Jul 2019 17:29:30 +0300
Subject: [PATCH] Lazy loading for DataTable

---
 src/components/datatable/DataTable.vue    | 13 +++-
 src/router.js                             |  5 ++
 src/views/datatable/DataTableLazyDemo.vue | 73 +++++++++++++++++++++++
 3 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 src/views/datatable/DataTableLazyDemo.vue

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 362c67b1f..2ca270903 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -1,6 +1,12 @@
 <template>
     <div class="p-datatable p-component">
         <slot></slot>
+        <div class="p-datatable-loading" v-if="loading">
+            <div class="p-datatable-loading-overlay p-component-overlay"></div>
+            <div class="p-datatable-loading-content">
+                <i :class="loadingIconClass"></i>
+            </div>
+        </div>
         <div class="p-datatable-wrapper">
             <div class="p-datatable-header" v-if="$scopedSlots.header">
                 <slot name="header"></slot>
@@ -501,6 +507,9 @@ export default {
         },
         hasGlobalFilter() {
             return this.filters && this.filters.hasOwnProperty('global');
+        },
+        loadingIconClass() {
+            return ['p-datatable-loading-icon pi-spin', this.loadingIcon];
         }
     },
     components: {
@@ -692,7 +701,7 @@ export default {
 }
 
 /* Loader */
-.p-datatable-loading-overlay {
+.p-datatable .p-datatable-loading-overlay {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -701,7 +710,7 @@ export default {
     z-index: 1;
 }
 
-.p-datatable-loading-content {
+.p-datatable .p-datatable-loading-content {
     position: absolute;
     left: 50%;
     top: 50%;
diff --git a/src/router.js b/src/router.js
index ce7ff47eb..276f9f3f1 100644
--- a/src/router.js
+++ b/src/router.js
@@ -130,6 +130,11 @@ export default new Router({
 			path: '/datatable/filter',
 			name: 'datatablefilter',
 			component: () => import('./views/datatable/DataTableFilterDemo.vue')
+        },
+        {
+			path: '/datatable/lazy',
+			name: 'datatablelazy',
+			component: () => import('./views/datatable/DataTableLazyDemo.vue')
 		},
 		{
 			path: '/dataview',
diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue
new file mode 100644
index 000000000..2a5d0483f
--- /dev/null
+++ b/src/views/datatable/DataTableLazyDemo.vue
@@ -0,0 +1,73 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Lazy</h1>
+				<p>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.
+                </p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<DataTable :value="cars" :lazy="true" paginator="true" :rows="10" 
+                :totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
+                <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>
+		</div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+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);
+        }
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>
\ No newline at end of file