fix: form data request as body

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

components/http/BodyParameters.vue

@@ -38,7 +38,6 @@
         />
       </div>
     </div>
-    <!-- <div v-if="typeof bodyParams !== 'string'"> -->
     <div
       v-for="(param, index) in bodyParams"
       :key="`param-${index}`"
@@ -51,7 +50,6 @@
         styles="
           bg-primaryLight
           flex
-
           flex-1
           py-1
           px-4
@@ -59,9 +57,10 @@
         "
         @change="
           updateBodyParam(index, {
-            key: $event.target.value,
+            key: $event,
             value: param.value,
             active: param.active,
+            isFile: param.isFile,
           })
         "
       />
@@ -84,54 +83,14 @@
             key: $event.target.value,
             value: param.value,
             active: param.active,
+            isFile: param.isFile,
           })
         "
       />
-      <SmartEnvInput
+      <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
-        v-if="EXPERIMENTAL_URL_BAR_ENABLED && !param.isFile"
+        <div class="space-x-2 file-chips-wrapper">
-        v-model="param.value"
-        :placeholder="$t('count.value', { count: index + 1 })"
-        styles="
-          bg-primaryLight
-          flex
-          flex-1
-          py-1
-          px-4
-          focus:outline-none
-        "
-        @change="
-          updateBodyParam(index, {
-            key: param.key,
-            value: $event.target.value,
-            active: param.active,
-          })
-        "
-      />
-      <input
-        v-if="!EXPERIMENTAL_URL_BAR_ENABLED && !param.isFile"
-        class="
-          bg-primaryLight
-          flex flex-1
-          py-2
-          px-4
-          truncate
-          focus:outline-none
-        "
-        :placeholder="$t('count.value', { count: index + 1 })"
-        :name="'value' + index"
-        :value="param.value"
-        @change="
-          updateBodyParam(index, {
-            key: param.key,
-            value: $event.target.value,
-            active: param.active,
-          })
-        "
-      />
-      <div v-else class="file-chips-container">
-        <div class="file-chips-wrapper">
           <SmartDeletableChip
-            v-for="(file, fileIndex) in Array.from(bodyParams[index].value)"
+            v-for="(file, fileIndex) in param.value"
             :key="`param-${index}-file-${fileIndex}`"
             @chip-delete="chipDelete(index, fileIndex)"
           >
@@ -139,6 +98,68 @@
           </SmartDeletableChip>
         </div>
       </div>
+      <span v-else class="flex flex-1">
+        <SmartEnvInput
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+          v-model="param.value"
+          :placeholder="$t('count.value', { count: index + 1 })"
+          styles="
+          bg-primaryLight
+          flex
+          flex-1
+          py-1
+          px-4
+          focus:outline-none
+        "
+          @change="
+            updateBodyParam(index, {
+              key: param.key,
+              value: $event,
+              active: param.active,
+              isFile: param.isFile,
+            })
+          "
+        />
+        <input
+          v-else
+          class="
+            bg-primaryLight
+            flex flex-1
+            py-2
+            px-4
+            truncate
+            focus:outline-none
+          "
+          :placeholder="$t('count.value', { count: index + 1 })"
+          :name="'value' + index"
+          :value="param.value"
+          @change="
+            updateBodyParam(index, {
+              key: param.key,
+              value: $event.target.value,
+              active: param.active,
+              isFile: param.isFile,
+            })
+          "
+        />
+      </span>
+      <span>
+        <label for="attachment" class="p-0">
+          <ButtonSecondary
+            class="w-full"
+            icon="attach_file"
+            @click.native="$refs.attachment[index].click()"
+          />
+        </label>
+        <input
+          ref="attachment"
+          class="input"
+          name="attachment"
+          type="file"
+          multiple
+          @change="setRequestAttachment(index, param, $event)"
+        />
+      </span>
       <span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -162,27 +183,11 @@
               key: param.key,
               value: param.value,
               active: param.hasOwnProperty('active') ? !param.active : false,
+              isFile: param.isFile,
             })
           "
         />
       </span>
-      <span>
-        <label for="attachment" class="p-0">
-          <ButtonSecondary
-            class="w-full"
-            icon="attach_file"
-            @click.native="$refs.attachment[index].click()"
-          />
-        </label>
-        <input
-          ref="attachment"
-          class="input"
-          name="attachment"
-          type="file"
-          multiple
-          @change="setRequestAttachment($event, index)"
-        />
-      </span>
       <span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -207,34 +212,106 @@
         @click.native="addBodyParam"
       />
     </div>
-    <!-- </div> -->
   </AppSection>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted } from "@nuxtjs/composition-api"
+import { defineComponent, onMounted, Ref, watch } from "@nuxtjs/composition-api"
+import { FormDataKeyValue } from "~/helpers/types/HoppRESTRequest"
 import { pluckRef } from "~/helpers/utils/composables"
-import { addFormDataEntry, useRESTRequestBody } from "~/newstore/RESTSession"
+import {
+  addFormDataEntry,
+  deleteAllFormDataEntries,
+  deleteFormDataEntry,
+  updateFormDataEntry,
+  useRESTRequestBody,
+} from "~/newstore/RESTSession"
 import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
   setup() {
-    const bodyParams = pluckRef(useRESTRequestBody(), "body")
+    const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref<
+      FormDataKeyValue[]
+    >
+
+    const addBodyParam = () => {
+      addFormDataEntry({ key: "", value: "", active: true, isFile: false })
+    }
+
+    const updateBodyParam = (index: number, entry: FormDataKeyValue) => {
+      updateFormDataEntry(index, entry)
+    }
+
+    const deleteBodyParam = (index: number) => {
+      deleteFormDataEntry(index)
+    }
+
+    const clearContent = () => {
+      deleteAllFormDataEntries()
+    }
+
+    const chipDelete = (paramIndex: number, fileIndex: number) => {
+      const entry = bodyParams.value[paramIndex]
+      if (entry.isFile) {
+        entry.value.splice(fileIndex, 1)
+        if (entry.value.length === 0) {
+          updateFormDataEntry(paramIndex, {
+            ...entry,
+            isFile: false,
+            value: "",
+          })
+          return
+        }
+      }
+
+      updateFormDataEntry(paramIndex, entry)
+    }
+
+    const setRequestAttachment = (
+      index: number,
+      entry: FormDataKeyValue,
+      event: InputEvent
+    ) => {
+      console.log(index, event)
+
+      const fileEntry: FormDataKeyValue = {
+        ...entry,
+        isFile: true,
+        value: Array.from((event.target as HTMLInputElement).files!),
+      }
+      updateFormDataEntry(index, fileEntry)
+    }
+
+    watch(
+      bodyParams,
+      () => {
+        if (
+          bodyParams.value.length > 0 &&
+          (bodyParams.value[bodyParams.value.length - 1].key !== "" ||
+            bodyParams.value[bodyParams.value.length - 1].value !== "")
+        )
+          addBodyParam()
+      },
+      { deep: true }
+    )
 
     onMounted(() => {
-      console.log(bodyParams.value)
+      if (!bodyParams.value?.length) {
+        addBodyParam()
+      }
     })
+
     return {
       bodyParams,
+      addBodyParam,
+      updateBodyParam,
+      deleteBodyParam,
+      clearContent,
+      setRequestAttachment,
+      chipDelete,
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
     }
   },
-  methods: {
-    addBodyParam() {
-      addFormDataEntry({ key: "", value: "", active: true, isFile: false })
-    },
-    updateBodyParam() {},
-  },
 })
 </script>
 
@@ -243,10 +320,12 @@ export default defineComponent({
   @apply flex flex-1;
   @apply whitespace-nowrap;
   @apply overflow-auto;
-  @apply bg-primaryDark;
+  @apply bg-primaryLight;
 
   .file-chips-wrapper {
     @apply flex;
+    @apply px-4;
+    @apply py-1;
     @apply w-0;
   }
 }

components/http/Headers.vue

@@ -82,7 +82,7 @@
         @change="
           updateHeader(index, {
             key: header.key,
-            value: $event.target.value,
+            value: $event,
             active: header.active,
           })
         "

components/http/Parameters.vue

@@ -57,7 +57,7 @@
         "
         @change="
           updateParam(index, {
-            key: $event.target.value,
+            key: $event,
             value: param.value,
             active: param.active,
           })
@@ -100,7 +100,7 @@
         @change="
           updateParam(index, {
             key: param.key,
-            value: $event.target.value,
+            value: $event,
             active: param.active,
           })
         "

components/smart/DeletableChip.vue

@@ -1,8 +1,9 @@
 <template>
   <span class="chip">
-    <span><slot></slot></span>
+    <i class="opacity-75 material-icons">attachment</i>
+    <span class="px-2"><slot></slot></span>
     <ButtonSecondary
-      class="rounded p-2 close-button icon"
+      class="rounded close-button"
       icon="close"
       @click.native="$emit('chip-delete')"
     />
@@ -15,15 +16,13 @@
   @apply items-center;
   @apply justify-center;
   @apply rounded;
-  @apply m-1;
+  @apply pl-2;
-  @apply pl-4;
+  @apply pr-0.5;
-  @apply bg-primaryDark;
+  @apply bg-primary;
-  @apply text-secondary;
-
   @apply border border-divider;
 }
 
 .close-button {
-  @apply text-base;
+  @apply p-0.5;
 }
 </style>

components/smart/EnvInput.vue

@@ -12,7 +12,6 @@
       :class="styles"
       contenteditable="true"
       @keydown.enter.prevent="$emit('enter', $event)"
-      @change="$emit('change', $event)"
       @keyup="$emit('keyup', $event)"
       @click="$emit('click', $event)"
       @keydown="$emit('keydown', $event)"
@@ -133,6 +132,7 @@ export default defineComponent({
       if (!this.highlightEnabled) {
         this.htmlOutput = this.internalValue
         this.$emit("input", this.internalValue)
+        this.$emit("change", this.internalValue)
         return
       }
 
@@ -232,6 +232,7 @@ export default defineComponent({
       })
 
       this.$emit("input", this.internalValue)
+      this.$emit("change", this.internalValue)
     },
     renderTippy() {
       const tippable = document.querySelectorAll("[v-tippy]")

helpers/types/HoppRESTRequest.ts

@@ -18,7 +18,7 @@ export type HoppRESTHeader = {
 export type FormDataKeyValue = {
   key: string
   active: boolean
-} & ({ isFile: true; value: Blob } | { isFile: false; value: string })
+} & ({ isFile: true; value: Blob[] } | { isFile: false; value: string })
 
 export type HoppRESTReqBodyFormData = {
   contentType: "multipart/form-data"

newstore/RESTSession.ts

@@ -260,7 +260,7 @@ const dispatchers = defineDispatchers({
       },
     }
   },
-  removeFormDataEntry(curr: RESTSession, { index }: { index: number }) {
+  deleteFormDataEntry(curr: RESTSession, { index }: { index: number }) {
     // Only perform update if the current content-type is formdata
     if (curr.request.body.contentType !== "multipart/form-data") return {}
 
@@ -291,15 +291,17 @@ const dispatchers = defineDispatchers({
       },
     }
   },
-  clearAllFormDataEntries(curr: RESTSession) {
+  deleteAllFormDataEntries(curr: RESTSession) {
     // Only perform update if the current content-type is formdata
     if (curr.request.body.contentType !== "multipart/form-data") return {}
 
     return {
-      ...curr.request,
+      request: {
-      body: <HoppRESTReqBody>{
+        ...curr.request,
-        contentType: "multipart/form-data",
+        body: <HoppRESTReqBody>{
-        body: [],
+          contentType: "multipart/form-data",
+          body: [],
+        },
       },
     }
   },
@@ -538,9 +540,9 @@ export function addFormDataEntry(entry: FormDataKeyValue) {
   })
 }
 
-export function removeFormDataEntry(index: number) {
+export function deleteFormDataEntry(index: number) {
   restSessionStore.dispatch({
-    dispatcher: "removeFormDataEntry",
+    dispatcher: "deleteFormDataEntry",
     payload: {
       index,
     },
@@ -557,9 +559,9 @@ export function updateFormDataEntry(index: number, entry: FormDataKeyValue) {
   })
 }
 
-export function clearAllFormDataEntries() {
+export function deleteAllFormDataEntries() {
   restSessionStore.dispatch({
-    dispatcher: "clearAllFormDataEntries",
+    dispatcher: "deleteAllFormDataEntries",
     payload: {},
   })
 }