First steps to allow multiple children compound to be displayed at the same time. #17.

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

@@ -23,7 +23,6 @@
                     v-model="activeMetadatumList"
                     class="active-metadata-area"
                     @change="handleChange($event)"
-                    :class="{'metadata-area-receive': isDraggingFromAvailable}"
                     :group="{ name:'metadata', pull: false, put: true }"
                     :sort="(openedMetadatumId == '' || openedMetadatumId == undefined) && !isRepositoryLevel"
                     :handle="'.handle'"
@@ -240,7 +239,6 @@ export default {
     data(){           
         return {
             collectionId: '',
-            isDraggingFromAvailable: false,
             isLoadingMetadatumTypes: true,
             isLoadingMetadata: false,
             isUpdatingMetadataOrder: false,

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

@@ -1,33 +1,31 @@
 <template>
     <div class="child-metadata-list-container">    
-        
+        <span class="icon children-icon not-sortable-item">
+            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-nextlevel"/>
+        </span> 
+        <section 
+                v-if="childrenMetadata.length <= 0"
+                class="field is-grouped-centered section not-sortable-item">
+            <div class="content has-text-gray has-text-centered">
+                <p>
+                    <span class="icon">
+                        <i class="tainacan-icon tainacan-icon-18px tainacan-icon-metadata"/>
+                    </span>
+                </p>
+                <p>{{ $i18n.get('info_create_child_metadata') }}</p>
+            </div>
+        </section>    
         <draggable 
                 v-model="childrenMetadata"
                 class="active-metadata-area child-metadata-area"
                 @change="handleChange"
-                :class="{'metadata-area-receive': isDraggingFromAvailable}"
                 :group="{ name:'metadata', pull: false, put: true }"
                 :sort="(openedMetadatumId == '' || openedMetadatumId == undefined) && !isRepositoryLevel"
                 :handle="'.handle'"
                 ghost-class="sortable-ghost"
                 chosen-class="sortable-chosen"
                 filter=".not-sortable-item"
-                :animation="250">
-            <span class="icon children-icon not-sortable-item">
-                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-nextlevel"/>
-            </span> 
-            <section 
-                    v-if="childrenMetadata.length <= 0"
-                    class="field is-grouped-centered section not-sortable-item">
-                <div class="content has-text-gray has-text-centered">
-                    <p>
-                        <span class="icon">
-                            <i class="tainacan-icon tainacan-icon-18px tainacan-icon-metadata"/>
-                        </span>
-                    </p>
-                    <p>{{ $i18n.get('info_create_child_metadata') }}</p>
-                </div>
-            </section>     
+                :animation="250"> 
             <div 
                     class="active-metadatum-item"
                     :class="{
@@ -157,7 +155,6 @@
                                 :index="index"
                                 :original-metadatum="metadatum"
                                 :edited-metadatum="editForms[metadatum.id]"/>
-                        <pre> Metadadum Edition Form will go here.</pre>
                     </div>
                 </transition>
             </div>
@@ -181,7 +178,6 @@
         data() {
             return {
                 collectionId: '',
-                isDraggingFromAvailable: false,
                 isLoadingMetadata: false,
                 isUpdatingMetadataOrder: false,
                 openedMetadatumId: '',
@@ -194,10 +190,15 @@
         computed: {
             childrenMetadata: {
                 get() {
-                    return this.getChildrenMetadata();
+                    const allChildrenMetadata = this.getChildrenMetadata();
+                    
+                    if (allChildrenMetadata[this.parent])
+                        return allChildrenMetadata[this.parent];
+                    else
+                        return [];
                 },
                 set(value) {
-                    this.updateChildrenMetadata(value);
+                    this.updateChildrenMetadata(value, this.parent);
                 }
             }
         },
@@ -205,9 +206,10 @@
             '$route.query': {
                 handler(newQuery) {
                     if (newQuery.edit != undefined) {
+                        
                         let existingMetadataIndex = this.childrenMetadata.findIndex((metadatum) => metadatum && (metadatum.id == newQuery.edit));
                         if (existingMetadataIndex >= 0)
-                            this.editMetadatum(this.childrenMetadata[existingMetadataIndex])                        
+                            this.editMetadatum(this.childrenMetadata[existingMetadataIndex])                  
                     }
                 },
                 immediate: true
@@ -239,7 +241,7 @@
             }  
         },
         mounted() {
-            this.cleanChildrenMetadata();
+            this.cleanChildrenMetadata(this.parent);
             this.isLoadingMetadata = true;
             this.refreshMetadata();
         },
@@ -424,13 +426,23 @@
 <style lang="scss" scoped>
 .child-metadata-list-container{
     margin-left: 42px;
+
     section {
         padding: 1em 0.5em;
     }
+    .children-icon {
+        position: absolute;
+        left: -1.5em;
+
+        .icon {
+            color: var(--tainacan-info-color) !important;
+        }
+    }
+
     .child-metadata-area {
         padding: 0;
         margin: 0;
-        min-height: auto;
+        min-height: 42px;
         border-left: 1px solid var(--tainacan-gray2);
         font-size: 1em;
 
@@ -440,16 +452,6 @@
         .active-metadatum-item {
             margin-left: 0;
         }
-        .children-icon {
-            float: left;
-            position: relative;
-            left: -1.5em;
-            top: 0.25em;
-
-            .icon {
-                color: var(--tainacan-info-color) !important;
-            }
-        }
     }
 }
 </style>

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

@@ -67,7 +67,7 @@ export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, stat
                     commit('setSingleChildMetadatum', { metadatum: metadatum, index: newIndex });
                 else
                     commit('setSingleMetadatum', { metadatum: metadatum, index: newIndex });
-                resolve(res.data);
+                resolve(metadatum);
             })
             .catch(error => {
                 reject(error.response);
@@ -126,8 +126,8 @@ export const updateMetadata = ({commit}, metadata) => {
     commit('setMetadata', metadata);
 };
 
-export const updateChildrenMetadata = ({commit}, metadata) => {
-    commit('setChildrenMetadata', metadata);
+export const updateChildrenMetadata = ({commit}, { metadata, parent }) => {
+    commit('setChildrenMetadata', metadata, parent);
 };
 
 export const deleteMetadatum = ({commit}, {collectionId, metadatumId, isRepositoryLevel}) => {
@@ -158,8 +158,8 @@ export const cleanMetadata = ({commit}) => {
     commit('cleanMetadata');
 };
 
-export const cleanChildrenMetadata = ({commit}) => {
-    commit('cleanChildrenMetadata');
+export const cleanChildrenMetadata = ({commit}, parent) => {
+    commit('cleanChildrenMetadata', parent );
 };
 
 export const updateCollectionMetadataOrder = ({ commit }, {collectionId, metadataOrder}) => {

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

@@ -4,7 +4,7 @@ import * as mutations from './mutations';
 
 const state = {
     metadata: [],
-    childrenMetadata: [],
+    childrenMetadata: {},
     metadatumTypes: [],
     metadatumMappers: [],
 };

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

@@ -8,9 +8,9 @@ export const deleteMetadatum = ( state, metadatum ) => {
 }
 
 export const deleteChildrenMetadatum = ( state, metadatum ) => {
-    let index = state.childrenMetadata.findIndex(deletedMetadatum => deletedMetadatum.id == metadatum.id);
+    let index = state.childrenMetadata[metadatum.parent].findIndex(deletedMetadatum => deletedMetadatum.id == metadatum.id);
     if (index >= 0) {
-        state.childrenMetadata.splice(index, 1);
+        state.childrenMetadata[metadatum.parent].splice(index, 1);
     }
 }
 
@@ -19,15 +19,16 @@ export const setSingleMetadatum = (state, {metadatum, index}) => {
 }
 
 export const setSingleChildMetadatum = (state, {metadatum, index}) => {
-    Vue.set( state.childrenMetadata, index, metadatum);
+    if (metadatum.id && metadatum.parent)
+        Vue.set( state.childrenMetadata[metadatum.parent], index, metadatum);
 }
 
 export const setMetadata = (state, metadata) => {
     state.metadata = metadata;
 }
 
-export const setChildrenMetadata = (state, metadata) => {
-    state.childrenMetadata = metadata;
+export const setChildrenMetadata = (state, metadata, parent) => {
+    Vue.set(state.childrenMetadata, parent, metadata);
 }
 
 export const updateMetadataOrderFromCollection = (state, metadataOrder) => {
@@ -50,6 +51,6 @@ export const cleanMetadata = (state) => {
     state.metadata = [];
 }
 
-export const cleanChildrenMetadata = (state) => {
-    state.childrenMetadata = [];
+export const cleanChildrenMetadata = (state, parent) => {
+    state.childrenMetadata[parent] = [];
 }