From 45c608cd4832931c29cd7913a83099ee1c5aa3e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Wed, 15 Dec 2021 18:55:25 +0100
Subject: [PATCH] AddPerson: optimize request while searching

* wait for a person to finish to type: delay before launching request;
* cancel previous requests, if any
---
 .../Resources/public/vuejs/_api/AddPersons.js | 38 ++++++++++++-------
 .../public/vuejs/_components/AddPersons.vue   | 32 ++++++++++------
 2 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js
index cf2404288..d72a42b15 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js
@@ -3,44 +3,54 @@
 */
 const parametersToString = ({ query, options }) => {
    let types ='';
-   options.type.forEach(function(type) { 
+   options.type.forEach(function(type) {
       types += '&type[]=' + type;
-   }); 
+   });
    return 'q=' + query + types;
 };
 
-/* 
+/*
 * Endpoint chill_person_search
 * 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'); 
+         throw Error('Error with request resource response');
       });
 };
 
-/* 
+/*
 * 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)
       .then(response => {
          if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response'); 
+         throw Error('Error with request resource response');
       });
 };
 
 
-export { searchPersons, searchPersons_2 };
+export { searchPersons, searchEntities };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index e2415d1e4..f118671ed 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -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 })
-               .then(suggested => new Promise((resolve, reject) => {
-                  //console.log('suggested', suggested);
-                  this.loadSuggestions(suggested.results);
-                  resolve();
-            }));
-         } else {
-            this.loadSuggestions([]);
-         }
+
+         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) => {
+                    this.loadSuggestions(suggested.results);
+                    resolve();
+                  }));
+            }
+         }.bind(this), query.length > 3 ? 300 : 700);
       },
       loadSuggestions(suggested) {
          this.search.suggested = suggested;