From 49b9517df4014e880b57cd9336aa3db291db3d21 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sun, 7 Jan 2024 17:16:23 +0530
Subject: [PATCH] fix: implemented listview pagination in organization,contacts
 & call logs

---
 .../components/ListViews/CallLogsListView.vue   | 16 ++++++++++++++++
 .../components/ListViews/ContactsListView.vue   | 17 ++++++++++++++++-
 .../src/components/ListViews/DealsListView.vue  | 16 ++++++++++++++++
 .../ListViews/OrganizationsListView.vue         | 16 ++++++++++++++++
 frontend/src/pages/CallLogs.vue                 | 10 +++++++++-
 frontend/src/pages/Contacts.vue                 | 14 +++++++++++++-
 frontend/src/pages/Deals.vue                    | 13 ++++++++++++-
 frontend/src/pages/Organizations.vue            | 14 +++++++++++++-
 8 files changed, 111 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index ee8f2753..5a8a0e24 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -62,6 +62,15 @@
     </ListRows>
     <ListSelectBanner />
   </ListView>
+  <ListFooter
+    class="border-t px-5 py-2"
+    v-model="pageLengthCount"
+    :options="{
+      rowCount: options.rowCount,
+      totalCount: options.totalCount,
+    }"
+    @loadMore="emit('loadMore')"
+  />
 </template>
 <script setup>
 import {
@@ -72,6 +81,7 @@ import {
   ListRow,
   ListSelectBanner,
   ListRowItem,
+  ListFooter,
 } from 'frappe-ui'
 
 const props = defineProps({
@@ -87,7 +97,13 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      totalCount: 0,
+      rowCount: 0,
     }),
   },
 })
+
+const emit = defineEmits(['loadMore'])
+
+const pageLengthCount = defineModel()
 </script>
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index e73701bd..a4a214c2 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -63,6 +63,15 @@
     </ListRows>
     <ListSelectBanner />
   </ListView>
+  <ListFooter
+    class="border-t px-5 py-2"
+    v-model="pageLengthCount"
+    :options="{
+      rowCount: options.rowCount,
+      totalCount: options.totalCount,
+    }"
+    @loadMore="emit('loadMore')"
+  />
 </template>
 <script setup>
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
@@ -74,7 +83,7 @@ import {
   ListRow,
   ListSelectBanner,
   ListRowItem,
-  FormControl,
+  ListFooter,
 } from 'frappe-ui'
 
 const props = defineProps({
@@ -90,7 +99,13 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      totalCount: 0,
+      rowCount: 0,
     }),
   },
 })
+
+const emit = defineEmits(['loadMore'])
+
+const pageLengthCount = defineModel()
 </script>
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index c6bc906b..9a025966 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -86,6 +86,15 @@
     </ListRows>
     <ListSelectBanner />
   </ListView>
+  <ListFooter
+    class="border-t px-5 py-2"
+    v-model="pageLengthCount"
+    :options="{
+      rowCount: options.rowCount,
+      totalCount: options.totalCount,
+    }"
+    @loadMore="emit('loadMore')"
+  />
 </template>
 
 <script setup>
@@ -100,6 +109,7 @@ import {
   ListRow,
   ListRowItem,
   ListSelectBanner,
+  ListFooter,
 } from 'frappe-ui'
 
 const props = defineProps({
@@ -115,7 +125,13 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      totalCount: 0,
+      rowCount: 0,
     }),
   },
 })
+
+const emit = defineEmits(['loadMore'])
+
+const pageLengthCount = defineModel()
 </script>
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index 0d48ab42..50572dd0 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -51,6 +51,15 @@
     </ListRows>
     <ListSelectBanner />
   </ListView>
+  <ListFooter
+    class="border-t px-5 py-2"
+    v-model="pageLengthCount"
+    :options="{
+      rowCount: options.rowCount,
+      totalCount: options.totalCount,
+    }"
+    @loadMore="emit('loadMore')"
+  />
 </template>
 <script setup>
 import {
@@ -61,6 +70,7 @@ import {
   ListRow,
   ListSelectBanner,
   ListRowItem,
+  ListFooter,
 } from 'frappe-ui'
 
 const props = defineProps({
@@ -76,7 +86,13 @@ const props = defineProps({
     type: Object,
     default: () => ({
       selectable: true,
+      totalCount: 0,
+      rowCount: 0,
     }),
   },
 })
+
+const emit = defineEmits(['loadMore'])
+
+const pageLengthCount = defineModel()
 </script>
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index a86ccda6..bc80dad6 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -4,11 +4,17 @@
       <Breadcrumbs :items="breadcrumbs" />
     </template>
   </LayoutHeader>
-  <ViewControls v-model="callLogs" doctype="CRM Call Log" />
+  <ViewControls v-model="callLogs" v-model:loadMore="loadMore" doctype="CRM Call Log" />
   <CallLogsListView
     v-if="callLogs.data && rows.length"
+    v-model="callLogs.data.page_length_count"
     :rows="rows"
     :columns="callLogs.data.columns"
+    :options="{
+      rowCount: callLogs.data.row_count,
+      totalCount: callLogs.data.total_count,
+    }"
+    @loadMore="() => loadMore++"
   />
   <div
     v-else-if="callLogs.data"
@@ -44,7 +50,9 @@ const { getContact } = contactsStore()
 
 const breadcrumbs = [{ label: 'Call Logs', route: { name: 'Call Logs' } }]
 
+// callLogs data is loaded in the ViewControls component
 const callLogs = ref({})
+const loadMore = ref(1)
 
 const rows = computed(() => {
   if (!callLogs.value?.data?.data) return []
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index e8548ccf..b9a7be27 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -9,11 +9,21 @@
       </Button>
     </template>
   </LayoutHeader>
-  <ViewControls v-model="contacts" doctype="Contact" />
+  <ViewControls
+    v-model="contacts"
+    v-model:loadMore="loadMore"
+    doctype="Contact"
+  />
   <ContactsListView
     v-if="contacts.data && rows.length"
+    v-model="contacts.data.page_length_count"
     :rows="rows"
     :columns="contacts.data.columns"
+    :options="{
+      rowCount: contacts.data.row_count,
+      totalCount: contacts.data.total_count,
+    }"
+    @loadMore="() => loadMore++"
   />
   <div
     v-else-if="contacts.data"
@@ -68,7 +78,9 @@ const breadcrumbs = computed(() => {
   return items
 })
 
+// contacts data is loaded in the ViewControls component
 const contacts = ref({})
+const loadMore = ref(1)
 
 const rows = computed(() => {
   if (!contacts.value?.data?.data) return []
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 77534cbf..0c4eab6f 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -9,11 +9,21 @@
       </Button>
     </template>
   </LayoutHeader>
-  <ViewControls v-model="deals" doctype="CRM Deal" />
+  <ViewControls
+    v-model="deals"
+    v-model:loadMore="loadMore"
+    doctype="CRM Deal"
+  />
   <DealsListView
     v-if="deals.data && rows.length"
+    v-model="deals.data.page_length_count"
     :rows="rows"
     :columns="deals.data.columns"
+    :options="{
+      rowCount: deals.data.row_count,
+      totalCount: deals.data.total_count,
+    }"
+    @loadMore="() => loadMore++"
   />
   <div v-else-if="deals.data" class="flex h-full items-center justify-center">
     <div
@@ -75,6 +85,7 @@ const router = useRouter()
 
 // deals data is loaded in the ViewControls component
 const deals = ref({})
+const loadMore = ref(1)
 
 // Rows
 const rows = computed(() => {
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index c5057d10..51c1c57f 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -13,11 +13,21 @@
       </Button>
     </template>
   </LayoutHeader>
-  <ViewControls v-model="organizations" doctype="CRM Organization" />
+  <ViewControls
+    v-model="organizations"
+    v-model:loadMore="loadMore"
+    doctype="CRM Organization"
+  />
   <OrganizationsListView
     v-if="organizations.data && rows.length"
+    v-model="organizations.data.page_length_count"
     :rows="rows"
     :columns="organizations.data.columns"
+    :options="{
+      rowCount: organizations.data.row_count,
+      totalCount: organizations.data.total_count,
+    }"
+    @loadMore="() => loadMore++"
   />
   <div
     v-else-if="organizations.data"
@@ -74,7 +84,9 @@ const breadcrumbs = computed(() => {
   return items
 })
 
+// organizations data is loaded in the ViewControls component
 const organizations = ref({})
+const loadMore = ref(1)
 
 const rows = computed(() => {
   if (!organizations.value?.data?.data) return []