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

fixed modalCard after graphql refactoring

This commit is contained in:
Bachir Soussi Chiadmi 2020-12-23 19:11:46 +01:00
parent 53dcc8b854
commit 609d4f5fde
12 changed files with 232 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

20
web/themes/custom/materiotheme/vuejs/api/gql/materiaumodal.fragment.gql Normal file
View File

@ -0,0 +1,20 @@
fragment MateriauFields on Materiau {
title
short_description
body
reference
samples{
showroom{
name
id
}
location
}
images{
url
alt
style_cardfull{
url
}
}
}

2
web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue
View File

@ -18,7 +18,7 @@
</template>
<script>
import { JSONAPI } from 'vuejs/api/json-axios'
// import { JSONAPI } from 'vuejs/api/json-axios'
import router from 'vuejs/route'
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;

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

@ -1,10 +1,13 @@
<template>
<article class="card modal-card">
<div class="loading" v-if="!material || loading">
<span>Loading ...</span>
</div>
<article v-else class="card modal-card">
<section class="col col-right">
<header>
<h1>{{ item.title }}</h1>
<h4>{{ item.field_short_description }}</h4>
<span class="ref">{{ item.field_reference }}</span>
<h1>{{ material.title }}</h1>
<h4>{{ material.short_description }}</h4>
<span class="ref">{{ material.reference }}</span>
</header>
<nav class="tools">
<section class="tool close">
@ -37,24 +40,24 @@
<h3>{{ $t("materio.Samples") }}</h3>
<ul>
<li
v-for="sample in item.field_samples"
:key="sample.target_id"
v-for="sample in material.samples"
:key="sample.showroom.id"
>
<span class="showroom">{{ showrooms[sample.target_id].name }}</span>: {{ sample.location }}
<span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
</li>
</ul>
</section>
<section class="body" v-html="item.body.processed"/>
<section class="body" v-html="material.body"/>
</section>
<section class="col col-left images" v-switcher>
<figure
v-for="(img, index) in item.images"
v-for="(img, index) in material.images"
:key="img.url"
>
<img
class="lazy"
v-lazy="index"
:data-src="img.img_styles.card_full"
:data-src="img.style_cardfull.url"
:title="img.title"
/>
<img
@ -65,9 +68,9 @@
</figure>
</section>
<CoolLightBox
:items="item.images"
:items="material.images"
:index="lightbox_index"
srcName="src"
srcName="url"
:loop="true"
@close="lightbox_index = null">
</CoolLightBox>
@ -78,12 +81,19 @@
import { mapState, mapActions } from 'vuex'
import cardMixins from 'vuejs/components/cardMixins'
import { MGQ } from 'vuejs/api/graphql-axios'
import { print } from 'graphql/language/printer'
import gql from 'graphql-tag'
import materiauFields from 'vuejs/api/gql/materiaumodal.fragment.gql'
export default {
name: "ModalCard",
props: ['item'],
mixins: [cardMixins],
data() {
return {
material: null,
loading: false,
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
loadingFlag: false,
lightbox_index: null
@ -97,11 +107,39 @@ export default {
},
created () {
console.log('modale item', this.item)
this.loadMaterial()
},
methods: {
...mapActions({
flagUnflag: 'User/flagUnflag'
}),
loadMaterial(){
console.log('loadMaterial', this.item.id)
this.loading = true
let ast = gql`{
materiau(id: ${this.item.id}) {
...MateriauFields
}
}
${ materiauFields }
`
MGQ.post('', { query: print(ast)
})
.then(({ data:{data:{materiau}}}) => {
console.log('loadMaterial', materiau )
this.material = materiau
this.loading = false
// delay the lazyload to let the card the time to update dom
// maybe not the best method
setTimeout(function () {
this.activateLazyLoad()
}.bind(this), 5)
})
.catch(error => {
console.warn('Issue with loadMaterial', error)
Promise.reject(error)
})
},
flagIsActive(collid) {
// console.log(this.item.uuid);
// console.log(this.flagcolls[collid].items_uuids);

2
web/themes/custom/materiotheme/vuejs/components/Content/Showroom.vue
View File

@ -15,7 +15,7 @@
</template>
<script>
import { JSONAPI } from 'vuejs/api/json-axios'
// import { JSONAPI } from 'vuejs/api/json-axios'
import router from 'vuejs/route'
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;

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

@ -118,7 +118,7 @@
import router from 'vuejs/route'
import store from 'vuejs/store'
import { JSONAPI } from 'vuejs/api/json-axios'
// import { JSONAPI } from 'vuejs/api/json-axios'
import { REST } from 'vuejs/api/rest-axios'
import { MGQ } from 'vuejs/api/graphql-axios'
import { print } from 'graphql/language/printer'
@ -126,7 +126,7 @@ import gql from 'graphql-tag'
// import materiauFields from 'vuejs/api/gql/materiau.fragment.gql'
import articleFields from 'vuejs/api/gql/article.fragment.gql'
import qs from 'querystring-es3'
// import qs from 'querystring-es3'
import Card from 'vuejs/components/Content/Card'
import { mapState, mapActions } from 'vuex'

20
web/themes/custom/materiotheme/vuejs/components/cardMixins.js
View File

@ -4,6 +4,7 @@ export default {
lazy: {
bind(img,binding){
// console.log('lazy bind', img, binding);
// show only the first image
if(binding.value === 0){
img.setAttribute('src', img.getAttribute('data-src'))
img.removeAttribute('data-src')
@ -41,9 +42,11 @@ export default {
},
mounted() {
// lazy load images on mouseover
console.log('card mounted', this.$options.name);
// if (this.$options.name ==! 'ModalCard') {
this.$el.addEventListener('mouseover', function(event) {
let imgs = this.querySelectorAll('.images figure img.lazy')
// console.log('mouseover', this, imgs);
console.log('mousemove', this, imgs);
imgs.forEach((img) => {
// console.log('forEach img',img);
img.setAttribute('src', img.getAttribute('data-src'))
@ -51,8 +54,23 @@ export default {
img.classList.remove('lazy')
})
}, {once : true})
// }
},
methods: {
activateLazyLoad () {
console.log('card activateLazyLoad', this.$options.name);
this.$el.addEventListener('mousemove', function(event) {
let imgs = this.querySelectorAll('.images figure img.lazy')
console.log('mousemove', this, imgs);
imgs.forEach((img) => {
// console.log('forEach img',img);
img.setAttribute('src', img.getAttribute('data-src'))
img.removeAttribute('data-src')
img.classList.remove('lazy')
})
}, {once : true})
}
// deg2rad (deg) {
// return deg * (Math.PI / 180)
// },

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

@ -3,8 +3,8 @@ import Vuex from 'vuex'
import { createStore } from 'vuex-extensions'
import { JSONAPI } from 'vuejs/api/json-axios'
import qs from 'querystring-es3'
// 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'
@ -48,9 +48,13 @@ export default createStore(Vuex.Store, {
MGQ.post('', { query: print(ast) })
.then(( resp ) => {
console.log('loadMaterialsGQL resp', resp )
dispatch('parseMaterialsGQL', {
// dispatch('parseMaterialsGQL', {
// items: resp.data.data.materiaux,
// callBack: callBack,
// callBackArgs: callBackArgs
// })
dispatch(callBack, {
items: resp.data.data.materiaux,
callBack: callBack,
callBackArgs: callBackArgs
})
})
@ -58,92 +62,92 @@ export default createStore(Vuex.Store, {
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
// 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) {
let img_styles = {}
for (var k = 0; k < imgStyle.length; k++) {
img_styles[imgStyle[k]] = img_src[j].meta.imageDerivatives.links.[imgStyle[k]].href
}
item.images.push({
title: img_src[j].meta.title,
src: img_src[j].meta.imageDerivatives.links.hd.href,
// meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module
// BUG: missing all image derivative but first
img_styles: img_styles
})
} 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 })
}
// 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
// // 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) {
// let img_styles = {}
// for (var k = 0; k < imgStyle.length; k++) {
// img_styles[imgStyle[k]] = img_src[j].meta.imageDerivatives.links.[imgStyle[k]].href
// }
// item.images.push({
// title: img_src[j].meta.title,
// src: img_src[j].meta.imageDerivatives.links.hd.href,
// // meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module
// // BUG: missing all image derivative but first
// img_styles: img_styles
// })
// } 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 })
// }
}
}
})

6
web/themes/custom/materiotheme/vuejs/store/modules/blabla.js
View File

@ -1,7 +1,7 @@
import { JSONAPI } from 'vuejs/api/json-axios'
// import { JSONAPI } from 'vuejs/api/json-axios'
import { REST } from 'vuejs/api/rest-axios'
import { MA } from 'vuejs/api/ma-axios'
import qs from 'querystring-es3'
// import { MA } from 'vuejs/api/ma-axios'
// import qs from 'querystring-es3'
export default {
namespaced: true,

6
web/themes/custom/materiotheme/vuejs/store/modules/common.js
View File

@ -1,6 +1,6 @@
import { REST } from 'vuejs/api/rest-axios'
import { JSONAPI } from 'vuejs/api/json-axios'
import qs from 'querystring-es3'
// import { REST } from 'vuejs/api/rest-axios'
// import { JSONAPI } from 'vuejs/api/json-axios'
// import qs from 'querystring-es3'
export default {
namespaced: true,

6
web/themes/custom/materiotheme/vuejs/store/modules/pages.js
View File

@ -1,7 +1,7 @@
import { JSONAPI } from 'vuejs/api/json-axios'
// import { JSONAPI } from 'vuejs/api/json-axios'
import { REST } from 'vuejs/api/rest-axios'
import { MA } from 'vuejs/api/ma-axios'
import qs from 'querystring-es3'
// import { MA } from 'vuejs/api/ma-axios'
// import qs from 'querystring-es3'
export default {
namespaced: true,

6
web/themes/custom/materiotheme/vuejs/store/modules/showrooms.js
View File

@ -1,7 +1,7 @@
import { JSONAPI } from 'vuejs/api/json-axios'
// import { JSONAPI } from 'vuejs/api/json-axios'
import { REST } from 'vuejs/api/rest-axios'
import { MA } from 'vuejs/api/ma-axios'
import qs from 'querystring-es3'
// import { MA } from 'vuejs/api/ma-axios'
// import qs from 'querystring-es3'
export default {
namespaced: true,