New search query

app/views/admin/communication/unsplash/_selector.html.erb

@@ -39,7 +39,7 @@ about_featured_image_credit = "##{about_identifier}_featured_image_credit"
               <input  type="text"
                       name="search"
                       placeholder="Recherche en anglais..."
-                      v-model="searchValue"
+                      v-model="params.query"
                       class="form-control">
             </div>
             <div class="col-lg-3">
@@ -52,8 +52,9 @@ about_featured_image_credit = "##{about_identifier}_featured_image_credit"
             </div>
           </div>
           <div class="row" ref="results">
-            <p v-if="data.length === 0 || !data" >Aucun résultat</p>
-            <div v-for="image in data"  class="col-6 col-lg-2">
+            <p v-if="data.results.length === 0 || !data" >Aucun résultat</p>
+
+            <div v-for="image in data.results"  class="col-6 col-lg-2">
               <img 
                   :src="image.thumb" 
                   :alt="image.alt" 
@@ -61,12 +62,15 @@ about_featured_image_credit = "##{about_identifier}_featured_image_credit"
                   class="img-fluid img-thumbnail mb-3"
                   :class="image === selected ? 'bg-secondary' : ''">
             </div>
+
+            <%# <button v-if="data.results.length > 0 && data.total_pages > params.page">Plus de résultats</button> %>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
+
 <%# Include vue.js before call Vue.createApp %>
 <%= javascript_include_tag 'vue' %>
 
@@ -74,16 +78,23 @@ about_featured_image_credit = "##{about_identifier}_featured_image_credit"
   var app = Vue.createApp({
     data() {
       return {
-        quantity: 12,
-        searchValue: '<%= search %>',
-        unsplashUrl: '<%= admin_communication_unsplash_path(format: :json) %>',
         selected: {},
+        params: {
+          url: '<%= admin_communication_unsplash_path(format: :json) %>',
+          per_page: 12,
+          page: 1,
+          lang: '<%= about&.language&.iso_code %>',
+          query: '<%= search || "" %>'
+        },
         targets: {
           image: '<%= about_featured_image_image %>',
           alt: '<%= about_featured_image_alt %>',
           credit: '<%= about_featured_image_credit %>'
         },
-        data: []
+        data: {
+          results: [],
+          total: 0
+        }
       }
     },
     mounted() {
@@ -93,7 +104,7 @@ about_featured_image_credit = "##{about_identifier}_featured_image_credit"
     },
     methods: {
       search() {
-        if (!this.searchValue) {
+        if (!this.params.query) {
           return null;
         }
 
@@ -101,9 +112,11 @@ about_featured_image_credit = "##{about_identifier}_featured_image_credit"
         xmlHttp.onreadystatechange = function() { 
           if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
             this.data = JSON.parse(xmlHttp.responseText);
+            console.log(this.data)
           }
         }.bind(this);
-        xmlHttp.open( "GET", this.unsplashUrl + '&search=' + this.searchValue + '&quantity=' + this.quantity, false );
+
+        xmlHttp.open( "GET", this.params.url + '&query=' + this.params.query + '&per_page=' + this.params.per_page + '&page=' + this.params.page + '&lang=' + this.params.lang, false );
         xmlHttp.send( null );
       },
       select(image) {