From 1d4040a7742beff6510f5a0024d1514a29f5fd3c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 5 Feb 2024 13:27:19 +0530
Subject: [PATCH] fix: make caching of filter & sort by better

---
 frontend/src/components/Filter.vue | 8 ++++++--
 frontend/src/components/SortBy.vue | 9 +++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Filter.vue b/frontend/src/components/Filter.vue
index ddb6e363..c68118d9 100644
--- a/frontend/src/components/Filter.vue
+++ b/frontend/src/components/Filter.vue
@@ -101,7 +101,7 @@ import FilterIcon from '@/components/Icons/FilterIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import { FormControl, createResource } from 'frappe-ui'
-import { h, defineModel, computed } from 'vue'
+import { h, defineModel, computed, onMounted } from 'vue'
 
 const typeCheck = ['Check']
 const typeLink = ['Link', 'Dynamic Link']
@@ -127,7 +127,6 @@ const list = defineModel()
 
 const filterableFields = createResource({
   url: 'crm.api.doc.get_filterable_fields',
-  auto: true,
   cache: ['filterableFields', props.doctype],
   params: {
     doctype: props.doctype,
@@ -144,6 +143,11 @@ const filterableFields = createResource({
   },
 })
 
+onMounted(() => {
+  if (filterableFields.data?.length) return
+  filterableFields.fetch()
+})
+
 const filters = computed(() => {
   if (!list.value?.data) return new Set()
   let allFilters = list.value?.params?.filters
diff --git a/frontend/src/components/SortBy.vue b/frontend/src/components/SortBy.vue
index 0861f1c3..533f9b36 100644
--- a/frontend/src/components/SortBy.vue
+++ b/frontend/src/components/SortBy.vue
@@ -101,7 +101,7 @@ import DragIcon from '@/components/Icons/DragIcon.vue'
 import { useSortable } from '@vueuse/integrations/useSortable'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import { createResource } from 'frappe-ui'
-import { computed, ref, nextTick } from 'vue'
+import { computed, ref, nextTick, onMounted } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -117,12 +117,17 @@ const sortButtonRef = ref(null)
 
 const sortOptions = createResource({
   url: 'crm.api.doc.sort_options',
-  auto: true,
+  cache: ['sortOptions', props.doctype],
   params: {
     doctype: props.doctype,
   },
 })
 
+onMounted(() => {
+  if (sortOptions.data?.length) return
+  sortOptions.fetch()
+})
+
 const sortValues = computed({
   get: () => {
     if (!list.value?.data) return new Set()