From a17879f9a7202a7fbd3965e1b26e275f8ea6f030 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Mon, 19 Jun 2023 10:35:41 +0200
Subject: [PATCH] Implemented clear funcionality

---
 .../components/xml/XmlInputFieldComponent.vue | 21 ++++++++++++-------
 .../xml/XmlOutputFieldComponent.vue           |  6 +++++-
 Frontend/src/views/XPathView.vue              |  4 ++--
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index f2d3fdc..11325ab 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -1,26 +1,31 @@
 <script setup lang="ts">
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import { ref } from 'vue';
 
-const value = ref('')
+const data = ref('')
 
 const props = defineProps(
     {
         prettyName: {type: String, required: true},
-        xmlData: {type: String},
+        data: {type: String},
     }
 )
 const emit = defineEmits(['update'])
 
 function sendValue() {
-    emit('update', value.value)
+    emit('update', data.value)
 }
 
-function setToDefaultValue(data: string) {
-    value.value = data;
+function updateData(newData: string) {
+    data.value = newData;
     sendValue();
 }
 
+function clear() {
+    updateData('');
+}
+
 </script>
 
 <template>
@@ -28,9 +33,11 @@ function setToDefaultValue(data: string) {
         <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>
+                <InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
+                <XMLButtonFormatterComponent v-if="props.prettyName == 'XML'" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
+                <button class="tool-button" @click="clear">Clear</button>
             </div>
         </div>
-        <textarea id="xmlField" v-model="value" @input="sendValue()" class="text-field"></textarea>
+        <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field"></textarea>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index ab28691..c5a0780 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -107,6 +107,10 @@ function updateOutputField(data: any) {
     result.value = data.result;
 }
 
+function clear() {
+    result.value = "";
+}
+
 </script>
 
 <template>
@@ -120,7 +124,7 @@ function updateOutputField(data: any) {
                 <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                     <option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option>
                 </select>
-                <button class="tool-button">Clear</button>    
+                <button class="tool-button" @click="clear">Clear</button>    
                 <button class="tool-button" @click="process">Process</button>
             </div>
         </div>
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index 7bc9ad7..69eeed9 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -12,8 +12,8 @@ const query = ref('');
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
         <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>
+            <xmlInputFieldComponent prettyName="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent prettyName="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
         </div>
         <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>