tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add infinite scroll to Relationship metadata taginput. #335.

This commit is contained in:
Mateus Machado Luna 2020-02-28 14:49:47 -03:00
parent 31d85f1c1a
commit 1a6a5eadf1
3 changed files with 48 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/views/admin/components/metadata-types/relationship/Relationship.vue
View File

@ -13,12 +13,14 @@
:maxtags="maxtags != undefined ? maxtags : (metadatum.metadatum.multiple == 'yes' || allowNew === true ? 100 : 1)"
autocomplete
attached
:placeholder="$i18n.get('instruction_type_existing_term')"
:placeholder="$i18n.get('instruction_type_existing_item')"
:loading="isLoading"
:aria-close-label="$i18n.get('remove_value')"
:class="{'has-selected': selected != undefined && selected != []}"
field="label"
@typing="(query) => { options = []; search(query); }">
@typing="search"
check-infinite-scroll
@infinite-scroll="searchMore">
<template slot-scope="props">
<div class="media">
<div
@ -62,7 +64,10 @@
collectionId: '',
inputValue: null,
queryObject: {},
itemsFound: []
itemsFound: [],
searchQuery: '',
totalItems: 0,
page: 1
}
},
created() {
@ -100,16 +105,34 @@
this.$emit('blur');
},
search: _.debounce(function(query) {
if ( this.selected.length > 0 && this.metadatum.metadatum.multiple === 'no')
return '';
if (query !== '') {
// String update
if (query != this.searchQuery) {
this.searchQuery = query;
this.options = [];
this.page = 1;
}
// String cleared
if (!query.length) {
this.searchQuery = query;
this.options = [];
this.page = 1;
}
// No need to load more
if (this.page > 1 && this.options.length >= this.totalItems)
return;
// There is already one value set and is not multiple
if (this.selected.length > 0 && this.metadatum.metadatum.multiple === 'no')
return;
if (this.searchQuery !== '') {
this.isLoading = true;
axios.get('/collection/' + this.collectionId + '/items?' + this.getQueryString(query))
axios.get('/collection/' + this.collectionId + '/items?' + this.getQueryString(this.searchQuery))
.then( res => {
this.isLoading = false;
this.options = [];
if (res.data.items) {
for (let item of res.data.items)
@ -119,13 +142,23 @@
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : ''
})
}
if (res.headers['x-wp-total'])
this.totalItems = res.headers['x-wp-total'];
this.page++;
this.isLoading = false;
})
.catch(error => {
this.isLoading = false;
this.$console.log(error);
});
}
}, 500),
searchMore: _.debounce(function () {
this.search(this.searchQuery)
}, 250),
getItemLabel(item) {
let label = '';
for (let m in item.metadata) {
@ -158,6 +191,8 @@
}
query['fetch_only'] = 'title,thumbnail';
query['fetch_only_meta'] = this.metadatum.metadatum.metadata_type_options.search;
query['perpage'] = 12;
query['paged'] = this.page;
return qs.stringify(query);
}

6
src/views/admin/components/metadata-types/taxonomy/TaxonomyTaginput.vue
View File

@ -18,7 +18,7 @@
:aria-close-label="$i18n.get('remove_value')"
:placeholder="$i18n.get('instruction_type_existing_term')"
:loading="isFetching"
:class="{'has-selected': selected != undefined && selected != []}"
:class="{ 'has-selected': selected != undefined && selected != [] }"
autocomplete
@typing="loadTerms"
check-infinite-scroll
@ -98,9 +98,9 @@
this.offset = 0;
}
if (this.offset > 0 && this.labels.length >= this.totalTerms) {
// No need to load more
if (this.offset > 0 && this.labels.length >= this.totalTerms)
return
}
this.isFetching = true;

1
src/views/tainacan-admin-i18n.php
View File

@ -497,6 +497,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'instruction_select_collection_fetch_items' => __( 'Select a collection to fetch items', 'tainacan' ),
'instruction_select_a_action' => __( 'Select an action', 'tainacan' ),
'instruction_parent_term' => __( 'Type to search a Parent Term to choose.', 'tainacan' ),
'instruction_type_existing_item' => __( 'Type to add an existing item...', 'tainacan' ),
'instruction_type_existing_term' => __( 'Type to add an existing term...', 'tainacan' ),
'instruction_select_an_exporter_type' => __( 'Select an exporter from the options below:', 'tainacan'),
'instruction_select_a_collection' => __( 'Select a collection', 'tainacan' ),