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

Implemented clear funcionality

Browse Source
This commit is contained in:
Adam Bem
2023-06-19 10:35:41 +02:00
parent 372c16e37b
commit a17879f9a7
3 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,26 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'; import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
import { ref } from 'vue'; import { ref } from 'vue';
const value = ref('') const data = ref('')
const props = defineProps( const props = defineProps(
{ {
prettyName: {type: String, required: true}, prettyName: {type: String, required: true},
xmlData: {type: String}, data: {type: String},
} }
) )
const emit = defineEmits(['update']) const emit = defineEmits(['update'])
function sendValue() { function sendValue() {
emit('update', value.value) emit('update', data.value)
} }
function setToDefaultValue(data: string) { function updateData(newData: string) {
value.value = data; data.value = newData;
sendValue(); sendValue();
} }
function clear() {
updateData('');
}
</script> </script>
<template> <template>
@@ -28,9 +33,11 @@ function setToDefaultValue(data: string) {
<div class="flex place-content-between w-full pr-2 items-center m-2"> <div class="flex place-content-between w-full pr-2 items-center m-2">
<span class="dark:text-white">{{ prettyName }}</span> <span class="dark:text-white">{{ prettyName }}</span>
<div class="flex space-x-2"> <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>
</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> </div>
</template> </template>

6
Frontend/src/components/xml/XmlOutputFieldComponent.vue
View File

@@ -107,6 +107,10 @@ function updateOutputField(data: any) {
result.value = data.result; result.value = data.result;
} }
function clear() {
result.value = "";
}
</script> </script>
<template> <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"> <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> <option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option>
</select> </select>
<button class="tool-button">Clear</button> <button class="tool-button" @click="clear">Clear</button>
<button class="tool-button" @click="process">Process</button> <button class="tool-button" @click="process">Process</button>
</div> </div>
</div> </div>

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

@@ -12,8 +12,8 @@ const query = ref('');
<template> <template>
<div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4"> <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"> <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="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
<xmlInputFieldComponent prettyName="XPath" @update="(data) => {query = data}"></xmlInputFieldComponent> <xmlInputFieldComponent prettyName="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
</div> </div>
<xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent> <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
</div> </div>