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

Several updates to fix metadata and filters dragndrop behavior.

This commit is contained in:
mateuswetah 2024-03-20 10:43:56 -03:00
parent 4163f8d96b
commit 32d12c7ca4
9 changed files with 101 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
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',
index: $event.newIndex,
options: {},
includeOptionsAsHtml: true,
sectionId: this.activeMetadataSectionsList[sectionIndex].id
});
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 = newSectionMetadataObjectList.splice($event.oldIndex, 1)[0];
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;
this.updateMetadataSections(newMetadataSectionsList);
newMetadataSectionsList[previousSectionIndex].metadata_object_list = previousSectionMetadataObjectList;
this.updateMetadataSectionsOrder(sectionIndex);
this.updateMetadataSections(newMetadataSectionsList);
$event.originalTarget.removeChild($event.item);
this.updateMetadatum({
collectionId: this.collectionId,
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;
});
}
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);

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

@ -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'),

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

@ -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]);

27
src/views/admin/components/metadata-types/compound/child-metadata-list.vue
View File

@ -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;

4
src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php
View File

@ -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>

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

@ -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) => {

5
src/views/admin/js/store/modules/metadata/mutations.js
View File

@ -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);
@ -241,3 +240,7 @@ 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]);
}

10
src/views/admin/pages/lists/filters-page.vue
View File

@ -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;

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

@ -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;