feat: input toggle for parameters and headers (#1388)

* feat: toggler for parameters and headers

* refactor: move bodyParams to separate component + feat: input toggle

* fix: backward copaitability

* Fixed issue with imported active prop mutations

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

components/http/http-parameters.vue

@@ -73,10 +73,35 @@
         <li>
           <button
             class="icon"
-            @click="removeRequestParam(index)"
-            v-tooltip.bottom="$t('delete')"
-            id="param"
+            @click="
+              $store.commit('setActiveParams', {
+                index,
+                value: param.hasOwnProperty('active') ? !param.active : false,
+              })
+            "
+            v-tooltip.bottom="{
+              content: param.hasOwnProperty('active')
+                ? param.active
+                  ? $t('turn_off')
+                  : $t('turn_on')
+                : $t('turn_off'),
+            }"
           >
+            <i class="material-icons">
+              {{
+                param.hasOwnProperty("active")
+                  ? param.active
+                    ? "check_box"
+                    : "check_box_outline_blank"
+                  : "check_box"
+              }}
+            </i>
+          </button>
+        </li>
+      </div>
+      <div>
+        <li>
+          <button class="icon" @click="removeRequestParam(index)" v-tooltip.bottom="$t('delete')">
             <i class="material-icons">delete</i>
           </button>
         </li>