clear errors on item edition page
This commit is contained in:
eduardohumberto
parent
d3c706d103
commit
f6ff171c90
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<div>
|
||||
<tainacan-title />
|
||||
<form
|
||||
v-if="!isLoading"
|
||||
class="tainacan-form"
|
||||
<form
|
||||
v-if="!isLoading"
|
||||
class="tainacan-form"
|
||||
label-width="120px">
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
|
||||
<!-- Status -------------------------------- -->
|
||||
<!-- Status -------------------------------- -->
|
||||
<label class="section-label">{{ $i18n.get('label_status') }}</label>
|
||||
<span class="required-field-asterisk">*</span>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'status')"
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'status')"
|
||||
:message="$i18n.getHelperMessage('items', 'status')"/>
|
||||
<div class="document-box">
|
||||
<div class="field">
|
||||
<b-select
|
||||
<b-select
|
||||
v-model="form.status"
|
||||
:placeholder="$i18n.get('instruction_select_a_status')">
|
||||
<option
|
||||
|
|
@ -27,12 +27,12 @@
|
|||
:disabled="statusOption.disabled">{{ statusOption.label }}
|
||||
</option>
|
||||
</b-select>
|
||||
<p
|
||||
<p
|
||||
v-if="item.status == 'auto-draft'"
|
||||
class="help is-danger">
|
||||
{{ $i18n.get('info_item_not_saved') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button
|
||||
|
|
@ -40,32 +40,32 @@
|
|||
@click.prevent="onSubmit"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('save') }}
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="help is-danger">{{ formErrorMessage }}</p>
|
||||
<p class="help is-danger">{{ formErrorMessage }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Document -------------------------------- -->
|
||||
<label class="section-label">{{ form.document != undefined && form.document != null && form.document != '' ? $i18n.get('label_document') : $i18n.get('label_document_empty') }}</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'document')"
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'document')"
|
||||
:message="$i18n.getHelperMessage('items', 'document')"/>
|
||||
<div class="document-box">
|
||||
<div
|
||||
<div
|
||||
v-if="form.document != undefined && form.document != null &&
|
||||
form.document_type != undefined && form.document_type != null &&
|
||||
form.document != '' && form.document_type != 'empty'">
|
||||
<div v-if="form.document_type == 'attachment'">
|
||||
<div v-html="item.document_as_html" />
|
||||
<button
|
||||
class="button is-primary"
|
||||
<button
|
||||
class="button is-primary"
|
||||
size="is-small"
|
||||
@click.prevent="setFileDocument($event)">
|
||||
{{ $i18n.get('edit') }}
|
||||
</button>
|
||||
<button
|
||||
class="button is-primary"
|
||||
<button
|
||||
class="button is-primary"
|
||||
size="is-small"
|
||||
@click.prevent="removeDocument()">
|
||||
{{ $i18n.get('remove') }}
|
||||
|
|
@ -73,14 +73,14 @@
|
|||
</div>
|
||||
<div v-if="form.document_type == 'text'">
|
||||
<div v-html="item.document_as_html" />
|
||||
<button
|
||||
class="button is-primary"
|
||||
<button
|
||||
class="button is-primary"
|
||||
size="is-small"
|
||||
@click.prevent="setTextDocument()">
|
||||
{{ $i18n.get('edit') }}
|
||||
</button>
|
||||
<button
|
||||
class="button is-primary"
|
||||
<button
|
||||
class="button is-primary"
|
||||
size="is-small"
|
||||
@click.prevent="removeDocument()">
|
||||
{{ $i18n.get('remove') }}
|
||||
|
|
@ -88,14 +88,14 @@
|
|||
</div>
|
||||
<div v-if="form.document_type == 'url'">
|
||||
<div v-html="item.document_as_html" />
|
||||
<button
|
||||
class="button is-primary"
|
||||
<button
|
||||
class="button is-primary"
|
||||
size="is-small"
|
||||
@click.prevent="setURLDocument()">
|
||||
{{ $i18n.get('edit') }}
|
||||
</button>
|
||||
<button
|
||||
class="button is-primary"
|
||||
<button
|
||||
class="button is-primary"
|
||||
size="is-small"
|
||||
@click.prevent="removeDocument()">
|
||||
{{ $i18n.get('remove') }}
|
||||
|
|
@ -123,12 +123,12 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Text Insert Modal ----------------- -->
|
||||
<b-modal
|
||||
:can-cancel="false"
|
||||
:active.sync="isTextModalActive"
|
||||
:width="640"
|
||||
:can-cancel="false"
|
||||
:active.sync="isTextModalActive"
|
||||
:width="640"
|
||||
scroll="keep">
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
|
|
@ -136,12 +136,12 @@
|
|||
<hr>
|
||||
</div>
|
||||
<b-input
|
||||
:class="{'has-content': textContent != undefined && textContent != ''}"
|
||||
:class="{'has-content': textContent != undefined && textContent != ''}"
|
||||
type="textarea"
|
||||
v-model="textContent"/>
|
||||
|
||||
<div class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-cancel-text-content-writing"
|
||||
class="button is-outlined"
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
id="button-submit-text-content-writing"
|
||||
@click.prevent="confirmTextWriting()"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('save') }}</button>
|
||||
{{ $i18n.get('save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -162,21 +162,21 @@
|
|||
|
||||
<!-- URL Insert Modal ----------------- -->
|
||||
<b-modal
|
||||
:can-cancel="false"
|
||||
:active.sync="isURLModalActive"
|
||||
:width="640"
|
||||
:can-cancel="false"
|
||||
:active.sync="isURLModalActive"
|
||||
:width="640"
|
||||
scroll="keep">
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_insert_url') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<b-input
|
||||
:class="{'has-content': urlLink != undefined && urlLink != ''}"
|
||||
:class="{'has-content': urlLink != undefined && urlLink != ''}"
|
||||
v-model="urlLink"/>
|
||||
|
||||
<div class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-cancel-url-link-selection"
|
||||
class="button is-outlined"
|
||||
|
|
@ -189,39 +189,39 @@
|
|||
id="button-submit-url-link-selection"
|
||||
@click.prevent="confirmURLSelection()"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('save') }}</button>
|
||||
{{ $i18n.get('save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<!-- Thumbnail -------------------------------- -->
|
||||
<!-- Thumbnail -------------------------------- -->
|
||||
<label class="section-label">{{ $i18n.get('label_thumbnail') }}</label>
|
||||
<help-button
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', '_thumbnail_id')"
|
||||
:message="$i18n.getHelperMessage('items', '_thumbnail_id')"/>
|
||||
<div class="document-box">
|
||||
<div class="thumbnail-field">
|
||||
<a
|
||||
<a
|
||||
class="button is-rounred is-secondary"
|
||||
id="button-edit-thumbnail"
|
||||
id="button-edit-thumbnail"
|
||||
:aria-label="$i18n.get('label_button_edit_thumb')"
|
||||
@click.prevent="thumbnailMediaFrame.openFrame($event)">
|
||||
<b-icon icon="pencil" />
|
||||
</a>
|
||||
<figure class="image">
|
||||
<span
|
||||
<span
|
||||
v-if="item.thumbnail == undefined || item.thumbnail == false"
|
||||
class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
|
||||
<img
|
||||
id="thumbail-image"
|
||||
:alt="$i18n.get('label_thumbnail')"
|
||||
id="thumbail-image"
|
||||
:alt="$i18n.get('label_thumbnail')"
|
||||
:src="(item.thumbnail == undefined || item.thumbnail == false) ? thumbPlaceholderPath : item.thumbnail">
|
||||
</figure>
|
||||
<div class="thumbnail-buttons-row">
|
||||
<a
|
||||
id="button-delete"
|
||||
:aria-label="$i18n.get('label_button_delete_thumb')"
|
||||
<a
|
||||
id="button-delete"
|
||||
:aria-label="$i18n.get('label_button_delete_thumb')"
|
||||
@click="deleteThumbnail()">
|
||||
<b-icon icon="delete" />
|
||||
</a>
|
||||
|
|
@ -232,50 +232,50 @@
|
|||
<!-- Attachments ------------------------------------------ -->
|
||||
<label class="section-label">{{ $i18n.get('label_attachments') }}</label>
|
||||
<div class="document-box">
|
||||
<button
|
||||
<button
|
||||
class="button is-secondary"
|
||||
@click.prevent="attachmentMediaFrame.openFrame($event)">
|
||||
Attatchments (tests)
|
||||
</button>
|
||||
|
||||
<div class="uploaded-files">
|
||||
<div
|
||||
<div
|
||||
v-for="(attachment, index) in attachmentsList"
|
||||
:key="index">
|
||||
<span class="tag is-primary">
|
||||
{{ attachment.title.rendered }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-1" />
|
||||
<div class="column is-7">
|
||||
<label class="section-label">{{ $i18n.get('fields') }}</label>
|
||||
<br>
|
||||
<a
|
||||
class="collapse-all"
|
||||
<a
|
||||
class="collapse-all"
|
||||
@click="toggleCollapseAll()">
|
||||
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
|
||||
<b-icon
|
||||
<b-icon
|
||||
type="is-secondary"
|
||||
:icon=" collapseAll ? 'menu-down' : 'menu-right'" />
|
||||
</a>
|
||||
|
||||
<!-- Fields from Collection-------------------------------- -->
|
||||
<tainacan-form-item
|
||||
<tainacan-form-item
|
||||
v-for="(field, index) of fieldList"
|
||||
:key="index"
|
||||
:field="field"
|
||||
:is-collapsed="!fieldCollapses[index]" />
|
||||
|
||||
:is-collapsed="!fieldCollapses[index]" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<b-loading
|
||||
:active.sync="isLoading"
|
||||
<b-loading
|
||||
:active.sync="isLoading"
|
||||
:can-cancel="false"/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -295,7 +295,7 @@ export default {
|
|||
collectionId: Number,
|
||||
isLoading: false,
|
||||
fieldCollapses: [],
|
||||
collapseAll: false,
|
||||
collapseAll: false,
|
||||
form: {
|
||||
collectionId: Number,
|
||||
status: '',
|
||||
|
|
@ -304,7 +304,7 @@ export default {
|
|||
},
|
||||
thumbnail: {},
|
||||
// Can be obtained from api later
|
||||
statusOptions: [{
|
||||
statusOptions: [{
|
||||
value: 'publish',
|
||||
label: this.$i18n.get('publish')
|
||||
}, {
|
||||
|
|
@ -350,9 +350,9 @@ export default {
|
|||
this.isLoading = true;
|
||||
|
||||
let data = {item_id: this.itemId, status: this.form.status};
|
||||
|
||||
this.updateItem(data).then(updatedItem => {
|
||||
|
||||
|
||||
this.updateItem(data).then(updatedItem => {
|
||||
|
||||
this.item = updatedItem;
|
||||
|
||||
// Fill this.form data with current data.
|
||||
|
|
@ -365,10 +365,10 @@ export default {
|
|||
this.$router.push(this.$routerHelper.getItemPath(this.form.collectionId, this.itemId));
|
||||
})
|
||||
.catch((errors) => {
|
||||
for (let error of errors.errors) {
|
||||
for (let field of Object.keys(error)){
|
||||
for (let error of errors.errors) {
|
||||
for (let field of Object.keys(error)){
|
||||
eventBus.errors.push({ field_id: field, errors: error[field]});
|
||||
}
|
||||
}
|
||||
}
|
||||
this.formErrorMessage = errors.error_message;
|
||||
|
||||
|
|
@ -380,7 +380,7 @@ export default {
|
|||
this.isLoading = true;
|
||||
|
||||
// Creates draft Item
|
||||
let data = {collection_id: this.form.collectionId, status: 'auto-draft'};
|
||||
let data = {collection_id: this.form.collectionId, status: 'auto-draft'};
|
||||
this.sendItem(data).then(res => {
|
||||
|
||||
this.itemId = res.id;
|
||||
|
|
@ -395,11 +395,11 @@ export default {
|
|||
this.form.document_type = this.item.document_type;
|
||||
|
||||
this.loadMetadata();
|
||||
|
||||
|
||||
})
|
||||
.catch(error => this.$console.error(error));
|
||||
},
|
||||
loadMetadata() {
|
||||
loadMetadata() {
|
||||
// Obtains Item Field
|
||||
this.fetchFields(this.itemId).then((fields) => {
|
||||
this.isLoading = false;
|
||||
|
|
@ -407,13 +407,13 @@ export default {
|
|||
this.fieldCollapses.push(false);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
setFileDocument(event) {
|
||||
this.fileMediaFrame.openFrame(event);
|
||||
},
|
||||
setTextDocument() {
|
||||
this.isTextModalActive = true;
|
||||
},
|
||||
},
|
||||
confirmTextWriting() {
|
||||
this.isTextModalActive = false;
|
||||
this.form.document_type = 'text';
|
||||
|
|
@ -451,7 +451,7 @@ export default {
|
|||
})
|
||||
.catch((error) => {
|
||||
this.$console.error(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
initializeMediaFrames() {
|
||||
|
||||
|
|
@ -472,7 +472,7 @@ export default {
|
|||
let oldThumbnail = this.item.thumbnail;
|
||||
if (item.document_type == 'attachment' && oldThumbnail != item.thumbnail )
|
||||
this.item.thumbnail = item.thumbnail;
|
||||
|
||||
|
||||
})
|
||||
.catch(error => this.$console.error(error));
|
||||
}
|
||||
|
|
@ -515,7 +515,7 @@ export default {
|
|||
|
||||
for (let i = 0; i < this.fieldCollapses.length; i++)
|
||||
this.fieldCollapses[i] = this.collapseAll;
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -529,6 +529,8 @@ export default {
|
|||
created(){
|
||||
// Obtains collection ID
|
||||
this.cleanFields();
|
||||
eventBus.clearAllErrors();
|
||||
this.formErrorMessage = '';
|
||||
this.collectionId = this.$route.params.collectionId;
|
||||
this.form.collectionId = this.collectionId;
|
||||
|
||||
|
|
@ -545,7 +547,7 @@ export default {
|
|||
|
||||
this.fetchItem(this.itemId).then(res => {
|
||||
this.item = res;
|
||||
|
||||
|
||||
// Fill this.form data with current data.
|
||||
this.form.status = this.item.status;
|
||||
this.form.document = this.item.document;
|
||||
|
|
@ -561,8 +563,8 @@ export default {
|
|||
// Fetch current existing attachments
|
||||
this.fetchAttachments(this.itemId);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -570,8 +572,8 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import '../../scss/_variables.scss';
|
||||
|
||||
@import '../../scss/_variables.scss';
|
||||
|
||||
.page-container{
|
||||
height: calc(100% - 82px);
|
||||
}
|
||||
|
|
@ -598,7 +600,7 @@ export default {
|
|||
margin-top: 16px;
|
||||
margin-bottom: 38px;
|
||||
|
||||
ul {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
li {
|
||||
|
|
@ -618,14 +620,14 @@ export default {
|
|||
}
|
||||
p { color: $secondary; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-field {
|
||||
max-height: 128px;
|
||||
margin-bottom: 96px;
|
||||
margin-top: -20px;
|
||||
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -655,7 +657,7 @@ export default {
|
|||
bottom: -20px;
|
||||
left: -20px;
|
||||
z-index: 99;
|
||||
|
||||
|
||||
.icon {
|
||||
display: inherit;
|
||||
padding: 0;
|
||||
|
|
@ -677,10 +679,8 @@ export default {
|
|||
left: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@ export const eventBus = new Vue({
|
|||
const components = this.getAllComponents();
|
||||
for (let eventElement of components){
|
||||
eventElement.addEventListener('input', (event) => {
|
||||
|
||||
|
||||
if (event.detail && event.detail[0] ){
|
||||
this.updateValue({
|
||||
item_id: $(eventElement).attr("item_id"),
|
||||
field_id: $(eventElement).attr("field_id"),
|
||||
this.updateValue({
|
||||
item_id: $(eventElement).attr("item_id"),
|
||||
field_id: $(eventElement).attr("field_id"),
|
||||
values: event.detail
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@ export const eventBus = new Vue({
|
|||
let values = ( Array.isArray( data.values[0] ) ) ? data.values[0] : data.values ;
|
||||
const promisse = this.$store.dispatch('item/updateMetadata',
|
||||
{ item_id: data.item_id, field_id: data.field_id, values: values });
|
||||
|
||||
|
||||
promisse.then( () => {
|
||||
let index = this.errors.findIndex( errorItem => errorItem.field_id == data.field_id );
|
||||
if ( index >= 0){
|
||||
|
|
@ -66,6 +66,9 @@ export const eventBus = new Vue({
|
|||
let error = this.errors.find( errorItem => errorItem.field_id == field_id );
|
||||
return ( error ) ? error.errors : false
|
||||
},
|
||||
clearAllErrors(){
|
||||
this.errors = [];
|
||||
},
|
||||
setValues(){
|
||||
const field = this.$store.getters['item/getMetadata'];
|
||||
if( field ){
|
||||
|
|
@ -107,4 +110,4 @@ export const eventBus = new Vue({
|
|||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue