big refactoring, opening flagcollection (folder) on the left of main-content

web/themes/custom/materiotheme/vuejs/store/index.js

@@ -1,5 +1,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+
+import { createStore } from 'vuex-extensions'
+
+import { JSONAPI } from 'vuejs/api/json-axios'
+import qs from 'querystring-es3'
+
 import Common from './modules/common'
 import User from './modules/user'
 import Search from './modules/search'
@@ -10,7 +16,8 @@ import Pages from './modules/pages'
 // https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
 
 Vue.use(Vuex)
-export default new Vuex.Store({
+// export default new Vuex.Store({
+export default createStore(Vuex.Store, {
   modules: {
     Common,
     User,
@@ -18,5 +25,87 @@ export default new Vuex.Store({
     Blabla,
     Showrooms,
     Pages
+  },
+  // https://github.com/huybuidac/vuex-extensions
+  mixins: {
+    actions: {
+      loadMaterials ({ dispatch }, { uuids, imgStyle, callBack, callBackArgs }) {
+        const params = {
+          // include: 'images', // no needs to include thanks to consumers_image_styles module
+          // include: 'drupal_internal__nid',
+          'filter[uuids-groupe][group][conjunction]': 'OR'
+        }
+        for (let i = 0; i < uuids.length; i++) {
+          const uuid = uuids[i]
+          params[`filter[${uuid}][condition][path]`] = 'id'
+          params[`filter[${uuid}][condition][value]`] = uuid
+          params[`filter[${uuid}][condition][operator]`] = '='
+          params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
+        }
+        // console.log('search JSONAPI params', params);
+        const q = qs.stringify(params)
+        return JSONAPI.get('node/materiau?' + q)
+          .then(({ data }) => {
+            console.log('mixin getMaterials data', data)
+            dispatch('parseMaterials', { data: data.data, uuids: uuids, imgStyle: imgStyle, callBack: callBack, callBackArgs: callBackArgs })
+            // commit('setItems', data.items)
+          })
+          .catch((error) => {
+            console.warn('Issue with getItems', error)
+            Promise.reject(error)
+          })
+      },
+      parseMaterials ({ dispatch }, { data, uuids, imgStyle, callBack, callBackArgs }) {
+        // data comes from jsonapi query
+        // uuids comes from original query (solr, FlagCollection, etc)
+        // so we loop from uuids to conserve the original order
+        console.log('mixin parseMaterials', data, uuids, callBack, callBackArgs)
+        const items = []
+        // for (var i = 0; i < data.length; i++) {
+        for (let i = 0; i < uuids.length; i++) {
+          const uuid = uuids[i]
+          // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
+          const item_index = data.findIndex(p => p.id === uuid)
+          // console.log('item_index', item_index);
+          if (item_index === -1) continue
+
+          const item_src = data[item_index]
+          const attrs = item_src.attributes
+          const relations = item_src.relationships
+
+          // get field values
+          const item = {
+            uuid: uuid,
+            title: attrs.title,
+            field_short_description: attrs.field_short_description,
+            body: attrs.body,
+            field_reference: attrs.field_reference
+          }
+
+          // get images included values
+          const img_src = relations.images.data
+          // console.log('img_src', img_src);
+          // this is a temporary deactivation of images
+          // img_src = [];
+          item.images = []
+          for (let j = 0; j < img_src.length; j++) {
+            if (img_src[j].meta.imageDerivatives) {
+              item.images.push({
+                title: img_src[j].meta.title,
+                // meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module
+                // BUG: missing all image derivative but first
+                url: img_src[j].meta.imageDerivatives.links.[imgStyle].href
+              })
+            } else {
+              console.warn('missing image derivative ' + j + '/' + img_src.length + ' for ' + attrs.title)
+            }
+          }
+
+          items.push(item)
+        }
+        console.log('items', items)
+        dispatch(callBack, { items: items, callBackArgs: callBackArgs })
+      }
+    }
   }
 })