R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

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

Browse Source 
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #229
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
This commit is contained in:
Adam Bem
2023-06-21 14:32:00 +02:00
parent 3c79bddde3
commit f16639b45e
28 changed files with 573 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
Frontend/src/views/JsonFormatterView.vue Normal file
View File

@@ -0,0 +1,36 @@
<script setup lang="ts">
import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonFormatterComponent.vue';
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import { ref } from 'vue';
const json = ref('');
function setTextFieldValue(data: string) {
json.value = data
}
function format(formattedXml: any) {
json.value = formattedXml.data;
}
function clear() {
json.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">JSON Formatter</span>
<div class="flex flex-wrap gap-2 justify-center">
<InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
<button class="tool-button" @click="clear()">Clear</button>
<JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
<JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
</div>
</div>
<textarea name="data" id="data" :value="json" class="text-field"></textarea>
</div>
</template>

6
Frontend/src/views/XPathView.vue
View File

@@ -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 stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
</div>
</template>

6
Frontend/src/views/XQueryView.vue
View File

@@ -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 stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
</div>
</template>

6
Frontend/src/views/XSDView.vue
View File

@@ -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 stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
</div>
</template>

6
Frontend/src/views/XSLTView.vue
View File

@@ -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 stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent stylized-name="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div>
<xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
</div>
</template>

36
Frontend/src/views/XmlFormatterView.vue Normal file
View File

@@ -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>