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

50
Frontend/src/components/xml/XmlInputFieldComponent.vue
View File

@@ -1,47 +1,49 @@
<script setup lang="ts">
import xmlInputFieldToolbarComponent from '@/components/xml/XmlInputFieldToolbarComponent.vue';
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
import { ref } from 'vue';
const xml = ref('')
const query = ref('')
const data = ref('')
const props = defineProps(
{
prettyName: {type: String, required: true},
xmlData: {type: String},
stylizedName: {type: String, required: true},
data: {type: String},
}
)
const emit = defineEmits(['update:xml', 'update:transform'])
const emit = defineEmits(['update'])
function sendXml() {
emit('update:xml', xml.value)
function sendValue() {
emit('update', data.value)
}
function sendTransform() {
emit('update:transform', query.value)
function updateData(newData: string) {
data.value = newData;
sendValue();
}
function setToDefaultXML(data: string) {
xml.value = data;
sendXml();
function clear() {
updateData('');
}
function setToDefaultQuery(data: string) {
query.value = data;
sendTransform();
function canBeFormatted() {
return props.stylizedName.toLowerCase() == 'xml' ||
props.stylizedName.toLowerCase() == 'xsd' ||
props.stylizedName.toLowerCase() == 'xslt';
}
</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="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></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="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></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">{{ stylizedName }}</span>
<div class="flex space-x-2">
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
<XMLButtonFormatterComponent v-if="canBeFormatted()" :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="data" @input="sendValue()" class="text-field"></textarea>
</div>
</template>