Browse Source

fix(gui): show pointer for select field if not readonly

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4957/head
Pranav C 2 years ago
parent
commit
e708465697
  1. 25
      packages/nc-gui/components/cell/MultiSelect.vue

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

@ -233,7 +233,7 @@ async function addIfMissingAndSave() {
// Mysql escapes single quotes with backslash so we keep quotes but others have to unescaped // Mysql escapes single quotes with backslash so we keep quotes but others have to unescaped
if (!isMysql(column.value.base_id)) { if (!isMysql(column.value.base_id)) {
updatedColMeta.cdf = updatedColMeta.cdf.replace(/''/g, '\'') updatedColMeta.cdf = updatedColMeta.cdf.replace(/''/g, "'")
} }
} }
@ -276,8 +276,11 @@ const onTagClick = (e: Event, onClose: Function) => {
</script> </script>
<template> <template>
<div class="nc-multi-select h-full w-full flex items-center" <div
@click="isOpen = editAllowed && !isOpen" :class="{ 'read-only': readOnly }"> class="nc-multi-select h-full w-full flex items-center"
:class="{ 'read-only': readOnly }"
@click="isOpen = editAllowed && !isOpen"
>
<a-select <a-select
ref="aselect" ref="aselect"
v-model:value="vModel" v-model:value="vModel"
@ -287,9 +290,8 @@ const onTagClick = (e: Event, onClose: Function) => {
clear-icon clear-icon
show-search show-search
:show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel.length === 0))" :show-arrow="hasEditRoles && !readOnly && (editable || (active && vModel.length === 0))"
:open="isOpen && (active || editable)" :open="isOpen && editAllowed"
@update:open="isOpen = $event" :disabled="readOnly || !editAllowed"
:disabled="readOnly || !(active || editable)"
:class="{ '!ml-[-8px]': readOnly, 'caret-transparent': !hasEditRoles }" :class="{ '!ml-[-8px]': readOnly, 'caret-transparent': !hasEditRoles }"
:dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`" :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
@search="search" @search="search"
@ -336,7 +338,7 @@ const onTagClick = (e: Event, onClose: Function) => {
class="rounded-tag nc-selected-option" class="rounded-tag nc-selected-option"
:style="{ display: 'flex', alignItems: 'center' }" :style="{ display: 'flex', alignItems: 'center' }"
:color="options.find((el) => el.title === val)?.color" :color="options.find((el) => el.title === val)?.color"
:closable="editAllowed && (active || editable) && (vModel.length > 1 || !column?.rqd)" :closable="editAllowed && (vModel.length > 1 || !column?.rqd)"
:close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })" :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
@click="onTagClick($event, onClose)" @click="onTagClick($event, onClose)"
@close="onClose" @close="onClose"
@ -363,7 +365,7 @@ const onTagClick = (e: Event, onClose: Function) => {
</div> </div>
</template> </template>
<style scoped> <style scoped lang="scss">
.ms-close-icon { .ms-close-icon {
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
cursor: pointer; cursor: pointer;
@ -408,4 +410,11 @@ const onTagClick = (e: Event, onClose: Function) => {
:deep(.ant-select-selection-overflow) { :deep(.ant-select-selection-overflow) {
@apply flex-nowrap; @apply flex-nowrap;
} }
.nc-multi-select:not(.read-only) {
:deep(.ant-select-selector),
:deep(.ant-select-selector input) {
@apply "!cursor-pointer";
}
}
</style> </style>

Loading…
Cancel
Save