refactor(gui): linting

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

packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableRelations.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
     <v-toolbar flat height="60" class="toolbar-border-bottom">
-
-
       <v-text-field
         v-model="search"
         label="Search"
@@ -11,70 +9,90 @@
         outlined
         hide-details
         prepend-inner-icon="search"
-      ></v-text-field>
+      />
 
-      <v-spacer></v-spacer>
-      <x-btn outlined tooltip="Reload list" small @click
-             color="primary"
-             @click="loadRelations"
-             icon="refresh"
-             btn.class="text-capitalize"
-      >Reload
+      <v-spacer />
+      <x-btn
+        outlined
+        tooltip="Reload list"
+        small
+        color="primary"
+        icon="refresh"
+        btn.class="text-capitalize"
+        @click="loadRelations"
+      >
+        Reload
       </x-btn>
-      <x-btn outlined tooltip="Toggle All" small @click
-             color="primary"
-             @click="toggleAll(toggle)"
-             btn.class="text-capitalize" icon="mdi-check-bold">Toggle All {{ toggle ? 'ON' : 'OFF' }}
-
+      <x-btn
+        outlined
+        tooltip="Toggle All"
+        small
+        color="primary"
+        btn.class="text-capitalize"
+        icon="mdi-check-bold"
+        @click="toggleAll(toggle)"
+      >
+        Toggle All {{ toggle ? 'ON' : 'OFF' }}
       </x-btn>
-      <x-btn outlined tooltip="Save Changes"
-             small
-             @click="save"
-             :disabled="!edited"
-             :loading="updating"
-             btn.class="text-capitalize"
-             color="primary" icon="save">Save
+      <x-btn
+        outlined
+        tooltip="Save Changes"
+        small
+        :disabled="!edited"
+        :loading="updating"
+        btn.class="text-capitalize"
+        color="primary"
+        icon="save"
+        @click="save"
+      >
+        Save
       </x-btn>
-
     </v-toolbar>
     <div class="d-flex justify-center">
-      <v-skeleton-loader v-if="loading"
-                         type="table"
-                         class="flex-shrink-1"
-                         style="min-width:75%"
-      ></v-skeleton-loader>
-      <v-data-table dense v-else
-                    class="flex-shrink-1"
-                    style="min-width:75%"
-                    :headers="[{},{},{},{value:'tn'},{value:'rtn'},{}]"
-                    hide-default-header
-                    :items="relations" :search="search"
+      <v-skeleton-loader
+        v-if="loading"
+        type="table"
+        class="flex-shrink-1"
+        style="min-width:75%"
+      />
+      <v-data-table
+        v-else
+        dense
+        class="flex-shrink-1"
+        style="min-width:75%"
+        :headers="[{},{},{},{value:'tn'},{value:'rtn'},{}]"
+        hide-default-header
+        :items="relations"
+        :search="search"
       >
-        <template v-slot:header="{props:{headers}}">
+        <template #header>
           <thead>
-          <tr class="text-left caption">
-            <th>#</th>
-            <th>Table Name <span class="caption grey--text">({{ selectedCount }})</span></th>
-            <th>Relation</th>
-            <th>Parent</th>
-            <th>Child</th>
-            <th></th>
-          </tr>
+            <tr class="text-left caption">
+              <th>#</th>
+              <th>Table Name <span class="caption grey--text">({{ selectedCount }})</span></th>
+              <th>Relation</th>
+              <th>Parent</th>
+              <th>Child</th>
+              <th />
+            </tr>
           </thead>
         </template>
 
-
-        <template v-slot:item="{item,index}">
+        <template #item="{item,index}">
           <tr class="caption">
-
             <td>{{ index + 1 }}</td>
             <td>{{ item.relationType === 'hm' ? item.rtn : item.tn }}</td>
             <td>{{ item.relationType === 'hm' ? 'HasMany' : 'BelongsTo' }}</td>
             <td>{{ item.rtn }}</td>
             <td>{{ item.tn }}</td>
             <td>
-              <v-checkbox v-model="item.enabled" @change="$set(item,'edited',true)" class="" dense
-                          hide-details></v-checkbox>
+              <v-checkbox
+                v-model="item.enabled"
+                class=""
+                dense
+                hide-details
+                @change="$set(item,'edited',true)"
+              />
             </td>
           </tr>
         </template>
@@ -85,7 +103,8 @@
 
 <script>
 export default {
-  name: "disableOrEnableRelations",
+  name: 'DisableOrEnableRelations',
+  props: ['nodes', 'dbAlias'],
   data: () => ({
     loading: true,
     toggle: true,
@@ -93,57 +112,56 @@ export default {
     relations: [],
     search: ''
   }),
+  computed: {
+    selectedCount () {
+      return `${this.relations.filter(({ enabled }) => enabled).length}/${this.relations.length}`
+    },
+    edited () {
+      return this.relations.some(({ edited }) => edited)
+    }
+  },
+  async created () {
+    await this.loadRelations()
+  },
   methods: {
-    async loadRelations() {
-      this.loading = true;
+    async loadRelations () {
+      this.loading = true
       try {
         this.relations = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
           dbAlias: this.dbAlias,
           env: this.$store.getters['project/GtrEnv']
-        }, 'xcRelationsGet']);
+        }, 'xcRelationsGet'])
       } catch (e) {
-        console.log(e);
+        console.log(e)
       }
-      this.loading = false;
+      this.loading = false
     },
-    toggleAll(toggle) {
-      this.toggle = !toggle;
-      for (let rel of this.relations) {
-        this.$set(rel, 'edited', rel.edited || rel.enabled !== toggle);
-        this.$set(rel, 'enabled', toggle);
+    toggleAll (toggle) {
+      this.toggle = !toggle
+      for (const rel of this.relations) {
+        this.$set(rel, 'edited', rel.edited || rel.enabled !== toggle)
+        this.$set(rel, 'enabled', toggle)
       }
     },
-    async save() {
-      const editedRelations = this.relations.filter(({edited}) => edited);
-      this.updating = true;
+    async save () {
+      const editedRelations = this.relations.filter(({ edited }) => edited)
+      this.updating = true
       try {
         await this.$store.dispatch('sqlMgr/ActSqlOp', [{
           dbAlias: this.dbAlias,
           env: this.$store.getters['project/GtrEnv']
-        }, 'xcRelationsSet', editedRelations]);
-        this.$toast.success('Relations enabled/disabled successfully').goAway(3000);
+        }, 'xcRelationsSet', editedRelations])
+        this.$toast.success('Relations enabled/disabled successfully').goAway(3000)
         for (const rel of this.relations) {
           this.$set(rel, 'edited', false)
         }
       } catch (e) {
-        this.$toast[e.response?.status === 402 ? 'info' : 'error'](e.message).goAway(3000);
-        console.log(e.message);
+        this.$toast[e.response?.status === 402 ? 'info' : 'error'](e.message).goAway(3000)
+        console.log(e.message)
       }
-      this.updating = false;
+      this.updating = false
     }
-  },
-  computed: {
-    selectedCount() {
-      return `${this.relations.filter(({enabled}) => enabled).length}/${this.relations.length}`
-    },
-    edited() {
-      return this.relations.some(({edited}) => edited);
-    }
-  },
-  async created() {
-    await this.loadRelations();
-  },
-  props: ['nodes', 'dbAlias']
+  }
 }
 </script>