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 // header bottom
#block-pagetitle{ #block-pagetitle{
float: left; float: left;

View File

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

View File

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

View File

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