Implemented XML Formatter and simplified structure of XML tools (#229)

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

Frontend/src/views/XmlFormatterView.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+
+function setTextFieldValue(data: string) {
+    xml.value = data
+}
+
+function format(formattedXml: any) {
+    xml.value = formattedXml.result;
+}
+
+function clear() {
+    xml.value = '';
+}
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col w-full h-full gap-4">
+        <div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
+            <span class="dark:text-slate-100">XML Formatter</span>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
+                <button class="tool-button" @click="clear()">Clear</button>
+                <XMLButtonFormatterComponent is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
+                <XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
+            </div>
+        </div>
+        <textarea name="data" id="data" :value="xml" class="text-field"></textarea>
+    </div>
+</template>