Browse Source

fix/Added showing error message on invalid url entry

pull/3185/head
Muhammed Mustafa 2 years ago
parent
commit
bc9bd2533f
  1. 15
      packages/nc-gui-v2/components/cell/Url.vue

15
packages/nc-gui-v2/components/cell/Url.vue

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core' import type { VNodeRef } from '@vue/runtime-core'
import { message } from 'ant-design-vue'
import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports' import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
interface Props { interface Props {
@ -14,9 +15,13 @@ const column = inject(ColumnInj)!
const editEnabled = inject(EditModeInj)! const editEnabled = inject(EditModeInj)!
// Used in the logic of when to display error since we are not storing the url if its not valid
const localState = ref(value)
const vModel = computed({ const vModel = computed({
get: () => value, get: () => value,
set: (val) => { set: (val) => {
localState.value = val
if (!column.value.meta?.validate || (val && isValidURL(val))) { if (!column.value.meta?.validate || (val && isValidURL(val))) {
emit('update:modelValue', val) emit('update:modelValue', val)
} }
@ -35,6 +40,16 @@ const url = computed(() => {
}) })
const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus() const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
watch(
() => editEnabled.value,
() => {
if (!editEnabled.value && localState.value && !isValidURL(localState.value)) {
message.error('Invalid URL')
}
localState.value = value
},
)
</script> </script>
<template> <template>

Loading…
Cancel
Save