@@ -318,7 +335,7 @@ const onTagClick = (e: Event, onClose: Function) => {
class="rounded-tag nc-selected-option"
:style="{ display: 'flex', alignItems: 'center' }"
:color="options.find((el) => el.title === val)?.color"
- :closable="(active || editable) && (vModel.length > 1 || !column?.rqd)"
+ :closable="editAllowed && (active || editable) && (vModel.length > 1 || !column?.rqd)"
:close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
@click="onTagClick($event, onClose)"
@close="onClose"
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 5258ffe327..60c6387fba 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -14,6 +14,7 @@ import {
extractSdkResponseErrorMsg,
inject,
ref,
+ useRoles,
useSelectedCellKeyupListener,
watch,
} from '#imports'
@@ -49,6 +50,8 @@ const searchVal = ref()
const { getMeta } = useMetas()
+const { hasRole } = useRoles()
+
const { isPg, isMysql } = useProject()
// a variable to keep newly created option value
@@ -73,6 +76,10 @@ const isOptionMissing = computed(() => {
return (options.value ?? []).every((op) => op.title !== searchVal.value)
})
+const hasEditRoles = computed(() => hasRole('owner', true) || hasRole('creator', true) || hasRole('editor', true))
+
+const editAllowed = computed(() => hasEditRoles.value && (active.value || editable.value))
+
const vModel = computed({
get: () => tempSelectedOptState.value ?? modelValue,
set: (val) => {
@@ -87,10 +94,12 @@ const vModel = computed({
})
watch(isOpen, (n, _o) => {
- if (!n) {
- aselect.value?.$el?.querySelector('input')?.blur()
- } else {
- aselect.value?.$el?.querySelector('input')?.focus()
+ if (editAllowed.value) {
+ if (!n) {
+ aselect.value?.$el?.querySelector('input')?.blur()
+ } else {
+ aselect.value?.$el?.querySelector('input')?.focus()
+ }
}
})
@@ -100,11 +109,15 @@ useSelectedCellKeyupListener(active, (e) => {
isOpen.value = false
break
case 'Enter':
- if (active.value && !isOpen.value) {
+ if (editAllowed.value && active.value && !isOpen.value) {
isOpen.value = true
}
break
default:
+ if (!editAllowed.value) {
+ e.preventDefault()
+ break
+ }
// toggle only if char key pressed
if (!(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) && e.key?.length === 1) {
e.stopPropagation()
@@ -174,7 +187,7 @@ const toggleMenu = (e: Event) => {
vModel.value = ''
return
}
- isOpen.value = (active.value || editable.value) && !isOpen.value
+ isOpen.value = editAllowed.value && !isOpen.value
}
@@ -183,11 +196,12 @@ const toggleMenu = (e: Event) => {
ref="aselect"
v-model:value="vModel"
class="w-full"
- :allow-clear="!column.rqd && active"
+ :class="{ 'caret-transparent': !hasEditRoles }"
+ :allow-clear="!column.rqd && editAllowed"
:bordered="false"
- :open="isOpen && (active || editable)"
+ :open="isOpen"
:disabled="readOnly"
- :show-arrow="!readOnly && (active || editable || vModel === null)"
+ :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel === null))"
:dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
show-search
@select="isOpen = false"
@@ -216,8 +230,11 @@ const toggleMenu = (e: Event) => {
-
-
+
@@ -240,4 +257,4 @@ const toggleMenu = (e: Event) => {
:deep(.ant-select-clear) {
opacity: 1;
}
-
+
\ No newline at end of file