Show errors on TermEditionForm. Fixes loading loop when switching to Terms tab in a not-saved Category edition page.

This commit is contained in:
Mateus Machado Luna 2018-04-10 10:22:49 -03:00
parent 83ac7239d5
commit 57d3fc5905
6 changed files with 59 additions and 59 deletions

View File

@ -147,7 +147,7 @@
mixins: [ wpAjax ],
data(){
return {
categoryId: Number,
categoryId: String,
activeTab: 0,
category: null,
isLoadingCategory: false,
@ -184,7 +184,7 @@
'createCategory',
'updateCategory',
'fetchCategory',
'fetchOnlySlug',
'fetchOnlySlug'
]),
...mapGetters('category',[
'getCategory',

View File

@ -222,13 +222,11 @@ export default {
this.$router.push(this.$routerHelper.getItemPath(this.form.collectionId, this.itemId));
})
.catch((errors) => {
this.$console.log(errors);
for (let error of errors.errors) {
for (let attribute of Object.keys(error)){
eventBus.errors.push({ field_id: attribute, errors: error[attribute]});
for (let field of Object.keys(error)){
eventBus.errors.push({ field_id: attribute, errors: error[field]});
}
}
this.$console.log(eventBus.errors);
this.formErrorMessage = errors.error_message;
this.isLoading = false;

View File

@ -6,13 +6,11 @@
<b-field
:addons="false"
:type="editForm.name == '' ? 'is-danger' : ''"
:message="editForm.name == '' ? $i18n.get('info_name_is_required') : ''">
:type="(formErrors.name != '' && formErrors.name != undefined) ? 'is-danger' : ''"
:message="formErrors.name">
<label class="label">
{{ $i18n.get('label_name') }}
<span
class="required-term-asterisk"
:class="editForm.name == '' ? 'is-danger' : ''">*</span>
<span class="required-term-asterisk">*</span>
<help-button
:title="$i18n.getHelperTitle('terms', 'name')"
:message="$i18n.getHelperMessage('terms', 'name')"/>
@ -22,7 +20,10 @@
name="name"/>
</b-field>
<b-field :addons="false">
<b-field
:addons="false"
:type="formErrors['description'] != '' && formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description']">
<label class="label">
{{ $i18n.get('label_description') }}
<help-button
@ -47,8 +48,7 @@
<div class="control">
<button
class="button is-success"
type="submit"
:disabled="editForm.name == '' || editForm.name == undefined">
type="submit">
{{ $i18n.get('save') }}
</button>
</div>
@ -61,6 +61,11 @@ import { mapActions, mapGetters } from 'vuex';
export default {
name: 'TermEditionForm',
data () {
return {
formErrors: {}
}
},
props: {
editForm: Object,
categoryId: ''
@ -84,11 +89,16 @@ export default {
})
.then(() => {
this.editForm = {};
this.formErrors = {};
this.$emit('onEditionFinished');
})
.catch((error) => {
.catch((errors) => {
for (let error of errors.errors) {
for (let field of Object.keys(error)){
this.$set(this.formErrors, field, (this.formErrors[field] != undefined ? this.formErrors[field] : '') + error[field] + '\n');
}
}
this.$emit('onErrorFound');
this.$console.log(error);
});
} else {
@ -101,11 +111,16 @@ export default {
})
.then(() => {
this.editForm.saved = true;
this.formErrors = {};
this.$emit('onEditionFinished');
})
.catch((error) => {
.catch((errors) => {
for (let error of errors.errors) {
for (let field of Object.keys(error)){
this.$set(this.formErrors, field, (this.formErrors[field] != undefined ? this.formErrors[field] : '') + error[field] + '\n');
}
}
this.$emit('onErrorFound');
this.$console.log(error);
});
}
},

View File

@ -97,37 +97,19 @@ export default {
watch: {
termsList() {
this.generateOrderedTerms();
},
categoryId() {
this.loadTerms();
}
},
components: {
TermEditionForm
},
beforeRouteUpdate ( to, from, next ) {
let hasUnsavedForms = false;
for (let term in this.orderedTermsList) {
if (!term.saved || term.opened || term.id == 'new')
hasUnsavedForms = true;
}
if (hasUnsavedForms) {
this.$dialog.confirm({
message: this.$i18n.get('info_warning_terms_not_saved'),
onConfirm: () => {
this.onEditionCanceled();
next();
},
cancelText: this.$i18n.get('cancel'),
confirmText: this.$i18n.get('continue'),
type: 'is-secondary'
});
} else {
next()
}
},
methods: {
...mapActions('category', [
'fetchTerms',
'updateTerm',
'deleteTerm'
'deleteTerm',
'fetchTerms'
]),
...mapGetters('category',[
'getTerms'
@ -299,7 +281,8 @@ export default {
term.opened = (this.orderedTermsList[term.id].opened == undefined ? false : this.orderedTermsList[term.id].opened);
term.saved = (this.orderedTermsList[term.id].saved == undefined ? true : this.orderedTermsList[term.id].saved);
}
this.orderedTermsList.push(JSON.parse(JSON.stringify(term)));
if (term.taxonomy != null)
this.orderedTermsList.push(JSON.parse(JSON.stringify(term)));
this.buildOrderedTermsList(term.id, termDepth + 1);
}
@ -314,22 +297,26 @@ export default {
return this.termsList[originalIndex].name;
else
return term.name;
},
loadTerms() {
this.isLoadingTerms = true;
this.fetchTerms(this.categoryId)
.then(() => {
// Fill this.form data with current data.
this.isLoadingTerms = false;
this.generateOrderedTerms();
})
.catch((error) => {
this.$console.log(error);
});
}
},
created() {
this.isLoadingTerms = true;
this.fetchTerms(this.categoryId)
.then(() => {
// Fill this.form data with current data.
this.isLoadingTerms = false;
this.generateOrderedTerms();
})
.catch((error) => {
this.$console.log(error);
});
if (this.categoryId !== String) {
this.loadTerms();
}
}
}
</script>

View File

@ -83,6 +83,7 @@ html {
padding: 1em 1.2em 0.4em 1.2em;
margin-bottom: 0px;
.button {
border-width: 1px;
padding: 2px 30px !important;
}
.button.is-outlined {
@ -154,7 +155,7 @@ html {
// Some components have a different style in listing pages
.button {
border: none;
border-width: 0;
border-radius: 6px !important;
font-weight: normal;
padding: 2px 15px !important;

View File

@ -125,7 +125,7 @@ export const sendTerm = ({commit}, { categoryId, name, description, parent }) =>
resolve( term );
})
.catch(error => {
reject( error );
reject({ error_message: error['response']['data'].error_message, errors: error['response']['data'].errors });
});
});
};
@ -139,7 +139,7 @@ export const deleteTerm = ({ commit }, { categoryId, termId }) => {
resolve( term );
})
.catch(error => {
reject( error )
reject({ error_message: error['response']['data'].error_message, errors: error['response']['data'].errors });
});
});
};
@ -157,8 +157,7 @@ export const updateTerm = ({ commit }, { categoryId, termId, name, description,
resolve( term );
})
.catch(error => {
reject(error)
//reject({ error_message: error['response']['data'].error_message, errors: error['response']['data'].errors });
reject({ error_message: error['response']['data'].error_message, errors: error['response']['data'].errors });
});
});
};