From 13509d36577426d886599c5ffe197a60ad19cda3 Mon Sep 17 00:00:00 2001
From: Pranav C <61551451+pranavxc@users.noreply.github.com>
Date: Wed, 28 Jul 2021 13:26:56 +0530
Subject: [PATCH] fix(gui): URL cell corrections

re #382

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
---
 .../project/spreadsheet/components/cell.vue   |  4 +-
 .../spreadsheet/components/cell/urlCell.vue   | 15 ++++++
 .../spreadsheet/components/editableCell.vue   |  4 ++
 .../editableCell/editableUrlCell.vue          | 52 +++++++++++++++++++
 .../project/spreadsheet/mixins/cell.js        |  3 ++
 packages/nc-gui/helpers/index.js              | 11 ++++
 6 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui/components/project/spreadsheet/components/cell/urlCell.vue
 create mode 100644 packages/nc-gui/components/project/spreadsheet/components/editableCell/editableUrlCell.vue

diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell.vue
index d57de0a6b1..16466db042 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/cell.vue
+++ b/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: {}
diff --git a/packages/nc-gui/components/project/spreadsheet/components/cell/urlCell.vue b/packages/nc-gui/components/project/spreadsheet/components/cell/urlCell.vue
new file mode 100644
index 0000000000..73570d9fe3
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
index bb07b3a5fa..74faf5e1c7 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
+++ b/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,
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableUrlCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/editableUrlCell.vue
new file mode 100644
index 0000000000..1ea92bd269
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui/components/project/spreadsheet/mixins/cell.js b/packages/nc-gui/components/project/spreadsheet/mixins/cell.js
index 5aa42921ef..9a0500c1df 100644
--- a/packages/nc-gui/components/project/spreadsheet/mixins/cell.js
+++ b/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'
     }
diff --git a/packages/nc-gui/helpers/index.js b/packages/nc-gui/helpers/index.js
index 8efe8aa410..6f452743a1 100644
--- a/packages/nc-gui/helpers/index.js
+++ b/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