Browse Source

enhancement: open autocomplete menu on focus

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2191/head
Pranav C 2 years ago
parent
commit
09803df03f
  1. 32
      packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue
  2. 66
      packages/nc-gui/components/project/spreadsheet/components/FieldListAutoCompleteDropdown.vue
  3. 31
      packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue

32
packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue

@ -92,36 +92,16 @@
</template> </template>
</v-select> </v-select>
<v-autocomplete <field-list-auto-complete-dropdown
:key="i + '_6'" :key="i + '_6'"
v-model="filter.fk_column_id" v-model="filter.fk_column_id"
class="caption nc-filter-field-select" class="caption nc-filter-field-select"
:items="columns" :columns="columns"
:placeholder="$t('objects.field')"
solo
flat
dense
:disabled="filter.readOnly" :disabled="filter.readOnly"
hide-details
item-value="id"
item-text="title"
@click.stop @click.stop
@change="saveOrUpdate(filter, i)" @change="saveOrUpdate(filter, i)"
> />
<template #item="{ item }">
<span :class="`caption font-weight-regular nc-filter-fld-${item.title}`">
<v-icon small class="mr-1">
{{ item.icon }}
</v-icon>
{{ item.title }}
</span>
</template>
<template #selection="{item}">
<v-icon small class="mr-1">
{{ item.icon }}
</v-icon> {{ item.title }}
</template>
</v-autocomplete>
<v-select <v-select
:key="'k' + i" :key="'k' + i"
v-model="filter.comparison_op" v-model="filter.comparison_op"
@ -189,9 +169,13 @@
<script> <script>
import { getUIDTIcon, UITypes } from '~/components/project/spreadsheet/helpers/uiTypes' import { getUIDTIcon, UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
import FieldListAutoCompleteDropdown from '~/components/project/spreadsheet/components/FieldListAutoCompleteDropdown'
export default { export default {
name: 'ColumnFilter', name: 'ColumnFilter',
components: {
FieldListAutoCompleteDropdown
},
props: { props: {
fieldList: [Array], fieldList: [Array],
meta: Object, meta: Object,

66
packages/nc-gui/components/project/spreadsheet/components/FieldListAutoCompleteDropdown.vue

@ -0,0 +1,66 @@
<template>
<v-autocomplete
ref="field"
v-model="localValue"
class="caption"
:items="columns"
item-value="id"
item-text="title"
:label="$t('objects.field')"
solo
flat
dense
hide-details
@click.stop
@change="$emit('change')"
>
<template #selection="{item}">
<v-icon small class="mr-1">
{{ item.icon }}
</v-icon> {{ item.title }}
</template>
<template #item="{ item }">
<span
:class="`caption font-weight-regular nc-fld-${item.title}`"
>
<v-icon color="grey" small class="mr-1">
{{ item.icon }}
</v-icon>
{{ item.title }}
</span>
</template>
</v-autocomplete>
</template>
<script>
export default {
name: 'FieldListAutoCompleteDropdown',
props: {
columns: Array,
value: String
},
computed: {
localValue: {
set(v) {
this.$emit('input', v)
},
get() {
return this.value
}
}
},
mounted() {
const autocompleteInput = this.$refs.field.$refs.input
autocompleteInput.addEventListener('focus', this.onFocus, true)
},
methods: {
onFocus(e) {
this.$refs.field.isMenuActive = true // open item list
}
}
}
</script>
<style scoped>
</style>

31
packages/nc-gui/components/project/spreadsheet/components/SortListMenu.vue

@ -41,37 +41,14 @@
mdi-close-box mdi-close-box
</v-icon> </v-icon>
<v-autocomplete <field-list-auto-complete-dropdown
:key="i + 'sel1'" :key="i + 'sel1'"
v-model="sort.fk_column_id" v-model="sort.fk_column_id"
class="caption nc-sort-field-select" class="caption nc-sort-field-select"
:items="columns" :columns="columns"
item-value="id"
item-text="title"
:label="$t('objects.field')"
solo
flat
dense
hide-details
@click.stop @click.stop
@change="saveOrUpdate(sort, i)" @change="saveOrUpdate(sort, i)"
> />
<template #selection="{item}">
<v-icon small class="mr-1">
{{ item.icon }}
</v-icon> {{ item.title }}
</template>
<template #item="{ item }">
<span
:class="`caption font-weight-regular nc-sort-fld-${item.title}`"
>
<v-icon color="grey darken-4" small class="mr-1">
{{ item.icon }}
</v-icon>
{{ item.title }}
</span>
</template>
</v-autocomplete>
<v-select <v-select
:key="i + 'sel2'" :key="i + 'sel2'"
v-model="sort.direction" v-model="sort.direction"
@ -108,9 +85,11 @@
<script> <script>
import { RelationTypes, UITypes } from 'nocodb-sdk' import { RelationTypes, UITypes } from 'nocodb-sdk'
import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes' import { getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
import FieldListAutoCompleteDropdown from '~/components/project/spreadsheet/components/FieldListAutoCompleteDropdown'
export default { export default {
name: 'SortListMenu', name: 'SortListMenu',
components: { FieldListAutoCompleteDropdown },
props: { props: {
fieldList: Array, fieldList: Array,
value: [Array, Object], value: [Array, Object],

Loading…
Cancel
Save