fix(gui): URL cell corrections

re #382

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

packages/nc-gui/components/project/spreadsheet/components/cell.vue

@@ -10,10 +10,12 @@
   <set-list-cell v-else-if="isSet" :value="value" :column="column" @click.stop="$emit('enableedit')" />
   <!--  <enum-list-editable-cell @click.stop="$emit('enableedit')" v-else-if="isEnum && selected" :value="value" :column="column"></enum-list-editable-cell>-->
   <enum-cell v-else-if="isEnum" :value="value" :column="column" @click.stop="$emit('enableedit')" />
+  <url-cell v-else-if="isURL" :value="value" />
   <span v-else>{{ value }}</span>
 </template>
 
 <script>
+import UrlCell from '@/components/project/spreadsheet/components/cell/urlCell'
 import cell from '@/components/project/spreadsheet/mixins/cell'
 import SetListCell from '@/components/project/spreadsheet/components/cell/setListCell'
 import EnumCell from '@/components/project/spreadsheet/components/cell/enumCell'
@@ -21,7 +23,7 @@ import EditableAttachmentCell from '@/components/project/spreadsheet/components/
 
 export default {
   name: 'TableCell',
-  components: { EditableAttachmentCell, EnumCell, SetListCell },
+  components: { UrlCell, EditableAttachmentCell, EnumCell, SetListCell },
   mixins: [cell],
   props: ['value', 'dbAlias', 'isLocked', 'selected'],
   computed: {}

packages/nc-gui/components/project/spreadsheet/components/cell/urlCell.vue

@@ -0,0 +1,15 @@
+<template>
+  <a v-if="value" :href="value" target="_blank">{{ value }}</a>
+  <span v-else />
+</template>
+
+<script>
+export default {
+  name: 'UrlCell',
+  props: ['value']
+}
+</script>
+
+<style scoped>
+
+</style>

packages/nc-gui/components/project/spreadsheet/components/editableCell.vue

@@ -92,6 +92,8 @@
       v-on="parentListeners"
     />
 
+    <editable-url-cell v-else-if="isURL" v-model="localState" v-on="parentListeners" />
+
     <text-cell v-else-if="isString" v-model="localState" v-on="parentListeners" />
 
     <text-area-cell
@@ -109,6 +111,7 @@
 
 <script>
 import DatePickerCell from '@/components/project/spreadsheet/components/editableCell/datePickerCell'
+import EditableUrlCell from '@/components/project/spreadsheet/components/editableCell/editableUrlCell'
 import TextCell from '@/components/project/spreadsheet/components/editableCell/textCell'
 import DateTimePickerCell from '@/components/project/spreadsheet/components/editableCell/dateTimePickerCell'
 import TextAreaCell from '@/components/project/spreadsheet/components/editableCell/textAreaCell'
@@ -128,6 +131,7 @@ import debounce from 'debounce'
 export default {
   name: 'EditableCell',
   components: {
+    EditableUrlCell,
     SetListCell,
     SetListEditableCell,
     EnumCell,

packages/nc-gui/components/project/spreadsheet/components/editableCell/editableUrlCell.vue

@@ -0,0 +1,52 @@
+<template>
+  <input v-model="localState" v-on="parentListeners">
+</template>
+
+<script>
+import { isValidURL } from '@/helpers'
+
+export default {
+  name: 'EditableUrlCell',
+  props: {
+    value: String
+  },
+  computed: {
+    localState: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        console.log(isValidURL(val))
+        if (isValidURL(val)) { this.$emit('input', val) }
+      }
+    },
+    parentListeners() {
+      const $listeners = {}
+
+      if (this.$listeners.blur) {
+        $listeners.blur = this.$listeners.blur
+      }
+      if (this.$listeners.focus) {
+        $listeners.focus = this.$listeners.focus
+      }
+
+      if (this.$listeners.cancel) {
+        $listeners.cancel = this.$listeners.cancel
+      }
+
+      return $listeners
+    }
+  },
+  mounted() {
+    this.$el.focus()
+  }
+}
+</script>
+
+<style scoped>
+input, textarea {
+  width: 100%;
+  height: 100%;
+  color: var(--v-textColor-base);
+}
+</style>

packages/nc-gui/components/project/spreadsheet/mixins/cell.js

@@ -52,6 +52,9 @@ export default {
     isSet() {
       return this.column.uidt === 'MultiSelect'
     },
+    isURL() {
+      return this.column.uidt === 'URL'
+    },
     isAttachment() {
       return this.column.uidt === 'Attachment'
     }

packages/nc-gui/helpers/index.js

@@ -1,5 +1,16 @@
 export const isEmail = v => /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i.test(v)
 
+// ref : https://stackoverflow.com/a/5717133
+export const isValidURL = (str) => {
+  const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
+    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+    '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+    '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+    '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
+  return !!pattern.test(str)
+}
+
 export const parseIfInteger = v => /^\d+$/.test(v) ? +v : v
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd