多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

185 lines
5.1 KiB

<script lang="ts" setup>
import type { ColumnType } from 'nocodb-sdk'
const props = defineProps<{
// As we need to focus search box when the parent is opened
isParentOpen: boolean
toolbarMenu: 'groupBy' | 'sort' | 'globalSearch'
searchInputPlaceholder?: string
selectedOptionId?: string
options: ColumnType[]
showSelectedOption?: boolean
}>()
const emits = defineEmits<{ selected: [ColumnType] }>()
const { isParentOpen, toolbarMenu, searchInputPlaceholder, selectedOptionId, options, showSelectedOption } = toRefs(props)
const searchQuery = ref('')
const filteredOptions = computed(
() => options.value?.filter((c: ColumnType) => c.title?.toLowerCase().includes(searchQuery.value.toLowerCase())) ?? [],
)
const inputRef = ref()
const activeFieldIndex = ref(-1)
const configByToolbarMenu = computed(() => {
switch (toolbarMenu.value) {
case 'groupBy':
return {
selectOptionEvent: ['c:group-by:add:column:select'],
optionClassName: 'nc-group-by-column-search-item',
}
case 'sort':
return {
selectOptionEvent: ['c:sort:add:column:select'],
optionClassName: 'nc-sort-column-search-item',
}
case 'globalSearch':
return {
selectOptionEvent: ['c:search:field:select'],
optionClassName: '',
}
default:
return {
selectOptionEvent: undefined,
optionClassName: '',
}
}
})
const onClick = (column: ColumnType) => {
if (!column) return
emits('selected', column)
}
const handleAutoScrollOption = () => {
const option = document.querySelector('.nc-field-list-option-active')
if (option) {
setTimeout(() => {
option?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}, 50)
}
}
const onArrowDown = () => {
activeFieldIndex.value = Math.min(activeFieldIndex.value + 1, filteredOptions.value.length - 1)
handleAutoScrollOption()
}
const onArrowUp = () => {
activeFieldIndex.value = Math.max(activeFieldIndex.value - 1, 0)
handleAutoScrollOption()
}
const handleKeydownEnter = () => {
if (filteredOptions.value[activeFieldIndex.value]) {
onClick(filteredOptions.value[activeFieldIndex.value])
} else if (filteredOptions.value[0]) {
onClick(filteredOptions.value[activeFieldIndex.value])
}
}
onMounted(() => {
searchQuery.value = ''
activeFieldIndex.value = -1
})
watch(
isParentOpen,
() => {
if (!isParentOpen.value) return
searchQuery.value = ''
setTimeout(() => {
inputRef.value?.focus()
}, 100)
},
{
immediate: true,
},
)
</script>
<template>
<div
class="flex flex-col pt-2 w-64"
@keydown.arrow-down.prevent="onArrowDown"
@keydown.arrow-up.prevent="onArrowUp"
@keydown.enter.prevent="onClick(filteredOptions[activeFieldIndex])"
>
<div class="w-full pb-2 px-2" @click.stop>
<a-input
ref="inputRef"
v-model:value="searchQuery"
:placeholder="searchInputPlaceholder || $t('placeholder.searchFields')"
class="nc-toolbar-dropdown-search-field-input"
@keydown.enter.stop="handleKeydownEnter"
@change="activeFieldIndex = 0"
>
<template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
></a-input>
</div>
<div class="nc-field-list-wrapper flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
<div v-if="!filteredOptions.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
<img
src="~assets/img/placeholder/no-search-result-found.png"
class="!w-[164px] flex-none"
alt="No search results found"
/>
{{ options.length ? $t('title.noResultsMatchedYourSearch') : 'The list is empty' }}
</div>
<div
v-for="(option, index) in filteredOptions"
:key="index"
v-e="configByToolbarMenu.selectOptionEvent"
class="flex w-full py-[5px] items-center justify-between px-2 hover:bg-gray-100 cursor-pointer rounded-md"
:class="[
`${configByToolbarMenu.optionClassName}`,
`nc-field-list-option-${index}`,
{
'bg-gray-100 nc-field-list-option-active': activeFieldIndex === index,
},
]"
@click="onClick(option)"
>
<div
class="flex items-center gap-x-1.5"
:class="{
'max-w-[calc(100%_-_28px)]': showSelectedOption,
'max-w-full': !showSelectedOption,
}"
>
<SmartsheetHeaderIcon :column="option" class="!w-3.5 !h-3.5 !text-gray-500" />
<NcTooltip class="truncate" show-on-truncate-only>
<template #title> {{ option.title }}</template>
<span>
{{ option.title }}
</span>
</NcTooltip>
</div>
<GeneralIcon
v-if="showSelectedOption && option.id === selectedOptionId"
id="nc-selected-item-icon"
icon="check"
class="flex-none text-primary w-4 h-4"
/>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.nc-field-list-wrapper {
max-height: min(400px, calc(100vh - 120px));
}
</style>