chore: used debounce function from vueuse and useStorage instead of localStorage

This commit is contained in:
Shariq Ansari 2024-09-27 22:08:48 +05:30
parent 0b6d071fdc
commit 97af42fad1
3 changed files with 28 additions and 33 deletions

View File

@ -1,54 +1,49 @@
import { ref, watch } from 'vue'; import { ref, watch } from 'vue'
import { useDebounceFn, useStorage } from '@vueuse/core'
// Debounce function to delay updates
function debounce(fn, delay) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
export function useActiveTabManager(tabs, storageKey) { export function useActiveTabManager(tabs, storageKey) {
const activieTab = useStorage(storageKey, 'activity')
const preserveLastVisitedTab = debounce((tabName) => {
localStorage.setItem(storageKey, tabName.toLowerCase()); const preserveLastVisitedTab = useDebounceFn((tabName) => {
}, 300); activieTab.value = tabName.toLowerCase()
}, 300)
function setActiveTabInUrl(tabName) { function setActiveTabInUrl(tabName) {
window.location.hash = '#' + tabName.toLowerCase(); window.location.hash = '#' + tabName.toLowerCase()
} }
function getActiveTabFromUrl() { function getActiveTabFromUrl() {
return window.location.hash.replace('#', ''); return window.location.hash.replace('#', '')
} }
function findTabIndex(tabName){ function findTabIndex(tabName) {
return tabs.value.findIndex(tabOptions => tabOptions.name.toLowerCase() === tabName); return tabs.value.findIndex(
(tabOptions) => tabOptions.name.toLowerCase() === tabName,
)
} }
function getTabIndex(tabName) { function getTabIndex(tabName) {
let index = findTabIndex(tabName) let index = findTabIndex(tabName)
return index !== -1 ? index : 0; // Default to the first tab if not found return index !== -1 ? index : 0 // Default to the first tab if not found
} }
function getActiveTabFromLocalStorage() { function getActiveTabFromLocalStorage() {
return localStorage.getItem(storageKey); return activieTab.value
} }
function getActiveTab() { function getActiveTab() {
let activeTab = getActiveTabFromUrl(); let activeTab = getActiveTabFromUrl()
if(activeTab){ if (activeTab) {
let index = findTabIndex(activeTab) let index = findTabIndex(activeTab)
if(index !== -1){ if (index !== -1) {
preserveLastVisitedTab(activeTab) preserveLastVisitedTab(activeTab)
return index return index
} }
return 0 return 0
} }
let lastVisitedTab = getActiveTabFromLocalStorage(); let lastVisitedTab = getActiveTabFromLocalStorage()
if(lastVisitedTab){ if (lastVisitedTab) {
setActiveTabInUrl(lastVisitedTab) setActiveTabInUrl(lastVisitedTab)
return getTabIndex(lastVisitedTab) return getTabIndex(lastVisitedTab)
} }
@ -56,13 +51,13 @@ export function useActiveTabManager(tabs, storageKey) {
return 0 // Default to the first tab if nothing is found return 0 // Default to the first tab if nothing is found
} }
const tabIndex = ref(getActiveTab()); const tabIndex = ref(getActiveTab())
watch(tabIndex, (tabIndexValue) => { watch(tabIndex, (tabIndexValue) => {
let currentTab = tabs.value[tabIndexValue].name; let currentTab = tabs.value[tabIndexValue].name
setActiveTabInUrl(currentTab); setActiveTabInUrl(currentTab)
preserveLastVisitedTab(currentTab); preserveLastVisitedTab(currentTab)
}); })
return { tabIndex }; return { tabIndex }
} }

View File

@ -354,7 +354,7 @@ import {
} from 'frappe-ui' } from 'frappe-ui'
import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue' import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import {useActiveTabManager} from '@/composables/useActiveTabManager' import { useActiveTabManager } from '@/composables/useActiveTabManager'
const { $dialog, $socket, makeCall } = globalStore() const { $dialog, $socket, makeCall } = globalStore()

View File

@ -330,7 +330,7 @@ import {
} from 'frappe-ui' } from 'frappe-ui'
import { ref, computed, onMounted, watch } from 'vue' import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import {useActiveTabManager} from '@/composables/useActiveTabManager' import { useActiveTabManager } from '@/composables/useActiveTabManager'
const { $dialog, $socket, makeCall } = globalStore() const { $dialog, $socket, makeCall } = globalStore()
const { getContactByName, contacts } = contactsStore() const { getContactByName, contacts } = contactsStore()