test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/composables/useActiveTabManager.js
View File

@ -1,43 +1,38 @@
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) => { const preserveLastVisitedTab = useDebounceFn((tabName) => {
localStorage.setItem(storageKey, tabName.toLowerCase()); activieTab.value = tabName.toLowerCase()
}, 300); }, 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) {
@ -47,7 +42,7 @@ export function useActiveTabManager(tabs, storageKey) {
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 }
} }