0351d front end linting (#377)

* feat: disable custom script for  trial users

* after lint fix

* frontend linting

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/tables/components/OpenCheckbox.vue

@@ -1,11 +1,33 @@
 <template>
-  <svg v-if="value===true" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-auto" fill="none"
-       viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+  <svg
+    v-if="value === true"
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-4 w-4 mx-auto"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M5 13l4 4L19 7"
+    />
   </svg>
-  <svg v-else-if="value===false" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-auto" fill="none"
-       viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+  <svg
+    v-else-if="value === false"
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-4 w-4 mx-auto"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M6 18L18 6M6 6l12 12"
+    />
   </svg>
 </template>
 
@@ -14,19 +36,17 @@ export default {
   components: {},
   props: {
     value: {
-      required: true
+      type: Boolean,
+      required: true,
     },
-
-  },
-  mounted() {
   },
 
   data() {
     return {}
   },
 
-  computed: {
-  },
+  computed: {},
+  mounted() {},
 
   methods: {},
 }

client/components/open/tables/components/OpenFile.vue

@@ -1,22 +1,44 @@
 <template>
   <p class="text-xs">
-    <span v-for="file in parsedFiles" :key="file.file_url"
-          class="whitespace-nowrap rounded-md transition-colors hover:decoration-none"
-          :class="{'open-file text-gray-700 dark:text-gray-300 truncate':!file.is_image, 'open-file-img':file.is_image}"
+    <span
+      v-for="file in parsedFiles"
+      :key="file.file_url"
+      class="whitespace-nowrap rounded-md transition-colors hover:decoration-none"
+      :class="{
+        'open-file text-gray-700 dark:text-gray-300 truncate': !file.is_image,
+        'open-file-img': file.is_image,
+      }"
     >
-      <a class="text-gray-700 dark:text-gray-300" :href="file.file_url" target="_blank"
-         rel="nofollow"
+      <a
+        class="text-gray-700 dark:text-gray-300"
+        :href="file.file_url"
+        target="_blank"
+        rel="nofollow"
       >
-  <div v-if="file.is_image" class="w-8 h-8">
-    <img class="object-cover h-full w-full rounded" :src="file.file_url" @error="failedImages.push(file.file_url)"/>
-  </div>
-  <span v-else
-        class="py-1 px-2"
-  >
-      <a :href="file.file_url" target="_blank" download>{{ file.displayed_file_name }}</a>
+        <div
+          v-if="file.is_image"
+          class="w-8 h-8"
+        >
+          <img
+            class="object-cover h-full w-full rounded"
+            :src="file.file_url"
+            @error="failedImages.push(file.file_url)"
+          >
+        </div>
+        <span
+          v-else
+          class="py-1 px-2"
+        >
+          <a
+            :href="file.file_url"
+            target="_blank"
+            download
+          >{{
+            file.displayed_file_name
+          }}</a>
+        </span>
+      </a>
     </span>
-  </a>
-  </span>
   </p>
 </template>
 
@@ -26,32 +48,36 @@ export default {
   props: {
     value: {
       type: Array,
-      required: false
-    }
+      required: false,
+    },
   },
 
   data() {
     return {
-      failedImages: []
+      failedImages: [],
     }
   },
 
   computed: {
     parsedFiles() {
-      return this.value ? this.value.map((file) => {
-        return {
-          file_name: file.file_name,
-          file_url: file.file_url,
-          displayed_file_name: this.displayedFileName(file.file_name),
-          is_image: !this.failedImages.includes(file.file_url) && this.isImage(file.file_name)
-        }
-      }): []
-    }
+      return this.value
+        ? this.value.map((file) => {
+            return {
+              file_name: file.file_name,
+              file_url: file.file_url,
+              displayed_file_name: this.displayedFileName(file.file_name),
+              is_image:
+                !this.failedImages.includes(file.file_url) &&
+                this.isImage(file.file_name),
+            }
+          })
+        : []
+    },
   },
 
   methods: {
     isImage(fileName) {
-      return ['png', 'gif', 'jpg', 'jpeg', 'tif'].some((suffix) => {
+      return ["png", "gif", "jpg", "jpeg", "tif"].some((suffix) => {
         return fileName && fileName.endsWith(suffix)
       })
     },
@@ -60,11 +86,11 @@ export default {
       const filename = fileName.substr(0, fileName.lastIndexOf("."))
 
       if (filename.length > 10) {
-        return filename.substr(0, 10) + '[...].' + extension
+        return filename.substr(0, 10) + "[...]." + extension
       }
-      return filename + '.' + extension
-    }
-  }
+      return filename + "." + extension
+    },
+  },
 }
 </script>
 

client/components/open/tables/components/OpenSelect.vue

@@ -1,32 +1,44 @@
 <template>
-  <span v-if="value" class="-mb-2">
+  <span
+    v-if="value"
+    class="-mb-2"
+  >
     <template v-if="valueIsObject">
-      <open-tag v-for="(val,index) in value" :key="index+val" :opt="val" />
+      <open-tag
+        v-for="(val, index) in value"
+        :key="index + val"
+        :opt="val"
+      />
     </template>
-    <open-tag v-else :opt="value" />
+    <open-tag
+      v-else
+      :opt="value"
+    />
   </span>
 </template>
 
 <script>
-import OpenTag from './OpenTag.vue'
+import OpenTag from "./OpenTag.vue"
 
 export default {
   components: { OpenTag },
   props: {
-    value: {}
+    value: {
+      type: Object,
+    },
   },
 
-  data () {
+  data() {
     return {}
   },
 
   computed: {
-    valueIsObject () {
-      if (typeof this.value === 'object' && this.value !== null) {
+    valueIsObject() {
+      if (typeof this.value === "object" && this.value !== null) {
         return true
       }
       return false
-    }
+    },
   },
 }
 </script>

client/components/open/tables/components/OpenTag.vue

@@ -1,6 +1,7 @@
 <template>
-  <span :id="opt"
-        class="py-1 px-2 mb-1 open-tag default mr-2 text-gray-700 dark:text-gray-300 text-xs whitespace-nowrap rounded-md transition-colors"
+  <span
+    :id="opt"
+    class="py-1 px-2 mb-1 open-tag default mr-2 text-gray-700 dark:text-gray-300 text-xs whitespace-nowrap rounded-md transition-colors"
   >
     {{ opt }}
   </span>
@@ -12,20 +13,18 @@ export default {
   props: {
     opt: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
 
-  data () {
+  data() {
     return {}
   },
 
-  computed: {
-  },
-  mounted () {
-  },
+  computed: {},
+  mounted() {},
 
-  methods: {}
+  methods: {},
 }
 </script>
 
@@ -35,7 +34,8 @@ export default {
   &.gray {
     background-color: #e3e2e0;
   }
-  &.light-gray,&.default {
+  &.light-gray,
+  &.default {
     background-color: #e3e2e080;
   }
   &.brown {
@@ -69,7 +69,8 @@ export default {
     &.gray {
       background-color: #5a5a5a;
     }
-    &.light-gray,&.default {
+    &.light-gray,
+    &.default {
       background-color: #ffffff21;
     }
     &.brown {
@@ -98,4 +99,4 @@ export default {
     }
   }
 }
-</style>
+</style>

client/components/open/tables/components/OpenText.vue

@@ -9,8 +9,9 @@ export default {
   components: {},
   props: {
     value: {
-      required: true
-    }
+      type: String,
+      required: true,
+    },
   },
 }
 </script>

client/components/open/tables/components/OpenUrl.vue

@@ -1,5 +1,10 @@
 <template>
-  <a class="text-gray-700 dark:text-gray-300 hover:underline" :href="value" target="_blank" rel="nofollow">{{ value }}</a>
+  <a
+    class="text-gray-700 dark:text-gray-300 hover:underline"
+    :href="value"
+    target="_blank"
+    rel="nofollow"
+  >{{ value }}</a>
 </template>
 
 <script>
@@ -7,19 +12,17 @@ export default {
   components: {},
   props: {
     value: {
-      required: true
+      type: String,
+      required: true,
     },
-
-  },
-  mounted() {
   },
 
   data() {
     return {}
   },
 
-  computed: {
-  },
+  computed: {},
+  mounted() {},
 
   methods: {},
 }

client/components/open/tables/components/ResizableTh.vue

@@ -1,9 +1,16 @@
 <template>
-  <th ref="th" :style="{width: width}">
-    <slot/>
-    <div v-if="allowResize" class="absolute right-0 top-0 w-0 z-10">
-      <div class="resize-handler bg-transparent cursor-move	 hover:bg-blue-500 opacity-80 transition-colors"
-           @mousedown="mouseDownHandler"
+  <th
+    ref="th"
+    :style="{ width: width }"
+  >
+    <slot />
+    <div
+      v-if="allowResize"
+      class="absolute right-0 top-0 w-0 z-10"
+    >
+      <div
+        class="resize-handler bg-transparent cursor-move hover:bg-blue-500 opacity-80 transition-colors"
+        @mousedown="mouseDownHandler"
       />
     </div>
   </th>
@@ -14,19 +21,22 @@ export default {
   components: {},
   props: {
     allowResize: {
-      required: true
+      type: Boolean,
+      required: true,
     },
     width: {
-      required: true
-    }
+      type: [String, Number],
+      required: true,
+    },
   },
+  emits: ['resize-width'],
 
   data() {
     return {
       x: 0,
       w: 0,
       lastEmit: Date.now(),
-      throttlePeriod: 50 // milliseconds
+      throttlePeriod: 50, // milliseconds
     }
   },
 
@@ -41,22 +51,22 @@ export default {
       this.w = parseInt(styles.width, 10)
 
       // Attach the listeners to `document`
-      document.addEventListener('mousemove', this.mouseMoveHandler)
-      document.addEventListener('mouseup', this.mouseUpHandler)
+      document.addEventListener("mousemove", this.mouseMoveHandler)
+      document.addEventListener("mouseup", this.mouseUpHandler)
     },
     mouseMoveHandler(e) {
       const now = Date.now()
       if (now - this.lastEmit > this.throttlePeriod) {
         const dx = e.clientX - this.x
-        this.$emit('resize-width', this.w + dx)
+        this.$emit("resize-width", this.w + dx)
         this.lastEmit = now
       }
     },
     mouseUpHandler() {
       // Remove the handlers of `mousemove` and `mouseup`
-      document.removeEventListener('mousemove', this.mouseMoveHandler)
-      document.removeEventListener('mouseup', this.mouseUpHandler)
-    }
-  }
+      document.removeEventListener("mousemove", this.mouseMoveHandler)
+      document.removeEventListener("mouseup", this.mouseUpHandler)
+    },
+  },
 }
 </script>