From 2e678efce1dec8614a3d190ae396d821231a4be3 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 24 May 2019 14:03:29 +0300
Subject: [PATCH] Add lazy loading support to DataView

---
 src/components/dataview/DataView.vue | 10 +++++--
 src/views/dataview/DataViewDemo.vue  |  2 +-
 src/views/dataview/DataViewDoc.vue   | 43 ++++++++++++++++++++++++++--
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index fa530029d..d4af3f329 100644
--- a/src/components/dataview/DataView.vue
+++ b/src/components/dataview/DataView.vue
@@ -196,10 +196,14 @@
                         data = this.sort();
                     }
                 
-                    if (this.paginator)
-                        return data.slice(this.d_first, this.d_first + this.d_rows);
-                    else
+                    if (this.paginator) {
+                        const first = this.lazy ? 0 : this.d_first;
+                        return data.slice(first, first + this.d_rows);
+                    }
+                    else {
                         return data;
+                    }
+                        
                 }
                 else {
                     return null;
diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index 81f0c6c2d..c6b65d469 100644
--- a/src/views/dataview/DataViewDemo.vue
+++ b/src/views/dataview/DataViewDemo.vue
@@ -9,7 +9,7 @@
 
 		<div class="content-section implementation dataview-demo">
 			<h3 class="first">Default</h3>
-			<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
+			<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
 				<template #header>
 					<div class="p-grid p-nogutter">
 						<div class="p-col-6" style="text-align: left">
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index a0a8161a2..e31ae686d 100644
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -100,7 +100,7 @@ export default {
 					of page links to display. To customize the left and right side of the paginators, use <i>paginatorLeft</i> and <i>paginatorRight</i> templates.</p>
 <CodeHighlight>
 <template v-pre>
-&lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20"&gt;
+&lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt;
 	&lt;template #paginatorLeft&gt;
 		&lt;Button type="button" icon="pi pi-refresh"/&gt;
 	&lt;/template&gt;
@@ -186,6 +186,45 @@ export default {
     }
 }
 </template>
+</CodeHighlight>
+
+                <h3>Lazy Loading</h3>
+                <p>Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend.
+                Pagination in this case needs to display the logical number of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only
+                need to load the data of the current page.</p>
+<CodeHighlight>
+<template v-pre>
+&lt;DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)"&gt;
+	&lt;template #list="slotProps" &gt;
+		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+	&lt;/template&gt;
+	&lt;template #grid="slotProps"&gt;
+		&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
+	&lt;/template&gt;
+&lt;/DataView&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="js">
+<template v-pre>
+export default {
+    data() {
+        return {
+            cars: null,
+            layout: 'list'
+        }
+    },
+    carService: null,
+    mounted() {
+        this.cars = //initialize the first chunk of data between 0 and 20
+    },
+    methods: {
+        onPage(event){
+            this.cars = //load the data between (event.first) and (event.first + event.rows) from a remote datasource
+        }
+    }
+}
+</template>
 </CodeHighlight>
 
 				<h3>Properties</h3>
@@ -383,7 +422,7 @@ export default {
 
     &lt;div class="content-section implementation dataview-demo"&gt;
         &lt;h3 class="first"&gt;Default&lt;/h3&gt;
-        &lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
+        &lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
             &lt;template #header&gt;
                 &lt;div class="p-grid p-nogutter"&gt;
                     &lt;div class="p-col-6" style="text-align: left"&gt;