From 7212421bd5d13989adc6f8901c76be5a4e100461 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 5 Feb 2024 13:14:21 +0530
Subject: [PATCH] fix: make caching of list view data better

---
 .../components/ListViews/CallLogsListView.vue   |  8 +++++++-
 .../components/ListViews/ContactsListView.vue   |  8 +++++++-
 .../src/components/ListViews/DealsListView.vue  |  8 +++++++-
 .../ListViews/EmailTemplatesListView.vue        |  9 +++++++--
 .../src/components/ListViews/LeadsListView.vue  |  8 +++++++-
 .../ListViews/OrganizationsListView.vue         |  8 +++++++-
 .../src/components/ListViews/TasksListView.vue  |  9 +++++++--
 frontend/src/components/ViewControls.vue        | 17 +++++------------
 frontend/src/pages/CallLogs.vue                 |  3 +++
 frontend/src/pages/Contacts.vue                 |  3 +++
 frontend/src/pages/Deals.vue                    |  3 +++
 frontend/src/pages/EmailTemplates.vue           |  3 +++
 frontend/src/pages/Leads.vue                    |  3 +++
 frontend/src/pages/Notes.vue                    |  3 +++
 frontend/src/pages/Organizations.vue            |  3 +++
 frontend/src/pages/Tasks.vue                    |  3 +++
 16 files changed, 78 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index 77b14fa4..ca9f9078 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -83,6 +83,7 @@ import {
   ListRowItem,
   ListFooter,
 } from 'frappe-ui'
+import { watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -103,7 +104,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore'])
+const emit = defineEmits(['loadMore', 'updatePageCount'])
 
 const pageLengthCount = defineModel()
+
+watch(pageLengthCount, (val, old_value) => {
+  if (val === old_value) return
+  emit('updatePageCount', val)
+})
 </script>
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index 47d6ba8f..8e1c0d4e 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -87,6 +87,7 @@ import {
   ListRowItem,
   ListFooter,
 } from 'frappe-ui'
+import { watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -107,7 +108,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore'])
+const emit = defineEmits(['loadMore', 'updatePageCount'])
 
 const pageLengthCount = defineModel()
+
+watch(pageLengthCount, (val, old_value) => {
+  if (val === old_value) return
+  emit('updatePageCount', val)
+})
 </script>
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 2307bd46..9d997421 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -113,6 +113,7 @@ import {
   ListSelectBanner,
   ListFooter,
 } from 'frappe-ui'
+import { watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -133,7 +134,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore'])
+const emit = defineEmits(['loadMore', 'updatePageCount'])
 
 const pageLengthCount = defineModel()
+
+watch(pageLengthCount, (val, old_value) => {
+  if (val === old_value) return
+  emit('updatePageCount', val)
+})
 </script>
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index b40f59cb..72828956 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -79,7 +79,7 @@ import {
   ListFooter,
   call,
 } from 'frappe-ui'
-import { defineModel } from 'vue'
+import { defineModel, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -100,10 +100,15 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'showEmailTemplate', 'reload'])
+const emit = defineEmits(['loadMore', 'updatePageCount', 'showEmailTemplate', 'reload'])
 
 const pageLengthCount = defineModel()
 
+watch(pageLengthCount, (val, old_value) => {
+  if (val === old_value) return
+  emit('updatePageCount', val)
+})
+
 const { $dialog } = globalStore()
 
 function deleteEmailTemplate(selections, unselectAll) {
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index 96babdd4..a37d762a 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -122,6 +122,7 @@ import {
   ListRowItem,
   ListFooter,
 } from 'frappe-ui'
+import { watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -142,7 +143,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore'])
+const emit = defineEmits(['loadMore', 'updatePageCount'])
 
 const pageLengthCount = defineModel()
+
+watch(pageLengthCount, (val, old_value) => {
+  if (val === old_value) return
+  emit('updatePageCount', val)
+})
 </script>
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index dea1ae28..c077e6b8 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -72,6 +72,7 @@ import {
   ListRowItem,
   ListFooter,
 } from 'frappe-ui'
+import { watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -92,7 +93,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore'])
+const emit = defineEmits(['loadMore', 'updatePageCount'])
 
 const pageLengthCount = defineModel()
+
+watch(pageLengthCount, (val, old_value) => {
+  if (val === old_value) return
+  emit('updatePageCount', val)
+})
 </script>
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index b6e9f1ce..42217336 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -102,7 +102,7 @@ import {
   call,
   Tooltip,
 } from 'frappe-ui'
-import { defineModel } from 'vue'
+import { defineModel, watch } from 'vue'
 
 const props = defineProps({
   rows: {
@@ -123,10 +123,15 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['loadMore', 'showTask', 'reload'])
+const emit = defineEmits(['loadMore', 'updatePageCount', 'showTask', 'reload'])
 
 const pageLengthCount = defineModel()
 
+watch(pageLengthCount, (val, old_value) => {
+  if (val === old_value) return
+  emit('updatePageCount', val)
+})
+
 const { $dialog } = globalStore()
 
 function deleteTask(selections, unselectAll) {
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 680ed93c..504b8044 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -84,7 +84,6 @@ import ColumnSettings from '@/components/ColumnSettings.vue'
 import { globalStore } from '@/stores/global'
 import { viewsStore } from '@/stores/views'
 import { usersStore } from '@/stores/users'
-import { useDebounceFn } from '@vueuse/core'
 import { createResource, Dropdown, call, FeatherIcon } from 'frappe-ui'
 import { computed, ref, defineModel, onMounted, watch, h } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -113,6 +112,7 @@ const { isManager } = usersStore()
 
 const list = defineModel()
 const loadMore = defineModel('loadMore')
+const updatedPageCount = defineModel('updatedPageCount')
 
 const route = useRoute()
 const router = useRouter()
@@ -150,13 +150,10 @@ watch(loadMore, (value) => {
   updatePageLength(value, true)
 })
 
-watch(
-  () => list.value?.data?.page_length_count,
-  (value) => {
-    if (!value) return
-    updatePageLength(value)
-  }
-)
+watch(updatedPageCount, (value) => {
+  if (!value) return
+  updatePageLength(value)
+})
 
 function getParams() {
   let _view = getView(route.query.view, props.doctype)
@@ -227,10 +224,6 @@ list.value = createResource({
   },
 })
 
-onMounted(() => {
-  useDebounceFn(() => reload(), 100)()
-})
-
 const isLoading = computed(() => list.value?.loading)
 
 function reload() {
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index afe4a68f..423ad240 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -7,6 +7,7 @@
   <ViewControls
     v-model="callLogs"
     v-model:loadMore="loadMore"
+    v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Call Log"
   />
   <CallLogsListView
@@ -19,6 +20,7 @@
       totalCount: callLogs.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @updatePageCount="(count) => (updatedPageCount = count)"
   />
   <div
     v-else-if="callLogs.data"
@@ -57,6 +59,7 @@ 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 updatedPageCount = ref(20)
 
 const rows = computed(() => {
   if (!callLogs.value?.data?.data) return []
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index b9a7be27..99f35468 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="contacts"
     v-model:loadMore="loadMore"
+    v-model:updatedPageCount="updatedPageCount"
     doctype="Contact"
   />
   <ContactsListView
@@ -24,6 +25,7 @@
       totalCount: contacts.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @updatePageCount="(count) => (updatedPageCount = count)"
   />
   <div
     v-else-if="contacts.data"
@@ -81,6 +83,7 @@ const breadcrumbs = computed(() => {
 // contacts data is loaded in the ViewControls component
 const contacts = ref({})
 const loadMore = ref(1)
+const updatedPageCount = ref(20)
 
 const rows = computed(() => {
   if (!contacts.value?.data?.data) return []
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 31ffa16a..14cf8c9c 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="deals"
     v-model:loadMore="loadMore"
+    v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Deal"
   />
   <DealsListView
@@ -24,6 +25,7 @@
       totalCount: deals.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @updatePageCount="(count) => (updatedPageCount = count)"
   />
   <div v-else-if="deals.data" class="flex h-full items-center justify-center">
     <div
@@ -86,6 +88,7 @@ const router = useRouter()
 // deals data is loaded in the ViewControls component
 const deals = ref({})
 const loadMore = ref(1)
+const updatedPageCount = ref(20)
 
 // Rows
 const rows = computed(() => {
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index 3dea1ea4..c80e653e 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="emailTemplates"
     v-model:loadMore="loadMore"
+    v-model:updatedPageCount="updatedPageCount"
     doctype="Email Template"
   />
   <EmailTemplatesListView
@@ -24,6 +25,7 @@
       totalCount: emailTemplates.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @updatePageCount="(count) => (updatedPageCount = count)"
     @showEmailTemplate="showEmailTemplate"
     @reload="() => emailTemplates.reload()"
   />
@@ -62,6 +64,7 @@ const breadcrumbs = [
 // emailTemplates data is loaded in the ViewControls component
 const emailTemplates = ref({})
 const loadMore = ref(1)
+const updatedPageCount = ref(20)
 
 const rows = computed(() => {
   if (!emailTemplates.value?.data?.data) return []
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index 82f8abdb..65519542 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="leads"
     v-model:loadMore="loadMore"
+    v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Lead"
     :filters="{ converted: 0 }"
   />
@@ -25,6 +26,7 @@
       totalCount: leads.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @updatePageCount="(count) => (updatedPageCount = count)"
   />
   <div v-else-if="leads.data" class="flex h-full items-center justify-center">
     <div
@@ -81,6 +83,7 @@ const router = useRouter()
 // leads data is loaded in the ViewControls component
 const leads = ref({})
 const loadMore = ref(1)
+const updatedPageCount = ref(20)
 
 // Rows
 const rows = computed(() => {
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index 1041be15..1a38e3dd 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="notes"
     v-model:loadMore="loadMore"
+    v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Note"
     :options="{
       hideColumnsButton: true,
@@ -79,6 +80,7 @@
       totalCount: notes.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @updatePageCount="(count) => (updatedPageCount = count)"
   />
   <div v-else class="flex h-full items-center justify-center">
     <div
@@ -131,6 +133,7 @@ const currentNote = ref(null)
 
 const notes = ref({})
 const loadMore = ref(1)
+const updatedPageCount = ref(20)
 
 function createNote() {
   currentNote.value = {
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 51c1c57f..c1c28c81 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -16,6 +16,7 @@
   <ViewControls
     v-model="organizations"
     v-model:loadMore="loadMore"
+    v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Organization"
   />
   <OrganizationsListView
@@ -28,6 +29,7 @@
       totalCount: organizations.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @updatePageCount="(count) => (updatedPageCount = count)"
   />
   <div
     v-else-if="organizations.data"
@@ -87,6 +89,7 @@ const breadcrumbs = computed(() => {
 // organizations data is loaded in the ViewControls component
 const organizations = ref({})
 const loadMore = ref(1)
+const updatedPageCount = ref(20)
 
 const rows = computed(() => {
   if (!organizations.value?.data?.data) return []
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 031f422a..92100068 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -12,6 +12,7 @@
   <ViewControls
     v-model="tasks"
     v-model:loadMore="loadMore"
+    v-model:updatedPageCount="updatedPageCount"
     doctype="CRM Task"
   />
   <TasksListView
@@ -24,6 +25,7 @@
       totalCount: tasks.data.total_count,
     }"
     @loadMore="() => loadMore++"
+    @updatePageCount="(count) => (updatedPageCount = count)"
     @showTask="showTask"
     @reload="() => tasks.reload()"
   />
@@ -56,6 +58,7 @@ const { getUser } = usersStore()
 // tasks data is loaded in the ViewControls component
 const tasks = ref({})
 const loadMore = ref(1)
+const updatedPageCount = ref(20)
 
 const rows = computed(() => {
   if (!tasks.value?.data?.data) return []