From a0cd87818783bdfa07f5445a5761607e8395ac55 Mon Sep 17 00:00:00 2001 From: Pranav C Date: Thu, 17 Nov 2022 12:25:30 +0530 Subject: [PATCH] fix(gui): make select field editable in form view Signed-off-by: Pranav C --- .../nc-gui/components/cell/MultiSelect.vue | 9 +++++---- .../nc-gui/components/cell/SingleSelect.vue | 19 ++++++++++++++++--- .../smartsheet/expanded-form/index.vue | 2 +- 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue index 6d5d704321..f3f09fecba 100644 --- a/packages/nc-gui/components/cell/MultiSelect.vue +++ b/packages/nc-gui/components/cell/MultiSelect.vue @@ -5,6 +5,7 @@ import type { SelectOptionType, SelectOptionsType } from 'nocodb-sdk' import { ActiveCellInj, ColumnInj, + EditModeInj, IsKanbanInj, ReadonlyInj, computed, @@ -36,6 +37,8 @@ const readOnly = inject(ReadonlyInj)! const active = inject(ActiveCellInj, ref(false)) +const editable = inject(EditModeInj, ref(false)) + const selectedIds = ref([]) const aselect = ref() @@ -86,8 +89,6 @@ const selectedTitles = computed(() => : [], ) -const v = Math.floor(Math.random() * 1000) - const handleClose = (e: MouseEvent) => { if (aselect.value && !aselect.value.$el.contains(e.target)) { isOpen.value = false @@ -157,7 +158,7 @@ useSelectedCellKeyupListener(active, (e) => { :class="{ '!ml-[-8px]': readOnly }" :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`" @keydown.enter.stop - @click="isOpen = active && !isOpen" + @click="isOpen = (active || editable) && !isOpen" > { class="rounded-tag" :style="{ display: 'flex', alignItems: 'center' }" :color="options.find((el) => el.title === val)?.color" - :closable="active && (vModel.length > 1 || !column?.rqd)" + :closable="(active || editable) && (vModel.length > 1 || !column?.rqd)" :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })" @close="onClose" > diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue index cf7615bf05..b7561d2e97 100644 --- a/packages/nc-gui/components/cell/SingleSelect.vue +++ b/packages/nc-gui/components/cell/SingleSelect.vue @@ -2,7 +2,18 @@ import tinycolor from 'tinycolor2' import type { Select as AntSelect } from 'ant-design-vue' import type { SelectOptionType } from 'nocodb-sdk' -import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports' +import { + ActiveCellInj, + ColumnInj, + EditModeInj, + IsKanbanInj, + ReadonlyInj, + computed, + inject, + ref, + useEventListener, + watch, +} from '#imports' import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener' interface Props { @@ -20,6 +31,8 @@ const readOnly = inject(ReadonlyInj)! const active = inject(ActiveCellInj, ref(false)) +const editable = inject(EditModeInj, ref(false)) + const aselect = ref() const isOpen = ref(false) @@ -85,11 +98,11 @@ useSelectedCellKeyupListener(active, (e) => { :bordered="false" :open="isOpen" :disabled="readOnly" - :show-arrow="!readOnly && (active || vModel === null)" + :show-arrow="!readOnly && (active || editable || vModel === null)" :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`" @select="isOpen = false" @keydown.enter.stop - @click="isOpen = active && !isOpen" + @click="isOpen = (active || editable) && !isOpen" >