converted blabla listing into vuex store to avoid reloading the whole list

This commit is contained in:
Bachir Soussi Chiadmi 2019-07-14 16:29:17 +02:00
parent cdd3bf1ea3
commit ddffd26c77
6 changed files with 134 additions and 156 deletions

File diff suppressed because one or more lines are too long

View File

@ -183,7 +183,6 @@ header[role="banner"]{
}
// header bottom
#block-pagetitle{
float: left;

View File

@ -70,17 +70,22 @@ export default {
methods: {
getArticle(){
console.log(this.$route);
// get the article uuid
if(this.$route.query.uuid){
// we come from internal link with vuejs
// directly record uuid
this.uuid = this.$route.query.uuid
this.loadArticle()
}else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
// get the uuid from drupalDeclouped
// provided by materio_decoupled.module
// console.log(drupalDecoupled);
// we landed in an internal page
// get the uuid from drupalDeclouped, provided by materio_decoupled.module
this.uuid = drupalDecoupled.entity_uuid
}
if(this.uuid){
this.loadArticle()
}else{
// if for any reason we dont have the uuid
// redirect to home
this.$route.replace('home')
}
},

View File

@ -9,8 +9,8 @@
<ArticleCard :item="item"/>
</li>
</ul>
<infinite-loading @infinite="getArticles">
<div slot="no-more">No more results</div>
<infinite-loading @infinite="nextPage">
<div slot="no-more">No more articles</div>
</infinite-loading>
</div>
</div>
@ -18,41 +18,31 @@
<script>
import { REST } from 'vuejs/api/rest-axios'
import ArticleCard from 'vuejs/components/Content/ArticleCard'
import { mapState, mapActions } from 'vuex'
export default {
name: "Blabla",
data() {
return {
items:[],
page:0
}
// data() {
// return {
// items:[],
// page:0
// }
// },
computed: {
...mapState({
items: state => state.Blabla.items
})
},
created(){
this.getArticles()
if(!this.items.length)
this.getItems()
},
methods: {
getArticles($state){
REST.get(`/blabla_rest?_format=json&page=${this.page}`, {})
.then(({ data }) => {
console.log('blabla REST: data', data)
if(data.length){
this.items = this.items.concat(data)
// console.log('items.length', this.items.length);
this.page += 1;
if($state)
$state.loaded()
}else{
if($state)
$state.complete()
}
...mapActions({
getItems: 'Blabla/getItems',
nextPage: 'Blabla/nextPage'
})
.catch(( error ) => {
console.warn('Issue with blabla', error)
Promise.reject(error)
})
}
},
components: {
ArticleCard

View File

@ -3,6 +3,7 @@ import Vuex from 'vuex'
import Common from './modules/common'
import User from './modules/user'
import Search from './modules/search'
import Blabla from './modules/blabla'
// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
@ -11,6 +12,7 @@ export default new Vuex.Store({
modules: {
Common,
User,
Search
Search,
Blabla
}
})

View File

@ -0,0 +1,62 @@
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'
export default {
namespaced: true,
// initial state
state : {
items: [],
page: 0,
// infinteState will come from vue-infinite-loading plugin
// implemented in vuejs/components/Content/Base.vue
infiniteLoadingState: null
},
// getters
getters : {},
// mutations
mutations : {
setItems (state, items) {
state.items = state.items.concat(items)
},
incrementPage(state){
state.page += 1;
},
setInfiniteState(state, infiniteLoadingstate){
state.infiniteLoadingState = infiniteLoadingstate
}
},
// actions
actions : {
getItems({ dispatch, commit, state }){
REST.get(`/blabla_rest?_format=json&page=${state.page}`, {})
.then(({ data }) => {
console.log('blabla REST: data', data)
if(data.length){
commit('setItems',data)
// console.log('items.length', this.items.length);
if(state.infiniteLoadingState)
state.infiniteLoadingState.loaded()
}else{
if(state.infiniteLoadingState)
state.infiniteLoadingState.complete()
}
})
.catch(( error ) => {
console.warn('Issue with blabla', error)
Promise.reject(error)
})
},
nextPage ({ dispatch, commit, state }, $infiniteLoadingstate) {
console.log("Search nextPage", $infiniteLoadingstate);
commit('incrementPage')
commit('setInfiniteState', $infiniteLoadingstate)
dispatch('getItems')
}
}
}