Refactor vocabulary search functionality in VocabService and update UI components
- Modified the searchVocabs method in VocabService to consolidate search parameters into a single query term for improved flexibility. - Updated VocabSearchDialog to replace separate input fields for mother tongue and learning language with a unified search term input. - Adjusted button logic to enable search only when a term is provided, enhancing user experience. - Added new translations for the search term in both German and English locales to support the updated UI.
This commit is contained in:
@@ -16,14 +16,10 @@
|
||||
<div class="top">
|
||||
<div class="row">
|
||||
<label class="field">
|
||||
{{ $t('socialnetwork.vocab.search.motherTongue') }}
|
||||
<input v-model="motherTongue" type="text" @keydown.enter.prevent="runSearch" />
|
||||
{{ $t('socialnetwork.vocab.search.term') }}
|
||||
<input v-model="term" type="text" @keydown.enter.prevent="runSearch" />
|
||||
</label>
|
||||
<label class="field">
|
||||
{{ learningLabel }}
|
||||
<input v-model="learning" type="text" @keydown.enter.prevent="runSearch" />
|
||||
</label>
|
||||
<button class="btn" :disabled="loading || (!motherTongue.trim() && !learning.trim())" @click="runSearch">
|
||||
<button class="btn" :disabled="loading || !term.trim()" @click="runSearch">
|
||||
{{ loading ? $t('general.loading') : $t('socialnetwork.vocab.search.search') }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -66,8 +62,7 @@ export default {
|
||||
return {
|
||||
languageId: null,
|
||||
languageName: '',
|
||||
motherTongue: '',
|
||||
learning: '',
|
||||
term: '',
|
||||
loading: false,
|
||||
results: [],
|
||||
error: '',
|
||||
@@ -85,8 +80,7 @@ export default {
|
||||
open({ languageId, languageName = '' } = {}) {
|
||||
this.languageId = languageId;
|
||||
this.languageName = languageName || '';
|
||||
this.motherTongue = '';
|
||||
this.learning = '';
|
||||
this.term = '';
|
||||
this.results = [];
|
||||
this.error = '';
|
||||
this.loading = false;
|
||||
@@ -98,17 +92,15 @@ export default {
|
||||
},
|
||||
async runSearch() {
|
||||
if (!this.languageId) return;
|
||||
const mt = this.motherTongue.trim();
|
||||
const l = this.learning.trim();
|
||||
if (!mt && !l) return;
|
||||
const q = this.term.trim();
|
||||
if (!q) return;
|
||||
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
try {
|
||||
const res = await apiClient.get(`/api/vocab/languages/${this.languageId}/search`, {
|
||||
params: {
|
||||
motherTongue: mt || undefined,
|
||||
learning: l || undefined,
|
||||
q,
|
||||
},
|
||||
});
|
||||
this.results = res.data?.results || [];
|
||||
|
||||
@@ -312,6 +312,7 @@
|
||||
"search": {
|
||||
"open": "Suche",
|
||||
"title": "Vokabeln suchen",
|
||||
"term": "Suchbegriff",
|
||||
"motherTongue": "Muttersprache",
|
||||
"learningLanguage": "Lernsprache",
|
||||
"lesson": "Lektion",
|
||||
|
||||
@@ -312,6 +312,7 @@
|
||||
"search": {
|
||||
"open": "Search",
|
||||
"title": "Search vocabulary",
|
||||
"term": "Search term",
|
||||
"motherTongue": "Mother tongue",
|
||||
"learningLanguage": "Learning language",
|
||||
"lesson": "Lesson",
|
||||
|
||||
Reference in New Issue
Block a user