From 0b6d071fdc2e47e8a6e85d93f44805f5dcd86207 Mon Sep 17 00:00:00 2001
From: gopikrishnan13 <gopikrishnan8015@gmail.com>
Date: Wed, 25 Sep 2024 17:42:51 +0530
Subject: [PATCH] feat: Rework preserve last visited tab

---
 .../src/composables/useActiveTabManager.js    | 68 +++++++++++++++++++
 frontend/src/pages/Deal.vue                   |  4 +-
 frontend/src/pages/Lead.vue                   |  5 +-
 3 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/composables/useActiveTabManager.js

diff --git a/frontend/src/composables/useActiveTabManager.js b/frontend/src/composables/useActiveTabManager.js
new file mode 100644
index 000000000..9f99306bd
--- /dev/null
+++ b/frontend/src/composables/useActiveTabManager.js
@@ -0,0 +1,68 @@
+import { ref, watch } from 'vue';
+
+// 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) {
+    
+  const preserveLastVisitedTab = debounce((tabName) => {
+    localStorage.setItem(storageKey, tabName.toLowerCase());
+  }, 300);
+
+  function setActiveTabInUrl(tabName) {
+    window.location.hash = '#' + tabName.toLowerCase();
+  }
+
+  function getActiveTabFromUrl() {
+    return window.location.hash.replace('#', '');
+  }
+
+  function findTabIndex(tabName){
+    return tabs.value.findIndex(tabOptions => tabOptions.name.toLowerCase() === tabName);
+  }
+
+  function getTabIndex(tabName) {
+    let index = findTabIndex(tabName)
+    return index !== -1 ? index : 0; // Default to the first tab if not found
+  }
+
+  function getActiveTabFromLocalStorage() {
+    return localStorage.getItem(storageKey);
+  }
+
+  function getActiveTab() {
+    let activeTab = getActiveTabFromUrl();
+    if(activeTab){
+      let index = findTabIndex(activeTab)
+      if(index !== -1){
+        preserveLastVisitedTab(activeTab)
+        return index
+      }
+      return 0
+    }
+
+    let lastVisitedTab = getActiveTabFromLocalStorage();
+    if(lastVisitedTab){
+      setActiveTabInUrl(lastVisitedTab)
+      return getTabIndex(lastVisitedTab)
+    }
+
+    return 0 // Default to the first tab if nothing is found
+  }
+
+  const tabIndex = ref(getActiveTab());
+
+  watch(tabIndex, (tabIndexValue) => {
+    let currentTab = tabs.value[tabIndexValue].name;
+    setActiveTabInUrl(currentTab);
+    preserveLastVisitedTab(currentTab);
+  });
+
+  return { tabIndex };
+}
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index c9ef4fbb5..363cc179f 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -354,6 +354,8 @@ import {
 } from 'frappe-ui'
 import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import {useActiveTabManager} from '@/composables/useActiveTabManager'
+
 
 const { $dialog, $socket, makeCall } = globalStore()
 const { statusOptions, getDealStatus } = statusesStore()
@@ -513,7 +515,6 @@ usePageMeta(() => {
   }
 })
 
-const tabIndex = ref(0)
 const tabs = computed(() => {
   let tabOptions = [
     {
@@ -556,6 +557,7 @@ const tabs = computed(() => {
   ]
   return tabOptions.filter((tab) => (tab.condition ? tab.condition() : true))
 })
+const { tabIndex } = useActiveTabManager(tabs, 'lastDealTab')
 
 const fieldsLayout = createResource({
   url: 'crm.api.doc.get_sidebar_fields',
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 25fedfd5c..43c50441a 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -330,6 +330,7 @@ import {
 } from 'frappe-ui'
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import {useActiveTabManager} from '@/composables/useActiveTabManager'
 
 const { $dialog, $socket, makeCall } = globalStore()
 const { getContactByName, contacts } = contactsStore()
@@ -463,8 +464,6 @@ usePageMeta(() => {
   }
 })
 
-const tabIndex = ref(0)
-
 const tabs = computed(() => {
   let tabOptions = [
     {
@@ -508,6 +507,8 @@ const tabs = computed(() => {
   return tabOptions.filter((tab) => (tab.condition ? tab.condition() : true))
 })
 
+const { tabIndex } = useActiveTabManager(tabs, 'lastLeadTab')
+
 watch(tabs, (value) => {
   if (value && route.params.tabName) {
     let index = value.findIndex(