Implemented proper editors (#236)

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Reviewed-on: #236
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/BodyDetailComponent.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
+import CodeEditorComponent from '../CodeEditorComponent.vue';
+
 
 const props = defineProps(
     {
-        data: {required: true, type: String}
+        data: {required: true, type: String},
+        contentType: {required:true,type:String},
     }
 )
 
+
+
 </script>
 
 <template>
-    <span class="text-white text-center h-screen overflow-x-scroll ">
-        {{ props.data.replace(/\\n/g,"") }}
-    </span>
+    <CodeEditorComponent :code="props.data" :config='{disabled:true, language:props.contentType.replace("application/","")}' />
 </template>

Frontend/src/components/mock/HistoryComponent.vue

@@ -7,8 +7,9 @@ import HeadersDetailComponent from './HeadersDetailComponent.vue';
 const shownDetail = ref('none');
 const currentShownData = ref('');
 const currentIndex = ref(-1);
+const currentContentType = ref('application/json');
 
-function showBody(body : string, index: number){
+function showBody(body : string, index: number, contentType : string){
     if( currentIndex.value == index && shownDetail.value == "body" ){
         shownDetail.value = "none";
     } else {
@@ -16,6 +17,7 @@ function showBody(body : string, index: number){
         shownDetail.value = "body";
         currentShownData.value = body;
     }
+    currentContentType.value = contentType;
 }
 
 function showHeaders(headers: object, index: number){
@@ -34,7 +36,7 @@ function showHeaders(headers: object, index: number){
 <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>
+    <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
     <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
     </div>
 </template>

Frontend/src/components/mock/HistoryRecords.vue

@@ -4,11 +4,16 @@ import {ref, type Ref } from 'vue';
 interface historyRecord {
     clientUUID : String,
     dateTimeStamp: String,
-    headers : Object,
+    headers : Headers ,
     httpMethod: String,
     requestBody: String
 }
 
+interface Headers {
+    'content-type': String,
+    [propName: string]: any;
+}
+
 const emit = defineEmits([
     'click:showHeaders',
     'click:showBody',
@@ -28,9 +33,9 @@ function showHeaders(headers: Object, index : number){
     emit('click:showHeaders',headers, index)
 }
 
-function showBody(body: String , index : number){
-    console.log(body)
-    emit('click:showBody',body, index)
+function showBody(body: String , index : number, contentType: String){
+
+    emit('click:showBody',body, index, contentType  )
 }
 
 function refreshHistory(){
@@ -54,7 +59,7 @@ function refreshHistory(){
                 <td> {{ item.httpMethod }} </td>
                 <td> <button @click="showHeaders(item.headers, index)">Show Headers</button> </td>
                 <td> 
-                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index)">Show Body</button> 
+                    <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index, item.headers['content-type'])">Show Body</button> 
                     <span v-else>Empty Body</span>
                 </td>
             </tr>

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -2,6 +2,7 @@
 import {ref, type Ref} from 'vue';
 import HeadersComponent from './HeadersComponent.vue';
 import SaveComponent from './SaveComponent.vue';
+import CodeEditorComponent from '../CodeEditorComponent.vue';
 
 const clientUUID = ref('');
 const host = window.location.protocol + "//" + window.location.hostname + "/mock";
@@ -36,10 +37,14 @@ function putDataInFields(data: mockedMessageData){
   messageData = ref( data )
 }
 
+function showUpdatedCode(newCode : string){
+  messageData.value.messageBody = newCode
+}
+
 </script>
 
 <template>
-  <div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6">
+  <div class="flex overflow-y-scroll flex-col w-full xl:w-3/5 text-center dark:text-white gap-6">
     <div>
       <label for="link">Link</label><br/>
       <div class="flex gap-4">
@@ -61,9 +66,14 @@ function putDataInFields(data: mockedMessageData){
       </div>
       
     </div>
-    <div class="flex flex-col">
-      <label for="messageBody">Body</label>
-      <textarea class="text-field h-64" id="messageBody" v-model="messageData.messageBody"></textarea>
+    <div class="flex text-left flex-col overflow-scroll h-3/4">
+      <label for="messageBody text-center">Body</label>
+      <CodeEditorComponent
+      @update:updated-code="showUpdatedCode"
+      v-model="messageData.messageBody" 
+      :config="{disabled:false,language:messageData.contentType}" 
+      :code="messageData.messageBody" 
+      id="messageBody" />
     </div>
     <HeadersComponent @update:httpHeaders="(newHeaders: object) => {messageData.httpHeaders = newHeaders }" :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
   </div>