refactor(gui): linting

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

packages/nc-gui/components/apiClient/headers.vue

@@ -1,66 +1,70 @@
 <template>
   <v-container fluid>
     <v-simple-table class="ignore-height-style" dense>
-      <template v-slot:default>
+      <template #default>
         <thead>
-        <tr>
-          <th class="text-left caption" width="5%"></th>
-          <th class="text-left caption">Header Name</th>
-          <th class="text-left caption">Value</th>
-          <th class="text-left caption" width="5%"></th>
-        </tr>
+          <tr>
+            <th class="text-left caption" width="5%" />
+            <th class="text-left caption">
+              Header Name
+            </th>
+            <th class="text-left caption">
+              Value
+            </th>
+            <th class="text-left caption" width="5%" />
+          </tr>
         </thead>
         <draggable v-if="value" v-model="headersList" tag="tbody">
           <tr v-for="(item,i) in headersList" :key="i">
-
             <td>
               <v-checkbox
+                v-model="item.enabled"
                 v-ge="['api-client-headers','enable']"
                 small
                 class="mt-0"
                 color="primary lighten-1"
                 hide-details
-                v-model="item.enabled" dense></v-checkbox>
+                dense
+              />
             </td>
             <td>
-
               <v-combobox
+                v-model="item.name"
                 v-ge="['api-client-headers','enable']"
                 class="body-2 caption"
                 :items="headerListAuto"
-                v-model="item.name"
                 :disabled="!item.enabled"
                 hide-details
                 single-line
                 dense
                 placeholder="Key"
                 @update:search-input="e => { if(i === value.length - 1 && e && e.length) value.push({name:'',value:'',
-          enabled:true}) }"
-              ></v-combobox>
-
+                                                                                                     enabled:true}) }"
+              />
             </td>
             <td style="height: auto">
-
               <xAutoComplete
+                v-model="item.value"
                 class="body-2 caption"
                 :disabled="!item.enabled"
-                v-model="item.value"
                 placeholder="Value"
                 hide-details
                 single-line
                 dense
                 :env="env"
-              ></xAutoComplete>
-
+              />
             </td>
             <td class="">
               <x-icon
                 v-ge="['api-client-headers','delete']"
                 color="error grey"
-                small @click="value.splice(i,1)" tooltip="Delete param">mdi-delete-outline
+                small
+                tooltip="Delete param"
+                @click="value.splice(i,1)"
+              >
+                mdi-delete-outline
               </x-icon>
             </td>
-
           </tr>
         </draggable>
       </template>
@@ -70,62 +74,63 @@
 
 <script>
 
-  import draggable from "vuedraggable";
+import draggable from 'vuedraggable'
 
-
-  export default {
-    data() {
-      return {
-        headerListAuto: ["A-IM", "Accept", "Accept-Charset", "Accept-Encoding", "Accept-Language", "Accept-Datetime", "Access-Control-Request-Method", "Access-Control-Request-Headers", "Authorization", "Cache-Control", "Connection", "Content-Length", "Content-Type", "Cookie", "Date", "Expect", "Forwarded", "From", "Host", "If-Match", "If-Modified-Since", "If-None-Match", "If-Range", "If-Unmodified-Since", "Max-Forwards", "Origin", "Pragma", "Proxy-Authorization", "Range", "Referer", "TE", "User-Agent", "Upgrade", "Via", "Warning", "Non-standard headers", "Dnt", "X-Requested-With", "X-CSRF-Token"]
-      };
-    },
-    methods: {},
-    computed: {
-      headersList: {
-        // two way binding(v-model)
-        get() {
-          return this.value
-        },
-        set(value) {
-          this.$emit('input', value)
-        }
+export default {
+  directives: {},
+  components: { draggable },
+  validate ({ params }) {
+    return true
+  },
+  props: { value: Array, env: String },
+  data () {
+    return {
+      headerListAuto: ['A-IM', 'Accept', 'Accept-Charset', 'Accept-Encoding', 'Accept-Language', 'Accept-Datetime', 'Access-Control-Request-Method', 'Access-Control-Request-Headers', 'Authorization', 'Cache-Control', 'Connection', 'Content-Length', 'Content-Type', 'Cookie', 'Date', 'Expect', 'Forwarded', 'From', 'Host', 'If-Match', 'If-Modified-Since', 'If-None-Match', 'If-Range', 'If-Unmodified-Since', 'Max-Forwards', 'Origin', 'Pragma', 'Proxy-Authorization', 'Range', 'Referer', 'TE', 'User-Agent', 'Upgrade', 'Via', 'Warning', 'Non-standard headers', 'Dnt', 'X-Requested-With', 'X-CSRF-Token']
+    }
+  },
+  head () {
+    return {}
+  },
+  computed: {
+    headersList: {
+      // two way binding(v-model)
+      get () {
+        return this.value
       },
-    },
-
-    beforeCreated() {
-    },
-    created() {
-      // keeps at least one param row
-      if (!this.value || !this.value.length) this.$emit('input', [{
+      set (value) {
+        this.$emit('input', value)
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        // keeps at least one param row
+        if (!val || !val.length) { this.$emit('input', [{ name: '', value: '', enabled: true }]) }
+      }
+    }
+  },
+  created () {
+    // keeps at least one param row
+    if (!this.value || !this.value.length) {
+      this.$emit('input', [{
         name: '',
         value: '',
         enabled: true
-      }]);
-    },
-    mounted() {
-    },
-    beforeDestroy() {
-    },
-    destroy() {
-    },
-    validate({params}) {
-      return true;
-    },
-    head() {
-      return {};
-    },
-    props: {'value': Array, env: String},
-    watch: {
-      value: {
-        handler(val) {
-          // keeps at least one param row
-          if (!val || !val.length) this.$emit('input', [{name: '', value: '', enabled: true}]);
-        }
-      },
-    },
-    directives: {},
-    components: {draggable}
-  };
+      }])
+    }
+  },
+  mounted () {
+  },
+  beforeDestroy () {
+  },
+  methods: {},
+
+  beforeCreated () {
+  },
+  destroy () {
+  }
+}
 </script>
 
 <style scoped>

packages/nc-gui/components/apiClient/params.vue

@@ -1,63 +1,70 @@
 <template>
   <v-container fluid>
     <v-simple-table class="ignore-height-style params-table" style="" dense>
-      <template v-slot:default>
+      <template #default>
         <thead>
-        <tr>
-          <th class="text-left caption" width="5%"></th>
-          <th class="text-left caption grey--text" width="40%">Param Name</th>
-          <th class="text-left caption grey--text" width="40%">Value</th>
-          <th class="text-left caption" width="5%"></th>
-        </tr>
+          <tr>
+            <th class="text-left caption" width="5%" />
+            <th class="text-left caption grey--text" width="40%">
+              Param Name
+            </th>
+            <th class="text-left caption grey--text" width="40%">
+              Value
+            </th>
+            <th class="text-left caption" width="5%" />
+          </tr>
         </thead>
         <!--        <tbody>-->
         <draggable v-if="value" v-model="paramList" tag="tbody">
           <tr v-for="(item,i) in paramList" :key="i">
-
             <td>
               <v-checkbox
+                v-model="item.enabled"
                 v-ge="['api-client-params','enable']"
                 small
                 class="mt-0 caption"
                 color="primary lighten-1"
                 hide-details
-                v-model="item.enabled" dense></v-checkbox>
+                dense
+              />
             </td>
             <td>
-
               <xAutoComplete
+                v-model="item.name"
                 class="body-2 caption"
                 :disabled="!item.enabled"
-                v-model="item.name"
-                @input="() => { if(i === value.length - 1 && item.name.length) value.push({name:'',value:'',
-          enabled:true}) }"
                 placeholder="Key"
                 hide-details
                 single-line
                 dense
                 :env="env"
-              ></xAutoComplete>
+                @input="() => { if(i === value.length - 1 && item.name.length) value.push({name:'',value:'',
+                                                                                           enabled:true}) }"
+              />
             </td>
             <td style="height: auto">
               <xAutoComplete
-                class="body-2 caption"
                 v-model="item.value"
+                class="body-2 caption"
                 :disabled="!item.enabled"
                 :placeholder="item.description || 'Value'"
                 hide-details
                 single-line
                 dense
                 :env="env"
-              ></xAutoComplete>
+              />
             </td>
             <td class="">
               <x-icon
                 v-ge="['api-client-params','delete']"
                 color="error grey"
-                small @click="value.splice(i,1)" tooltip="Delete param">mdi-delete-outline
+                small
+                tooltip="Delete param"
+                @click="value.splice(i,1)"
+              >
+                mdi-delete-outline
               </x-icon>
             </td>
-
           </tr>
         </draggable>
       </template>
@@ -67,60 +74,61 @@
 
 <script>
 
-  import draggable from "vuedraggable";
+import draggable from 'vuedraggable'
 
-
-  export default {
-    data() {
-      return {};
-    },
-    methods: {},
-    computed: {
-      paramList: {
-        // two way binding(v-model)
-        get() {
-          return this.value
-        },
-        set(value) {
-          this.$emit('input', value)
-        }
+export default {
+  directives: {},
+  components: { draggable },
+  validate ({ params }) {
+    return true
+  },
+  props: { value: Array, env: String },
+  data () {
+    return {}
+  },
+  head () {
+    return {}
+  },
+  computed: {
+    paramList: {
+      // two way binding(v-model)
+      get () {
+        return this.value
       },
-    },
-
-    beforeCreated() {
-    },
-    created() {
-      // creating value if not exist
-      if (!this.value || !this.value.length) this.$emit('input', [{
+      set (value) {
+        this.$emit('input', value)
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        // keeps at least one param row
+        if (!val || !val.length) { this.$emit('input', [{ name: '', value: '', enabled: true }]) }
+      }
+    }
+  },
+  created () {
+    // creating value if not exist
+    if (!this.value || !this.value.length) {
+      this.$emit('input', [{
         name: '',
         value: '',
         enabled: true
-      }]);
-    },
-    mounted() {
-    },
-    beforeDestroy() {
-    },
-    destroy() {
-    },
-    validate({params}) {
-      return true;
-    },
-    head() {
-      return {};
-    },
-    props: {'value': Array, env: String},
-    watch: {
-      value: {
-        handler(val) {
-          // keeps at least one param row
-          if (!val || !val.length) this.$emit('input', [{name: '', value: '', enabled: true}]);
-        }
-      },
-    },
-    directives: {},
-    components: {draggable}
-  };
+      }])
+    }
+  },
+  mounted () {
+  },
+  beforeDestroy () {
+  },
+  methods: {},
+
+  beforeCreated () {
+  },
+  destroy () {
+  }
+}
 </script>
 
 <style scoped>

packages/nc-gui/components/apiClient/perfTest.vue

@@ -1,106 +1,113 @@
 <template>
   <v-container fluid>
-    <v-simple-table dense class="ignore-height-style params-table" style="" dense>
-      <template v-slot:default>
+    <v-simple-table dense class="ignore-height-style params-table" style="">
+      <template #default>
         <thead>
-        <tr>
-          <th class="text-left body-2 grey--text" width="40%">Param Name</th>
-          <th class="text-left body-2 grey--text" width="40%">Value</th>
-
-        </tr>
+          <tr>
+            <th class="text-left body-2 grey--text" width="40%">
+              Param Name
+            </th>
+            <th class="text-left body-2 grey--text" width="40%">
+              Value
+            </th>
+          </tr>
         </thead>
         <tbody>
-
-        <tr>
-
-          <td>
-            Connections
-          </td>
-          <td>
-            <v-text-field
-            placeholder="Enter a number"
-              hide-details
-              single-line
-              dense class="body-2" type="number" @input="$emit('input', perf)"
-              v-model="perf.connections"></v-text-field>
-
-          </td>
-
-        </tr>
-        <tr>
-
-          <td>
-            Pipeline
-          </td>
-          <td>
-            <v-text-field
-            placeholder="Enter a number"
-              hide-details
-              single-line
-              dense class="body-2" type="number" @input="$emit('input', perf)" v-model="perf.pipelining"></v-text-field>
-
-
-          </td>
-
-        </tr>
-        <tr>
-
-          <td>
-            Duration
-          </td>
-          <td>
-            <v-text-field
-            placeholder="Duration in seconds"
-              hide-details
-              single-line
-              dense class="body-2" type="number" @input="$emit('input', perf)" v-model="perf.duration"></v-text-field>
-
-
-          </td>
-
-        </tr>
+          <tr>
+            <td>
+              Connections
+            </td>
+            <td>
+              <v-text-field
+                v-model="perf.connections"
+                placeholder="Enter a number"
+                hide-details
+                single-line
+                dense
+                class="body-2"
+                type="number"
+                @input="$emit('input', perf)"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Pipeline
+            </td>
+            <td>
+              <v-text-field
+                v-model="perf.pipelining"
+                placeholder="Enter a number"
+                hide-details
+                single-line
+                dense
+                class="body-2"
+                type="number"
+                @input="$emit('input', perf)"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Duration
+            </td>
+            <td>
+              <v-text-field
+                v-model="perf.duration"
+                placeholder="Duration in seconds"
+                hide-details
+                single-line
+                dense
+                class="body-2"
+                type="number"
+                @input="$emit('input', perf)"
+              />
+            </td>
+          </tr>
         </tbody>
-
-
       </template>
     </v-simple-table>
-<div class="pa-1 text-right">
+    <div class="pa-1 text-right">
+      <p class="grey--text caption">
+        We are using <a
+          v-ge="['api-client-perf-test','autocannon-link']"
+          @click="open('https://github.com/mcollina/autocannon')"
+        >autocannon</a>
+      </p>
 
-  <p class="grey--text caption">We are using <a
-    v-ge="['api-client-perf-test','autocannon-link']" @click="open('https://github.com/mcollina/autocannon')">autocannon</a></p>
-
-    <v-btn  v-ge="['api-client-perf-test','clear']" outlined x-small @click="$emit('input',{})" color="warning"> Clear All Fields</v-btn>
-
-</div>
+      <v-btn v-ge="['api-client-perf-test','clear']" outlined x-small color="warning" @click="$emit('input',{})">
+        Clear All Fields
+      </v-btn>
+    </div>
   </v-container>
 </template>
 
 <script>
 
-  // const {shell} = require("electron").remote.require(
-  //   "./libs"
-  // );
-  export default {
-    name: "perfTest",
-    props: {
-      value: Object
-    },
-    computed: {
-      perf: {
-        get() {
-          return {...(this.value || {})};
-        },
-        set(value) {
-          this.$emit('input', value)
-        }
+// const {shell} = require("electron").remote.require(
+//   "./libs"
+// );
+export default {
+  name: 'PerfTest',
+  props: {
+    value: Object
+  },
+  computed: {
+    perf: {
+      get () {
+        return { ...(this.value || {}) }
       },
-    },
-    methods:{
-      open(url){
-        shell.openExternal(url);
+      set (value) {
+        this.$emit('input', value)
       }
     }
+  },
+  methods: {
+    open (url) {
+      // shell.openExternal(url)
+    }
   }
+}
 </script>
 
 <style scoped>