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/HistoryComponent.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import HistoryRecords from './HistoryRecords.vue';
+import BodyDetailComponent from './BodyDetailComponent.vue';
+import HeadersDetailComponent from './HeadersDetailComponent.vue';
+
+const shownDetail = ref('none');
+const currentShownData = ref('');
+const currentIndex = ref(-1);
+
+function showBody(body : string, index: number){
+    if( currentIndex.value == index && shownDetail.value == "body" ){
+        shownDetail.value = "none";
+    } else {
+        currentIndex.value = index;
+        shownDetail.value = "body";
+        currentShownData.value = body;
+    }
+}
+
+function showHeaders(headers: object, index: number){
+    if(currentIndex.value == index && shownDetail.value == "headers" ){
+        shownDetail.value = "none";
+    } else {
+        currentIndex.value = index;
+        shownDetail.value = "headers";
+        currentShownData.value = JSON.stringify(headers);
+    }
+}
+
+</script>
+
+
+<template>
+    <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
+    <HistoryRecords class="h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
+    <BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
+    <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
+    </div>
+</template>