mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 07:26:15 +08:00
Fix long search query [SCI-10694]
This commit is contained in:
parent
4573fb6e92
commit
459989b61e
|
@ -2,7 +2,7 @@
|
||||||
<div class="content-pane flexible with-grey-background">
|
<div class="content-pane flexible with-grey-background">
|
||||||
<div class="content-header">
|
<div class="content-header">
|
||||||
<div class="title-row">
|
<div class="title-row">
|
||||||
<h1 class="mt-0">
|
<h1 class="mt-0 truncate !inline">
|
||||||
{{ i18n.t('search.index.results_title_html', { query: localQuery }) }}
|
{{ i18n.t('search.index.results_title_html', { query: localQuery }) }}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
@ -103,7 +103,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* global HelperModule */
|
/* global HelperModule GLOBAL_CONSTANTS */
|
||||||
|
|
||||||
import FoldersComponent from './groups/folders.vue';
|
import FoldersComponent from './groups/folders.vue';
|
||||||
import ProjectsComponent from './groups/projects.vue';
|
import ProjectsComponent from './groups/projects.vue';
|
||||||
import ExperimentsComponent from './groups/experiments.vue';
|
import ExperimentsComponent from './groups/experiments.vue';
|
||||||
|
@ -265,10 +266,15 @@ export default {
|
||||||
|
|
||||||
this.localQuery = event.target.value;
|
this.localQuery = event.target.value;
|
||||||
|
|
||||||
if (event.target.value.length < 2) {
|
if (event.target.value.length < GLOBAL_CONSTANTS.NAME_MIN_LENGTH) {
|
||||||
this.invalidQuery = true;
|
this.invalidQuery = true;
|
||||||
const minLength = 2;
|
HelperModule.flashAlertMsg(this.i18n.t('general.query.length_too_short', { min_length: GLOBAL_CONSTANTS.NAME_MIN_LENGTH }), 'danger');
|
||||||
HelperModule.flashAlertMsg(this.i18n.t('general.query.length_too_short', { min_length: minLength }), 'danger');
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.target.value.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
|
||||||
|
this.invalidQuery = true;
|
||||||
|
HelperModule.flashAlertMsg(this.i18n.t('general.query.length_too_long', { max_length: GLOBAL_CONSTANTS.NAME_MAX_LENGTH }), 'danger');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<GeneralDropdown ref="container" :canOpen="canOpen" :fieldOnlyOpen="true" @close="filtersOpened = false; flyoutOpened = false" @open="flyoutOpened = true">
|
<GeneralDropdown ref="container" :canOpen="canOpen" :fieldOnlyOpen="true" @close="filtersOpened = false; flyoutOpened = false" @open="flyoutOpened = true">
|
||||||
<template v-slot:field>
|
<template v-slot:field>
|
||||||
<div class="sci--navigation--top-menu-search left-icon sci-input-container-v2" :class="{'disabled' : !currentTeam}" :title="i18n.t('nav.search')">
|
<div class="sci--navigation--top-menu-search left-icon sci-input-container-v2"
|
||||||
|
:class="{'disabled' : !currentTeam, 'error': invalidQuery}" :title="i18n.t('nav.search')"
|
||||||
|
>
|
||||||
<input ref="searchField" type="text" class="!pr-20" v-model="searchQuery" @keydown="focusHistoryItem"
|
<input ref="searchField" type="text" class="!pr-20" v-model="searchQuery" @keydown="focusHistoryItem"
|
||||||
:class="{'active': flyoutOpened}"
|
:class="{'active': flyoutOpened}"
|
||||||
@keydown.escape="closeFlyout"
|
@keydown.escape="closeFlyout"
|
||||||
|
@ -9,11 +11,11 @@
|
||||||
<i class="sn-icon sn-icon-search"></i>
|
<i class="sn-icon sn-icon-search"></i>
|
||||||
<div v-if="this.searchQuery.length > 1" class="flex items-center gap-1 absolute right-2 top-1.5">
|
<div v-if="this.searchQuery.length > 1" class="flex items-center gap-1 absolute right-2 top-1.5">
|
||||||
<div class="btn btn-light icon-btn btn-xs" @click="this.searchQuery = ''; $refs.searchField.focus()">
|
<div class="btn btn-light icon-btn btn-xs" @click="this.searchQuery = ''; $refs.searchField.focus()">
|
||||||
<i class="sn-icon sn-icon-close m-0" :title="i18n.t('nav.clear')"></i>
|
<i class="sn-icon sn-icon-close !m-0" :title="i18n.t('nav.clear')"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn btn-light icon-btn btn-xs" :title="i18n.t('search.quick_search.search_options')"
|
<div class="btn btn-light icon-btn btn-xs" :title="i18n.t('search.quick_search.search_options')"
|
||||||
:class="{'active': filtersOpened}" @click="filtersOpened = !filtersOpened">
|
:class="{'active': filtersOpened}" @click="filtersOpened = !filtersOpened">
|
||||||
<i class="sn-icon sn-icon-search-options m-0"></i>
|
<i class="sn-icon sn-icon-search-options !m-0"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -35,7 +37,7 @@
|
||||||
tabindex="1"
|
tabindex="1"
|
||||||
@keydown="focusHistoryItem"
|
@keydown="focusHistoryItem"
|
||||||
@keydown.enter="setQuery(query)"
|
@keydown.enter="setQuery(query)"
|
||||||
class="flex px-3 h-11 items-center gap-2 hover:bg-sn-super-light-grey cursor-pointer">
|
class="flex px-3 min-h-11 items-center gap-2 hover:bg-sn-super-light-grey cursor-pointer">
|
||||||
<i class="sn-icon sn-icon-history-search"></i>
|
<i class="sn-icon sn-icon-history-search"></i>
|
||||||
{{ query }}
|
{{ query }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -104,7 +106,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr class="my-2">
|
<hr class="my-2">
|
||||||
<div class="btn btn-light" @click="searchValue">
|
<div class="btn btn-light truncate !block leading-10" @click="searchValue">
|
||||||
{{ i18n.t('search.quick_search.all_results', {query: searchQuery}) }}
|
{{ i18n.t('search.quick_search.all_results', {query: searchQuery}) }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -113,6 +115,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
/* global HelperModule GLOBAL_CONSTANTS */
|
||||||
|
|
||||||
import GeneralDropdown from '../shared/general_dropdown.vue';
|
import GeneralDropdown from '../shared/general_dropdown.vue';
|
||||||
import StringWithEllipsis from '../shared/string_with_ellipsis.vue';
|
import StringWithEllipsis from '../shared/string_with_ellipsis.vue';
|
||||||
import SearchFilters from '../global_search/filters.vue';
|
import SearchFilters from '../global_search/filters.vue';
|
||||||
|
@ -158,6 +162,9 @@ export default {
|
||||||
},
|
},
|
||||||
currentTeamName() {
|
currentTeamName() {
|
||||||
return document.querySelector('body').dataset.currentTeamName;
|
return document.querySelector('body').dataset.currentTeamName;
|
||||||
|
},
|
||||||
|
invalidQuery() {
|
||||||
|
return this.searchQuery.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -306,6 +313,11 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
searchValue() {
|
searchValue() {
|
||||||
|
if (this.searchQuery.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
|
||||||
|
HelperModule.flashAlertMsg(this.i18n.t('general.query.length_too_long', { max_length: GLOBAL_CONSTANTS.NAME_MAX_LENGTH }), 'danger');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
window.open(`${this.searchUrl}?q=${this.searchQuery}&teams[]=${this.currentTeam}&include_archived=true`, '_self');
|
window.open(`${this.searchUrl}?q=${this.searchQuery}&teams[]=${this.currentTeam}&include_archived=true`, '_self');
|
||||||
},
|
},
|
||||||
focusHistoryItem(event) {
|
focusHistoryItem(event) {
|
||||||
|
|
Loading…
Reference in a new issue