From 372c16e37bd36fdac8a7c180fdacc4a948a09a86 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Mon, 19 Jun 2023 10:05:07 +0200
Subject: [PATCH] Reorganized components by purpose

---
 .../components/xml/XmlInputFieldComponent.vue | 41 +++++++------------
 .../xml/XmlInputFieldToolbarComponent.vue     |  8 +---
 Frontend/src/views/XPathView.vue              |  6 ++-
 Frontend/src/views/XQueryView.vue             |  6 ++-
 Frontend/src/views/XSDView.vue                |  6 ++-
 Frontend/src/views/XSLTView.vue               |  6 ++-
 6 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 706e1ea..f2d3fdc 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
 import { ref } from 'vue';
 
-const xml = ref('')
-const query = ref('')
+const value = ref('')
 
 const props = defineProps(
     {
@@ -11,37 +10,27 @@ const props = defineProps(
         xmlData: {type: String},
     }
 )
-const emit = defineEmits(['update:xml', 'update:transform'])
+const emit = defineEmits(['update'])
 
-function sendXml() {
-    emit('update:xml', xml.value)
+function sendValue() {
+    emit('update', value.value)
 }
 
-function sendTransform() {
-    emit('update:transform', query.value)
-}
-
-function setToDefaultXML(data: string) {
-    xml.value = data;
-    sendXml();
-}
-
-function setToDefaultQuery(data: string) {
-    query.value = data;
-    sendTransform();
+function setToDefaultValue(data: string) {
+    value.value = data;
+    sendValue();
 }
 
 </script>
 
 <template>
-    <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="text-field"></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="text-field"></textarea>
+    <div class="flex flex-col w-full h-1/2">
+        <div class="flex place-content-between w-full pr-2 items-center m-2">
+            <span class="dark:text-white">{{ prettyName }}</span>
+            <div class="flex space-x-2">
+                <InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => setToDefaultValue(data)"></InsertTemplateComponent>
+            </div>
         </div>
+        <textarea id="xmlField" v-model="value" @input="sendValue()" class="text-field"></textarea>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
index de2788d..f0722ea 100644
--- a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -18,11 +18,5 @@ function setDefault(data: string) {
 </script>
 
 <template>
-    <div class="flex place-content-between w-full pr-2 items-center m-2">
-        <span class="dark:text-white">{{ prettyName }}</span>
-        <div class="flex space-x-2">
-            <InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => setDefault(data)"></InsertTemplateComponent>
-        </div>
-        
-    </div>
+    
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index 20acd1f..7bc9ad7 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -11,8 +11,10 @@ const query = ref('');
 
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <xmlInputFieldComponent prettyName="XPath" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
-
+        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+            <xmlInputFieldComponent prettyName="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent prettyName="XPath" @update="(data) => {query = data}"></xmlInputFieldComponent>
+        </div>
         <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/XQueryView.vue b/Frontend/src/views/XQueryView.vue
index fe23239..81af519 100644
--- a/Frontend/src/views/XQueryView.vue
+++ b/Frontend/src/views/XQueryView.vue
@@ -11,8 +11,10 @@ const query = ref('');
 
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <xmlInputFieldComponent prettyName="XQuery" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
-
+        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+            <xmlInputFieldComponent prettyName="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent prettyName="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
+        </div>
         <xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/XSDView.vue b/Frontend/src/views/XSDView.vue
index 94ba20d..60582ee 100644
--- a/Frontend/src/views/XSDView.vue
+++ b/Frontend/src/views/XSDView.vue
@@ -11,8 +11,10 @@ const query = ref('');
 
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <xmlInputFieldComponent prettyName="XSD" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
-
+        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+            <xmlInputFieldComponent prettyName="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent prettyName="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
+        </div>
         <xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index 8c04245..b97c2a8 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -11,8 +11,10 @@ const query = ref('');
 
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <xmlInputFieldComponent prettyName="XSLT" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
-
+        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+            <xmlInputFieldComponent prettyName="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent prettyName="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
+        </div>
         <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>
\ No newline at end of file