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

First patch of refactor to avoid v-if and v-for in the same tag. #794

This commit is contained in:
mateuswetah 2023-07-07 19:58:26 -03:00
parent d5c77e9f99
commit 0ef39e2c35
8 changed files with 373 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -23,7 +23,7 @@ module.exports = {
'vue/multiline-html-element-content-newline': 'off', 'vue/multiline-html-element-content-newline': 'off',
'vue/prop-name-casing': 'off', 'vue/prop-name-casing': 'off',
'vue/no-confusing-v-for-v-if': '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/multi-word-component-names': 'off',
'vue/require-default-prop': 'off', 'vue/require-default-prop': 'off',
'vue/no-v-text-v-html-on-component': 'off' 'vue/no-v-text-v-html-on-component': 'off'

8
src/views/admin/components/edition/collection-edition-form.vue
View File

@ -196,8 +196,7 @@
v-model="form.default_view_mode" v-model="form.default_view_mode"
@focus="clearErrors('default_view_mode')"> @focus="clearErrors('default_view_mode')">
<option <option
v-for="(viewMode, index) of form.enabled_view_modes" v-for="(viewMode, index) of validDefaultViewModes"
v-if="registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen != true"
:key="index" :key="index"
:value="viewMode"> :value="viewMode">
{{ registeredViewModes[viewMode].label }} {{ registeredViewModes[viewMode].label }}
@ -761,7 +760,10 @@ export default {
computed: { computed: {
...mapGetters('metadata', { ...mapGetters('metadata', {
'metadata': 'getMetadata' '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: { watch: {
'form.hide_items_thumbnail_on_lists' (newValue) { 'form.hide_items_thumbnail_on_lists' (newValue) {

5
src/views/admin/components/edition/importer-edition-form.vue
View File

@ -115,7 +115,6 @@
:placeholder="$i18n.get('instruction_select_a_target_collection')"> :placeholder="$i18n.get('instruction_select_a_target_collection')">
<option <option
v-for="collection of collections" v-for="collection of collections"
v-if="collection.current_user_can_edit_items"
:key="collection.id" :key="collection.id"
:value="collection.id">{{ collection.name }} :value="collection.id">{{ collection.name }}
</option> </option>
@ -437,7 +436,9 @@ export default {
this.fetchAllCollectionNames() this.fetchAllCollectionNames()
.then((resp) => { .then((resp) => {
resp.request.then((collections) => { 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; this.isFetchingCollections = false;
}) })
.catch((error) => { .catch((error) => {

27
src/views/admin/components/edition/importer-mapping-form.vue
View File

@ -109,10 +109,9 @@
{{ $i18n.get('label_create_repository_metadata') }} {{ $i18n.get('label_create_repository_metadata') }}
</option> </option>
<option <option
v-for="(collectionMetadatum, metadatumIndex) of collectionMetadata" v-for="(collectionMetadatum, metadatumIndex) of collectionNonChildMetadata"
:key="metadatumIndex" :key="metadatumIndex"
:value="collectionMetadatum.id" :value="collectionMetadatum.id"
v-if="!checkIfMetadatumIsChild(collectionMetadatum)"
:disabled="checkIfMetadatumIsAvailable(collectionMetadatum.id)"> :disabled="checkIfMetadatumIsAvailable(collectionMetadatum.id)">
<span class="metadatum-name"> <span class="metadatum-name">
{{ collectionMetadatum.name }} {{ collectionMetadatum.name }}
@ -141,10 +140,9 @@
{{ $i18n.get('label_create_metadatum') }} {{ $i18n.get('label_create_metadatum') }}
</option> </option>
<option <option
v-for="(collectionMetadatum, metadatumIndex) of collectionMetadata" v-for="(collectionMetadatum, metadatumIndex) of collectionNonChildMetadata"
:key="metadatumIndex" :key="metadatumIndex"
:value="collectionMetadatum.id" :value="collectionMetadatum.id"
v-if="!checkIfMetadatumIsChild(collectionMetadatum)"
:disabled="!checkIfMetadatumIsCompound(collectionMetadatum) || checkIfMetadatumIsAvailable(collectionMetadatum.id)"> :disabled="!checkIfMetadatumIsCompound(collectionMetadatum) || checkIfMetadatumIsAvailable(collectionMetadatum.id)">
<span class="metadatum-name"> <span class="metadatum-name">
{{ collectionMetadatum.name }} {{ collectionMetadatum.name }}
@ -191,15 +189,15 @@
</template> </template>
<p v-if="collectionMetadata == undefined || collectionMetadata.length <= 0">{{ $i18n.get('info_select_collection_to_list_metadata') }}</p> <p v-if="collectionMetadata == undefined || collectionMetadata.length <= 0">{{ $i18n.get('info_select_collection_to_list_metadata') }}</p>
</div> </div>
<div <template v-if="importerSourceInfo.source_special_fields">
v-if="importerSourceInfo.source_special_fields && importerSourceInfo.source_special_fields.length > 0" <div
class="source-metadatum" v-for="(specialField, specialFieldIndex) of importerSourceInfo.source_special_fields"
:key="specialFieldIndex" :key="specialFieldIndex"
v-for="(specialField, specialFieldIndex) of importerSourceInfo.source_special_fields"> class="source-metadatum">
<p style="font-style: italic">{{ specialField }}</p> <p style="font-style: italic">{{ specialField }}</p>
<p>{{ $i18n.get('info_special_fields_mapped_default') }}</p> <p>{{ $i18n.get('info_special_fields_mapped_default') }}</p>
</div> </div>
</template>
<p v-if="importerSourceInfo.source_metadata.length <= 0">{{ $i18n.get('info_no_metadata_source_file') }}<br></p> <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> <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: { computed: {
metadatumTypes() { metadatumTypes() {
return this.getMetadatumTypes(); return this.getMetadatumTypes();
},
collectionNonChildMetadata() {
return Array.isArray(this.collectionMetadata) ? this.collectionMetadata.filter((metadatum) => !this.checkIfMetadatumIsChild(metadatum)) : [];
} }
}, },
created() { created() {

67
src/views/admin/components/filter-types/checkbox/Checkbox.vue
View File

@ -4,39 +4,40 @@
:class="{ 'skeleton': isLoadingOptions && !filtersAsModal }" :class="{ 'skeleton': isLoadingOptions && !filtersAsModal }"
class="block"> class="block">
<template v-if="!filtersAsModal"> <template v-if="!filtersAsModal">
<div <template v-if="!isLoadingOptions">
v-for="(option, index) in options.slice(0, filter.max_options)" <div
v-if="!isLoadingOptions" v-for="(option, index) in options.slice(0, filter.max_options)"
:key="index" :key="index"
class="metadatum"> class="metadatum">
<label <label
v-if="index <= filter.max_options - 1" v-if="index <= filter.max_options - 1"
class="b-checkbox checkbox is-small"> class="b-checkbox checkbox is-small">
<input <input
v-model="selected" v-model="selected"
:value="option.value" :value="option.value"
@input="resetPage()" @input="resetPage()"
type="checkbox"> type="checkbox">
<span class="check" /> <span class="check" />
<span class="control-label"> <span class="control-label">
<span class="checkbox-label-text">{{ option.label }}</span> <span class="checkbox-label-text">{{ option.label }}</span>
<span <span
v-if="option.total_items != undefined" v-if="option.total_items != undefined"
class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span> class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
</span> </span>
</label> </label>
<button <button
class="view-all-button link-style" class="view-all-button link-style"
v-if="option.showViewAllButton && index == options.slice(0, filter.max_options).length - 1" v-if="option.showViewAllButton && index == options.slice(0, filter.max_options).length - 1"
@click="openCheckboxModal(option.parent)"> @click="openCheckboxModal(option.parent)">
{{ $i18n.get('label_view_all') }} {{ $i18n.get('label_view_all') }}
</button> </button>
</div> </div>
<p <p
v-if="isLoadingOptions == false && options.length != undefined && options.length <= 0" v-if="options.length != undefined && options.length <= 0"
class="no-options-placeholder"> class="no-options-placeholder">
{{ $i18n.get('info_no_options_available_filtering') }} {{ $i18n.get('info_no_options_available_filtering') }}
</p> </p>
</template>
</template> </template>
<template v-else> <template v-else>
<checkbox-radio-filter-input <checkbox-radio-filter-input

75
src/views/admin/components/filter-types/taxonomy/Checkbox.vue
View File

@ -4,46 +4,41 @@
:class="{ 'skeleton': isLoadingOptions && !filtersAsModal }" :class="{ 'skeleton': isLoadingOptions && !filtersAsModal }"
class="block"> class="block">
<template v-if="!filtersAsModal"> <template v-if="!filtersAsModal">
<!-- <span <template v-if="!isLoadingOptions">
v-if="isLoadingOptions" <div
style="width: 100%" v-for="(option, index) in options.slice(0, filter.max_options)"
class="icon has-text-centered loading-icon"> :key="index"
<div class="control has-icons-right is-loading is-clearfix" /> :value="index"
</span> --> class="metadatum">
<div <label
v-for="(option, index) in options.slice(0, filter.max_options)" v-if="!option.isChild"
v-if="!isLoadingOptions" class="b-checkbox checkbox is-small">
:key="index" <input
:value="index" v-model="selected"
class="metadatum"> @input="resetPage"
<label :value="option.value"
v-if="!option.isChild" type="checkbox">
class="b-checkbox checkbox is-small"> <span class="check" />
<input <span class="control-label">
v-model="selected" <span class="checkbox-label-text">{{ option.label }}</span>
@input="resetPage" <span
:value="option.value" v-if="option.total_items != undefined"
type="checkbox"> class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span>
<span class="check" /> </span>
<span class="control-label"> </label>
<span class="checkbox-label-text">{{ option.label }}</span> <button
<span class="view-all-button link-style"
v-if="option.total_items != undefined" v-if="option.showViewAllButton"
class="has-text-gray">&nbsp;{{ "(" + option.total_items + ")" }}</span> @click="openCheckboxModal(option.parent)">
</span> {{ $i18n.get('label_view_all') }}
</label> </button>
<button </div>
class="view-all-button link-style" <p
v-if="option.showViewAllButton" v-if="options.length != undefined && options.length <= 0"
@click="openCheckboxModal(option.parent)"> class="no-options-placeholder">
{{ $i18n.get('label_view_all') }} {{ $i18n.get('info_no_options_available_filtering') }}
</button> </p>
</div> </template>
<p
v-if="!isLoadingOptions && options.length != undefined && options.length <= 0"
class="no-options-placeholder">
{{ $i18n.get('info_no_options_available_filtering') }}
</p>
</template> </template>
<template v-else> <template v-else>
<checkbox-radio-filter-input <checkbox-radio-filter-input

1
src/views/admin/components/lists/collections-home-list.vue
View File

@ -141,7 +141,6 @@
</router-link> </router-link>
</li> </li>
<li <li
v-if="collections.length > 0 && !isLoading"
:key="index" :key="index"
v-for="(collection, index) of collections" v-for="(collection, index) of collections"
class="tainacan-card" class="tainacan-card"

536
src/views/admin/components/lists/items-list.vue
View File

@ -207,7 +207,7 @@
shown: 500, shown: 500,
hide: 300, 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, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
@ -500,7 +500,7 @@
shown: 500, shown: 500,
hide: 300, 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, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
@ -721,36 +721,32 @@
shown: 500, shown: 500,
hide: 300, hide: 300,
}, },
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '', content: item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : '',
html: true, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}" }"
v-for="(column, columnIndex) in displayedMetadata" v-if="collectionId != undefined && titleItemMetadatum"
:key="columnIndex"
v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@click.left="onClickItem($event, item)" @click.left="onClickItem($event, item)"
@click.right="onRightClickItem($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 <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, 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, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}" }"
v-for="(column, columnIndex) in displayedMetadata" v-if="collectionId == undefined && titleItemMetadatum"
:key="columnIndex"
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@click.left="onClickItem($event, item)" @click.left="onClickItem($event, item)"
@click.right="onRightClickItem($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> </div>
<!-- Actions --> <!-- Actions -->
<div <div
@ -830,34 +826,33 @@
/> />
</div> </div>
<span <span
v-for="(column, metadatumIndex) in displayedMetadata" class="metadata-type-textarea"
:key="metadatumIndex" v-if="collectionId == undefined && descriptionItemMetadatum && item.description">
: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')">
<h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3> <h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
<p <p
v-html="item.description != undefined ? item.description : ''" v-html="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]"
class="metadata-value"/> class="metadata-value"/>
</span> </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> </div>
</div> </div>
@ -884,26 +879,27 @@
</th> </th>
<!-- Displayed Metadata --> <!-- Displayed Metadata -->
<th <template v-for="(column, index) in displayedMetadata">
v-for="(column, index) in displayedMetadata" <th
:key="index" :key="index"
v-if="column.display" v-if="column.display"
class="column-default-width" class="column-default-width"
:class="{ :class="{
'thumbnail-cell': column.metadatum == 'row_thumbnail', '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-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.metadata_type_object.primitive_type == 'int' ) : false,
'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' || '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 == 'float' ||
column.metadata_type_object.primitive_type == 'int') : false, column.metadata_type_object.primitive_type == 'int') : false,
'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'term' || 'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'term' ||
column.metadata_type_object.primitive_type == 'item') : false, 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-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.primitive_type == 'compound' ||
column.metadata_type_object.related_mapped_prop == 'description') : false, column.metadata_type_object.related_mapped_prop == 'description') : false,
}"> }">
<div class="th-wrap">{{ column.name }}</div> <div class="th-wrap">{{ column.name }}</div>
</th> </th>
</template>
<th <th
v-if="items.findIndex((item) => item.current_user_can_edit || item.current_user_can_delete) >= 0" v-if="items.findIndex((item) => item.current_user_can_edit || item.current_user_can_delete) >= 0"
class="actions-header"> class="actions-header">
@ -961,141 +957,142 @@
</span> </span>
</td> </td>
<!-- Item Displayed Metadata --> <!-- Item Displayed Metadata -->
<td <template v-for="(column, columnIndex) in displayedMetadata">
:key="columnIndex" <td
v-for="(column, columnIndex) in displayedMetadata" :key="columnIndex"
v-if="column.display" v-if="column.display"
class="column-default-width" class="column-default-width"
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea', :class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea',
'thumbnail-cell': column.metadatum == 'row_thumbnail', 'thumbnail-cell': column.metadatum == 'row_thumbnail',
'column-main-content' : column.metadata_type_object != undefined ? (column.metadata_type_object.related_mapped_prop == 'title') : false, '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-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.metadata_type_object.primitive_type == 'int' ) : false,
'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' || '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 == 'int' ||
column.metadata_type_object.primitive_type == 'float') : false, column.metadata_type_object.primitive_type == 'float') : false,
'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'item' || 'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'item' ||
column.metadata_type_object.primitive_type == 'term') : false, 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-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.primitive_type == 'compound' ||
column.metadata_type_object.related_mapped_prop == 'description') : false, column.metadata_type_object.related_mapped_prop == 'description') : false,
}" }"
@click.left="onClickItem($event, item)" @click.left="onClickItem($event, item)"
@click.right="onRightClickItem($event, item)"> @click.right="onRightClickItem($event, item)">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
}, },
content: item.title != undefined && item.title != '' ? item.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`, content: item.title != undefined && item.title != '' ? item.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
html: true, html: true,
autoHide: false, autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if="collectionId == undefined && v-if="collectionId == undefined &&
column.metadata_type_object != undefined && column.metadata_type_object != undefined &&
column.metadata_type_object.related_mapped_prop == 'title'" 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>`)"/> 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 <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
}, },
content: item.description != undefined && item.description != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`, content: item.description != undefined && item.description != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
html: true, html: true,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
autoHide: false, autoHide: false,
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if="collectionId == undefined && v-if="collectionId == undefined &&
column.metadata_type_object != undefined && column.metadata_type_object != undefined &&
column.metadata_type_object.related_mapped_prop == 'description'" 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>`)"/> 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 <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, 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' : ''], 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>`, 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, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if="item.metadata != undefined && v-if="item.metadata != undefined &&
column.metadatum !== 'row_thumbnail' && column.metadatum !== 'row_thumbnail' &&
column.metadatum !== 'row_actions' && column.metadatum !== 'row_actions' &&
column.metadatum !== 'row_creation' && column.metadatum !== 'row_creation' &&
column.metadatum !== 'row_modification' && column.metadatum !== 'row_modification' &&
column.metadatum !== 'row_author' && column.metadatum !== 'row_author' &&
column.metadatum !== 'row_title' && column.metadatum !== 'row_title' &&
column.metadatum !== 'row_description'" 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>`"/> 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 <span
class="table-thumb" class="table-thumb"
v-if="column.metadatum == 'row_thumbnail'"> v-if="column.metadatum == 'row_thumbnail'">
<blur-hash-image <blur-hash-image
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-small', 40)" :width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-small', 40)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-small', 40)" :height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-small', 40)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-small')" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-small')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)" :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')" :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500" :transition-duration="500"
/> />
</span> </span>
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
}, },
content: item[column.slug], content: item[column.slug],
html: true, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}" }"
v-if="column.metadatum == 'row_author'"> v-if="column.metadatum == 'row_author'">
{{ item[column.slug] }} {{ item[column.slug] }}
</p> </p>
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
}, },
content: parseDateToNavigatorLanguage(item[column.slug]), content: parseDateToNavigatorLanguage(item[column.slug]),
html: true, html: true,
autoHide: false, autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if="column.metadatum == 'row_modification'"> v-if="column.metadatum == 'row_modification'">
{{ parseDateToNavigatorLanguage(item[column.slug]) }} {{ parseDateToNavigatorLanguage(item[column.slug]) }}
</p> </p>
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, hide: 300,
}, },
content: parseDateToNavigatorLanguage(item[column.slug]), content: parseDateToNavigatorLanguage(item[column.slug]),
html: true, html: true,
autoHide: false, autoHide: false,
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''], popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if="column.metadatum == 'row_creation'"> v-if="column.metadatum == 'row_creation'">
{{ parseDateToNavigatorLanguage(item[column.slug]) }} {{ parseDateToNavigatorLanguage(item[column.slug]) }}
</p> </p>
</td> </td>
</template>
<!-- Actions --> <!-- Actions -->
<td <td
@ -1225,7 +1222,7 @@
shown: 500, shown: 500,
hide: 300, hide: 300,
}, },
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '', content: item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : '',
html: true, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
@ -1233,10 +1230,24 @@
}" }"
@click.left="onClickItem($event, item)" @click.left="onClickItem($event, item)"
@click.right="onRightClickItem($event, item)" @click.right="onRightClickItem($event, item)"
v-for="(column, metadatumIndex) in displayedMetadata" v-if="collectionId != undefined && titleItemMetadatum"
:key="metadatumIndex" v-html="item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : ''" />
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')" <p
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-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> </div>
<!-- Actions --> <!-- Actions -->
@ -1318,25 +1329,33 @@
/> />
</div> </div>
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<span <span
v-for="(column, metadatumIndex) in displayedMetadata" class="metadata-type-textarea"
:key="metadatumIndex" v-if="collectionId == undefined && descriptionItemMetadatum && item.description">
:class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }" <h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
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 <p
v-html="renderMetadata(item.metadata, column)" v-html="item.description"
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"/> class="metadata-value"/>
</span> </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> </div>
</div> </div>
@ -1417,31 +1436,27 @@
shown: 500, shown: 500,
hide: 300, hide: 300,
}, },
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '', content: item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : '',
html: true, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}" }"
v-for="(column, columnIndex) in displayedMetadata" v-if="collectionId != undefined && titleItemMetadatum"
:key="columnIndex" v-html="item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
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>`)" />
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, 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, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}" }"
v-for="(column, columnIndex) in displayedMetadata" v-if="collectionId == undefined && titleItemMetadatum"
:key="columnIndex"
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
v-html="item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" /> 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"> <div class="tainacan-map-card-thumbnail">
<blur-hash-image <blur-hash-image
@ -1659,36 +1674,32 @@
shown: 500, shown: 500,
hide: 300, hide: 300,
}, },
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '', content: item.metadata != undefined ? renderMetadata(item.metadata, titleItemMetadatum) : '',
html: true, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}" }"
v-for="(column, columnIndex) in displayedMetadata" v-if="collectionId != undefined && titleItemMetadatum"
:key="columnIndex"
v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@click.left="onClickItem($event, item)" @click.left="onClickItem($event, item)"
@click.right="onRightClickItem($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 <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
shown: 500, shown: 500,
hide: 300, 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, html: true,
autoHide: false, autoHide: false,
placement: 'auto-start', placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}" }"
v-for="(column, columnIndex) in displayedMetadata" v-if="collectionId == undefined && titleItemMetadatum"
:key="columnIndex"
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@click.left="onClickItem($event, item)" @click.left="onClickItem($event, item)"
@click.right="onRightClickItem($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> </div>
<!-- Actions --> <!-- Actions -->
@ -1792,38 +1803,37 @@
/> />
</div> </div>
<span <span
v-for="(column, metadatumIndex) in displayedMetadata" class="metadata-type-textarea"
:key="metadatumIndex" v-if="collectionId == undefined">
: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')">
<h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3> <h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
<p <p
v-html="item.description != undefined ? item.description : ''" v-html="item.description != undefined ? item.description : ''"
class="metadata-value"/> class="metadata-value"/>
</span> </span>
<span <template v-for="(column, metadatumIndex) in displayedMetadata">
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' }" :key="metadatumIndex"
v-if="renderMetadata(item.metadata, column) != '' && :class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
column.display && column.slug != 'thumbnail' && v-if="renderMetadata(item.metadata, column) != '' &&
column.metadata_type_object != undefined && column.display && column.slug != 'thumbnail' &&
(column.metadata_type_object.related_mapped_prop != 'title') && column.metadata_type_object != undefined &&
(column.metadata_type != 'Tainacan\\Metadata_Types\\GeoCoordinate')"> (column.metadata_type_object.related_mapped_prop != 'title') &&
<h3 class="metadata-label">{{ column.name }}</h3> (column.metadata_type != 'Tainacan\\Metadata_Types\\GeoCoordinate')">
<p <h3 class="metadata-label">{{ column.name }}</h3>
v-html="renderMetadata(item.metadata, column)" <p
class="metadata-value"/> v-html="renderMetadata(item.metadata, column)"
</span> class="metadata-value"/>
<span </span>
v-for="(column, metadatumIndex) in displayedMetadata" <span
:key="metadatumIndex" :key="metadatumIndex"
v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined"> 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> <h3 class="metadata-label">{{ column.name }}</h3>
<p <p
v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]" v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
class="metadata-value"/> class="metadata-value"/>
</span> </span>
</template>
</div> </div>
</div> </div>
</div> </div>
@ -1940,6 +1950,22 @@ export default {
const currentStatus = this.getStatus(); const currentStatus = this.getStatus();
return !currentStatus || (currentStatus.indexOf(',') > 0); 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() { itemsLocations() {
let locations = []; let locations = [];