File uploading and fixes (#261)

Reviewed-on: #261
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>

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -1,10 +1,11 @@
 <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 CodeEditor from '../CodeEditorComponent.vue';
+import { ref } from 'vue'
+import CodeEditor from '../CodeEditorComponent.vue'
 
 const data = ref('')
+const inputFile = ref()
 
 const props = defineProps(
     {
@@ -15,7 +16,6 @@ const props = defineProps(
 const emit = defineEmits(['update'])
 
 function sendValue() {
-    console.log("input works")
     emit('update', data.value)
 }
 
@@ -25,18 +25,31 @@ function sendNewValue(newValue : string) {
 }
 
 function updateData(newData: string) {
-    data.value = newData;
-    sendValue();
+    data.value = newData
+    inputFile.value.value = ''
+    sendValue()
 }
 
 function clear() {
-    updateData('');
+    updateData('')
 }
 
 function canBeFormatted() {
     return props.stylizedName.toLowerCase() == 'xml' || 
            props.stylizedName.toLowerCase() == 'xsd' || 
-           props.stylizedName.toLowerCase() == 'xslt';
+           props.stylizedName.toLowerCase() == 'xslt'
+}
+
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            sendNewValue(result)
+            
+    }
+    reader.readAsText(file.target.files[0])
 }
 
 </script>
@@ -44,8 +57,12 @@ function canBeFormatted() {
 <template>
     <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">
-            <span class="dark:text-white">{{ stylizedName }}</span>
-            <div class="flex space-x-2 pb-2">
+            <span class="dark:text-white mr-2">{{ stylizedName }}</span>
+            <div class="flex space-x-2 pb-2 overflow-x-scroll">
+                <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="(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>

Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-
-import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
-
-const props = defineProps(
-    {
-        prettyName: {type: String, required: true}
-    }
-)
-
-const emit = defineEmits(['update:defaultData'])
-
-function setDefault(data: string) {
-    const emitName = "update:defaultData";
-    emit(emitName, data)
-}
-
-</script>
-
-<template>
-    
-</template>

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -47,6 +47,7 @@ function changeAvailableVersions() {
         changeAvailableVersionsOfXSLT();
     else if (props.tool == "xsd")
         versionsForCurrentEngine.value = ["N/A"];
+
     else if (props.tool == "xpath")
         changeAvailableVersionsOfXPath();
 
@@ -72,7 +73,7 @@ function selectDefaultEngine() {
 }
 
 function selectDefaultVersion() {
-    const lastVersion = versionsForCurrentEngine.value.length - 1
+    const lastVersion = versionsForCurrentEngine.value.length - 1;
     version.value = versionsForCurrentEngine.value[lastVersion];
     emitVersionChange();
 }
@@ -126,17 +127,21 @@ function emitVersionChange() {
     emit("update", version.value);
 }
 
+function isVersionSelectionAvailable() {
+    return !(props.tool == "xsd");
+}
+
 </script>
 
 <template>
-    <div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center pb-2 pr-2">
+    <div class="flex flex-col flex-none w-full 2xl:w-1/2 h-1/3 2xl:h-full items-center pb-2 pr-2">
         <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">Result:</span>
-            <div class="flex space-x-2">
+            <div class="flex space-x-2 overflow-x-scroll">
                 <select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                     <option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
                 </select>
-                <select v-model="version" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <select v-model="version" v-if="isVersionSelectionAvailable()" name="version" @change="emitVersionChange()" 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>
                 </select>
                 <button class="tool-button" @click="clear">Clear</button>    

Frontend/src/components/xml/tooltips/TooltipComponent.vue

@@ -58,7 +58,7 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div :class="areTooltipsHidden ? 'w-fit' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
+    <div :class="areTooltipsHidden ? 'w-fit' : 'w-[26rem]'" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
         <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
             T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
         </button>

Frontend/src/components/xml/tooltips/TooltipDiffsComponent.vue

@@ -12,19 +12,19 @@ const props = defineProps({
 function getDiffEntry(toolVersion : String) : string[] {
     if ( props.toolName == "xpath" ){
         switch(toolVersion){
-        case "2.0" : {
-            return xpathDiffs.VersionDiffs[0].diffs
+            case "2.0" : {
+                return xpathDiffs.VersionDiffs[0].diffs
+            }
+            case "3.0" : {
+                return xpathDiffs.VersionDiffs[1].diffs
+            }
+            case "3.1" : {
+                return xpathDiffs.VersionDiffs[2].diffs
+            }
+            default: {
+                return xpathDiffs.VersionDiffs[2].diffs
+            }
         }
-        case "3.0" : {
-            return xpathDiffs.VersionDiffs[1].diffs
-        }
-        case "3.1" : {
-            return xpathDiffs.VersionDiffs[2].diffs
-        }
-        default: {
-            return xpathDiffs.VersionDiffs[2].diffs
-        }
-    }
     } else if (props.toolName == "xslt") {
         return ["XSLT 2.0"].concat(xsltDiffs.VersionDiffs[0].diffs).concat(["XSLT 3.0"]).concat(xsltDiffs.VersionDiffs[1].diffs) ;
     } else{
@@ -56,7 +56,7 @@ function getInfo(num : number ){
     </span>
 </TooltipCategoryComponent>    
 
-<TooltipCategoryComponent v-if="toolVersion !== '1.0'"  :name="getInfo(1).category">
+<TooltipCategoryComponent v-if="toolVersion !== '1.0'"  :name="getInfo(1).category + ' ' + toolVersion + '?'">
         <span v-for=" diff in getDiffEntry(toolVersion)" v-bind:key="diff" class=" text-justify" >
             <div class="w-full h-4 text-center" v-if="diff.includes('XSLT')">
                 ------------ {{ diff }} ------------