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

fix(nc-gui): disable fields edit if its readonly

pull/7466/head
Ramesh Mane 7 months ago
parent
cec3682fc4
commit
8e9b9701d0
8 changed files with 55 additions and 32 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. 12
      packages/nc-gui/components/cell/Decimal.vue
  2. 12
      packages/nc-gui/components/cell/Integer.vue
  3. 4
      packages/nc-gui/components/cell/Json.vue
  4. 17
      packages/nc-gui/components/cell/Percent.vue
  5. 5
      packages/nc-gui/components/cell/Rating.vue
  6. 16
      packages/nc-gui/components/cell/Text.vue
  7. 10
      packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
  8. 11
      packages/nc-gui/components/virtual-cell/components/ListItem.vue

12
packages/nc-gui/components/cell/Decimal.vue
Unescape View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
import type { VNodeRef } from '@vue/runtime-core'
import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel } from '#imports'
import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel, ReadonlyInj } from '#imports'
interface Props {
// when we set a number, then it is number type
@ -25,6 +25,8 @@ const column = inject(ColumnInj, null)!
const isEditColumn = inject(EditColumnInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
const domRef = ref<HTMLElement>()
const meta = computed(() => {
@ -94,7 +96,7 @@ watch(isExpandedFormOpen, () => {
<template>
<input
v-if="editEnabled"
v-if="!readOnly && editEnabled"
:ref="focus"
v-model="vModel"
class="outline-none py-1 border-none rounded-md w-full h-full !text-sm"
@ -112,8 +114,10 @@ watch(isExpandedFormOpen, () => {
@selectstart.capture.stop
@mousedown.stop
/>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
<span v-else class="text-sm">{{ displayValue }}</span>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
$t('general.null')
}}</span>
<span v-else class="text-sm" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{ displayValue }}</span>
</template>
<style scoped lang="scss">

12
packages/nc-gui/components/cell/Integer.vue
Unescape View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core'
import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel } from '#imports'
import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel, ReadonlyInj } from '#imports'
interface Props {
// when we set a number, then it is number type
@ -23,6 +23,8 @@ const editEnabled = inject(EditModeInj)
const isEditColumn = inject(EditColumnInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
const _vModel = useVModel(props, 'modelValue', emits)
const displayValue = computed(() => {
@ -85,7 +87,7 @@ function onKeyDown(e: any) {
<template>
<input
v-if="editEnabled"
v-if="!readOnly && editEnabled"
:ref="focus"
v-model="vModel"
class="outline-none py-1 border-none w-full h-full text-sm"
@ -103,8 +105,10 @@ function onKeyDown(e: any) {
@selectstart.capture.stop
@mousedown.stop
/>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
<span v-else class="text-sm">{{ displayValue }}</span>
<span v-else-if="vModel === null && showNull" class="nc-null uppercase" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{
$t('general.null')
}}</span>
<span v-else class="text-sm" :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{ displayValue }}</span>
</template>
<style scoped lang="scss">

4
packages/nc-gui/components/cell/Json.vue
Unescape View File

@ -35,7 +35,7 @@ const active = inject(ActiveCellInj, ref(false))
const isForm = inject(IsFormInj, ref(false))
const readonly = inject(ReadonlyInj)
const readOnly = inject(ReadonlyInj, ref(false))
const vModel = useVModel(props, 'modelValue', emits)
@ -158,7 +158,7 @@ watch(isExpanded, () => {
:footer="null"
:wrap-class-name="isExpanded ? '!z-1051' : null"
>
<div v-if="editEnabled && !readonly" class="flex flex-col w-full" @mousedown.stop @mouseup.stop @click.stop>
<div v-if="editEnabled && !readOnly" class="flex flex-col w-full" @mousedown.stop @mouseup.stop @click.stop>
<div class="flex flex-row justify-between pt-1 pb-2 nc-json-action" @mousedown.stop>
<a-button type="text" size="small" @click="isExpanded = !isExpanded">
<CilFullscreenExit v-if="isExpanded" class="h-2.5" />

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core'
import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel } from '#imports'
import { EditColumnInj, EditModeInj, IsExpandedFormOpenInj, IsFormInj, inject, useVModel, ReadonlyInj } from '#imports'
interface Props {
modelValue?: number | string | null
@ -14,10 +14,12 @@ const { showNull } = useGlobal()
const column = inject(ColumnInj)!
const editEnabled = inject(EditModeInj)
const editEnabled = inject(EditModeInj, ref(false))
const isEditColumn = inject(EditColumnInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
const _vModel = useVModel(props, 'modelValue', emits)
const wrapperRef = ref<HTMLElement>()
@ -118,14 +120,15 @@ const onTabPress = (e: KeyboardEvent) => {
<template>
<div
ref="wrapperRef"
tabindex="0"
:tabindex="readOnly ? -1 : 0"
class="nc-filter-value-select w-full focus:outline-transparent"
:class="readOnly ? 'cursor-not-allowed pointer-events-none' : ''"
@mouseover="onMouseover"
@mouseleave="onMouseleave"
@focus="onWrapperFocus"
>
<input
v-if="editEnabled"
v-if="!readOnly && editEnabled && expandedEditEnabled"
:ref="focus"
v-model="vModel"
class="w-full !text-sm !border-none !outline-none focus:ring-0 text-base py-1"
@ -143,7 +146,9 @@ const onTabPress = (e: KeyboardEvent) => {
@selectstart.capture.stop
@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>
<div v-else-if="percentMeta.is_progress === true && vModel !== null && vModel !== undefined" class="px-2">
<a-progress
:percent="Number(parseFloat(vModel.toString()).toFixed(2))"
@ -155,7 +160,7 @@ const onTabPress = (e: KeyboardEvent) => {
/>
</div>
<!-- nbsp to keep height even if vModel is zero length -->
<span v-else>{{ vModel }}&nbsp;</span>
<span v-else :class="isExpandedFormOpen ? 'px-2' : 'px-0'">{{ vModel }}&nbsp;</span>
</div>
</template>

5
packages/nc-gui/components/cell/Rating.vue
Unescape View File

@ -7,6 +7,7 @@ import {
inject,
parseProp,
useSelectedCellKeyupListener,
ReadonlyInj,
} from '#imports'
interface Props {
@ -19,7 +20,7 @@ const emits = defineEmits(['update:modelValue'])
const column = inject(ColumnInj)!
const readonly = inject(ReadonlyInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
@ -73,7 +74,7 @@ watch(rateDomRef, () => {
<a-rate
ref="rateDomRef"
v-model:value="vModel"
:disabled="readonly"
:disabled="readOnly"
:count="ratingMeta.max"
:style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 5px'};`"
@keydown="onKeyPress"

16
packages/nc-gui/components/cell/Text.vue
Unescape View File

@ -28,7 +28,7 @@ const isEditColumn = inject(EditColumnInj, ref(false))
const rowHeight = inject(RowHeightInj, ref(undefined))
const readonly = inject(ReadonlyInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
const vModel = useVModel(props, 'modelValue', emits)
@ -42,7 +42,7 @@ const focus: VNodeRef = (el) =>
<template>
<input
v-if="!readonly && editEnabled"
v-if="!readOnly && editEnabled"
:ref="focus"
v-model="vModel"
class="h-full w-full outline-none py-1 bg-transparent"
@ -58,7 +58,15 @@ const focus: VNodeRef = (el) =>
@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>
<LazyCellClampedText v-else :value="vModel" :lines="rowHeight" :style="{ 'word-break': 'break-word' }" />
<LazyCellClampedText
v-else
:value="vModel"
:lines="rowHeight"
:style="{ 'word-break': 'break-word' }"
:class="isExpandedFormOpen ? 'px-2' : 'px-0'"
/>
</template>

10
packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
Unescape View File

@ -39,7 +39,7 @@ const isPublic = inject(IsPublicInj, ref(false))
const injectedColumn = inject(ColumnInj, ref())
const readonly = inject(ReadonlyInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
const { isSharedBase } = storeToRefs(useBase())
@ -107,7 +107,7 @@ const expandedFormRow = ref({})
const colTitle = computed(() => injectedColumn.value?.title || '')
const onClick = (row: Row) => {
if (readonly.value) return
if (readOnly.value) return
expandedFormRow.value = row
expandedFormDlg.value = true
}
@ -166,7 +166,7 @@ const isDataExist = computed<boolean>(() => {
const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
if (isSharedBase.value) return
if (readonly.value) return
if (readOnly.value) return
if (isPublic.value && !isForm.value) return
if (isNew.value || isChildrenListLinked.value[parseInt(id)]) {
@ -276,7 +276,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
{{ relatedTableMeta?.title }}
</p>
<NcButton
v-if="!readonly && childrenListCount < 1"
v-if="!readOnly && childrenListCount < 1"
v-e="['c:links:link']"
data-testid="nc-child-list-button-link-to"
@click="emit('attachRecord')"
@ -322,7 +322,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
<div class="flex flex-row gap-2">
<NcButton v-if="!isForm" type="ghost" class="nc-close-btn" @click="vModel = false"> {{ $t('general.finish') }} </NcButton>
<NcButton
v-if="!readonly && childrenListCount > 0"
v-if="!readOnly && childrenListCount > 0"
v-e="['c:links:link']"
data-testid="nc-child-list-button-link-to"
@click="emit('attachRecord')"

11
packages/nc-gui/components/virtual-cell/components/ListItem.vue
Unescape View File

@ -13,6 +13,7 @@ import {
ref,
useAttachment,
useVModel,
ReadonlyInj,
} from '#imports'
import MaximizeIcon from '~icons/nc-icons/maximize'
import LinkIcon from '~icons/nc-icons/link'
@ -39,7 +40,7 @@ const row = useVModel(props, 'row')
const isPublic = inject(IsPublicInj, ref(false))
const readonly = inject(ReadonlyInj, ref(false))
const readOnly = inject(ReadonlyInj, ref(false))
const { getPossibleAttachmentSrc } = useAttachment()
@ -93,7 +94,7 @@ const displayValue = computed(() => {
'!bg-white': isLoading,
'!border-1': isLinked && !isLoading,
'!hover:border-gray-400': !isLinked,
'!cursor-auto !hover:bg-white': readonly,
'!cursor-auto !hover:bg-white': readOnly,
}"
:body-style="{ padding: 0 }"
:hoverable="false"
@ -126,7 +127,7 @@ const displayValue = computed(() => {
v-if="isLinked && !isLoading"
class="text-brand-500 text-0.875"
:class="{
'!group-hover:mr-12': fields.length === 0 && !readonly,
'!group-hover:mr-12': fields.length === 0 && !readOnly,
}"
>
<LinkIcon class="w-4 h-4" />
@ -135,7 +136,7 @@ const displayValue = computed(() => {
<MdiLoading
v-else-if="isLoading"
:class="{
'!group-hover:mr-8': fields.length === 0 && !readonly,
'!group-hover:mr-8': fields.length === 0 && !readOnly,
}"
class="w-6 h-6 !text-brand-500 animate-spin"
/>
@ -174,7 +175,7 @@ const displayValue = computed(() => {
</div>
</div>
<NcButton
v-if="!isForm && !isPublic && !readonly"
v-if="!isForm && !isPublic && !readOnly"
v-e="['c:row-expand:open']"
type="text"
size="lg"

Write Preview
Loading…
Cancel
Save