feat: init bulk edit

assets/scss/styles.scss

@@ -35,12 +35,14 @@
   @apply text-accentContrast;
 }
 
-input::placeholder {
+input::placeholder,
+textarea::placeholder {
   @apply text-secondaryDark;
   @apply opacity-25;
 }
 
-input {
+input,
+textarea {
   @apply text-secondaryDark;
   @apply font-medium;
 }

components/http/Headers.vue

@@ -28,16 +28,44 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear_all')"
           svg="trash-2"
+          :disabled="bulkMode"
           @click.native="clearContent"
         />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.bulk_mode')"
+          svg="edit"
+          :class="{ '!text-accent': bulkMode }"
+          @click.native="bulkMode = !bulkMode"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('add.new')"
           svg="plus"
+          :disabled="bulkMode"
           @click.native="addHeader"
         />
       </div>
     </div>
+    <div v-if="bulkMode" class="flex">
+      <textarea
+        name="bulk-parameters"
+        class="
+          bg-transparent border-b
+          border-dividerLight flex
+          flex-1
+          py-2
+          px-4
+          whitespace-pre
+          resize-y
+          overflow-auto
+        "
+        rows="10"
+        :placeholder="$t('state.bulk_mode_placeholder')"
+        v-focus
+      ></textarea>
+    </div>
+    <div v-else>
       <div
         v-for="(header, index) in headers$"
         :key="`header-${index}`"
@@ -121,7 +149,9 @@
               updateHeader(index, {
                 key: header.key,
                 value: header.value,
-              active: header.hasOwnProperty('active') ? !header.active : false,
+                active: header.hasOwnProperty('active')
+                  ? !header.active
+                  : false,
               })
             "
           />
@@ -138,7 +168,13 @@
       </div>
       <div
         v-if="headers$.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
       >
         <span class="text-center pb-4">
           {{ $t("empty.headers") }}
@@ -150,11 +186,12 @@
           @click.native="addHeader"
         />
       </div>
+    </div>
   </AppSection>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import {
   restHeaders$,
   addRESTHeader,
@@ -169,9 +206,11 @@ import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 
 export default defineComponent({
   setup() {
+    const bulkMode = ref(false)
     return {
       headers$: useReadonlyStream(restHeaders$, []),
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+      bulkMode,
     }
   },
   data() {

components/http/Parameters.vue

@@ -28,16 +28,44 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear_all')"
           svg="trash-2"
+          :disabled="bulkMode"
           @click.native="clearContent"
         />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.bulk_mode')"
+          svg="edit"
+          :class="{ '!text-accent': bulkMode }"
+          @click.native="bulkMode = !bulkMode"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('add.new')"
           svg="plus"
+          :disabled="bulkMode"
           @click.native="addParam"
         />
       </div>
     </div>
+    <div v-if="bulkMode" class="flex">
+      <textarea
+        name="bulk-parameters"
+        class="
+          bg-transparent
+          border-b border-dividerLight
+          flex flex-1
+          py-2
+          px-4
+          whitespace-pre
+          resize-y
+          overflow-auto
+        "
+        rows="10"
+        :placeholder="$t('state.bulk_mode_placeholder')"
+        v-focus
+      ></textarea>
+    </div>
+    <div v-else>
       <div
         v-for="(param, index) in params$"
         :key="`param-${index}`"
@@ -149,7 +177,13 @@
       </div>
       <div
         v-if="params$.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
       >
         <span class="text-center pb-4">
           {{ $t("empty.parameters") }}
@@ -161,11 +195,12 @@
           @click.native="addParam"
         />
       </div>
+    </div>
   </AppSection>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
@@ -179,9 +214,11 @@ import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
   setup() {
+    const bulkMode = ref(false)
     return {
       params$: useReadonlyStream(restParams$, []),
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+      bulkMode,
     }
   },
   watch: {

locales/en.json

@@ -403,6 +403,8 @@
     "url": "URL"
   },
   "state": {
+    "bulk_mode": "Bulk edit",
+    "bulk_mode_placeholder": "Entries are separated by newline\nKeys and values are separated by :",
     "cleared": "Cleared",
     "connected": "Connected",
     "connected_to": "Connected to {name}",