chore: used debounce function from vueuse and useStorage instead of localStorage
This commit is contained in:
parent
0b6d071fdc
commit
97af42fad1
@ -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 }
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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()
|
||||||
|
|||||||
@ -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()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user