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

32
web/themes/custom/materiotheme/vuejs/api/gql/materiau.fragment.gql
View File

@ -1,32 +0,0 @@
fragment MateriauFields on Materiau {
images {
id
url
alt
style_minicard{
width
height
url
}
}
id
title
author
uuid
memo
linked_materials {
id
title
memo
images {
id
url
alt
style_minicard{
width
height
url
}
}
}
}

10
web/themes/custom/materiotheme/vuejs/api/gql/materiauflaglist.fragment.gql Normal file
View File

@ -0,0 +1,10 @@
fragment MateriauFields on Materiau {
id
title
images {
url
style_minicard{
url
}
}
}

13
web/themes/custom/materiotheme/vuejs/api/gql/materiausearch.fragment.gql Normal file
View File

@ -0,0 +1,13 @@
fragment MateriauFields on Materiau {
id
title
short_description
reference
images{
url
alt
style_cardmedium{
url
}
}
}

17
web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
View File

@ -4,8 +4,8 @@
@click="openModalCard"
>
<h1>{{ item.title }}</h1>
<h4>{{ item.field_short_description }}</h4>
<span class="ref">{{ item.field_reference }}</span>
<h4>{{ item.short_description }}</h4>
<span class="ref">{{ item.reference }}</span>
</header>
<nav class="tools">
<section class="tool flags">
@ -85,9 +85,14 @@ export default {
flagUnflag: 'User/flagUnflag'
}),
flagIsActive(collid) {
// console.log(this.item.uuid);
// console.log("Card flagIsActive",
// this.item.id,
// this.flagcolls[collid].items,
// this.flagcolls[collid].items.indexOf(this.item.id)
// );
// console.log(this.flagcolls[collid].items_uuids);
return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
// return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
},
flagIsLoading(collid) {
// console.log(this.item.uuid);
@ -95,7 +100,7 @@ export default {
return collid === this.loadingFlag;
},
onFlagActionCard (e) {
console.log("Card onFlagActionCard", e);
console.log("Card onFlagActionCard", e, this.item);
if (!this.loadingFlag) {
let collid = e.target.getAttribute('collid');
let isActive = this.flagIsActive(collid);
@ -103,7 +108,7 @@ export default {
// console.log('collid', collid);
// console.log("this.item", this.item);
this.loadingFlag = collid;
this.flagUnflag({ action: action, uuid: this.item.uuid, collid: collid})
this.flagUnflag({ action: action, id: this.item.id, collid: collid})
.then(data => {
console.log("onFlagActionCard then", data);
this.loadingFlag = false;

6
web/themes/custom/materiotheme/vuejs/components/Content/MiniCard.vue
View File

@ -23,7 +23,7 @@
<img
class="lazy"
v-lazy="index"
:data-src="img.img_styles.card_medium_half"
:data-src="img.style_minicard.url"
:title="img.title"
/>
<img class="blank" :src="blanksrc">
@ -56,12 +56,12 @@ export default {
return this.loadingItem
},
onUnFlagCard (e) {
console.log("Card onFlagActionCard", e);
console.log("Card onFlagActionCard", e, this.item);
if (!this.loadingItem) {
this.loadingItem = true;
this.flagUnflag({
action: 'unflag',
uuid: this.item.uuid,
id: this.item.id,
collid: this.collid
})
.then(data => {

5
web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue
View File

@ -105,7 +105,8 @@ export default {
flagIsActive(collid) {
// console.log(this.item.uuid);
// console.log(this.flagcolls[collid].items_uuids);
return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
// return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
return this.flagcolls[collid].items.indexOf(this.item.id) !== -1;
},
flagIsLoading(collid) {
// console.log(this.item.uuid);
@ -121,7 +122,7 @@ export default {
// console.log('collid', collid);
// console.log("this.item", this.item);
this.loadingFlag = collid;
this.flagUnflag({ action: action, uuid: this.item.uuid, collid: collid})
this.flagUnflag({ action: action, id: this.item.id, collid: collid})
.then(data => {
console.log("onFlagActionCard then", data);
this.loadingFlag = false;

2
web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue
View File

@ -206,7 +206,7 @@ export default {
},
loadArticle(){
console.log('loadArticle', this.nid)
this.loading = true;
this.loading = true
// let params = {
// include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
// }

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