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

Adds infinite scroll to add new term section of metadata edition form.

This commit is contained in:
Mateus Machado Luna 2020-02-28 16:07:20 -03:00
parent 470260ef3e
commit 29802e14a1
1 changed files with 39 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/admin/components/metadata-types/taxonomy/AddNewTerm.vue
View File

@ -56,9 +56,11 @@
clearable clearable
@select="onSelectParentTerm($event)" @select="onSelectParentTerm($event)"
:loading="isFetchingParentTerms" :loading="isFetchingParentTerms"
@input="fecthParentTerms($event)" @input="fetchParentTerms"
@focus="clearErrors('parent');" @focus="clearErrors('parent');"
:disabled="!hasParent"> :disabled="!hasParent"
check-infinite-scroll
@infinite-scroll="fetchMoreParentTerms">
<template slot-scope="props"> <template slot-scope="props">
{{ props.option.name }} {{ props.option.name }}
</template> </template>
@ -117,7 +119,9 @@
isFetchingParentTerms: false, isFetchingParentTerms: false,
metadatumId: this.metadatum.metadatum.id, metadatumId: this.metadatum.metadatum.id,
itemId: this.metadatum.item.id, itemId: this.metadatum.item.id,
formErrors: {} formErrors: {},
parentTermSearchQuery: '',
parentTermSearchOffset: 0
} }
}, },
mounted() { mounted() {
@ -139,22 +143,50 @@
this.formErrors = {}; this.formErrors = {};
this.showForm = !this.showForm; this.showForm = !this.showForm;
}, },
fecthParentTerms(search) { fetchParentTerms: _.debounce(function(search) {
// String update
if (search != this.parentTermSearchQuery) {
this.parentTermSearchQuery = search;
this.parentTerms = [];
this.parentTermSearchOffset = 0;
}
// String cleared
if (!search.length) {
this.parentTermSearchQuery = search;
this.parentTerms = [];
this.parentTermSearchOffset = 0;
}
// No need to load more
if (this.parentTermSearchOffset > 0 && this.parentTerms.length >= this.totalTerms)
return
this.isFetchingParentTerms = true; this.isFetchingParentTerms = true;
this.fetchPossibleParentTerms({ this.fetchPossibleParentTerms({
taxonomyId: this.taxonomyId, taxonomyId: this.taxonomyId,
termId: 'new', termId: 'new',
search: search }) search: this.parentTermSearchQuery,
offset: this.parentTermSearchOffset })
.then((res) => { .then((res) => {
this.parentTerms = res.parentTerms; for (let term of res.parentTerms)
this.parentTerms.push(term);
this.parentTermSearchOffset += 12;
this.totalTerms = res.totalTerms;
this.isFetchingParentTerms = false; this.isFetchingParentTerms = false;
}) })
.catch((error) => { .catch((error) => {
this.$console.error(error); this.$console.error(error);
this.isFetchingParentTerms = false; this.isFetchingParentTerms = false;
}); });
}, }, 500),
fetchMoreParentTerms: _.debounce(function () {
this.fetchParentTerms(this.parentTermSearchQuery)
}, 250),
onToggleSwitch() { onToggleSwitch() {
this.clearErrors('parent'); this.clearErrors('parent');
}, },