converted blabla listing into vuex store to avoid reloading the whole list
This commit is contained in:
parent
cdd3bf1ea3
commit
ddffd26c77
File diff suppressed because one or more lines are too long
|
@ -183,7 +183,6 @@ header[role="banner"]{
|
|||
|
||||
}
|
||||
|
||||
|
||||
// header bottom
|
||||
#block-pagetitle{
|
||||
float: left;
|
||||
|
|
|
@ -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')
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
})
|
||||
.catch(( error ) => {
|
||||
console.warn('Issue with blabla', error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
}
|
||||
...mapActions({
|
||||
getItems: 'Blabla/getItems',
|
||||
nextPage: 'Blabla/nextPage'
|
||||
})
|
||||
},
|
||||
components: {
|
||||
ArticleCard
|
||||
|
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue