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

File selector is now cleared when needed

Browse Source
This commit is contained in:
Adam Bem
2023-11-03 08:09:18 +01:00
parent 5f24bffe37
commit 2634ef4353
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,11 @@
<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 XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
import { ref } from 'vue'; import { ref } from 'vue'
import CodeEditor from '../CodeEditorComponent.vue'; import CodeEditor from '../CodeEditorComponent.vue'
const data = ref('') const data = ref('')
const inputFile = ref()
const props = defineProps( const props = defineProps(
{ {
@@ -15,7 +16,6 @@ const props = defineProps(
const emit = defineEmits(['update']) const emit = defineEmits(['update'])
function sendValue() { function sendValue() {
console.log("input works")
emit('update', data.value) emit('update', data.value)
} }
@@ -25,27 +25,28 @@ function sendNewValue(newValue : string) {
} }
function updateData(newData: string) { function updateData(newData: string) {
data.value = newData; data.value = newData
sendValue(); inputFile.value.value = ''
sendValue()
} }
function clear() { function clear() {
updateData(''); updateData('')
} }
function canBeFormatted() { function canBeFormatted() {
return props.stylizedName.toLowerCase() == 'xml' || return props.stylizedName.toLowerCase() == 'xml' ||
props.stylizedName.toLowerCase() == 'xsd' || props.stylizedName.toLowerCase() == 'xsd' ||
props.stylizedName.toLowerCase() == 'xslt'; props.stylizedName.toLowerCase() == 'xslt'
} }
function readFile(file : any) { function readFile(file : any) {
const reader = new FileReader() const reader = new FileReader()
reader.onloadend = () => { reader.onloadend = () => {
var result = reader.result?.toString(); var result = reader.result?.toString()
if (typeof result == "string") if (typeof result == "string")
sendNewValue(result); sendNewValue(result)
} }
reader.readAsText(file.target.files[0]) reader.readAsText(file.target.files[0])
@@ -57,7 +58,7 @@ function readFile(file : any) {
<div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2"> <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2">
<div class="flex place-content-between w-full items-center"> <div class="flex place-content-between w-full items-center">
<span class="dark:text-white mr-2">{{ stylizedName }}</span> <span class="dark:text-white mr-2">{{ stylizedName }}</span>
<div class="flex space-x-2 pb-2"> <div class="flex space-x-2 pb-2 overflow-x-scroll">
<input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" /> <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent> <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> <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>