fix: implemented listview pagination in organization,contacts & call logs

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>

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>

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>

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>

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 []

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 []

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(() => {

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 []