created UI for adding parameters

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -3,12 +3,13 @@ import InsertTemplateComponent from '@components/common/InsertTemplateComponent.
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import CodeEditor from '@/components/common/CodeEditorComponent.vue'
 
-import { ref } from 'vue'
+import {ref} from 'vue'
+import TabComponent from "@components/xml/TabComponent.vue";
 
 const props = defineProps(
     {
-        stylizedName: {type: String, required: true},
-        data: {type: String},
+      stylizedName: {type: String, required: true},
+      data: {type: String},
     }
 )
 const emit = defineEmits(['update:modelValue'])
@@ -17,54 +18,88 @@ const data = ref('')
 const inputFile = ref()
 
 function sendValue() {
-    emit('update:modelValue', data.value)
+  emit('update:modelValue', data.value)
 }
 
 function updateData(newData: string, clearFileSelector: boolean = true) {
-    data.value = newData
-    if (clearFileSelector)
-        inputFile.value.value = '';
-    sendValue()
+  data.value = newData
+  if (clearFileSelector)
+    inputFile.value.value = '';
+  sendValue()
 }
 
 function clear() {
-    updateData('')
+  updateData('')
 }
 
 function canBeFormatted() {
-    return props.stylizedName.toLowerCase() == 'xml' || 
-           props.stylizedName.toLowerCase() == 'xsd' || 
-           props.stylizedName.toLowerCase() == 'xslt'
+  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])
+function addParameters() {
+  return 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 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 justify-between mb-2"></div>
+
+    <div class="flex place-content-between w-full items-center">
+      <span class="dark:text-white mr-2">{{ stylizedName }}</span>
+      <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>
+      <div class="flex space-x-2 pb-2 overflow-x-auto">
+        <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>
+
+    <div class="flex place-content-between w-full items-center">
+      <div v-if="addParameters()" class="flex justify-end space-x-2 pb-2 overflow-x-auto ml-auto">
+        <select id = "myList" onchange = "favTutorial()" class = "w-full rounded-3xl" >
+          <option> ---Choose tutorial--- </option>
+          <option> w3schools </option>
+          <option> Javatpoint </option>
+          <option> tutorialspoint </option>
+          <option> geeksforgeeks </option>
+        </select>
+        <input
+            id="textInput1"
+            class="text-input px-2 py-1 border rounded-3xl w-1/3"
+            type="text"
+            placeholder="Input 1"
+        />
+        <input
+            id="textInput2"
+            class="text-input px-2 py-1 border rounded-3xl w-1/3"
+            type="text"
+            placeholder="Input 2"
+        />
+        <button class="tool-button" @click="clear">Add Variable</button>
+      </div>
+    </div>
+
+    <CodeEditor @update:updated-code="updateData" v-model="data" :code="data"
+                :config="{disabled:false, language:stylizedName}"></CodeEditor>
+  </div>
+
 </template>