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

integrated thematique in serahc results

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config/sync/field.field.node.thematique.field_visuel.yml
View File

@ -31,8 +31,8 @@ settings:
max_resolution: ''
min_resolution: ''
alt_field: true
alt_field_required: true
title_field: false
alt_field_required: false
title_field: true
title_field_required: false
default_image:
uuid: ''

11
web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls
View File

@ -40,6 +40,17 @@ type Article {
memo: String
}
type SearchResult {
id: Int!
uuid: String!
title: String!
bundle: String
short_description: String
images: [Image]
visuels: [Image]
reference: String
}
type Sample {
showroom: Showroom
location: String

4
web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls
View File

@ -6,6 +6,10 @@ extend type Query {
materiaux(ids: [Int]): [Materiau]
}
extend type Query {
searchresults(ids: [Int]): [SearchResult]
}
extend type Query {
article(id: Int!): Article
}

63
web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php
View File

@ -26,6 +26,8 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
$this->addMateriau($registry, $builder);
$this->addSearchResult($registry, $builder);
$this->addSample($registry, $builder);
$this->addArticle($registry, $builder);
@ -213,6 +215,67 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
);
}
// ___ _ ___ _ _
// / __| ___ __ _ _ _ __| |_ | _ \___ ____ _| | |_
// \__ \/ -_) _` | '_/ _| ' \| / -_|_-< || | | _|
// |___/\___\__,_|_| \__|_||_|_|_\___/__/\_,_|_|\__|
protected function addSearchResult(ResolverRegistryInterface $registry, ResolverBuilder $builder) {
$registry->addFieldResolver('Query', 'searchresults',
$builder->produce('entity_load_multiple')
->map('type', $builder->fromValue('node'))
->map('ids', $builder->fromArgument('ids'))
);
$registry->addFieldResolver('SearchResult', 'id',
$builder->produce('entity_id')
->map('entity', $builder->fromParent())
);
$registry->addFieldResolver('SearchResult', 'bundle',
$builder->produce('entity_bundle')
->map('entity', $builder->fromParent())
);
$registry->addFieldResolver('SearchResult', 'uuid',
$builder->produce('entity_uuid')
->map('entity', $builder->fromParent())
);
$registry->addFieldResolver('SearchResult', 'title',
$builder->compose(
$builder->produce('entity_label')
->map('entity', $builder->fromParent())
));
$registry->addFieldResolver('SearchResult', 'short_description',
$builder->produce('property_path')
->map('type', $builder->fromValue('entity:node'))
->map('value', $builder->fromParent())
->map('path', $builder->fromValue('field_short_description.value'))
);
$registry->addFieldResolver('SearchResult', 'images',
$builder->produce('entity_reference')
->map('entity', $builder->fromParent())
->map('field', $builder->fromValue('field_materiau_images'))
);
$registry->addFieldResolver('SearchResult', 'visuels',
$builder->produce('entity_reference')
->map('entity', $builder->fromParent())
->map('field', $builder->fromValue('field_visuel'))
);
$registry->addFieldResolver('SearchResult', 'reference',
$builder->produce('property_path')
->map('type', $builder->fromValue('entity:node'))
->map('value', $builder->fromParent())
->map('path', $builder->fromValue('field_reference.value'))
);
}
// ___ _
// / __| __ _ _ __ _ __| |___
// \__ \/ _` | ' \| '_ \ / -_)

2
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -1688,6 +1688,8 @@ article.card {
font-size: 0.693em;
font-weight: 300;
line-height: 1; }
article.card.card-thematique header {
background-color: rgba(105, 205, 207, 0.9); }
article.card nav.tools {
position: absolute;
top: 0;

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

File diff suppressed because one or more lines are too long

4
web/themes/custom/materiotheme/assets/styles/base/_colors.scss
View File

@ -1,6 +1,10 @@
$transparent-bg: rgba(255,255,255, 0.95);
$transparent-bg-blk: rgba(0,0,0, 0.75);
$alpha: 0.90;
$color-base:#69cdcf;
$color-base-transparent: change-color($color-base, $alpha: $alpha);
$color-showrooms:#50aa3c;
$color-showrooms-transparent: change-color($color-showrooms, $alpha: $alpha);
$color-blabla:#9458aa;
$color-blabla-transparent: change-color($color-blabla, $alpha: $alpha);

3
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -756,6 +756,9 @@ article.card{
line-height: 1;
}
}
&.card-thematique header{
background-color: $color-base-transparent;
}
nav.tools{
position: absolute;
top: 0;

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