Merge pull request #350 from weni-ai/nexus-1536-remove-depreciated-au…

…tocomplete [Nexus-1536] Replacement of the Remaining Depreciated Components
weni-ai · Jul 12, 2024 · 6cf6c8d · 6cf6c8d
2 parents 7afaac6 + 5a55258
commit 6cf6c8d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 51 deletions.
diff --git a/src/components/form-generator/inputs/ChoiceInput.vue b/src/components/form-generator/inputs/ChoiceInput.vue
@@ -5,16 +5,14 @@
     :label-placeholder="labelPlaceholder"
     v-model="value"
     @input="update()"/>
-  <unnnic-autocomplete
+  <Autocomplete
     v-else-if="compact"
-    v-model="value"
+    :value="value"
     :placeholder="labelPlaceholder"
-    :custom-formatter="formatter"
     :data="filteredChoices"
-    dropdown-position="bottom"
-    openWithFocus
-    @input="updateInput"
-    @choose="selectOption"/>
+    @input="update($event)"
+    entityFormat
+    />
   <unnnic-select-smart
     v-else
     :value="choicesSelectSmart.value"
@@ -26,10 +24,12 @@
 <script>
 import { formatters, useSelectSmart } from '@/utils';
 import FetchChoiceInput from './FetchChoiceInput';
+import Autocomplete from '../../Autocomplete.vue';
 
 export default {
   components: {
     FetchChoiceInput,
+    Autocomplete,
   },
   props: {
     choices: {
@@ -61,12 +61,9 @@ export default {
   },
   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())),
-        );
+      return this.choices.map((choice) =>
+        formatters.bothubItemKey()(choice.display_name.toLowerCase()),
+      );
     },
 
     choicesSelectSmart() {
@@ -83,25 +80,6 @@ export default {
     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);

diff --git a/src/components/inputs/EntitiesInput/EntityForm.vue b/src/components/inputs/EntitiesInput/EntityForm.vue
@@ -10,17 +10,13 @@
           </span>
           {{ $t('webapp.result.is') }}
         </p>
-        <unnnic-autocomplete
-            id="tour-training-step-3"
-            ref="entityInputField"
-            v-model="entity"
-            :data="filteredData"
-            @icon-right-click="removeEntity()"
-            open-with-focus
-            :iconRight="entity ? 'delete-1-1' : ''"
-            :class="{ hidden: filteredData.length === 0 }"
-            highlight
-          />
+        <Autocomplete
+          v-model="entity"
+          ref="entityInputField"
+          id="tour-training-step-3"
+          :options="filteredData"
+          entityFormat
+        />
       </div>
     </div>
   </div>
@@ -29,12 +25,16 @@
 <script>
 import { mapGetters } from 'vuex';
 import { formatters } from '@/utils';
+import Autocomplete from '../../Autocomplete.vue';
 
 export default {
   name: 'EntityForm',
   model: {
     prop: 'entity',
   },
+  components: {
+    Autocomplete,
+  },
   props: {
     entityClass: {
       type: String,
@@ -76,13 +76,7 @@ export default {
       ];
     },
     filteredData() {
-      return (this.availableEntities || []).filter(
-        entity => entity.length === 0
-          || (
-            entity.includes(this.entity.toLowerCase())
-            && entity !== this.entity.toLowerCase()
-          )
-      );
+      return this.availableEntities || [];
     },
     selectedText() {
       return this.text.substring(this.selectedTextStart, this.selectedTextEnd);

diff --git a/src/components/inputs/EntitiesInput/NewEntitiesInput.vue b/src/components/inputs/EntitiesInput/NewEntitiesInput.vue
@@ -121,13 +121,15 @@ import _ from 'lodash';
 import EntityForm from './EntityForm';
 import EntityAccordion from '@/components/shared/accordion/EntityAccordion';
 import WordCard from '@/components/shared/accordion/WordCard';
+import Autocomplete from '../../Autocomplete.vue';
 
 export default {
   name: 'NewEntitiesInput',
   components: {
     EntityForm,
     EntityAccordion,
-    WordCard
+    WordCard,
+    Autocomplete,
   },
   props: {
     value: {