refactor(gui): linting

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

packages/nc-gui/components/project/appStore/inputs/attachment.vue

@@ -1,112 +1,134 @@
 <template>
   <div class="main">
     <div class="d-flex align-center img-container">
-
       <div v-for="(item,i) in localState" :key="i" class="thumbnail align-center justify-center d-flex">
         <v-tooltip bottom>
-          <template v-slot:activator="{on}">
+          <template #activator="{on}">
             <v-img
-              lazy-src="https://via.placeholder.com/60.png?text=Loading..."
+              v-if="isImage(item.title)"
               :key="item.url"
-              alt="#" max-height="33px" contain v-if="isImage(item.title)" :src="item.url" v-on="on"
-              @click="selectImage(item.url,i)">
-              <template v-slot:placeholder>
-                <v-skeleton-loader type="image" height="33" width="33"></v-skeleton-loader>
+              lazy-src="https://via.placeholder.com/60.png?text=Loading..."
+              alt="#"
+              max-height="33px"
+              contain
+              :src="item.url"
+              v-on="on"
+              @click="selectImage(item.url,i)"
+            >
+              <template #placeholder>
+                <v-skeleton-loader type="image" height="33" width="33" />
               </template>
             </v-img>
-            <v-icon v-else-if="item.icon" v-on="on" size="33" @click="openUrl(item.url,'_blank')">{{
+            <v-icon v-else-if="item.icon" size="33" v-on="on" @click="openUrl(item.url,'_blank')">
+              {{
                 item.icon
               }}
             </v-icon>
-            <v-icon v-else v-on="on" size="33" @click="openUrl(item.url,'_blank')">mdi-file</v-icon>
+            <v-icon v-else size="33" v-on="on" @click="openUrl(item.url,'_blank')">
+              mdi-file
+            </v-icon>
           </template>
           <span>{{ item.title }}</span>
         </v-tooltip>
       </div>
 
       <div class="add d-flex align-center justify-center px-1" @click="addFile">
-        <v-icon v-if="uploading" small color="primary">mdi-loading mdi-spin</v-icon>
-        <v-icon v-else small color="primary">mdi-plus</v-icon>
+        <v-icon v-if="uploading" small color="primary">
+          mdi-loading mdi-spin
+        </v-icon>
+        <v-icon v-else small color="primary">
+          mdi-plus
+        </v-icon>
       </div>
 
+      <v-spacer />
 
-      <v-spacer>
-      </v-spacer>
-
-      <v-icon class="expand-icon mr-1" x-small color="primary" @click.stop="dialog = true">mdi-arrow-expand</v-icon>
-      <input type="file" multiple @change="onFileSelection" class="d-none" ref="file"/>
+      <v-icon class="expand-icon mr-1" x-small color="primary" @click.stop="dialog = true">
+        mdi-arrow-expand
+      </v-icon>
+      <input ref="file" type="file" multiple class="d-none" @change="onFileSelection">
     </div>
 
-
     <v-dialog
       v-model="dialog"
       width="800"
     >
-
       <v-card class="h-100 images-modal">
-
         <v-card-text class="h-100 backgroundColor">
-
-          <v-btn small class="my-4" @click="addFile" :loading="uploading">
-            <v-icon small class="mr-2">mdi-link-variant</v-icon>
+          <v-btn small class="my-4" :loading="uploading" @click="addFile">
+            <v-icon small class="mr-2">
+              mdi-link-variant
+            </v-icon>
             Attach File
           </v-btn>
 
-
           <div class="d-flex flex-wrap h-100">
-
             <v-container fluid style="max-height:calc(90vh - 80px);overflow-y: auto">
-
               <v-row>
                 <v-col v-for="(item,i) in localState" :key="i" cols="4">
-
-                  <v-card class="modal-thumbnail-card align-center justify-center d-flex" height="200px"
-                          style="position: relative">
+                  <v-card
+                    class="modal-thumbnail-card align-center justify-center d-flex"
+                    height="200px"
+                    style="position: relative"
+                  >
                     <v-icon small class="remove-icon" @click="removeItem(i)">
                       mdi-close-circle
                     </v-icon>
                     <div class="pa-2 d-flex align-center" style="height:200px">
-                      <img v-if="isImage(item.title)" style="max-height: 100%;max-width: 100%" alt="#" :src="item.url"
-                           @click="selectImage(item.url,i)">
+                      <img
+                        v-if="isImage(item.title)"
+                        style="max-height: 100%;max-width: 100%"
+                        alt="#"
+                        :src="item.url"
+                        @click="selectImage(item.url,i)"
+                      >
 
-                      <v-icon v-else-if="item.icon" size="33" @click="openUrl(item.url,'_blank')">{{
+                      <v-icon v-else-if="item.icon" size="33" @click="openUrl(item.url,'_blank')">
+                        {{
                           item.icon
                         }}
                       </v-icon>
-                      <v-icon v-else size="33" @click="openUrl(item.url,'_blank')">mdi-file</v-icon>
+                      <v-icon v-else size="33" @click="openUrl(item.url,'_blank')">
+                        mdi-file
+                      </v-icon>
                     </div>
                   </v-card>
-                  <p class="caption mt-2 modal-title" :title="item.title">{{ item.title }}</p>
+                  <p class="caption mt-2 modal-title" :title="item.title">
+                    {{ item.title }}
+                  </p>
                 </v-col>
               </v-row>
-
             </v-container>
           </div>
         </v-card-text>
-
-
       </v-card>
     </v-dialog>
 
-
     <v-overlay v-model="showImage" z-index="99999" opacity=".93">
-      <div class="image-overlay-container" v-click-outside="hideIfVisible">
-
-        <v-carousel v-model="carousel" height="calc(100vh - 100px)" hide-delimiters v-if="showImage && selectedImage">
+      <div v-click-outside="hideIfVisible" class="image-overlay-container">
+        <v-carousel v-if="showImage && selectedImage" v-model="carousel" height="calc(100vh - 100px)" hide-delimiters>
           <v-carousel-item
 
             v-for="(item,i) in localState"
             :key="i"
           >
             <div class="mx-auto d-flex flex-column justify-center align-center">
-              <p class="title text-center">{{ item.title }}</p>
+              <p class="title text-center">
+                {{ item.title }}
+              </p>
 
               <div style="width:90vh;height:calc(100vh - 150px)" class="d-flex align-center justify-center">
-                <img v-if="isImage(item.title)" style="max-width:90vh;max-height:calc(100vh - 100px)"
-                     :src="item.url">
-                <v-icon v-else-if="item.icon" size="55">{{ item.icon }}</v-icon>
-                <v-icon v-else size="55">mdi-file</v-icon>
-
+                <img
+                  v-if="isImage(item.title)"
+                  style="max-width:90vh;max-height:calc(100vh - 100px)"
+                  :src="item.url"
+                >
+                <v-icon v-else-if="item.icon" size="55">
+                  {{ item.icon }}
+                </v-icon>
+                <v-icon v-else size="55">
+                  mdi-file
+                </v-icon>
               </div>
             </div>
           </v-carousel-item>
@@ -124,19 +146,27 @@
             <v-slide-item
               v-for="(item,i) in localState"
               :key="i"
-              v-slot="{ active, toggle }"
             >
               <!--            <div class="d-flex justify-center" style="height:80px">-->
               <v-card
+                :key="i"
                 class="ma-2 pa-2 d-flex align-center justify-center overlay-thumbnail"
                 :class="{active: carousel === i}"
-                width="48" height="48"
+                width="48"
+                height="48"
                 @click="carousel = i"
-                :key="i">
-                <img v-if="isImage(item.title)" style="max-width:100%;max-height:100%"
-                     :src="item.url">
-                <v-icon v-else-if="item.icon" size="48">{{ item.icon }}</v-icon>
-                <v-icon v-else size="48">mdi-file</v-icon>
+              >
+                <img
+                  v-if="isImage(item.title)"
+                  style="max-width:100%;max-height:100%"
+                  :src="item.url"
+                >
+                <v-icon v-else-if="item.icon" size="48">
+                  {{ item.icon }}
+                </v-icon>
+                <v-icon v-else size="48">
+                  mdi-file
+                </v-icon>
               </v-card>
               <!--            </div>-->
             </v-slide-item>
@@ -147,101 +177,102 @@
           mdi-close-circle
         </v-icon>
       </div>
-
     </v-overlay>
-
   </div>
 </template>
 
 <script>
-import {isImage} from "@/components/project/spreadsheet/helpers/imageExt";
+import { isImage } from '@/components/project/spreadsheet/helpers/imageExt'
 
 export default {
-  name: "attachment",
+  name: 'Attachment',
   props: ['dbAlias', 'value'],
-  methods: {
-    openUrl(url, target) {
-      window.open(url, target)
-    },
-    isImage,
-    hideIfVisible() {
-      if (this.showImage) {
-        this.showImage = false;
-      }
-    },
-    selectImage(selectedImage, i) {
-      this.showImage = true;
-      this.carousel = i;
-      this.selectedImage = selectedImage;
-    },
-    addFile() {
-      this.$refs.file.click();
-    },
-    async onFileSelection() {
-      if (!this.$refs.file.files || !this.$refs.file.files.length) {
-        return;
-      }
-      this.uploading = true;
-      for (const file of this.$refs.file.files) {
-        const item = await this.$store.dispatch('sqlMgr/ActUpload', [{
-          dbAlias: this.dbAlias
-        }, 'xcAttachmentUpload', {public: true}, file,])
-        this.localState.push(item);
-      }
-
-      this.uploading = false;
-      this.$emit('input', JSON.stringify(this.localState))
-      this.$emit('update')
-    },
-    removeItem(i) {
-      this.localState.splice(i, 1)
-      this.$emit('input', JSON.stringify(this.localState))
-      this.$emit('update')
-    },
-    onArrowDown(e) {
-      if (!this.showImage) return;
-      e = e || window.event;
-      if (e.keyCode == '37') {
-        this.carousel = (this.carousel || this.localState.length) - 1;
-      } else if (e.keyCode == '39') {
-        this.carousel = ++this.carousel % this.localState.length;
-      }
-
-    }
-  }, data: () => ({
+  data: () => ({
     carousel: null,
     uploading: false,
     localState: '',
     dialog: false,
     showImage: false,
-    selectedImage: null,
+    selectedImage: null
   }),
-  created() {
-    try {
-      this.localState = (typeof this.value === 'string' ? JSON.parse(this.value) : this.value) || [];
-    } catch (e) {
-      this.localState = [];
-    }
-    document.addEventListener('keydown', this.onArrowDown)
-  },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.onArrowDown)
-  },
-  mounted() {
-  }, watch: {
-    value(val) {
+  watch: {
+    value (val) {
       try {
-        this.localState = (typeof val === 'string' ? JSON.parse(val) : val) || [];
+        this.localState = (typeof val === 'string' ? JSON.parse(val) : val) || []
       } catch (e) {
-        this.localState = [];
+        this.localState = []
       }
-    },
+    }
     // localState(val) {
     //   if (this.isForm) {
     //     this.$emit('input', JSON.stringify(val))
     //   }
     // }
   },
+  created () {
+    try {
+      this.localState = (typeof this.value === 'string' ? JSON.parse(this.value) : this.value) || []
+    } catch (e) {
+      this.localState = []
+    }
+    document.addEventListener('keydown', this.onArrowDown)
+  },
+  beforeDestroy () {
+    document.removeEventListener('keydown', this.onArrowDown)
+  },
+  mounted () {
+  },
+  methods: {
+    openUrl (url, target) {
+      window.open(url, target)
+    },
+    isImage,
+    hideIfVisible () {
+      if (this.showImage) {
+        this.showImage = false
+      }
+    },
+    selectImage (selectedImage, i) {
+      this.showImage = true
+      this.carousel = i
+      this.selectedImage = selectedImage
+    },
+    addFile () {
+      this.$refs.file.click()
+    },
+    async onFileSelection () {
+      if (!this.$refs.file.files || !this.$refs.file.files.length) {
+        return
+      }
+      this.uploading = true
+      for (const file of this.$refs.file.files) {
+        const item = await this.$store.dispatch('sqlMgr/ActUpload', [{
+          dbAlias: this.dbAlias
+        }, 'xcAttachmentUpload', { public: true }, file])
+        this.localState.push(item)
+      }
+
+      this.uploading = false
+      this.$emit('input', JSON.stringify(this.localState))
+      this.$emit('update')
+    },
+    removeItem (i) {
+      this.localState.splice(i, 1)
+      this.$emit('input', JSON.stringify(this.localState))
+      this.$emit('update')
+    },
+    onArrowDown (e) {
+      if (!this.showImage) { return }
+      e = e || window.event
+      // eslint-disable-next-line eqeqeq
+      if (e.keyCode == '37') {
+        this.carousel = (this.carousel || this.localState.length) - 1
+        // eslint-disable-next-line eqeqeq
+      } else if (e.keyCode == '39') {
+        this.carousel = ++this.carousel % this.localState.length
+      }
+    }
+  }
 }
 </script>
 
@@ -258,12 +289,10 @@ export default {
   margin: 5px 2px;
 }
 
-
 .add:hover {
   /*background-color: #66666699;*/
 }
 
-
 .thumbnail {
   height: 33px;
   width: 33px;
@@ -291,7 +320,6 @@ export default {
   background-color: var(--v-primary-lighten4);
 }
 
-
 .modal-thumbnail img {
   height: 50px;
   max-width: 100%;
@@ -351,7 +379,6 @@ export default {
   transform: scale(1.05);
 }
 
-
 </style>
 <!--
 /**