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

Prevent index updating before field adition via API on DragNDrop. Adds disabled and loaging states for fields that are being configured.

This commit is contained in:
mateuswetah 2018-02-28 18:58:22 -03:00
parent fdaa1a159c
commit 640f1ffb01
2 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/admin/components/collections-list.vue
View File

@ -66,7 +66,7 @@
</p> </p>
<p>Nenhuma coleção ainda neste repositório.</p> <p>Nenhuma coleção ainda neste repositório.</p>
<router-link tag="button" class="button is-primary" <router-link tag="button" class="button is-primary"
:to="{ path: `/collections/new` }"> :to="{ path: $routerHelper.getNewCollectionPath() }">
Criar Coleção Criar Coleção
</router-link> </router-link>
</div> </div>
@ -162,10 +162,10 @@ export default {
handleSelectionChange(value) { handleSelectionChange(value) {
}, },
goToCollectionPage(collectionId) { goToCollectionPage(collectionId) {
this.$router.push(`/collections/${collectionId}`); this.$router.push(this.$routerHelper.getCollectionPath(collectionId));
}, },
goToCollectionEditPage(collectionId) { goToCollectionEditPage(collectionId) {
this.$router.push(`/collections/${collectionId}/edit`); this.$router.push(this.$routerHelper.getCollectionEditPath(collectionId));
}, },
onChangeCollectionsPerPage(value) { onChangeCollectionsPerPage(value) {
this.collectionsPerPage = value; this.collectionsPerPage = value;

43
src/admin/pages/edition/collection-fields-edition-page.vue
View File

@ -5,9 +5,20 @@
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<b-field :label="$i18n.get('label_active_fields')" is-grouped> <b-field :label="$i18n.get('label_active_fields')" is-grouped>
<draggable class="box active-fields-area" @change="handleChange" :class="{'fields-area-receive': isDraggingFromAvailable}" :list="activeFieldList" :options="{group:'fields', chosenClass: 'sortable-chosen'}"> <draggable
<div class="active-field-item" v-for="(field, index) in activeFieldList" :key="index"> class="box active-fields-area"
{{ field.name }}<span class="label-details"> (not configured)</span><a @click.prevent="removeField(field)"><b-icon is-small icon="delete"></b-icon></a><b-icon is-small icon="pencil"></b-icon> @change="handleChange"
:class="{'fields-area-receive': isDraggingFromAvailable}"
:list="activeFieldList"
:options="{group:'fields', chosenClass: 'sortable-chosen', filter: '.not-sortable-item'}">
<div
class="active-field-item"
:class="{'not-sortable-item': field.id == undefined}"
v-for="(field, index) in activeFieldList" :key="index">
{{ field.name }}
<span class="label-details"><span class="loading-spinner" v-if="field.id == undefined"></span> (not configured)</span>
<a @click.prevent="removeField(field)" v-if="field.id != undefined"><b-icon is-small icon="delete"></b-icon></a>
<b-icon is-small icon="pencil" v-if="field.id != undefined"></b-icon>
</div> </div>
<div slot="footer">Drag and drop Fields here to add them to Collection.</div> <div slot="footer">Drag and drop Fields here to add them to Collection.</div>
</draggable> </draggable>
@ -52,12 +63,15 @@ export default {
'getFields' 'getFields'
]), ]),
handleChange($event) { handleChange($event) {
if ($event.added) { if ($event.added) {
this.addNewField($event.added.element); this.addNewField($event.added.element, $event.added.newIndex);
} else if ($event.removed) { } else if ($event.removed) {
this.removeField($event.removed.element); this.removeField($event.removed.element);
} else if ($event.moved) {
this.updateFieldsOrder();
} }
this.updateFieldsOrder();
}, },
updateFieldsOrder() { updateFieldsOrder() {
let fieldsOrder = []; let fieldsOrder = [];
@ -66,21 +80,24 @@ export default {
} }
this.updateCollectionFieldsOrder({ collectionId: this.collectionId, fieldsOrder: fieldsOrder }); this.updateCollectionFieldsOrder({ collectionId: this.collectionId, fieldsOrder: fieldsOrder });
}, },
addNewField(newField) { addNewField(newField, newIndex) {
this.sendField({collectionId: this.collectionId, name: newField.name, fieldType: newField.className, status: 'publish'}) this.sendField({collectionId: this.collectionId, name: newField.name, fieldType: newField.className, status: 'publish'})
.then((res) => { .then((field) => {
this.activeFieldList.splice(newIndex, 1, field);
this.updateFieldsOrder();
}) })
.catch((error) => { .catch((error) => {
console.log(error);
}); });
}, },
removeField(removedField) { removeField(removedField) {
this.deleteField({ collectionId: this.collectionId, fieldId: removedField.id }) this.deleteField({ collectionId: this.collectionId, fieldId: removedField.id })
.then((field) => { .then((field) => {
let index = this.activeFieldList.findIndex(deletedItem => deletedItem.id === field.id); let index = this.activeFieldList.findIndex(deletedField => deletedField.id === field.id);
if (index >= 0) { if (index >= 0) {
this.activeFieldList.splice(index, 1); this.activeFieldList.splice(index, 1);
} }
this.updateFieldsOrder();
}) })
.catch((error) => { .catch((error) => {
}); });
@ -146,17 +163,21 @@ export default {
color: gray; color: gray;
} }
&.is-loading:after { .loading-spinner {
animation: spinAround 500ms infinite linear; animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb; border: 2px solid #dbdbdb;
border-radius: 290486px; border-radius: 290486px;
border-right-color: transparent; border-right-color: transparent;
border-top-color: transparent; border-top-color: transparent;
content: ""; content: "";
display: block; display: inline-block;
height: 1em; height: 1em;
width: 1em; width: 1em;
} }
&.not-sortable-item {
color: gray;
}
} }
.active-field-item:hover { .active-field-item:hover {
box-shadow: 0px 0px 2px #777; box-shadow: 0px 0px 2px #777;