refactor(gui): linting

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>

packages/nc-gui/components/project/tableTabs/webhook/httpWebhook.vue

@@ -1,96 +1,102 @@
 <template>
   <div>
-
     <div class="d-flex">
       <v-select
+        v-model="api.method"
         outlined
         dense
         class="caption"
-        v-model="api.method"
-        :items="Object.keys(apiMethodMeta)" style="max-width:100px;"></v-select>
+        :items="Object.keys(apiMethodMeta)"
+        style="max-width:100px;"
+      />
       <v-text-field
+        v-model="api.path"
         outlined
         placeholder="http://example.com"
-        v-model="api.path"
-        dense class="flex-grow-1 ml-2 caption"></v-text-field>
+        dense
+        class="flex-grow-1 ml-2 caption"
+      />
     </div>
 
-
     <v-tabs
       v-model="tab"
       class="req-tabs"
       height="24"
     >
-      <v-tab v-ge="['api-client','params']" class="caption"><span class="text-capitalize"> Params&nbsp;<b
-        v-if="paramsCount"
-        class="green--text">({{ paramsCount }})</b></span>
+      <v-tab v-ge="['api-client','params']" class="caption">
+        <span class="text-capitalize"> Params&nbsp;<b
+          v-if="paramsCount"
+          class="green--text"
+        >({{ paramsCount }})</b></span>
       </v-tab>
-      <v-tab class="caption" v-ge="['api-client','headers']"><span class="text-capitalize">Headers&nbsp;<b
-        v-if="headersCount"
-        class="green--text">({{
+      <v-tab v-ge="['api-client','headers']" class="caption">
+        <span class="text-capitalize">Headers&nbsp;<b
+          v-if="headersCount"
+          class="green--text"
+        >({{
           headersCount
         }})</b></span>
       </v-tab>
-      <v-tab class="caption" v-ge="['api-client','body']"><span class="text-capitalize">Body</span></v-tab>
-      <v-tab class="caption" v-ge="['api-client','auth']"><span class="text-capitalize">Auth</span></v-tab>
+      <v-tab v-ge="['api-client','body']" class="caption">
+        <span class="text-capitalize">Body</span>
+      </v-tab>
+      <v-tab v-ge="['api-client','auth']" class="caption">
+        <span class="text-capitalize">Auth</span>
+      </v-tab>
       <v-tab-item>
-
-        <params v-model="api.parameters"
-                :env.sync="selectedEnv"
-        ></params>
+        <params
+          v-model="api.parameters"
+          :env.sync="selectedEnv"
+        />
       </v-tab-item>
       <v-tab-item>
-        <headers v-model="api.headers"
-                 :env.sync="selectedEnv"
-        ></headers>
+        <headers
+          v-model="api.headers"
+          :env.sync="selectedEnv"
+        />
       </v-tab-item>
       <v-tab-item>
         <monaco-json-editor
-          style="height: 250px"
-          class="editor card text-left"
-          theme="vs-dark"
           v-model="api.body"
-          lang="json"
-          :options="{validate:true,documentFormattingEdits:true,foldingRanges:true}"
-        >
-        </monaco-json-editor>
-
-      </v-tab-item>
-      <v-tab-item>
-        <monaco-json-editor
           style="height: 250px"
           class="editor card text-left"
           theme="vs-dark"
-          v-model="api.auth"
           lang="json"
           :options="{validate:true,documentFormattingEdits:true,foldingRanges:true}"
-        >
-        </monaco-json-editor>
+        />
+      </v-tab-item>
+      <v-tab-item>
+        <monaco-json-editor
+          v-model="api.auth"
+          style="height: 250px"
+          class="editor card text-left"
+          theme="vs-dark"
+          lang="json"
+          :options="{validate:true,documentFormattingEdits:true,foldingRanges:true}"
+        />
         <span class="caption grey--text">For more about auth option refer <a href="https://github.com/axios/axios#request-config" target="_blank">axios docs</a>.</span>
       </v-tab-item>
-
-
     </v-tabs>
   </div>
 </template>
 
 <script>
-import params from "../../../apiClient/params";
-import headers from "../../../apiClient/headers";
+import params from '../../../apiClient/params'
+import headers from '../../../apiClient/headers'
 
-import {MonacoJsonEditor} from "../../../monaco/index";
+import { MonacoJsonEditor } from '../../../monaco/index'
 
 export default {
-  tab:0,
-  props: {
-    value: Object
-  },
+  tab: 0,
+  name: 'HttpWebhook',
   components: {
     params,
     headers,
     MonacoJsonEditor
   },
-  name: "httpWebhook",
+  props: {
+    value: Object
+  },
   data: () => ({
     apiMethodMeta: {
       GET: {
@@ -110,7 +116,7 @@ export default {
       },
       PATCH: {
         color: 'info'
-      },
+      }
     },
     selectedEnv: 'dev',
     environmentList: ['dev'],
@@ -125,32 +131,31 @@ export default {
       response: {},
       perf: {},
       meta: {}
-    },
+    }
   }),
-  created() {
-    this.api = this.value || this.api;
+  computed: {
+
+    paramsCount () {
+      return this.api.parameters && this.api.parameters.filter(p => p.name && p.enabled).length
+    },
+    headersCount () {
+      return this.api.headers && this.api.headers.filter(h => h.name && h.enabled).length
+    }
   },
   watch: {
-    value() {
+    value () {
       if (this.api !== this.value) {
-        this.api = this.value || this.api;
+        this.api = this.value || this.api
       }
     },
     api: {
-      handler() {
+      handler () {
         this.$emit('input', this.api)
       }
     }
   },
-  computed: {
-
-    paramsCount() {
-      return this.api.parameters && this.api.parameters.filter(p => p.name && p.enabled).length;
-    },
-    headersCount() {
-
-      return this.api.headers && this.api.headers.filter(h => h.name && h.enabled).length;
-    },
+  created () {
+    this.api = this.value || this.api
   }
 }
 </script>