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