Adam Bem
ea83e95a00
Reviewed-on: #277 Reviewed-by: Mikolaj Widla <widlam@noreply.example.com> Co-authored-by: Adam Bem <adam.bem@zoho.eu> Co-committed-by: Adam Bem <adam.bem@zoho.eu>
70 lines
2.4 KiB
Vue
70 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
|
|
import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
|
|
import CodeEditor from '@/components/common/CodeEditorComponent.vue'
|
|
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps(
|
|
{
|
|
stylizedName: {type: String, required: true},
|
|
data: {type: String},
|
|
}
|
|
)
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const data = ref('')
|
|
const inputFile = ref()
|
|
|
|
function sendValue() {
|
|
emit('update:modelValue', data.value)
|
|
}
|
|
|
|
function updateData(newData: string, clearFileSelector: boolean = true) {
|
|
data.value = newData
|
|
if (clearFileSelector)
|
|
inputFile.value.value = '';
|
|
sendValue()
|
|
}
|
|
|
|
function clear() {
|
|
updateData('')
|
|
}
|
|
|
|
function canBeFormatted() {
|
|
return props.stylizedName.toLowerCase() == 'xml' ||
|
|
props.stylizedName.toLowerCase() == 'xsd' ||
|
|
props.stylizedName.toLowerCase() == 'xslt'
|
|
}
|
|
|
|
function readFile(file : any) {
|
|
|
|
const reader = new FileReader()
|
|
reader.onloadend = () => {
|
|
let result = reader.result?.toString()
|
|
if (typeof result == "string")
|
|
updateData(result, false);
|
|
|
|
}
|
|
reader.readAsText(file.target.files[0])
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
|
|
<div class="flex place-content-between w-full items-center">
|
|
<span class="dark:text-white mr-2">{{ stylizedName }}</span>
|
|
<div class="flex space-x-2 pb-2 overflow-x-auto">
|
|
<div class="flex items-stretch w-64">
|
|
<input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
|
|
</div>
|
|
|
|
<InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></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>
|
|
<CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
|
|
</div>
|
|
</template> |