AddPerson: optimize request while searching

* wait for a person to finish to type: delay before launching request;
* cancel previous requests, if any
This commit is contained in:
Julien Fastré 2021-12-15 18:55:25 +01:00
parent ecbe30ae53
commit 45c608cd48
2 changed files with 45 additions and 25 deletions

View File

@ -14,11 +14,21 @@ const parametersToString = ({ query, options }) => {
* method GET, get a list of persons
*
* @query string - the query to search for
* @deprecated
*/
const searchPersons = ({ query, options }) => {
const searchPersons = ({ query, options }, signal) => {
console.err('deprecated');
let queryStr = parametersToString({ query, options });
let url = `/fr/search.json?name=person_regular&${queryStr}`;
return fetch(url)
let fetchOpts = {
method: 'GET',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
signal,
};
return fetch(url, fetchOpts)
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
@ -29,10 +39,10 @@ const searchPersons = ({ query, options }) => {
* Endpoint v.2 chill_main_search_global
* method GET, get a list of persons and thirdparty
*
* NOTE: this is a temporary WIP endpoint, return inconsistent random results
* @query string - the query to search for
* @param query string - the query to search for
*
*/
const searchPersons_2 = ({ query, options }) => {
const searchEntities = ({ query, options }, signal) => {
let queryStr = parametersToString({ query, options });
let url = `/api/1.0/search.json?${queryStr}`;
return fetch(url)
@ -43,4 +53,4 @@ const searchPersons_2 = ({ query, options }) => {
};
export { searchPersons, searchPersons_2 };
export { searchPersons, searchEntities };

View File

@ -90,7 +90,7 @@
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
import PersonSuggestion from './AddPersons/PersonSuggestion';
import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';
import { searchEntities } from 'ChillPersonAssets/vuejs/_api/AddPersons';
import { postPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
import { postThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
@ -115,6 +115,8 @@ export default {
},
search: {
query: "",
previousQuery: "",
currentSearchQueryController: null,
suggested: [],
selected: [],
priorSuggestion: {}
@ -189,16 +191,24 @@ export default {
},
setQuery(query) {
this.search.query = query;
if (query.length >= 3) {
searchPersons_2({ query, options: this.options })
setTimeout(function() {
if (query === "") {
this.loadSuggestions([]);
return;
}
if (query === this.search.query) {
if (this.currentSearchQueryController !== undefined) {
this.currentSearchQueryController.abort()
}
this.currentSearchQueryController = new AbortController();
searchEntities({ query, options: this.options }, this.currentSearchQueryController)
.then(suggested => new Promise((resolve, reject) => {
//console.log('suggested', suggested);
this.loadSuggestions(suggested.results);
resolve();
}));
} else {
this.loadSuggestions([]);
}
}.bind(this), query.length > 3 ? 300 : 700);
},
loadSuggestions(suggested) {
this.search.suggested = suggested;