From 43cc7c1dbfb60b092fcd7373910897e3e0534e17 Mon Sep 17 00:00:00 2001
From: widlam <mikolaj.widla@gmail.com>
Date: Wed, 28 Jun 2023 14:55:15 +0200
Subject: [PATCH] implemented synthax highlighting to mock sevice message body

---
 Frontend/src/components/CodeEditorComponent.vue       | 11 +++++++++++
 .../src/components/mock/RestMockMessageComponent.vue  | 11 ++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/Frontend/src/components/CodeEditorComponent.vue b/Frontend/src/components/CodeEditorComponent.vue
index 21bbc4f..04a0cb6 100644
--- a/Frontend/src/components/CodeEditorComponent.vue
+++ b/Frontend/src/components/CodeEditorComponent.vue
@@ -19,6 +19,16 @@ import {html} from '@codemirror/lang-html'
       },
   })
 
+  const emit = defineEmits(
+    [
+      'update:updatedCode'
+    ]
+  )
+
+  function dataUpdated(newData:String, viewUpdate : any){
+    emit('update:updatedCode',newData)
+  }
+
   const extensions = computed( ()=> {
     return  [
         oneDark,
@@ -50,6 +60,7 @@ import {html} from '@codemirror/lang-html'
     <codemirror
       style="height: 100%; padding:0.5rem ; border-radius: 0.5rem"
       :model-value="code"
+      @update:model-value="dataUpdated"
       :extensions="extensions"
       :disabled="config.disabled"
       />
diff --git a/Frontend/src/components/mock/RestMockMessageComponent.vue b/Frontend/src/components/mock/RestMockMessageComponent.vue
index 95eff0b..8adeb51 100644
--- a/Frontend/src/components/mock/RestMockMessageComponent.vue
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -37,6 +37,10 @@ function putDataInFields(data: mockedMessageData){
   messageData = ref( data )
 }
 
+function showUpdatedCode(newCode : string){
+  messageData.value.messageBody = newCode
+}
+
 </script>
 
 <template>
@@ -64,7 +68,12 @@ function putDataInFields(data: mockedMessageData){
     </div>
     <div class="flex text-left flex-col overflow-scroll h-3/4">
       <label for="messageBody text-center">Body</label>
-      <CodeEditorComponent :config="{disabled:false,language:messageData.contentType}" :code="messageData.messageBody" id="messageBody"></CodeEditorComponent>
+      <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>