balbla page displaying article as cards with infinite loading
This commit is contained in:
parent
a8027261e3
commit
a926595856
|
|
@ -4,12 +4,20 @@ status: true
|
|||
dependencies:
|
||||
config:
|
||||
- core.entity_view_mode.node.teaser
|
||||
- field.storage.node.body
|
||||
- field.storage.node.field_date
|
||||
- field.storage.node.field_visuel
|
||||
- image.style.card_medium
|
||||
- node.type.article
|
||||
- system.menu.header
|
||||
module:
|
||||
- datetime_range
|
||||
- image
|
||||
- node
|
||||
- rest
|
||||
- serialization
|
||||
- smart_trim
|
||||
- taxonomy
|
||||
- user
|
||||
id: blabla
|
||||
label: Blabla
|
||||
|
|
@ -80,39 +88,54 @@ display:
|
|||
id: title
|
||||
table: node_field_data
|
||||
field: title
|
||||
entity_type: node
|
||||
entity_field: title
|
||||
label: ''
|
||||
alter:
|
||||
alter_text: false
|
||||
make_link: false
|
||||
absolute: false
|
||||
trim: false
|
||||
word_boundary: false
|
||||
ellipsis: false
|
||||
strip_tags: false
|
||||
html: false
|
||||
hide_empty: false
|
||||
empty_zero: false
|
||||
settings:
|
||||
link_to_entity: true
|
||||
plugin_id: field
|
||||
relationship: none
|
||||
group_type: group
|
||||
admin_label: ''
|
||||
label: ''
|
||||
exclude: false
|
||||
alter:
|
||||
alter_text: false
|
||||
text: ''
|
||||
make_link: false
|
||||
path: ''
|
||||
absolute: false
|
||||
external: false
|
||||
replace_spaces: false
|
||||
path_case: none
|
||||
trim_whitespace: false
|
||||
alt: ''
|
||||
rel: ''
|
||||
link_class: ''
|
||||
prefix: ''
|
||||
suffix: ''
|
||||
target: ''
|
||||
nl2br: false
|
||||
max_length: 0
|
||||
word_boundary: false
|
||||
ellipsis: false
|
||||
more_link: false
|
||||
more_link_text: ''
|
||||
more_link_path: ''
|
||||
strip_tags: false
|
||||
trim: false
|
||||
preserve_tags: ''
|
||||
html: false
|
||||
element_type: ''
|
||||
element_class: ''
|
||||
element_label_type: ''
|
||||
element_label_class: ''
|
||||
element_label_colon: true
|
||||
element_label_colon: false
|
||||
element_wrapper_type: ''
|
||||
element_wrapper_class: ''
|
||||
element_default_classes: true
|
||||
empty: ''
|
||||
hide_empty: false
|
||||
empty_zero: false
|
||||
hide_alter_empty: true
|
||||
click_sort_column: value
|
||||
type: string
|
||||
settings:
|
||||
link_to_entity: false
|
||||
group_column: value
|
||||
group_columns: { }
|
||||
group_rows: true
|
||||
|
|
@ -123,6 +146,336 @@ display:
|
|||
multi_type: separator
|
||||
separator: ', '
|
||||
field_api_classes: false
|
||||
entity_type: node
|
||||
entity_field: title
|
||||
plugin_id: field
|
||||
body:
|
||||
id: body
|
||||
table: node__body
|
||||
field: body
|
||||
relationship: none
|
||||
group_type: group
|
||||
admin_label: ''
|
||||
label: ''
|
||||
exclude: false
|
||||
alter:
|
||||
alter_text: false
|
||||
text: ''
|
||||
make_link: false
|
||||
path: ''
|
||||
absolute: false
|
||||
external: false
|
||||
replace_spaces: false
|
||||
path_case: none
|
||||
trim_whitespace: false
|
||||
alt: ''
|
||||
rel: ''
|
||||
link_class: ''
|
||||
prefix: ''
|
||||
suffix: ''
|
||||
target: ''
|
||||
nl2br: false
|
||||
max_length: 0
|
||||
word_boundary: true
|
||||
ellipsis: true
|
||||
more_link: false
|
||||
more_link_text: ''
|
||||
more_link_path: ''
|
||||
strip_tags: false
|
||||
trim: false
|
||||
preserve_tags: ''
|
||||
html: false
|
||||
element_type: ''
|
||||
element_class: ''
|
||||
element_label_type: ''
|
||||
element_label_class: ''
|
||||
element_label_colon: false
|
||||
element_wrapper_type: ''
|
||||
element_wrapper_class: ''
|
||||
element_default_classes: true
|
||||
empty: ''
|
||||
hide_empty: false
|
||||
empty_zero: false
|
||||
hide_alter_empty: true
|
||||
click_sort_column: value
|
||||
type: smart_trim
|
||||
settings:
|
||||
trim_length: 100
|
||||
trim_type: chars
|
||||
trim_suffix: ...
|
||||
wrap_output: false
|
||||
wrap_class: trimmed
|
||||
more_link: false
|
||||
more_text: More
|
||||
more_class: more-link
|
||||
summary_handler: full
|
||||
trim_options:
|
||||
text: true
|
||||
trim_zero: false
|
||||
group_column: value
|
||||
group_columns: { }
|
||||
group_rows: true
|
||||
delta_limit: 0
|
||||
delta_offset: 0
|
||||
delta_reversed: false
|
||||
delta_first_last: false
|
||||
multi_type: separator
|
||||
separator: ', '
|
||||
field_api_classes: false
|
||||
plugin_id: field
|
||||
uuid:
|
||||
id: uuid
|
||||
table: node
|
||||
field: uuid
|
||||
relationship: none
|
||||
group_type: group
|
||||
admin_label: ''
|
||||
label: ''
|
||||
exclude: false
|
||||
alter:
|
||||
alter_text: false
|
||||
text: ''
|
||||
make_link: false
|
||||
path: ''
|
||||
absolute: false
|
||||
external: false
|
||||
replace_spaces: false
|
||||
path_case: none
|
||||
trim_whitespace: false
|
||||
alt: ''
|
||||
rel: ''
|
||||
link_class: ''
|
||||
prefix: ''
|
||||
suffix: ''
|
||||
target: ''
|
||||
nl2br: false
|
||||
max_length: 0
|
||||
word_boundary: true
|
||||
ellipsis: true
|
||||
more_link: false
|
||||
more_link_text: ''
|
||||
more_link_path: ''
|
||||
strip_tags: false
|
||||
trim: false
|
||||
preserve_tags: ''
|
||||
html: false
|
||||
element_type: ''
|
||||
element_class: ''
|
||||
element_label_type: ''
|
||||
element_label_class: ''
|
||||
element_label_colon: false
|
||||
element_wrapper_type: ''
|
||||
element_wrapper_class: ''
|
||||
element_default_classes: true
|
||||
empty: ''
|
||||
hide_empty: false
|
||||
empty_zero: false
|
||||
hide_alter_empty: true
|
||||
click_sort_column: value
|
||||
type: string
|
||||
settings:
|
||||
link_to_entity: false
|
||||
group_column: value
|
||||
group_columns: { }
|
||||
group_rows: true
|
||||
delta_limit: 0
|
||||
delta_offset: 0
|
||||
delta_reversed: false
|
||||
delta_first_last: false
|
||||
multi_type: separator
|
||||
separator: ', '
|
||||
field_api_classes: false
|
||||
entity_type: node
|
||||
entity_field: uuid
|
||||
plugin_id: field
|
||||
field_visuel:
|
||||
id: field_visuel
|
||||
table: node__field_visuel
|
||||
field: field_visuel
|
||||
relationship: none
|
||||
group_type: group
|
||||
admin_label: ''
|
||||
label: ''
|
||||
exclude: false
|
||||
alter:
|
||||
alter_text: false
|
||||
text: ''
|
||||
make_link: false
|
||||
path: ''
|
||||
absolute: false
|
||||
external: false
|
||||
replace_spaces: false
|
||||
path_case: none
|
||||
trim_whitespace: false
|
||||
alt: ''
|
||||
rel: ''
|
||||
link_class: ''
|
||||
prefix: ''
|
||||
suffix: ''
|
||||
target: ''
|
||||
nl2br: false
|
||||
max_length: 0
|
||||
word_boundary: true
|
||||
ellipsis: true
|
||||
more_link: false
|
||||
more_link_text: ''
|
||||
more_link_path: ''
|
||||
strip_tags: false
|
||||
trim: false
|
||||
preserve_tags: ''
|
||||
html: false
|
||||
element_type: ''
|
||||
element_class: ''
|
||||
element_label_type: ''
|
||||
element_label_class: ''
|
||||
element_label_colon: false
|
||||
element_wrapper_type: ''
|
||||
element_wrapper_class: ''
|
||||
element_default_classes: true
|
||||
empty: ''
|
||||
hide_empty: false
|
||||
empty_zero: false
|
||||
hide_alter_empty: true
|
||||
click_sort_column: target_id
|
||||
type: image
|
||||
settings:
|
||||
image_style: card_medium
|
||||
image_link: ''
|
||||
group_column: ''
|
||||
group_columns: { }
|
||||
group_rows: true
|
||||
delta_limit: 1
|
||||
delta_offset: 0
|
||||
delta_reversed: false
|
||||
delta_first_last: false
|
||||
multi_type: separator
|
||||
separator: ', '
|
||||
field_api_classes: false
|
||||
plugin_id: field
|
||||
term_node_tid:
|
||||
id: term_node_tid
|
||||
table: node_field_data
|
||||
field: term_node_tid
|
||||
relationship: none
|
||||
group_type: group
|
||||
admin_label: ''
|
||||
label: ''
|
||||
exclude: false
|
||||
alter:
|
||||
alter_text: false
|
||||
text: ''
|
||||
make_link: false
|
||||
path: ''
|
||||
absolute: false
|
||||
external: false
|
||||
replace_spaces: false
|
||||
path_case: none
|
||||
trim_whitespace: false
|
||||
alt: ''
|
||||
rel: ''
|
||||
link_class: ''
|
||||
prefix: ''
|
||||
suffix: ''
|
||||
target: ''
|
||||
nl2br: false
|
||||
max_length: 0
|
||||
word_boundary: true
|
||||
ellipsis: true
|
||||
more_link: false
|
||||
more_link_text: ''
|
||||
more_link_path: ''
|
||||
strip_tags: false
|
||||
trim: false
|
||||
preserve_tags: ''
|
||||
html: false
|
||||
element_type: ''
|
||||
element_class: ''
|
||||
element_label_type: ''
|
||||
element_label_class: ''
|
||||
element_label_colon: false
|
||||
element_wrapper_type: ''
|
||||
element_wrapper_class: ''
|
||||
element_default_classes: true
|
||||
empty: ''
|
||||
hide_empty: false
|
||||
empty_zero: false
|
||||
hide_alter_empty: true
|
||||
type: separator
|
||||
separator: ', '
|
||||
link_to_taxonomy: false
|
||||
limit: false
|
||||
vids:
|
||||
company: '0'
|
||||
showroom: '0'
|
||||
tags: '0'
|
||||
thesaurus: '0'
|
||||
entity_type: node
|
||||
plugin_id: taxonomy_index_tid
|
||||
field_date:
|
||||
id: field_date
|
||||
table: node__field_date
|
||||
field: field_date
|
||||
relationship: none
|
||||
group_type: group
|
||||
admin_label: ''
|
||||
label: ''
|
||||
exclude: false
|
||||
alter:
|
||||
alter_text: false
|
||||
text: ''
|
||||
make_link: false
|
||||
path: ''
|
||||
absolute: false
|
||||
external: false
|
||||
replace_spaces: false
|
||||
path_case: none
|
||||
trim_whitespace: false
|
||||
alt: ''
|
||||
rel: ''
|
||||
link_class: ''
|
||||
prefix: ''
|
||||
suffix: ''
|
||||
target: ''
|
||||
nl2br: false
|
||||
max_length: 0
|
||||
word_boundary: true
|
||||
ellipsis: true
|
||||
more_link: false
|
||||
more_link_text: ''
|
||||
more_link_path: ''
|
||||
strip_tags: false
|
||||
trim: false
|
||||
preserve_tags: ''
|
||||
html: false
|
||||
element_type: ''
|
||||
element_class: ''
|
||||
element_label_type: ''
|
||||
element_label_class: ''
|
||||
element_label_colon: false
|
||||
element_wrapper_type: ''
|
||||
element_wrapper_class: ''
|
||||
element_default_classes: true
|
||||
empty: ''
|
||||
hide_empty: false
|
||||
empty_zero: false
|
||||
hide_alter_empty: true
|
||||
click_sort_column: value
|
||||
type: daterange_default
|
||||
settings:
|
||||
timezone_override: ''
|
||||
format_type: html_date
|
||||
separator: '-'
|
||||
group_column: value
|
||||
group_columns: { }
|
||||
group_rows: true
|
||||
delta_limit: 0
|
||||
delta_offset: 0
|
||||
delta_reversed: false
|
||||
delta_first_last: false
|
||||
multi_type: separator
|
||||
separator: ', '
|
||||
field_api_classes: false
|
||||
plugin_id: field
|
||||
filters:
|
||||
status:
|
||||
value: '1'
|
||||
|
|
@ -215,7 +568,10 @@ display:
|
|||
- url.query_args
|
||||
- 'user.node_grants:view'
|
||||
- user.permissions
|
||||
tags: { }
|
||||
tags:
|
||||
- 'config:field.storage.node.body'
|
||||
- 'config:field.storage.node.field_date'
|
||||
- 'config:field.storage.node.field_visuel'
|
||||
page_1:
|
||||
display_plugin: page
|
||||
id: page_1
|
||||
|
|
@ -242,7 +598,10 @@ display:
|
|||
- url.query_args
|
||||
- 'user.node_grants:view'
|
||||
- user.permissions
|
||||
tags: { }
|
||||
tags:
|
||||
- 'config:field.storage.node.body'
|
||||
- 'config:field.storage.node.field_date'
|
||||
- 'config:field.storage.node.field_visuel'
|
||||
rest_export_1:
|
||||
display_plugin: rest_export
|
||||
id: rest_export_1
|
||||
|
|
@ -254,23 +613,48 @@ display:
|
|||
path: blabla_rest
|
||||
style:
|
||||
type: serializer
|
||||
options:
|
||||
uses_fields: false
|
||||
formats:
|
||||
json: json
|
||||
defaults:
|
||||
style: false
|
||||
row: false
|
||||
row:
|
||||
type: data_entity
|
||||
options: { }
|
||||
pager:
|
||||
type: some
|
||||
type: data_field
|
||||
options:
|
||||
items_per_page: 10
|
||||
field_options:
|
||||
title:
|
||||
alias: ''
|
||||
raw_output: false
|
||||
pager:
|
||||
type: mini
|
||||
options:
|
||||
items_per_page: 20
|
||||
offset: 0
|
||||
id: 0
|
||||
total_pages: null
|
||||
tags:
|
||||
previous: ‹‹
|
||||
next: ››
|
||||
expose:
|
||||
items_per_page: false
|
||||
items_per_page_label: 'Items per page'
|
||||
items_per_page_options: '5, 10, 25, 50'
|
||||
items_per_page_options_all: false
|
||||
items_per_page_options_all_label: '- All -'
|
||||
offset: false
|
||||
offset_label: Offset
|
||||
cache_metadata:
|
||||
max-age: -1
|
||||
contexts:
|
||||
- 'languages:language_content'
|
||||
- 'languages:language_interface'
|
||||
- request_format
|
||||
- url.query_args
|
||||
- 'user.node_grants:view'
|
||||
- user.permissions
|
||||
tags: { }
|
||||
tags:
|
||||
- 'config:field.storage.node.body'
|
||||
- 'config:field.storage.node.field_date'
|
||||
- 'config:field.storage.node.field_visuel'
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -57,13 +57,7 @@ import 'theme/assets/styles/main.scss'
|
|||
function initVRouter(){
|
||||
// we need this to update the title while using history nav
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
||||
// console.log('router beforeEach');
|
||||
// console.log(to);
|
||||
// console.log(from);
|
||||
// console.log(next);
|
||||
|
||||
store.commit('Common/setPagetitle', to.name)
|
||||
store.commit('Common/setPagetitle', to.name != 'home' ? to.name : null)
|
||||
next();
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<article class="card article">
|
||||
<header>
|
||||
<h1 v-html="item.title"></h1>
|
||||
<h4 class="body" v-html="item.body"></h4>
|
||||
</header>
|
||||
<section class="images">
|
||||
<figure v-html="item.field_visuel"></figure>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JSONAPI } from 'vuejs/api/json-axios'
|
||||
|
||||
export default {
|
||||
name: "Article",
|
||||
props: ['item']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -1,17 +1,61 @@
|
|||
<template>
|
||||
<div id="blabla">
|
||||
<h1>Blabla</h1>
|
||||
<div class="loading" v-if="!items.length">
|
||||
<span>Loading ...</span>
|
||||
</div>
|
||||
<div class="cards-list" v-else>
|
||||
<ul>
|
||||
<li v-for="item in items" v-bind:key="item.uuid">
|
||||
<Article :item="item"/>
|
||||
</li>
|
||||
</ul>
|
||||
<infinite-loading @infinite="getArticles">
|
||||
<div slot="no-more">No more results</div>
|
||||
</infinite-loading>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { REST } from 'vuejs/api/rest-axios'
|
||||
import Article from 'vuejs/components/Content/Article'
|
||||
|
||||
export default {
|
||||
name: "Blabla",
|
||||
data: () => ({
|
||||
|
||||
}),
|
||||
data() {
|
||||
return {
|
||||
items:[],
|
||||
page:1
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
|
||||
this.getArticles()
|
||||
},
|
||||
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)
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Article
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue