refactor(gui): linting

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

packages/nc-gui/components/apiOverlay.vue

@@ -1,24 +1,36 @@
 <template>
-  <v-overlay absolute color="grey" opacity="0.4"
-             class="create-project-overlay">
+  <v-overlay
+    absolute
+    color="grey"
+    opacity="0.4"
+    class="create-project-overlay"
+  >
     <div>
       <v-card dark style="width: 100%; max-height:100%;overflow: auto">
         <v-container v-if="databaseCount" fluid style="min-height:200px;">
           <!--                    <v-row class="text-center">-->
           <!--                      <v-col cols="12">-->
           <v-card class="pa-2 text-center elevation-10" dark>
-            <h3 class="title mb-3 mt-4">APIs Generated</h3>
-            <p><span class="display-3 font-weight-bold">{{ apisCount }}</span><br>
-              <span class="subtitle grey--text text--lighten-1">within {{ timeTaken }} seconds</span></p>
+            <h3 class="title mb-3 mt-4">
+              APIs Generated
+            </h3>
+            <p>
+              <span class="display-3 font-weight-bold">{{ apisCount }}</span><br>
+              <span class="subtitle grey--text text--lighten-1">within {{ timeTaken }} seconds</span>
+            </p>
           </v-card>
           <!--                      </v-col>-->
           <!--                    </v-row>-->
           <v-row>
             <v-col>
               <v-card dark class=" elevation-10">
-                <v-card-text class="pb-0 font-weight-bold"># Databases</v-card-text>
+                <v-card-text class="pb-0 font-weight-bold">
+                  # Databases
+                </v-card-text>
                 <v-card-text class="display-1 white--text">
-                  <v-icon class="mt-n2 mr-1" color="info">mdi-database-sync</v-icon>
+                  <v-icon class="mt-n2 mr-1" color="info">
+                    mdi-database-sync
+                  </v-icon>
 
                   {{ upCount }} / {{ databaseCount }}
                 </v-card-text>
@@ -26,27 +38,39 @@
             </v-col>
             <v-col>
               <v-card dark class=" elevation-10">
-                <v-card-text class="pb-0 font-weight-bold"># Tables</v-card-text>
+                <v-card-text class="pb-0 font-weight-bold">
+                  # Tables
+                </v-card-text>
                 <v-card-text class="display-1 white--text">
-                  <v-icon class="mr-1 mt-n1 " color="info">mdi-table-large</v-icon>
+                  <v-icon class="mr-1 mt-n1 " color="info">
+                    mdi-table-large
+                  </v-icon>
                   {{ tablesCount }}
                 </v-card-text>
               </v-card>
             </v-col>
             <v-col>
               <v-card dark class=" elevation-10">
-                <v-card-text class="pb-0 font-weight-bold">Time Saved in Dev Hours</v-card-text>
+                <v-card-text class="pb-0 font-weight-bold">
+                  Time Saved in Dev Hours
+                </v-card-text>
                 <v-card-text class="display-1 white--text">
-                  <v-icon class="mr-1 mt-n1" color="secondary">mdi-clock-fast</v-icon>
+                  <v-icon class="mr-1 mt-n1" color="secondary">
+                    mdi-clock-fast
+                  </v-icon>
                   {{ hoursSaved }}
                 </v-card-text>
               </v-card>
             </v-col>
             <v-col>
               <v-card dark class=" elevation-10">
-                <v-card-text class="pb-0 font-weight-bold">Cost Saved</v-card-text>
+                <v-card-text class="pb-0 font-weight-bold">
+                  Cost Saved
+                </v-card-text>
                 <v-card-text class="display-1 white--text">
-                  <v-icon color="success" class="mt-n2 mr-1">mdi-currency-usd-circle-outline</v-icon>
+                  <v-icon color="success" class="mt-n2 mr-1">
+                    mdi-currency-usd-circle-outline
+                  </v-icon>
                   {{ cost }}
                 </v-card-text>
               </v-card>
@@ -54,20 +78,24 @@
           </v-row>
           <!--                    <v-divider class="my-3 "></v-divider>-->
           <div class="text-center">
-            <v-btn v-if="completed" class="my-2 mx-auto" color="primary" x-large to="/xc">Goto Dashboard</v-btn>
+            <v-btn v-if="completed" class="my-2 mx-auto" color="primary" x-large to="/xc">
+              Goto Dashboard
+            </v-btn>
           </div>
 
-
           <v-card dark class=" elevation-10">
-            <p class="title text-center pt-2">List of Databases</p>
-            <v-simple-table style="width: 100%" v-if="rowsCount">
+            <p class="title text-center pt-2">
+              List of Databases
+            </p>
+            <v-simple-table v-if="rowsCount" style="width: 100%">
               <tr v-for="(_,i) in new Array(rowsCount)" :key="i">
                 <td v-for="db in databaseList.slice(i * 5 , (i + 1) * 5)" :key="db" class="py-2 px-3">
                   <div class="d-flex">
-                    <v-icon :color="db in data ?'green' : 'orange'" x-small class="mr-2">mdi-moon-full</v-icon>
+                    <v-icon :color="db in data ?'green' : 'orange'" x-small class="mr-2">
+                      mdi-moon-full
+                    </v-icon>
                     <span class="caption">{{ db }}</span>
-                    <v-spacer></v-spacer>
-
+                    <v-spacer />
                   </div>
                 </td>
               </tr>
@@ -81,7 +109,10 @@
 
 <script>
 export default {
-  name: "apiOverlay",
+  name: 'ApiOverlay',
+  props: {
+    projectCreated: Boolean
+  },
   data: () => ({
     client: null,
     data: {},
@@ -93,79 +124,73 @@ export default {
     completed: false,
     perHourCost: 35,
     apisPerHour: 2,
-    apis: 0,
+    apis: 0
   }),
-  props: {
-    projectCreated: Boolean
+  computed: {
+    rowsCount () {
+      return this.databaseList ? Math.ceil(this.databaseList.length / 5) : 0
+    },
+    databaseCount () {
+      return this.databaseList ? this.databaseList.length : 0
+    },
+    cost () {
+      if (!this.apis) { return 0 }
+
+      const cost = Math.round(this.perHourCost * (this.apis / this.apisPerHour))
+
+      return (cost + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')
+    },
+    hoursSaved () {
+      if (!this.apis) { return 0 }
+
+      const hours = Math.round(this.apis / this.apisPerHour)
+
+      return (hours + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')
+    }
   },
-  created() {
-    this.initSocketClient();
+  created () {
+    this.initSocketClient()
   },
-  beforeDestroy() {
+  beforeDestroy () {
     if (this.client) {
       this.client.disconnect()
     }
   },
-  computed: {
-    rowsCount() {
-      return this.databaseList ? Math.ceil(this.databaseList.length / 5) : 0;
-    },
-    databaseCount() {
-      return this.databaseList ? this.databaseList.length : 0;
-    },
-    cost() {
-      if (!this.apis) return 0;
-
-      const cost = Math.round(this.perHourCost * (this.apis / this.apisPerHour));
-
-      return (cost + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')
-
-    },
-    hoursSaved() {
-      if (!this.apis) return 0;
-
-      const hours = Math.round(this.apis / this.apisPerHour);
-
-      return (hours + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')
-
-    }
-  },
   methods: {
-    initSocketClient() {
+    initSocketClient () {
       try {
-        this.client = require('socket.io-client')(`ws://${window.location.hostname}:8083`);
-        const self = this;
-        let toast;
+        this.client = require('socket.io-client')(`ws://${window.location.hostname}:8083`)
+        const self = this
+        let toast
         this.client.on('server-to-client', (data) => {
           // console.log('=========== server-to-client ========', data);
 
-          self.$set(self.data, data.data.info.databaseName, data.data.info);
+          self.$set(self.data, data.data.info.databaseName, data.data.info)
 
-          self.upCount = data.data.startedBuildersCount;
+          self.upCount = data.data.startedBuildersCount
 
-          self.tablesCount = (data.data.aggregatedInfo[1] + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,');
-          self.apis = data.data.aggregatedInfo[4];
-          self.apisCount = (data.data.aggregatedInfo[4] + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,');
+          self.tablesCount = (data.data.aggregatedInfo[1] + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')
+          self.apis = data.data.aggregatedInfo[4]
+          self.apisCount = (data.data.aggregatedInfo[4] + '').replace(/\d(?=(?:\d{3})+$)/g, '$&,')
 
-
-          self.timeTaken = data.data.aggregatedInfo[5];
+          self.timeTaken = data.data.aggregatedInfo[5]
 
           if ((!self.databaseList || !self.databaseList.length) && data.databaseList) {
-            self.databaseList = data.databaseList;
+            self.databaseList = data.databaseList
           }
 
           if (!toast) {
             toast = self.$toast.info('', {
-              position: 'bottom-center',
-            });
+              position: 'bottom-center'
+            })
           }
 
-          toast.text(`APIs created for ${data.data.info.databaseName}`);
+          toast.text(`APIs created for ${data.data.info.databaseName}`)
 
-          this.completed = self.databaseList.length === data.data.startedBuildersCount;
-        });
-      }catch (e){console.log('demo-error')}
-    },
+          this.completed = self.databaseList.length === data.data.startedBuildersCount
+        })
+      } catch (e) { console.log('demo-error') }
+    }
   }
 }
 </script>
@@ -178,7 +203,6 @@ export default {
   padding: 10px;
 }
 
-
 /deep/ .v-overlay__content > div {
   overflow: auto;
   height: 100%;