Skip to content

Commit

Permalink
feat(depreciated-components): replaces UnnnicAutocomplete to UnnnicSe…
Browse files Browse the repository at this point in the history
…lectSmart with autocomplete
cristiantela committed Jun 25, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 95ab759 commit 00cb8cb
Showing 8 changed files with 199 additions and 219 deletions.
36 changes: 36 additions & 0 deletions src/components/Autocomplete.vue
Original file line number Diff line number Diff line change
@@ -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>
22 changes: 5 additions & 17 deletions src/components/example/NewExampleForm.vue
Original file line number Diff line number Diff line change
@@ -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>
222 changes: 111 additions & 111 deletions src/components/form-generator/inputs/ChoiceInput.vue
Original file line number Diff line number Diff line change
@@ -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>
21 changes: 8 additions & 13 deletions src/components/inputs/EntitiesInput/NewEntitiesInput.vue
Original file line number Diff line number Diff line change
@@ -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);
24 changes: 5 additions & 19 deletions src/components/repository/phrase-suggestion/AddSentenceForm.vue
Original file line number Diff line number Diff line change
@@ -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>
35 changes: 10 additions & 25 deletions src/components/shared/accordion/EditExampleAccordion.vue
Original file line number Diff line number Diff line change
@@ -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() {
29 changes: 12 additions & 17 deletions src/components/shared/accordion/EditExampleIntent.vue
Original file line number Diff line number Diff line change
@@ -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>
29 changes: 12 additions & 17 deletions src/components/translate/EditTranslation.vue
Original file line number Diff line number Diff line change
@@ -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,13 +212,15 @@ 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',
components: {
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(

0 comments on commit 00cb8cb

Please sign in to comment.