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 })
+      }
+    }
   }
 })

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

@@ -16,6 +16,7 @@ export default {
     limit: 15,
     infos: null,
     count: 0,
+    noresults: false,
     // infinteState will come from vue-infinite-loading plugin
     // implemented in vuejs/components/Content/Base.vue
     infiniteLoadingState: null
@@ -32,7 +33,7 @@ export default {
     resetUuids (state) {
       state.uuids = []
     },
-    setItems (state, items) {
+    setMaterials (state, items) {
       state.items = state.items.concat(items)
     },
     resetItems (state) {
@@ -50,6 +51,15 @@ export default {
     setCount (state, count) {
       state.count = count
     },
+    resetCount (state, count) {
+      state.count = false
+    },
+    setNoresults (state) {
+      state.noresults = true
+    },
+    resetNoresults (state) {
+      state.noresults = false
+    },
     resetOffset (state) {
       state.offset = 0
     },
@@ -67,6 +77,8 @@ export default {
       console.log('Search newSearch')
       commit('resetUuids')
       commit('resetItems')
+      commit('resetCount')
+      commit('resetNoresults')
       commit('resetOffset')
       this.commit('Common/setPagetitle', state.keys)
       dispatch('getResults')
@@ -92,89 +104,27 @@ export default {
           // commit('setItems', data.items)
           commit('setInfos', data.infos)
           commit('setCount', data.count)
-          commit('setUuids', data.uuids)
-          dispatch('getItems', data.uuids)
+          if (data.count) {
+            commit('setUuids', data.uuids)
+            // loadMaterials is on mixins
+            // https://github.com/huybuidac/vuex-extensions
+            dispatch('loadMaterials', {
+              uuids: data.uuids,
+              imgStyle: 'card_medium',
+              callBack: 'loadMaterialsCallBack'
+            })
+          }else{
+            commit('setNoresults')
+          }
         })
         .catch((error) => {
           console.warn('Issue with getResults', error)
           Promise.reject(error)
         })
     },
-    getItems ({ dispatch, commit, state }, uuids) {
-      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('search getItems data', data)
-          dispatch('parseItems', { data: data.data, uuids: uuids })
-          // commit('setItems', data.items)
-        })
-        .catch((error) => {
-          console.warn('Issue with getItems', error)
-          Promise.reject(error)
-        })
-    },
-    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)
-      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.card_medium.href
-            })
-          } else {
-            console.warn('missing image derivative ' + j + '/' + img_src.length + ' for ' + attrs.title)
-          }
-        }
-
-        items.push(item)
-      }
-      console.log('items', items)
-      commit('setItems', items)
+    loadMaterialsCallBack ({ commit, state }, { items, callBackArgs }) {
+      console.log('search loadMaterialsCallBack', items)
+      commit('setMaterials', items)
       if (state.infiniteLoadingState) {
         if (state.offset + state.limit > state.count) {
           console.log('Search infinite completed')

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

@@ -1,5 +1,5 @@
 import { REST } from 'vuejs/api/rest-axios'
-import { JSONAPI } from 'vuejs/api/json-axios'
+// import { JSONAPI } from 'vuejs/api/json-axios'
 import { MA } from 'vuejs/api/ma-axios'
 import qs from 'querystring-es3'
 
@@ -89,9 +89,15 @@ export default {
     openFlagColl (state, collid) {
       state.openedCollid = collid
     },
+    closeFlagColl (state) {
+      state.openedCollid = null
+    },
     setLoadedCollItems (state, data) {
       console.log('setLoadedCollItems', data)
-      state.flagcolls[data.collid].loadedItems = data.items
+      // if no data, we are just calling the mutation to trigger the component update
+      if (data) {
+        state.flagcolls[data.collid].loadedItems = data.items
+      }
     }
   },
 
@@ -270,38 +276,31 @@ export default {
           })
       })
     },
-    openFlagColl ({ commit, dispatch }, collid) {
+    openFlagColl ({ commit, dispatch, state }, collid) {
       console.log('user openFlagColl', collid)
       commit('openFlagColl', collid)
-      dispatch('loadFlagCollItems', collid)
+      if (typeof state.flagcolls[collid].loadedItems === 'undefined') {
+        // if no loadedItems, load them
+        // loadMaterials is on mixins
+        // https://github.com/huybuidac/vuex-extensions
+        dispatch('loadMaterials', {
+          uuids: state.flagcolls[collid].items_uuids,
+          imgStyle: 'card_medium_half',
+          callBack: 'loadMaterialsCallBack',
+          callBackArgs: { collid: collid }
+        })
+      } else {
+        // call the mutation without data to only trigger the FlagCollection component update
+        commit('setLoadedCollItems')
+      }
     },
-    loadFlagCollItems ({ commit, state }, collid) {
-      console.log('loadFlagCollItems', state.flagcolls[collid].items_uuids)
-      const params = {
-        'filter[uuids-groupe][group][conjunction]': 'OR'
-      }
-      const uuids = state.flagcolls[collid].items_uuids
-      // console.log('uuids', uuids)
-      for (let i = 0; i < uuids.length; i++) {
-        let uuid = uuids[i]
-        // console.log('uuid', uuid)
-        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('user loadFlagCollItems data', data)
-          // dispatch('parseItems', { data: data.data, uuids: uuids })
-          commit('setLoadedCollItems', {collid: collid, items: data.data})
-        })
-        .catch((error) => {
-          console.warn('Issue with loadFlagCollItems', error)
-          Promise.reject(error)
-        })
+    loadMaterialsCallBack ({ commit }, { items, callBackArgs }) {
+      console.log('user loadMaterialsCallBack', items)
+      commit('setLoadedCollItems', { collid: callBackArgs.collid, items: items })
+    },
+    closeFlagColl ({ commit, dispatch }) {
+      console.log('user closeFlagColl')
+      commit('closeFlagColl')
     },
     userLogout ({ commit, state }) {
       const credentials = qs.stringify({