From 7fdcbf7a28589923c190930231b67302b811e264 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 27 Jun 2023 12:11:45 +0200
Subject: [PATCH] Made headers more intuitive

---
 .../src/components/mock/HeadersComponent.vue  | 26 +++++++++++++------
 .../mock/RestMockMessageComponent.vue         |  2 +-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/Frontend/src/components/mock/HeadersComponent.vue b/Frontend/src/components/mock/HeadersComponent.vue
index 7499b3f..75f3be8 100644
--- a/Frontend/src/components/mock/HeadersComponent.vue
+++ b/Frontend/src/components/mock/HeadersComponent.vue
@@ -15,6 +15,14 @@ const headerData  = ref(props.headersObject)
 const newHeaderName = ref('');
 const newHeaderValue = ref('');
 
+function setAddButtonStyle() {
+    return isNewHeaderEmpty() ? "inactive-button" : "tool-button";
+}
+
+function isNewHeaderEmpty() {
+    return newHeaderName.value.trim().length == 0;
+}
+
 function isHeaderEssential(headerName : string){
     return headerName == "Keep-Alive" || headerName == "Connection" || headerName == "Date"
 }
@@ -31,7 +39,9 @@ function deleteHeader(index : string){
 }
 
 function addNewHeader(name : string, value : string){
-    if (headerData.value != undefined){
+    if (headerData.value != undefined) {
+        if (isNewHeaderEmpty()) return;
+
         headerData.value[name] = value;
         newHeaderName.value = "";
         newHeaderValue.value = "";
@@ -44,20 +54,20 @@ function addNewHeader(name : string, value : string){
 <template>
     
     <div class="flex flex-col gap-4">
-        <div class="flex flex-row gap-9">
+        <div class="flex flex-row gap-4">
             <div class="w-full">Header name</div>
             <div class="w-full">Header value</div>
             <div class="w-52 px-4"></div>
         </div>  
-        <div class="flex flex-row gap-9" v-for="(item, index) in headerData" :key="index">
-            <input type="text" :value="index" class="text-field" />
-            <input type="text" :value="item" class="text-field" />
+        <div class="flex flex-row gap-4" v-for="(item, index) in headerData" :key="index">
+            <input type="text" :value="index" class="text-field text-slate-400" disabled/>
+            <input type="text" :value="item" class="text-field text-slate-400" disabled/>
             <button @click="deleteHeader(index)" class="w-56" :class="setEssentialHeaderStyle(index)">Remove</button>
         </div>
-        <div class="flex flex-row gap-9">
-            <input type="text" v-model="newHeaderName" class="text-field"  />
+        <div class="flex flex-row gap-4">
+            <input type="text" v-model="newHeaderName" @change="() => setAddButtonStyle()" class="text-field"  />
             <input type="text" v-model="newHeaderValue" class="text-field"  />
-            <button @click="addNewHeader(newHeaderName, newHeaderValue)" class="tool-button w-56">Add</button>
+            <button @click="addNewHeader(newHeaderName, newHeaderValue)" :class="setAddButtonStyle()" class="w-56">Add</button>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/RestMockMessageComponent.vue b/Frontend/src/components/mock/RestMockMessageComponent.vue
index d1a8bcf..fe1e009 100644
--- a/Frontend/src/components/mock/RestMockMessageComponent.vue
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -50,7 +50,7 @@ function putDataInFields(data: mockedMessageData){
       
       <SaveComponent v-bind:message-data="messageData"></SaveComponent>
     </div>
-    <div class="flex flex-col md:flex-row w-full gap-4 md:gap-36">
+    <div class="flex flex-col md:flex-row w-full gap-4">
       <div class="w-full">
         <label for="contentType">Content Type</label><br/>
         <input  class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>