refactored loadMaterials vuex mixins with graphql

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

@@ -3,6 +3,8 @@
 import { MA } from 'vuejs/api/ma-axios'
 import qs from 'querystring-es3'
 
+import materiauGQL from 'vuejs/api/gql/materiausearch.fragment.gql'
+
 export default {
   namespaced: true,
 
@@ -108,11 +110,18 @@ export default {
             commit('setUuids', data.uuids)
             // loadMaterials is on mixins
             // https://github.com/huybuidac/vuex-extensions
-            dispatch('loadMaterials', {
-              uuids: data.uuids,
-              imgStyle: ['card_medium', 'card_full'],
+
+            dispatch('loadMaterialsGQL', {
+              ids: data.nids,
+              gqlfragment: materiauGQL,
               callBack: 'loadMaterialsCallBack'
             })
+
+            // dispatch('loadMaterials', {
+            //   uuids: data.uuids,
+            //   imgStyle: ['card_medium', 'card_full'],
+            //   callBack: 'loadMaterialsCallBack'
+            // })
           } else {
             commit('setNoresults')
           }

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

@@ -3,6 +3,8 @@ import { REST } from 'vuejs/api/rest-axios'
 import { MA } from 'vuejs/api/ma-axios'
 import qs from 'querystring-es3'
 
+import materiauGQL from 'vuejs/api/gql/materiauflaglist.fragment.gql'
+
 export default {
   namespaced: true,
 
@@ -238,12 +240,12 @@ export default {
           })
       })
     },
-    flagUnflag ({ dispatch, commit, state }, { action, uuid, collid }) {
-      console.log('user flagUnflag', action, uuid, collid)
+    flagUnflag ({ dispatch, commit, state }, { action, id, collid }) {
+      console.log('user flagUnflag', action, id, collid)
       return new Promise((resolve, reject) => {
         const params = {
           flagid: state.flagcolls[collid].flag_id,
-          uuid: uuid,
+          id: id,
           flagcollid: collid
         }
         return MA.post(`materio_flag/${action}`, params)
@@ -251,15 +253,25 @@ export default {
             console.log('user MA flag', data)
             // reload the fulllist of flagcolleciton
             dispatch('getUserFlagColls').then(() => {
-              if (state.flagcolls[collid].items_uuids.length) {
-                dispatch('loadMaterials', {
-                  uuids: state.flagcolls[collid].items_uuids,
-                  imgStyle: ['card_medium_half'],
+              if (state.flagcolls[collid].items.length) {
+
+                dispatch('loadMaterialsGQL', {
+                  ids: state.flagcolls[collid].items,
+                  gqlfragment: materiauGQL,
                   callBack: 'loadMaterialsCallBack',
                   callBackArgs: { collid: collid }
                 }).then(() => {
                   resolve()
                 })
+
+                // dispatch('loadMaterials', {
+                //   uuids: state.flagcolls[collid].items_uuids,
+                //   imgStyle: ['card_medium_half'],
+                //   callBack: 'loadMaterialsCallBack',
+                //   callBackArgs: { collid: collid }
+                // }).then(() => {
+                //   resolve()
+                // })
               } else {
                 commit('setLoadedCollItems', { collid: collid, items: [] })
                 resolve()
@@ -274,18 +286,27 @@ export default {
     openFlagColl ({ commit, dispatch, state }, collid) {
       console.log('user openFlagColl', collid)
       commit('openFlagColl', collid)
-      if (state.flagcolls[collid].items_uuids.length) {
+      if (state.flagcolls[collid].items.length) {
         if (typeof state.flagcollsLoadedItems[collid] === 'undefined') {
-          console.log('loading flagcoll items')
+          console.log('loading flagcoll items', state.flagcolls[collid])
           // 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'],
+
+          dispatch('loadMaterialsGQL', {
+            ids: state.flagcolls[collid].items,
+            gqlfragment: materiauGQL,
             callBack: 'loadMaterialsCallBack',
             callBackArgs: { collid: collid }
           })
+
+          // 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
           console.log('committing setLoadedCollItems without args')