Adds sorting toggle to Terms List. Ref. #72.

This commit is contained in:
Mateus Machado Luna 2018-06-29 11:07:20 -03:00
parent 1964576d36
commit 4604683cc3
2 changed files with 43 additions and 10 deletions

View File

@ -7,6 +7,17 @@
@click="addNewTerm()"> @click="addNewTerm()">
{{ $i18n.get('label_new_term') }} {{ $i18n.get('label_new_term') }}
</button> </button>
<b-field class="order-area">
<button
:disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm"
class="button is-white is-small"
@click="onChangeOrder()">
<b-icon
class="gray-icon"
:icon="order === 'ASC' ? 'sort-ascending' : 'sort-descending'"/>
</button>
</b-field>
<br> <br>
<br> <br>
<div <div
@ -94,13 +105,14 @@ export default {
data(){ data(){
return { return {
isLoadingTerms: false, isLoadingTerms: false,
isEditingTerm: false,
formWithErrors: '', formWithErrors: '',
orderedTermsList: [] orderedTermsList: [],
order: 'asc'
} }
}, },
props: { props: {
taxonomyId: String, taxonomyId: String,
//taxonomyPath: ''
}, },
computed: { computed: {
termsList() { termsList() {
@ -127,6 +139,10 @@ export default {
...mapGetters('taxonomy',[ ...mapGetters('taxonomy',[
'getTerms' 'getTerms'
]), ]),
onChangeOrder() {
this.order == 'asc' ? this.order = 'desc' : this.order = 'asc';
this.loadTerms();
},
addNewTerm() { addNewTerm() {
let newTerm = { let newTerm = {
taxonomyId: this.taxonomyId, taxonomyId: this.taxonomyId,
@ -154,7 +170,7 @@ export default {
this.editTerm(newTerm, parentIndex + 1); this.editTerm(newTerm, parentIndex + 1);
}, },
editTerm(term, index) { editTerm(term, index) {
this.isEditingTerm = true;
if (!term.opened) { if (!term.opened) {
for (let i = 0; i < this.orderedTermsList.length; i++) { for (let i = 0; i < this.orderedTermsList.length; i++) {
@ -265,7 +281,7 @@ export default {
} }
}, },
onTermEditionFinished() { onTermEditionFinished() {
this.isEditingTerm = false;
}, },
onTermEditionCanceled(term) { onTermEditionCanceled(term) {
@ -278,6 +294,7 @@ export default {
if (term.id == 'new') if (term.id == 'new')
this.removeTerm(term); this.removeTerm(term);
} }
this.isEditingTerm = false;
}, },
buildOrderedTermsList(parentId, termDepth) { buildOrderedTermsList(parentId, termDepth) {
@ -315,7 +332,7 @@ export default {
}, },
loadTerms() { loadTerms() {
this.isLoadingTerms = true; this.isLoadingTerms = true;
this.fetchTerms({ taxonomyId: this.taxonomyId, fetchOnly: '', search: '', all: ''}) this.fetchTerms({ taxonomyId: this.taxonomyId, fetchOnly: '', search: '', all: '', order: this.order})
.then(() => { .then(() => {
// Fill this.form data with current data. // Fill this.form data with current data.
this.isLoadingTerms = false; this.isLoadingTerms = false;
@ -339,6 +356,19 @@ export default {
@import "../../scss/_variables.scss"; @import "../../scss/_variables.scss";
.order-area {
display: inline-block;
padding: 4px;
margin-left: 30px;
.gray-icon, .gray-icon .icon {
color: $tainacan-placeholder-color !important;
}
.gray-icon .icon i::before, .gray-icon i::before {
font-size: 21px !important;
}
}
.term-item { .term-item {
font-size: 14px; font-size: 14px;
padding: 0.7em 0.9em; padding: 0.7em 0.9em;

View File

@ -170,16 +170,19 @@ export const updateTerm = ({ commit }, { taxonomyId, termId, name, description,
}); });
}; };
export const fetchTerms = ({ commit }, {taxonomyId, fetchOnly, search, all}) => { export const fetchTerms = ({ commit }, {taxonomyId, fetchOnly, search, all, order}) => {
let query = ''; let query = '';
if (order == undefined) {
order = 'asc';
}
if(fetchOnly && search && !all ){ if(fetchOnly && search && !all ){
query = `?order=asc&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`; query = `?order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
} else if(fetchOnly && search && all ){ } else if(fetchOnly && search && all ){
query = `?hideempty=0&order=asc&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`; query = `?hideempty=0&order=${order}&${qs.stringify(fetchOnly)}&${qs.stringify(search)}`;
} else { } else {
query = '?hideempty=0&order=asc'; query =`?hideempty=0&order=${order}`;
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {