fixed cards display order

web/modules/custom/materio_sapi/src/Controller/Base.php

@@ -99,18 +99,21 @@ class Base extends ControllerBase {
       
       $resp['options'] = $this->query->getOptions();
 
-      $items = [];
+      // $items = [];
+      $uuids = [];
       foreach ($this->results as $result) {
-        $nid = $result->getField('nid')->getValues()[0];
-        $uuid = $result->getField('uuid')->getValues()[0];
-        $title = $result->getField('title')->getValues()[0]->getText();
-        $items[] = [
-          'nid' => $nid,
-          'uuid' => $uuid,
-          'title' => $title,
-        ];
+        // $nid = $result->getField('nid')->getValues()[0];
+        // $uuid = $result->getField('uuid')->getValues()[0];
+        // $title = $result->getField('title')->getValues()[0]->getText();
+        // $items[] = [
+        //   'nid' => $nid,
+        //   'uuid' => $uuid,
+        //   'title' => $title,
+        // ];
+        $uuids[] = $result->getField('uuid')->getValues()[0];
       }
-      $resp['items'] = $items;
+      // $resp['items'] = $items;
+      $resp['uuids'] = $uuids;
     }
 
     return new JsonResponse($resp);

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -231,7 +231,7 @@ article.node--type-frontpage{
 
 .card{
   position: relative;
-  width:200px; height:295px;
+  width:210px; height:295px;
   header{
     position: absolute;
     bottom:0;
@@ -257,6 +257,7 @@ article.node--type-frontpage{
     img:not(:first-of-type){
       position: absolute;
       top:0; left:0;
+      z-index:1;
     }
   }
 }

web/themes/custom/materiotheme/vuejs/store/modules/search.js

@@ -9,6 +9,7 @@ export default {
   state : {
     keys: "",
     term: "",
+    uuids: [],
     items: [],
     offset: 0,
     limit: 15,
@@ -21,10 +22,16 @@ export default {
 
   // mutations
   mutations : {
+    setUuids (state, uuids) {
+      state.uuids = uuids
+    },
+    resetUuids (state) {
+      state.uuids = []
+    },
     setItems (state, items) {
       state.items = items
     },
-    resetItems(state) {
+    resetItems (state) {
       state.items = []
     },
     setKeys (state, keys) {
@@ -51,6 +58,7 @@ export default {
   actions : {
     newSearch({ dispatch, commit, state }) {
       console.log('Search newSearch');
+      commit('resetUuids')
       commit('resetItems')
       commit('resetOffset')
       dispatch('getResults')
@@ -70,20 +78,21 @@ export default {
           // commit('setItems', data.items)
           commit('setInfos', data.infos)
           commit('setCount', data.count)
-          dispatch('getItems', data.items)
+          commit('setUuids', data.uuids)
+          dispatch('getItems', data.uuids)
         })
         .catch(( error ) => {
             console.warn('Issue with getResults', error)
             Promise.reject(error)
         })
     },
-    getItems({ dispatch, commit, state}, itemslist) {
+    getItems({ dispatch, commit, state }, uuids) {
       let params = {
         // include: 'images', // no needs to include thanks to consumers_image_styles module
         'filter[uuids-groupe][group][conjunction]': 'OR'
       };
-      for (var i = 0; i < itemslist.length; i++) {
-        let uuid = itemslist[i].uuid
+      for (var i = 0; i < uuids.length; i++) {
+        let uuid = uuids[i]
         params[`filter[${uuid}][condition][path]`] = 'id'
         params[`filter[${uuid}][condition][value]`] = uuid
         params[`filter[${uuid}][condition][operator]`] = '='
@@ -94,7 +103,7 @@ export default {
       return JSONAPI.get('node/materiau?'+q)
         .then(({ data }) => {
           console.log('search getItems data', data)
-          dispatch('parseItems', data)
+          dispatch('parseItems', {data:data.data, uuids:uuids})
           // commit('setItems', data.items)
         })
         .catch(( error ) => {
@@ -102,13 +111,18 @@ export default {
             Promise.reject(error)
         })
     },
-    parseItems({ dispatch, commit, state }, { data }) {
-      console.log('search parseItems data', data)
+    parseItems({ dispatch, commit, state }, { data, uuids }) {
+      // data comes from jsonapi query
+      // uuids comes from solr search query (we loop from uuids to conserve the search results order)
+      console.log('search parseItems data, uuids', data, uuids)
       let items = []
-      for (var i = 0; i < data.length; i++) {
-        let itemsrc = data[i]
-        let attrs = itemsrc.attributes
-        let relations = itemsrc.relationships
+      // for (var i = 0; i < data.length; i++) {
+      for (var i = 0; i < uuids.length; i++) {
+        let uuid = uuids[i]
+        let item_index = data.findIndex(p => p.id == uuid)
+        let item_src = data[item_index]
+        let attrs = item_src.attributes
+        let relations = item_src.relationships
 
         // get field values
         let item = {
@@ -119,15 +133,15 @@ export default {
         }
 
         // get images included values
-        let imgsrc = relations.images.data
+        let img_src = relations.images.data
         item.images = []
-        for (var j = 0; j < imgsrc.length; j++) {
+        for (var j = 0; j < img_src.length; j++) {
         //   // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
-        //   let index = included.findIndex(p => p.id == imgsrc[j].id)
+        //   let index = included.findIndex(p => p.id == img_src[j].id)
         //   let img = included[index]
           item.images.push({
-            title: imgsrc[j].meta.title,
-            url: imgsrc[j].meta.imageDerivatives.links.card_medium.href
+            title: img_src[j].meta.title,
+            url: img_src[j].meta.imageDerivatives.links.card_medium.href
           })
         }