Added basic functionality

Frontend/src/components/xml/XmlTabbedInputComponent.vue

@@ -5,6 +5,15 @@ import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatte
 import { ref } from 'vue'
 import CodeEditor from '../CodeEditorComponent.vue'
 
+const newTabId = ref(0);
+const activeTabId = ref(0)
+const tabs = ref(new Array<TabData>);
+tabs.value.push({
+    id: newTabId.value++,
+    name: "XML1",
+    data: "",
+})
+
 const data = ref('')
 const inputFile = ref()
 
@@ -16,6 +25,12 @@ const props = defineProps(
 )
 const emit = defineEmits(['update'])
 
+interface TabData {
+    id: number;
+    name: string;
+    data: string;
+}
+
 function sendValue() {
     emit('update', data.value)
 }
@@ -53,21 +68,57 @@ function readFile(file : any) {
     reader.readAsText(file.target.files[0])
 }
 
+function changeActiveTab(id : number) {
+    let index = findIndexWithID(activeTabId.value);
+    let newIndex = findIndexWithID(id);
+    
+    tabs.value.at(index)!.data = data.value;
+    activeTabId.value = id;
+    data.value = tabs.value.at(newIndex)!.data;
+}
+
+function addTab() {
+    tabs.value.push({
+        id: newTabId.value++,
+        name: "XML" + newTabId.value,
+        data: ""
+    })
+}
+
+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;
+    }
+    
+}
+
+function findIndexWithID(id : number) : number {
+    for (let i = 0; tabs.value.length; i++) 
+        if (tabs.value.at(i)!.id == id)
+            return i;
+    
+    return -1;
+}
+
 </script>
 
 <template>
     <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
         <div class="flex justify-between mb-2">
-            <div class="flex gap-2">
-                <TabComponent id="1" isActive>Karta 1</TabComponent>
-                <TabComponent id="2">Karta 2</TabComponent>
-                <TabComponent id="3">Karta 3</TabComponent>
+            <div class="flex gap-2 overflow-x-auto">
+                <TabComponent @click:activate="changeActiveTab" @click:remove="removeTab" v-for="tab in tabs" :id="tab.id" :isActive="tab.id == activeTabId">{{ tab.name }}</TabComponent>
             </div>
             <div class="flex gap-2">
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 </div>
-                <button class="tool-button">New</button>
+                <button class="tool-button" @click="addTab">New</button>
             </div>
         </div>