Reimplemented XML Tools and added styling (#227)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #227
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -1,23 +1,47 @@
 <script setup lang="ts">
+import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
+import { ref } from 'vue';
+
+const xml = ref('')
+const query = ref('')
 
 const props = defineProps(
     {
-        transformationName: {type: String},
+        prettyName: {type: String, required: true},
+        xmlData: {type: String},
     }
 )
+const emit = defineEmits(['update:xml', 'update:transform'])
+
+function sendXml() {
+    emit('update:xml', xml.value)
+}
+
+function sendTransform() {
+    emit('update:transform', query.value)
+}
+
+function setToDefaultXML(data: string) {
+    xml.value = data;
+    sendXml();
+}
+
+function setToDefaultQuery(data: string) {
+    query.value = data;
+    sendTransform();
+}
 
 </script>
 
 <template>
-    <div class="flex flex-col gap-6 w-full h-full items-center">
-        <label for="xmlfield" class="dark:text-white">XML</label>
-        <textarea id="xmlfield" class="w-1/2 h-36 bg-gray-500">
-
-
-        </textarea>
-        <label for="transformField" class="dark:text-white">{{ props.transformationName }}</label>
-        <textarea id="transformField" class="w-1/2 h-36 bg-gray-500">
-
-        </textarea>
+    <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+        <div class="flex flex-col w-full h-1/2">
+            <xmlInputFieldToolbarComponent prettyName="XML" @update:defaultData="(data) => setToDefaultXML(data)"></xmlInputFieldToolbarComponent>
+            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+        </div>
+        <div class="flex flex-col w-full h-1/2">
+            <xmlInputFieldToolbarComponent :prettyName="$props.prettyName" @update:defaultData="(data) => setToDefaultQuery(data)"></xmlInputFieldToolbarComponent>
+            <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+        </div>
     </div>
 </template>