github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): added missing readonly property in some of the fields

pull/7466/head
Ramesh Mane 8 months ago
parent
8e9b9701d0
commit
6cdbfdf896
6 changed files with 57 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      packages/nc-gui/components/cell/DatePicker.vue
  2. 17
      packages/nc-gui/components/cell/Duration.vue
  3. 21
      packages/nc-gui/components/cell/Email.vue
  4. 24
      packages/nc-gui/components/cell/PhoneNumber.vue
  5. 1
      packages/nc-gui/components/cell/TimePicker.vue
  6. 27
      packages/nc-gui/components/cell/Url.vue

1
packages/nc-gui/components/cell/DatePicker.vue
Unescape View File

@ -240,6 +240,7 @@ const clickHandler = () => {
<template>
<a-date-picker
v-model:value="localState"
:disabled="readOnly"
:picker="picker"
:tabindex="0"
:bordered="false"

17
packages/nc-gui/components/cell/Duration.vue
Unescape View File

@ -13,6 +13,7 @@ import {
inject,
parseProp,
ref,
ReadonlyInj,
} from '#imports'
interface Props {
@ -32,14 +33,16 @@ const column = inject(ColumnInj)
const editEnabled = inject(EditModeInj)
const isEditColumn = inject(EditColumnInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
const showWarningMessage = ref(false)
const durationInMS = ref(0)
const isEdited = ref(false)
const isEditColumn = inject(EditColumnInj, ref(false))
const durationType = computed(() => parseProp(column?.value?.meta)?.duration || 0)
const durationPlaceholder = computed(() =>
@ -93,7 +96,7 @@ const focus: VNodeRef = (el) =>
<template>
<div class="duration-cell-wrapper">
<input
v-if="editEnabled"
v-if="!readOnly && editEnabled"
:ref="focus"
v-model="localState"
class="w-full !border-none !outline-none py-1"
@ -111,11 +114,13 @@ const focus: VNodeRef = (el) =>
@mousedown.stop
/>
<span v-else-if="modelValue === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
<span v-else-if="modelValue === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
$t('general.null')
}}</span>
<span v-else> {{ localState }}</span>
<span v-else :class="isExpandedFormOpen ? 'px-2' : 'px-0'"> {{ localState }}</span>
<div v-if="showWarningMessage && showValidationError" class="duration-warning">
<div v-if="showWarningMessage && showValidationError" class="duration-warning" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
{{ $t('msg.plsEnterANumber') }}
</div>
</div>

21
packages/nc-gui/components/cell/Email.vue
Unescape View File

@ -10,6 +10,7 @@ import {
inject,
useI18n,
validateEmail,
ReadonlyInj,
} from '#imports'
interface Props {
@ -30,13 +31,15 @@ const editEnabled = inject(EditModeInj)!
const column = inject(ColumnInj)!
// Used in the logic of when to display error since we are not storing the email if it's not valid
const localState = ref(value)
const isSurveyForm = inject(IsSurveyFormInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
// Used in the logic of when to display error since we are not storing the email if it's not valid
const localState = ref(value)
const vModel = computed({
get: () => value,
set: (val) => {
@ -71,7 +74,7 @@ watch(
<template>
<input
v-if="editEnabled"
v-if="!readOnly && editEnabled"
:ref="focus"
v-model="vModel"
class="w-full outline-none text-sm py-1"
@ -87,17 +90,19 @@ watch(
@mousedown.stop
/>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
$t('general.null')
}}</span>
<nuxt-link
v-else-if="validEmail"
no-ref
class="text-sm underline hover:opacity-75 inline-block"
class="py-1 text-sm underline hover:opacity-75 inline-block"
:href="`mailto:${vModel}`"
target="_blank"
>
<LazyCellClampedText :value="vModel" :lines="rowHeight" />
<LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
</nuxt-link>
<LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
<LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
</template>

24
packages/nc-gui/components/cell/PhoneNumber.vue
Unescape View File

@ -17,17 +17,19 @@ const { showNull } = useGlobal()
const { t } = useI18n()
const editEnabled = inject(EditModeInj)!
const editEnabled = inject(EditModeInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const column = inject(ColumnInj)!
const isSurveyForm = inject(IsSurveyFormInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
// Used in the logic of when to display error since we are not storing the phone if it's not valid
const localState = ref(value)
const isSurveyForm = inject(IsSurveyFormInj, ref(false))
const vModel = computed({
get: () => value,
set: (val) => {
@ -38,7 +40,7 @@ const vModel = computed({
},
})
const validEmail = computed(() => vModel.value && isMobilePhone(vModel.value))
const validPhoneNumber = computed(() => vModel.value && isMobilePhone(vModel.value))
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
@ -62,7 +64,7 @@ watch(
<template>
<input
v-if="editEnabled"
v-if="!readOnly && editEnabled"
:ref="focus"
v-model="vModel"
class="w-full outline-none text-sm py-1"
@ -78,17 +80,19 @@ watch(
@mousedown.stop
/>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
$t('general.null')
}}</span>
<a
v-else-if="validEmail"
class="text-sm underline hover:opacity-75"
v-else-if="validPhoneNumber"
class="py-1 text-sm underline hover:opacity-75 inline-block"
:href="`tel:${vModel}`"
target="_blank"
rel="noopener noreferrer"
>
<LazyCellClampedText :value="vModel" :lines="rowHeight" />
<LazyCellClampedText :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
</a>
<LazyCellClampedText v-else :value="vModel" :lines="rowHeight" />
<LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
</template>

1
packages/nc-gui/components/cell/TimePicker.vue
Unescape View File

@ -129,6 +129,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
<template>
<a-time-picker
v-model:value="localState"
:disabled="readOnly"
:show-time="true"
:bordered="false"
use12-hours

27
packages/nc-gui/components/cell/Url.vue
Unescape View File

@ -17,6 +17,7 @@ import {
useCellUrlConfig,
useI18n,
watch,
ReadonlyInj,
} from '#imports'
interface Props {
@ -39,13 +40,15 @@ const isEditColumn = inject(EditColumnInj, ref(false))
const disableOverlay = inject(CellUrlDisableOverlayInj, ref(false))
// Used in the logic of when to display error since we are not storing the url if it's not valid
const localState = ref(value)
const rowHeight = inject(RowHeightInj, ref(undefined))
const isSurveyForm = inject(IsSurveyFormInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
// Used in the logic of when to display error since we are not storing the url if it's not valid
const localState = ref(value)
const vModel = computed({
get: () => value,
set: (val) => {
@ -92,7 +95,7 @@ watch(
<template>
<div class="flex flex-row items-center justify-between w-full h-full">
<input
v-if="editEnabled"
v-if="!readOnly && editEnabled"
:ref="focus"
v-model="vModel"
:placeholder="isEditColumn ? $t('labels.enterDefaultUrlOptional') : ''"
@ -108,31 +111,35 @@ watch(
@mousedown.stop
/>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase"> {{ $t('general.null') }}</span>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">
{{ $t('general.null') }}</span
>
<nuxt-link
v-else-if="isValid && !cellUrlOptions?.overlay"
no-prefetch
no-rel
class="z-3 text-sm underline hover:opacity-75"
class="py-1 z-3 text-sm underline hover:opacity-75"
:to="url"
:target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
>
<LazyCellClampedText :value="value" :lines="rowHeight" />
<LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
</nuxt-link>
<nuxt-link
v-else-if="isValid && !disableOverlay && cellUrlOptions?.overlay"
no-prefetch
no-rel
class="z-3 w-full h-full text-center !no-underline hover:opacity-75"
class="py-1 z-3 w-full h-full text-center !no-underline hover:opacity-75"
:to="url"
:target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
>
<LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" />
<LazyCellClampedText :value="cellUrlOptions.overlay" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'" />
</nuxt-link>
<span v-else class="w-9/10 overflow-ellipsis overflow-hidden"><LazyCellClampedText :value="value" :lines="rowHeight" /></span>
<span v-else class="w-9/10 overflow-ellipsis overflow-hidden"
><LazyCellClampedText :value="value" :lines="rowHeight" :class="isExpandedFormOpen ? 'px-2' : 'px-0'"
/></span>
<div v-if="column.meta?.validate && !isValid && value?.length && !editEnabled" class="mr-1 w-1/10">
<a-tooltip placement="top">

Write Preview
Loading…
Cancel
Save