From 4755fe43b566f9e25c0c0e33549ca41cb6df88f8 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 18 Apr 2022 17:32:37 -0300
Subject: [PATCH] More updates do collection metadata list using sections.
 #184.

---
 .../lists/collection-metadata-list.vue        | 499 +++++++++---------
 .../components/lists/collections-list.vue     |   7 +
 .../components/lists/metadata-types-list.vue  |  10 +-
 .../lists/repository-metadata-list.vue        |   1 +
 src/views/admin/js/admin-main.js              |   3 +
 src/views/admin/js/event-bus-metadata-list.js |  19 +
 .../js/store/modules/metadata/actions.js      |   6 +-
 src/views/admin/pages/lists/metadata-page.vue |   4 +-
 src/views/tainacan-i18n.php                   |   1 +
 9 files changed, 280 insertions(+), 270 deletions(-)
 create mode 100644 src/views/admin/js/event-bus-metadata-list.js

diff --git a/src/views/admin/components/lists/collection-metadata-list.vue b/src/views/admin/components/lists/collection-metadata-list.vue
index 2dcdb24a3..b72c7023c 100644
--- a/src/views/admin/components/lists/collection-metadata-list.vue
+++ b/src/views/admin/components/lists/collection-metadata-list.vue
@@ -4,13 +4,13 @@
         <b-loading :active.sync="isLoadingMetadataSections"/>
 
         <div class="tainacan-form sub-header">
-            <h3>{{ $i18n.get('metadata') }}<span class="has-text-gray">{{ ( activeMetadatumList && activeMetadatumList.length ? (' (' + activeMetadatumList.length + ')') : '' ) }}</span></h3>
+            <h3>{{ $i18n.get('metadata') }}</h3>
 
-            <template v-if="activeMetadatumList && !isLoadingMetadata">
+            <template v-if="activeMetadataSectionsList">
                 <b-field class="header-item">
                     <b-dropdown
                             :mobile-modal="true"
-                            :disabled="activeMetadatumList.length <= 0"
+                            :disabled="activeMetadataSectionsList.length <= 0"
                             class="show metadata-options-dropdown"
                             aria-role="list"
                             trap-focus>
@@ -55,7 +55,7 @@
         <button
                 aria-controls="filters-items-list"
                 :aria-expanded="!collapseAll"
-                v-if="activeMetadatumList.length > 0"
+                v-if="activeMetadataSectionsList.length > 0"
                 class="link-style collapse-all"
                 @click="collapseAll = !collapseAll">
             <span class="icon">
@@ -69,7 +69,7 @@
         </button>
 
         <section 
-                v-if="activeMetadatumList.length <= 0 && !isLoadingMetadata"
+                v-if="activeMetadataSectionsList.length <= 0 && !isLoadingMetadataSections"
                 class="field is-grouped-centered section">
             <div class="content has-text-gray has-text-centered">
                 <p>
@@ -77,8 +77,7 @@
                         <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
                     </span>
                 </p>
-                <p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
-                <p>{{ $i18n.get('info_create_metadata' ) }}</p>
+                <p>{{ $i18n.get('info_there_is_no_metadata_section') }}</p>
             </div>
         </section>
 
@@ -87,7 +86,7 @@
                 v-model="activeMetadataSectionsList"
                 class="active-metadata-sections-area"
                 @change="handleSectionChange($event)"
-                :group="{ name:'metadata-sections', pull: false, put: true }"
+                :group="{ name:'metadata-sections', pull: false, put: [ 'metadata-sections' ] }"
                 :sort="(openedMetadataSectionId == '' || openedMetadataSectionId == undefined) && (openedMetadatumId == '' || openedMetadatumId == undefined)"
                 :handle="'.handle'"
                 ghost-class="sortable-ghost"
@@ -205,199 +204,215 @@
                     </div>
                 </div>
 
-                <!-- The Metadata list, inside each metadata section -->
-                <draggable 
-                        v-model="activeMetadatumList"
-                        class="active-metadata-area"
-                        @change="handleChange($event, metadataSection.id)"
-                        :group="{ name:'metadata', pull: false, put: true }"
-                        :sort="(openedMetadatumId == '' || openedMetadatumId == undefined)"
-                        :handle="'.handle'"
-                        ghost-class="sortable-ghost"
-                        chosen-class="sortable-chosen"
-                        filter=".not-sortable-item"
-                        :prevent-on-filter="false"
-                        :animation="250">
-                    <div    
-                            v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)"
-                            :key="metadatum.id"
-                            v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
-                        <div 
-                                class="active-metadatum-item"
-                                :class="{
-                                    'is-compact-item': !isCollapseOpen(metadatum.id),
-                                    'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
-                                    'not-focusable-item': openedMetadatumId == metadatum.id,
-                                    'disabled-metadatum': metadatum.enabled == false,
-                                    'inherited-metadatum': metadatum.inherited,
-                                    'child-metadatum': metadatum.parent > 0
-                                }">
-                            <div 
-                                    :ref="'metadatum-handler-' + metadatum.id"
-                                    class="handle">
-                                <span 
-                                        :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
-                                        v-tooltip="{
-                                            content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
-                                            autoHide: true,
-                                            popperClass: ['tainacan-tooltip', 'tooltip'],
-                                            placement: 'auto-start'
-                                        }"
-                                        class="icon grip-icon">
-                                    <svg 
-                                            xmlns="http://www.w3.org/2000/svg" 
-                                            height="24px"
-                                            viewBox="0 0 24 24"
-                                            width="24px"
-                                            fill="currentColor">
-                                        <path
-                                                d="M0 0h24v24H0V0z"
-                                                fill="transparent"/>
-                                        <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-                                    </svg>
-                                </span>
-                                <span 
-                                        v-tooltip="{
-                                            content: $i18n.get('label_view_metadata_details'),
-                                            autoHide: true,
-                                            popperClass: ['tainacan-tooltip', 'tooltip'],
-                                            placement: 'auto-start'
-                                        }"
-                                        @click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
-                                        class="gray-icon icon"
-                                        :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
-                                    <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
-                                </span>
+                <section 
+                        v-if="metadataSection.metadata_object_list && metadataSection.metadata_object_list.length <= 0"
+                        class="field is-grouped-centered section">
+                    <div class="content has-text-gray has-text-centered">
+                        <p>
+                            <span class="icon is-large">
+                                <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
+                            </span>
+                        </p>
+                        <p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
+                        <p>{{ $i18n.get('info_create_metadata' ) }}</p>
+                    </div>
+                </section>
 
-                                <span class="metadatum-name">
-                                        {{ metadatum.name }}
-                                </span>
-                                <span   
-                                        v-if="metadatum.id != undefined && metadatum.metadata_type_object"
-                                        class="label-details"
-                                        :class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
+                <!-- The Metadata list, inside each metadata section -->
+                <template v-if="metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list)">
+                    <draggable 
+                            v-model="metadataSection.metadata_object_list"
+                            class="active-metadata-area"
+                            @change="handleChange($event, sectionIndex)"
+                            :group="{ name:'metadata', pull: false, put: [ 'metadata' ] }"
+                            :sort="(openedMetadatumId == '' || openedMetadatumId == undefined)"
+                            :handle="'.handle'"
+                            ghost-class="sortable-ghost"
+                            chosen-class="sortable-chosen"
+                            filter=".not-sortable-item"
+                            :prevent-on-filter="false"
+                            :animation="250">
+                        <div    
+                                v-for="(metadatum, index) in metadataSection.metadata_object_list.filter((meta) => meta != undefined && meta.parent == 0)"
+                                :key="metadatum.id"
+                                v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
+                            <div 
+                                    class="active-metadatum-item"
+                                    :class="{
+                                        'is-compact-item': !isCollapseOpen(metadatum.id),
+                                        'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
+                                        'not-focusable-item': openedMetadatumId == metadatum.id,
+                                        'disabled-metadatum': metadatum.enabled == false,
+                                        'inherited-metadatum': metadatum.inherited,
+                                        'child-metadatum': metadatum.parent > 0
+                                    }">
+                                <div 
+                                        :ref="'metadatum-handler-' + metadatum.id"
+                                        class="handle">
                                     <span 
-                                            v-if="metadatum.required === 'yes'"
+                                            :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
                                             v-tooltip="{
-                                                content: $i18n.get('label_required'),
-                                                autoHide: true,
-                                                popperClass: ['tainacan-tooltip', 'tooltip'],
-                                                placement: 'auto-start'
-                                            }">
-                                        *&nbsp;
-                                    </span>
-                                    ({{ metadatum.metadata_type_object.name }}) 
-                                    <span 
-                                            v-if="metadatum.status === 'private'"
-                                            class="icon"
-                                            v-tooltip="{
-                                                content: $i18n.get('status_private'),
-                                                autoHide: true,
-                                                popperClass: ['tainacan-tooltip', 'tooltip'],
-                                                placement: 'auto-start'
-                                            }">
-                                        <i class="tainacan-icon tainacan-icon-private"/>
-                                    </span>
-                                    <span 
-                                            v-tooltip="{
-                                                content: (metadatum.collection_id == 'default') ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
+                                                content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
                                                 autoHide: true,
                                                 popperClass: ['tainacan-tooltip', 'tooltip'],
                                                 placement: 'auto-start'
                                             }"
-                                            class="icon icon-level-identifier">
-                                        <i 
-                                            :class="{ 
-                                                'has-text-turquoise5': metadatum.enabled, 
-                                                'has-text-gray3': !metadatum.enabled
-                                            }"
-                                            class="tainacan-icon tainacan-icon-collection" />
+                                            class="icon grip-icon">
+                                        <svg 
+                                                xmlns="http://www.w3.org/2000/svg" 
+                                                height="24px"
+                                                viewBox="0 0 24 24"
+                                                width="24px"
+                                                fill="currentColor">
+                                            <path
+                                                    d="M0 0h24v24H0V0z"
+                                                    fill="transparent"/>
+                                            <path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+                                        </svg>
                                     </span>
-                                </span>
-                                <span 
-                                        class="loading-spinner" 
-                                        v-if="metadatum.id == undefined"/>
-                                <span 
-                                        class="controls" 
-                                        v-if="metadatum.id !== undefined">
-                                    <b-switch 
-                                            :disabled="isUpdatingMetadataOrder"
-                                            size="is-small" 
-                                            :value="metadatum.enabled"
-                                            @input="onChangeEnable($event, index)"/>
-                                    <a 
-                                            v-if="metadatum.current_user_can_edit"
-                                            :style="{ visibility: 
-                                                    metadatum.collection_id != collectionId
-                                                    ? 'hidden' : 'visible'
-                                                }" 
-                                            @click.prevent="toggleMetadatumEdition(metadatum)">
+                                    <span 
+                                            v-tooltip="{
+                                                content: $i18n.get('label_view_metadata_details'),
+                                                autoHide: true,
+                                                popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                placement: 'auto-start'
+                                            }"
+                                            @click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
+                                            class="gray-icon icon"
+                                            :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
+                                        <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
+                                    </span>
+
+                                    <span class="metadatum-name">
+                                            {{ metadatum.name }}
+                                    </span>
+                                    <span   
+                                            v-if="metadatum.id != undefined && metadatum.metadata_type_object"
+                                            class="label-details"
+                                            :class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
+                                        <span 
+                                                v-if="metadatum.required === 'yes'"
+                                                v-tooltip="{
+                                                    content: $i18n.get('label_required'),
+                                                    autoHide: true,
+                                                    popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                    placement: 'auto-start'
+                                                }">
+                                            *&nbsp;
+                                        </span>
+                                        ({{ metadatum.metadata_type_object.name }}) 
+                                        <span 
+                                                v-if="metadatum.status === 'private'"
+                                                class="icon"
+                                                v-tooltip="{
+                                                    content: $i18n.get('status_private'),
+                                                    autoHide: true,
+                                                    popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                    placement: 'auto-start'
+                                                }">
+                                            <i class="tainacan-icon tainacan-icon-private"/>
+                                        </span>
                                         <span 
                                                 v-tooltip="{
-                                                    content: $i18n.get('edit'),
+                                                    content: (metadatum.collection_id == 'default') ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
                                                     autoHide: true,
                                                     popperClass: ['tainacan-tooltip', 'tooltip'],
                                                     placement: 'auto-start'
                                                 }"
-                                                class="icon">
-                                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
-                                        </span>
-                                    </a>
-                                    <a 
-                                            v-if="metadatum.current_user_can_delete"
-                                            :style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
-                                            @click.prevent="removeMetadatum(metadatum)">
-                                        <span
-                                                v-tooltip="{
-                                                    content: $i18n.get('delete'),
-                                                    autoHide: true,
-                                                    popperClass: ['tainacan-tooltip', 'tooltip'],
-                                                    placement: 'auto-start'
+                                                class="icon icon-level-identifier">
+                                            <i 
+                                                :class="{ 
+                                                    'has-text-turquoise5': metadatum.enabled, 
+                                                    'has-text-gray3': !metadatum.enabled
                                                 }"
-                                                class="icon">
-                                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                                class="tainacan-icon tainacan-icon-collection" />
                                         </span>
-                                    </a>
-                                </span>
+                                    </span>
+                                    <span 
+                                            class="loading-spinner" 
+                                            v-if="metadatum.id == undefined"/>
+                                    <span 
+                                            class="controls" 
+                                            v-if="metadatum.id !== undefined">
+                                        <b-switch 
+                                                :disabled="isUpdatingMetadataOrder"
+                                                size="is-small" 
+                                                :value="metadatum.enabled"
+                                                @input="onChangeEnable($event, index, sectionIndex)"/>
+                                        <a 
+                                                v-if="metadatum.current_user_can_edit"
+                                                :style="{ visibility: 
+                                                        metadatum.collection_id != collectionId
+                                                        ? 'hidden' : 'visible'
+                                                    }" 
+                                                @click.prevent="toggleMetadatumEdition(metadatum)">
+                                            <span 
+                                                    v-tooltip="{
+                                                        content: $i18n.get('edit'),
+                                                        autoHide: true,
+                                                        popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                        placement: 'auto-start'
+                                                    }"
+                                                    class="icon">
+                                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
+                                            </span>
+                                        </a>
+                                        <a 
+                                                v-if="metadatum.current_user_can_delete"
+                                                :style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
+                                                @click.prevent="removeMetadatum(metadatum, sectionIndex)">
+                                            <span
+                                                    v-tooltip="{
+                                                        content: $i18n.get('delete'),
+                                                        autoHide: true,
+                                                        popperClass: ['tainacan-tooltip', 'tooltip'],
+                                                        placement: 'auto-start'
+                                                    }"
+                                                    class="icon">
+                                                <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
+                                            </span>
+                                        </a>
+                                    </span>
+                                </div>
+                                <transition name="form-collapse">
+                                    <metadatum-details 
+                                            v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
+                                            :metadatum="metadatum" />
+                                </transition>
                             </div>
-                            <transition name="form-collapse">
-                                <metadatum-details 
-                                        v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
-                                        :metadatum="metadatum" />
-                            </transition>
-                        </div>
-                        
-                        <!-- Child metadata list, inside each compound metadata -->
-                        <child-metadata-list
-                                v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
-                                :parent.sync="activeMetadatumList[index]"
-                                :metadata-name-filter-string="metadataNameFilterString"
-                                :metadata-type-filter-options="metadataTypeFilterOptions"
-                                :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
-                                :is-parent-multiple="metadatum.multiple == 'yes'"
-                                :is-repository-level="false"
-                                :collapse-all="collapseAll" />
-                        
-                        <!-- Metadata edition form, for each metadata -->
-                        <b-modal 
-                                @close="onEditionCanceled()"
-                                :active="openedMetadatumId == metadatum.id"
-                                trap-focus
-                                aria-modal
-                                aria-role="dialog"
-                                custom-class="tainacan-modal"
-                                :close-button-aria-label="$i18n.get('close')">
-                            <metadatum-edition-form
-                                    :collection-id="collectionId"
-                                    :original-metadatum="metadatum"
+                            
+                            <!-- Child metadata list, inside each compound metadata -->
+                            <child-metadata-list
+                                    v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
+                                    :parent="metadatum"
+                                    :metadata-name-filter-string="metadataNameFilterString"
+                                    :metadata-type-filter-options="metadataTypeFilterOptions"
+                                    :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
+                                    :is-parent-multiple="metadatum.multiple == 'yes'"
                                     :is-repository-level="false"
-                                    @onEditionFinished="onEditionFinished()"
-                                    @onEditionCanceled="onEditionCanceled()"
-                                    :index="index" />
-                        </b-modal>
+                                    :collapse-all="collapseAll" />
+                            
+                            <!-- Metadata edition form, for each metadata -->
+                            <b-modal 
+                                    @close="onEditionCanceled()"
+                                    :active="openedMetadatumId == metadatum.id"
+                                    trap-focus
+                                    aria-modal
+                                    aria-role="dialog"
+                                    custom-class="tainacan-modal"
+                                    :close-button-aria-label="$i18n.get('close')">
+                                <metadatum-edition-form
+                                        :collection-id="collectionId"
+                                        :original-metadatum="metadatum"
+                                        :is-repository-level="false"
+                                        @onEditionFinished="onEditionFinished()"
+                                        @onEditionCanceled="onEditionCanceled()"
+                                        :index="index" />
+                            </b-modal>
 
-                    </div>
-                </draggable><!-- End of .active-metadata-area -->
+                        </div>
+                    </draggable><!-- End of .active-metadata-area -->
+                </template>
                 
                 <!-- Metadata Section edition form, for each metadata section -->
                 <b-modal 
@@ -443,7 +458,6 @@ export default {
     data() {
         return {
             collectionId: '',
-            isLoadingMetadata: false,
             isLoadingMetadataSections: false,
             isUpdatingMetadataOrder: false,
             openedMetadatumId: '',
@@ -460,14 +474,6 @@ export default {
         hasSomeMetadataTypeFilterApplied() {
             return this.metadataTypeFilterOptions.length && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
         },
-        activeMetadatumList: {
-            get() {
-                return this.getMetadata();
-            },
-            set(value) {
-                this.updateMetadata(value);
-            }
-        },
         activeMetadataSectionsList: {
             get() {
                 return this.getMetadataSections();
@@ -481,33 +487,44 @@ export default {
         '$route.query': {
             handler(newQuery) {
                 if (newQuery.edit != undefined) {
-                    let existingMetadataIndex = this.activeMetadatumList.findIndex((metadatum) => metadatum && (metadatum.id == newQuery.edit));
-                    if (existingMetadataIndex >= 0)
-                        this.editMetadatum(this.activeMetadatumList[existingMetadataIndex])                        
+                    let existingMetadataIndex = -1;
+                    let existingMetadataSectionIndex = -1;
+
+                    for (let i = 0; i < this.activeMetadataSectionsList.length; i++) {
+                        existingMetadataIndex = this.activeMetadataSectionsList[i].metadata_object_list.findIndex((metadatum) => metadatum && (metadatum.id == newQuery.edit));
+                        if (existingMetadataIndex >= 0) {
+                            existingMetadataSectionIndex = i;
+                            break;
+                        }
+                    }
+                    if (existingMetadataIndex >= 0 && existingMetadataSectionIndex >= 0)
+                        this.editMetadatum(newQuery.edit);
+
                 } else if (newQuery.sectionEdit != undefined) {
                     let existingMetadataSectionIndex = this.activeMetadataSectionsList.findIndex((metadataSection) => metadataSection && (metadataSection.id == newQuery.sectionEdit));
                     if (existingMetadataSectionIndex >= 0)
-                        this.editMetadataSection(this.activeMetadataSectionsList[existingMetadataSectionIndex])                        
+                        this.editMetadataSection(newQuery.sectionEdit);                        
                 }
             },
             immediate: true
         },
         collapseAll(isCollapsed) {
-            this.activeMetadatumList.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
+            this.activeMetadataSectionsList.forEach((metadataSection) => {
+                if ( metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list) )
+                    metadataSection.metadata_object_list.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
+            });
         }
     },
     mounted() {
-
-        this.cleanMetadata();
         this.cleanMetadataSections();
+        
+        this.$eventBusMetadataList.$on('addMetadatumViaButton', this.addMetadatumViaButton);
+        this.$eventBusMetadataList.$on('addMetadataSectionViaButton', this.addMetadataSectionViaButton);
 
         this.collectionId = this.$route.params.collectionId;
         this.isLoadingMetadataSections = true;
-        this.fetchMetadataSections({ collectionId: this.collectionId })
+        this.fetchMetadataSections({ collectionId: this.collectionId, isContextEdit: true })
             .then(() => {
-                this.activeMetadataSectionsList.forEach((aMetadataSection) => {
-                    this.refreshMetadata(aMetadataSection);
-                });
                 this.isLoadingMetadataSections = false;
             })
             .catch((error) => {
@@ -522,7 +539,6 @@ export default {
     },
     methods: {
         ...mapActions('metadata', [
-            'fetchMetadata',
             'sendMetadatum',
             'sendMetadataSection',
             'deleteMetadatum',
@@ -547,23 +563,23 @@ export default {
                 this.updateMetadataSectionsOrder();
             }
         },
-        handleChange(event, metadataSectionId) {
+        handleChange(event, sectionIndex) {
             if (event.added)
-                this.addNewMetadatum(event.added.element, event.added.newIndex, metadataSectionId);
+                this.addNewMetadatum(event.added.element, event.added.newIndex, sectionIndex);
             else if (event.removed)
-                this.removeMetadatum(event.removed.element);
+                this.removeMetadatum(event.removed.element, sectionIndex);
             else if (event.moved) {
-                this.updateMetadataOrder();
+                this.updateMetadataOrder(sectionIndex);
             }
         },
-        updateMetadataOrder() {
+        updateMetadataOrder(sectionIndex) {
             let metadataOrder = [];
-            for (let metadatum of this.activeMetadatumList)
+            for (let metadatum of this.activeMetadataSectionsList[sectionIndex].metadata_object_list)
                 if (metadatum != undefined)
                     metadataOrder.push({ 'id': metadatum.id, 'enabled': metadatum.enabled });
             
             this.isUpdatingMetadataOrder = true;
-            this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder })
+            this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder, metadataSectionId: this.activeMetadataSectionsList[sectionIndex].id  })
                 .then(() => this.isUpdatingMetadataOrder = false)
                 .catch(() => this.isUpdatingMetadataOrder = false);
         },
@@ -578,15 +594,15 @@ export default {
                 .then(() => this.isUpdatingMetadataSectionsOrder = false)
                 .catch(() => this.isUpdatingMetadataSectionsOrder = false);
         },
-        onChangeEnable($event, index) {
+        onChangeEnable($event, index, sectionIndex) {
             let metadataOrder = [];
-            for (let metadatum of this.activeMetadatumList)
+            for (let metadatum of this.activeMetadataSectionsList[sectionIndex].metadata_object_list)
                 if (metadatum != undefined)
                     metadataOrder.push({'id': metadatum.id, 'enabled': metadatum.enabled});
             
             metadataOrder[index].enabled = $event;
             this.isUpdatingMetadataOrder = true;
-            this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder })
+            this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder, metadataSectionId: this.activeMetadataSectionsList[sectionIndex].id })
                 .then(() => this.isUpdatingMetadataOrder = false)
                 .catch(() => this.isUpdatingMetadataOrder = false);
         },
@@ -603,8 +619,7 @@ export default {
                 .catch(() => this.isUpdatingMetadataSectionsOrder = false);
         },
         addMetadatumViaButton(metadatumType) {
-            let lastIndex = this.activeMetadatumList.length;
-            this.addNewMetadatum(metadatumType, lastIndex);
+            this.addNewMetadatum(metadatumType, this.activeMetadataSectionsList[0].metadata_object_list.length, 0);
             
             // Higlights the clicked metadatum
             this.hightlightedMetadatum = metadatumType.name;
@@ -614,7 +629,7 @@ export default {
             let lastIndex = this.activeMetadataSectionsList.length;
             this.addNewMetadataSection(lastIndex);
         },
-        addNewMetadatum(newMetadatum, newIndex, metadataSectionId) {
+        addNewMetadatum(newMetadatum, newIndex, sectionIndex) {
             this.sendMetadatum({
                 collectionId: this.collectionId, 
                 name: newMetadatum.name, 
@@ -623,11 +638,11 @@ export default {
                 isRepositoryLevel: false, 
                 newIndex: newIndex,
                 parent: '0',
-                sectionId: metadataSectionId
+                sectionId: this.activeMetadataSectionsList[sectionIndex].id
             })
             .then((metadatum) => {
 
-                this.updateMetadataOrder();
+                this.updateMetadataOrder(sectionIndex);
 
                 this.toggleMetadatumEdition(metadatum)
                 this.hightlightedMetadatum = '';
@@ -652,7 +667,7 @@ export default {
                 this.$console.error(error);
             });
         },
-        removeMetadatum(removedMetadatum) {
+        removeMetadatum(removedMetadatum, sectionIndex) {
             this.$buefy.modal.open({
                 parent: this,
                 component: CustomDialog,
@@ -667,7 +682,7 @@ export default {
                                 isRepositoryLevel: false
                             })
                             .then(() => {
-                                this.updateMetadataOrder();
+                                this.updateMetadataOrder(sectionIndex);
                             })
                             .catch(() => {
                                 this.$console.log("Error deleting metadatum.")
@@ -708,11 +723,11 @@ export default {
         toggleMetadataSectionEdition(metadataSection) {
             this.$router.push({ query: { sectionEdit: metadataSection.id } });
         },
-        editMetadatum(metadatum) {
-            this.openedMetadatumId = metadatum.id;
+        editMetadatum(metadatumId) {
+            this.openedMetadatumId = metadatumId;
         },
-        editMetadataSection(metadataSection) {
-            this.openedMetadataSectionId = metadataSection.id;
+        editMetadataSection(metadataSectionId) {
+            this.openedMetadataSectionId = metadataSectionId;
         },
         onEditionFinished() {
             this.openedMetadatumId = '';
@@ -730,42 +745,6 @@ export default {
             this.openedMetadataSectionId = '';
             this.$router.push({ query: {}});
         },
-        refreshMetadata(metadataSection) {
-            
-            this.isLoadingMetadata = true;
-
-            // Cancels previous Request
-            if (this.metadataSearchCancel != undefined)
-                this.metadataSearchCancel.cancel('Metadata search Canceled.');
-
-            this.fetchMetadata({
-                collectionId: this.collectionId, 
-                isRepositoryLevel: false, 
-                isContextEdit: true, 
-                includeDisabled: true,
-                parent: '0',
-                includeOptionsAsHtml: true
-            }).then((resp) => {
-                    resp.request
-                        .then(() => {
-                            this.isLoadingMetadata = false;
-                            
-                            // Checks URL as router watcher would not wait for list to load
-                            if (this.$route.query.edit != undefined) {
-                                let existingMetadataIndex = this.activeMetadatumList.findIndex((metadatum) => metadatum.id == this.$route.query.edit);
-                                if (existingMetadataIndex >= 0)
-                                    this.editMetadatum(this.activeMetadatumList[existingMetadataIndex]);                        
-                            }
-                        })
-                        .catch(() => {
-                            this.isLoadingMetadata = false;
-                        });
-
-                    // Search Request Token for cancelling
-                    this.metadataSearchCancel = resp.source;
-                })
-                .catch(() => this.isLoadingMetadata = false);  
-        },
         filterByMetadatumName(metadatum) {
             if (metadatum.metadata_type_object && 
                 metadatum.metadata_type_object.component == 'tainacan-compound' &&
diff --git a/src/views/admin/components/lists/collections-list.vue b/src/views/admin/components/lists/collections-list.vue
index 54502ac35..4e82a31ed 100644
--- a/src/views/admin/components/lists/collections-list.vue
+++ b/src/views/admin/components/lists/collections-list.vue
@@ -155,6 +155,7 @@
                                     v-tooltip="{
                                         content: $i18n.get('status_' + collection.status),
                                         autoHide: true,
+                                        html: true,
                                         popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
                                         placement: 'auto-start'
                                     }">
@@ -193,6 +194,7 @@
                                         },
                                         content: collection.name,
                                         autoHide: false,
+                                        html: true,
                                         popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
                                         placement: 'auto-start'
                                     }">
@@ -213,6 +215,7 @@
                                         },
                                         content: (collection.description != undefined && collection.description != '') ? collection.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`,
                                         autoHide: false,
+                                        html: true,
                                         popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
                                         placement: 'auto-start'
                                     }" 
@@ -233,6 +236,7 @@
                                         },
                                         content: collection.modification_date,
                                         autoHide: false,
+                                        html: true,
                                         popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
                                         placement: 'auto-start'
                                     }" 
@@ -253,6 +257,7 @@
                                         },
                                         content: collection.creation_date,
                                         autoHide: false,
+                                        html: true,
                                         popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
                                         placement: 'auto-start'
                                     }" 
@@ -273,6 +278,7 @@
                                         },
                                         content: collection.author_name,
                                         autoHide: false,
+                                        html: true,
                                         popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
                                         placement: 'auto-start'
                                     }" 
@@ -294,6 +300,7 @@
                                         },
                                         content: getTotalItemsDetailed(collection.total_items),
                                         autoHide: false,
+                                        html: true,
                                         popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
                                         placement: 'auto-start'
                                     }" 
diff --git a/src/views/admin/components/lists/metadata-types-list.vue b/src/views/admin/components/lists/metadata-types-list.vue
index 04f9fef3e..b50a63ebc 100644
--- a/src/views/admin/components/lists/metadata-types-list.vue
+++ b/src/views/admin/components/lists/metadata-types-list.vue
@@ -67,7 +67,7 @@
                     v-if="!isRepositoryLevel" 
                     v-model="availableMetadataSectionsList"
                     :sort="false" 
-                    :group="{ name:'metadata', pull: 'clone', put: false, revertClone: true }"
+                    :group="{ name:'metadata-sections', pull: 'clone', put: false, revertClone: true }"
                     drag-class="sortable-drag">
                 <div 
                         :id="metadataSection.id"
@@ -167,11 +167,11 @@ export default {
         ...mapGetters('metadata',[
             'getMetadatumTypes'
         ]),
-        addMetadatumViaVutton(metadatumType) {
-            this.$emit('onAddMetadatumTypeViaButton', metadatumType);
+        addMetadatumViaButton(metadatumType) {
+            this.$eventBusMetadataList.onAddMetadatumViaButton(metadatumType);
         },
-        addMetadataSectionViaVutton() {
-            this.$emit('onAddMetadataSectionTypeViaButton');
+        addMetadataSectionViaButton() {
+            this.$eventBusMetadataList.onAddMetadataSectionViaButton();
         },
         getPreviewTemplateContent(metadatum) {
             return `<div class="metadata-type-preview tainacan-form">
diff --git a/src/views/admin/components/lists/repository-metadata-list.vue b/src/views/admin/components/lists/repository-metadata-list.vue
index 7cb8ef366..1ebd59597 100644
--- a/src/views/admin/components/lists/repository-metadata-list.vue
+++ b/src/views/admin/components/lists/repository-metadata-list.vue
@@ -336,6 +336,7 @@ export default {
     mounted() {
         this.cleanMetadata();
         this.refreshMetadata();
+        this.$eventBusMetadataList.$on('addMetadatumViaButton', this.addMetadatumViaButton);
     },
     beforeDestroy() {
         // Cancels previous Request
diff --git a/src/views/admin/js/admin-main.js b/src/views/admin/js/admin-main.js
index b4cb809db..8bf92e3fb 100644
--- a/src/views/admin/js/admin-main.js
+++ b/src/views/admin/js/admin-main.js
@@ -88,6 +88,7 @@ import store from './store/store'
 import router from './router'
 import eventBusSearch from './event-bus-search';
 import eventBusTermsList from './event-bus-terms-list.js';
+import eventBusMetadataList from './event-bus-metadata-list.js';
 import { 
     I18NPlugin,
     UserPrefsPlugin,
@@ -252,7 +253,9 @@ export default (element) => {
             Vue.component('draggable', draggable);
             Vue.component('tainacan-title', TainacanTitle);
 
+            // Event bus are needed to facilate comunication between child-parent-child components
             Vue.use(eventBusTermsList, {});
+            Vue.use(eventBusMetadataList, {});
             Vue.use(eventBusSearch, { store: store, router: router});
 
             // Changing title of pages
diff --git a/src/views/admin/js/event-bus-metadata-list.js b/src/views/admin/js/event-bus-metadata-list.js
new file mode 100644
index 000000000..f84a8b898
--- /dev/null
+++ b/src/views/admin/js/event-bus-metadata-list.js
@@ -0,0 +1,19 @@
+export default {
+
+    install(Vue, options = {}) {
+
+        Vue.prototype.$eventBusMetadataList = new Vue({
+
+            data: {
+            },
+            methods: {
+                onAddMetadatumViaButton(metadataType) {
+                    this.$emit('addMetadatumViaButton', metadataType);
+                },
+                onAddMetadataSectionViaButton() {
+                    this.$emit('addMetadataSectionViaButton');
+                }
+            }
+        });
+    }
+}
\ No newline at end of file
diff --git a/src/views/admin/js/store/modules/metadata/actions.js b/src/views/admin/js/store/modules/metadata/actions.js
index 743610c68..853f20a49 100644
--- a/src/views/admin/js/store/modules/metadata/actions.js
+++ b/src/views/admin/js/store/modules/metadata/actions.js
@@ -93,6 +93,7 @@ export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, stat
         axios.tainacan.post(endpoint, params)
             .then(res => {
                 let metadatum = res.data;
+
                 commit('setSingleMetadatum', { metadatum: metadatum, index: newIndex, isRepositoryLevel: isRepositoryLevel });
 
                 resolve(metadatum);
@@ -281,9 +282,10 @@ export const updateMetadatumMappers = ({commit}, metadatumMappers) => {
 };
 
 // METADATA SECTIONS
-export const fetchMetadataSections = ({commit}, {collectionId}) => {
+export const fetchMetadataSections = ({commit}, { collectionId, isContextEdit }) => {
+
     return new Promise((resolve, reject) => {
-        axios.tainacan.get('/collection/' + collectionId + '/metadata-sections')
+        axios.tainacan.get('/collection/' + collectionId + '/metadata-sections' + (isContextEdit ? '?context=edit' : ''))
             .then((res) => {
                 let metadataSections = res.data;
                 commit('setMetadataSections', metadataSections);
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index bc9dbd6c3..be26271dd 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -31,8 +31,6 @@
                         <metadata-types-list 
                                 :hightlighted-metadatum="hightlightedMetadatum"
                                 :is-repository-level="isRepositoryLevel"
-                                @onAddMetadatumTypeViaButton="addMetadatumViaButton"
-                                @onAddMetadataSectionTypeViaButton="addMetadataSectionViaButton"
                                 @onFinishedLoadingMetadataTypes="createMetadataTypeFilterOptions"/>
                     </div>
                 </b-tab-item>
@@ -95,7 +93,7 @@ export default {
             this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('metadata') }]);
     },
     methods: {
-        ...mapGetters('collections',[
+        ...mapGetters('collection',[
             'getCollection'
         ]),
         ...mapGetters('metadata',[
diff --git a/src/views/tainacan-i18n.php b/src/views/tainacan-i18n.php
index d2d01a796..b26c8d97d 100644
--- a/src/views/tainacan-i18n.php
+++ b/src/views/tainacan-i18n.php
@@ -804,6 +804,7 @@ return apply_filters( 'tainacan-i18n', [
 	'info_logs_before'                               => __( 'Before', 'tainacan' ),
 	'info_logs_after'                                => __( 'After', 'tainacan' ),
 	'info_there_is_no_metadatum'                     => __( 'There is no metadata here yet.', 'tainacan' ),
+	'info_there_is_no_metadata_section'              => __( 'There is no metadata section here yet.', 'tainacan' ),
 	'info_there_is_no_filter'                        => __( 'There is no filter here yet.', 'tainacan' ),
 	'info_changes'                                   => __( 'Changes', 'tainacan' ),
 	'info_possible_external_sources'                 => __( 'Possible external sources: CSV, Instagram, YouTube, etc.', 'tainacan' ),