Browse Source

fix: avoid edit mode for select columns

Signed-off-by: mertmit <mertmit99@gmail.com>
pull/5847/head
mertmit 1 year ago
parent
commit
4d79a04923
  1. 6
      packages/nc-gui/components/cell/MultiSelect.vue
  2. 14
      packages/nc-gui/components/cell/SingleSelect.vue
  3. 4
      packages/nc-gui/components/smartsheet/Grid.vue

6
packages/nc-gui/components/cell/MultiSelect.vue

@ -47,8 +47,6 @@ const readOnly = inject(ReadonlyInj)!
const active = inject(ActiveCellInj, ref(false)) const active = inject(ActiveCellInj, ref(false))
const editable = inject(EditModeInj, ref(false))
const isPublic = inject(IsPublicInj, ref(false)) const isPublic = inject(IsPublicInj, ref(false))
const isForm = inject(IsFormInj, ref(false)) const isForm = inject(IsFormInj, ref(false))
@ -96,7 +94,7 @@ const isOptionMissing = computed(() => {
const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true)) const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || editable.value)) const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && active.value)
const vModel = computed({ const vModel = computed({
get: () => { get: () => {
@ -331,7 +329,7 @@ const selectedOpts = computed(() => {
<template> <template>
<div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu"> <div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
<div <div
v-if="!editable && !active" v-if="!active"
class="flex flex-wrap" class="flex flex-wrap"
:style="{ :style="{
'display': '-webkit-box', 'display': '-webkit-box',

14
packages/nc-gui/components/cell/SingleSelect.vue

@ -42,8 +42,6 @@ const readOnly = inject(ReadonlyInj)!
const active = inject(ActiveCellInj, ref(false)) const active = inject(ActiveCellInj, ref(false))
const editable = inject(EditModeInj, ref(false))
const aselect = ref<typeof AntSelect>() const aselect = ref<typeof AntSelect>()
const isOpen = ref(false) const isOpen = ref(false)
@ -92,7 +90,7 @@ const isOptionMissing = computed(() => {
const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true)) const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && (active.value || editable.value)) const editAllowed = computed(() => (hasEditRoles.value || isForm.value) && active.value)
const vModel = computed({ const vModel = computed({
get: () => tempSelectedOptState.value ?? modelValue, get: () => tempSelectedOptState.value ?? modelValue,
@ -200,7 +198,7 @@ const search = () => {
// prevent propagation of keydown event if select is open // prevent propagation of keydown event if select is open
const onKeydown = (e: KeyboardEvent) => { const onKeydown = (e: KeyboardEvent) => {
if (isOpen.value && (active.value || editable.value)) { if (isOpen.value && active.value) {
e.stopPropagation() e.stopPropagation()
} }
if (e.key === 'Enter') { if (e.key === 'Enter') {
@ -253,7 +251,7 @@ const selectedOpt = computed(() => {
<template> <template>
<div class="h-full w-full flex items-center nc-single-select" :class="{ 'read-only': readOnly }" @click="toggleMenu"> <div class="h-full w-full flex items-center nc-single-select" :class="{ 'read-only': readOnly }" @click="toggleMenu">
<div v-if="!editable && !active"> <div v-if="!active">
<a-tag v-if="selectedOpt" class="rounded-tag" :color="selectedOpt.color"> <a-tag v-if="selectedOpt" class="rounded-tag" :color="selectedOpt.color">
<span <span
:style="{ :style="{
@ -279,9 +277,9 @@ const selectedOpt = computed(() => {
:bordered="false" :bordered="false"
:open="isOpen && editAllowed" :open="isOpen && editAllowed"
:disabled="readOnly || !editAllowed" :disabled="readOnly || !editAllowed"
:show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel === null))" :show-arrow="hasEditRoles && !readOnly && active && vModel === null"
:dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && (active || editable) ? 'active' : ''}`" :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && active ? 'active' : ''}`"
:show-search="isOpen && (active || editable)" :show-search="isOpen && active"
@select="onSelect" @select="onSelect"
@keydown="onKeydown($event)" @keydown="onKeydown($event)"
@search="search" @search="search"

4
packages/nc-gui/components/smartsheet/Grid.vue

@ -594,6 +594,10 @@ function makeEditable(row: Row, col: ColumnType) {
return return
} }
if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(col.uidt as UITypes)) {
return
}
return (editEnabled = true) return (editEnabled = true)
} }

Loading…
Cancel
Save