refactor: prettier nc-gui v1

packages/nc-gui/components/project/projectMetadata/uiAcl/ToggleViewUIAcl.vue

@@ -4,19 +4,17 @@
       <v-card class="pb-2">
         <v-toolbar flat height="50" class="toolbar-border-bottom">
           <v-text-field
-            v-if=" db"
+            v-if="db"
             v-model="filter"
             dense
             hide-details
             class="my-2 mx-auto search-field"
             :placeholder="`Search '${db.connection.database}' models`"
-            style="max-width:300px"
+            style="max-width: 300px"
             outlined
           >
             <template #prepend-inner>
-              <v-icon small>
-                search
-              </v-icon>
+              <v-icon small> search </v-icon>
             </template>
           </v-text-field>
 
@@ -51,41 +49,36 @@
           <v-simple-table dense style="min-width: 400px">
             <thead>
               <tr>
-                <th>
-                  Models
-                </th>
+                <th>Models</th>
                 <th v-for="role in roles" :key="role">
                   {{ role }}
                 </th>
               </tr>
             </thead>
             <tbody>
-              <template
-                v-for="view in views"
-              >
-                <tr
-                  v-if="view.view_name.toLowerCase().indexOf(filter.toLowerCase()) > -1"
-                  :key="view.view_name"
-                >
+              <template v-for="view in views">
+                <tr v-if="view.view_name.toLowerCase().indexOf(filter.toLowerCase()) > -1" :key="view.view_name">
                   <td>{{ view.view_name }}</td>
                   <td v-for="role in roles" :key="`${view.view_name}-${role}`">
                     <v-tooltip bottom>
-                      <template #activator="{on}">
-                        <div
-                          v-on="on"
-                        >
+                      <template #activator="{ on }">
+                        <div v-on="on">
                           <v-checkbox
                             v-model="view.disabled[role]"
                             dense
                             :true-value="false"
                             :false-value="true"
-                            @change="$set(view,'edited',true)"
+                            @change="$set(view, 'edited', true)"
                           />
                         </div>
                       </template>
 
-                      <span v-if="view.disabled[role]">Click to hide '{{ view.view_name }}' for Role:{{ role }} in UI dashboard</span>
-                      <span v-else>Click to make '{{ view.view_name }}' visible for Role:{{ role }} in UI dashboard</span>
+                      <span v-if="view.disabled[role]"
+                        >Click to hide '{{ view.view_name }}' for Role:{{ role }} in UI dashboard</span
+                      >
+                      <span v-else
+                        >Click to make '{{ view.view_name }}' visible for Role:{{ role }} in UI dashboard</span
+                      >
                     </v-tooltip>
                   </td>
                 </tr>
@@ -99,7 +92,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'ToggleViewUiAcl',
@@ -110,47 +103,55 @@ export default {
     updating: false,
     dbsTab: 0,
     filter: '',
-    views: null
+    views: null,
   }),
   async mounted() {
-    await this.loadViewList()
+    await this.loadViewList();
   },
   methods: {
     async loadViewList() {
-      this.views = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-        dbAlias: this.db.meta.dbAlias,
-        env: this.$store.getters['project/GtrEnv']
-      }, 'xcVisibilityMetaGet', {
-        type: 'view'
-      }]))
+      this.views = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+        {
+          dbAlias: this.db.meta.dbAlias,
+          env: this.$store.getters['project/GtrEnv'],
+        },
+        'xcVisibilityMetaGet',
+        {
+          type: 'view',
+        },
+      ]);
     },
     async save() {
       try {
-        await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-          dbAlias: this.db.meta.dbAlias,
-          env: this.$store.getters['project/GtrEnv']
-        }, 'xcVisibilityMetaSet', {
-          type: 'view',
-          disableList: this.views.filter(t => t.edited)
-        }])
-        this.$toast.success('Updated UI ACL for tables successfully').goAway(3000)
+        await this.$store.dispatch('sqlMgr/ActSqlOp', [
+          {
+            dbAlias: this.db.meta.dbAlias,
+            env: this.$store.getters['project/GtrEnv'],
+          },
+          'xcVisibilityMetaSet',
+          {
+            type: 'view',
+            disableList: this.views.filter(t => t.edited),
+          },
+        ]);
+        this.$toast.success('Updated UI ACL for tables successfully').goAway(3000);
       } catch (e) {
-        this.$toast.error('Some error occurred').goAway(3000)
+        this.$toast.error('Some error occurred').goAway(3000);
       }
-    }
+    },
   },
   computed: {
     ...mapGetters({
-      dbAliasList: 'project/GtrDbAliasList'
+      dbAliasList: 'project/GtrDbAliasList',
     }),
     edited() {
-      return this.views && this.views.length && this.views.some(t => t.edited)
+      return this.views && this.views.length && this.views.some(t => t.edited);
     },
     roles() {
-      return this.views && this.views.length ? Object.keys(this.views[0].disabled) : []
-    }
-  }
-}
+      return this.views && this.views.length ? Object.keys(this.views[0].disabled) : [];
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -163,12 +164,11 @@ export default {
     border-right: 1px solid #7f828b33;
   }
 
-  .search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
+  .search-field.v-text-field > .v-input__control,
+  .search-field.v-text-field > .v-input__control > .v-input__slot {
     min-height: auto;
-
   }
 }
-
 </style>
 <!--
 /**