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

integrated thematique in serahc results

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-12-24 14:50:13 +01:00
parent a4bbdecdd2
commit ee97e675e3
12 changed files with 352 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/themes/custom/materiotheme/vuejs/api/gql/searchresults.fragment.gql Normal file
View File

@ -0,0 +1,21 @@
fragment SearchResultFields on SearchResult {
id
bundle
title
short_description
reference
images{
url
alt
style_cardmedium{
url
}
}
visuels{
url
alt
style_cardmedium{
url
}
}
}

115
web/themes/custom/materiotheme/vuejs/components/Content/CardThematique.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<article class="card card-thematique search-card">
<header
@click="openThematique"
>
<h1>{{ item.title }}</h1>
<h4>{{ item.short_description }}</h4>
</header>
<section class="images" v-switcher>
<figure
v-for="(img, index) in item.visuels"
:key="img.url"
>
<img
class="lazy"
v-lazy="index"
:data-src="img.style_cardmedium.url"
:title="img.title"
/>
<img
class="blank"
:src="blanksrc"
@click="lightbox_index = index"
>
</figure>
</section>
<CoolLightBox
:items="item.visuels"
:index="lightbox_index"
srcName="url"
:loop="true"
@close="lightbox_index = null">
</CoolLightBox>
</article>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import cardMixins from 'vuejs/components/cardMixins'
// import ModalCard from 'vuejs/components/Content/ModalCard'
export default {
name: "Card",
props: ['item'],
mixins: [cardMixins],
// components: {
// ModalCard
// },
data() {
return {
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
// loadingFlag: false,
lightbox_index: null
}
},
// computed: {
// ...mapState({
// flagcolls: state => state.User.flagcolls
// })
// },
methods: {
// ...mapActions({
// flagUnflag: 'User/flagUnflag'
// }),
// flagIsActive(collid) {
// // 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.indexOf(this.item.id) !== -1;
// },
// flagIsLoading(collid) {
// // console.log(this.item.uuid);
// // console.log(this.flagcolls[collid].items_uuids);
// return collid === this.loadingFlag;
// },
// onFlagActionCard (e) {
// console.log("Card onFlagActionCard", e, this.item);
// if (!this.loadingFlag) {
// let collid = e.target.getAttribute('collid');
// let isActive = this.flagIsActive(collid);
// let action = isActive ? 'unflag' : 'flag';
// // console.log('collid', collid);
// // console.log("this.item", this.item);
// this.loadingFlag = collid;
// this.flagUnflag({ action: action, id: this.item.id, collid: collid})
// .then(data => {
// console.log("onFlagActionCard then", data);
// this.loadingFlag = false;
// })
// }
// },
openThematique (e) {
console.log('openThematique', e);
// this.$modal.show(
// ModalCard,
// { item: this.item },
// {
// draggable: true,
// width: '850px',
// height: '610px'
// }
// )
}
}
}
</script>
<style lang="scss" scoped>
</style>

7
web/themes/custom/materiotheme/vuejs/components/Pages/Base.vue
View File

@ -12,7 +12,8 @@
</div>
<ul v-else>
<li v-for="item in items" v-bind:key="item.uuid">
<Card :item="item"/>
<Card v-if="item.bundle == 'materiau'" :item="item"/>
<CardThematique v-if="item.bundle == 'thematique'" :item="item"/>
</li>
</ul>
<infinite-loading
@ -29,6 +30,7 @@
<script>
import Card from 'vuejs/components/Content/Card'
import CardThematique from 'vuejs/components/Content/CardThematique'
import { mapState, mapActions } from 'vuex'
@ -80,7 +82,8 @@ export default {
next()
},
components: {
Card
Card,
CardThematique
}
}

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

@ -3,7 +3,11 @@
import { MA } from 'vuejs/api/ma-axios'
import qs from 'querystring-es3'
import materiauGQL from 'vuejs/api/gql/materiausearch.fragment.gql'
import { MGQ } from 'vuejs/api/graphql-axios'
import { print } from 'graphql/language/printer'
import gql from 'graphql-tag'
import searchresultGQL from 'vuejs/api/gql/searchresults.fragment.gql'
export default {
namespaced: true,
@ -35,7 +39,7 @@ export default {
resetUuids (state) {
state.uuids = []
},
setMaterials (state, items) {
setResults (state, items) {
state.items = state.items.concat(items)
},
resetItems (state) {
@ -110,18 +114,27 @@ export default {
commit('setUuids', data.uuids)
// loadMaterials is on mixins
// https://github.com/huybuidac/vuex-extensions
dispatch('loadMaterialsGQL', {
ids: data.nids,
gqlfragment: materiauGQL,
callBack: 'loadMaterialsCallBack'
})
// dispatch('loadMaterials', {
// uuids: data.uuids,
// imgStyle: ['card_medium', 'card_full'],
// callBack: 'loadMaterialsCallBack'
// dispatch('loadMaterialsGQL', {
// ids: data.nids,
// gqlfragment: materiauGQL,
// callBack: 'loadSearchResultsCallBack'
// })
let ast = gql`{
searchresults(ids: [${data.nids}]) {
...SearchResultFields
}
}
${ searchresultGQL }
`
MGQ.post('', { query: print(ast) })
.then(( resp ) => {
console.log('loadSearchResultsGQL resp', resp )
dispatch("loadSearchResultsCallBack", { items: resp.data.data.searchresults})
})
.catch(error => {
console.warn('Issue with loadSearchResults', error)
Promise.reject(error)
})
} else {
commit('setNoresults')
}
@ -131,9 +144,9 @@ export default {
Promise.reject(error)
})
},
loadMaterialsCallBack ({ commit, state }, { items, callBackArgs }) {
console.log('search loadMaterialsCallBack', items)
commit('setMaterials', items)
loadSearchResultsCallBack ({ commit, state }, { items, callBackArgs }) {
console.log('search loadSearchResultsCallBack', items)
commit('setResults', items)
if (state.infiniteLoadingState) {
if (state.offset + state.limit > state.count) {
console.log('Search infinite completed')