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

More enhancements to relationship input #572.

This commit is contained in:
mateuswetah 2021-08-17 16:05:44 -03:00
parent 21a7cddf36
commit 13484abb2d
4 changed files with 90 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/admin/components/edition/item-edition-form.vue
View File

@ -1175,9 +1175,7 @@ export default {
} else { } else {
parent.postMessage({ parent.postMessage({
type: 'itemEditionMessage', type: 'itemEditionMessage',
itemId: this.item.id, item: this.item
itemTitle: this.item.title,
itemThumbnail: this.item.thumbnail
}, },
tainacan_plugin.admin_url); tainacan_plugin.admin_url);
} }
@ -1207,9 +1205,7 @@ export default {
else else
parent.postMessage({ parent.postMessage({
type: 'itemEditionMessage', type: 'itemEditionMessage',
itemId: null, item: null
itemTitle: null,
itemThumbnail: null
}, },
tainacan_plugin.admin_url); tainacan_plugin.admin_url);

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

@ -4,9 +4,7 @@
size="is-small" size="is-small"
animated animated
v-model="activeTab"> v-model="activeTab">
<b-tab-item <b-tab-item :label="$i18n.get('label_insert_items')">
style="margin: 0 -0.75rem;"
:label="$i18n.get('label_insert_items')">
<b-taginput <b-taginput
expanded expanded
:disabled="disabled" :disabled="disabled"
@ -65,7 +63,7 @@
</b-taginput> </b-taginput>
</b-tab-item> </b-tab-item>
<b-tab-item <b-tab-item
v-if="itemMetadatum && isDisplayingRelatedItemMetadata" 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 ? $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">
@ -169,17 +167,31 @@
this.collectionId = ( this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.collection_id ) ? this.itemMetadatum.metadatum.metadata_type_options.collection_id : ''; this.collectionId = ( this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.collection_id ) ? this.itemMetadatum.metadatum.metadata_type_options.collection_id : '';
if (this.itemMetadatum.value && (Array.isArray( this.itemMetadatum.value ) ? this.itemMetadatum.value.length > 0 : true )) { if (this.itemMetadatum.value && (Array.isArray( this.itemMetadatum.value ) ? this.itemMetadatum.value.length > 0 : true )) {
let query = qs.stringify({ postin: ( Array.isArray( this.itemMetadatum.value ) ) ? this.itemMetadatum.value : [ this.itemMetadatum.value ] }); let query = [];
query += this.itemMetadatum.metadatum.metadata_type_options.search ? ('&fetch_only_meta=' + this.itemMetadatum.metadatum.metadata_type_options.search + (this.isDisplayingRelatedItemMetadata ? this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.filter(metadatumId => metadatumId !== 'thumbnail') : '')) : '';
axios.get('/collection/' + this.collectionId + '/items?' + query + '&nopaging=1&fetch_only=title,document_mimetype,thumbnail&order=asc') query['postin'] = Array.isArray( this.itemMetadatum.value ) ? this.itemMetadatum.value : [ this.itemMetadatum.value ];
query['nopaging'] = 1;
query['order'] = 'asc';
query['fetch_only'] = 'title,document_mimetype,thumbnail';
query['fetch_only_meta'] = this.isDisplayingRelatedItemMetadata ? (this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.filter(metadatumId => metadatumId !== 'thumbnail') + '') : (this.itemMetadatum.metadatum.metadata_type_options.search ? this.itemMetadatum.metadatum.metadata_type_options.search : '');
axios.get('/collection/' + this.collectionId + '/items?' + qs.stringify(query) )
.then( res => { .then( res => {
if (res.data.items) { if (res.data.items) {
for (let item of res.data.items) for (let item of res.data.items) {
this.selected.push({ if (this.isDisplayingRelatedItemMetadata) {
label: this.getItemLabel(item), this.selected.push({
value: item.id, label: this.getItemLabel(item),
img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype) value: item.id,
}); valuesAsHtml: this.getItemMetadataValuesAsHtml(item)
});
} else {
this.selected.push({
label: this.getItemLabel(item),
value: item.id,
img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)
});
}
}
} }
}) })
.catch(error => { .catch(error => {
@ -334,8 +346,8 @@
} else { } else {
query['search'] = search; query['search'] = search;
} }
query['fetch_only'] = 'title,thumbnail'; query['fetch_only'] = 'title,thumbnail,document_mimetype';
query['fetch_only_meta'] = this.itemMetadatum.metadatum.metadata_type_options.search + (this.isDisplayingRelatedItemMetadata ? this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.filter(metadatumId => metadatumId !== 'thumbnail') : ''); query['fetch_only_meta'] = this.isDisplayingRelatedItemMetadata ? (this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.filter(metadatumId => metadatumId !== 'thumbnail') + '') : (this.itemMetadatum.metadatum.metadata_type_options.search ? this.itemMetadatum.metadatum.metadata_type_options.search : '');
query['perpage'] = 12; query['perpage'] = 12;
query['paged'] = this.page; query['paged'] = this.page;
query['order'] = 'asc'; query['order'] = 'asc';
@ -358,14 +370,23 @@
// An item is being created from the modal // An item is being created from the modal
} else { } else {
if (data.itemId) { if (data.item && data.item.id) {
this.searchQuery = ''; this.searchQuery = '';
this.selected.push({
label: data.itemTitle, if (this.isDisplayingRelatedItemMetadata) {
value: data.itemId, this.selected.push({
img: data.itemThumbnail ? data.itemThumbnail : '' label: this.getItemLabel(data.item),
}); value: data.item.id,
valuesAsHtml: this.getItemMetadataValuesAsHtml(data.item)
});
} else {
this.selected.push({
label: this.getItemLabel(data.item),
value: data.item.id,
img: data.item.thumbnail ? data.item.thumbnail : ''
});
}
this.onInput(this.selected); this.onInput(this.selected);
} }
} }
@ -376,21 +397,28 @@
let valuesAsHtml = ''; let valuesAsHtml = '';
valuesAsHtml += `<div class="tainacan-relationship-metadatum" data-item-id="${ item.id }"> valuesAsHtml += `<div class="tainacan-relationship-metadatum" data-item-id="${ item.id }">
<div class="tainacan-relationship-metadatum-header"> <div class="tainacan-relationship-metadatum-header">
<img src="${ this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype) }" class="attachment-tainacan-small size-tainacan-small" alt="${ item.thumbnail_alt }" loading="lazy" width="40" height="40"> <img src="${ this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype) }" class="attachment-tainacan-small size-tainacan-small" alt="${ item.thumbnail_alt }" loading="lazy" width="40" height="40">`;
<h4 class="label">
<span data-id="${ item.id }">${ item.title }</span>
</h4>
</div>
`;
Object.values(item.metadata).forEach(metadatumValue => { Object.values(item.metadata).forEach(metadatumValue => {
valuesAsHtml += `<div class="tainacan-metadatum"> if (metadatumValue.id == this.itemMetadatum.metadatum.metadata_type_options.search) {
<h5 class="label"> valuesAsHtml += `<h4 class="label">
${ metadatumValue.name } ${ metadatumValue.value_as_html }
</h5> </h4>`;
<p> }
${ metadatumValue.value_as_html } });
</p> valuesAsHtml += `</div>`;
</div>`;
Object.values(item.metadata).forEach(metadatumValue => {
if (metadatumValue.id != this.itemMetadatum.metadatum.metadata_type_options.search) {
valuesAsHtml += `<div class="tainacan-metadatum">
<h5 class="label">
${ metadatumValue.name }
</h5>
<p>
${ metadatumValue.value_as_html }
</p>
</div>`;
}
}); });
valuesAsHtml += `</div>`; valuesAsHtml += `</div>`;
@ -460,24 +488,33 @@
} }
.b-tabs { .b-tabs {
margin-bottom: 0; margin-bottom: 0;
width: 100%;
} }
/deep/ .b-tabs .tab-content { /deep/ .b-tabs .tab-content {
border: 1px solid var(--tainacan-gray1); padding: 0.5em 0px;
padding: 0;
} }
.tainacan-relationship-results-container { .tainacan-relationship-results-container {
border: 1px solid var(--tainacan-gray1);
background-color: var(--tainacan-white); background-color: var(--tainacan-white);
margin-top: -1px; margin-top: 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 12px 24px 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;
&>div {
width: 100%;
}
/deep/ .tainacan-relationship-group .tainacan-relationship-metadatum { /deep/ .tainacan-relationship-group .tainacan-relationship-metadatum {
.tainacan-metadatum .label { .tainacan-metadatum .label {
font-size: 0.75em; font-size: 0.75em;
} }
a {
pointer-events: auto;
}
.tainacan-relationship-metadatum-header { .tainacan-relationship-metadatum-header {
padding-right: 64px; padding-right: 64px;
.label{ .label{
@ -493,6 +530,9 @@
.label { .label {
font-size: 1em; font-size: 1em;
} }
a {
pointer-events: none;
}
} }
.tainacan-relationship-metadatum-header .label { .tainacan-relationship-metadatum-header .label {
font-size: 1.125em; font-size: 1.125em;
@ -501,11 +541,15 @@
/deep/ .relationship-value-button--edit, /deep/ .relationship-value-button--edit,
/deep/ .relationship-value-button--remove { /deep/ .relationship-value-button--remove {
position: absolute; position: absolute;
top: 4px; top: 0px;
right: 4px; right: 4px;
background-color: var(--tainacan-white); background-color: var(--tainacan-white);
border-radius: 100%; border-radius: 100%;
padding: 2px; padding: 2px;
&:hover {
background-color: var(--tainacan-gray0);
}
} }
/deep/ .relationship-value-button--edit { /deep/ .relationship-value-button--edit {
right: 34px; right: 34px;

2
src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
View File

@ -174,7 +174,7 @@
<style scoped> <style scoped>
.add-new-term { .add-new-term {
margin: 6px 0; margin: 3px 0;
font-size: 0.75em; font-size: 0.75em;
} }
</style> </style>

8
src/views/admin/components/other/checkbox-radio-metadata-input.vue
View File

@ -5,9 +5,7 @@
animated animated
@input="fetchSelectedLabels()" @input="fetchSelectedLabels()"
v-model="activeTab"> v-model="activeTab">
<b-tab-item <b-tab-item :label="isTaxonomy ? $i18n.get('label_all_terms') : $i18n.get('label_all_metadatum_values')">
style="margin: 0 -0.75rem;"
:label="isTaxonomy ? $i18n.get('label_all_terms') : $i18n.get('label_all_metadatum_values')">
<!-- Search input --> <!-- Search input -->
<b-field class="is-clearfix tainacan-checkbox-search-section"> <b-field class="is-clearfix tainacan-checkbox-search-section">
@ -805,9 +803,9 @@
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
.tab-content { /deep/ .tab-content {
transition: height 0.2s ease; transition: height 0.2s ease;
padding: 0.5em 20px !important; padding: 0.5em 0px !important;
} }
// In theme, the bootstrap removes the style of <a> without href // In theme, the bootstrap removes the style of <a> without href