From cfafc6e33023852cb3ab3dc216927a9ee33913f4 Mon Sep 17 00:00:00 2001 From: Matheus Cristian <mathues@email.com> Date: Fri, 21 Jun 2024 15:53:06 -0300 Subject: [PATCH 1/5] feat(depreciated-components): centers select language component --- src/components/SelectLanguage.vue | 44 +++++++++++++++++++ src/components/example/NewExampleForm.vue | 20 +++------ .../CreateRepository/DefinitionsTab.vue | 39 +++++----------- .../repository/RequestGenerator.vue | 20 +++------ .../home/HomeIntelligenceFilter.vue | 28 +++++------- .../phrase-suggestion/AddSentenceForm.vue | 20 +++------ src/components/shared/ImportWitModal.vue | 26 +++++------ .../shared/accordion/EditExampleIntent.vue | 15 ++----- .../translate/NewTranslationsStatus.vue | 20 +++------ 9 files changed, 99 insertions(+), 133 deletions(-) create mode 100644 src/components/SelectLanguage.vue diff --git a/src/components/SelectLanguage.vue b/src/components/SelectLanguage.vue new file mode 100644 index 000000000..44d50fd2d --- /dev/null +++ b/src/components/SelectLanguage.vue @@ -0,0 +1,44 @@ +<template> + <UnnnicSelectSmart + :value="[languageList.find(({ value }) => value === language)]" + @input="$emit('input', $event[0].value)" + :options="languageList" + orderedByIndex + v-bind="$attrs" + /> +</template> + +<script> +import { LANGUAGES } from '@/utils'; + +export default { + model: { + prop: 'language', + }, + + props: { + language: String, + + placeholder: { + type: String, + default: '', + }, + }, + + computed: { + languageList() { + return [ + { + value: '', + label: this.placeholder, + }, + ].concat( + Object.keys(LANGUAGES).map((lang) => ({ + value: lang, + label: LANGUAGES[lang], + })), + ); + }, + }, +}; +</script> diff --git a/src/components/example/NewExampleForm.vue b/src/components/example/NewExampleForm.vue index f0ccc38ab..cff7d072e 100644 --- a/src/components/example/NewExampleForm.vue +++ b/src/components/example/NewExampleForm.vue @@ -58,19 +58,10 @@ :label="$t('webapp.create_repository.language_placeholder')" :message="errors.intent" > - <UnnnicSelect - :placeholder="$t('webapp.translate.languages_select')" + <SelectLanguage v-model="language" - > - <option - v-for="[option, label] in languageList" - :key="option" - :value="option" - @select="language = option" - > - {{ label }} - </option> - </UnnnicSelect> + :placeholder="$t('webapp.translate.languages_select')" + /> </UnnnicFormElement> </div> @@ -125,6 +116,7 @@ import NewEntitiesInput from '@/components/inputs/EntitiesInput/NewEntitiesInput import { mapActions, mapGetters } from 'vuex'; import { formatters, LANGUAGES } from '@/utils'; import InputWithHightlights from '../InputWithHightlights'; +import SelectLanguage from '../SelectLanguage.vue'; export default { name: 'NewExampleForm', @@ -132,6 +124,7 @@ export default { ExampleTextWithHighlightedEntitiesInput, NewEntitiesInput, InputWithHightlights, + SelectLanguage, }, props: { repository: { @@ -209,9 +202,6 @@ export default { entities, }; }, - languageList() { - return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]); - }, }, watch: { async intent() { diff --git a/src/components/repository/CreateRepository/DefinitionsTab.vue b/src/components/repository/CreateRepository/DefinitionsTab.vue index 41ccf86e1..fa0b6b911 100644 --- a/src/components/repository/CreateRepository/DefinitionsTab.vue +++ b/src/components/repository/CreateRepository/DefinitionsTab.vue @@ -6,26 +6,15 @@ class="create-repository__definitions__wrapper__fields" > <UnnnicLabel :label="$t('webapp.create_repository.language_label')" /> - <UnnnicSelect - class="unnic--clickable" - size="sm" - :placeholder="$t('webapp.create_repository.language_placeholder')" - :value="language" + + <SelectLanguage + :language="language" @input="$emit('update:language', $event)" - search - :searchPlaceholder=" - $t('webapp.create_repository.language_placeholder_search') - " - > - <option - v-for="language in languages" - :value="language.value" - :key="language.id" - size="sm" - > - {{ language.title }} - </option> - </UnnnicSelect> + :placeholder="$t('webapp.create_repository.language_placeholder')" + size="sm" + autocomplete + autocompleteClearOnFocus + /> </section> <div @@ -125,8 +114,8 @@ <script> import { mapActions } from 'vuex'; -import { LANGUAGES } from '@/utils/index'; import Loading from '@/components/shared/Loading'; +import SelectLanguage from '../../SelectLanguage.vue'; export default { name: 'DefinitionsTab', @@ -139,6 +128,7 @@ export default { }, components: { Loading, + SelectLanguage, }, data() { return { @@ -150,15 +140,6 @@ export default { mounted() { this.getCategories(); }, - computed: { - languages() { - return Object.keys(LANGUAGES).map((lang, index) => ({ - id: index + 1, - title: LANGUAGES[lang], - value: lang, - })); - }, - }, methods: { ...mapActions(['getAllCategories']), async getCategories() { diff --git a/src/components/repository/RequestGenerator.vue b/src/components/repository/RequestGenerator.vue index f801c992e..ce661221b 100644 --- a/src/components/repository/RequestGenerator.vue +++ b/src/components/repository/RequestGenerator.vue @@ -4,19 +4,10 @@ :label="$t('webapp.analyze_text.language')" class="form-element" > - <UnnnicSelect - :placeholder="$t('webapp.analyze_text.language')" + <SelectLanguage v-model="language" - > - <option - v-for="[option, label] in languageList" - :key="option" - :value="option" - @select="language = option" - > - {{ label }} - </option> - </UnnnicSelect> + :placeholder="$t('webapp.analyze_text.language')" + /> </UnnnicFormElement> <UnnnicFormElement @@ -61,9 +52,11 @@ <script> import HighlightedCode from '@/components/shared/HighlightedCode'; import { LANGUAGES } from '@/utils'; +import SelectLanguage from '../SelectLanguage.vue'; const components = { HighlightedCode, + SelectLanguage, }; export default { @@ -88,9 +81,6 @@ export default { }; }, computed: { - languageList() { - return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]); - }, text_escaped() { return { curl: this.text.replace(/\\/g, '\\\\').replace(/"/g, '\\"'), diff --git a/src/components/repository/home/HomeIntelligenceFilter.vue b/src/components/repository/home/HomeIntelligenceFilter.vue index 8db1acaee..174286c3e 100644 --- a/src/components/repository/home/HomeIntelligenceFilter.vue +++ b/src/components/repository/home/HomeIntelligenceFilter.vue @@ -39,20 +39,12 @@ </div> <div class="intelligence-filter__container__languages"> <h3>{{ $t('webapp.home.intelligence_filter.languages') }}</h3> - <UnnnicSelect - :placeholder="$t('webapp.translate.languages_select')" + + <SelectLanguage v-model="language" + :placeholder="$t('webapp.translate.languages_select')" size="sm" - > - <option - v-for="[option, label] in languageList" - :key="option" - :value="option" - @select="language = option" - > - {{ label }} - </option> - </UnnnicSelect> + /> </div> </section> </div> @@ -60,16 +52,21 @@ <script> import { mapActions } from 'vuex'; -import { LANGUAGES } from '@/utils'; +import SelectLanguage from '../../SelectLanguage.vue'; export default { name: 'HomeIntelligenceFilter', + + components: { + SelectLanguage, + }, + data() { return { recommended: false, mostUsed: false, categories: [], - language: null, + language: '', }; }, watch: { @@ -94,9 +91,6 @@ export default { {}, ); }, - languageList() { - return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]); - }, }, mounted() { this.getCategories(); diff --git a/src/components/repository/phrase-suggestion/AddSentenceForm.vue b/src/components/repository/phrase-suggestion/AddSentenceForm.vue index 8eb4b2a09..c96312e03 100644 --- a/src/components/repository/phrase-suggestion/AddSentenceForm.vue +++ b/src/components/repository/phrase-suggestion/AddSentenceForm.vue @@ -42,19 +42,10 @@ :label="$t('webapp.create_repository.language_placeholder')" :message="errors.intent" > - <UnnnicSelect - :placeholder="$t('webapp.translate.languages_select')" + <SelectLanguage v-model="language" - > - <option - v-for="[option, label] in languageList" - :key="option" - :value="option" - @select="language = option" - > - {{ label }} - </option> - </UnnnicSelect> + :placeholder="$t('webapp.translate.languages_select')" + /> </UnnnicFormElement> <UnnnicFormElement :message="errors.entities"> @@ -101,6 +92,7 @@ import { mapActions, mapGetters } from 'vuex'; import { formatters, LANGUAGES } from '@/utils'; import InputWithHightlights from '../../InputWithHightlights'; import { get } from 'lodash'; +import SelectLanguage from '../../SelectLanguage.vue'; export default { name: 'AddSentenceForm', @@ -108,6 +100,7 @@ export default { ExampleTextWithHighlightedEntitiesInput, NewEntitiesInput, InputWithHightlights, + SelectLanguage, }, props: { repository: { @@ -183,9 +176,6 @@ export default { entities, }; }, - languageList() { - return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]); - }, }, watch: { async intent() { diff --git a/src/components/shared/ImportWitModal.vue b/src/components/shared/ImportWitModal.vue index de6e88420..852131930 100644 --- a/src/components/shared/ImportWitModal.vue +++ b/src/components/shared/ImportWitModal.vue @@ -10,18 +10,10 @@ /> </BField> <BField class="migrate-intelligence-modal__fields__inputs"> - <UnnnicSelect + <SelectLanguage v-model="languageSelect" - :label="$t('webapp.migrate_intelligence.language')" - > - <option - v-for="[language, label] in languages" - :value="language" - :key="language" - > - {{ label }} - </option> - </UnnnicSelect> + :placeholder="$t('webapp.migrate_intelligence.language')" + /> </BField> </div> </section> @@ -51,10 +43,15 @@ <script> import { mapGetters, mapActions } from 'vuex'; -import { LANGUAGES } from '@/utils'; +import SelectLanguage from '../SelectLanguage.vue'; export default { name: 'ImportWitModal', + + components: { + SelectLanguage, + }, + props: { isModalVisible: { type: Boolean, @@ -64,7 +61,7 @@ export default { data() { return { authToken: '', - languageSelect: null, + languageSelect: '', isButtonLoading: false, }; }, @@ -77,9 +74,6 @@ export default { return false; }, - languages() { - return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]); - }, }, methods: { ...mapActions(['setMigrateIntelligence']), diff --git a/src/components/shared/accordion/EditExampleIntent.vue b/src/components/shared/accordion/EditExampleIntent.vue index a975f99ca..7c974bbcb 100644 --- a/src/components/shared/accordion/EditExampleIntent.vue +++ b/src/components/shared/accordion/EditExampleIntent.vue @@ -42,20 +42,11 @@ :label="$t('webapp.inbox.language')" class="edit-sentence__language-select" > - <UnnnicSelect + <SelectLanguage size="sm" :placeholder="$t('webapp.inbox.language')" v-model="language" - > - <option - v-for="[option, label] in languageList" - :key="option" - :value="option" - @select="language = option" - > - {{ label }} - </option> - </UnnnicSelect> + /> </UnnnicFormElement> </div> <div class="add-entity"> @@ -260,6 +251,7 @@ import ExampleTextWithHighlightedEntitiesInput from '@/components/inputs/Example import EntityAccordion from '@/components/shared/accordion/EntityAccordion'; import WordCard from '@/components/shared/accordion/WordCard'; import InputWithHightlights from '../../InputWithHightlights'; +import SelectLanguage from '../../SelectLanguage.vue'; export default { name: 'EditExampleIntent', @@ -268,6 +260,7 @@ export default { EntityAccordion, WordCard, InputWithHightlights, + SelectLanguage, }, props: { from: { diff --git a/src/components/translate/NewTranslationsStatus.vue b/src/components/translate/NewTranslationsStatus.vue index ec02ed3bb..f8b64ebb0 100644 --- a/src/components/translate/NewTranslationsStatus.vue +++ b/src/components/translate/NewTranslationsStatus.vue @@ -64,19 +64,10 @@ :label="$t('webapp.translate.select_language_label')" class="form-element" > - <UnnnicSelect + <SelectLanguage v-model="languageSelected" class="select-add-modal" - > - <option - v-for="[option, label] in languageList" - :key="option" - :value="option" - @select="languageSelected = option" - > - {{ label }} - </option> - </UnnnicSelect> + /> </UnnnicFormElement> </template> @@ -101,11 +92,13 @@ <script> import { mapActions, mapGetters } from 'vuex'; -import { formatters, languageListToDict, LANGUAGES } from '@/utils'; +import { formatters, languageListToDict } from '@/utils'; import Loading from '@/components/shared/Loading'; +import SelectLanguage from '../SelectLanguage.vue'; const components = { Loading, + SelectLanguage, }; export default { @@ -207,9 +200,6 @@ export default { : -1, ); }, - languageList() { - return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]); - }, }, watch: { async ownerNickname() { From 95ab7596408e3a86703adf903cd75a1ff78c13f4 Mon Sep 17 00:00:00 2001 From: Matheus Cristian <mathues@email.com> Date: Fri, 21 Jun 2024 16:46:04 -0300 Subject: [PATCH 2/5] feat(depreciated-components): replaces UnnnicSelect to UnnnicSelectSmart --- .../form-generator/inputs/ChoiceInput.vue | 28 ++++++--- .../example/SentenceFilters.vue | 36 +++++------ src/components/repository/sidebar/SideBar.vue | 63 ++++++++++--------- src/utils/index.js | 25 ++++++++ src/views/repository/Entity.vue | 28 +++++---- src/views/repository/Integration.vue | 25 +++++--- src/views/repository/Intent.vue | 28 +++++---- src/views/repository/PhraseSuggestion.vue | 30 +++++---- src/views/repository/Translate.vue | 29 +++++---- src/views/repository/content/API.vue | 32 ++++++---- 10 files changed, 194 insertions(+), 130 deletions(-) diff --git a/src/components/form-generator/inputs/ChoiceInput.vue b/src/components/form-generator/inputs/ChoiceInput.vue index 82a33f615..d029ac7df 100644 --- a/src/components/form-generator/inputs/ChoiceInput.vue +++ b/src/components/form-generator/inputs/ChoiceInput.vue @@ -15,19 +15,16 @@ openWithFocus @input="updateInput" @choose="selectOption"/> - <unnnic-select + <unnnic-select-smart v-else - v-model="value" - @input="update()"> - <option - v-for="choice in choices" - :key="choice.value" - :value="choice.value">{{ choice.display_name }}</option> - </unnnic-select> + :value="choicesSelectSmart.value" + :options="choicesSelectSmart.options" + @input="update($event[0].value)" + ></unnnic-select-smart> </template> <script> -import { formatters } from '@/utils'; +import { formatters, useSelectSmart } from '@/utils'; import FetchChoiceInput from './FetchChoiceInput'; export default { @@ -71,6 +68,16 @@ export default { choice => search.test(formatters.bothubItemKey()(choice.display_name.toLowerCase())), ); }, + + choicesSelectSmart() { + return useSelectSmart({ + from: this.choices, + value: 'value', + label: 'display_name', + placeholder: '', + currentValue: this.value, + }); + }, }, mounted() { this.update(); @@ -95,7 +102,8 @@ export default { this.$emit('input', ''); } }, - update() { + update(value) { + this.value = value; this.$emit('input', this.value); }, }, diff --git a/src/components/repository/repository-evaluate/example/SentenceFilters.vue b/src/components/repository/repository-evaluate/example/SentenceFilters.vue index 035126318..6cf863865 100644 --- a/src/components/repository/repository-evaluate/example/SentenceFilters.vue +++ b/src/components/repository/repository-evaluate/example/SentenceFilters.vue @@ -48,22 +48,11 @@ /> </div> <div v-if="languageFilter && languages"> - <UnnnicSelect - :placeholder="$t('webapp.evaluate.all_languages')" - v-model="language" - > - <option - v-for="language in languages" - :key="language.id" - :selected="language.value === language" - :value="language.value" - > - {{ language.title }} - </option> - <option :value="null"> - {{ $t('webapp.home.all_languages') }} - </option> - </UnnnicSelect> + <UnnnicSelectSmart + :value="languagesSelectSmart.value" + :options="languagesSelectSmart.options" + @input="language = $event[0].value" + /> </div> <BField @@ -85,7 +74,7 @@ </div> </template> <script> -import { formatters, LANGUAGES } from '@/utils/index'; +import { formatters, LANGUAGES, useSelectSmart } from '@/utils/index'; import { mapGetters } from 'vuex'; import _ from 'lodash'; @@ -128,7 +117,7 @@ export default { intent: '', entity: '', versionName: '', - language: null, + language: '', setTimeoutId: null, errors: {}, isIntentInputActive: false, @@ -160,6 +149,17 @@ export default { }), ); }, + + languagesSelectSmart() { + return useSelectSmart({ + from: this.languages, + value: 'value', + label: 'title', + placeholder: this.$t('webapp.evaluate.all_languages'), + currentValue: this.language, + }); + }, + filterIntents() { if (this.intents !== null) { return this.intents.filter( diff --git a/src/components/repository/sidebar/SideBar.vue b/src/components/repository/sidebar/SideBar.vue index 547966270..b8704e1c9 100644 --- a/src/components/repository/sidebar/SideBar.vue +++ b/src/components/repository/sidebar/SideBar.vue @@ -67,29 +67,16 @@ </div> </div> - <UnnnicSelect + <UnnnicSelectSmart v-if="repositoryType === 'classifier'" - :selected="getNameVersion" v-show="collapse" - class="unnic--clickable sidebar-wrapper__header__select" + :value="allVersionsSelectSmart.value" + :options="allVersionsSelectSmart.options" + @input="selectedVersion = $event[0].value" + orderedByIndex size="sm" - hasCloudyColor - :placeholder="getNameVersion" - v-model="selectedVersion" - :optionsHeader="optionsHeader" - > - <option - v-for="(version, index) in allVersions" - :key="index" - size="sm" - > - {{ version.name }} - </option> - <div - slot="header" - class="sidebar-wrapper__header__versions" - ></div> - </UnnnicSelect> + class="unnic--clickable sidebar-wrapper__header__select" + /> </section> <section class="sidebar-wrapper__body"> <UnnnicSidebarMenu v-if="repositoryType === 'content'"> @@ -468,6 +455,7 @@ <script> import { mapGetters, mapActions } from 'vuex'; import CustomIcon from '@/components/shared/CustomIcon'; +import { useSelectSmart } from '../../../utils'; export default { name: 'SideBar', @@ -485,17 +473,6 @@ export default { allVersions: [], dropSelect: '', selectedVersion: this.getNameVersion, - optionsHeader: [ - { - text: this.$t('webapp.dashboard.all_versions'), - click: () => - this.routerHandle('repository-settings', { - query: { - tab: 'versions', - }, - }), - }, - ], }; }, computed: { @@ -514,6 +491,20 @@ export default { if (!this.getCurrentRepository) return null; return this.getCurrentRepository.repository_type; }, + + allVersionsSelectSmart() { + return useSelectSmart({ + from: [ + { + name: this.$t('webapp.dashboard.all_versions'), + }, + ].concat(this.allVersions), + value: 'name', + label: 'name', + placeholder: this.getNameVersion, + currentValue: this.selectedVersion || '', + }); + }, }, watch: { repositoryUUID() { @@ -527,6 +518,16 @@ export default { } }, selectedVersion() { + if (this.selectedVersion === this.$t('webapp.dashboard.all_versions')) { + this.routerHandle('repository-settings', { + query: { + tab: 'versions', + }, + }); + + return; + } + let defaultVersions; try { diff --git a/src/utils/index.js b/src/utils/index.js index 95be146d8..06826b580 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -149,3 +149,28 @@ export const entityEquals = (entities1, entities2) => { ); }); }; + +export const useSelectSmart = ({ + from, + value, + label, + placeholder, + currentValue, +}) => { + const placeholderOption = { + value: '', + label: placeholder, + }; + + const options = [placeholderOption].concat( + from.map((item) => ({ + value: item[value], + label: item[label], + })), + ); + + return { + value: [options.find(({ value }) => value === currentValue)], + options: options, + }; +}; diff --git a/src/views/repository/Entity.vue b/src/views/repository/Entity.vue index 07eb09189..95d66d169 100644 --- a/src/views/repository/Entity.vue +++ b/src/views/repository/Entity.vue @@ -27,19 +27,12 @@ <span class="entity-list__results">{{ $t('webapp.intent.sentences_perpage') }}</span> - <UnnnicSelect - class="unnic--clickable" + <UnnnicSelectSmart + :value="optionsSelectSmart.value" + :options="optionsSelectSmart.options" size="md" - v-model="selectedOption" - > - <option - v-for="(option, index) in options" - :key="index" - size="sm" - > - {{ option.value }} - </option> - </UnnnicSelect> + @input="selectedOption = $event[0].value" + /> </div> </div> <IntentPagination @@ -110,6 +103,7 @@ import Loading from '@/components/shared/Loading'; import RepositoryBase from './Base'; import IntentPagination from '@/components/shared/IntentPagination'; import IntentLoader from '@/views/repository/loadings/Intent'; +import { useSelectSmart } from '../../utils'; export default { name: 'Entity', @@ -161,6 +155,16 @@ export default { repositoryVersion: 'getSelectedVersion', repositoryList: 'getCurrentRepository', }), + + choicesSelectSmart() { + return useSelectSmart({ + from: this.options, + value: 'value', + label: 'value', + placeholder: '', + currentValue: this.selectedOption, + }); + }, }, watch: { query() { diff --git a/src/views/repository/Integration.vue b/src/views/repository/Integration.vue index eb6276021..47f9472fb 100644 --- a/src/views/repository/Integration.vue +++ b/src/views/repository/Integration.vue @@ -104,15 +104,11 @@ </UnnnicIntelligenceText> <UnnnicFormElement :label="$t('webapp.integration.token_title')"> - <UnnnicSelect v-model="profileAuth"> - <option - v-for="option in getAuthorizations" - :key="option.index" - :value="option" - > - {{ option }} - </option> - </UnnnicSelect> + <UnnnicSelectSmart + :value="getAuthorizationsSelectSmart.value" + :options="getAuthorizationsSelectSmart.options" + @input="profileAuth = $event[0].value" + /> </UnnnicFormElement> <div class="repository-analyze-text__url"> @@ -269,6 +265,7 @@ import RepositoryBase from './Base'; import I18n from '@/utils/plugins/i18n'; import IntegrationModal from '@/components/shared/IntegrationModal'; import IntegrationLoading from '@/views/repository/loadings/Integration'; +import { useSelectSmart } from '../../utils'; export default { name: 'RepositoryIntegration', @@ -373,6 +370,16 @@ export default { ].join(), }; }, + + getAuthorizationsSelectSmart() { + return useSelectSmart({ + from: this.getAuthorizations.map((value) => ({ value })), + value: 'value', + label: 'value', + placeholder: '', + currentValue: this.profileAuth, + }); + }, }, watch: { profileToken() { diff --git a/src/views/repository/Intent.vue b/src/views/repository/Intent.vue index 5f892ed46..23bf33627 100644 --- a/src/views/repository/Intent.vue +++ b/src/views/repository/Intent.vue @@ -26,19 +26,12 @@ <span class="entity-list__results">{{ $t('webapp.intent.sentences_perpage') }}</span> - <UnnnicSelect - class="unnic--clickable" + <UnnnicSelectSmart + :value="optionsSelectSmart.value" + :options="optionsSelectSmart.options" + @input="selectedOption = $event[0].value" size="md" - v-model="selectedOption" - > - <option - v-for="(option, index) in options" - :key="index" - size="sm" - > - {{ option.value }} - </option> - </UnnnicSelect> + /> </div> </div> <IntentPagination @@ -107,6 +100,7 @@ import Loading from '@/components/shared/Loading'; import RepositoryBase from './Base'; import IntentPagination from '@/components/shared/IntentPagination'; import IntentLoader from '@/views/repository/loadings/Intent'; +import { useSelectSmart } from '../../utils'; export default { name: 'Intent', @@ -157,6 +151,16 @@ export default { repositoryVersion: 'getSelectedVersion', repositoryList: 'getCurrentRepository', }), + + optionsSelectSmart() { + return useSelectSmart({ + from: this.options, + value: 'value', + label: 'value', + placeholder: '', + currentValue: this.selectedOption, + }); + }, }, watch: { query() { diff --git a/src/views/repository/PhraseSuggestion.vue b/src/views/repository/PhraseSuggestion.vue index 223fa8082..234f2caf3 100644 --- a/src/views/repository/PhraseSuggestion.vue +++ b/src/views/repository/PhraseSuggestion.vue @@ -119,18 +119,11 @@ <UnnnicFormElement :label="$t('webapp.phrase-suggestion.select_intent')" > - <UnnnicSelect - v-model="intentSelected" - @onChange="addIntents" - > - <option - v-for="intent in repository.intents" - :key="intent.id" - :value="intent.value" - > - {{ intent.value }} - </option> - </UnnnicSelect> + <UnnnicSelectSmart + :value="intentsSelectSmart.value" + :options="intentsSelectSmart.options" + @input="addIntents($event[0].value)" + /> </UnnnicFormElement> </div> @@ -375,6 +368,7 @@ import GeneratedSentencesTable from '@/components/repository/GeneratedSentencesT import PaginatedList from '@/components/shared/PaginatedList'; import IntentSuggestion from '@/components/shared/accordion/IntentSuggestion'; import PhraseSuggestionLoading from './PhraseSuggestionLoading'; +import { useSelectSmart } from '../../utils'; export default { name: 'PhraseSuggestion', @@ -471,6 +465,16 @@ export default { return ''; }, + + intentsSelectSmart() { + return useSelectSmart({ + from: this.repository.intents, + value: 'value', + label: 'value', + placeholder: '', + currentValue: this.intentSelected, + }); + }, }, watch: { versionSelected() { @@ -553,6 +557,8 @@ export default { }, async addIntents(intent) { // this.loading = true + this.intentSelected = intent; + const { id } = this.repository.intents.find((e) => e.value === intent); this.phraseList = await this.searchExamples({ repositoryUuid: this.repository.uuid, diff --git a/src/views/repository/Translate.vue b/src/views/repository/Translate.vue index 2c8e8df5a..495755826 100644 --- a/src/views/repository/Translate.vue +++ b/src/views/repository/Translate.vue @@ -104,19 +104,12 @@ </UnnnicIntelligenceText> <UnnnicFormElement> - <UnnnicSelect - v-model="allTranslations" + <UnnnicSelectSmart + :value="exportOptionSelectSmart.value" + :options="exportOptionSelectSmart.options" + @input="allTranslations = $event[0].value" class="select-translation" - > - <option - v-for="option in exportOption" - :key="option.id" - :value="option.value" - @select="allTranslations = option.value" - > - {{ option.label }} - </option> - </UnnnicSelect> + /> </UnnnicFormElement> </template> </UnnnicModalNext> @@ -305,7 +298,7 @@ import Loading from '@/components/shared/Loading'; import TranslateTokenModal from '@/components/translate/TranslateTokenModal'; import TranslateList from '@/components/translate/TranslateList'; import Tour from '@/components/Tour'; -import { languageListToDict } from '@/utils/index'; +import { languageListToDict, useSelectSmart } from '@/utils/index'; import RepositoryBase from './Base'; import SentenceFilters from '@/components/repository/repository-evaluate/example/SentenceFilters'; import TranslationsList from '@/components/translate/TranslationsList'; @@ -394,6 +387,16 @@ export default { [] ); }, + + exportOptionSelectSmart() { + return useSelectSmart({ + from: this.exportOption, + value: 'value', + label: 'label', + placeholder: '', + currentValue: this.allTranslations, + }); + }, }, watch: { isImportFileVisible() { diff --git a/src/views/repository/content/API.vue b/src/views/repository/content/API.vue index 5e0b8ca52..109e65bd8 100644 --- a/src/views/repository/content/API.vue +++ b/src/views/repository/content/API.vue @@ -27,21 +27,13 @@ </p> <div class="repository-api__select__inputs"> <div class="repository-api__select__input"> - <UnnnicSelect + <UnnnicSelectSmart v-if="bases.length" + :value="basesSelectSmart.value" + :options="basesSelectSmart.options" + @input="baseIdLang = $event[0].value" size="sm" - placeholder="" - v-model="baseIdLang" - > - <option - v-for="base in bases" - :value="[base.knowledge_base, base.language]" - :key="base.knowledge_base" - size="sm" - > - {{ base.title }} - </option> - </UnnnicSelect> + /> </div> </div> </section> @@ -503,6 +495,7 @@ import RepositoryViewBase from '@/components/repository/RepositoryViewBase'; import RepositoryBase from '../Base'; import { mapActions, mapGetters } from 'vuex'; +import { useSelectSmart } from '../../../utils'; export default { name: 'RepositoryContentAPI', @@ -585,6 +578,19 @@ export default { const infos = this.baseIdLang; return infos.split(','); }, + + basesSelectSmart() { + return useSelectSmart({ + from: this.bases.map(({ title, knowledge_base, language }) => ({ + title, + value: `${knowledge_base},${language}`, + })), + value: 'value', + label: 'title', + placeholder: '', + currentValue: this.baseIdLang, + }); + }, }, methods: { ...mapActions(['getQATexts']), From 00cb8cb743e074b9af301c74a01347273f1581c5 Mon Sep 17 00:00:00 2001 From: Matheus Cristian <mathues@email.com> Date: Tue, 25 Jun 2024 01:05:30 -0300 Subject: [PATCH 3/5] feat(depreciated-components): replaces UnnnicAutocomplete to UnnnicSelectSmart with autocomplete --- src/components/Autocomplete.vue | 36 +++ src/components/example/NewExampleForm.vue | 22 +- .../form-generator/inputs/ChoiceInput.vue | 222 +++++++++--------- .../inputs/EntitiesInput/NewEntitiesInput.vue | 21 +- .../phrase-suggestion/AddSentenceForm.vue | 24 +- .../shared/accordion/EditExampleAccordion.vue | 35 +-- .../shared/accordion/EditExampleIntent.vue | 29 +-- src/components/translate/EditTranslation.vue | 29 +-- 8 files changed, 199 insertions(+), 219 deletions(-) create mode 100644 src/components/Autocomplete.vue diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue new file mode 100644 index 000000000..470b7884c --- /dev/null +++ b/src/components/Autocomplete.vue @@ -0,0 +1,36 @@ +<template> + <UnnnicSelectSmart + :value="[ + finalOptions.find(({ value: insideValue }) => insideValue === value), + ]" + @input="$emit('input', $event[0].value)" + :options="finalOptions" + orderedByIndex + autocomplete + autocompleteClearOnFocus + v-bind="$attrs" + /> +</template> + +<script> +export default { + props: { + value: String, + + placeholder: { + type: String, + default: '', + }, + + options: Array, + }, + + computed: { + finalOptions() { + return [{ value: '', label: this.placeholder }].concat( + this.options.map((value) => ({ value, label: value })), + ); + }, + }, +}; +</script> diff --git a/src/components/example/NewExampleForm.vue b/src/components/example/NewExampleForm.vue index cff7d072e..087edae58 100644 --- a/src/components/example/NewExampleForm.vue +++ b/src/components/example/NewExampleForm.vue @@ -38,18 +38,10 @@ </div> <UnnnicFormElement :message="errors.intent"> - <UnnnicAutocomplete + <Autocomplete v-model="intent" - :data="filteredData" + :options="filteredData" :placeholder="$t('webapp.example.intent')" - :openWithFocus="true" - @focus="onIntentInputClick" - @blur="onIntentInputClick" - :iconRight=" - isIntentInputActive - ? 'arrow-button-up-1' - : 'arrow-button-down-1' - " /> </UnnnicFormElement> </div> @@ -117,6 +109,7 @@ import { mapActions, mapGetters } from 'vuex'; import { formatters, LANGUAGES } from '@/utils'; import InputWithHightlights from '../InputWithHightlights'; import SelectLanguage from '../SelectLanguage.vue'; +import Autocomplete from '../Autocomplete.vue'; export default { name: 'NewExampleForm', @@ -125,6 +118,7 @@ export default { NewEntitiesInput, InputWithHightlights, SelectLanguage, + Autocomplete, }, props: { repository: { @@ -144,7 +138,6 @@ export default { entitiesList: [], blockedNextStepTutorial: false, hideDropdown: true, - isIntentInputActive: false, isLanguageInputActive: false, alertSuccess: false, addEntity: false, @@ -158,9 +151,7 @@ export default { return this.isValid && !this.submitting; }, filteredData() { - return (this.repository.intents_list || []).filter((intent) => - intent.startsWith(this.intent.toLowerCase()), - ); + return this.repository.intents_list || []; }, validationErrors() { const errors = []; @@ -284,9 +275,6 @@ export default { } return false; }, - onIntentInputClick() { - this.isIntentInputActive = !this.isIntentInputActive; - }, }, }; </script> diff --git a/src/components/form-generator/inputs/ChoiceInput.vue b/src/components/form-generator/inputs/ChoiceInput.vue index d029ac7df..9259a59d4 100644 --- a/src/components/form-generator/inputs/ChoiceInput.vue +++ b/src/components/form-generator/inputs/ChoiceInput.vue @@ -1,111 +1,111 @@ -<template> - <fetch-choice-input - v-if="fetch" - :fetch="fetch" - :label-placeholder="labelPlaceholder" - v-model="value" - @input="update()"/> - <unnnic-autocomplete - v-else-if="compact" - v-model="value" - :placeholder="labelPlaceholder" - :custom-formatter="formatter" - :data="filteredChoices" - dropdown-position="bottom" - openWithFocus - @input="updateInput" - @choose="selectOption"/> - <unnnic-select-smart - v-else - :value="choicesSelectSmart.value" - :options="choicesSelectSmart.options" - @input="update($event[0].value)" - ></unnnic-select-smart> -</template> - -<script> -import { formatters, useSelectSmart } from '@/utils'; -import FetchChoiceInput from './FetchChoiceInput'; - -export default { - components: { - FetchChoiceInput, - }, - props: { - choices: { - type: Array, - default: () => [], - }, - fetch: { - type: Function, - default: null, - }, - initialData: { - type: [Array, String], - default: null, - }, - compact: { - type: Boolean, - default: null, - }, - labelPlaceholder: { - type: String, - default: '', - }, - }, - data() { - return { - value: this.initialData, - formatter: choice => choice.display_name, - }; - }, - computed: { - filteredChoices() { - if (!this.value || this.value.length === 0) { return this.choices; } - const search = new RegExp(formatters.bothubItemKey()(this.value.toLowerCase())); - return this.choices - .filter( - choice => search.test(formatters.bothubItemKey()(choice.display_name.toLowerCase())), - ); - }, - - choicesSelectSmart() { - return useSelectSmart({ - from: this.choices, - value: 'value', - label: 'display_name', - placeholder: '', - currentValue: this.value, - }); - }, - }, - mounted() { - this.update(); - }, - methods: { - updateInput() { - const search = formatters.bothubItemKey()(this.value.toLowerCase()); - const option = this.choices.find( - choice => formatters.bothubItemKey()(choice.display_name.toLowerCase()) - === search, - ); - if (option) { - this.$emit('input', option.value); - } else { - this.$emit('input', ''); - } - }, - selectOption(option) { - if (option) { - this.$emit('input', option.value); - } else { - this.$emit('input', ''); - } - }, - update(value) { - this.value = value; - this.$emit('input', this.value); - }, - }, -}; -</script> +<template> + <fetch-choice-input + v-if="fetch" + :fetch="fetch" + :label-placeholder="labelPlaceholder" + v-model="value" + @input="update()"/> + <unnnic-autocomplete + v-else-if="compact" + v-model="value" + :placeholder="labelPlaceholder" + :custom-formatter="formatter" + :data="filteredChoices" + dropdown-position="bottom" + openWithFocus + @input="updateInput" + @choose="selectOption"/> + <unnnic-select-smart + v-else + :value="choicesSelectSmart.value" + :options="choicesSelectSmart.options" + @input="update($event[0].value)" + ></unnnic-select-smart> +</template> + +<script> +import { formatters, useSelectSmart } from '@/utils'; +import FetchChoiceInput from './FetchChoiceInput'; + +export default { + components: { + FetchChoiceInput, + }, + props: { + choices: { + type: Array, + default: () => [], + }, + fetch: { + type: Function, + default: null, + }, + initialData: { + type: [Array, String], + default: null, + }, + compact: { + type: Boolean, + default: null, + }, + labelPlaceholder: { + type: String, + default: '', + }, + }, + data() { + return { + value: this.initialData, + formatter: choice => choice.display_name, + }; + }, + computed: { + filteredChoices() { + if (!this.value || this.value.length === 0) { return this.choices; } + const search = new RegExp(formatters.bothubItemKey()(this.value.toLowerCase())); + return this.choices + .filter( + choice => search.test(formatters.bothubItemKey()(choice.display_name.toLowerCase())), + ); + }, + + choicesSelectSmart() { + return useSelectSmart({ + from: this.choices, + value: 'value', + label: 'display_name', + placeholder: '', + currentValue: this.value, + }); + }, + }, + mounted() { + this.update(); + }, + methods: { + updateInput() { + const search = formatters.bothubItemKey()(this.value.toLowerCase()); + const option = this.choices.find( + choice => formatters.bothubItemKey()(choice.display_name.toLowerCase()) + === search, + ); + if (option) { + this.$emit('input', option.value); + } else { + this.$emit('input', ''); + } + }, + selectOption(option) { + if (option) { + this.$emit('input', option.value); + } else { + this.$emit('input', ''); + } + }, + update(value) { + this.value = value; + this.$emit('input', this.value); + }, + }, +}; +</script> diff --git a/src/components/inputs/EntitiesInput/NewEntitiesInput.vue b/src/components/inputs/EntitiesInput/NewEntitiesInput.vue index fee810256..13598dc5e 100644 --- a/src/components/inputs/EntitiesInput/NewEntitiesInput.vue +++ b/src/components/inputs/EntitiesInput/NewEntitiesInput.vue @@ -73,16 +73,15 @@ :closeIcon="false" > <div slot="message" class="modal-header text-left"> - <unnnic-autocomplete - :label="$t('webapp.trainings.add_entity_field_label')" - ref="entityInputField" + <UnnnicFormElement + :label="$t('webapp.trainings.add_entity_field_label')" + > + <Autocomplete v-model="entity" - :data="filteredEntities" - :openWithFocus="true" - :iconRight="isEntityInputActive ? 'arrow-button-up-1' : 'arrow-button-down-1'" - @focus="onInputClick()" - @blur="onInputClick()" - /> + ref="entityInputField" + :options="filteredEntities" + /> + </UnnnicFormElement> <div> <unnnic-label class="mt-5" :label="$t('webapp.trainings.add_entity_checkbox_title')" /> <div class="words-wrapper"> @@ -167,7 +166,6 @@ export default { isOpen: false, entityModal: false, entity: '', - isEntityInputActive: false, selectedEntities: [] }; }, @@ -282,9 +280,6 @@ export default { }); this.entities = this.entities.filter(value => !!value); }, - onInputClick() { - this.isEntityInputActive = !this.isEntityInputActive - }, onWordSelected(event) { const temporaryEntityId = generateTemporaryId(); const start = this.text.indexOf(event.text); diff --git a/src/components/repository/phrase-suggestion/AddSentenceForm.vue b/src/components/repository/phrase-suggestion/AddSentenceForm.vue index c96312e03..06d5e9b44 100644 --- a/src/components/repository/phrase-suggestion/AddSentenceForm.vue +++ b/src/components/repository/phrase-suggestion/AddSentenceForm.vue @@ -24,16 +24,10 @@ :label="$t('webapp.trainings.intent')" :message="errors.intent" > - <UnnnicAutocomplete + <Autocomplete v-model="intent" - :data="filteredData" + :options="filteredData" :placeholder="$t('webapp.example.intent')" - :openWithFocus="true" - @focus="onInputClick('intent')" - @blur="onInputClick('intent')" - :iconRight=" - isIntentInputActive ? 'arrow-button-up-1' : 'arrow-button-down-1' - " /> </UnnnicFormElement> @@ -93,6 +87,7 @@ import { formatters, LANGUAGES } from '@/utils'; import InputWithHightlights from '../../InputWithHightlights'; import { get } from 'lodash'; import SelectLanguage from '../../SelectLanguage.vue'; +import Autocomplete from '../../Autocomplete.vue'; export default { name: 'AddSentenceForm', @@ -101,6 +96,7 @@ export default { NewEntitiesInput, InputWithHightlights, SelectLanguage, + Autocomplete, }, props: { repository: { @@ -120,8 +116,6 @@ export default { entitiesList: [], blockedNextStepTutorial: false, hideDropdown: true, - isIntentInputActive: false, - isLanguageInputActive: false, }; }, computed: { @@ -132,9 +126,7 @@ export default { return this.isValid && !this.submitting; }, filteredData() { - return (this.repository.intents_list || []).filter((intent) => - intent.startsWith(this.intent.toLowerCase()), - ); + return this.repository.intents_list || []; }, validationErrors() { const errors = []; @@ -234,12 +226,6 @@ export default { return false; }, - onInputClick(target) { - if (target === 'intent') - this.isIntentInputActive = !this.isIntentInputActive; - if (target === 'language') - this.isLanguageInputActive = !this.isLanguageInputActive; - }, }, }; </script> diff --git a/src/components/shared/accordion/EditExampleAccordion.vue b/src/components/shared/accordion/EditExampleAccordion.vue index 73a7a031b..1da7f0715 100644 --- a/src/components/shared/accordion/EditExampleAccordion.vue +++ b/src/components/shared/accordion/EditExampleAccordion.vue @@ -55,21 +55,13 @@ :isStepBlocked="intent === ''" :message="errors.intent" > - <UnnnicAutocomplete - :label="$t('webapp.example.intent')" - v-model="intent" - :data="optionsIntents" - :placeholder="$t('webapp.example.intent')" - :openWithFocus="true" - @focus="onInputClick('intent')" - @blur="onInputClick('intent')" - :iconRight=" - isIntentInputActive ? 'arrow-button-up-1' : 'arrow-button-down-1' - " - @click.native="hideDropdown = false" - :class="hideDropdown ? 'hidden' : ''" - @input="intent = intentFormatters(intent)" - /> + <UnnnicFormElement :label="$t('webapp.example.intent')"> + <Autocomplete + v-model="intent" + :options="filterIntents" + :placeholder="$t('webapp.example.intent')" + /> + </UnnnicFormElement> </BField> </div> <div class="column is-12 mt-4 p-0"> @@ -118,6 +110,7 @@ import LanguageBadge from '@/components/shared/LanguageBadge'; import ExampleEntitySmallInput from '@/components/example/ExampleEntitySmallInput'; import EditExampleBase from './EditExampleBase'; import NewEntitiesInput from '@/components/inputs/EntitiesInput/NewEntitiesInput'; +import Autocomplete from '../../Autocomplete.vue'; export default { name: 'EditExampleAccordion', @@ -127,6 +120,7 @@ export default { LanguageBadge, ExampleEntitySmallInput, NewEntitiesInput, + Autocomplete, }, extends: EditExampleBase, props: { @@ -159,19 +153,10 @@ export default { }, filterIntents() { if (this.intents !== null) { - return this.repository.intents_list.filter( - (intent) => - intent - .toString() - .toLowerCase() - .indexOf(this.intent.toLowerCase()) >= 0, - ); + return this.repository.intents_list; } return []; }, - optionsIntents() { - return this.filterIntents.map((intent) => intent); - }, }, watch: { open() { diff --git a/src/components/shared/accordion/EditExampleIntent.vue b/src/components/shared/accordion/EditExampleIntent.vue index 7c974bbcb..43306f30b 100644 --- a/src/components/shared/accordion/EditExampleIntent.vue +++ b/src/components/shared/accordion/EditExampleIntent.vue @@ -163,20 +163,17 @@ slot="message" class="modal-header text-left" > - <UnnnicAutocomplete + <UnnnicFormElement :label="$t('webapp.trainings.add_entity_field_label')" - ref="entityInputField" - :data="getAllEntities" - v-model="entity" - :openWithFocus="true" - :iconRight=" - isEntityInputActive - ? 'arrow-button-up-1' - : 'arrow-button-down-1' - " - @focus="onInputClick()" - @blur="onInputClick()" - /> + > + <Autocomplete + v-model="entity" + ref="entityInputField" + :options="getAllEntities" + :placeholder="$t('webapp.example.intent')" + /> + </UnnnicFormElement> + <div> <UnnnicLabel class="mt-5" @@ -252,6 +249,7 @@ import EntityAccordion from '@/components/shared/accordion/EntityAccordion'; import WordCard from '@/components/shared/accordion/WordCard'; import InputWithHightlights from '../../InputWithHightlights'; import SelectLanguage from '../../SelectLanguage.vue'; +import Autocomplete from '../../Autocomplete.vue'; export default { name: 'EditExampleIntent', @@ -261,6 +259,7 @@ export default { WordCard, InputWithHightlights, SelectLanguage, + Autocomplete, }, props: { from: { @@ -273,7 +272,6 @@ export default { hideDropdown: true, isOpen: false, entityModal: false, - isEntityInputActive: false, selectedEntities: [], entity: '', textSelected: null, @@ -365,9 +363,6 @@ export default { this.cancelEditEntity(); }, - onInputClick() { - this.isEntityInputActive = !this.isEntityInputActive; - }, }, }; </script> diff --git a/src/components/translate/EditTranslation.vue b/src/components/translate/EditTranslation.vue index 97ae4dc7a..6e8f08770 100644 --- a/src/components/translate/EditTranslation.vue +++ b/src/components/translate/EditTranslation.vue @@ -134,20 +134,17 @@ slot="message" class="modal-header text-left" > - <UnnnicAutocomplete + <UnnnicFormElement :label="$t('webapp.trainings.add_entity_field_label')" - ref="entityInputField" - :data="getAllEntities" - v-model="entity" - :openWithFocus="true" - :iconRight=" - isEntityInputActive - ? 'arrow-button-up-1' - : 'arrow-button-down-1' - " - @focus="onInputClick()" - @blur="onInputClick()" - /> + > + <Autocomplete + v-model="entity" + ref="entityInputField" + :options="getAllEntities" + :placeholder="$t('webapp.example.intent')" + /> + </UnnnicFormElement> + <div> <UnnnicLabel class="mt-5" @@ -215,6 +212,7 @@ import ExampleTextWithHighlightedEntitiesInput from '@/components/inputs/Example import EntityAccordion from '@/components/shared/accordion/EntityAccordion'; import WordCard from '@/components/shared/accordion/WordCard'; import { mapActions, mapGetters } from 'vuex'; +import Autocomplete from '../Autocomplete.vue'; export default { name: 'EditTranslation', @@ -222,6 +220,7 @@ export default { ExampleTextWithHighlightedEntitiesInput, EntityAccordion, WordCard, + Autocomplete, }, props: { from: { @@ -238,7 +237,6 @@ export default { hideDropdown: true, isOpen: false, entityModal: false, - isEntityInputActive: false, selectedEntities: [], entity: '', }; @@ -330,9 +328,6 @@ export default { this.cancelEditEntity(); }, - onInputClick() { - this.isEntityInputActive = !this.isEntityInputActive; - }, async saveTranslation() { this.submitting = true; const entities = this.allEntities.map( From 724ee07d8ef7c596e4e4e8e1ca9871520193f040 Mon Sep 17 00:00:00 2001 From: Matheus Cristian <mathues@email.com> Date: Fri, 28 Jun 2024 17:47:21 -0300 Subject: [PATCH 4/5] feat(depreciated-components): uses entityFormat for autocomplete to possibility the use of creation of intent and entity --- src/components/Autocomplete.vue | 48 ++++++++++++++++++- src/components/example/NewExampleForm.vue | 1 + .../inputs/EntitiesInput/NewEntitiesInput.vue | 1 + .../phrase-suggestion/AddSentenceForm.vue | 1 + .../shared/accordion/EditExampleAccordion.vue | 1 + .../shared/accordion/EditExampleIntent.vue | 1 + src/components/translate/EditTranslation.vue | 1 + 7 files changed, 52 insertions(+), 2 deletions(-) diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue index 470b7884c..903b24861 100644 --- a/src/components/Autocomplete.vue +++ b/src/components/Autocomplete.vue @@ -1,5 +1,6 @@ <template> <UnnnicSelectSmart + ref="autocomplete" :value="[ finalOptions.find(({ value: insideValue }) => insideValue === value), ]" @@ -9,10 +10,12 @@ autocomplete autocompleteClearOnFocus v-bind="$attrs" - /> + />\ </template> <script> +import { formatters } from '../utils'; + export default { props: { value: String, @@ -23,14 +26,55 @@ export default { }, options: Array, + + entityFormat: Boolean, + }, + + data() { + return { + createdValue: '', + }; }, computed: { finalOptions() { - return [{ value: '', label: this.placeholder }].concat( + const options = [{ value: '', label: this.placeholder }].concat( this.options.map((value) => ({ value, label: value })), ); + + if (this.createdValue) { + options.push({ value: this.createdValue, label: this.createdValue }); + } + + return options; + }, + }, + + methods: { + formatOnBlur(event) { + if (this.entityFormat) { + let { value } = event.target; + + value = + formatters.bothubItemKey()(value.toLowerCase()) || this.createdValue; + + this.$emit('input', value); + + this.createdValue = value; + } }, }, + + mounted() { + this.$refs.autocomplete.$el + .querySelector('input') + .addEventListener('blur', this.formatOnBlur); + }, + + beforeDestroy() { + this.$refs.autocomplete.$el + .querySelector('input') + .removeEventListener('blur', this.formatOnBlur); + }, }; </script> diff --git a/src/components/example/NewExampleForm.vue b/src/components/example/NewExampleForm.vue index 087edae58..2eb581979 100644 --- a/src/components/example/NewExampleForm.vue +++ b/src/components/example/NewExampleForm.vue @@ -42,6 +42,7 @@ v-model="intent" :options="filteredData" :placeholder="$t('webapp.example.intent')" + entityFormat /> </UnnnicFormElement> </div> diff --git a/src/components/inputs/EntitiesInput/NewEntitiesInput.vue b/src/components/inputs/EntitiesInput/NewEntitiesInput.vue index 13598dc5e..ee0679cc0 100644 --- a/src/components/inputs/EntitiesInput/NewEntitiesInput.vue +++ b/src/components/inputs/EntitiesInput/NewEntitiesInput.vue @@ -80,6 +80,7 @@ v-model="entity" ref="entityInputField" :options="filteredEntities" + entityFormat /> </UnnnicFormElement> <div> diff --git a/src/components/repository/phrase-suggestion/AddSentenceForm.vue b/src/components/repository/phrase-suggestion/AddSentenceForm.vue index 06d5e9b44..2ec2a747d 100644 --- a/src/components/repository/phrase-suggestion/AddSentenceForm.vue +++ b/src/components/repository/phrase-suggestion/AddSentenceForm.vue @@ -28,6 +28,7 @@ v-model="intent" :options="filteredData" :placeholder="$t('webapp.example.intent')" + entityFormat /> </UnnnicFormElement> diff --git a/src/components/shared/accordion/EditExampleAccordion.vue b/src/components/shared/accordion/EditExampleAccordion.vue index 1da7f0715..532658e45 100644 --- a/src/components/shared/accordion/EditExampleAccordion.vue +++ b/src/components/shared/accordion/EditExampleAccordion.vue @@ -60,6 +60,7 @@ v-model="intent" :options="filterIntents" :placeholder="$t('webapp.example.intent')" + entityFormat /> </UnnnicFormElement> </BField> diff --git a/src/components/shared/accordion/EditExampleIntent.vue b/src/components/shared/accordion/EditExampleIntent.vue index 43306f30b..4f595865c 100644 --- a/src/components/shared/accordion/EditExampleIntent.vue +++ b/src/components/shared/accordion/EditExampleIntent.vue @@ -171,6 +171,7 @@ ref="entityInputField" :options="getAllEntities" :placeholder="$t('webapp.example.intent')" + entityFormat /> </UnnnicFormElement> diff --git a/src/components/translate/EditTranslation.vue b/src/components/translate/EditTranslation.vue index 6e8f08770..790fbe9f2 100644 --- a/src/components/translate/EditTranslation.vue +++ b/src/components/translate/EditTranslation.vue @@ -142,6 +142,7 @@ ref="entityInputField" :options="getAllEntities" :placeholder="$t('webapp.example.intent')" + entityFormat /> </UnnnicFormElement> From af31e663dbb0906a4428c75b4d5cc8e10db87aa2 Mon Sep 17 00:00:00 2001 From: Matheus Cristian <mathues@email.com> Date: Fri, 28 Jun 2024 17:48:01 -0300 Subject: [PATCH 5/5] feat(depreciated-components): removes typo --- src/components/Autocomplete.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue index 903b24861..6c6df1af7 100644 --- a/src/components/Autocomplete.vue +++ b/src/components/Autocomplete.vue @@ -10,7 +10,7 @@ autocomplete autocompleteClearOnFocus v-bind="$attrs" - />\ + /> </template> <script>