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

Continues implementation of new TermsList.

This commit is contained in:
Mateus Machado Luna 2018-08-13 16:50:46 -03:00
parent 3f70734942
commit 88fe29d398
5 changed files with 112 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/admin/components/edition/term-edition-form.vue
View File

@ -146,10 +146,12 @@
parent: this.editForm.parent,
headerImageId: this.editForm.header_image_id,
})
.then(() => {
.then((term) => {
this.editForm = term
this.$emit('onEditionFinished', this.editForm);
this.editForm = {};
this.formErrors = {};
this.$emit('onEditionFinished');
})
.catch((errors) => {
for (let error of errors.errors) {

85
src/admin/components/lists/recursive-terms-list.vue
View File

@ -1,12 +1,16 @@
<template>
<div style="width: 100%;">
<div
style="width: 100%;">
<div
class="term-item"
:style="{
'border-left-color': term.parent > 0 ? '#f2f2f2' : 'transparent'
}"
:class="{
'opened-term': term.opened,
'opened-term': term.opened
}">
<span
v-if="term.depth > 0"
v-if="term.parent != 0 && index == 0"
class="icon children-icon">
<i class="mdi mdi-24px mdi-subdirectory-arrow-right"/>
</span>
@ -28,7 +32,7 @@
class="children-dropdown"
:class="{'is-disabled': isEditingTerm}"
v-if="term.total_children > 0"
@click.prevent="loadChildTerms(term.id, index)">
@click.prevent="toggleShowChildren()">
<span class="icon">
<i
:class="{
@ -61,6 +65,9 @@
</div>
<div
class="term-item"
:style="{
'border-left-color': term.parent > 0 && childTerm.parent > 0 ? '#f2f2f2' : 'transparent'
}"
:class="{
'opened-term': childTerm.opened,
}"
@ -72,7 +79,14 @@
:term="childTerm"
:index="childIndex"
:taxonomy-id="taxonomyId"/>
</div>
<a
class="view-more-terms"
@click="offset = offset + maxTerms; loadChildTerms(term.id)"
v-if="showChildren && term.children != undefined && (totalTerms > term.children.length)">
{{ $i18n.get('label_view_more') + ' (' + Number(totalTerms - term.children.length) + ' ' + $i18n.get('terms') + ')' }}
</a>
</div>
</template>
@ -89,7 +103,10 @@ export default {
isEditingTerm: false,
searchQuery: '',
order: 'asc',
showChildren: false
showChildren: false,
maxTerms: 1,
offset: 0,
totalTerms: 0
}
},
props: {
@ -109,24 +126,39 @@ export default {
addNewChildTerm() {
this.showChildren = true;
this.$termsListBus.onAddNewChildTerm(this.term.id);
},
loadChildTerms(parentId, parentIndex) {
},
toggleShowChildren() {
if (this.term.children == undefined || this.term.children.length <= 0) {
this.isLoadingTerms = true;
let search = (this.searchQuery != undefined && this.searchQuery != '') ? { searchterm: this.searchQuery } : '';
this.fetchChildTerms({ parentId: parentId, taxonomyId: this.taxonomyId, fetchOnly: '', search: search, all: '', order: this.order})
.then(() => {
this.isLoadingTerms = false;
this.showChildren = true;
})
.catch((error) => {
this.isLoadingTerms = false;
this.$console.log(error);
});
this.loadChildTerms(this.term.id);
} else {
this.showChildren = !this.showChildren;
}
}
},
loadChildTerms(parentId) {
this.isLoadingTerms = true;
let search = (this.searchQuery != undefined && this.searchQuery != '') ? { searchterm: this.searchQuery } : '';
this.fetchChildTerms({
parentId: parentId,
taxonomyId: this.taxonomyId,
fetchOnly: '',
search: search,
all: '',
order: this.order,
offset: this.offset,
number: this.maxTerms
})
.then((resp) => {
this.isLoadingTerms = false;
this.showChildren = true;
this.totalTerms = resp.total;
})
.catch((error) => {
this.isLoadingTerms = false;
this.$console.log(error);
});
},
editTerm() {
@ -227,6 +259,7 @@ export default {
<style lang="scss">
@import "../../scss/_variables.scss";
// Term Item
.term-item {
font-size: 14px;
padding: 0 0 0 1.75rem;
@ -251,11 +284,11 @@ export default {
border-color: transparent transparent transparent $gray2 !important;
}
}
.children-icon {
color: $blue2;
position: absolute;
left: -25px;
left: -21px;
}
.term-name {
@ -346,6 +379,12 @@ export default {
opacity: 0;
transition: display 0.3s, visibility 0.3s, opacity 0.3s;
}
}
.view-more-terms {
font-size: 0.875rem;
margin: 0 0 0 1.75rem !important;
padding: 0.5rem 0 0.5rem 1.75rem;
display: flex;
border-top: 1px solid #f2f2f2;
}
</style>

39
src/admin/components/lists/terms-list.vue
View File

@ -65,6 +65,12 @@
:index="index"
:taxonomy-id="taxonomyId"/>
</div>
<a
class="view-more-terms-level-0"
@click="offset = offset + maxTerms; loadTerms(0)"
v-if="totalTerms > localTerms.length">
{{ $i18n.get('label_view_more') + ' (' + Number(totalTerms - localTerms.length) + ' ' + $i18n.get('terms') + ')' }}
</a>
</div>
<div
class="column is-4 edit-forms-list"
@ -117,7 +123,10 @@ export default {
termEditionFormTop: 0,
searchQuery: '',
localTerms: [],
editTerm: null
editTerm: null,
maxTerms: 4,
offset: 0,
totalTerms: 0
}
},
props: {
@ -152,7 +161,6 @@ export default {
...mapActions('taxonomy', [
'deleteTerm',
'fetchChildTerms',
'fetchTerms',
'clearTerms'
]),
...mapGetters('taxonomy',[
@ -160,6 +168,7 @@ export default {
]),
onChangeOrder(newOrder) {
this.order = newOrder;
this.clearTerms();
this.loadTerms(0);
},
addNewTerm(parent) {
@ -246,15 +255,25 @@ export default {
}
this.$termsListBus.onTermEditionCanceled(term);
},
loadTerms(parentId, parentIndex) {
loadTerms(parentId) {
this.clearTerms();
if (this.offset == 0)
this.clearTerms();
this.isLoadingTerms = true;
let search = (this.searchQuery != undefined && this.searchQuery != '') ? { searchterm: this.searchQuery } : '';
this.fetchChildTerms({ parentId: parentId, taxonomyId: this.taxonomyId, fetchOnly: '', search: search, all: '', order: this.order})
.then(() => {
this.fetchChildTerms({
parentId: parentId,
taxonomyId: this.taxonomyId,
fetchOnly: '',
search: search,
all: '',
order: this.order,
offset: this.offset,
number: this.maxTerms })
.then((resp) => {
this.isLoadingTerms = false;
this.totalTerms = resp.total;
})
.catch((error) => {
this.isLoadingTerms = false;
@ -337,6 +356,14 @@ export default {
}
}
.view-more-terms-level-0 {
font-size: 0.875rem;
margin: 0;
padding: 0.5rem 0 0.5rem 1.75rem;
display: flex;
border-top: 1px solid #f2f2f2;
}
.edit-forms-list {
padding-left: 0;
}

8
src/js/store/modules/taxonomy/actions.js
View File

@ -201,7 +201,7 @@ export const fetchTerms = ({ commit }, {taxonomyId, fetchOnly, search, all, orde
};
// Hierarchy usage of terms list -----------------
export const fetchChildTerms = ({ commit }, { parentId, taxonomyId, fetchOnly, search, all, order }) => {
export const fetchChildTerms = ({ commit }, { parentId, taxonomyId, fetchOnly, search, all, order, offset, number }) => {
let query = '';
if (order == undefined) {
@ -217,14 +217,18 @@ export const fetchChildTerms = ({ commit }, { parentId, taxonomyId, fetchOnly, s
} else {
query =`?hideempty=0&order=${order}`;
}
query += '&parent=' + parentId;
if (offset != undefined && number != undefined) {
query += '&offset=' + offset + '&number=' + number;
}
return new Promise((resolve, reject) => {
axios.tainacan.get(`/taxonomy/${taxonomyId}/terms${query}`)
.then(res => {
let terms = res.data;
commit('setChildTerms', { terms: terms, parent: parentId });
resolve(terms);
resolve({ terms: terms, total: res.headers['x-wp-total'] });
})
.catch(error => {
reject(error);

16
src/js/store/modules/taxonomy/mutations.js
View File

@ -45,23 +45,21 @@ export const clearTerms = (state) => {
export const setChildTerms = (state, { terms, parent }) => {
if (parent > 0 ) {
for (let term of state.terms) {
let parentTerm = t.find(term, [], (node, par) => { return node.id == parent; });
for (let i = 0; i < state.terms.length; i++) {
let parentTerm = t.find(state.terms[i], [], (node, par) => { return node.id == parent; });
if (parentTerm != undefined) {
if (parentTerm['children'] == undefined)
Vue.set(parentTerm, 'children', []);
for (let term of terms){
parentTerm['children'].unshift(term);
}
parentTerm['children'].push(term);
}
}
}
} else {
if (state.terms != undefined) {
if (state.terms != undefined) {
for (let term of terms)
state.terms.unshift(term);
state.terms.push(term);
} else {
state.terms = terms;
}
@ -112,7 +110,7 @@ export const updateChildTerm = (state, { term, parent, oldParent }) => {
}
} else {
state.terms = []
state.terms.unshift(term);
state.terms.push(term);
}
}
} else {