Several updates to fix metadata and filters dragndrop behavior.

src/views/admin/components/lists/collection-metadata-list.vue

@@ -276,7 +276,8 @@
                                     chosenClass: 'sortable-chosen',
                                     filter: '.not-sortable-item',
                                     preventOnFilter: false,
-                                    animation: 250
+                                    animation: 250,
+                                    dataIdAttr: 'data-metadatum-id'
                                 }"
                                 @update="handleChange($event, sectionIndex)"
                                 @add="handleChange($event, sectionIndex)"
@@ -285,6 +286,10 @@
                                 <div 
                                         v-if="metadatum != undefined && metadatum.parent == 0"
                                         v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
+                                        :key="metadatum.id"
+                                        :data-metadatum-id="metadatum.id"
+                                        :data-collection-id="metadatum.collection_id"
+                                        :data-original-section-index="sectionIndex"
                                         class="active-metadatum-item"
                                         :class="{
                                             'is-compact-item': !isCollapseOpen(metadatum.id),
@@ -642,7 +647,8 @@ export default {
             'moveMetadataSectionUp',
             'moveMetadataSectionDown',
             'moveMetadatumUp',
-            'moveMetadatumDown'
+            'moveMetadatumDown',
+            'moveMetadatum'
         ]),
         ...mapGetters('metadata',[
             'getMetadataSections',
@@ -656,6 +662,7 @@ export default {
                 case 'remove':
                     this.removeMetadataSection(this.activeFiltersList[$event.oldIndex]);
                     break;
+                case 'change':
                 case 'update': {
                     const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
                     const element = newMetadataSectionsList.splice($event.oldIndex, 1)[0];
@@ -677,37 +684,52 @@ export default {
                         this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex, sectionIndex);
                         $event.originalTarget.removeChild($event.item)
                     } else {
-                        
+                        this.isLoadingMetadataSections = true;
+
+                        const previousSectionIndex = $event.item.dataset['originalSectionIndex'];
+
+                        const previousSectionMetadataObjectList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList[previousSectionIndex].metadata_object_list));
+                        const newSectionMetadataObjectList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList[sectionIndex].metadata_object_list));
+                        const element = previousSectionMetadataObjectList.splice($event.oldIndex, 1)[0];
+                        newSectionMetadataObjectList.splice($event.newIndex, 0, element);
+            
+                        const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
+                        newMetadataSectionsList[sectionIndex].metadata_object_list = newSectionMetadataObjectList;
+                        newMetadataSectionsList[previousSectionIndex].metadata_object_list = previousSectionMetadataObjectList;
+
+                        this.updateMetadataSections(newMetadataSectionsList);
+                        $event.originalTarget.removeChild($event.item);
+
                         this.updateMetadatum({
                             collectionId: this.collectionId,
-                            metadatumId: this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex].id,
+                            metadatumId: $event.item.dataset['metadatumId'],
-                            isRepositoryLevel: this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex].collection_id === 'default',
+                            isRepositoryLevel: $event.item.dataset['collectionId'] === 'default',
                             index: $event.newIndex,
                             options: {},
                             includeOptionsAsHtml: true,
                             sectionId: this.activeMetadataSectionsList[sectionIndex].id
+                        }).then(() => {
+                            this.updateMetadataSectionsOrder(newMetadataSectionsList)
+                                .then( () => this.isLoadingMetadataSections = false )
+                                .catch( () => this.isLoadingMetadataSections = false );
+                        }).catch(() => {
+                            this.isLoadingMetadataSections = false;
                         });
-
-                        const newSectionMetadataObjectList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList[sectionIndex].metadata_object_list));
-                        const element = newSectionMetadataObjectList.splice($event.oldIndex, 1)[0];
-                        newSectionMetadataObjectList.splice($event.newIndex, 0, element);
-
-                        const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
-                        newMetadataSectionsList[sectionIndex].metadata_object_list = newSectionMetadataObjectList;
-                        this.updateMetadataSections(newMetadataSectionsList);
-
-                        this.updateMetadataSectionsOrder(sectionIndex);
                     }
 
                     break;
-                case 'update':
+                case 'change':
+                case 'update': {
+                    this.moveMetadatum({ newIndex: $event.newIndex, oldIndex: $event.oldIndex, sectionIndex: sectionIndex });
                     this.updateMetadataOrder(sectionIndex);
                     break;
+                }
             }   
 
         },
         updateMetadataOrder(sectionIndex) {
             let metadataOrder = [];
+            
             for (let metadatum of this.activeMetadataSectionsList[sectionIndex].metadata_object_list)
                 if (metadatum != undefined)
                     metadataOrder.push({
@@ -717,17 +739,16 @@ export default {
             
             this.isUpdatingMetadataOrder = true;
             this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder, metadataSectionId: this.activeMetadataSectionsList[sectionIndex].id  })
-                .then(() => {
+                .then(() => this.isUpdatingMetadataOrder = false)
-                    this.isUpdatingMetadataOrder = false
-                
-                    
-                })
                 .catch(() => this.isUpdatingMetadataOrder = false);
                 
         },
-        updateMetadataSectionsOrder() {
+        updateMetadataSectionsOrder(metadataSectionsList) {
+            if (metadataSectionsList == undefined)
+                metadataSectionsList = this.activeMetadataSectionsList;
+
             let metadataSectionsOrder = [];
-            for (let metadataSection of this.activeMetadataSectionsList)
+            for (let metadataSection of metadataSectionsList)
                 if (metadataSection != undefined) {
                     metadataSectionsOrder.push({
                         'id': metadataSection.id,
@@ -756,12 +777,13 @@ export default {
         onChangeEnableSection($event, index) {
             let metadataSectionsOrder = [];
             for (let metadataSection of this.activeMetadataSectionsList)
-                if (metadataSection != undefined)
+                if (metadataSection != undefined) {
                     metadataSectionsOrder.push({
                         'id': metadataSection.id,
                         'enabled': metadataSection.enabled,
                         'metadata_order': metadataSection.metadata_object_list.map((aMetadatum) => { return { 'id': aMetadatum.id, 'enabled': aMetadatum.enabled } })
                     });
+                }
             
             metadataSectionsOrder[index].enabled = $event;
             this.isUpdatingMetadataSectionsOrder = true;
@@ -771,7 +793,6 @@ export default {
         },
         addMetadatumViaButton(metadatumType) {
             this.addNewMetadatum(metadatumType, this.activeMetadataSectionsList[0].metadata_object_list.length, 0);
-            
             // Higlights the clicked metadatum
             this.highlightedMetadatum = metadatumType.name;
             this.$emit('on-update-highlighted-metadatum', this.highlightedMetadatum);

src/views/admin/components/lists/metadata-types-list.vue

@@ -19,6 +19,7 @@
                             put: false,
                             revertClone: true
                         },
+                        draggable: '.available-metadatum-item',
                         sort: false,
                         dragClass: 'sortable-drag'
                     }">
@@ -27,7 +28,7 @@
                             :id="metadatum.component"
                             class="available-metadatum-item"
                             :class="{ 'highlighted-metadatum' : highlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }"
-                            @click.prevent.once="addMetadatumViaButton(metadatum)">
+                            @click.prevent="addMetadatumViaButton(metadatum)">
                         <span
                                 v-tooltip="{
                                     content: $i18n.get('instruction_click_or_drag_metadatum_create'),
@@ -84,6 +85,7 @@
                             put: false,
                             revertClone: true
                         },
+                        draggable: '.available-metadatum-item',
                         sort: false,
                         dragClass: 'sortable-drag'
                     }">
@@ -91,7 +93,7 @@
                     <div 
                             :id="metadataSection.id"
                             class="available-metadata-section-item"
-                            @click.prevent="addMetadataSectionViaButton()">
+                            @click="addMetadataSectionViaButton()">
                         <span
                                 v-tooltip="{
                                     content: $i18n.get('instruction_click_or_drag_metadatum_create'),

src/views/admin/components/lists/repository-metadata-list.vue

@@ -90,6 +90,7 @@
                     class="active-metadata-area"
                     :options="{
                         group: { name:'metadata', pull: false, put: true },
+                        sort: false,
                         handle: '.handle',
                         ghostClass: 'sortable-ghost',
                         chosenClass: 'sortable-chosen',
@@ -362,12 +363,16 @@ export default {
             'cleanMetadata'    
         ]),
         ...mapGetters('metadata',[
-            'getMetadata'
+            'getMetadata',
+            'getMetadatumTypes'
         ]),
         handleChange($event) {
             switch ($event.type) {
                 case 'add':
-                    this.addNewMetadatum(this.activeMetadatumList[$event.oldIndex], $event.newIndex);
+                    if ( !$event.from.classList.contains('active-metadata-area') ) {
+                        this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex);
+                        $event.originalTarget.removeChild($event.item);
+                    }
                     break;
                 case 'remove':
                     this.removeMetadatum(this.activeMetadatumList[$event.oldIndex]);

src/views/admin/components/metadata-types/compound/child-metadata-list.vue

@@ -34,10 +34,14 @@
                     preventOnFilter: false,
                     animation: 250
                 }"
-                @change="handleChange"> 
+                @update="handleChange($event)"
+                @add="handleChange($event)"
+                @remove="handleChange($event)"> 
             <template #item="{ element: metadatum, index }">
                 <div 
                         v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
+                        :data-metadatum-id="metadatum.id"
+                        :data-collection-id="metadatum.collection_id"
                         class="active-metadatum-item" 
                         :class="{
                             'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
@@ -235,7 +239,7 @@
 </template>
 
 <script>
-    import { mapActions } from 'vuex';
+    import { mapActions, mapGetters } from 'vuex';
     import MetadatumEditionForm from '../../edition/metadatum-edition-form.vue';
     import MetadatumDetails from '../../other/metadatum-details.vue';
     import CustomDialog from '../../other/custom-dialog.vue';
@@ -326,17 +330,22 @@
                 'deleteMetadatum',
                 'updateChildMetadataOrder'
             ]),
+            ...mapGetters('metadata',[
+                'getMetadatumTypes'
+            ]),
             handleChange($event) {  
-                
                 switch ($event.type) {
                     case 'add':
-                        this.addNewMetadatum(this.childrenMetadata[$event.oldIndex], $event.newIndex);
+                        if ( !$event.from.classList.contains('active-metadata-area') ) {
+                            this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex);
+                            $event.originalTarget.removeChild($event.item);
+                        }
                         break;
                     case 'remove':
                         this.removeMetadatum(this.childrenMetadata[$event.oldIndex]);
                         break;
+                    case 'change':
                     case 'update': {
-
                         const newChildrenMetadata = JSON.parse(JSON.stringify(this.childrenMetadata));
                         const element = newChildrenMetadata.splice($event.oldIndex, 1)[0];
                         newChildrenMetadata.splice($event.newIndex, 0, element);
@@ -443,6 +452,9 @@
                 this.updateMetadataOrder();
             },
             isAvailableChildMetadata(to, from, item) {
+                if (!item || !item.id)
+                    return false;
+                
                 if (from.el && from.el.className === 'active-metadata-area')
                     return false;
 
@@ -470,15 +482,16 @@
 </script>
 
 <style lang="scss" scoped>
+
 .child-metadata-list-container {
     position: relative;
     margin-left: 42px;
     border-left: 1px solid var(--tainacan-gray2);
 
     section.field {
-        padding: 0.5em 1em 0 1em;
+        padding: 0.5em 1em 0 1em !important;
         position: absolute;
-        width: 100%;
+        width: 100% !important;
     }
     .children-icon {
         position: absolute;

src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php

@@ -30,10 +30,10 @@ class Relationship extends Metadata_Type {
 							<div class="dropdown-menu" style="">
 								<div class="dropdown-content">
 									<a class="dropdown-item is-hovered">
-										<span>'. __('Collection') . ' 2 <strong>'._('item') . ' 9</strong>9</span>
+										<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 2</strong>9</span>
 									</a>
 									<a class="dropdown-item">
-										<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 9</strong>9</span>
+										<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 4</strong>9</span>
 									</a>
 									<a class="dropdown-item">
 										<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 9</strong>8</span>

src/views/admin/js/store/modules/metadata/actions.js

@@ -422,6 +422,10 @@ export const moveMetadatumDown = ({ commit }, { index, sectionIndex }) => {
     commit('moveMetadatumDown', { index, sectionIndex });
 }
 
+export const moveMetadatum = ({ commit }, { newIndex, oldIndex, sectionIndex }) => {
+    commit('moveMetadatum', { newIndex, oldIndex, sectionIndex });
+}
+
 // METADATA SECTION METADATA LIST
 export const fetchMetadataSectionMetadata = ({commit}, { collectionId , metadataSectionId }) => {
     return new Promise((resolve, reject) => {

src/views/admin/js/store/modules/metadata/mutations.js

@@ -187,7 +187,6 @@ export const deleteMetadatumInsideMetadataSection = (state, metadatum) => {
                 const existingIndex = existingParentChildrenObject.findIndex((aMetadatum) => aMetadatum.id == metadatum.id);
                 if (existingIndex >= 0)
                     existingParentChildrenObject.splice(existingIndex, 1);
-                
                 existingParent.metadata_type_options.children_objects = existingParentChildrenObject;
                 
                 metadataSection['metadata_object_list'].splice(existingParentIndex, 1, existingParent); 
@@ -240,4 +239,8 @@ export const moveMetadatumUp = (state, { index, sectionIndex }) => {
 
 export const moveMetadatumDown = (state, { index, sectionIndex }) => {
     state.metadataSections[sectionIndex].metadata_object_list.splice(index + 1, 0, state.metadataSections[sectionIndex].metadata_object_list.splice(index, 1)[0]);
+}
+
+export const moveMetadatum = (state, { newIndex, oldIndex, sectionIndex }) => {
+    state.metadataSections[sectionIndex].metadata_object_list.splice(newIndex, 0, state.metadataSections[sectionIndex].metadata_object_list.splice(oldIndex, 1)[0]);
 }

src/views/admin/pages/lists/filters-page.vue

@@ -644,6 +644,7 @@ export default {
                 case 'remove':
                     this.removeFilter(this.activeFiltersList[$event.oldIndex]);
                     break;
+                case 'change':
                 case 'update': {
                     const newActiveFiltersList = JSON.parse(JSON.stringify(this.activeFiltersList));
                     const element = newActiveFiltersList.splice($event.oldIndex, 1)[0];
@@ -710,9 +711,8 @@ export default {
             this.activeFiltersList.splice(this.newFilterIndex, 1);
         },
         handleChangeOnMetadata($event) {
-            if ($event.removed) {
+            if ( $event.type == 'removed' )
                 this.oldMetadatumIndex = $event.removed.oldIndex;
-            }
         },
         updateFiltersOrder() {
             let filtersOrder = [];
@@ -1124,6 +1124,12 @@ export default {
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
+                    -webkit-touch-callout: none;
+                    -webkit-user-select: none;
+                    -khtml-user-select: none;
+                    -moz-user-select: none;
+                    -ms-user-select: none;
+                    user-select: none;
                 }
                 .not-saved {
                     font-style: italic;

src/views/admin/pages/lists/metadata-page.vue

@@ -360,6 +360,12 @@ export default {
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
+                    -webkit-touch-callout: none;
+                    -webkit-user-select: none;
+                    -khtml-user-select: none;
+                    -moz-user-select: none;
+                    -ms-user-select: none;
+                    user-select: none;
                 }
                 .not-saved {
                     font-style: italic;