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

More updates do collection metadata list using sections. #184.

This commit is contained in:
mateuswetah 2022-04-18 17:32:37 -03:00
parent ba5fbf331c
commit 4755fe43b5
9 changed files with 280 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,13 +4,13 @@
<b-loading :active.sync="isLoadingMetadataSections"/> <b-loading :active.sync="isLoadingMetadataSections"/>
<div class="tainacan-form sub-header"> <div class="tainacan-form sub-header">
<h3>{{ $i18n.get('metadata') }}<span class="has-text-gray">{{ ( activeMetadatumList && activeMetadatumList.length ? (' (' + activeMetadatumList.length + ')') : '' ) }}</span></h3> <h3>{{ $i18n.get('metadata') }}</h3>
<template v-if="activeMetadatumList && !isLoadingMetadata"> <template v-if="activeMetadataSectionsList">
<b-field class="header-item"> <b-field class="header-item">
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
:disabled="activeMetadatumList.length <= 0" :disabled="activeMetadataSectionsList.length <= 0"
class="show metadata-options-dropdown" class="show metadata-options-dropdown"
aria-role="list" aria-role="list"
trap-focus> trap-focus>
@ -55,7 +55,7 @@
<button <button
aria-controls="filters-items-list" aria-controls="filters-items-list"
:aria-expanded="!collapseAll" :aria-expanded="!collapseAll"
v-if="activeMetadatumList.length > 0" v-if="activeMetadataSectionsList.length > 0"
class="link-style collapse-all" class="link-style collapse-all"
@click="collapseAll = !collapseAll"> @click="collapseAll = !collapseAll">
<span class="icon"> <span class="icon">
@ -69,7 +69,7 @@
</button> </button>
<section <section
v-if="activeMetadatumList.length <= 0 && !isLoadingMetadata" v-if="activeMetadataSectionsList.length <= 0 && !isLoadingMetadataSections"
class="field is-grouped-centered section"> class="field is-grouped-centered section">
<div class="content has-text-gray has-text-centered"> <div class="content has-text-gray has-text-centered">
<p> <p>
@ -77,8 +77,7 @@
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
</span> </span>
</p> </p>
<p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p> <p>{{ $i18n.get('info_there_is_no_metadata_section') }}</p>
<p>{{ $i18n.get('info_create_metadata' ) }}</p>
</div> </div>
</section> </section>
@ -87,7 +86,7 @@
v-model="activeMetadataSectionsList" v-model="activeMetadataSectionsList"
class="active-metadata-sections-area" class="active-metadata-sections-area"
@change="handleSectionChange($event)" @change="handleSectionChange($event)"
:group="{ name:'metadata-sections', pull: false, put: true }" :group="{ name:'metadata-sections', pull: false, put: [ 'metadata-sections' ] }"
:sort="(openedMetadataSectionId == '' || openedMetadataSectionId == undefined) && (openedMetadatumId == '' || openedMetadatumId == undefined)" :sort="(openedMetadataSectionId == '' || openedMetadataSectionId == undefined) && (openedMetadatumId == '' || openedMetadatumId == undefined)"
:handle="'.handle'" :handle="'.handle'"
ghost-class="sortable-ghost" ghost-class="sortable-ghost"
@ -205,199 +204,215 @@
</div> </div>
</div> </div>
<!-- The Metadata list, inside each metadata section --> <section
<draggable v-if="metadataSection.metadata_object_list && metadataSection.metadata_object_list.length <= 0"
v-model="activeMetadatumList" class="field is-grouped-centered section">
class="active-metadata-area" <div class="content has-text-gray has-text-centered">
@change="handleChange($event, metadataSection.id)" <p>
:group="{ name:'metadata', pull: false, put: true }" <span class="icon is-large">
:sort="(openedMetadatumId == '' || openedMetadatumId == undefined)" <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
:handle="'.handle'" </span>
ghost-class="sortable-ghost" </p>
chosen-class="sortable-chosen" <p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
filter=".not-sortable-item" <p>{{ $i18n.get('info_create_metadata' ) }}</p>
:prevent-on-filter="false" </div>
:animation="250"> </section>
<div
v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)"
:key="metadatum.id"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
<div
class="active-metadatum-item"
:class="{
'is-compact-item': !isCollapseOpen(metadatum.id),
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
'not-focusable-item': openedMetadatumId == metadatum.id,
'disabled-metadatum': metadatum.enabled == false,
'inherited-metadatum': metadatum.inherited,
'child-metadatum': metadatum.parent > 0
}">
<div
:ref="'metadatum-handler-' + metadatum.id"
class="handle">
<span
:style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
v-tooltip="{
content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon grip-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span>
<span
v-tooltip="{
content: $i18n.get('label_view_metadata_details'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
@click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
class="gray-icon icon"
:style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
<i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
</span>
<span class="metadatum-name"> <!-- The Metadata list, inside each metadata section -->
{{ metadatum.name }} <template v-if="metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list)">
</span> <draggable
<span v-model="metadataSection.metadata_object_list"
v-if="metadatum.id != undefined && metadatum.metadata_type_object" class="active-metadata-area"
class="label-details" @change="handleChange($event, sectionIndex)"
:class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }"> :group="{ name:'metadata', pull: false, put: [ 'metadata' ] }"
:sort="(openedMetadatumId == '' || openedMetadatumId == undefined)"
:handle="'.handle'"
ghost-class="sortable-ghost"
chosen-class="sortable-chosen"
filter=".not-sortable-item"
:prevent-on-filter="false"
:animation="250">
<div
v-for="(metadatum, index) in metadataSection.metadata_object_list.filter((meta) => meta != undefined && meta.parent == 0)"
:key="metadatum.id"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
<div
class="active-metadatum-item"
:class="{
'is-compact-item': !isCollapseOpen(metadatum.id),
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
'not-focusable-item': openedMetadatumId == metadatum.id,
'disabled-metadatum': metadatum.enabled == false,
'inherited-metadatum': metadatum.inherited,
'child-metadatum': metadatum.parent > 0
}">
<div
:ref="'metadatum-handler-' + metadatum.id"
class="handle">
<span <span
v-if="metadatum.required === 'yes'" :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
v-tooltip="{ v-tooltip="{
content: $i18n.get('label_required'), content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<span
v-if="metadatum.status === 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
<span
v-tooltip="{
content: (metadatum.collection_id == 'default') ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
autoHide: true, autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'], popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
class="icon icon-level-identifier"> class="icon grip-icon">
<i <svg
:class="{ xmlns="http://www.w3.org/2000/svg"
'has-text-turquoise5': metadatum.enabled, height="24px"
'has-text-gray3': !metadatum.enabled viewBox="0 0 24 24"
}" width="24px"
class="tainacan-icon tainacan-icon-collection" /> fill="currentColor">
<path
d="M0 0h24v24H0V0z"
fill="transparent"/>
<path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</span> </span>
</span> <span
<span v-tooltip="{
class="loading-spinner" content: $i18n.get('label_view_metadata_details'),
v-if="metadatum.id == undefined"/> autoHide: true,
<span popperClass: ['tainacan-tooltip', 'tooltip'],
class="controls" placement: 'auto-start'
v-if="metadatum.id !== undefined"> }"
<b-switch @click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
:disabled="isUpdatingMetadataOrder" class="gray-icon icon"
size="is-small" :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
:value="metadatum.enabled" <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
@input="onChangeEnable($event, index)"/> </span>
<a
v-if="metadatum.current_user_can_edit" <span class="metadatum-name">
:style="{ visibility: {{ metadatum.name }}
metadatum.collection_id != collectionId </span>
? 'hidden' : 'visible' <span
}" v-if="metadatum.id != undefined && metadatum.metadata_type_object"
@click.prevent="toggleMetadatumEdition(metadatum)"> class="label-details"
:class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">
<span
v-if="metadatum.required === 'yes'"
v-tooltip="{
content: $i18n.get('label_required'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
*&nbsp;
</span>
({{ metadatum.metadata_type_object.name }})
<span
v-if="metadatum.status === 'private'"
class="icon"
v-tooltip="{
content: $i18n.get('status_private'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}">
<i class="tainacan-icon tainacan-icon-private"/>
</span>
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('edit'), content: (metadatum.collection_id == 'default') ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
autoHide: true, autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'], popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
class="icon"> class="icon icon-level-identifier">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/> <i
</span> :class="{
</a> 'has-text-turquoise5': metadatum.enabled,
<a 'has-text-gray3': !metadatum.enabled
v-if="metadatum.current_user_can_delete"
:style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
@click.prevent="removeMetadatum(metadatum)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}" }"
class="icon"> class="tainacan-icon tainacan-icon-collection" />
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span> </span>
</a> </span>
</span> <span
class="loading-spinner"
v-if="metadatum.id == undefined"/>
<span
class="controls"
v-if="metadatum.id !== undefined">
<b-switch
:disabled="isUpdatingMetadataOrder"
size="is-small"
:value="metadatum.enabled"
@input="onChangeEnable($event, index, sectionIndex)"/>
<a
v-if="metadatum.current_user_can_edit"
:style="{ visibility:
metadatum.collection_id != collectionId
? 'hidden' : 'visible'
}"
@click.prevent="toggleMetadatumEdition(metadatum)">
<span
v-tooltip="{
content: $i18n.get('edit'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
</span>
</a>
<a
v-if="metadatum.current_user_can_delete"
:style="{ visibility: metadatum.collection_id != collectionId || metadatum.metadata_type_object.core ? 'hidden' : 'visible' }"
@click.prevent="removeMetadatum(metadatum, sectionIndex)">
<span
v-tooltip="{
content: $i18n.get('delete'),
autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'],
placement: 'auto-start'
}"
class="icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-delete"/>
</span>
</a>
</span>
</div>
<transition name="form-collapse">
<metadatum-details
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" />
</transition>
</div> </div>
<transition name="form-collapse">
<metadatum-details <!-- Child metadata list, inside each compound metadata -->
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id" <child-metadata-list
:metadatum="metadatum" /> v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
</transition> :parent="metadatum"
</div> :metadata-name-filter-string="metadataNameFilterString"
:metadata-type-filter-options="metadataTypeFilterOptions"
<!-- Child metadata list, inside each compound metadata --> :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
<child-metadata-list :is-parent-multiple="metadatum.multiple == 'yes'"
v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
:parent.sync="activeMetadatumList[index]"
:metadata-name-filter-string="metadataNameFilterString"
:metadata-type-filter-options="metadataTypeFilterOptions"
:has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
:is-parent-multiple="metadatum.multiple == 'yes'"
:is-repository-level="false"
:collapse-all="collapseAll" />
<!-- Metadata edition form, for each metadata -->
<b-modal
@close="onEditionCanceled()"
:active="openedMetadatumId == metadatum.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')">
<metadatum-edition-form
:collection-id="collectionId"
:original-metadatum="metadatum"
:is-repository-level="false" :is-repository-level="false"
@onEditionFinished="onEditionFinished()" :collapse-all="collapseAll" />
@onEditionCanceled="onEditionCanceled()"
:index="index" /> <!-- Metadata edition form, for each metadata -->
</b-modal> <b-modal
@close="onEditionCanceled()"
:active="openedMetadatumId == metadatum.id"
trap-focus
aria-modal
aria-role="dialog"
custom-class="tainacan-modal"
:close-button-aria-label="$i18n.get('close')">
<metadatum-edition-form
:collection-id="collectionId"
:original-metadatum="metadatum"
:is-repository-level="false"
@onEditionFinished="onEditionFinished()"
@onEditionCanceled="onEditionCanceled()"
:index="index" />
</b-modal>
</div> </div>
</draggable><!-- End of .active-metadata-area --> </draggable><!-- End of .active-metadata-area -->
</template>
<!-- Metadata Section edition form, for each metadata section --> <!-- Metadata Section edition form, for each metadata section -->
<b-modal <b-modal
@ -443,7 +458,6 @@ export default {
data() { data() {
return { return {
collectionId: '', collectionId: '',
isLoadingMetadata: false,
isLoadingMetadataSections: false, isLoadingMetadataSections: false,
isUpdatingMetadataOrder: false, isUpdatingMetadataOrder: false,
openedMetadatumId: '', openedMetadatumId: '',
@ -460,14 +474,6 @@ export default {
hasSomeMetadataTypeFilterApplied() { hasSomeMetadataTypeFilterApplied() {
return this.metadataTypeFilterOptions.length && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled); return this.metadataTypeFilterOptions.length && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
}, },
activeMetadatumList: {
get() {
return this.getMetadata();
},
set(value) {
this.updateMetadata(value);
}
},
activeMetadataSectionsList: { activeMetadataSectionsList: {
get() { get() {
return this.getMetadataSections(); return this.getMetadataSections();
@ -481,33 +487,44 @@ export default {
'$route.query': { '$route.query': {
handler(newQuery) { handler(newQuery) {
if (newQuery.edit != undefined) { if (newQuery.edit != undefined) {
let existingMetadataIndex = this.activeMetadatumList.findIndex((metadatum) => metadatum && (metadatum.id == newQuery.edit)); let existingMetadataIndex = -1;
if (existingMetadataIndex >= 0) let existingMetadataSectionIndex = -1;
this.editMetadatum(this.activeMetadatumList[existingMetadataIndex])
for (let i = 0; i < this.activeMetadataSectionsList.length; i++) {
existingMetadataIndex = this.activeMetadataSectionsList[i].metadata_object_list.findIndex((metadatum) => metadatum && (metadatum.id == newQuery.edit));
if (existingMetadataIndex >= 0) {
existingMetadataSectionIndex = i;
break;
}
}
if (existingMetadataIndex >= 0 && existingMetadataSectionIndex >= 0)
this.editMetadatum(newQuery.edit);
} else if (newQuery.sectionEdit != undefined) { } else if (newQuery.sectionEdit != undefined) {
let existingMetadataSectionIndex = this.activeMetadataSectionsList.findIndex((metadataSection) => metadataSection && (metadataSection.id == newQuery.sectionEdit)); let existingMetadataSectionIndex = this.activeMetadataSectionsList.findIndex((metadataSection) => metadataSection && (metadataSection.id == newQuery.sectionEdit));
if (existingMetadataSectionIndex >= 0) if (existingMetadataSectionIndex >= 0)
this.editMetadataSection(this.activeMetadataSectionsList[existingMetadataSectionIndex]) this.editMetadataSection(newQuery.sectionEdit);
} }
}, },
immediate: true immediate: true
}, },
collapseAll(isCollapsed) { collapseAll(isCollapsed) {
this.activeMetadatumList.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed)); this.activeMetadataSectionsList.forEach((metadataSection) => {
if ( metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list) )
metadataSection.metadata_object_list.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
});
} }
}, },
mounted() { mounted() {
this.cleanMetadata();
this.cleanMetadataSections(); this.cleanMetadataSections();
this.$eventBusMetadataList.$on('addMetadatumViaButton', this.addMetadatumViaButton);
this.$eventBusMetadataList.$on('addMetadataSectionViaButton', this.addMetadataSectionViaButton);
this.collectionId = this.$route.params.collectionId; this.collectionId = this.$route.params.collectionId;
this.isLoadingMetadataSections = true; this.isLoadingMetadataSections = true;
this.fetchMetadataSections({ collectionId: this.collectionId }) this.fetchMetadataSections({ collectionId: this.collectionId, isContextEdit: true })
.then(() => { .then(() => {
this.activeMetadataSectionsList.forEach((aMetadataSection) => {
this.refreshMetadata(aMetadataSection);
});
this.isLoadingMetadataSections = false; this.isLoadingMetadataSections = false;
}) })
.catch((error) => { .catch((error) => {
@ -522,7 +539,6 @@ export default {
}, },
methods: { methods: {
...mapActions('metadata', [ ...mapActions('metadata', [
'fetchMetadata',
'sendMetadatum', 'sendMetadatum',
'sendMetadataSection', 'sendMetadataSection',
'deleteMetadatum', 'deleteMetadatum',
@ -547,23 +563,23 @@ export default {
this.updateMetadataSectionsOrder(); this.updateMetadataSectionsOrder();
} }
}, },
handleChange(event, metadataSectionId) { handleChange(event, sectionIndex) {
if (event.added) if (event.added)
this.addNewMetadatum(event.added.element, event.added.newIndex, metadataSectionId); this.addNewMetadatum(event.added.element, event.added.newIndex, sectionIndex);
else if (event.removed) else if (event.removed)
this.removeMetadatum(event.removed.element); this.removeMetadatum(event.removed.element, sectionIndex);
else if (event.moved) { else if (event.moved) {
this.updateMetadataOrder(); this.updateMetadataOrder(sectionIndex);
} }
}, },
updateMetadataOrder() { updateMetadataOrder(sectionIndex) {
let metadataOrder = []; let metadataOrder = [];
for (let metadatum of this.activeMetadatumList) for (let metadatum of this.activeMetadataSectionsList[sectionIndex].metadata_object_list)
if (metadatum != undefined) if (metadatum != undefined)
metadataOrder.push({ 'id': metadatum.id, 'enabled': metadatum.enabled }); metadataOrder.push({ 'id': metadatum.id, 'enabled': metadatum.enabled });
this.isUpdatingMetadataOrder = true; this.isUpdatingMetadataOrder = true;
this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder }) this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder, metadataSectionId: this.activeMetadataSectionsList[sectionIndex].id })
.then(() => this.isUpdatingMetadataOrder = false) .then(() => this.isUpdatingMetadataOrder = false)
.catch(() => this.isUpdatingMetadataOrder = false); .catch(() => this.isUpdatingMetadataOrder = false);
}, },
@ -578,15 +594,15 @@ export default {
.then(() => this.isUpdatingMetadataSectionsOrder = false) .then(() => this.isUpdatingMetadataSectionsOrder = false)
.catch(() => this.isUpdatingMetadataSectionsOrder = false); .catch(() => this.isUpdatingMetadataSectionsOrder = false);
}, },
onChangeEnable($event, index) { onChangeEnable($event, index, sectionIndex) {
let metadataOrder = []; let metadataOrder = [];
for (let metadatum of this.activeMetadatumList) for (let metadatum of this.activeMetadataSectionsList[sectionIndex].metadata_object_list)
if (metadatum != undefined) if (metadatum != undefined)
metadataOrder.push({'id': metadatum.id, 'enabled': metadatum.enabled}); metadataOrder.push({'id': metadatum.id, 'enabled': metadatum.enabled});
metadataOrder[index].enabled = $event; metadataOrder[index].enabled = $event;
this.isUpdatingMetadataOrder = true; this.isUpdatingMetadataOrder = true;
this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder }) this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder, metadataSectionId: this.activeMetadataSectionsList[sectionIndex].id })
.then(() => this.isUpdatingMetadataOrder = false) .then(() => this.isUpdatingMetadataOrder = false)
.catch(() => this.isUpdatingMetadataOrder = false); .catch(() => this.isUpdatingMetadataOrder = false);
}, },
@ -603,8 +619,7 @@ export default {
.catch(() => this.isUpdatingMetadataSectionsOrder = false); .catch(() => this.isUpdatingMetadataSectionsOrder = false);
}, },
addMetadatumViaButton(metadatumType) { addMetadatumViaButton(metadatumType) {
let lastIndex = this.activeMetadatumList.length; this.addNewMetadatum(metadatumType, this.activeMetadataSectionsList[0].metadata_object_list.length, 0);
this.addNewMetadatum(metadatumType, lastIndex);
// Higlights the clicked metadatum // Higlights the clicked metadatum
this.hightlightedMetadatum = metadatumType.name; this.hightlightedMetadatum = metadatumType.name;
@ -614,7 +629,7 @@ export default {
let lastIndex = this.activeMetadataSectionsList.length; let lastIndex = this.activeMetadataSectionsList.length;
this.addNewMetadataSection(lastIndex); this.addNewMetadataSection(lastIndex);
}, },
addNewMetadatum(newMetadatum, newIndex, metadataSectionId) { addNewMetadatum(newMetadatum, newIndex, sectionIndex) {
this.sendMetadatum({ this.sendMetadatum({
collectionId: this.collectionId, collectionId: this.collectionId,
name: newMetadatum.name, name: newMetadatum.name,
@ -623,11 +638,11 @@ export default {
isRepositoryLevel: false, isRepositoryLevel: false,
newIndex: newIndex, newIndex: newIndex,
parent: '0', parent: '0',
sectionId: metadataSectionId sectionId: this.activeMetadataSectionsList[sectionIndex].id
}) })
.then((metadatum) => { .then((metadatum) => {
this.updateMetadataOrder(); this.updateMetadataOrder(sectionIndex);
this.toggleMetadatumEdition(metadatum) this.toggleMetadatumEdition(metadatum)
this.hightlightedMetadatum = ''; this.hightlightedMetadatum = '';
@ -652,7 +667,7 @@ export default {
this.$console.error(error); this.$console.error(error);
}); });
}, },
removeMetadatum(removedMetadatum) { removeMetadatum(removedMetadatum, sectionIndex) {
this.$buefy.modal.open({ this.$buefy.modal.open({
parent: this, parent: this,
component: CustomDialog, component: CustomDialog,
@ -667,7 +682,7 @@ export default {
isRepositoryLevel: false isRepositoryLevel: false
}) })
.then(() => { .then(() => {
this.updateMetadataOrder(); this.updateMetadataOrder(sectionIndex);
}) })
.catch(() => { .catch(() => {
this.$console.log("Error deleting metadatum.") this.$console.log("Error deleting metadatum.")
@ -708,11 +723,11 @@ export default {
toggleMetadataSectionEdition(metadataSection) { toggleMetadataSectionEdition(metadataSection) {
this.$router.push({ query: { sectionEdit: metadataSection.id } }); this.$router.push({ query: { sectionEdit: metadataSection.id } });
}, },
editMetadatum(metadatum) { editMetadatum(metadatumId) {
this.openedMetadatumId = metadatum.id; this.openedMetadatumId = metadatumId;
}, },
editMetadataSection(metadataSection) { editMetadataSection(metadataSectionId) {
this.openedMetadataSectionId = metadataSection.id; this.openedMetadataSectionId = metadataSectionId;
}, },
onEditionFinished() { onEditionFinished() {
this.openedMetadatumId = ''; this.openedMetadatumId = '';
@ -730,42 +745,6 @@ export default {
this.openedMetadataSectionId = ''; this.openedMetadataSectionId = '';
this.$router.push({ query: {}}); this.$router.push({ query: {}});
}, },
refreshMetadata(metadataSection) {
this.isLoadingMetadata = true;
// Cancels previous Request
if (this.metadataSearchCancel != undefined)
this.metadataSearchCancel.cancel('Metadata search Canceled.');
this.fetchMetadata({
collectionId: this.collectionId,
isRepositoryLevel: false,
isContextEdit: true,
includeDisabled: true,
parent: '0',
includeOptionsAsHtml: true
}).then((resp) => {
resp.request
.then(() => {
this.isLoadingMetadata = false;
// Checks URL as router watcher would not wait for list to load
if (this.$route.query.edit != undefined) {
let existingMetadataIndex = this.activeMetadatumList.findIndex((metadatum) => metadatum.id == this.$route.query.edit);
if (existingMetadataIndex >= 0)
this.editMetadatum(this.activeMetadatumList[existingMetadataIndex]);
}
})
.catch(() => {
this.isLoadingMetadata = false;
});
// Search Request Token for cancelling
this.metadataSearchCancel = resp.source;
})
.catch(() => this.isLoadingMetadata = false);
},
filterByMetadatumName(metadatum) { filterByMetadatumName(metadatum) {
if (metadatum.metadata_type_object && if (metadatum.metadata_type_object &&
metadatum.metadata_type_object.component == 'tainacan-compound' && metadatum.metadata_type_object.component == 'tainacan-compound' &&

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

@ -155,6 +155,7 @@
v-tooltip="{ v-tooltip="{
content: $i18n.get('status_' + collection.status), content: $i18n.get('status_' + collection.status),
autoHide: true, autoHide: true,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}"> }">
@ -193,6 +194,7 @@
}, },
content: collection.name, content: collection.name,
autoHide: false, autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}"> }">
@ -213,6 +215,7 @@
}, },
content: (collection.description != undefined && collection.description != '') ? collection.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`, content: (collection.description != undefined && collection.description != '') ? collection.description : `<span class='has-text-gray is-italic'>` + $i18n.get('label_description_not_provided') + `</span>`,
autoHide: false, autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
@ -233,6 +236,7 @@
}, },
content: collection.modification_date, content: collection.modification_date,
autoHide: false, autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
@ -253,6 +257,7 @@
}, },
content: collection.creation_date, content: collection.creation_date,
autoHide: false, autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
@ -273,6 +278,7 @@
}, },
content: collection.author_name, content: collection.author_name,
autoHide: false, autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"
@ -294,6 +300,7 @@
}, },
content: getTotalItemsDetailed(collection.total_items), content: getTotalItemsDetailed(collection.total_items),
autoHide: false, autoHide: false,
html: true,
popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'], popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
placement: 'auto-start' placement: 'auto-start'
}" }"

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

@ -67,7 +67,7 @@
v-if="!isRepositoryLevel" v-if="!isRepositoryLevel"
v-model="availableMetadataSectionsList" v-model="availableMetadataSectionsList"
:sort="false" :sort="false"
:group="{ name:'metadata', pull: 'clone', put: false, revertClone: true }" :group="{ name:'metadata-sections', pull: 'clone', put: false, revertClone: true }"
drag-class="sortable-drag"> drag-class="sortable-drag">
<div <div
:id="metadataSection.id" :id="metadataSection.id"
@ -167,11 +167,11 @@ export default {
...mapGetters('metadata',[ ...mapGetters('metadata',[
'getMetadatumTypes' 'getMetadatumTypes'
]), ]),
addMetadatumViaVutton(metadatumType) { addMetadatumViaButton(metadatumType) {
this.$emit('onAddMetadatumTypeViaButton', metadatumType); this.$eventBusMetadataList.onAddMetadatumViaButton(metadatumType);
}, },
addMetadataSectionViaVutton() { addMetadataSectionViaButton() {
this.$emit('onAddMetadataSectionTypeViaButton'); this.$eventBusMetadataList.onAddMetadataSectionViaButton();
}, },
getPreviewTemplateContent(metadatum) { getPreviewTemplateContent(metadatum) {
return `<div class="metadata-type-preview tainacan-form"> return `<div class="metadata-type-preview tainacan-form">

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

@ -336,6 +336,7 @@ export default {
mounted() { mounted() {
this.cleanMetadata(); this.cleanMetadata();
this.refreshMetadata(); this.refreshMetadata();
this.$eventBusMetadataList.$on('addMetadatumViaButton', this.addMetadatumViaButton);
}, },
beforeDestroy() { beforeDestroy() {
// Cancels previous Request // Cancels previous Request

3
src/views/admin/js/admin-main.js
View File

@ -88,6 +88,7 @@ import store from './store/store'
import router from './router' import router from './router'
import eventBusSearch from './event-bus-search'; import eventBusSearch from './event-bus-search';
import eventBusTermsList from './event-bus-terms-list.js'; import eventBusTermsList from './event-bus-terms-list.js';
import eventBusMetadataList from './event-bus-metadata-list.js';
import { import {
I18NPlugin, I18NPlugin,
UserPrefsPlugin, UserPrefsPlugin,
@ -252,7 +253,9 @@ export default (element) => {
Vue.component('draggable', draggable); Vue.component('draggable', draggable);
Vue.component('tainacan-title', TainacanTitle); Vue.component('tainacan-title', TainacanTitle);
// Event bus are needed to facilate comunication between child-parent-child components
Vue.use(eventBusTermsList, {}); Vue.use(eventBusTermsList, {});
Vue.use(eventBusMetadataList, {});
Vue.use(eventBusSearch, { store: store, router: router}); Vue.use(eventBusSearch, { store: store, router: router});
// Changing title of pages // Changing title of pages

19
src/views/admin/js/event-bus-metadata-list.js Normal file
View File

@ -0,0 +1,19 @@
export default {
install(Vue, options = {}) {
Vue.prototype.$eventBusMetadataList = new Vue({
data: {
},
methods: {
onAddMetadatumViaButton(metadataType) {
this.$emit('addMetadatumViaButton', metadataType);
},
onAddMetadataSectionViaButton() {
this.$emit('addMetadataSectionViaButton');
}
}
});
}
}

6
src/views/admin/js/store/modules/metadata/actions.js
View File

@ -93,6 +93,7 @@ export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, stat
axios.tainacan.post(endpoint, params) axios.tainacan.post(endpoint, params)
.then(res => { .then(res => {
let metadatum = res.data; let metadatum = res.data;
commit('setSingleMetadatum', { metadatum: metadatum, index: newIndex, isRepositoryLevel: isRepositoryLevel }); commit('setSingleMetadatum', { metadatum: metadatum, index: newIndex, isRepositoryLevel: isRepositoryLevel });
resolve(metadatum); resolve(metadatum);
@ -281,9 +282,10 @@ export const updateMetadatumMappers = ({commit}, metadatumMappers) => {
}; };
// METADATA SECTIONS // METADATA SECTIONS
export const fetchMetadataSections = ({commit}, {collectionId}) => { export const fetchMetadataSections = ({commit}, { collectionId, isContextEdit }) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios.tainacan.get('/collection/' + collectionId + '/metadata-sections') axios.tainacan.get('/collection/' + collectionId + '/metadata-sections' + (isContextEdit ? '?context=edit' : ''))
.then((res) => { .then((res) => {
let metadataSections = res.data; let metadataSections = res.data;
commit('setMetadataSections', metadataSections); commit('setMetadataSections', metadataSections);

4
src/views/admin/pages/lists/metadata-page.vue
View File

@ -31,8 +31,6 @@
<metadata-types-list <metadata-types-list
:hightlighted-metadatum="hightlightedMetadatum" :hightlighted-metadatum="hightlightedMetadatum"
:is-repository-level="isRepositoryLevel" :is-repository-level="isRepositoryLevel"
@onAddMetadatumTypeViaButton="addMetadatumViaButton"
@onAddMetadataSectionTypeViaButton="addMetadataSectionViaButton"
@onFinishedLoadingMetadataTypes="createMetadataTypeFilterOptions"/> @onFinishedLoadingMetadataTypes="createMetadataTypeFilterOptions"/>
</div> </div>
</b-tab-item> </b-tab-item>
@ -95,7 +93,7 @@ export default {
this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('metadata') }]); this.$root.$emit('onCollectionBreadCrumbUpdate', [{ path: '', label: this.$i18n.get('metadata') }]);
}, },
methods: { methods: {
...mapGetters('collections',[ ...mapGetters('collection',[
'getCollection' 'getCollection'
]), ]),
...mapGetters('metadata',[ ...mapGetters('metadata',[

1
src/views/tainacan-i18n.php
View File

@ -804,6 +804,7 @@ return apply_filters( 'tainacan-i18n', [
'info_logs_before' => __( 'Before', 'tainacan' ), 'info_logs_before' => __( 'Before', 'tainacan' ),
'info_logs_after' => __( 'After', 'tainacan' ), 'info_logs_after' => __( 'After', 'tainacan' ),
'info_there_is_no_metadatum' => __( 'There is no metadata here yet.', 'tainacan' ), 'info_there_is_no_metadatum' => __( 'There is no metadata here yet.', 'tainacan' ),
'info_there_is_no_metadata_section' => __( 'There is no metadata section here yet.', 'tainacan' ),
'info_there_is_no_filter' => __( 'There is no filter here yet.', 'tainacan' ), 'info_there_is_no_filter' => __( 'There is no filter here yet.', 'tainacan' ),
'info_changes' => __( 'Changes', 'tainacan' ), 'info_changes' => __( 'Changes', 'tainacan' ),
'info_possible_external_sources' => __( 'Possible external sources: CSV, Instagram, YouTube, etc.', 'tainacan' ), 'info_possible_external_sources' => __( 'Possible external sources: CSV, Instagram, YouTube, etc.', 'tainacan' ),