From 83916db267062291231fd4fbe57c5ef6c08c6b9c Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 23 Nov 2023 08:13:23 +0100
Subject: [PATCH] Added temporary tab interface components

---
 Frontend/src/components/xml/TabComponent.vue  | 31 +++++++++++
 .../components/xml/TabbedInputComponent.vue   | 52 +++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 Frontend/src/components/xml/TabComponent.vue
 create mode 100644 Frontend/src/components/xml/TabbedInputComponent.vue

diff --git a/Frontend/src/components/xml/TabComponent.vue b/Frontend/src/components/xml/TabComponent.vue
new file mode 100644
index 0000000..9a58000
--- /dev/null
+++ b/Frontend/src/components/xml/TabComponent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+
+const props = defineProps({
+    id: {
+        type: Number,
+        required: true
+    },
+    activeTabId: {
+        type: Number,
+        required: false
+    }
+})
+
+const emit = defineEmits(["activate", "remove"])
+
+function click() {
+    emit("activate", props.id);
+}
+
+function remove() {
+    emit("remove", props.id);
+}
+
+</script>
+
+<template>
+    <div :class="activeTabId == id ? '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>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/TabbedInputComponent.vue b/Frontend/src/components/xml/TabbedInputComponent.vue
new file mode 100644
index 0000000..1d7072e
--- /dev/null
+++ b/Frontend/src/components/xml/TabbedInputComponent.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import XmlInputFieldComponent from './XmlInputFieldComponent.vue';
+import TabComponent from './TabComponent.vue';
+import { ref } from 'vue'
+
+const data = ref(new Array<string>)
+
+const activeTabId = ref(0);
+
+const nextTabId = ref(2);
+
+const tabs = ref(new Array<string>);
+tabs.value.push("XML1");
+data.value.push("dupa")
+
+function changeActiveTab(newActiveTabId : number) {
+    activeTabId.value = newActiveTabId;
+}
+
+function removeTab(tabId : number) {
+    if (tabs.value.length <= 1)
+        return
+
+    tabs.value.splice(tabId, 1);
+    data.value.splice(tabId, 1);
+    if (tabId == activeTabId.value)
+        activeTabId.value = 0;
+}
+
+function addTab() {
+    tabs.value.push("XML" + (nextTabId.value++));
+    data.value.push("")
+}
+
+</script>
+
+<template>
+    <div class="flex flex-col justify-stretch items-stretch rounded-2xl mr-2">
+        <div class="flex flex-row justify-between ml-4">
+            <div class="flex flex-row h-1/12 grow-0 gap-2">
+                <TabComponent v-for="item in tabs" :id="tabs.indexOf(item)" @activate="changeActiveTab" @remove="removeTab" :active-tab-id="activeTabId">{{ item }}</TabComponent>
+            </div>
+            <div>
+                <button @click="addTab" class="tool-button">New</button>
+            </div>
+        </div>
+        
+        <div class="flex-1 h-11/12 dark:bg-gray-700 p-2 rounded-xl border border-slate-400 overflow-auto">
+            <XmlInputFieldComponent class="h-full" stylized-name="XML" :data="data[activeTabId]"></XmlInputFieldComponent>
+        </div>
+    </div>
+</template>
\ No newline at end of file