feat: init bulk edit

components/http/Headers.vue

@@ -28,28 +28,56 @@
           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-for="(header, index) in headers$"
-      :key="`header-${index}`"
-      class="divide-x divide-dividerLight border-b border-dividerLight flex"
-    >
-      <SmartAutoComplete
-        :placeholder="$t('count.header', { count: index + 1 })"
-        :source="commonHeaders"
-        :spellcheck="false"
-        :value="header.key"
-        autofocus
-        styles="
+    <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}`"
+        class="divide-x divide-dividerLight border-b border-dividerLight flex"
+      >
+        <SmartAutoComplete
+          :placeholder="$t('count.header', { count: index + 1 })"
+          :source="commonHeaders"
+          :spellcheck="false"
+          :value="header.key"
+          autofocus
+          styles="
           bg-transparent
           flex
           flex-1
@@ -57,104 +85,113 @@
           px-4
           truncate
         "
-        :class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
-        @input="
-          updateHeader(index, {
-            key: $event,
-            value: header.value,
-            active: header.active,
-          })
-        "
-      />
-      <SmartEnvInput
-        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
-        v-model="header.value"
-        :placeholder="$t('count.value', { count: index + 1 })"
-        styles="
+          :class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
+          @input="
+            updateHeader(index, {
+              key: $event,
+              value: header.value,
+              active: header.active,
+            })
+          "
+        />
+        <SmartEnvInput
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+          v-model="header.value"
+          :placeholder="$t('count.value', { count: index + 1 })"
+          styles="
           bg-transparent
           flex
           flex-1
           py-1
           px-4
         "
-        @change="
-          updateHeader(index, {
-            key: header.key,
-            value: $event,
-            active: header.active,
-          })
-        "
-      />
-      <input
-        v-else
-        class="bg-transparent flex flex-1 py-2 px-4"
-        :placeholder="$t('count.value', { count: index + 1 })"
-        :name="'value' + index"
-        :value="header.value"
-        @change="
-          updateHeader(index, {
-            key: header.key,
-            value: $event.target.value,
-            active: header.active,
-          })
-        "
-      />
-      <span>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            header.hasOwnProperty('active')
-              ? header.active
-                ? $t('action.turn_off')
-                : $t('action.turn_on')
-              : $t('action.turn_off')
-          "
-          :svg="
-            header.hasOwnProperty('active')
-              ? header.active
-                ? 'check-circle'
-                : 'circle'
-              : 'check-circle'
-          "
-          color="green"
-          @click.native="
+          @change="
             updateHeader(index, {
               key: header.key,
-              value: header.value,
-              active: header.hasOwnProperty('active') ? !header.active : false,
+              value: $event,
+              active: header.active,
             })
           "
         />
-      </span>
-      <span>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.remove')"
-          svg="trash"
-          color="red"
-          @click.native="deleteHeader(index)"
+        <input
+          v-else
+          class="bg-transparent flex flex-1 py-2 px-4"
+          :placeholder="$t('count.value', { count: index + 1 })"
+          :name="'value' + index"
+          :value="header.value"
+          @change="
+            updateHeader(index, {
+              key: header.key,
+              value: $event.target.value,
+              active: header.active,
+            })
+          "
         />
-      </span>
-    </div>
-    <div
-      v-if="headers$.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
-    >
-      <span class="text-center pb-4">
-        {{ $t("empty.headers") }}
-      </span>
-      <ButtonSecondary
-        filled
-        :label="$t('add.new')"
-        svg="plus"
-        @click.native="addHeader"
-      />
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              header.hasOwnProperty('active')
+                ? header.active
+                  ? $t('action.turn_off')
+                  : $t('action.turn_on')
+                : $t('action.turn_off')
+            "
+            :svg="
+              header.hasOwnProperty('active')
+                ? header.active
+                  ? 'check-circle'
+                  : 'circle'
+                : 'check-circle'
+            "
+            color="green"
+            @click.native="
+              updateHeader(index, {
+                key: header.key,
+                value: header.value,
+                active: header.hasOwnProperty('active')
+                  ? !header.active
+                  : false,
+              })
+            "
+          />
+        </span>
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('action.remove')"
+            svg="trash"
+            color="red"
+            @click.native="deleteHeader(index)"
+          />
+        </span>
+      </div>
+      <div
+        v-if="headers$.length === 0"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <span class="text-center pb-4">
+          {{ $t("empty.headers") }}
+        </span>
+        <ButtonSecondary
+          filled
+          :label="$t('add.new')"
+          svg="plus"
+          @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() {