refactor(gui): linting

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

packages/nc-gui/components/project/tableTabs/tableAcl.vue

@@ -1,213 +1,264 @@
 <template>
   <div class="h-100">
-
-
     <v-card style="" class="h-100">
       <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._tn  || nodes.view_name|| nodes.tn) + ' (RBAC)',
-                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._tn || nodes.view_name|| nodes.tn) + ' (RBAC)',
+                       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 RBAC"
-               color="primary"
-               small
-               @click="load"
-               v-ge="['acl','reload']"
+        <v-spacer />
+        <x-btn
+          v-ge="['acl','reload']"
+          outlined
+          tooltip="Reload RBAC"
+          color="primary"
+          small
+          @click="load"
         >
-          <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>
 
+      <p class="title mt-6 mb-6">
+        Table : <span class="text-capitalize">{{ nodes._tn || nodes.view_name }}</span><br>
+        <span class="font-weight-thin">Role Based Access Control (RBAC) For Columns</span>
+      </p>
 
-      <p class="title mt-6 mb-6"> Table : <span class="text-capitalize">{{ nodes._tn  || nodes.view_name }}</span><br>
-        <span class="font-weight-thin">Role Based Access Control (RBAC) For Columns</span></p>
-
-
-
-      <v-skeleton-loader v-if="loading || !data" type="table">
-
-      </v-skeleton-loader>
-
-      <div v-else  class="pb-10">
-        <v-overlay absolute v-model="showCustomAcl">
-          <template v-slot:default>
-            <v-card :light="!$store.state.windows.darkTheme" class="ma-2" style="max-height: 100%; overflow: auto; min-height:70vh">
+      <v-skeleton-loader v-if="loading || !data" type="table" />
 
+      <div v-else class="pb-10">
+        <v-overlay v-model="showCustomAcl" absolute>
+          <template #default>
+            <v-card
+              :light="!$store.state.windows.darkTheme"
+              class="ma-2"
+              style="max-height: 100%; overflow: auto; min-height:70vh"
+            >
               <v-card-actions>
-                <p class="body-1 mb-0 mr-2">Custom Rules : {{ custoAclTitle[0] }}<span class="grey--text caption">(table)</span>
+                <p class="body-1 mb-0 mr-2">
+                  Custom Rules : {{ custoAclTitle[0] }}<span class="grey--text caption">(table)</span>
                   > {{ custoAclTitle[1] }}<span class="grey--text caption">(role)</span> > {{ custoAclTitle[2] }}<span
-                    class="grey--text caption">(operation)</span></p>
-                <v-spacer>
-                </v-spacer>
+                    class="grey--text caption"
+                  >(operation)</span>
+                </p>
+                <v-spacer />
                 <v-btn
                   outlined
                   small
                   @click="showCustomAcl=false"
-                >Cancel
+                >
+                  Cancel
                 </v-btn>
                 <v-btn
                   outlined
                   color="primary"
                   small
                   @click="save"
-                >Save
+                >
+                  Save
                 </v-btn>
               </v-card-actions>
               <v-card-text>
-                <custom-acl :nodes="nodes" :table="nodes.tn || nodes.view_name"
-                            v-model="customAcl"></custom-acl>
+                <custom-acl
+                  v-model="customAcl"
+                  :nodes="nodes"
+                  :table="nodes.tn || nodes.view_name"
+                />
               </v-card-text>
-
             </v-card>
           </template>
         </v-overlay>
-        <v-simple-table dense v-slot:default class=" mx-10">
+        <v-simple-table dense class=" mx-10">
           <thead>
-          <tr>
-            <th rowspan="2" class="text-center">
-              <!--            <div class="d-flex justify-center align-end">-->
-              <!--              <v-checkbox dense v-model="aclAll"></v-checkbox>-->
+            <tr>
+              <th rowspan="2" class="text-center">
+                <!--            <div class="d-flex justify-center align-end">-->
+                <!--              <v-checkbox dense v-model="aclAll"></v-checkbox>-->
 
-              <span>Columns x RBAC</span>
-    <!--          <v-text-field dense hide-details class="my-2 caption font-weight-regular"
-                                                              flat
-                                                              outlined
-                                                              :placeholder="`Search columns in '${nodes._tn|| nodes.view_name}'`"
-                                                              prepend-inner-icon="search" v-model="search"
-            ></v-text-field>-->
+                <span>Columns x RBAC</span>
+              <!--          <v-text-field dense hide-details class="my-2 caption font-weight-regular"
+                                                            flat
+                                                            outlined
+                                                            :placeholder="`Search columns in '${nodes._tn|| nodes.view_name}'`"
+                                                            prepend-inner-icon="search" v-model="search"
+          ></v-text-field>-->
               <!--            </div>-->
-            </th>
-            <th :colspan="operations.length" class="text-center"
-                v-for="role in roles" :key="role" v-if="role !== 'creator'">{{ role }}
-            </th>
-          </tr>
-          <tr>
-            <template v-for="role in roles" v-if="role !== 'creator'">
-              <th v-for="op in operations" :class="` pa-0 caption text-capitalize ${op.color}--text`"
-                  class="permission role-op-header"
-                  :key="`${role}-${op.name}--11`"
-              >
+              </th>
+              <template v-for="role in roles">
+                <th
+                  v-if="role !== 'creator'"
+                  :key="role"
+                  :colspan="operations.length"
+                  class="text-center"
+                >
+                  {{ role }}
+                </th>
+              </template>
+            </tr>
+            <tr>
+              <template v-for="role in roles">
+                <template v-if="role !== 'creator'">
+                  <th
+                    v-for="op in operations"
+                    :key="`${role}-${op.name}--11`"
+                    :class="` pa-0 caption text-capitalize ${op.color}--text`"
+                    class="permission role-op-header"
+                  >
+                    <v-tooltip bottom>
+                      <template #activator="{on}">
+                        <div class="d-flex flex-column justify-center align-center d-100 h-100 mt-0" v-on="on">
+                          <v-checkbox
+                            v-model="aclRoleOpAll[`${role}___${op.name}`]"
+                            hide-details
+                            class="mt-n1"
+                            dense
+                            :color="op.color"
+                            @change="onAclRoleOpAllChange(aclRoleOpAll[`${role}___${op.name}`],`${role}___${op.name}`)"
+                          />
+                          <span>{{ op.name }}</span>
+                        </div>
+                      </template>
+                      <span class="caption"><span
+                        class="text-capitalize"
+                      >{{
+                        role
+                      }}</span> {{ aclRoleOpAll[`${role}___${op.name}`] ? 'can' : 'can\'t' }} {{
+                        op.name
+                      }} '{{ nodes.tn }}' rows</span>
+                    </v-tooltip>
 
-                <v-tooltip bottom>
-                  <template v-slot:activator="{on}">
-                    <div class="d-flex flex-column justify-center align-center d-100 h-100 mt-0" v-on="on">
-                      <v-checkbox
-                        hide-details
-                        class="mt-n1" dense v-model="aclRoleOpAll[`${role}___${op.name}`]"
-                                  @change="onAclRoleOpAllChange(aclRoleOpAll[`${role}___${op.name}`],`${role}___${op.name}`)"
-                                  :color="op.color"></v-checkbox>
-                      <span>{{ op.name }}</span>
-                    </div>
-                  </template>
-                  <span class="caption"><span
-                    class="text-capitalize">{{
-                      role
-                    }}</span> {{ aclRoleOpAll[`${role}___${op.name}`] ? 'can' : 'can\'t' }} {{
-                      op.name
-                    }} '{{ nodes.tn }}' rows</span>
-                </v-tooltip>
+                    <v-icon
+                      v-if="op.name !== 'delete'"
+                      x-small
+                      class="custom-acl"
+                      @click="(
+                        showCustomAcl = true,
+                        custoAclTitle = [nodes.tn,role,op.name],
+                        customAcl=(data[role] && data[role][op.name] && data[role][op.name].custom ) || {}
+                      )"
+                    >
+                      mdi-pencil-outline
+                    </v-icon>
 
-                <v-icon v-if="op.name !== 'delete'" x-small class="custom-acl"
-                        @click="(
-                          showCustomAcl = true,
-                          custoAclTitle = [nodes.tn,role,op.name],
-                          customAcl=(data[role] && data[role][op.name] && data[role][op.name].custom ) || {}
-                          )">
-                  mdi-pencil-outline
-                </v-icon>
-
-                <v-icon
-                  x-small
-                  class="custom-acl-found"
-                  v-if="data[role]
+                    <v-icon
+                      v-if="data[role]
                         && data[role][op.name]
                         && data[role][op.name].custom
                         && Object.keys(data[role][op.name].custom).length"
-                >mdi-filter-menu
-                </v-icon>
-
-              </th>
-            </template>
-          </tr>
+                      x-small
+                      class="custom-acl-found"
+                    >
+                      mdi-filter-menu
+                    </v-icon>
+                  </th>
+                </template>
+              </template>
+            </tr>
           </thead>
           <tbody>
-
-          <tr class="caption" v-for="column in columns"
+            <tr
+              v-for="column in columns"
+              v-show="column._cn.toLowerCase().indexOf(search.toLowerCase()) > -1"
               :key="column._cn"
-              v-show="column._cn.toLowerCase().indexOf(search.toLowerCase()) > -1">
-            <td
-            >{{ column._cn }}
-            </td>
-            <template v-for="role in roles" v-if="role !== 'creator'">
-              <td
-                class="pa-0"
-                style="position: relative"
-                v-for="op in operations" :class="`caption text-capitalize`"
-                :key="`${role}-${op.name}`">
-                <v-tooltip bottom :disabled="op.ignore">
-                  <template v-slot:activator="{on}">
-                    <div class="d-100 h-100 d-flex align-center justify-center permission-checkbox-container" v-on="on">
-                      <v-checkbox class="mt-n1" v-if="!op.ignore" dense
-                                  color="primary lighten-2"
-                                  @change="onPermissionChange(aclObj[`${column._cn}___${role}___${op.name}`],`${role}___${op.name}`)"
-                                  v-model="aclObj[`${column._cn}___${role}___${op.name}`]"
-                                  style=""></v-checkbox>
-
-                      <v-checkbox class="mt-n1" v-else dense
-                                  color="primary lighten-2"
-                                  disabled
-                                  style=""></v-checkbox>
-                    </div>
-                  </template>
-
-                  <span class="caption"><span
-                    class="text-capitalize">{{
-                      role
-                    }}</span> {{ aclObj[`${column._cn}___${role}___${op.name}`] ? 'can' : 'can\'t' }} {{
-                      op.name
-                    }} column '{{ column._cn }}'</span>
-                </v-tooltip>
+              class="caption"
+            >
+              <td>
+                {{ column._cn }}
               </td>
-            </template>
-          </tr>
+              <template v-for="role in roles">
+                <template
+                  v-if="role !== 'creator'"
+                >
+                  <td
+                    v-for="op in operations"
+                    :key="`${role}-${op.name}`"
+                    class="pa-0"
+                    style="position: relative"
+                    :class="`caption text-capitalize`"
+                  >
+                    <v-tooltip bottom :disabled="op.ignore">
+                      <template #activator="{on}">
+                        <div
+                          class="d-100 h-100 d-flex align-center justify-center permission-checkbox-container"
+                          v-on="on"
+                        >
+                          <v-checkbox
+                            v-if="!op.ignore"
+                            v-model="aclObj[`${column._cn}___${role}___${op.name}`]"
+                            class="mt-n1"
+                            dense
+                            color="primary lighten-2"
+                            style=""
+                            @change="onPermissionChange(aclObj[`${column._cn}___${role}___${op.name}`],`${role}___${op.name}`)"
+                          />
 
+                          <v-checkbox
+                            v-else
+                            class="mt-n1"
+                            dense
+                            color="primary lighten-2"
+                            disabled
+                            style=""
+                          />
+                        </div>
+                      </template>
 
+                      <span class="caption"><span
+                        class="text-capitalize"
+                      >{{
+                        role
+                      }}</span> {{ aclObj[`${column._cn}___${role}___${op.name}`] ? 'can' : 'can\'t' }} {{
+                        op.name
+                      }} column '{{ column._cn }}'</span>
+                    </v-tooltip>
+                  </td>
+                </template>
+              </template>
+            </tr>
           </tbody>
         </v-simple-table>
       </div>
-
     </v-card>
   </div>
 </template>
@@ -217,11 +268,11 @@
 // import debounce from "@/helpers/debounce";
 // import CustomAcl from "./customAcl";
 
-import CustomAcl from "./customAcl";
+import CustomAcl from './customAcl'
 
 export default {
-  name: "tableAcl",
-  components: {CustomAcl},
+  name: 'TableAcl',
+  components: { CustomAcl },
   // components: {CustomAcl},
   props: ['nodes'],
   data: () => ({
@@ -252,80 +303,78 @@ export default {
     loading: false
   }),
   computed: {
-    roles() {
+    roles () {
       return (this.data ? Object.keys(this.data) : []).filter(r => r !== 'guest')
     },
-    operations() {
-      return this.allOperations.filter(({name}) => this.nodes.tn || name === 'read')
+    operations () {
+      return this.allOperations.filter(({ name }) => this.nodes.tn || name === 'read')
     }
   },
-  async created() {
-    await this.load();
+  async created () {
+    await this.load()
   },
   methods: {
-    async load() {
-      await this.loadColumnList();
-      await this.loadAcl();
-      this.generateAclObj();
-      this.edited = false;
+    async load () {
+      await this.loadColumnList()
+      await this.loadAcl()
+      this.generateAclObj()
+      this.edited = false
     },
-    generateAclObj() {
-
-      const aclObj = {};
-      const aclRoleOpAll = {};
+    generateAclObj () {
+      const aclObj = {}
+      const aclRoleOpAll = {}
       console.log(this.data)
       // generate aclObj with merged key value
       for (const [role, roleObj] of Object.entries(this.data)) {
         for (const [operation, acl] of Object.entries(roleObj)) {
-          aclRoleOpAll[`${role}___${operation}`] = false;
-          for (const {_cn: cn} of this.columns) {
+          aclRoleOpAll[`${role}___${operation}`] = false
+          for (const { _cn: cn } of this.columns) {
             if (typeof acl === 'boolean') {
-              aclObj[`${cn}___${role}___${operation}`] = acl;
+              aclObj[`${cn}___${role}___${operation}`] = acl
             } else if (acl) {
-              aclObj[`${cn}___${role}___${operation}`] = acl.columns[cn];
+              aclObj[`${cn}___${role}___${operation}`] = acl.columns[cn]
             }
             if (!aclRoleOpAll[`${role}___${operation}`] && aclObj[`${cn}___${role}___${operation}`]) {
-              aclRoleOpAll[`${role}___${operation}`] = true;
+              aclRoleOpAll[`${role}___${operation}`] = true
             }
           }
         }
       }
-      this.aclRoleOpAll = aclRoleOpAll;
-      this.$nextTick(() => this.aclObj = aclObj);
-
+      this.aclRoleOpAll = aclRoleOpAll
+      this.$nextTick(() => {
+        this.aclObj = aclObj
+      })
     },
-    async save() {
-      const obj = {};
+    async save () {
+      const obj = {}
       for (const [key, isAllowed] of Object.entries(this.aclObj)) {
-        const [column, role, operation] = key.split('___');
+        const [column, role, operation] = key.split('___')
         if (operation !== 'delete') {
-          obj[role] = obj[role] || {};
-          obj[role][operation] = obj[role][operation] || {};
-          obj[role][operation].columns = obj[role][operation].columns || {};
-          obj[role][operation].columns[column] = isAllowed;
+          obj[role] = obj[role] || {}
+          obj[role][operation] = obj[role][operation] || {}
+          obj[role][operation].columns = obj[role][operation].columns || {}
+          obj[role][operation].columns[column] = isAllowed
         }
         if (this.data[role] && this.data[role][operation] && this.data[role][operation].custom) {
-          obj[role][operation].custom = this.data[role][operation].custom;
+          obj[role][operation].custom = this.data[role][operation].custom
         }
-
-
       }
 
       for (const [key, isAllowed] of Object.entries(this.aclRoleOpAll)) {
-        const [role, operation] = key.split('___');
+        const [role, operation] = key.split('___')
         if (operation === 'delete' || !isAllowed) {
-          obj[role] = obj[role] || {};
-          obj[role][operation] = isAllowed;
+          obj[role] = obj[role] || {}
+          obj[role][operation] = isAllowed
         }
       }
 
       if (this.showCustomAcl && this.custoAclTitle) {
-        if (!obj[this.custoAclTitle[1]][this.custoAclTitle[2]] || typeof obj[this.custoAclTitle[1]][this.custoAclTitle[2]] !== 'object')
-          obj[this.custoAclTitle[1]][this.custoAclTitle[2]] = {};
-        obj[this.custoAclTitle[1]][this.custoAclTitle[2]].custom = this.customAcl;
+        if (!obj[this.custoAclTitle[1]][this.custoAclTitle[2]] || typeof obj[this.custoAclTitle[1]][this.custoAclTitle[2]] !== 'object') {
+          obj[this.custoAclTitle[1]][this.custoAclTitle[2]] = {}
+        }
+        obj[this.custoAclTitle[1]][this.custoAclTitle[2]].custom = this.customAcl
       }
 
-
       console.log(obj)
       try {
         await this.$store.dispatch('sqlMgr/ActSqlOp', [{
@@ -334,20 +383,21 @@ export default {
         }, 'xcAclSave', {
           tn: this.nodes.tn || this.nodes.view_name,
           acl: obj
-        }]);
+        }])
         if (this.showCustomAcl) {
-          this.$toast.success('Custom RBAC saved successfully').goAway(3000);
-          this.showCustomAcl = false;
-        } else
-          this.$toast.success('RBAC saved successfully').goAway(3000);
-        this.edited = false;
+          this.$toast.success('Custom RBAC saved successfully').goAway(3000)
+          this.showCustomAcl = false
+        } else {
+          this.$toast.success('RBAC saved successfully').goAway(3000)
+        }
+        this.edited = false
         await this.load()
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000);
+        this.$toast.error(e.message).goAway(3000)
       }
     },
 
-    async loadColumnList() {
+    async loadColumnList () {
       // const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
       //   env: this.nodes.env,
       //   dbAlias: this.nodes.dbAlias
@@ -360,46 +410,45 @@ export default {
         dbAlias: this.nodes.dbAlias
       }, 'tableXcModelGet', {
         tn: this.nodes.tn || this.nodes.view_name
-      }]);
+      }])
 
-
-      const meta = JSON.parse(result.meta);
-      this.columns = meta.columns;
+      const meta = JSON.parse(result.meta)
+      this.columns = meta.columns
     },
-    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', {
         tn: this.nodes.tn || this.nodes.view_name
-      }]);
-      this.data = JSON.parse(result.acl);
+      }])
+      this.data = JSON.parse(result.acl)
 
-      this.loading = false;
+      this.loading = false
     },
-    onAclRoleOpAllChange(isEnabled, name) {
-      this.edited = true;
-      const obj = {};
+    onAclRoleOpAllChange (isEnabled, name) {
+      this.edited = true
+      const obj = {}
       for (const key in this.aclObj) {
         if (key.split('___').slice(1).join('___') === name) {
-          obj[key] = isEnabled;
+          obj[key] = isEnabled
         } else {
-          obj[key] = this.aclObj[key];
+          obj[key] = this.aclObj[key]
         }
       }
-      this.aclObj = obj;
+      this.aclObj = obj
     },
-    onPermissionChange(isEnabled, name) {
-      this.edited = true;
+    onPermissionChange (isEnabled, name) {
+      this.edited = true
       if (isEnabled && !this.aclRoleOpAll[name]) {
-        this.$set(this.aclRoleOpAll, name, true);
+        this.$set(this.aclRoleOpAll, name, true)
       }
       if (!isEnabled && this.aclRoleOpAll[name]) {
-        this.$set(this.aclRoleOpAll, name, Object.entries(this.aclObj).some(([key, enabled]) => key.endsWith(name) && enabled));
+        this.$set(this.aclRoleOpAll, name, Object.entries(this.aclObj).some(([key, enabled]) => key.endsWith(name) && enabled))
       }
     }
-  },
+  }
   // watch: {
   //   aclRoleOpAll: {
   //     // todo: fix toggle issue
@@ -418,9 +467,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-tr,th{
+tr, th {
   border: 1px solid grey;
 }
+
 td, th {
   border-left: 1px solid grey;
 }
@@ -448,7 +498,6 @@ th.permission {
 //  filter: none;
 //}
 
-
 ::v-deep {
   .permission-checkbox-container .v-input {
     transform: scale(.8);
@@ -459,7 +508,8 @@ th.permission {
     display: flex;
     align-items: center;
   }
-  table{
+
+  table {
     border-collapse: collapse;
   }
 }