Merge pull request #348 from weni-ai/nexus-1439-update-depreciated-co…

…mponents

[Nexus-1439] Update Depreciated Components

src/components/Autocomplete.vue

@@ -0,0 +1,80 @@
+<template>
+  <UnnnicSelectSmart
+    ref="autocomplete"
+    :value="[
+      finalOptions.find(({ value: insideValue }) => insideValue === value),
+    ]"
+    @input="$emit('input', $event[0].value)"
+    :options="finalOptions"
+    orderedByIndex
+    autocomplete
+    autocompleteClearOnFocus
+    v-bind="$attrs"
+  />
+</template>
+
+<script>
+import { formatters } from '../utils';
+
+export default {
+  props: {
+    value: String,
+
+    placeholder: {
+      type: String,
+      default: '',
+    },
+
+    options: Array,
+
+    entityFormat: Boolean,
+  },
+
+  data() {
+    return {
+      createdValue: '',
+    };
+  },
+
+  computed: {
+    finalOptions() {
+      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>

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>

src/components/example/NewExampleForm.vue

@@ -38,18 +38,11 @@
             </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'
-                "
+                entityFormat
               />
             </UnnnicFormElement>
           </div>
@@ -58,19 +51,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,13 +109,17 @@ 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';
+import Autocomplete from '../Autocomplete.vue';
 
 export default {
   name: 'NewExampleForm',
   components: {
     ExampleTextWithHighlightedEntitiesInput,
     NewEntitiesInput,
     InputWithHightlights,
+    SelectLanguage,
+    Autocomplete,
   },
   props: {
     repository: {
@@ -151,7 +139,6 @@ export default {
       entitiesList: [],
       blockedNextStepTutorial: false,
       hideDropdown: true,
-      isIntentInputActive: false,
       isLanguageInputActive: false,
       alertSuccess: false,
       addEntity: false,
@@ -165,9 +152,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 = [];
@@ -209,9 +194,6 @@ export default {
         entities,
       };
     },
-    languageList() {
-      return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]);
-    },
   },
   watch: {
     async intent() {
@@ -294,9 +276,6 @@ export default {
       }
       return false;
     },
-    onIntentInputClick() {
-      this.isIntentInputActive = !this.isIntentInputActive;
-    },
   },
 };
 </script>