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

Error output on form submission after status change.

This commit is contained in:
Mateus Machado Luna 2018-10-30 14:07:59 -03:00
parent b300bc0d2b
commit 318a438058
2 changed files with 168 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
src/admin/components/edition/item-metadata-bulk-edition-form.vue
View File

@ -88,40 +88,34 @@
<b-field <b-field
:key="index" :key="index"
:addons="false" :addons="false"
:message="getErrorMessage(metadatum)" :message="getErrorMessage(formErrors[metadatum.id])"
:type="metadatumTypeMessage"> :type="getErrorMessage(formErrors[metadatum.id]) != '' ? 'is-danger' : ''">
<span <span
class="collapse-handle" class="collapse-handle"
@click="changeCollapse(metadatumTypeMessage != 'is-danger' ? !metadatumCollapses[index] : true, index)"> @click="changeCollapse(!metadatumCollapses[index], index)">
<b-icon <b-icon
type="is-secondary" type="is-secondary"
:icon="metadatumCollapses[index] || metadatumTypeMessage == 'is-danger' ? 'menu-down' : 'menu-right'" /> :icon="metadatumCollapses[index] ? 'menu-down' : 'menu-right'" />
<label class="label">{{ metadatum.name }}</label> <label class="label">{{ metadatum.name }}</label>
<span <span
v-if="metadatum.required == 'yes'" v-if="metadatum.required == 'yes'"
class="required-metadatum-asterisk" class="required-metadatum-asterisk">*</span>
:class="metadatumTypeMessage">*</span>
<span class="metadata-type">({{ $i18n.get(metadatum.metadata_type_object.component) }})</span> <span class="metadata-type">({{ $i18n.get(metadatum.metadata_type_object.component) }})</span>
<help-button <help-button
:title="metadatum.name" :title="metadatum.name"
:message="metadatum.description"/> :message="metadatum.description"/>
</span> </span>
<transition name="filter-item"> <transition name="filter-item">
<div <div v-show="metadatumCollapses[index]">
v-show="metadatumCollapses[index] || metadatumTypeMessage == 'is-danger'"
v-if="isTextInputComponent( metadatum.metadata_type_object.component )">
<component <component
:forced-component-type="metadatum.metadata_type_object.component.includes('taxonomy') ? 'tainacan-taxonomy-tag-input' : ''" :forced-component-type="false"
:allow-new="false" :allow-new="false"
:allow-select-to-create="metadatum.metadata_type_options.allow_new_terms === 'yes'" :allow-select-to-create="metadatum.metadata_type_options.allow_new_terms === 'yes'"
:maxtags="1" :maxtags="1"
:id="metadatum.metadata_type_object.component + :id="metadatum.metadata_type_object.component + '-' + metadatum.slug"
'-' + metadatum.slug"
:is="metadatum.metadata_type_object.component" :is="metadatum.metadata_type_object.component"
:metadatum="{ metadatum: metadatum }" :metadatum="{ metadatum: metadatum }"
class="tainacan-bulk-edition-field tainacan-bulk-edition-field-last" @input="clearErrorMessage(metadatum.id); bulkEdit($event, metadatum)"/>
@input="bulkEdit($event, metadatum)" />
<!-- :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}" <!-- :class="{'is-field-history': bulkEditionProcedures[criterion].isDone}"
:disabled="bulkEditionProcedures[criterion].isDone || bulkEditionProcedures[criterion].isExecuting" --> :disabled="bulkEditionProcedures[criterion].isDone || bulkEditionProcedures[criterion].isExecuting" -->
</div> </div>
@ -155,14 +149,17 @@
<button <button
@click="onDeletePermanently()" @click="onDeletePermanently()"
type="button" type="button"
:class="{ 'is-loading': isTrashingItems }"
class="button is-outlined">{{ $i18n.get('label_delete_permanently') }}</button> class="button is-outlined">{{ $i18n.get('label_delete_permanently') }}</button>
<button <button
@click="onSubmit('draft')" @click="onSubmit('draft')"
type="button" type="button"
:class="{ 'is-loading': isUpdatingItems }"
class="button is-secondary">{{ $i18n.get('label_save_as_draft') }}</button> class="button is-secondary">{{ $i18n.get('label_save_as_draft') }}</button>
<button <button
@click="onSubmit(visibility)" @click="onSubmit(visibility)"
type="button" type="button"
:class="{ 'is-loading': isPublishingItems }"
class="button is-success">{{ $i18n.get('label_publish') }}</button> class="button is-success">{{ $i18n.get('label_publish') }}</button>
</div> </div>
<div <div
@ -172,19 +169,23 @@
v-if="status == 'draft'" v-if="status == 'draft'"
@click="onSubmit('trash')" @click="onSubmit('trash')"
type="button" type="button"
:class="{ 'is-loading': isTrashingItems }"
class="button is-outlined">{{ $i18n.get('label_send_to_trash') }}</button> class="button is-outlined">{{ $i18n.get('label_send_to_trash') }}</button>
<button <button
v-if="status == 'auto-draft'" v-if="status == 'auto-draft'"
@click="onDiscard()" @click="onDiscard()"
type="button" type="button"
:class="{ 'is-loading': isTrashingItems }"
class="button is-outlined">{{ $i18n.get('label_discard') }}</button> class="button is-outlined">{{ $i18n.get('label_discard') }}</button>
<button <button
@click="onSubmit('draft')" @click="onSubmit('draft')"
type="button" type="button"
:class="{ 'is-loading': isUpdatingItems }"
class="button is-secondary">{{ status == 'draft' ? $i18n.get('label_update') : $i18n.get('label_save_as_draft') }}</button> class="button is-secondary">{{ status == 'draft' ? $i18n.get('label_update') : $i18n.get('label_save_as_draft') }}</button>
<button <button
@click="onSubmit(visibility)" @click="onSubmit(visibility)"
type="button" type="button"
:class="{ 'is-loading': isPublishingItems }"
class="button is-success">{{ $i18n.get('label_publish') }}</button> class="button is-success">{{ $i18n.get('label_publish') }}</button>
</div> </div>
<div <div
@ -193,15 +194,18 @@
<button <button
@click="onSubmit('trash')" @click="onSubmit('trash')"
type="button" type="button"
:class="{ 'is-loading': isTrashingItems }"
class="button is-outlined">{{ $i18n.get('label_send_to_trash') }}</button> class="button is-outlined">{{ $i18n.get('label_send_to_trash') }}</button>
<button <button
@click="onSubmit('draft')" @click="onSubmit('draft')"
type="button" type="button"
:class="{ 'is-loading': isUpdatingItems }"
class="button is-secondary">{{ $i18n.get('label_return_to_draft') }}</button> class="button is-secondary">{{ $i18n.get('label_return_to_draft') }}</button>
<button <button
:disabled="formErrorMessage != undefined && formErrorMessage != ''" :disabled="formErrorMessage != undefined && formErrorMessage != ''"
@click="onSubmit(visibility)" @click="onSubmit(visibility)"
type="button" type="button"
:class="{ 'is-loading': isPublishingItems }"
class="button is-success">{{ $i18n.get('label_update') }}</button> class="button is-success">{{ $i18n.get('label_update') }}</button>
</div> </div>
</footer> </footer>
@ -220,12 +224,15 @@ export default {
isLoadingItems: false, isLoadingItems: false,
isLoadingMetadata: false, isLoadingMetadata: false,
isExecutingBulkEdit: false, isExecutingBulkEdit: false,
isUpdatingItems: false,
isTrashingItems: false,
isPublishingItems: false,
collectionName: '', collectionName: '',
items: '', items: '',
visibility: 'publish', visibility: 'publish',
collapseAll: true, collapseAll: true,
metadatumCollapses: [], metadatumCollapses: [],
metadatumTypeMessage:'', formErrors: {},
status: 'draft', status: 'draft',
groupID: null groupID: null
} }
@ -236,6 +243,9 @@ export default {
} }
}, },
methods: { methods: {
...mapActions('item', [
'updateItem'
]),
...mapActions('collection', [ ...mapActions('collection', [
'fetchCollectionName' 'fetchCollectionName'
]), ]),
@ -253,7 +263,8 @@ export default {
'setStatusInBulk', 'setStatusInBulk',
'removeValueInBulk', 'removeValueInBulk',
'deleteItemsInBulk', 'deleteItemsInBulk',
'trashItemsInBulk' 'trashItemsInBulk',
'fetchItemIdInSequence'
]), ]),
...mapGetters('bulkedition', [ ...mapGetters('bulkedition', [
'getItemIdInSequence', 'getItemIdInSequence',
@ -268,76 +279,60 @@ export default {
changeCollapse(event, index) { changeCollapse(event, index) {
this.metadatumCollapses.splice(index, 1, event); this.metadatumCollapses.splice(index, 1, event);
}, },
getErrorMessage(metadatum) {
let msg = '';
// let errors = eventBus.getErrors(metadatum.id);
// if ( errors) {
// this.metadatumTypeMessage = 'is-danger';
// for (let error of errors) {
// for (let index of Object.keys(error)) {
// // this.$console.log(index);
// msg += error[index] + '\n';
// }
// }
// } else {
// this.metadatumTypeMessage = '';
// }
return msg;
},
isTextInputComponent( component ){
let array = ['tainacan-relationship','tainacan-taxonomy'];
return !( array.indexOf( component ) >= 0 );
},
bulkEdit: _.debounce(function(newValue, metadatum) { bulkEdit: _.debounce(function(newValue, metadatum) {
let values = [];
if (!(Array.isArray(newValue)))
values.push(newValue);
else
values = newValue;
for (let value of values) {
this.isExecutingBulkEdit = true; this.isExecutingBulkEdit = true;
this.setValueInBulk({ this.setValueInBulk({
collectionID: this.collectionId, collectionID: this.collectionId,
groupID: this.groupID, groupID: this.groupID,
bodyParams: { bodyParams: {
metadatum_id: metadatum.id, metadatum_id: metadatum.id,
value: newValue, value: value,
} }
}).then(() => { }).then(() => {
this.isExecutingBulkEdit = false; this.isExecutingBulkEdit = false;
// this.finalizeProcedure(criterion); // this.finalizeProcedure(criterion);
}).catch(() => this.isExecutingBulkEdit = false); }).catch(() => this.isExecutingBulkEdit = false);
}
}, 1000), }, 1000),
onSubmit(status) { onSubmit(status) {
this.isExecutingBulkEdit = true; this.isExecutingBulkEdit = true;
console.log(status)
if (this.status != status && status != 'trash') { if (this.status != status && status != 'trash') {
this.changeStatus(status);
this.setStatusInBulk({
groupID: this.groupID,
collectionID: this.collectionId,
bodyParams: { value: status }
}).then(() => {
this.status = status;
this.isExecutingBulkEdit = false;
if (this.status != 'draft' && this.status != 'auto-draft')
this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
}).catch(() => this.isExecutingBulkEdit = false);
} else if (this.status != status && status == 'trash') { } else if (this.status != status && status == 'trash') {
this.isTrashingItems = true;
this.trashItemsInBulk({ this.trashItemsInBulk({
groupID: this.groupID, groupID: this.groupID,
collectionID: this.collectionId collectionID: this.collectionId
}).then(() => { }).then(() => {
this.status = status; this.status = status;
this.isTrashingItems = false;
this.isExecutingBulkEdit = false; this.isExecutingBulkEdit = false;
this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId)); this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
}).catch(() => this.isExecutingBulkEdit = false); }).catch(() => {
this.isExecutingBulkEdit = false;
this.isTrashingItems = false;
});
} else { } else {
// Triggers updating animation. // Sets loading to cause a visual impression of updating
this.isExecutingBulkEdit = true; this.isExecutingBulkEdit = true;
this.isUpdatingItems = true;
setTimeout(() => {
this.isExecutingBulkEdit = false; this.isExecutingBulkEdit = false;
this.isUpdatingItems = false;
}, 1000);
if (this.status != 'draft' && this.status != 'auto-draft') if (this.status != 'draft' && this.status != 'auto-draft')
this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId)); this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
@ -345,17 +340,95 @@ export default {
}, },
onDeletePermanently() { onDeletePermanently() {
this.isExecutingBulkEdit = true; this.isExecutingBulkEdit = true;
this.isTrashingItems = true;
this.deleteItemsInBulk({ this.deleteItemsInBulk({
collectionID: this.collectionId, collectionID: this.collectionId,
groupID: this.groupID groupID: this.groupID
}).then(() => { }).then(() => {
this.isExecutingBulkEdit = false; this.isExecutingBulkEdit = false;
this.isTrashingItems = false;
this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId)); this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
}).catch(() => this.isExecutingBulkEdit = false); }).catch(() => {
this.isExecutingBulkEdit = false;
this.isTrashingItems = false;
});
}, },
onDiscard() { onDiscard() {
this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId)); this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
},
changeStatus(status) {
this.isPublishingItems = true;
// Gets an item from the bulk group
this.fetchItemIdInSequence({ collectionId: this.collectionId, sequenceId: this.groupID, itemPosition: 1 })
.then((itemId) => {
// Test if this item can be set to this status
this.updateItem({ id: itemId, status: status })
.then(() => {
// The status can be applied to everyone.
this.setStatusInBulk({
groupID: this.groupID,
collectionID: this.collectionId,
bodyParams: { value: status }
}).then(() => {
this.status = status;
this.isPublishingItems = false;
this.isExecutingBulkEdit = false;
if (this.status != 'draft' && this.status != 'auto-draft')
this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
}).catch(() => {
this.isPublishingItems = false;
this.isExecutingBulkEdit = false;
});
})
.catch((errors) => {
// The status can not be applied.
this.isPublishingItems = false;
this.isExecutingBulkEdit = false;
for (let error of errors.errors) {
for (let metadatum of Object.keys(error)){
this.formErrors[metadatum] = error[metadatum];
} }
}
this.formErrorMessage = errors.error_message;
});
})
.catch(() => {
this.isPublishingItems = false;
this.isExecutingBulkEdit = false;
});
},
clearErrorMessage(metadatumId) {
console.log(this.formErrors[metadatumId]);
this.formErrors[metadatumId] = false;
let amountClean = 0;
for (let formError in this.formErrors) {
if (formError == false || formError == undefined)
amountClean++;
}
if (amountClean == 0)
this.formErrorMessage = '';
},
getErrorMessage(errors) {
let msg = '';
if ( errors != undefined && errors != false) {
for (let error of errors) {
for (let index of Object.keys(error)) {
msg += error[index] + '\n';
}
}
}
return msg;
},
}, },
created() { created() {
// Obtains collection ID // Obtains collection ID
@ -480,6 +553,17 @@ export default {
.column { .column {
.section-status{
padding: 16px 0;
.field .b-radio {
margin-right: 24px;
.icon {
font-size: 18px !important;
color: $gray3;
}
}
}
.section-label { .section-label {
position: relative; position: relative;
label { label {

5
src/admin/scss/_buttons.scss
View File

@ -28,10 +28,13 @@
transform: none !important; transform: none !important;
} }
&.is-outlined { &.is-outlined {
color: $turquoise5 !important; color: $turquoise5;
background-color: white !important; background-color: white !important;
border-color: $gray4 !important; border-color: $gray4 !important;
} }
&.is-outlined:hover {
color: $turquoise5 !important;
}
&:focus { &:focus {
outline: 0px; outline: 0px;
} }