From b7386450aee7d81745d9e737a4d46b7ecc4281b7 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Mon, 19 Jun 2023 07:18:33 +0200
Subject: [PATCH] Added placholder view for XML formatter

---
 .../components/formatter/FormatterComponent.vue  | 10 ----------
 .../formatter/InputFormatterComponent.vue        | 12 ++++++++++++
 Frontend/src/router/index.ts                     |  7 +++++++
 Frontend/src/views/XmlFormatterView.vue          | 16 ++++++++++++++++
 4 files changed, 35 insertions(+), 10 deletions(-)
 delete mode 100644 Frontend/src/components/formatter/FormatterComponent.vue
 create mode 100644 Frontend/src/components/formatter/InputFormatterComponent.vue
 create mode 100644 Frontend/src/views/XmlFormatterView.vue

diff --git a/Frontend/src/components/formatter/FormatterComponent.vue b/Frontend/src/components/formatter/FormatterComponent.vue
deleted file mode 100644
index f5ef774..0000000
--- a/Frontend/src/components/formatter/FormatterComponent.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-
-
-</script>
-
-<template>
-  <h1>Formatter</h1>
-</template>
-
-<style scoped></style>
diff --git a/Frontend/src/components/formatter/InputFormatterComponent.vue b/Frontend/src/components/formatter/InputFormatterComponent.vue
new file mode 100644
index 0000000..6c87c12
--- /dev/null
+++ b/Frontend/src/components/formatter/InputFormatterComponent.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+  <div class="flex h-full"></div>
+
+    <textarea name="data" id="data" class="text-field"></textarea>
+</template>
+
+<style scoped></style>
diff --git a/Frontend/src/router/index.ts b/Frontend/src/router/index.ts
index b935285..f5cc531 100644
--- a/Frontend/src/router/index.ts
+++ b/Frontend/src/router/index.ts
@@ -3,6 +3,8 @@ import { createRouter, createWebHistory } from 'vue-router'
 const landingPage = import("@views/LandingView.vue")
 const restMock = import("@views/RestMockView.vue")
 
+const xmlFormatter = import("@views/XmlFormatterView.vue")
+
 const xsltTool = import("@views/XSLTView.vue")
 const xsdTool = import("@views/XSDView.vue")
 const xpathTool = import("@views/XPathView.vue")
@@ -14,6 +16,11 @@ const routes = [
     name: 'landing',
     component: () => landingPage
   },
+  {
+    path: '/format/xml',
+    name: 'xmlFormatter',
+    component: () => xmlFormatter
+  },
   {
     path: '/xml/xpath',
     name: 'xpath',
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
new file mode 100644
index 0000000..fd62eb8
--- /dev/null
+++ b/Frontend/src/views/XmlFormatterView.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import InputFormatterComponent from '@/components/formatter/InputFormatterComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <InputFormatterComponent></InputFormatterComponent>
+    </div>
+</template>
\ No newline at end of file