Changed value is sent to backend

Frontend/src/components/xml/TabComponent.vue

@@ -25,8 +25,8 @@ function remove() {
 </script>
 
 <template>
-    <div :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
-        <button @click="activate" class="hover:brightness-110"><slot /></button>
+    <div @click="activate" :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3 cursor-pointer">
+        <button class="hover:brightness-110"><slot /></button>
         <button @click="remove" class="hover:brightness-110 hover:dark:bg-slate-400 hover:dark:text-black px-2 rounded-full">x</button>
     </div>
 </template>

Frontend/src/components/xml/XmlTabbedInputComponent.vue

@@ -6,7 +6,9 @@ import { ref } from 'vue'
 import CodeEditor from '../CodeEditorComponent.vue'
 
 const newTabId = ref(0);
-const activeTabId = ref(0)
+const activeTabId = ref(0);
+const prevActiveTabId = ref(-1);
+
 const tabs = ref(new Array<TabData>);
 tabs.value.push({
     id: newTabId.value++,
@@ -60,12 +62,18 @@ function readFile(file : any) {
     
     const reader = new FileReader()
     reader.onloadend = () => {
-        var result = reader.result?.toString()
-        if (typeof result == "string")
-            sendNewValue(result)
+        var result = reader.result!.toString();
+        console.log(result);
+        sendNewValue(result);
             
     }
-    reader.readAsText(file.target.files[0])
+    reader.readAsText(file.target.files[0]);
+    let activeIndex = findIndexWithID(activeTabId.value);
+    
+    let filePath = inputFile.value.value.split("\\");
+    let fileName = filePath.at(filePath.length - 1);
+    
+    tabs.value.at(activeIndex)!.name = fileName;
 }
 
 function changeActiveTab(id : number) {
@@ -73,8 +81,11 @@ function changeActiveTab(id : number) {
     let newIndex = findIndexWithID(id);
     
     tabs.value.at(index)!.data = data.value;
+    prevActiveTabId.value = activeTabId.value;
     activeTabId.value = id;
     data.value = tabs.value.at(newIndex)!.data;
+
+    sendValue();
 }
 
 function addTab() {
@@ -83,18 +94,24 @@ function addTab() {
         name: "XML" + newTabId.value,
         data: ""
     })
+
+    console.log(tabs.value);
 }
 
 function removeTab(id : number) {
     if (tabs.value.length == 1)
         return
 
-    let index = findIndexWithID(activeTabId.value);
-    tabs.value.splice(index, 1);
-    if (activeTabId.value == id) {
-        activeTabId.value = tabs.value.at(0)!.id;
-        data.value = tabs.value.at(0)!.data;
-    }
+    let indexToRemove = findIndexWithID(id);
+    let activeIndex = findIndexWithID(activeTabId.value);
+
+    if (indexToRemove == activeIndex && activeIndex == 0)
+        changeActiveTab(tabs.value.at(1)!.id)
+    else if (indexToRemove == activeIndex)
+        changeActiveTab(tabs.value.at(0)!.id)
+        
+    
+    tabs.value.splice(indexToRemove, 1);
     
 }