refactor(gui): linting

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

packages/nc-gui/components/project/functionTab/functionAcl.vue

@@ -1,104 +1,121 @@
 <template>
   <div>
-
     <v-toolbar flat height="42" class="toolbar-border-bottom">
       <v-toolbar-title>
-        <v-breadcrumbs :items="[{
-                text: this.nodes.env,
-                disabled: true,
-                href: '#'
-              },{
-                text: this.nodes.dbAlias,
-                disabled: true,
-                href: '#'
-              },
-              {
-                text: (nodes.function_name) + ' (ACL)',
-                disabled: true,
-                href: '#'
-              }]" divider=">" small>
-          <template v-slot:divider>
-            <v-icon small color="grey lighten-2">forward</v-icon>
+        <v-breadcrumbs
+          :items="[{
+                     text: nodes.env,
+                     disabled: true,
+                     href: '#'
+                   },{
+                     text: nodes.dbAlias,
+                     disabled: true,
+                     href: '#'
+                   },
+                   {
+                     text: (nodes.function_name) + ' (ACL)',
+                     disabled: true,
+                     href: '#'
+                   }]"
+          divider=">"
+          small
+        >
+          <template #divider>
+            <v-icon small color="grey lighten-2">
+              forward
+            </v-icon>
           </template>
         </v-breadcrumbs>
-
       </v-toolbar-title>
-      <v-spacer></v-spacer>
-      <x-btn outlined tooltip="Reload ACL"
-             color="primary"
-             small
-             @click="loadAcl"
-             v-ge="['acl','reload']"
+      <v-spacer />
+      <x-btn
+        v-ge="['acl','reload']"
+        outlined
+        tooltip="Reload ACL"
+        color="primary"
+        small
+        @click="loadAcl"
       >
-        <v-icon small left>refresh</v-icon>
+        <v-icon small left>
+          refresh
+        </v-icon>
         Reload
       </x-btn>
 
-      <x-btn outlined tooltip="Save Changes"
-             color="primary"
-             class="primary"
-             small
-             v-ge="['acl','save']"
-             @click="save"
-             :disabled="!edited"
+      <x-btn
+        v-ge="['acl','save']"
+        outlined
+        tooltip="Save Changes"
+        color="primary"
+        class="primary"
+        small
+        :disabled="!edited"
+        @click="save"
       >
-        <v-icon small left>save</v-icon>
+        <v-icon small left>
+          save
+        </v-icon>
         Save
       </x-btn>
-
     </v-toolbar>
 
-    <v-simple-table v-slot:default>
+    <v-simple-table>
       <thead>
-      <tr>
-        <th></th>
-        <th v-for="role in roles" :key="role">{{ role }}</th>
-      </tr>
+        <tr>
+          <th />
+          <th v-for="role in roles" :key="role">
+            {{ role }}
+          </th>
+        </tr>
       </thead>
       <tbody>
-      <tr>
-        <th>{{ nodes.function_name }}</th>
-        <th v-for="role in roles" :key="role" class="permission-checkbox-container">
-          <v-checkbox
-            @change="edited=true"
-            v-model="data[role]"
-            dense
-            hide-details
-          />
-        </th>
-      </tr>
+        <tr>
+          <th>{{ nodes.function_name }}</th>
+          <th v-for="role in roles" :key="role" class="permission-checkbox-container">
+            <v-checkbox
+              v-model="data[role]"
+              dense
+              hide-details
+              @change="edited=true"
+            />
+          </th>
+        </tr>
       </tbody>
     </v-simple-table>
-
-
   </div>
 </template>
 
 <script>
 export default {
-  name: "functionAcl",
+  name: 'FunctionAcl',
+  props: ['nodes'],
   data: () => ({
     loading: false,
     edited: false,
     data: null
   }),
-  async created() {
+  computed: {
+    roles () {
+      return this.data ? Object.keys(this.data) : []
+    }
+  },
+  async created () {
     await this.loadAcl()
   },
   methods: {
-    async loadAcl() {
-      this.loading = true;
+    async loadAcl () {
+      this.loading = true
       const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias
       }, 'xcAclGet', {
         name: this.nodes.function_name
-      }]);
-      this.data = JSON.parse(result.acl);
+      }])
+      this.data = JSON.parse(result.acl)
 
-      this.loading = false;
+      this.loading = false
     },
-    async save() {
+    async save () {
       try {
         await this.$store.dispatch('sqlMgr/ActSqlOp', [{
           env: this.nodes.env,
@@ -106,20 +123,14 @@ export default {
         }, 'xcAclSave', {
           name: this.nodes.function_name,
           acl: this.data
-        }]);
-        this.$toast.success('ACL saved successfully').goAway(3000);
-        this.edited = false;
+        }])
+        this.$toast.success('ACL saved successfully').goAway(3000)
+        this.edited = false
         await this.loadAcl()
       } catch (e) {
-        this.$toast.error('Some error occurred').goAway(3000);
+        this.$toast.error('Some error occurred').goAway(3000)
       }
     }
-  },
-  props: ['nodes'],
-  computed: {
-    roles() {
-      return this.data ? Object.keys(this.data) : []
-    }
   }
 }
 </script>

packages/nc-gui/components/project/functionTab/functionQuery.vue

@@ -2,29 +2,53 @@
   <v-container class="pa-0 ma-0" fluid>
     <v-toolbar flat height="42" class="toolbar-border-bottom">
       <v-toolbar-title>
-        <v-breadcrumbs :items="[{
-          text: this.nodes.env,
-          disabled: true,
-          href: '#'
-        },{
-          text: this.nodes.dbAlias,
-          disabled: true,
-          href: '#'
-        },
-        {
-          text: this.nodes.function_name + ' (function)',
-          disabled: true,
-          href: '#'
-        }]" divider=">" dark large light class="title">
-          <template v-slot:divider>
-            <v-icon small color="grey lighten-2">forward</v-icon>
+        <v-breadcrumbs
+          :items="[{
+                     text: nodes.env,
+                     disabled: true,
+                     href: '#'
+                   },{
+                     text: nodes.dbAlias,
+                     disabled: true,
+                     href: '#'
+                   },
+                   {
+                     text: nodes.function_name + ' (function)',
+                     disabled: true,
+                     href: '#'
+                   }]"
+          divider=">"
+          dark
+          large
+          light
+          class="title"
+        >
+          <template #divider>
+            <v-icon small color="grey lighten-2">
+              forward
+            </v-icon>
           </template>
         </v-breadcrumbs>
       </v-toolbar-title>
-      <v-spacer></v-spacer>
-      <x-btn outlined tooltip="Save Changes" small @click="applyChanges()" color="primary" icon="save">Save</x-btn>
-      <x-btn outlined tooltip="Delete Function" small color="error" @click="deleteFunction('showDialog')"
-             icon="mdi-delete-outline">
+      <v-spacer />
+      <x-btn
+        outlined
+        tooltip="Save Changes"
+        small
+        color="primary"
+        icon="save"
+        @click="applyChanges()"
+      >
+        Save
+      </x-btn>
+      <x-btn
+        outlined
+        tooltip="Delete Function"
+        small
+        color="error"
+        icon="mdi-delete-outline"
+        @click="deleteFunction('showDialog')"
+      >
         Delete Function
       </x-btn>
     </v-toolbar>
@@ -32,14 +56,13 @@
     <monaco-editor
       v-if="functionData.create_function != undefined"
       :code.sync="functionData.create_function"
-      cssStyle="height:400px">
-
-    </monaco-editor>
+      css-style="height:400px"
+    />
 
     <dlgLabelSubmitCancel
       v-if="dialogShow"
-      :dialogShow="dialogShow"
-      :actionsMtd="deleteFunction"
+      :dialog-show="dialogShow"
+      :actions-mtd="deleteFunction"
       heading="Click Submit to Delete the Function"
       type="error"
     />
@@ -47,35 +70,35 @@
 </template>
 
 <script>
-import {mapGetters, mapActions} from "vuex";
+import { mapGetters, mapActions } from 'vuex'
 
-import MonacoEditor from "../../monaco/Monaco";
-import dlgLabelSubmitCancel from "../../utils/dlgLabelSubmitCancel";
+import MonacoEditor from '../../monaco/Monaco'
+import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel'
 
-import {SqlUI} from '../../../helpers/SqlUiFactory';
+import { SqlUI } from '../../../helpers/SqlUiFactory'
 
 export default {
-  components: {MonacoEditor, dlgLabelSubmitCancel},
-  data() {
+  components: { MonacoEditor, dlgLabelSubmitCancel },
+  data () {
     return {
       functionData: {},
-      newFunction: this.nodes.newFunction ? true : false,
-      oldCreateFunction: "",
+      newFunction: !!this.nodes.newFunction,
+      oldCreateFunction: '',
       dialogShow: false
-    };
+    }
   },
   computed: {
-    ...mapGetters({sqlMgr: "sqlMgr/sqlMgr"})
+    ...mapGetters({ sqlMgr: 'sqlMgr/sqlMgr' })
   },
   methods: {
     ...mapActions({
-      loadFunctionsFromChildTreeNode: "project/loadFunctionsFromChildTreeNode",
+      loadFunctionsFromChildTreeNode: 'project/loadFunctionsFromChildTreeNode',
       loadFunctionsFromParentTreeNode:
-        "project/loadFunctionsFromParentTreeNode",
-      removeFunctionTab: "tabs/removeFunctionTab"
+        'project/loadFunctionsFromParentTreeNode',
+      removeFunctionTab: 'tabs/removeFunctionTab'
     }),
 
-    async handleKeyDown({metaKey, key, altKey, shiftKey, ctrlKey}) {
+    async handleKeyDown ({ metaKey, key, altKey, shiftKey, ctrlKey }) {
       console.log(metaKey, key, altKey, shiftKey, ctrlKey)
       // cmd + s -> save
       // cmd + l -> reload
@@ -85,35 +108,27 @@ export default {
 
       switch ([metaKey, key].join('_')) {
         case 'true_s' :
-          await this.applyChanges();
-          break;
+          await this.applyChanges()
+          break
         case 'true_l' :
           await this.loadFunction()
-          break;
+          break
         // case 'true_n' :
         //   this.addColumn();
         //   break;
         case 'true_d' :
-          await this.deleteFunction('showDialog');
-          break;
-
+          await this.deleteFunction('showDialog')
+          break
       }
     },
 
-    async loadFunction() {
-      try {
-
-      } catch (e) {
-        this.$toast.error('failed')
-        throw e;
-      }
-
+    async loadFunction () {
       if (this.newFunction) {
         this.functionData = {
           function_name: this.nodes.function_name,
-          create_function: ""
-        };
-        return;
+          create_function: ''
+        }
+        return
       }
       // const client = await this.sqlMgr.projectGetSqlClient({
       //   env: this.nodes.env,
@@ -129,135 +144,126 @@ export default {
       //   dbAlias: this.nodes.dbAlias
       // }, 'functionRead', { function_name: this.nodes.function_name})
 
-
       const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias
-      }, 'functionRead', { function_name: this.nodes.function_name}])
-
+      }, 'functionRead', { function_name: this.nodes.function_name }])
 
       // console.log("functionData read", result);
-      this.functionData = result.data.list[0];
-      this.oldCreateFunction = `${this.functionData.create_function}` + '';
+      this.functionData = result.data.list[0]
+      this.oldCreateFunction = `${this.functionData.create_function}` + ''
     },
-    async applyChanges() {
-
+    async applyChanges () {
       try {
         if (this.newFunction) {
-          let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
+          const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
             {
               env: this.nodes.env,
               dbAlias: this.nodes.dbAlias
             },
-            "functionCreate",
+            'functionCreate',
             {
               function_name: this.nodes.function_name,
               create_function: this.functionData.create_function
-            }]);
+            }])
           await this.loadFunctionsFromChildTreeNode({
             _nodes: {
               ...this.nodes
             }
-          });
-          console.log("create function result", result);
-          this.newFunction = false;
-          this.oldCreateFunction = `${this.functionData.create_function}` + '';
-          this.$toast.success('Function created successfully').goAway(3000);
+          })
+          console.log('create function result', result)
+          this.newFunction = false
+          this.oldCreateFunction = `${this.functionData.create_function}` + ''
+          this.$toast.success('Function created successfully').goAway(3000)
         } else {
-
-          const function_name = this.sqlUi.extractFunctionName(this.functionData.create_function);
-          if (!function_name) {
-            this.$toast.error('Invalid syntax, please check function name.').goAway(5000);
-            return;
+          const functionName = this.sqlUi.extractFunctionName(this.functionData.create_function)
+          if (!functionName) {
+            this.$toast.error('Invalid syntax, please check function name.').goAway(5000)
+            return
           }
 
-          let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
+          const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
             {
               env: this.nodes.env,
               dbAlias: this.nodes.dbAlias
             },
-            "functionUpdate",
+            'functionUpdate',
             {
-              function_name,
+              function_name: functionName,
               create_function: this.functionData.create_function,
               function_declaration: this.functionData.function_declaration,
               oldCreateFunction: this.oldCreateFunction
-            }]);
+            }])
 
-
-          this.oldCreateFunction = `${this.functionData.create_function}` + '';
-          console.log("update function result", result);
-          this.$toast.success('Function updated successfully').goAway(3000);
+          this.oldCreateFunction = `${this.functionData.create_function}` + ''
+          console.log('update function result', result)
+          this.$toast.success('Function updated successfully').goAway(3000)
         }
       } catch (e) {
-        this.$toast.error('Saving function failed').goAway(3000);
-        throw e;
+        this.$toast.error('Saving function failed').goAway(3000)
+        throw e
       }
     },
-    async deleteFunction(action = "") {
-
+    async deleteFunction (action = '') {
       try {
-        if (action === "showDialog") {
-          this.dialogShow = true;
-        } else if (action === "hideDialog") {
-          this.dialogShow = false;
+        if (action === 'showDialog') {
+          this.dialogShow = true
+        } else if (action === 'hideDialog') {
+          this.dialogShow = false
         } else {
-
-
-          let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
+          await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
             {
               env: this.nodes.env,
               dbAlias: this.nodes.dbAlias
             },
-            "functionDelete",
+            'functionDelete',
             {
               function_name: this.nodes.function_name,
               create_function: this.functionData.create_function,
-              function_declaration: this.functionData.function_declaration,
-            }]);
+              function_declaration: this.functionData.function_declaration
+            }])
 
           this.removeFunctionTab({
             env: this.nodes.env,
             dbAlias: this.nodes.dbAlias,
             function_name: this.nodes.function_name
-          });
+          })
           await this.loadFunctionsFromParentTreeNode({
             _nodes: {
               ...this.nodes
             }
-          });
-          this.dialogShow = false;
-          this.$toast.success('Function deleted successfully').goAway(3000);
+          })
+          this.dialogShow = false
+          this.$toast.success('Function deleted successfully').goAway(3000)
         }
       } catch (e) {
-        this.$toast.error('Deleting function failed').goAway(3000);
-        throw e;
+        this.$toast.error('Deleting function failed').goAway(3000)
+        throw e
       }
-
     }
   },
-  beforeCreated() {
+  beforeCreated () {
   },
-  created() {
-    this.sqlUi = SqlUI.create(this.nodes.dbConnection);
-  },
-  mounted() {
-    this.loadFunction();
-  },
-  beforeDestroy() {
-  },
-  destroy() {
-  },
-  validate({params}) {
-    return true;
-  },
-  head() {
-    return {};
-  },
-  props: ["nodes"],
   watch: {},
-  directives: {}
-};
+  created () {
+    this.sqlUi = SqlUI.create(this.nodes.dbConnection)
+  },
+  mounted () {
+    this.loadFunction()
+  },
+  beforeDestroy () {
+  },
+  destroy () {
+  },
+  directives: {},
+  validate ({ params }) {
+    return true
+  },
+  head () {
+    return {}
+  },
+  props: ['nodes']
+}
 </script>
 
 <style scoped>