Created draft of tabbed interface

Frontend/src/components/xml/TabComponent.vue

@@ -5,9 +5,10 @@ const props = defineProps({
         type: Number,
         required: true
     },
-    activeTabId: {
-        type: Number,
-        required: false
+    isActive: {
+        type: Boolean,
+        default: false,
+        required: true
     }
 })
 
@@ -24,7 +25,7 @@ function remove() {
 </script>
 
 <template>
-    <div :class="activeTabId == id ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
+    <div :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
         <button @click="click" class="hover:brightness-110"><slot /></button>
         <button @click="remove" class="hover:brightness-110">x</button>
     </div>

Frontend/src/components/xml/XmlTabbedInputComponent.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import TabComponent from './TabComponent.vue'
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
+import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
+import { ref } from 'vue'
+import CodeEditor from '../CodeEditorComponent.vue'
+
+const data = ref('')
+const inputFile = ref()
+
+const props = defineProps(
+    {
+        stylizedName: {type: String, required: true},
+        data: {type: String},
+    }
+)
+const emit = defineEmits(['update'])
+
+function sendValue() {
+    emit('update', data.value)
+}
+
+function sendNewValue(newValue : string) {
+    data.value = newValue
+    emit('update', data.value)
+}
+
+function updateData(newData: string) {
+    data.value = newData
+    inputFile.value.value = ''
+    sendValue()
+}
+
+function clear() {
+    updateData('')
+}
+
+function canBeFormatted() {
+    return props.stylizedName.toLowerCase() == 'xml' || 
+           props.stylizedName.toLowerCase() == 'xsd' || 
+           props.stylizedName.toLowerCase() == 'xslt'
+}
+
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            sendNewValue(result)
+            
+    }
+    reader.readAsText(file.target.files[0])
+}
+
+</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>
+            <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>
+            </div>
+        </div>
+        
+        <div class="flex place-content-between w-full items-center">
+            <span class="dark:text-white mr-2">{{ stylizedName }}</span>
+            <div class="flex space-x-2 pb-2 overflow-x-auto">
+                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
+                <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
+                <button class="tool-button" @click="clear">Clear</button>
+            </div>
+        </div>
+        <CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
+    </div>
+</template>

Frontend/src/views/XSLTView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlTabbedInputComponent from '@/components/xml/XmlTabbedInputComponent.vue';
 import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
 import TooltipComponent from '@/components/xml/tooltips/TooltipComponent.vue';
 import { ref } from 'vue';
@@ -18,7 +19,7 @@ function updateVersion(newVersion: string) {
     <div id="layout" class="flex flex-row w-full h-full">
         <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-                <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+                <xmlTabbedInputComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlTabbedInputComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
             </div>
             <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>