R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Made headers more intuitive

Browse Source
This commit is contained in:
Adam Bem
2023-06-27 12:11:45 +02:00
parent b4d9b73f78
commit 7fdcbf7a28
2 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
Frontend/src/components/mock/HeadersComponent.vue
View File

@@ -15,6 +15,14 @@ const headerData = ref(props.headersObject)
const newHeaderName = ref(''); const newHeaderName = ref('');
const newHeaderValue = ref(''); const newHeaderValue = ref('');
function setAddButtonStyle() {
return isNewHeaderEmpty() ? "inactive-button" : "tool-button";
}
function isNewHeaderEmpty() {
return newHeaderName.value.trim().length == 0;
}
function isHeaderEssential(headerName : string){ function isHeaderEssential(headerName : string){
return headerName == "Keep-Alive" || headerName == "Connection" || headerName == "Date" return headerName == "Keep-Alive" || headerName == "Connection" || headerName == "Date"
} }
@@ -31,7 +39,9 @@ function deleteHeader(index : string){
} }
function addNewHeader(name : string, value : string){ function addNewHeader(name : string, value : string){
if (headerData.value != undefined){ if (headerData.value != undefined) {
if (isNewHeaderEmpty()) return;
headerData.value[name] = value; headerData.value[name] = value;
newHeaderName.value = ""; newHeaderName.value = "";
newHeaderValue.value = ""; newHeaderValue.value = "";
@@ -44,20 +54,20 @@ function addNewHeader(name : string, value : string){
<template> <template>
<div class="flex flex-col gap-4"> <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 name</div>
<div class="w-full">Header value</div> <div class="w-full">Header value</div>
<div class="w-52 px-4"></div> <div class="w-52 px-4"></div>
</div> </div>
<div class="flex flex-row gap-9" v-for="(item, index) in headerData" :key="index"> <div class="flex flex-row gap-4" v-for="(item, index) in headerData" :key="index">
<input type="text" :value="index" class="text-field" /> <input type="text" :value="index" class="text-field text-slate-400" disabled/>
<input type="text" :value="item" class="text-field" /> <input type="text" :value="item" class="text-field text-slate-400" disabled/>
<button @click="deleteHeader(index)" class="w-56" :class="setEssentialHeaderStyle(index)">Remove</button> <button @click="deleteHeader(index)" class="w-56" :class="setEssentialHeaderStyle(index)">Remove</button>
</div> </div>
<div class="flex flex-row gap-9"> <div class="flex flex-row gap-4">
<input type="text" v-model="newHeaderName" class="text-field" /> <input type="text" v-model="newHeaderName" @change="() => setAddButtonStyle()" class="text-field" />
<input type="text" v-model="newHeaderValue" 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>
</div> </div>
</template> </template>

2
Frontend/src/components/mock/RestMockMessageComponent.vue
View File

@@ -50,7 +50,7 @@ function putDataInFields(data: mockedMessageData){
<SaveComponent v-bind:message-data="messageData"></SaveComponent> <SaveComponent v-bind:message-data="messageData"></SaveComponent>
</div> </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"> <div class="w-full">
<label for="contentType">Content Type</label><br/> <label for="contentType">Content Type</label><br/>
<input class="text-field" id="contentType" type="text" v-model="messageData.contentType"/> <input class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>