Several updates to fix metadata and filters dragndrop behavior.
This commit is contained in:
parent
4163f8d96b
commit
32d12c7ca4
|
@ -276,7 +276,8 @@
|
|||
chosenClass: 'sortable-chosen',
|
||||
filter: '.not-sortable-item',
|
||||
preventOnFilter: false,
|
||||
animation: 250
|
||||
animation: 250,
|
||||
dataIdAttr: 'data-metadatum-id'
|
||||
}"
|
||||
@update="handleChange($event, sectionIndex)"
|
||||
@add="handleChange($event, sectionIndex)"
|
||||
|
@ -285,6 +286,10 @@
|
|||
<div
|
||||
v-if="metadatum != undefined && metadatum.parent == 0"
|
||||
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
|
||||
:key="metadatum.id"
|
||||
:data-metadatum-id="metadatum.id"
|
||||
:data-collection-id="metadatum.collection_id"
|
||||
:data-original-section-index="sectionIndex"
|
||||
class="active-metadatum-item"
|
||||
:class="{
|
||||
'is-compact-item': !isCollapseOpen(metadatum.id),
|
||||
|
@ -642,7 +647,8 @@ export default {
|
|||
'moveMetadataSectionUp',
|
||||
'moveMetadataSectionDown',
|
||||
'moveMetadatumUp',
|
||||
'moveMetadatumDown'
|
||||
'moveMetadatumDown',
|
||||
'moveMetadatum'
|
||||
]),
|
||||
...mapGetters('metadata',[
|
||||
'getMetadataSections',
|
||||
|
@ -656,6 +662,7 @@ export default {
|
|||
case 'remove':
|
||||
this.removeMetadataSection(this.activeFiltersList[$event.oldIndex]);
|
||||
break;
|
||||
case 'change':
|
||||
case 'update': {
|
||||
const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
|
||||
const element = newMetadataSectionsList.splice($event.oldIndex, 1)[0];
|
||||
|
@ -677,37 +684,52 @@ export default {
|
|||
this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex, sectionIndex);
|
||||
$event.originalTarget.removeChild($event.item)
|
||||
} else {
|
||||
|
||||
this.isLoadingMetadataSections = true;
|
||||
|
||||
const previousSectionIndex = $event.item.dataset['originalSectionIndex'];
|
||||
|
||||
const previousSectionMetadataObjectList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList[previousSectionIndex].metadata_object_list));
|
||||
const newSectionMetadataObjectList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList[sectionIndex].metadata_object_list));
|
||||
const element = previousSectionMetadataObjectList.splice($event.oldIndex, 1)[0];
|
||||
newSectionMetadataObjectList.splice($event.newIndex, 0, element);
|
||||
|
||||
const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
|
||||
newMetadataSectionsList[sectionIndex].metadata_object_list = newSectionMetadataObjectList;
|
||||
newMetadataSectionsList[previousSectionIndex].metadata_object_list = previousSectionMetadataObjectList;
|
||||
|
||||
this.updateMetadataSections(newMetadataSectionsList);
|
||||
$event.originalTarget.removeChild($event.item);
|
||||
|
||||
this.updateMetadatum({
|
||||
collectionId: this.collectionId,
|
||||
metadatumId: this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex].id,
|
||||
isRepositoryLevel: this.activeMetadataSectionsList[sectionIndex].metadata_object_list[$event.oldIndex].collection_id === 'default',
|
||||
metadatumId: $event.item.dataset['metadatumId'],
|
||||
isRepositoryLevel: $event.item.dataset['collectionId'] === 'default',
|
||||
index: $event.newIndex,
|
||||
options: {},
|
||||
includeOptionsAsHtml: true,
|
||||
sectionId: this.activeMetadataSectionsList[sectionIndex].id
|
||||
}).then(() => {
|
||||
this.updateMetadataSectionsOrder(newMetadataSectionsList)
|
||||
.then( () => this.isLoadingMetadataSections = false )
|
||||
.catch( () => this.isLoadingMetadataSections = false );
|
||||
}).catch(() => {
|
||||
this.isLoadingMetadataSections = false;
|
||||
});
|
||||
|
||||
const newSectionMetadataObjectList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList[sectionIndex].metadata_object_list));
|
||||
const element = newSectionMetadataObjectList.splice($event.oldIndex, 1)[0];
|
||||
newSectionMetadataObjectList.splice($event.newIndex, 0, element);
|
||||
|
||||
const newMetadataSectionsList = JSON.parse(JSON.stringify(this.activeMetadataSectionsList));
|
||||
newMetadataSectionsList[sectionIndex].metadata_object_list = newSectionMetadataObjectList;
|
||||
this.updateMetadataSections(newMetadataSectionsList);
|
||||
|
||||
this.updateMetadataSectionsOrder(sectionIndex);
|
||||
}
|
||||
|
||||
break;
|
||||
case 'update':
|
||||
case 'change':
|
||||
case 'update': {
|
||||
this.moveMetadatum({ newIndex: $event.newIndex, oldIndex: $event.oldIndex, sectionIndex: sectionIndex });
|
||||
this.updateMetadataOrder(sectionIndex);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
updateMetadataOrder(sectionIndex) {
|
||||
let metadataOrder = [];
|
||||
|
||||
for (let metadatum of this.activeMetadataSectionsList[sectionIndex].metadata_object_list)
|
||||
if (metadatum != undefined)
|
||||
metadataOrder.push({
|
||||
|
@ -717,17 +739,16 @@ export default {
|
|||
|
||||
this.isUpdatingMetadataOrder = true;
|
||||
this.updateCollectionMetadataOrder({ collectionId: this.collectionId, metadataOrder: metadataOrder, metadataSectionId: this.activeMetadataSectionsList[sectionIndex].id })
|
||||
.then(() => {
|
||||
this.isUpdatingMetadataOrder = false
|
||||
|
||||
|
||||
})
|
||||
.then(() => this.isUpdatingMetadataOrder = false)
|
||||
.catch(() => this.isUpdatingMetadataOrder = false);
|
||||
|
||||
},
|
||||
updateMetadataSectionsOrder() {
|
||||
updateMetadataSectionsOrder(metadataSectionsList) {
|
||||
if (metadataSectionsList == undefined)
|
||||
metadataSectionsList = this.activeMetadataSectionsList;
|
||||
|
||||
let metadataSectionsOrder = [];
|
||||
for (let metadataSection of this.activeMetadataSectionsList)
|
||||
for (let metadataSection of metadataSectionsList)
|
||||
if (metadataSection != undefined) {
|
||||
metadataSectionsOrder.push({
|
||||
'id': metadataSection.id,
|
||||
|
@ -756,12 +777,13 @@ export default {
|
|||
onChangeEnableSection($event, index) {
|
||||
let metadataSectionsOrder = [];
|
||||
for (let metadataSection of this.activeMetadataSectionsList)
|
||||
if (metadataSection != undefined)
|
||||
if (metadataSection != undefined) {
|
||||
metadataSectionsOrder.push({
|
||||
'id': metadataSection.id,
|
||||
'enabled': metadataSection.enabled,
|
||||
'metadata_order': metadataSection.metadata_object_list.map((aMetadatum) => { return { 'id': aMetadatum.id, 'enabled': aMetadatum.enabled } })
|
||||
});
|
||||
}
|
||||
|
||||
metadataSectionsOrder[index].enabled = $event;
|
||||
this.isUpdatingMetadataSectionsOrder = true;
|
||||
|
@ -771,7 +793,6 @@ export default {
|
|||
},
|
||||
addMetadatumViaButton(metadatumType) {
|
||||
this.addNewMetadatum(metadatumType, this.activeMetadataSectionsList[0].metadata_object_list.length, 0);
|
||||
|
||||
// Higlights the clicked metadatum
|
||||
this.highlightedMetadatum = metadatumType.name;
|
||||
this.$emit('on-update-highlighted-metadatum', this.highlightedMetadatum);
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
put: false,
|
||||
revertClone: true
|
||||
},
|
||||
draggable: '.available-metadatum-item',
|
||||
sort: false,
|
||||
dragClass: 'sortable-drag'
|
||||
}">
|
||||
|
@ -27,7 +28,7 @@
|
|||
:id="metadatum.component"
|
||||
class="available-metadatum-item"
|
||||
:class="{ 'highlighted-metadatum' : highlightedMetadatum == metadatum.name, 'inherited-metadatum': metadatum.inherited || isRepositoryLevel }"
|
||||
@click.prevent.once="addMetadatumViaButton(metadatum)">
|
||||
@click.prevent="addMetadatumViaButton(metadatum)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('instruction_click_or_drag_metadatum_create'),
|
||||
|
@ -84,6 +85,7 @@
|
|||
put: false,
|
||||
revertClone: true
|
||||
},
|
||||
draggable: '.available-metadatum-item',
|
||||
sort: false,
|
||||
dragClass: 'sortable-drag'
|
||||
}">
|
||||
|
@ -91,7 +93,7 @@
|
|||
<div
|
||||
:id="metadataSection.id"
|
||||
class="available-metadata-section-item"
|
||||
@click.prevent="addMetadataSectionViaButton()">
|
||||
@click="addMetadataSectionViaButton()">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('instruction_click_or_drag_metadatum_create'),
|
||||
|
|
|
@ -90,6 +90,7 @@
|
|||
class="active-metadata-area"
|
||||
:options="{
|
||||
group: { name:'metadata', pull: false, put: true },
|
||||
sort: false,
|
||||
handle: '.handle',
|
||||
ghostClass: 'sortable-ghost',
|
||||
chosenClass: 'sortable-chosen',
|
||||
|
@ -362,12 +363,16 @@ export default {
|
|||
'cleanMetadata'
|
||||
]),
|
||||
...mapGetters('metadata',[
|
||||
'getMetadata'
|
||||
'getMetadata',
|
||||
'getMetadatumTypes'
|
||||
]),
|
||||
handleChange($event) {
|
||||
switch ($event.type) {
|
||||
case 'add':
|
||||
this.addNewMetadatum(this.activeMetadatumList[$event.oldIndex], $event.newIndex);
|
||||
if ( !$event.from.classList.contains('active-metadata-area') ) {
|
||||
this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex);
|
||||
$event.originalTarget.removeChild($event.item);
|
||||
}
|
||||
break;
|
||||
case 'remove':
|
||||
this.removeMetadatum(this.activeMetadatumList[$event.oldIndex]);
|
||||
|
|
|
@ -34,10 +34,14 @@
|
|||
preventOnFilter: false,
|
||||
animation: 250
|
||||
}"
|
||||
@change="handleChange">
|
||||
@update="handleChange($event)"
|
||||
@add="handleChange($event)"
|
||||
@remove="handleChange($event)">
|
||||
<template #item="{ element: metadatum, index }">
|
||||
<div
|
||||
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
|
||||
:data-metadatum-id="metadatum.id"
|
||||
:data-collection-id="metadatum.collection_id"
|
||||
class="active-metadatum-item"
|
||||
:class="{
|
||||
'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
|
||||
|
@ -235,7 +239,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
import MetadatumEditionForm from '../../edition/metadatum-edition-form.vue';
|
||||
import MetadatumDetails from '../../other/metadatum-details.vue';
|
||||
import CustomDialog from '../../other/custom-dialog.vue';
|
||||
|
@ -326,17 +330,22 @@
|
|||
'deleteMetadatum',
|
||||
'updateChildMetadataOrder'
|
||||
]),
|
||||
...mapGetters('metadata',[
|
||||
'getMetadatumTypes'
|
||||
]),
|
||||
handleChange($event) {
|
||||
|
||||
switch ($event.type) {
|
||||
case 'add':
|
||||
this.addNewMetadatum(this.childrenMetadata[$event.oldIndex], $event.newIndex);
|
||||
if ( !$event.from.classList.contains('active-metadata-area') ) {
|
||||
this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex);
|
||||
$event.originalTarget.removeChild($event.item);
|
||||
}
|
||||
break;
|
||||
case 'remove':
|
||||
this.removeMetadatum(this.childrenMetadata[$event.oldIndex]);
|
||||
break;
|
||||
case 'change':
|
||||
case 'update': {
|
||||
|
||||
const newChildrenMetadata = JSON.parse(JSON.stringify(this.childrenMetadata));
|
||||
const element = newChildrenMetadata.splice($event.oldIndex, 1)[0];
|
||||
newChildrenMetadata.splice($event.newIndex, 0, element);
|
||||
|
@ -443,6 +452,9 @@
|
|||
this.updateMetadataOrder();
|
||||
},
|
||||
isAvailableChildMetadata(to, from, item) {
|
||||
if (!item || !item.id)
|
||||
return false;
|
||||
|
||||
if (from.el && from.el.className === 'active-metadata-area')
|
||||
return false;
|
||||
|
||||
|
@ -470,15 +482,16 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.child-metadata-list-container {
|
||||
position: relative;
|
||||
margin-left: 42px;
|
||||
border-left: 1px solid var(--tainacan-gray2);
|
||||
|
||||
section.field {
|
||||
padding: 0.5em 1em 0 1em;
|
||||
padding: 0.5em 1em 0 1em !important;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
width: 100% !important;
|
||||
}
|
||||
.children-icon {
|
||||
position: absolute;
|
||||
|
|
|
@ -30,10 +30,10 @@ class Relationship extends Metadata_Type {
|
|||
<div class="dropdown-menu" style="">
|
||||
<div class="dropdown-content">
|
||||
<a class="dropdown-item is-hovered">
|
||||
<span>'. __('Collection') . ' 2 <strong>'._('item') . ' 9</strong>9</span>
|
||||
<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 2</strong>9</span>
|
||||
</a>
|
||||
<a class="dropdown-item">
|
||||
<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 9</strong>9</span>
|
||||
<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 4</strong>9</span>
|
||||
</a>
|
||||
<a class="dropdown-item">
|
||||
<span>'. __('Collection') . ' 3 <strong>'._('item') . ' 9</strong>8</span>
|
||||
|
|
|
@ -422,6 +422,10 @@ export const moveMetadatumDown = ({ commit }, { index, sectionIndex }) => {
|
|||
commit('moveMetadatumDown', { index, sectionIndex });
|
||||
}
|
||||
|
||||
export const moveMetadatum = ({ commit }, { newIndex, oldIndex, sectionIndex }) => {
|
||||
commit('moveMetadatum', { newIndex, oldIndex, sectionIndex });
|
||||
}
|
||||
|
||||
// METADATA SECTION METADATA LIST
|
||||
export const fetchMetadataSectionMetadata = ({commit}, { collectionId , metadataSectionId }) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
|
@ -187,7 +187,6 @@ export const deleteMetadatumInsideMetadataSection = (state, metadatum) => {
|
|||
const existingIndex = existingParentChildrenObject.findIndex((aMetadatum) => aMetadatum.id == metadatum.id);
|
||||
if (existingIndex >= 0)
|
||||
existingParentChildrenObject.splice(existingIndex, 1);
|
||||
|
||||
existingParent.metadata_type_options.children_objects = existingParentChildrenObject;
|
||||
|
||||
metadataSection['metadata_object_list'].splice(existingParentIndex, 1, existingParent);
|
||||
|
@ -240,4 +239,8 @@ export const moveMetadatumUp = (state, { index, sectionIndex }) => {
|
|||
|
||||
export const moveMetadatumDown = (state, { index, sectionIndex }) => {
|
||||
state.metadataSections[sectionIndex].metadata_object_list.splice(index + 1, 0, state.metadataSections[sectionIndex].metadata_object_list.splice(index, 1)[0]);
|
||||
}
|
||||
|
||||
export const moveMetadatum = (state, { newIndex, oldIndex, sectionIndex }) => {
|
||||
state.metadataSections[sectionIndex].metadata_object_list.splice(newIndex, 0, state.metadataSections[sectionIndex].metadata_object_list.splice(oldIndex, 1)[0]);
|
||||
}
|
|
@ -644,6 +644,7 @@ export default {
|
|||
case 'remove':
|
||||
this.removeFilter(this.activeFiltersList[$event.oldIndex]);
|
||||
break;
|
||||
case 'change':
|
||||
case 'update': {
|
||||
const newActiveFiltersList = JSON.parse(JSON.stringify(this.activeFiltersList));
|
||||
const element = newActiveFiltersList.splice($event.oldIndex, 1)[0];
|
||||
|
@ -710,9 +711,8 @@ export default {
|
|||
this.activeFiltersList.splice(this.newFilterIndex, 1);
|
||||
},
|
||||
handleChangeOnMetadata($event) {
|
||||
if ($event.removed) {
|
||||
if ( $event.type == 'removed' )
|
||||
this.oldMetadatumIndex = $event.removed.oldIndex;
|
||||
}
|
||||
},
|
||||
updateFiltersOrder() {
|
||||
let filtersOrder = [];
|
||||
|
@ -1124,6 +1124,12 @@ export default {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.not-saved {
|
||||
font-style: italic;
|
||||
|
|
|
@ -360,6 +360,12 @@ export default {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.not-saved {
|
||||
font-style: italic;
|
||||
|
|
Loading…
Reference in New Issue