diff --git a/components/Toolbar.vue b/components/Toolbar.vue index 7948e63..1c6a491 100644 --- a/components/Toolbar.vue +++ b/components/Toolbar.vue @@ -24,6 +24,23 @@ :key="group.name" v-if="group.fields.length > 0" > + + + + @@ -80,7 +97,9 @@ export default { return { columnPresets: columnPresets, filterPresets: filterPresets, - fieldGroupsOpened: {} + fieldGroupsOpened: {}, + completionProcess: false, + fieldQuery: "" }; }, @@ -97,6 +116,10 @@ export default { return this.$store.state.availableFields; }, + allFields() { + return this.$store.state.allFields; + }, + // раскладывает поля по группам, с дублированием fieldGroups() { let groups = { unnamed: { name: "", fields: [] } }; @@ -159,6 +182,45 @@ export default { return this.fields.findIndex(column => { return field && column.name == field.name; }); + }, + + // автодополнение названия поля + fieldComplete(q, cb) { + if (!q || this.completionProcess) return cb([]); + + this.completionProcess = true; + setTimeout(() => { + this.completionProcess = false; + }, 500); + + // field name completion + const fields = + this.$store.state.availableFields.length > 0 + ? this.$store.state.availableFields + : this.allFields; + const matchFields = fields.filter( + filter => + filter.name.includes(q) || + filter.comment.toLowerCase().includes(q.toLowerCase()) + ); + const sortedFields = matchFields.sort((a, b) => + a.name > b.name ? 1 : b.name > a.name ? -1 : 0 + ); + cb(sortedFields); + }, + + // выбор автодополнения + fieldSelect(field) { + this.$refs.input.focus(); + this.fieldQuery = ""; + + // const field = this.allFields.find(field => field.name == q); + if (field) this.toggleField(field); + + // без этого сразу фильтрует при вводе имени + setTimeout(() => { + this.completionProcess = false; + }, 500); } } };