bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactored loadMaterials vuex mixins with graphql

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-12-23 18:05:25 +01:00
parent 665a550748
commit 53dcc8b854
15 changed files with 182 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/themes/custom/materiotheme/vuejs/store/index.js
View File

@ -6,6 +6,11 @@ import { createStore } from 'vuex-extensions'
import { JSONAPI } from 'vuejs/api/json-axios'
import qs from 'querystring-es3'
import { MGQ } from 'vuejs/api/graphql-axios'
import { print } from 'graphql/language/printer'
import gql from 'graphql-tag'
// import materiauFields from 'vuejs/api/gql/materiau.fragment.gql'
import Common from './modules/common'
import User from './modules/user'
import Search from './modules/search'
@ -13,6 +18,7 @@ import Blabla from './modules/blabla'
import Showrooms from './modules/showrooms'
import Pages from './modules/pages'
// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
Vue.use(Vuex)
@ -29,6 +35,33 @@ export default createStore(Vuex.Store, {
// https://github.com/huybuidac/vuex-extensions
mixins: {
actions: {
loadMaterialsGQL ({ dispatch }, { ids, gqlfragment, callBack, callBackArgs }) {
console.log('loadMaterialsGQL ids', ids)
let ast = gql`{
materiaux(ids: [${ids}]) {
...MateriauFields
}
}
${ gqlfragment }
`
MGQ.post('', { query: print(ast) })
.then(( resp ) => {
console.log('loadMaterialsGQL resp', resp )
dispatch('parseMaterialsGQL', {
items: resp.data.data.materiaux,
callBack: callBack,
callBackArgs: callBackArgs
})
})
.catch(error => {
console.warn('Issue with loadMaterials', error)
Promise.reject(error)
})
},
parseMaterialsGQL ({ dispatch }, { items, callBack, callBackArgs }) {
dispatch(callBack, { items: items, callBackArgs: callBackArgs })
},
loadMaterials ({ dispatch }, { uuids, imgStyle, callBack, callBackArgs }) {
const params = {
// include: 'images', // no needs to include thanks to consumers_image_styles module

15
web/themes/custom/materiotheme/vuejs/store/modules/search.js
View File

@ -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')
}

45
web/themes/custom/materiotheme/vuejs/store/modules/user.js
View File

@ -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')