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

More tweaks to new relationship input #572.

This commit is contained in:
mateuswetah 2021-08-17 18:23:08 -03:00
parent e43747934c
commit b7fb7a67e4
1 changed files with 71 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/views/admin/components/metadata-types/relationship/Relationship.vue
View File

@ -65,12 +65,20 @@
<b-tab-item <b-tab-item
v-if="itemMetadatum" v-if="itemMetadatum"
style="min-height: 56px;" style="min-height: 56px;"
:label="( itemMetadatum.value.length == 1 ? $i18n.get('label_selected_item') : $i18n.get('label_selected_items') ) + ' (' + itemMetadatum.value.length + ')'"> :label="( itemMetadatum.value.length == 1 || itemMetadatum.metadatum.multiple != 'yes' ) ? $i18n.get('label_selected_item') : ( $i18n.get('label_selected_items') + ' (' + itemMetadatum.value.length + ')' )">
<div class="tainacan-relationship-results-container"> <div class="tainacan-relationship-results-container">
<div <div
v-if="itemMetadatum.value && itemMetadatum.value.length"
v-html="itemMetadatum.value_as_html" v-html="itemMetadatum.value_as_html"
:ref="relationshipInputId + '_results-container'" :ref="relationshipInputId + '_results-container'"
/> />
<div v-else>
<p
class="has-text-gray"
style="font-size: 0.875em;">
{{ $i18n.get('info_no_item_found') }}
</p>
</div>
</div> </div>
</b-tab-item> </b-tab-item>
</b-tabs> </b-tabs>
@ -431,8 +439,8 @@
this.$refs[this.relationshipInputId + '_results-container'] this.$refs[this.relationshipInputId + '_results-container']
) { ) {
let valuesAsHtml = this.$refs[this.relationshipInputId + '_results-container']; let valuesAsHtml = this.$refs[this.relationshipInputId + '_results-container'];
if ( if (
this.isDisplayingRelatedItemMetadata &&
valuesAsHtml && valuesAsHtml &&
valuesAsHtml.childNodes && valuesAsHtml.childNodes &&
valuesAsHtml.childNodes.length && valuesAsHtml.childNodes.length &&
@ -443,37 +451,51 @@
valuesAsHtml.childNodes[0].childNodes.forEach(element => { valuesAsHtml.childNodes[0].childNodes.forEach(element => {
if ( element.classList && element.classList.contains('tainacan-relationship-metadatum') ) { if ( element.classList && element.classList.contains('tainacan-relationship-metadatum') ) {
const relatedItemId = element.getAttribute('data-item-id'); const relatedItemId = element.getAttribute('data-item-id');
this.appendButtonsToViewAsHtml(element, relatedItemId);
if (this.currentUserCanEditItems && this.$route && !this.$route.query.iframemode) { }
const editButton = document.createElement('a'); });
editButton.classList.add('relationship-value-button--edit'); } else if (
editButton.innerHTML = '<span class="icon"><i class="tainacan-icon tainacan-icon-edit"></i></span>'; !this.isDisplayingRelatedItemMetadata &&
editButton.addEventListener('click', (event) => { valuesAsHtml &&
event.preventDefault(); valuesAsHtml.childNodes &&
this.editingItemId = relatedItemId; valuesAsHtml.childNodes.length
this.editItemModalOpen = true; ) {
}); valuesAsHtml.childNodes.forEach(element => {
element.appendChild(editButton); if ( element.nodeName == 'A') {
} const relatedItemId = element.getAttribute('data-id');
this.appendButtonsToViewAsHtml(element, relatedItemId);
const removeButton = document.createElement('a');
removeButton.classList.add('relationship-value-button--remove');
removeButton.innerHTML = '<span class="icon"><i class="tainacan-icon tainacan-icon-close"></i></span>';
removeButton.addEventListener('click', (event) => {
event.preventDefault();
const indexOfRemovedItem = this.selected.findIndex(itemValue => itemValue.value == relatedItemId);
if (indexOfRemovedItem >= 0) {
this.selected.splice(indexOfRemovedItem, 1);
this.onInput(this.selected);
}
});
element.appendChild(removeButton);
} }
}); });
} }
} }
},
appendButtonsToViewAsHtml(element, relatedItemId) {
if (this.currentUserCanEditItems && this.$route && !this.$route.query.iframemode) {
const editButton = document.createElement('a');
editButton.classList.add('relationship-value-button--edit');
editButton.innerHTML = '<span class="icon"><i class="tainacan-icon tainacan-icon-edit"></i></span>';
editButton.addEventListener('click', (event) => {
event.preventDefault();
this.editingItemId = relatedItemId;
this.editItemModalOpen = true;
});
element.appendChild(editButton);
}
const removeButton = document.createElement('a');
removeButton.classList.add('relationship-value-button--remove');
removeButton.innerHTML = '<span class="icon"><i class="tainacan-icon tainacan-icon-close"></i></span>';
removeButton.addEventListener('click', (event) => {
event.preventDefault();
const indexOfRemovedItem = this.selected.findIndex(itemValue => itemValue.value == relatedItemId);
if (indexOfRemovedItem >= 0) {
this.selected.splice(indexOfRemovedItem, 1);
this.onInput(this.selected);
}
});
element.appendChild(removeButton);
} }
} }
} }
@ -500,7 +522,7 @@
margin-bottom: calc(-1 * (0.5em + 1px)); margin-bottom: calc(-1 * (0.5em + 1px));
display: flex; display: flex;
overflow: auto; overflow: auto;
padding: 12px 12px 24px 12px; padding: 12px;
max-height: 40vh; max-height: 40vh;
transition: heigth 0.5s ease, min-height 0.5s ease; transition: heigth 0.5s ease, min-height 0.5s ease;
@ -508,17 +530,20 @@
width: 100%; width: 100%;
} }
/deep/ .tainacan-relationship-group .tainacan-relationship-metadatum { /deep/ .tainacan-relationship-group {
.tainacan-metadatum .label { padding-bottom: 12px;
font-size: 0.75em; .tainacan-relationship-metadatum {
} .tainacan-metadatum .label {
a { font-size: 0.75em;
pointer-events: auto; }
} a {
.tainacan-relationship-metadatum-header { pointer-events: auto;
padding-right: 64px; }
.label{ .tainacan-relationship-metadatum-header {
font-size: 0.875em; padding-right: 64px;
.label{
font-size: 0.875em;
}
} }
} }
} }
@ -537,11 +562,14 @@
.tainacan-relationship-metadatum-header .label { .tainacan-relationship-metadatum-header .label {
font-size: 1.125em; font-size: 1.125em;
} }
.relationship-value-button--edit,
.relationship-value-button--remove {
position: absolute;
top: 0px;
}
} }
/deep/ .relationship-value-button--edit, /deep/ .relationship-value-button--edit,
/deep/ .relationship-value-button--remove { /deep/ .relationship-value-button--remove {
position: absolute;
top: 0px;
right: 4px; right: 4px;
background-color: var(--tainacan-white); background-color: var(--tainacan-white);
border-radius: 100%; border-radius: 100%;