From f9a4cd52e48f47edbe100fccf77a2f106a288a85 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 15 Jun 2023 16:37:26 +0200
Subject: [PATCH] Added components for XSLT

---
 .../components/xml/XmlInputFieldComponent.vue | 20 +++++++++---------
 .../xml/XmlInputFieldToolbarComponent.vue     | 21 +++++++++++++++++++
 .../xml/XmlOutputFieldComponent.vue           | 21 +++++++++++++++++++
 .../xml/XmlOutputFieldToolbarComponent.vue    | 21 +++++++++++++++++++
 4 files changed, 73 insertions(+), 10 deletions(-)
 create mode 100644 Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
 create mode 100644 Frontend/src/components/xml/XmlOutputFieldComponent.vue
 create mode 100644 Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue

diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 80704f0..33a83e9 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
 
 const props = defineProps(
     {
@@ -9,15 +10,14 @@ const props = defineProps(
 </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 h-full items-center gap-4">
+        <div class="w-full">
+            <xmlInputFieldToolbarComponent prettyName="XML" fieldName="xml"></xmlInputFieldToolbarComponent>
+            <textarea id="xmlfield" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
+        </div>
+        <div class="w-full">
+            <xmlInputFieldToolbarComponent prettyName="XSLT" fieldName="xslt"></xmlInputFieldToolbarComponent>
+        <textarea id="transformField" class="w-full dark:bg-gray-600 border border-slate-400 rounded-md"></textarea>
+        </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
new file mode 100644
index 0000000..7a3cb1a
--- /dev/null
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+const props = defineProps(
+    {
+        prettyName: {type: String, required: true},
+        fieldName: {type: String, required: true},
+    }
+)
+
+</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">
+            <button class="tool-button">Insert default {{ prettyName }}</button>
+            <button class="tool-button">Clear</button>    
+        </div>
+        
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
new file mode 100644
index 0000000..bf61cb8
--- /dev/null
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
+
+
+const props = defineProps(
+    {
+        transformationName: {type: String},
+    }
+)
+
+</script>
+
+<template>
+    <div class="flex flex-col w-full h-full items-center">
+        <xmlOutputFieldToolbarComponent field-name="result"></xmlOutputFieldToolbarComponent>
+        <div class="w-full h-max p-2 border border-slate-400 rounded-md text-left">
+            <pre ><code>&lt;test&gt;fsdafdsa&lt;/test&gt;</code></pre>
+        </div>
+        
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
new file mode 100644
index 0000000..4853a13
--- /dev/null
+++ b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+const props = defineProps(
+    {
+
+        fieldName: {type: String, required: true},
+    }
+)
+
+</script>
+
+<template>
+    <div class="flex place-content-between w-full h-full items-center m-2">
+        <span class="dark:text-white">Result:</span>
+        <div class="flex space-x-2">
+            <button class="tool-button">Process</button>
+            <button class="tool-button">Clear</button>    
+        </div>
+        
+    </div>
+</template>
\ No newline at end of file