fix: make caching of list view data better

This commit is contained in:
Shariq Ansari 2024-02-05 13:14:21 +05:30
parent 24f2ca4683
commit 7212421bd5
16 changed files with 78 additions and 21 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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) {

View File

@ -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>

View File

@ -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>

View File

@ -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) {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 = {

View File

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

View File

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