fix selected tab on testcasescript page

Author: bcivel

source/src/main/webapp/TestCaseScript.jsp

@@ -119,23 +119,23 @@
                                 <div class="clearfix"></div>
                             </div>
                         </div>
-                        <div x-data="{ tab: 'steps' }" class="w-full">
+                        <div x-data="testCaseScript()" x-init="init()" x-ref="tabsScriptEdit" class="w-full">
                             <!-- Tabs -->
                             <div class="w-full flex bg-slate-200 dark:bg-slate-700 p-1 rounded-lg shadow-sm mb-8 h-10">
                                 <!-- Steps -->
-                                <button @click="tab = 'steps'" id="editTabSteps"
+                                <button @click="setTab('steps')" id="editTabSteps"
                                         :class="tab === 'steps' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'"
                                         class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200">
                                     <i data-lucide="users" class="w-4 h-4"></i>Steps
                                 </button>
                                 <!-- Properties -->
-                                <button @click="tab = 'properties'" id="editTabProperties"
+                                <button @click="setTab('properties')"  id="editTabProperties"
                                         :class="tab === 'properties' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'"
                                         class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200">
                                     <i data-lucide="lock" class="w-4 h-4"></i>Properties
                                 </button>
                                 <!-- Inherited Properties -->
-                                <button @click="tab = 'inhetitedproperties'" id="editTabInheritedProperties"
+                                <button @click="setTab('inheritedproperties')" id="editTabInheritedProperties"
                                         :class="tab === 'inhetitedproperties' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'"
                                         class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200">
                                     <i data-lucide="lock" class="w-4 h-4"></i>Inherited Properties

source/src/main/webapp/js/pages/TestCaseScript.js

@@ -391,23 +391,6 @@ $.when($.getScript("js/global/global.js")
                 $("a[name='" + tabactive + "']").click();
             }
 
-            $("a[name='tabProperties']").on("shown.bs.tab", function (e) {
-                e.target; // newly activated tab
-                e.relatedTarget; // previous active tab
-                InsertURLInHistory("./TestCaseScript.jsp?" + ReplaceURLParameters("tabactive", "tabProperties"));
-
-            })
-            $("a[name='tabSteps']").on("shown.bs.tab", function (e) {
-                e.target; // newly activated tab
-                e.relatedTarget; // previous active tab
-                InsertURLInHistory("./TestCaseScript.jsp?" + ReplaceURLParameters("tabactive", "tabSteps"));
-            })
-            $("a[name='tabInheritedProperties']").on("shown.bs.tab", function (e) {
-                e.target; // newly activated tab
-                e.relatedTarget; // previous active tab
-                InsertURLInHistory("./TestCaseScript.jsp?" + ReplaceURLParameters("tabactive", "tabInheritedProperties"));
-            })
-
         }
         // close all Navbar menu
         //closeEveryNavbarMenu();
@@ -671,7 +654,7 @@ function saveScript(queueid = 0, tag = "") {
                 var stepHtml = $("#steps li.active");
                 var stepData = stepHtml.data("item");
 
-                var tabActive = $("#tabsScriptEdit li.active a").attr("name");
+                const tabActive = GetURLParameter('tabactive') || 'steps';
 
                 var parser = document.createElement('a');
                 parser.href = window.location.href;
@@ -1959,4 +1942,34 @@ function tec_keyispressed(e) {
         return false;
     }
     return true;
+}
+
+function testCaseScript() {
+    return {
+        tab: 'steps',
+
+        init() {
+            const fromURL = GetURLParameter("tabactive");
+
+            if (fromURL) {
+                this.setTab(fromURL);
+            }
+
+            this.updateHistory(this.tab);
+        },
+
+        setTab(name) {
+            this.tab = name;
+            this.updateHistory(name);
+        },
+
+        getActiveTab() {
+            return this.tab;
+        },
+
+        updateHistory(tabName) {
+            const url = "./TestCaseScript.jsp?" + ReplaceURLParameters("tabactive", tabName);
+            InsertURLInHistory(url);
+        }
+    }
 }