Implemented REST Mock tool

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #231
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/components/mock/HeadersComponent.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref} from 'vue';
+
+const props = defineProps(
+    {
+        headersObject : Object
+    } 
+)
+
+const emit = defineEmits([
+    'update:httpHeaders'
+])
+
+const headerData  = ref(props.headersObject)
+const newHeaderName = ref('');
+const newHeaderValue = ref('');
+
+function isHeaderEssential(headerName : string){
+    return headerName == "Keep-Alive" || headerName == "Connection" || headerName == "Date"
+}
+
+function setEssentialHeaderStyle(headerName : string){
+    return isHeaderEssential(headerName) ? "text-gray-400" : "tool-button text-red-400";
+}
+
+function deleteHeader(index : string){
+    if(!isHeaderEssential(index) && headerData.value != undefined){
+        delete headerData.value[index]
+        emit('update:httpHeaders',headerData.value)
+    }
+}
+
+function addNewHeader(name : string, value : string){
+    if (headerData.value != undefined){
+        headerData.value[name] = value;
+        newHeaderName.value = "";
+        newHeaderValue.value = "";
+        emit('update:httpHeaders',headerData.value)
+    }
+}
+
+</script>
+
+<template>
+    <div class="w-full gap-4 flex">
+        <div class="w-full">Header name</div>
+        <div class="w-full">Header value</div>
+        <div class="w-1/5"></div>
+    </div>
+    <div class="flex flex-col gap-4">
+        <div class="flex gap-9 flex-row" v-for="(item, index) in headerData" :key="index">
+            <input type="text" :value="index" class="text-field" />
+            <input type="text" :value="item" class="text-field" />
+            <button @click="deleteHeader(index)" class="tool-button w-1/5" :class="setEssentialHeaderStyle(index)">Remove</button>
+        </div>
+        <div class="flex gap-9 flex-row">
+            <input type="text" v-model="newHeaderName" class="text-field"  />
+            <input type="text" v-model="newHeaderValue" class="text-field"  />
+            <button class="tool-button w-1/5" @click="addNewHeader(newHeaderName, newHeaderValue)" >Add</button>
+        </div>
+    </div>
+</template>