Auto-Complete field support (#937)

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>

src/components/ADempiere/Field/FieldAutocomplete.vue

@@ -18,20 +18,37 @@
 <template>
   <el-autocomplete
     v-model="displayedValue"
-    :placeholder="placeholder"
+    :placeholder="metadata.placeholder"
     :fetch-suggestions="localSearch"
+    :trigger-on-focus="true"
     clearable
     value-key="name"
     style="width: 100%;"
     popper-class="custom-field-bpartner-info"
     @focus="isFocus = true"
     @blur="isFocus = false"
+    @select="handleSelect"
   >
+    <template
+      slot="prefix"
+    >
+      <i
+        :class="metadata.icon"
+      />
+    </template>
     <template slot="suffix">
       <i
         class="el-icon-arrow-down el-input__icon"
       />
     </template>
+    <template slot-scope="props">
+      <div class="header">
+        <b>{{ props.item.name }} </b>
+      </div>
+      <span class="info">
+        {{ props.item.value }}
+      </span>
+    </template>
   </el-autocomplete>
 </template>
 
@@ -52,6 +69,7 @@ export default {
     }
 
     return {
+      recordsBusinessPartners: [],
       controlDisplayed: this.displayedValue,
       isFocus: false,
       isLoading: false,
@@ -191,80 +209,69 @@ export default {
       }
     },
     localSearch(stringToMatch, callBack) {
-      if (this.isEmptyValue(stringToMatch)) {
+      const localListSearch = this.metadata.loadAll
-        // not show list
+      const results = stringToMatch ? localListSearch.filter(this.createFilter(stringToMatch)) : localListSearch
-        callBack([])
+      // call callback function to return suggestions
+      if (this.isEmptyValue(results) && stringToMatch.length > 3) {
+        clearTimeout(this.timeOut)
+        this.timeOut = setTimeout(() => {
+          this.remoteSearch(stringToMatch)
+            .then(remoteResponse => {
+              callBack(remoteResponse)
+            })
+        }, 3000)
         return
       }
-
-      const recordsList = this.getterLookupList
-      let results = recordsList
-      if (stringToMatch || true) {
-        const parsedValue = stringToMatch.toLowerCase().trim()
-        results = recordsList.filter(rowBPartner => {
-          // columns: id, uuid, label
-          for (const columnBPartner in rowBPartner) {
-            const valueToCompare = String(rowBPartner[columnBPartner]).toLowerCase()
-
-            if (valueToCompare.includes(parsedValue)) {
-              return true
-            }
-          }
-          return false
-        })
-
-        // Remote search
-        if (this.isEmptyValue(results)) {
-          clearTimeout(this.timeOut)
-
-          this.timeOut = setTimeout(() => {
-            this.remoteSearch(stringToMatch)
-              .then(remoteResponse => {
-                callBack(remoteResponse)
-              })
-          }, 2000)
-          return
-        }
-      }
-
-      // call callback function to return suggestions
       callBack(results)
     },
+    createFilter(stringToMatch) {
+      return (find) => {
+        return (find.name.toLowerCase().indexOf(stringToMatch.toLowerCase()) === 0)
+      }
+    },
     remoteSearch(searchValue) {
       return new Promise(resolve => {
         const message = {
-          message: 'Sin resultados coincidentes con la busqueda',
+          message: this.$t('notifications.searchWithOutRecords'),
           type: 'info',
           showClose: true
         }
 
-        this.$store.dispatch('getLookupListFromServer', {
+        this.$store.dispatch(this.metadata.searchServer, {
-          parentUuid: this.metadata.parentUuid,
+          pageNumber: 1,
-          containerUuid: this.metadata.containerUuid,
+          searchValue
-          tableName: this.metadata.reference.tableName,
-          query: this.metadata.reference.query,
-          isAddBlankValue: true,
-          blankValue: this.blankOption.id,
-          valuesList: searchValue
         })
-          .then(() => {
+          .then((response) => {
-            const recordsList = this.getterLookupAll
+            const recordsList = this.metadata.loadAll
             if (this.isEmptyValue(recordsList)) {
               this.$message(message)
             }
-
+            return response
-            resolve(recordsList)
           })
           .catch(error => {
             console.warn(error.message)
 
             this.$message(message)
-            resolve([])
+            return []
-          })
-          .finally(() => {
-            this.isLoading = false
           })
       })
+    },
+    handleSelect(item) {
+      this.$store.commit('updateValueOfField', {
+        containerUuid: this.metadata.containerUuid,
+        columnName: this.metadata.columnName,
+        value: item.id
+      })
+      this.$store.commit('updateValueOfField', {
+        containerUuid: this.metadata.containerUuid,
+        columnName: this.metadata.displayColumnName,
+        value: item.name
+      })
+      this.$store.commit('updateValueOfField', {
+        containerUuid: this.metadata.containerUuid,
+        columnName: this.metadata.columnName + '_UUID',
+        value: item.uuid
+      })
     }
   }
 }