Several improvements on Terms List refactoring.

This commit is contained in:
Mateus Machado Luna 2018-08-10 16:48:58 -03:00
parent a1ad3eeaf3
commit 8c912a0cc4
8 changed files with 248 additions and 148 deletions

View File

@ -35,7 +35,7 @@
class="button is-rounded is-secondary"
id="button-delete-header"
:aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteThumbnail()">
@click="deleteHeaderImage()">
<b-icon
size="is-small"
icon="delete" />
@ -131,7 +131,7 @@
methods: {
...mapActions('taxonomy', [
'sendTerm',
'updateTerm',
'updateChildTerm',
]),
...mapGetters('taxonomy', [
'getTerms'
@ -149,7 +149,7 @@
.then(() => {
this.editForm = {};
this.formErrors = {};
this.$termsListBus.onTermEditionSaved(this.editForm);
this.$emit('onEditionFinished');
})
.catch((errors) => {
for (let error of errors.errors) {
@ -161,7 +161,7 @@
});
} else {
this.updateTerm({
this.updateChildTerm({
taxonomyId: this.taxonomyId,
termId: this.editForm.id,
name: this.editForm.name,
@ -172,7 +172,7 @@
.then(() => {
this.editForm.saved = true;
this.formErrors = {};
this.$termsListBus.onTermEditionSaved(this.editForm);
this.$emit('onEditionFinished', this.editForm);
})
.catch((errors) => {
for (let error of errors.errors) {
@ -185,7 +185,7 @@
}
},
cancelEdition() {
this.$termsListBus.onTermEditionCanceled(this.editForm);
this.$emit('onEditionCanceled', this.editForm);
},
deleteHeaderImage() {
this.editForm = Object.assign({},
@ -197,7 +197,6 @@
);
},
initializeMediaFrames() {
this.headerImageMediaFrame = new wpMediaFrames.headerImageControl(
'my-header-image-media-frame', {
button_labels: {
@ -226,7 +225,7 @@
}
},
},
created() {
mounted() {
this.initializeMediaFrames();
}
}

View File

@ -1,5 +1,5 @@
<template>
<div>
<div style="width: 100%;">
<div
class="term-item"
:class="{
@ -13,7 +13,7 @@
<span
class="term-name"
:class="{'is-danger': formWithErrors == term.id }">
{{ term.saved && !term.opened ? term.name : getUnsavedTermName(term) }}
{{ term.name }}
</span>
<span
v-if="term.id != undefined"
@ -26,36 +26,35 @@
</span>
<span
class="children-dropdown"
:class="{'is-disabled': isEditingTerm}"
v-if="!isEditingTerm && term.total_children > 0"
@click.prevent="loadChildTerms(term.id, index)">
<span class="icon">
<i
:class="{
'mdi-menu-right': !term.hasLoadedChildren || (term.hasCollapsedChildren && term.hasLoadedChildren),
'mdi-menu-down': (!term.hasCollapsedChildren && term.hasLoadedChildren) || (term.hasCollapsedChildren != undefined && term.hasCollapsedChildren) }"
'mdi-menu-right': !showChildren,
'mdi-menu-down': showChildren }"
class="mdi mdi-24px"/>
</span>
<span>{{ term.total_children + ' ' + $i18n.get('label_children_terms') }}</span>
</span>
<span class="controls" >
<a
@click="addNewChildTerm(term, index)"
:disabled="isEditingTerm">
<span
class="controls"
:class="{'is-disabled': isEditingTerm}">
<a @click="addNewChildTerm(term, index)">
<b-icon
size="is-small"
icon="plus-circle"/>
</a>
<a
v-if="!isEditingTerm"
<a
@click.prevent="editTerm()">
<b-icon
type="is-secondary"
size="is-small"
icon="pencil"/>
</a>
<a
@click.prevent="tryToRemoveTerm(term)">
<a @click.prevent="tryToRemoveTerm()">
<b-icon
type="is-secondary"
size="is-small"
icon="delete"/>
</a>
</span>
@ -80,6 +79,7 @@
<script>
import { mapActions, mapGetters } from 'vuex';
import RecursiveTermsList from './recursive-terms-list.vue';
import CustomDialog from '../other/custom-dialog.vue';
export default {
name: 'RecursiveTermsList',
@ -102,36 +102,13 @@ export default {
},
methods: {
...mapActions('taxonomy', [
'updateTerm',
'deleteTerm',
'updateChildTerm',
'deleteChildTerm',
'fetchChildTerms',
'fetchTerms'
]),
addNewChildTerm(parent, parentIndex) {
if (this.isEditingTerm) {
let editingTermIndex = this.orderedTermsList.findIndex(anEditingTerm => anEditingTerm.opened == true);
if (editingTermIndex >= 0)
this.onTermEditionCanceled(this.orderedTermsList[editingTermIndex]);
}
let newTerm = {
taxonomyId: this.taxonomyId,
name: this.$i18n.get('label_term_without_name'),
description: '',
parent: parent.id,
id: 'new',
saved: false,
depth: parent.depth + 1
}
this.orderedTermsList.splice(parentIndex + 1, 0, newTerm);
this.editTerm(newTerm, parentIndex + 1);
},
getUnsavedTermName(term) {
// let originalIndex = this.termsList.findIndex(anOriginalTerm => anOriginalTerm.id == term.id);
// if (originalIndex >= 0)
// return this.termsList[originalIndex].name;
// else
return term.name;
addNewChildTerm() {
this.$termsListBus.onAddNewChildTerm(this.term.id);
},
loadChildTerms(parentId, parentIndex) {
@ -167,6 +144,69 @@ export default {
// this.orderedTermsList.splice(index, 1, term);
},
tryToRemoveTerm() {
// Checks if user is deleting a term with unsaved info.
if (this.term.id == 'new' || !this.term.saved) {
this.$modal.open({
parent: this,
component: CustomDialog,
props: {
icon: 'alert',
title: this.$i18n.get('label_warning'),
message: this.$i18n.get('info_warning_terms_not_saved'),
onConfirm: () => { this.removeTerm(); },
}
});
} else {
this.removeTerm();
}
},
removeTerm() {
this.$modal.open({
parent: this,
component: CustomDialog,
props: {
icon: 'alert',
title: this.$i18n.get('label_warning'),
message: this.$i18n.get('info_warning_selected_term_delete'),
onConfirm: () => {
// If all checks passed, term can be deleted
if (this.term.id == 'new') {
let index = this.orderedTermsList.findIndex(deletedTerm => deletedTerm.id == 'new');
if (index >= 0) {
this.orderedTermsList.splice(index, 1);
}
} else {
this.deleteChildTerm({taxonomyId: this.taxonomyId, termId: this.term.id, parent: this.term.parent })
.then(() => {})
.catch((error) => {
this.$console.log(error);
});
// // Updates parent IDs for orphans
// for (let orphanTerm of this.termsList) {
// if (orphanTerm.parent == this.term.id) {
// this.updateTerm({
// taxonomyId: this.taxonomyId,
// termId: orphanTerm.id,
// name: orphanTerm.name,
// description: orphanTerm.description,
// parent: this.term.parent
// })
// .catch((error) => {
// this.$console.log(error);
// });
// }
// }
}
},
}
});
}
},
created() {
this.$termsListBus.$on('editTerm', (term) => {
@ -199,8 +239,9 @@ export default {
visibility: visible;
opacity: 1;
transition: display 0.3s, visibility 0.3s, opacity 0.3s;
width: 100%;
&:hover {
&:first-child:hover {
background-color: $gray1 !important;
.controls {
visibility: visible;
@ -253,23 +294,29 @@ export default {
.controls {
visibility: hidden;
opacity: 0.0;
display: flex;
justify-content: space-between;
background-color: $gray2;
padding: 0.4375rem 0.875rem;
padding: 0.76rem 0.875rem;
a {
display: flex;
align-items: center;
margin: 0 0.375rem;
.icon {
bottom: 1px;
position: relative;
i, i:before { font-size: 20px; }
a {
margin-right: 8px;
}
}
}
}
.controls.is-disabled a, .children-dropdown.is-disabled {
color: $gray4 !important;
cursor: not-allowed !important;
user-select: none;
}
&.opened-term {
&.opened-term:first-child {
cursor: default;
background-color: $blue1;

View File

@ -6,7 +6,7 @@
<button
class="button is-secondary"
type="button"
@click="addNewTerm()"
@click="addNewTerm(0)"
:disabled="isEditingTerm">
{{ $i18n.get('label_new_term') }}
</button>
@ -68,11 +68,11 @@
</div>
<div
class="column is-4 edit-forms-list"
v-show="isEditingTerm">
v-if="isEditingTerm">
<term-edition-form
:style="{ 'top': termEditionFormTop + 'px'}"
:taxonomy-id="taxonomyId"
@onEditionFinished="onTermEditionFinished()"
@onEditionFinished="onTermEditionFinished(editTerm)"
@onEditionCanceled="onTermEditionCanceled(editTerm)"
@onErrorFound="formWithErrors = editTerm.id"
:edit-form="editTerm"/>
@ -91,7 +91,7 @@
<button
id="button-create-term"
class="button is-secondary"
@click="addNewTerm()">
@click="addNewTerm(0)">
{{ $i18n.get('label_new_term') }}
</button>
</div>
@ -103,8 +103,8 @@
<script>
import { mapActions, mapGetters } from 'vuex';
import TermEditionForm from '../edition/term-edition-form.vue';
import CustomDialog from '../other/custom-dialog.vue';
import RecursiveTermsList from './recursive-terms-list.vue'
import t from 't';
export default {
name: 'TermsList',
@ -126,12 +126,21 @@ export default {
},
computed: {
termsList() {
console.log("Computei")
return this.getTerms();
}
},
watch: {
termsList() {
this.localTerms = JSON.parse(JSON.stringify(this.termsList));
termsList: {
handler() {
console.log("Senti")
this.localTerms = JSON.parse(JSON.stringify(this.termsList));
t.dfs(this.localTerms, [], term => {
term.opened = false;
term.saved = true
});
},
deep: true
},
taxonomyId() {
this.loadTerms(0);
@ -143,10 +152,10 @@ export default {
},
methods: {
...mapActions('taxonomy', [
'updateTerm',
'deleteTerm',
'fetchChildTerms',
'fetchTerms'
'fetchTerms',
'clearTerms'
]),
...mapGetters('taxonomy',[
'getTerms'
@ -155,84 +164,36 @@ export default {
this.order = newOrder;
this.loadTerms(0);
},
addNewTerm() {
addNewTerm(parent) {
let newTerm = {
taxonomyId: this.taxonomyId,
name: this.$i18n.get('label_term_without_name'),
description: '',
parent: 0,
parent: parent,
id: 'new',
saved: false,
depth: 0
opened: true
}
this.localTerms.push(newTerm);
this.editTerm(newTerm, this.orderedTermsList.length - 1);
},
tryToRemoveTerm(term) {
// Checks if user is deleting a term with unsaved info.
if (term.id == 'new' || !term.saved || term.opened) {
this.$modal.open({
parent: this,
component: CustomDialog,
props: {
icon: 'alert',
title: this.$i18n.get('label_warning'),
message: this.$i18n.get('info_warning_terms_not_saved'),
onConfirm: () => { this.removeTerm(term); },
if (parent == 0) {
this.localTerms.unshift(newTerm);
} else {
console.log(parent)
for (let term of this.localTerms) {
let parentTerm = t.find(term, [], (node, par) => { return node.id == parent; });
if (parentTerm != undefined) {
if (parentTerm['children'] == undefined)
this.$set(parentTerm, 'children', []);
parentTerm['children'].unshift(newTerm);
}
});
} else{
this.removeTerm(term);
}
},
removeTerm(term) {
this.$modal.open({
parent: this,
component: CustomDialog,
props: {
icon: 'alert',
title: this.$i18n.get('label_warning'),
message: this.$i18n.get('info_warning_selected_term_delete'),
onConfirm: () => {
// If all checks passed, term can be deleted
if (term.id == 'new') {
let index = this.orderedTermsList.findIndex(deletedTerm => deletedTerm.id == 'new');
if (index >= 0) {
this.orderedTermsList.splice(index, 1);
}
} else {
this.deleteTerm({taxonomyId: this.taxonomyId, termId: term.id})
.then(() => {
})
.catch((error) => {
this.$console.log(error);
});
// Updates parent IDs for orphans
for (let orphanTerm of this.termsList) {
if (orphanTerm.parent == term.id) {
this.updateTerm({
taxonomyId: this.taxonomyId,
termId: orphanTerm.id,
name: orphanTerm.name,
description: orphanTerm.description,
parent: term.parent
})
.catch((error) => {
this.$console.log(error);
});
}
}
}
},
console.log(parentTerm)
}
});
}
this.$termsListBus.onEditTerm(newTerm);
},
onTermEditionFinished(term) {
this.$termsListBus.onTermEditionSaved(term);
},
onTermEditionCanceled(term) {
@ -245,10 +206,12 @@ export default {
if (term.id == 'new')
this.removeTerm(term);
}
this.isEditingTerm = false;
this.$termsListBus.onTermEditionCanceled(term);
},
loadTerms(parentId, parentIndex) {
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})
@ -276,7 +239,9 @@ export default {
this.$termsListBus.$on('termEditionCanceled', (term) => {
this.isEditingTerm = false;
this.editTerm = null;
this.onTermEditionCanceled();
});
this.$termsListBus.$on('addNewChildTerm', (parentId) => {
this.addNewTerm(parentId);
});
}

View File

@ -8,7 +8,6 @@ import Buefy from 'buefy';
import VTooltip from 'v-tooltip';
import { VueHammer } from 'vue2-hammer';
import VueMasonry from 'vue-masonry-css';
import t from 't';
// Custom elements
import Text from '../../classes/metadata-types/text/Text.vue';
@ -51,7 +50,6 @@ import VueTheMask from 'vue-the-mask';
// Configure and Register Plugins
Vue.use(Buefy);
Vue.use(VTooltip);
Vue.use(t);
Vue.use(VueHammer);
Vue.use(VueMasonry);
Vue.use(I18NPlugin);

View File

@ -15,6 +15,9 @@ export default {
},
onTermEditionCanceled(term) {
this.$emit('termEditionCanceled', term);
},
onAddNewChildTerm(parentId) {
this.$emit('addNewChildTerm', parentId);
}
}
});

View File

@ -158,6 +158,16 @@ export default {
components: {
CollectionsList
},
computed: {
metadatum_mappers: {
get() {
return this.getMetadatumMappers();
}
},
collections() {
return this.getCollections();
}
},
methods: {
...mapActions('collection', [
'fetchCollections',
@ -214,16 +224,6 @@ export default {
});
}
},
computed: {
metadatum_mappers: {
get() {
return this.getMetadatumMappers();
}
},
collections() {
return this.getCollections();
}
},
created() {
this.collectionsPerPage = this.$userPrefs.get('collections_per_page');
this.isLoadingMetadatumTypes = true;

View File

@ -200,6 +200,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 }) => {
let query = '';
@ -229,4 +230,42 @@ export const fetchChildTerms = ({ commit }, { parentId, taxonomyId, fetchOnly, s
reject(error);
});
});
};
export const updateChildTerm = ({ commit }, { taxonomyId, termId, name, description, parent, headerImageId }) => {
return new Promise(( resolve, reject ) => {
axios.tainacan.patch(`/taxonomy/${taxonomyId}/terms/${termId}`, {
name: name,
description: description,
parent: parent,
header_image_id: headerImageId,
})
.then( res => {
let term = res.data;
commit('updateChildTerm', {term: term, parent: parent });
resolve( term );
})
.catch(error => {
reject({ error_message: error['response']['data'].error_message, errors: error['response']['data'].errors });
});
});
};
export const deleteChildTerm = ({ commit }, { taxonomyId, termId, parent }) => {
return new Promise(( resolve, reject ) => {
axios.tainacan.delete(`/taxonomy/${taxonomyId}/terms/${termId}?permanently=1`)
.then(res => {
let term = res.data;
commit('deleteChildTerm', { termId: termId, parent: parent });
resolve( term );
})
.catch(error => {
reject({ error_message: error['response']['data'].error_message, errors: error['response']['data'].errors });
});
});
};
export const clearTerms = ({ commit }) => {
commit('clearTerms');
};

View File

@ -37,6 +37,11 @@ export const setTerms = (state, terms) => {
state.terms = terms;
};
export const clearTerms = (state) => {
state.terms = [];
};
export const setChildTerms = (state, { terms, parent }) => {
if (parent > 0 ) {
@ -47,7 +52,7 @@ export const setChildTerms = (state, { terms, parent }) => {
Vue.set(parentTerm, 'children', []);
for (let term of terms){
parentTerm['children'].push(term);
parentTerm['children'].unshift(term);
}
}
}
@ -55,7 +60,7 @@ export const setChildTerms = (state, { terms, parent }) => {
if (state.terms != undefined) {
for (let term of terms)
state.terms.push(term);
state.terms.unshift(term);
} else {
state.terms = terms;
@ -63,6 +68,50 @@ export const setChildTerms = (state, { terms, parent }) => {
}
};
export const updateChildTerm = (state, { term, parent }) => {
if (parent > 0 ) {
for (let aTerm of state.terms) {
let childTerm = t.find(aTerm, [], (node, par) => { return node.id == term; });
if (childTerm != undefined) {
childTerm = term;
}
}
} else {
if (state.terms != undefined) {
for (let i = 0; i < state.terms.length; i++) {
if (state.terms[i].id == term.id)
Vue.set(state.terms, i, term);
}
} else {
state.terms = []
state.terms.unshift(term);
}
}
};
export const deleteChildTerm = ( state, {termId, parent} ) => {
if (parent > 0 ) {
for (let aTerm of state.terms) {
let parentTerm = t.bfs(aTerm, [], (node, par) => { return node.id == parent; });
if (parentTerm != undefined) {
let index = parentTerm.children.findIndex(deletedTerm => deletedTerm.id == termId);
if (index >= 0) {
parentTerm.children.splice(index, 1);
}
}
}
} else {
if (state.terms != undefined) {
for (let i = 0; i < state.terms.length; i++) {
if (state.terms[i].id == termId)
state.terms.splice(i, 1);
}
}
}
};
export const deleteTerm = ( state, termId ) => {
let index = state.terms.findIndex(deletedTerm => deletedTerm.id === termId);
if (index >= 0) {