added vue-infinite-loading loading to base search results

This commit is contained in:
Bachir Soussi Chiadmi 2019-06-12 12:16:15 +02:00
parent a771fd9d74
commit 7acac41863
10 changed files with 142 additions and 21 deletions

View File

@ -14,9 +14,9 @@ module.exports = merge(baseConfig, {
uglifyOptions: { uglifyOptions: {
// Eliminate comments // Eliminate comments
comments: false, comments: false,
compress: {
// remove warnings // remove warnings
warnings: false, warnings: false,
compress: {
// Drop console statements // Drop console statements
drop_console: true, drop_console: true,
} }

5
package-lock.json generated
View File

@ -9541,6 +9541,11 @@
"integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==", "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
"dev": true "dev": true
}, },
"vue-infinite-loading": {
"version": "2.4.4",
"resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.4.tgz",
"integrity": "sha512-eIFBcyKqkivtsDDq7Ee5ybDJVGLxIzU1NcBJCHG7Zx9Ic66QEGzSPs2OPJlGUdtu0/RS7KpUER35ZP/a7FdSOg=="
},
"vue-jest": { "vue-jest": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.4.tgz", "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.4.tgz",

View File

@ -21,6 +21,7 @@
"axios": "^0.18.1", "axios": "^0.18.1",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-autofocus-directive": "^1.0.3", "vue-autofocus-directive": "^1.0.3",
"vue-infinite-loading": "^2.4.4",
"vue-meta": "^1.6.0", "vue-meta": "^1.6.0",
"vue-router": "^3.0.6", "vue-router": "^3.0.6",
"vuex": "^3.1.1" "vuex": "^3.1.1"

View File

@ -1154,3 +1154,50 @@ article.node--type-frontpage .node__content .field--name-computed-articles-refer
vertical-align: top; vertical-align: top;
max-width: 250px; } max-width: 250px; }
.cards-list > ul {
margin: 0;
padding: 0; }
.cards-list > ul > li {
list-style: none;
margin: 0 1em 1em 0;
padding: 0;
display: inline-block;
vertical-align: top; }
.card {
position: relative;
width: 210px;
height: 295px; }
.card header {
position: absolute;
bottom: 0;
z-index: 10;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
width: 100%; }
.card header h1, .card header h4 {
margin: 0;
padding: 0; }
.card header h1 {
font-size: 1.5em; }
.card header h4 {
font-size: 1em;
font-weight: normal; }
.card section.images {
position: relative; }
.card section.images, .card section.images * {
width: 100%;
height: 100%; }
.card section.images figure {
margin: 0;
position: absolute;
top: 0;
left: 0; }
.card section.images figure:first-of-type {
z-index: 5; }
.card section.images figure img.blank {
position: absolute;
top: 0;
left: 0;
z-index: 20; }

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,17 @@
import Vue from 'vue' import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading';
Vue.use(InfiniteLoading, {
props: {
spinner: 'spiral',
// slots.noMore: ''
},
// system: {
// throttleLimit: 50,
// /* other settings need to configure */
// }
});
import store from 'vuejs/store' import store from 'vuejs/store'
import router from 'vuejs/route' import router from 'vuejs/route'

View File

@ -217,6 +217,15 @@ article.node--type-frontpage{
// | (__/ _` | '_/ _` (_-< // | (__/ _` | '_/ _` (_-<
// \___\__,_|_| \__,_/__/ // \___\__,_|_| \__,_/__/
.infinite-loading-container{
.infinite-status-prompt{
i[class^="loading-"]{
width:15px; height:15px;
}
}
}
.cards-list{ .cards-list{
&>ul{ &>ul{
margin:0; padding:0; margin:0; padding:0;

View File

@ -13,6 +13,12 @@
<Card :item="item"/> <Card :item="item"/>
</li> </li>
</ul> </ul>
<infinite-loading
v-if="count > limit"
@infinite="nextPage"
>
<div slot="no-more">No more results</div>
</infinite-loading>
</div> </div>
</div> </div>
</template> </template>
@ -35,13 +41,20 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
items: state => state.Search.items, items: state => state.Search.items,
searchinfos: state => state.Search.infos searchinfos: state => state.Search.infos,
count: state => state.Search.count,
limit: state => state.Search.limit
}) })
}, },
methods: { methods: {
...mapActions({ ...mapActions({
newSearch: 'Search/newSearch' newSearch: 'Search/newSearch',
}) nextPage: 'Search/nextPage'
}),
// infiniteHandler($state){
// console.log('inifiniteHandler', $state);
// this.nextPage()
// }
}, },
created() { created() {
// at first page load or first route entering launch a search if params exists in url query // at first page load or first route entering launch a search if params exists in url query
@ -72,4 +85,5 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>

View File

@ -70,7 +70,7 @@ export default {
// lazy load images on mouseover // lazy load images on mouseover
this.$el.addEventListener('mouseover', function(event) { this.$el.addEventListener('mouseover', function(event) {
let imgs = this.querySelectorAll('.images figure img.lazy') let imgs = this.querySelectorAll('.images figure img.lazy')
console.log('mouseover', this, imgs); // console.log('mouseover', this, imgs);
imgs.forEach((img) => { imgs.forEach((img) => {
// console.log('forEach img',img); // console.log('forEach img',img);
img.setAttribute('src', img.getAttribute('data-src')) img.setAttribute('src', img.getAttribute('data-src'))

View File

@ -14,7 +14,10 @@ export default {
offset: 0, offset: 0,
limit: 15, limit: 15,
infos: null, infos: null,
count: 0 count: 0,
// infinteState will come from vue-infinite-loading plugin
// implemented in vuejs/components/Content/Base.vue
infiniteState: null
}, },
// getters // getters
@ -23,13 +26,13 @@ export default {
// mutations // mutations
mutations : { mutations : {
setUuids (state, uuids) { setUuids (state, uuids) {
state.uuids = uuids state.uuids = state.uuids.concat(uuids)
}, },
resetUuids (state) { resetUuids (state) {
state.uuids = [] state.uuids = []
}, },
setItems (state, items) { setItems (state, items) {
state.items = items state.items = state.items.concat(items)
}, },
resetItems (state) { resetItems (state) {
state.items = [] state.items = []
@ -51,6 +54,9 @@ export default {
}, },
incrementOffset(state) { incrementOffset(state) {
state.offset += state.limit state.offset += state.limit
},
setInfiniteState(state, s){
state.infiniteState = s
} }
}, },
@ -63,6 +69,12 @@ export default {
commit('resetOffset') commit('resetOffset')
dispatch('getResults') dispatch('getResults')
}, },
nextPage ({ dispatch, commit, state }, $state) {
console.log("Search nextPage", $state);
commit('incrementOffset')
commit('setInfiniteState', $state)
dispatch('getResults')
},
getResults ({ dispatch, commit, state }) { getResults ({ dispatch, commit, state }) {
let params = { let params = {
keys: state.keys, keys: state.keys,
@ -98,7 +110,7 @@ export default {
params[`filter[${uuid}][condition][operator]`] = '=' params[`filter[${uuid}][condition][operator]`] = '='
params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe' params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
} }
console.log('search JSONAPI params', params); // console.log('search JSONAPI params', params);
let q = qs.stringify(params) let q = qs.stringify(params)
return JSONAPI.get('node/materiau?'+q) return JSONAPI.get('node/materiau?'+q)
.then(({ data }) => { .then(({ data }) => {
@ -119,6 +131,7 @@ export default {
// for (var i = 0; i < data.length; i++) { // for (var i = 0; i < data.length; i++) {
for (var i = 0; i < uuids.length; i++) { for (var i = 0; i < uuids.length; i++) {
let uuid = uuids[i] let uuid = uuids[i]
// https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
let item_index = data.findIndex(p => p.id == uuid) let item_index = data.findIndex(p => p.id == uuid)
let item_src = data[item_index] let item_src = data[item_index]
let attrs = item_src.attributes let attrs = item_src.attributes
@ -137,19 +150,28 @@ export default {
let img_src = relations.images.data let img_src = relations.images.data
item.images = [] item.images = []
for (var j = 0; j < img_src.length; j++) { for (var j = 0; j < img_src.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 == img_src[j].id)
// let img = included[index]
item.images.push({ item.images.push({
title: img_src[j].meta.title, title: img_src[j].meta.title,
// meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module
url: img_src[j].meta.imageDerivatives.links.card_medium.href url: img_src[j].meta.imageDerivatives.links.card_medium.href
}) })
} }
items.push(item) items.push(item)
} }
console.log('items', items); console.log('items', items)
commit('setItems', items); commit('setItems', items)
if(state.infiniteState){
if (state.offset + state.limit > state.count) {
console.log('Search infinite completed');
// tell to vue-infinite-loading plugin that there si no new page
state.infiniteState.complete()
}else{
console.log('Search infinite loaded');
// tell to vue-infinite-loading plugin that newpage is loaded
state.infiniteState.loaded()
}
}
} }
} }
} }