From 0ef39e2c357e300b827f01594cddce589d2f94ad Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 7 Jul 2023 19:58:26 -0300
Subject: [PATCH] First patch of refactor to avoid v-if and v-for in the same
 tag. #794

---
 .eslintrc.js                                  |   2 +-
 .../edition/collection-edition-form.vue       |   8 +-
 .../edition/importer-edition-form.vue         |   5 +-
 .../edition/importer-mapping-form.vue         |  27 +-
 .../filter-types/checkbox/Checkbox.vue        |  67 +--
 .../filter-types/taxonomy/Checkbox.vue        |  75 ++-
 .../lists/collections-home-list.vue           |   1 -
 .../admin/components/lists/items-list.vue     | 536 +++++++++---------
 8 files changed, 373 insertions(+), 348 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 202a3f642..436951c26 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,7 +23,7 @@ module.exports = {
         'vue/multiline-html-element-content-newline': 'off',
         'vue/prop-name-casing': 'off',
         'vue/no-confusing-v-for-v-if': 'off',
-        'vue/no-use-v-if-with-v-for': 'off',
+        'vue/no-use-v-if-with-v-for': 'warn',
         'vue/multi-word-component-names': 'off',
         'vue/require-default-prop': 'off',
         'vue/no-v-text-v-html-on-component': 'off'
diff --git a/src/views/admin/components/edition/collection-edition-form.vue b/src/views/admin/components/edition/collection-edition-form.vue
index 00ba85781..833b0ae40 100644
--- a/src/views/admin/components/edition/collection-edition-form.vue
+++ b/src/views/admin/components/edition/collection-edition-form.vue
@@ -196,8 +196,7 @@
                                     v-model="form.default_view_mode"
                                     @focus="clearErrors('default_view_mode')">
                                 <option
-                                        v-for="(viewMode, index) of form.enabled_view_modes"
-                                        v-if="registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen != true"
+                                        v-for="(viewMode, index) of validDefaultViewModes"
                                         :key="index"
                                         :value="viewMode">
                                     {{ registeredViewModes[viewMode].label }}
@@ -761,7 +760,10 @@ export default {
     computed: {
         ...mapGetters('metadata', {
             'metadata': 'getMetadata'
-        })
+        }),
+        validDefaultViewModes() {
+            return Array.isArray(this.form.enabled_view_modes) ? this.form.enabled_view_modes.filter((aViewMode) => this.registeredViewModes[aViewMode] != undefined && this.registeredViewModes[aViewMode].full_screen == false ) : [];
+        }
     },
     watch: {
         'form.hide_items_thumbnail_on_lists' (newValue) {
diff --git a/src/views/admin/components/edition/importer-edition-form.vue b/src/views/admin/components/edition/importer-edition-form.vue
index f9f3f977a..289de0810 100644
--- a/src/views/admin/components/edition/importer-edition-form.vue
+++ b/src/views/admin/components/edition/importer-edition-form.vue
@@ -115,7 +115,6 @@
                                     :placeholder="$i18n.get('instruction_select_a_target_collection')">
                                 <option
                                         v-for="collection of collections"
-                                        v-if="collection.current_user_can_edit_items"
                                         :key="collection.id"
                                         :value="collection.id">{{ collection.name }}
                                 </option>
@@ -437,7 +436,9 @@ export default {
             this.fetchAllCollectionNames()
                 .then((resp) => {
                     resp.request.then((collections) => {
-                        this.collections = collections;
+                        this.collections = Array.isArray(collections)? collections.filter((collection) => {
+                            return collection.current_user_can_edit_items;
+                        }) : [];
                         this.isFetchingCollections = false;
                     })
                     .catch((error) => {
diff --git a/src/views/admin/components/edition/importer-mapping-form.vue b/src/views/admin/components/edition/importer-mapping-form.vue
index e90efc2d9..dcdd88bc5 100644
--- a/src/views/admin/components/edition/importer-mapping-form.vue
+++ b/src/views/admin/components/edition/importer-mapping-form.vue
@@ -109,10 +109,9 @@
                               {{ $i18n.get('label_create_repository_metadata') }}
                             </option>
                             <option
-                                    v-for="(collectionMetadatum, metadatumIndex) of collectionMetadata"
+                                    v-for="(collectionMetadatum, metadatumIndex) of collectionNonChildMetadata"
                                     :key="metadatumIndex"
                                     :value="collectionMetadatum.id"
-                                    v-if="!checkIfMetadatumIsChild(collectionMetadatum)"
                                     :disabled="checkIfMetadatumIsAvailable(collectionMetadatum.id)">
                                 <span class="metadatum-name">
                                     {{ collectionMetadatum.name }}
@@ -141,10 +140,9 @@
                                 {{ $i18n.get('label_create_metadatum') }}
                             </option>
                             <option
-                                    v-for="(collectionMetadatum, metadatumIndex) of collectionMetadata"
+                                    v-for="(collectionMetadatum, metadatumIndex) of collectionNonChildMetadata"
                                     :key="metadatumIndex"
                                     :value="collectionMetadatum.id"
-                                    v-if="!checkIfMetadatumIsChild(collectionMetadatum)"
                                     :disabled="!checkIfMetadatumIsCompound(collectionMetadatum) || checkIfMetadatumIsAvailable(collectionMetadatum.id)">
                                 <span class="metadatum-name">
                                     {{ collectionMetadatum.name }}
@@ -191,15 +189,15 @@
                     </template>
                     <p v-if="collectionMetadata == undefined || collectionMetadata.length <= 0">{{ $i18n.get('info_select_collection_to_list_metadata') }}</p>
                 </div>
-                <div
-                        v-if="importerSourceInfo.source_special_fields && importerSourceInfo.source_special_fields.length > 0"
-                        class="source-metadatum"
-                        :key="specialFieldIndex"
-                        v-for="(specialField, specialFieldIndex) of importerSourceInfo.source_special_fields">
-                    <p style="font-style: italic">{{ specialField }}</p>
-                    <p>{{ $i18n.get('info_special_fields_mapped_default') }}</p>
-                </div>
-                
+                <template v-if="importerSourceInfo.source_special_fields">
+                    <div
+                            v-for="(specialField, specialFieldIndex) of importerSourceInfo.source_special_fields"
+                            :key="specialFieldIndex"
+                            class="source-metadatum">
+                        <p style="font-style: italic">{{ specialField }}</p>
+                        <p>{{ $i18n.get('info_special_fields_mapped_default') }}</p>
+                    </div>
+                </template>                
                 <p v-if="importerSourceInfo.source_metadata.length <= 0">{{ $i18n.get('info_no_metadata_source_file') }}<br></p>
                 
                 <p v-if="(!importerSourceInfo.source_special_fields || importerSourceInfo.source_special_fields.length <= 0)">{{ $i18n.get('info_no_special_fields_available') }}<br></p>
@@ -419,6 +417,9 @@ export default {
     computed: {
         metadatumTypes() {
             return this.getMetadatumTypes();
+        },
+        collectionNonChildMetadata() {
+            return Array.isArray(this.collectionMetadata) ? this.collectionMetadata.filter((metadatum) => !this.checkIfMetadatumIsChild(metadatum)) : [];
         }
     },
     created() {
diff --git a/src/views/admin/components/filter-types/checkbox/Checkbox.vue b/src/views/admin/components/filter-types/checkbox/Checkbox.vue
index 6785ce2f6..4c6744a54 100644
--- a/src/views/admin/components/filter-types/checkbox/Checkbox.vue
+++ b/src/views/admin/components/filter-types/checkbox/Checkbox.vue
@@ -4,39 +4,40 @@
             :class="{ 'skeleton': isLoadingOptions && !filtersAsModal }"
             class="block">
         <template v-if="!filtersAsModal">
-            <div
-                    v-for="(option, index) in options.slice(0, filter.max_options)"
-                    v-if="!isLoadingOptions"
-                    :key="index"
-                    class="metadatum">
-                <label 
-                        v-if="index <= filter.max_options - 1"
-                        class="b-checkbox checkbox is-small">
-                    <input 
-                            v-model="selected"
-                            :value="option.value"
-                            @input="resetPage()"
-                            type="checkbox"> 
-                        <span class="check" /> 
-                        <span class="control-label">
-                            <span class="checkbox-label-text">{{ option.label }}</span> 
-                            <span 
-                                    v-if="option.total_items != undefined"
-                                    class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
-                        </span>
-                </label>
-                <button
-                        class="view-all-button link-style"
-                        v-if="option.showViewAllButton && index == options.slice(0, filter.max_options).length - 1"
-                        @click="openCheckboxModal(option.parent)"> 
-                    {{ $i18n.get('label_view_all') }}
-                </button>
-            </div>
-            <p 
-                    v-if="isLoadingOptions == false && options.length != undefined && options.length <= 0"
-                    class="no-options-placeholder">
-                {{ $i18n.get('info_no_options_available_filtering') }}
-            </p>
+            <template v-if="!isLoadingOptions">
+                <div
+                        v-for="(option, index) in options.slice(0, filter.max_options)"
+                        :key="index"
+                        class="metadatum">
+                    <label 
+                            v-if="index <= filter.max_options - 1"
+                            class="b-checkbox checkbox is-small">
+                        <input 
+                                v-model="selected"
+                                :value="option.value"
+                                @input="resetPage()"
+                                type="checkbox"> 
+                            <span class="check" /> 
+                            <span class="control-label">
+                                <span class="checkbox-label-text">{{ option.label }}</span> 
+                                <span 
+                                        v-if="option.total_items != undefined"
+                                        class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
+                            </span>
+                    </label>
+                    <button
+                            class="view-all-button link-style"
+                            v-if="option.showViewAllButton && index == options.slice(0, filter.max_options).length - 1"
+                            @click="openCheckboxModal(option.parent)"> 
+                        {{ $i18n.get('label_view_all') }}
+                    </button>
+                </div>
+                <p 
+                        v-if="options.length != undefined && options.length <= 0"
+                        class="no-options-placeholder">
+                    {{ $i18n.get('info_no_options_available_filtering') }}
+                </p>
+            </template>
         </template>
         <template v-else>
             <checkbox-radio-filter-input
diff --git a/src/views/admin/components/filter-types/taxonomy/Checkbox.vue b/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
index a6edcb815..34eee4aaa 100644
--- a/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
+++ b/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
@@ -4,46 +4,41 @@
             :class="{ 'skeleton': isLoadingOptions && !filtersAsModal }"
             class="block">
         <template v-if="!filtersAsModal">
-            <!-- <span 
-                    v-if="isLoadingOptions"
-                    style="width: 100%"
-                    class="icon has-text-centered loading-icon">
-                <div class="control has-icons-right is-loading is-clearfix" />
-            </span> -->
-            <div
-                    v-for="(option, index) in options.slice(0, filter.max_options)"
-                    v-if="!isLoadingOptions"
-                    :key="index"
-                    :value="index"
-                    class="metadatum">
-                <label 
-                        v-if="!option.isChild"
-                        class="b-checkbox checkbox is-small">
-                    <input 
-                            v-model="selected"
-                            @input="resetPage"
-                            :value="option.value"
-                            type="checkbox"> 
-                    <span class="check" /> 
-                    <span class="control-label">
-                        <span class="checkbox-label-text">{{ option.label }}</span> 
-                        <span 
-                                v-if="option.total_items != undefined"
-                                class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
-                    </span>
-                </label>
-                <button
-                        class="view-all-button link-style"
-                        v-if="option.showViewAllButton"
-                        @click="openCheckboxModal(option.parent)"> 
-                    {{ $i18n.get('label_view_all') }}
-                </button>
-            </div>
-            <p 
-                    v-if="!isLoadingOptions && options.length != undefined && options.length <= 0"
-                    class="no-options-placeholder">
-                {{ $i18n.get('info_no_options_available_filtering') }}
-            </p>
+            <template v-if="!isLoadingOptions">
+                <div
+                        v-for="(option, index) in options.slice(0, filter.max_options)"
+                        :key="index"
+                        :value="index"
+                        class="metadatum">
+                    <label 
+                            v-if="!option.isChild"
+                            class="b-checkbox checkbox is-small">
+                        <input 
+                                v-model="selected"
+                                @input="resetPage"
+                                :value="option.value"
+                                type="checkbox"> 
+                        <span class="check" /> 
+                        <span class="control-label">
+                            <span class="checkbox-label-text">{{ option.label }}</span> 
+                            <span 
+                                    v-if="option.total_items != undefined"
+                                    class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
+                        </span>
+                    </label>
+                    <button
+                            class="view-all-button link-style"
+                            v-if="option.showViewAllButton"
+                            @click="openCheckboxModal(option.parent)"> 
+                        {{ $i18n.get('label_view_all') }}
+                    </button>
+                </div>
+                <p 
+                        v-if="options.length != undefined && options.length <= 0"
+                        class="no-options-placeholder">
+                    {{ $i18n.get('info_no_options_available_filtering') }}
+                </p>
+            </template>
         </template>
         <template v-else>
             <checkbox-radio-filter-input
diff --git a/src/views/admin/components/lists/collections-home-list.vue b/src/views/admin/components/lists/collections-home-list.vue
index a8e17ed79..2865bfc07 100644
--- a/src/views/admin/components/lists/collections-home-list.vue
+++ b/src/views/admin/components/lists/collections-home-list.vue
@@ -141,7 +141,6 @@
                 </router-link>
             </li>
             <li
-                    v-if="collections.length > 0 && !isLoading" 
                     :key="index"
                     v-for="(collection, index) of collections"
                     class="tainacan-card"
diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue
index 7daa78d6f..2e364bfda 100644
--- a/src/views/admin/components/lists/items-list.vue
+++ b/src/views/admin/components/lists/items-list.vue
@@ -207,7 +207,7 @@
                                         shown: 500,
                                         hide: 300,
                                     },
-                                    content: item.title != undefined ? item.title : '',
+                                    content: item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`),
                                     html: true,
                                     autoHide: false,
                                     placement: 'auto-start',
@@ -500,7 +500,7 @@
                                         shown: 500,
                                         hide: 300,
                                     },
-                                    content: item.title != undefined ? item.title : '',
+                                    content: item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`),
                                     html: true,
                                     autoHide: false,
                                     placement: 'auto-start',
@@ -721,36 +721,32 @@
                                             shown: 500,
                                             hide: 300,
                                         },
-                                        content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                        content: item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : '',
                                         html: true,
                                         autoHide: false,
                                         placement: 'auto-start',
                                         popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
                                     }"
-                                    v-for="(column, columnIndex) in displayedMetadata"
-                                    :key="columnIndex"
-                                    v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
+                                    v-if="collectionId != undefined && titleItemMetadatum"
                                     @click.left="onClickItem($event, item)"
                                     @click.right="onRightClickItem($event, item)"
-                                    v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
+                                    v-html="item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : ''" />
                             <p
                                     v-tooltip="{
                                         delay: {
                                             shown: 500,
                                             hide: 300,
                                         },
-                                        content: item.title != undefined ? item.title : '',
+                                        content: item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`),
                                         html: true,
                                         autoHide: false,
                                         placement: 'auto-start',
                                         popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
                                     }"
-                                    v-for="(column, columnIndex) in displayedMetadata"
-                                    :key="columnIndex"
-                                    v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
+                                    v-if="collectionId == undefined && titleItemMetadatum"
                                     @click.left="onClickItem($event, item)"
                                     @click.right="onRightClickItem($event, item)"
-                                    v-html="item.title != undefined ? item.title : ''" />
+                                    v-html="item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
                         </div>
                         <!-- Actions -->
                         <div
@@ -830,34 +826,33 @@
                                         />
                                 </div>
                                 <span
-                                        v-for="(column, metadatumIndex) in displayedMetadata"
-                                        :key="metadatumIndex"
-                                        :class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
-                                        v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')">
+                                        class="metadata-type-textarea"
+                                        v-if="collectionId == undefined && descriptionItemMetadatum && item.description">
                                     <h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
                                     <p
-                                            v-html="item.description != undefined ? item.description : ''"
-                                            class="metadata-value"/>
-                                </span>
-                                <span
-                                        v-for="(column, metadatumIndex) in displayedMetadata"
-                                        :key="metadatumIndex"
-                                        :class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
-                                        v-if="renderMetadata(item.metadata, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
-                                    <h3 class="metadata-label">{{ column.name }}</h3>
-                                    <p
-                                            v-html="renderMetadata(item.metadata, column)"
-                                            class="metadata-value"/>
-                                </span>
-                                <span
-                                        v-for="(column, metadatumIndex) in displayedMetadata"
-                                        :key="metadatumIndex"
-                                        v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined">
-                                    <h3 class="metadata-label">{{ column.name }}</h3>
-                                    <p
-                                            v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
+                                            v-html="item.description"
                                             class="metadata-value"/>
                                 </span>
+                                <template v-for="(column, metadatumIndex) in displayedMetadata">
+                                    <span
+                                            
+                                            :key="metadatumIndex"
+                                            v-if="renderMetadata(item.metadata, column) != '' && column.display && column.slug != 'thumbnail' && (column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title'))"
+                                            :class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }">
+                                        <h3 class="metadata-label">{{ column.name }}</h3>
+                                        <p
+                                                v-html="renderMetadata(item.metadata, column)"
+                                                class="metadata-value"/>
+                                    </span>
+                                    <span
+                                            :key="metadatumIndex"
+                                            v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined && column.display">
+                                        <h3 class="metadata-label">{{ column.name }}</h3>
+                                        <p
+                                                v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
+                                                class="metadata-value"/>
+                                    </span>
+                                </template>
                             </div>
                         </div>
                     </div>
@@ -884,26 +879,27 @@
                         </th>
 
                         <!-- Displayed Metadata -->
-                        <th
-                                v-for="(column, index) in displayedMetadata"
-                                :key="index"
-                                v-if="column.display"
-                                class="column-default-width"
-                                :class="{
-                                        'thumbnail-cell': column.metadatum == 'row_thumbnail',
-                                        'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' ||
-                                                                                                                               column.metadata_type_object.primitive_type == 'int' ) : false,
-                                        'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' ||
-                                                                                                           column.metadata_type_object.primitive_type == 'float' ||
-                                                                                                           column.metadata_type_object.primitive_type == 'int') : false,
-                                        'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'term' ||
-                                                                                                            column.metadata_type_object.primitive_type == 'item') : false,
-                                        'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' ||
-                                                                                                           column.metadata_type_object.primitive_type == 'compound' ||
-                                                                                                           column.metadata_type_object.related_mapped_prop == 'description') : false,
-                                }">
-                            <div class="th-wrap">{{ column.name }}</div>
-                        </th>
+                        <template v-for="(column, index) in displayedMetadata">
+                            <th
+                                    :key="index"
+                                    v-if="column.display"
+                                    class="column-default-width"
+                                    :class="{
+                                            'thumbnail-cell': column.metadatum == 'row_thumbnail',
+                                            'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' ||
+                                                                                                                                column.metadata_type_object.primitive_type == 'int' ) : false,
+                                            'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' ||
+                                                                                                            column.metadata_type_object.primitive_type == 'float' ||
+                                                                                                            column.metadata_type_object.primitive_type == 'int') : false,
+                                            'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'term' ||
+                                                                                                                column.metadata_type_object.primitive_type == 'item') : false,
+                                            'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' ||
+                                                                                                            column.metadata_type_object.primitive_type == 'compound' ||
+                                                                                                            column.metadata_type_object.related_mapped_prop == 'description') : false,
+                                    }">
+                                <div class="th-wrap">{{ column.name }}</div>
+                            </th>
+                        </template>
                         <th
                                 v-if="items.findIndex((item) => item.current_user_can_edit || item.current_user_can_delete) >= 0"
                                 class="actions-header">
@@ -961,141 +957,142 @@
                             </span>
                         </td>
                         <!-- Item Displayed Metadata -->
-                        <td
-                                :key="columnIndex"
-                                v-for="(column, columnIndex) in displayedMetadata"
-                                v-if="column.display"
-                                class="column-default-width"
-                                :class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea',
-                                        'thumbnail-cell': column.metadatum == 'row_thumbnail',
-                                        'column-main-content' : column.metadata_type_object != undefined ? (column.metadata_type_object.related_mapped_prop == 'title') : false,
-                                        'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' ||
-                                                                                                                               column.metadata_type_object.primitive_type == 'int' ) : false,
-                                        'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' ||
-                                                                                                           column.metadata_type_object.primitive_type == 'int' ||
-                                                                                                           column.metadata_type_object.primitive_type == 'float') : false,
-                                        'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'item' ||
-                                                                                                            column.metadata_type_object.primitive_type == 'term') : false,
-                                        'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' ||
-                                                                                                           column.metadata_type_object.primitive_type == 'compound' ||
-                                                                                                           column.metadata_type_object.related_mapped_prop == 'description') : false,
-                                }"
-                                @click.left="onClickItem($event, item)"
-                                @click.right="onRightClickItem($event, item)">
+                        <template v-for="(column, columnIndex) in displayedMetadata">
+                            <td
+                                    :key="columnIndex"
+                                    v-if="column.display"
+                                    class="column-default-width"
+                                    :class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea',
+                                            'thumbnail-cell': column.metadatum == 'row_thumbnail',
+                                            'column-main-content' : column.metadata_type_object != undefined ? (column.metadata_type_object.related_mapped_prop == 'title') : false,
+                                            'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' ||
+                                                                                                                                column.metadata_type_object.primitive_type == 'int' ) : false,
+                                            'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' ||
+                                                                                                            column.metadata_type_object.primitive_type == 'int' ||
+                                                                                                            column.metadata_type_object.primitive_type == 'float') : false,
+                                            'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'item' ||
+                                                                                                                column.metadata_type_object.primitive_type == 'term') : false,
+                                            'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' ||
+                                                                                                            column.metadata_type_object.primitive_type == 'compound' ||
+                                                                                                            column.metadata_type_object.related_mapped_prop == 'description') : false,
+                                    }"
+                                    @click.left="onClickItem($event, item)"
+                                    @click.right="onRightClickItem($event, item)">
 
-                            <p
-                                    v-tooltip="{
-                                        delay: {
-                                            shown: 500,
-                                            hide: 300,
-                                        },
-                                        content: item.title != undefined && item.title != '' ? item.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
-                                        html: true,
-                                        autoHide: false,
-                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                        placement: 'auto-start'
-                                    }"
-                                    v-if="collectionId == undefined &&
-                                          column.metadata_type_object != undefined &&
-                                          column.metadata_type_object.related_mapped_prop == 'title'"
-                                    v-html="`<span class='sr-only'>` + column.name + ': </span>' + ((item.title != undefined && item.title != '') ? item.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)"/>
-                            <p
-                                    v-tooltip="{
-                                        delay: {
-                                            shown: 500,
-                                            hide: 300,
-                                        },
-                                        content: item.description != undefined && item.description != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
-                                        html: true,
-                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                        autoHide: false,
-                                        placement: 'auto-start'
-                                    }"
-                                    v-if="collectionId == undefined &&
-                                          column.metadata_type_object != undefined &&
-                                          column.metadata_type_object.related_mapped_prop == 'description'"
-                                    v-html="`<span class='sr-only'>` + column.name + ': </span>' + ((item.description != undefined && item.description) != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)"/>
-                            <p
-                                    v-tooltip="{
-                                        delay: {
-                                            shown: 500,
-                                            hide: 300,
-                                        },
-                                        popperClass: [ 'tainacan-tooltip', 'tooltip', column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' ? 'metadata-type-textarea' : '', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                        content: renderMetadata(item.metadata, column) != '' ? renderMetadata(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
-                                        html: true,
-                                        autoHide: false,
-                                        placement: 'auto-start'
-                                    }"
-                                    v-if="item.metadata != undefined &&
-                                          column.metadatum !== 'row_thumbnail' &&
-                                          column.metadatum !== 'row_actions' &&
-                                          column.metadatum !== 'row_creation' &&
-                                          column.metadatum !== 'row_modification' &&
-                                          column.metadatum !== 'row_author' &&
-                                          column.metadatum !== 'row_title' &&
-                                          column.metadatum !== 'row_description'"
-                                    v-html="renderMetadata(item.metadata, column) != '' ? renderMetadata(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`"/>
+                                <p
+                                        v-tooltip="{
+                                            delay: {
+                                                shown: 500,
+                                                hide: 300,
+                                            },
+                                            content: item.title != undefined && item.title != '' ? item.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
+                                            html: true,
+                                            autoHide: false,
+                                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                            placement: 'auto-start'
+                                        }"
+                                        v-if="collectionId == undefined &&
+                                            column.metadata_type_object != undefined &&
+                                            column.metadata_type_object.related_mapped_prop == 'title'"
+                                        v-html="`<span class='sr-only'>` + column.name + ': </span>' + ((item.title != undefined && item.title != '') ? item.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)"/>
+                                <p
+                                        v-tooltip="{
+                                            delay: {
+                                                shown: 500,
+                                                hide: 300,
+                                            },
+                                            content: item.description != undefined && item.description != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
+                                            html: true,
+                                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                            autoHide: false,
+                                            placement: 'auto-start'
+                                        }"
+                                        v-if="collectionId == undefined &&
+                                            column.metadata_type_object != undefined &&
+                                            column.metadata_type_object.related_mapped_prop == 'description'"
+                                        v-html="`<span class='sr-only'>` + column.name + ': </span>' + ((item.description != undefined && item.description) != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)"/>
+                                <p
+                                        v-tooltip="{
+                                            delay: {
+                                                shown: 500,
+                                                hide: 300,
+                                            },
+                                            popperClass: [ 'tainacan-tooltip', 'tooltip', column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' ? 'metadata-type-textarea' : '', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                            content: renderMetadata(item.metadata, column) != '' ? renderMetadata(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
+                                            html: true,
+                                            autoHide: false,
+                                            placement: 'auto-start'
+                                        }"
+                                        v-if="item.metadata != undefined &&
+                                            column.metadatum !== 'row_thumbnail' &&
+                                            column.metadatum !== 'row_actions' &&
+                                            column.metadatum !== 'row_creation' &&
+                                            column.metadatum !== 'row_modification' &&
+                                            column.metadatum !== 'row_author' &&
+                                            column.metadatum !== 'row_title' &&
+                                            column.metadatum !== 'row_description'"
+                                        v-html="renderMetadata(item.metadata, column) != '' ? renderMetadata(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`"/>
 
-                            <span 
-                                    class="table-thumb"
-                                    v-if="column.metadatum == 'row_thumbnail'">
-                                <blur-hash-image
-                                        :width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-small', 40)"
-                                        :height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-small', 40)"
-                                        :hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-small')"
-                                        :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)"
-                                        :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
-                                        :transition-duration="500"
-                                />
-                            </span>
-                            <p
-                                    v-tooltip="{
-                                        delay: {
-                                            shown: 500,
-                                            hide: 300,
-                                        },
-                                        content: item[column.slug],
-                                        html: true,
-                                        autoHide: false,
-                                        placement: 'auto-start',
-                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
-                                    }"
-                                    v-if="column.metadatum == 'row_author'">
-                                    {{ item[column.slug] }}
-                            </p>
-                            <p
-                                    v-tooltip="{
-                                        delay: {
-                                            shown: 500,
-                                            hide: 300,
-                                        },
-                                        content: parseDateToNavigatorLanguage(item[column.slug]),
-                                        html: true,
-                                        autoHide: false,
-                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                        placement: 'auto-start'
-                                    }"
-                                    v-if="column.metadatum == 'row_modification'">
-                                    {{ parseDateToNavigatorLanguage(item[column.slug]) }}
-                            </p>
-                            <p
-                                    v-tooltip="{
-                                        delay: {
-                                            shown: 500,
-                                            hide: 300,
-                                        },
-                                        content: parseDateToNavigatorLanguage(item[column.slug]),
-                                        html: true,
-                                        autoHide: false,
-                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                        placement: 'auto-start'
-                                    }"
-                                    v-if="column.metadatum == 'row_creation'">
-                                    {{ parseDateToNavigatorLanguage(item[column.slug]) }}
-                            </p>
+                                <span 
+                                        class="table-thumb"
+                                        v-if="column.metadatum == 'row_thumbnail'">
+                                    <blur-hash-image
+                                            :width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-small', 40)"
+                                            :height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-small', 40)"
+                                            :hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-small')"
+                                            :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)"
+                                            :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
+                                            :transition-duration="500"
+                                    />
+                                </span>
+                                <p
+                                        v-tooltip="{
+                                            delay: {
+                                                shown: 500,
+                                                hide: 300,
+                                            },
+                                            content: item[column.slug],
+                                            html: true,
+                                            autoHide: false,
+                                            placement: 'auto-start',
+                                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
+                                        }"
+                                        v-if="column.metadatum == 'row_author'">
+                                        {{ item[column.slug] }}
+                                </p>
+                                <p
+                                        v-tooltip="{
+                                            delay: {
+                                                shown: 500,
+                                                hide: 300,
+                                            },
+                                            content: parseDateToNavigatorLanguage(item[column.slug]),
+                                            html: true,
+                                            autoHide: false,
+                                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                            placement: 'auto-start'
+                                        }"
+                                        v-if="column.metadatum == 'row_modification'">
+                                        {{ parseDateToNavigatorLanguage(item[column.slug]) }}
+                                </p>
+                                <p
+                                        v-tooltip="{
+                                            delay: {
+                                                shown: 500,
+                                                hide: 300,
+                                            },
+                                            content: parseDateToNavigatorLanguage(item[column.slug]),
+                                            html: true,
+                                            autoHide: false,
+                                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                            placement: 'auto-start'
+                                        }"
+                                        v-if="column.metadatum == 'row_creation'">
+                                        {{ parseDateToNavigatorLanguage(item[column.slug]) }}
+                                </p>
 
-                        </td>
+                            </td>
+                        </template>
 
                         <!-- Actions -->
                         <td 
@@ -1225,7 +1222,7 @@
                                         shown: 500,
                                         hide: 300,
                                     },
-                                    content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                    content: item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : '',
                                     html: true,
                                     autoHide: false,
                                     placement: 'auto-start',
@@ -1233,10 +1230,24 @@
                                 }"
                                 @click.left="onClickItem($event, item)"
                                 @click.right="onRightClickItem($event, item)"
-                                v-for="(column, metadatumIndex) in displayedMetadata"
-                                :key="metadatumIndex"
-                                v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
-                                v-html="item.metadata != undefined && collectionId ? renderMetadata(item.metadata, column) : (item.title ? item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />                 
+                                v-if="collectionId != undefined && titleItemMetadatum"
+                                v-html="item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : ''" />                
+                        <p 
+                                v-tooltip="{
+                                    delay: {
+                                        shown: 500,
+                                        hide: 300,
+                                    },
+                                    content: item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`),
+                                    html: true,
+                                    autoHide: false,
+                                    placement: 'auto-start',
+                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
+                                }"
+                                @click.left="onClickItem($event, item)"
+                                @click.right="onRightClickItem($event, item)"
+                                v-if="collectionId == undefined && titleItemMetadatum"
+                                v-html="item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />                 
                     </div>
 
                     <!-- Actions -->
@@ -1318,25 +1329,33 @@
                                 />
                         </div>
                         <div class="list-metadata media-body">
-                            <span 
-                                    v-for="(column, metadatumIndex) in displayedMetadata"
-                                    :key="metadatumIndex"
-                                    :class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
-                                    v-if="renderMetadata(item.metadata, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
-                                <h3 class="metadata-label">{{ column.name }}</h3>
-                                <p      
-                                        v-html="renderMetadata(item.metadata, column)"
-                                        class="metadata-value"/>
-                            </span>
-                            <span
-                                    v-for="(column, metadatumIndex) in displayedMetadata"
-                                    :key="metadatumIndex"
-                                    v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined">
-                                <h3 class="metadata-label">{{ column.name }}</h3>
+                           <span
+                                    class="metadata-type-textarea"
+                                    v-if="collectionId == undefined && descriptionItemMetadatum && item.description">
+                                <h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
                                 <p
-                                        v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
+                                        v-html="item.description"
                                         class="metadata-value"/>
                             </span>
+                            <template v-for="(column, metadatumIndex) in displayedMetadata">
+                                <span 
+                                        v-if="renderMetadata(item.metadata, column) != '' && column.display && column.slug != 'thumbnail' && (column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title'))"
+                                        :key="metadatumIndex"
+                                        :class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }">
+                                    <h3 class="metadata-label">{{ column.name }}</h3>
+                                    <p      
+                                            v-html="renderMetadata(item.metadata, column)"
+                                            class="metadata-value"/> 
+                                </span>
+                                <span
+                                        :key="metadatumIndex"
+                                        v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined && column.display">
+                                    <h3 class="metadata-label">{{ column.name }}</h3>
+                                    <p
+                                            v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
+                                            class="metadata-value"/>
+                                </span>
+                            </template>
                         </div>
                     </div>
                 </div>
@@ -1417,31 +1436,27 @@
                                                 shown: 500,
                                                 hide: 300,
                                             },
-                                            content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                            content: item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : '',
                                             html: true,
                                             autoHide: false,
                                             placement: 'auto-start',
                                             popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
                                         }"
-                                        v-for="(column, columnIndex) in displayedMetadata"
-                                        :key="columnIndex"
-                                        v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
-                                        v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
+                                        v-if="collectionId != undefined && titleItemMetadatum"
+                                        v-html="item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
                                 <p
                                         v-tooltip="{
                                             delay: {
                                                 shown: 500,
                                                 hide: 300,
                                             },
-                                            content: item.title != undefined ? item.title : '',
+                                            content: item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`),
                                             html: true,
                                             autoHide: false,
                                             placement: 'auto-start',
                                             popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
                                         }"
-                                        v-for="(column, columnIndex) in displayedMetadata"
-                                        :key="columnIndex"
-                                        v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
+                                        v-if="collectionId == undefined && titleItemMetadatum"
                                         v-html="item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
                                 <div class="tainacan-map-card-thumbnail">
                                     <blur-hash-image
@@ -1659,36 +1674,32 @@
                                                         shown: 500,
                                                         hide: 300,
                                                     },
-                                                    content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
+                                                    content: item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : '',
                                                     html: true,
                                                     autoHide: false,
                                                     placement: 'auto-start',
                                                     popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
                                                 }"
-                                                v-for="(column, columnIndex) in displayedMetadata"
-                                                :key="columnIndex"
-                                                v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
+                                                v-if="collectionId != undefined && titleItemMetadatum"
                                                 @click.left="onClickItem($event, item)"
                                                 @click.right="onRightClickItem($event, item)"
-                                                v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
+                                                v-html="item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : ''" />
                                         <p
                                                 v-tooltip="{
                                                     delay: {
                                                         shown: 500,
                                                         hide: 300,
                                                     },
-                                                    content: item.title != undefined ? item.title : '',
+                                                    content: item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`),
                                                     html: true,
                                                     autoHide: false,
                                                     placement: 'auto-start',
                                                     popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
                                                 }"
-                                                v-for="(column, columnIndex) in displayedMetadata"
-                                                :key="columnIndex"
-                                                v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
+                                                v-if="collectionId == undefined && titleItemMetadatum"
                                                 @click.left="onClickItem($event, item)"
                                                 @click.right="onRightClickItem($event, item)"
-                                                v-html="item.title != undefined ? item.title : ''" />
+                                                v-html="item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
                                     </div>
 
                                     <!-- Actions -->
@@ -1792,38 +1803,37 @@
                                                     />
                                             </div>
                                             <span
-                                                    v-for="(column, metadatumIndex) in displayedMetadata"
-                                                    :key="metadatumIndex"
-                                                    :class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
-                                                    v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')">
+                                                    class="metadata-type-textarea"
+                                                    v-if="collectionId == undefined">
                                                 <h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
                                                 <p
                                                         v-html="item.description != undefined ? item.description : ''"
                                                         class="metadata-value"/>
                                             </span>
-                                            <span
-                                                    v-for="(column, metadatumIndex) in displayedMetadata"
-                                                    :key="metadatumIndex"
-                                                    :class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
-                                                    v-if="renderMetadata(item.metadata, column) != '' &&
-                                                        column.display && column.slug != 'thumbnail' &&
-                                                        column.metadata_type_object != undefined && 
-                                                        (column.metadata_type_object.related_mapped_prop != 'title') &&
-                                                        (column.metadata_type != 'Tainacan\\Metadata_Types\\GeoCoordinate')">
-                                                <h3 class="metadata-label">{{ column.name }}</h3>
-                                                <p
-                                                        v-html="renderMetadata(item.metadata, column)"
-                                                        class="metadata-value"/>
-                                            </span>
-                                            <span
-                                                    v-for="(column, metadatumIndex) in displayedMetadata"
-                                                    :key="metadatumIndex"
-                                                    v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined">
-                                                <h3 class="metadata-label">{{ column.name }}</h3>
-                                                <p
-                                                        v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
-                                                        class="metadata-value"/>
-                                            </span>
+                                            <template v-for="(column, metadatumIndex) in displayedMetadata">
+                                                <span
+                                                        
+                                                        :key="metadatumIndex"
+                                                        :class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
+                                                        v-if="renderMetadata(item.metadata, column) != '' &&
+                                                            column.display && column.slug != 'thumbnail' &&
+                                                            column.metadata_type_object != undefined && 
+                                                            (column.metadata_type_object.related_mapped_prop != 'title') &&
+                                                            (column.metadata_type != 'Tainacan\\Metadata_Types\\GeoCoordinate')">
+                                                    <h3 class="metadata-label">{{ column.name }}</h3>
+                                                    <p
+                                                            v-html="renderMetadata(item.metadata, column)"
+                                                            class="metadata-value"/>
+                                                </span>
+                                                <span
+                                                        :key="metadatumIndex"
+                                                        v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined">
+                                                    <h3 class="metadata-label">{{ column.name }}</h3>
+                                                    <p
+                                                            v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
+                                                            class="metadata-value"/>
+                                                </span>
+                                            </template>
                                         </div>
                                     </div>
                                 </div>
@@ -1940,6 +1950,22 @@ export default {
             const currentStatus = this.getStatus();
             return !currentStatus || (currentStatus.indexOf(',') > 0);
         },
+        /* 
+         * This computed property only returns the metadatum object where the title is. 
+         * In repository level, there is not "title metadatum", this information comes directly from the item.title.
+         */
+        titleItemMetadatum() {
+            const possibleTitleItemMetadatum = this.displayedMetadata.find(aMetadatum => aMetadatum.display && aMetadatum.metadata_type_object && aMetadatum.metadata_type_object.related_mapped_prop == 'title');
+            return possibleTitleItemMetadatum ? possibleTitleItemMetadatum : false;
+        },
+        /* 
+         * This computed property only returns the metadatum object where the description is. 
+         * In repository level, there is not "description metadatum", this information comes directly from the item.description.
+         */
+        descriptionItemMetadatum() {
+            const possibleDescriptionItemMetadatum = this.displayedMetadata.find(aMetadatum => aMetadatum.display && aMetadatum.metadata_type_object && aMetadatum.metadata_type_object.related_mapped_prop == 'description');
+            return possibleDescriptionItemMetadatum ? possibleDescriptionItemMetadatum : false;
+        },
         itemsLocations() {
             let locations = [];