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

loaded materials form solr with jsonapi, and display them

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-06-10 18:30:48 +02:00
parent 058aed796a
commit 01cee3ba8a
19 changed files with 719 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

3
web/themes/custom/materiotheme/assets/scripts/main.js
View File

@@ -3,6 +3,9 @@ import Vue from 'vue'
import store from 'vuejs/store'
import router from 'vuejs/route'
// import autofocus from 'vue-autofocus-directive';
// Vue.directive('autofocus', autofocus);
import VUserBlock from 'vuejs/components/Block/UserBlock'
import VMainContent from 'vuejs/components/Content/MainContent'
import VSearchBlock from 'vuejs/components/Block/SearchBlock'

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

@@ -210,3 +210,53 @@ article.node--type-frontpage{
}
}
}
// ___ _
// / __|__ _ _ _ __| |___
// | (__/ _` | '_/ _` (_-<
// \___\__,_|_| \__,_/__/
.cards-list{
&>ul{
margin:0; padding:0;
&>li{
list-style: none;
margin:0 1em 1em 0; padding:0;
display: inline-block;
vertical-align: top;
}
}
}
.card{
position: relative;
width:200px; height:295px;
header{
position: absolute;
bottom:0;
z-index:10;
color: #fff;
background-color: rgba(0,0,0,0.5);
width:100%;
h1, h4{ margin:0; padding:0; }
h1{
font-size: 1.5em;
}
h4{
font-size: 1em;
font-weight: normal;
}
}
section.images{
position: relative;
img:first-of-type{
z-index:5
}
img:not(:first-of-type){
position: absolute;
top:0; left:0;
}
}
}

11
web/themes/custom/materiotheme/vuejs/components/Content/Base.vue
View File

@@ -1,10 +1,13 @@
<template>
<div id="Base">
<h1 class="page-title">{{ pagetitle }}</h1>
<aside class="search-info">
{{ searchinfos }}
</aside>
<div class="results">
<div class="loading" v-if="!items.length">
<span>Loading ...</span>
</div>
<div class="cards-list" v-else>
<aside class="search-info">
{{ searchinfos }}
</aside>
<ul>
<li v-for="item in items" v-bind:key="item.nid">
<Card :item="item"/>

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

@@ -1,6 +1,12 @@
<template>
<div class="card">
<h1>{{ item.title }}</h1>
<header>
<h1>{{ item.title }}</h1>
<h4>{{ item.description }}</h4>
</header>
<section class=images>
<img class="images" v-for="img in item.images" :src="img.url" :title="img.title"/>
</section>
</div>
</template>
@@ -17,4 +23,5 @@ export default {
</script>
<style lang="scss" scoped>
</style>

6
web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
View File

@@ -68,8 +68,12 @@ export default {
mounted(){
// console.log('SearchForm mounted');
Drupal.attachBehaviors(this.$el);
// get the search input
let $input = this.$el.querySelector('#edit-search')
// focus on input
$input.focus()
// Catch the jquery ui events for autocmplete widget
jQuery(this.$el.querySelector('#edit-search')).on('autocompleteselect', this.onAutoCompleteSelect);
jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
},
render(h) {
// console.log('searchForm render');

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

@@ -24,6 +24,9 @@ export default {
setItems (state, items) {
state.items = items
},
resetItems(state) {
state.items = []
},
setKeys (state, keys) {
state.keys = keys
},
@@ -48,6 +51,7 @@ export default {
actions : {
newSearch({ dispatch, commit, state }) {
console.log('Search newSearch');
commit('resetItems')
commit('resetOffset')
dispatch('getResults')
},
@@ -63,14 +67,74 @@ export default {
return MA.get(`/materio_sapi/getresults?`+q)
.then(({ data }) => {
console.log('search MA getresults data', data)
commit('setItems', data.items)
// commit('setItems', data.items)
commit('setInfos', data.infos)
commit('setCount', data.count)
dispatch('getItems', data.items)
})
.catch(( error ) => {
console.warn('Issue with getResults', error)
Promise.reject(error)
})
},
getItems({ dispatch, commit, state}, itemslist) {
let params = {
// include: 'images', // no needs to include thanks to consumers_image_styles module
'filter[uuids-groupe][group][conjunction]': 'OR'
};
for (var i = 0; i < itemslist.length; i++) {
let uuid = itemslist[i].uuid
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);
let q = qs.stringify(params)
return JSONAPI.get('node/materiau?'+q)
.then(({ data }) => {
console.log('search getItems data', data)
dispatch('parseItems', data)
// commit('setItems', data.items)
})
.catch(( error ) => {
console.warn('Issue with getItems', error)
Promise.reject(error)
})
},
parseItems({ dispatch, commit, state }, { data }) {
console.log('search parseItems data', data)
let items = []
for (var i = 0; i < data.length; i++) {
let itemsrc = data[i]
let attrs = itemsrc.attributes
let relations = itemsrc.relationships
// get field values
let item = {
title: attrs.title,
description: attrs.field_short_description,
body: attrs.body,
reference: attrs.field_reference,
}
// get images included values
let imgsrc = relations.images.data
item.images = []
for (var j = 0; j < imgsrc.length; j++) {
// // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
// let index = included.findIndex(p => p.id == imgsrc[j].id)
// let img = included[index]
item.images.push({
title: imgsrc[j].meta.title,
url: imgsrc[j].meta.imageDerivatives.links.card_medium.href
})
}
items.push(item)
}
console.log('items', items);
commit('setItems', items);
}
}
}