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

Adds link to full related items list and several visual adustments to it on admin side. #521

This commit is contained in:
mateuswetah 2021-06-28 16:50:41 -03:00
parent 6e2707e0f3
commit 3db946e48b
6 changed files with 155 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -582,6 +582,7 @@
</div> </div>
<related-items-list <related-items-list
:item-id="itemId"
:collection-id="collectionId" :collection-id="collectionId"
:related-items="item.related_items" :related-items="item.related_items"
:is-editable="!$route.query.iframemode" :is-editable="!$route.query.iframemode"

152
src/views/admin/components/lists/related-items-list.vue
View File

@ -10,7 +10,7 @@
v-for="(relatedItemGroup, index) of relatedItemsArray" v-for="(relatedItemGroup, index) of relatedItemsArray"
:key="index" :key="index"
class="related-item-group"> class="related-item-group">
<div class="columns"> <div class="columns is-vcentered is-multiline">
<div class="column is-narrow"> <div class="column is-narrow">
<div class="section-status"> <div class="section-status">
<div class="field has-addons"> <div class="field has-addons">
@ -35,15 +35,29 @@
</div> </div>
</div> </div>
</div> </div>
<div
v-if="relatedItemGroup.total_items && relatedItemGroup.total_items > 0"
style="margin-left: auto;"
class="column is-narrow">
<div class="section-status">
<div class="field has-addons">
<b-button
class="button is-secondary"
tag="router-link"
:to="$routerHelper.getCollectionItemsPath(collectionId, { metaquery: [{ key: relatedItemGroup.metadata_id, value: itemId, compare: 'IN' }] })">
{{ $i18n.getWithVariables('label_view_all_%s_related_items', [relatedItemGroup.total_items]) }}
</b-button>
</div>
</div>
</div>
</div> </div>
<table class="tainacan-table"> <ul class="related-item-group__items-list">
<tbody> <li
<tr
v-for="(relatedItem, itemIndex) of relatedItemGroup.items" v-for="(relatedItem, itemIndex) of relatedItemGroup.items"
:key="itemIndex"> :key="itemIndex">
<td <div
class="status-cell" class="status-cell"
@click="openItemOnNewTab(relatedItem)"> @click="openItemOnNewTab(relatedItem)">
<span <span
@ -59,17 +73,22 @@
:class="$statusHelper.getIcon(relatedItem.status)" :class="$statusHelper.getIcon(relatedItem.status)"
/> />
</span> </span>
</td> </div>
<!-- Item Displayed Metadata --> <div @click="openItemOnNewTab(relatedItem)">
<td <span class="table-thumb">
<blur-hash-image
:width="$thumbHelper.getWidth(relatedItem['thumbnail'], 'tainacan-small', 40)"
:height="$thumbHelper.getHeight(relatedItem['thumbnail'], 'tainacan-small', 40)"
:hash="$thumbHelper.getBlurhashString(relatedItem['thumbnail'], 'tainacan-small')"
:src="$thumbHelper.getSrc(relatedItem['thumbnail'], 'tainacan-small', relatedItem.document_mimetype)"
:alt="relatedItem.thumbnail_alt ? relatedItem.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500"
/>
</span>
</div>
<div
@click="openItemOnNewTab(relatedItem)" @click="openItemOnNewTab(relatedItem)"
:key="columnIndex" style="width: 100%">
v-for="(column, columnIndex) in displayedMetadata"
class="column-default-width"
:class="{
'thumbnail-cell': column.metadatum == 'row_thumbnail',
'column-main-content' : column.metadata_type_object != undefined ? (column.metadata_type_object.related_mapped_prop == 'title') : false
}">
<p <p
v-tooltip="{ v-tooltip="{
delay: { delay: {
@ -81,26 +100,9 @@
autoHide: false, autoHide: false,
placement: 'auto-start' placement: 'auto-start'
}" }"
v-if="column.metadata_type_object != undefined && column.metadata_type_object.related_mapped_prop == 'title'" v-html="(relatedItem.title != undefined && relatedItem.title != '') ? relatedItem.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`"/>
v-html="`<span class='sr-only'>` + column.name + ': </span>' + ((relatedItem.title != undefined && relatedItem.title != '') ? relatedItem.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)"/> </div>
<div
<span
v-if="column.metadatum == 'row_thumbnail'"
class="table-thumb">
<blur-hash-image
:width="$thumbHelper.getWidth(relatedItem['thumbnail'], 'tainacan-small', 40)"
:height="$thumbHelper.getHeight(relatedItem['thumbnail'], 'tainacan-small', 40)"
:hash="$thumbHelper.getBlurhashString(relatedItem['thumbnail'], 'tainacan-small')"
:src="$thumbHelper.getSrc(relatedItem['thumbnail'], 'tainacan-small', relatedItem.document_mimetype)"
:alt="relatedItem.thumbnail_alt ? relatedItem.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500"
/>
</span>
</td>
<!-- Actions -->
<td
v-if="isEditable" v-if="isEditable"
class="actions-cell" class="actions-cell"
:label="$i18n.get('label_actions')"> :label="$i18n.get('label_actions')">
@ -117,11 +119,12 @@
placement: 'auto' placement: 'auto'
}" }"
class="icon"> class="icon">
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/> <i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit" />
</span> </span>
</a> </a>
</div> </div>
</td> </div>
<b-modal <b-modal
:width="1200" :width="1200"
:active.sync="editItemModal" :active.sync="editItemModal"
@ -131,9 +134,8 @@
style="height: 85vh" style="height: 85vh"
:src="adminFullURL + $routerHelper.getItemEditPath(collectionId, relatedItem.id) + '?iframemode=true&editingmetadata=' + relatedItemGroup.metadata_id" /> :src="adminFullURL + $routerHelper.getItemEditPath(collectionId, relatedItem.id) + '?iframemode=true&editingmetadata=' + relatedItemGroup.metadata_id" />
</b-modal> </b-modal>
</tr> </li>
</tbody> </ul>
</table>
</div> </div>
</div> </div>
</div> </div>
@ -148,25 +150,13 @@
relatedItems: Object, relatedItems: Object,
isLoading: Boolean, isLoading: Boolean,
isEditable: Boolean, isEditable: Boolean,
itemId: String,
collectionId: String collectionId: String
}, },
data() { data() {
return { return {
editItemModal: false, editItemModal: false,
adminFullURL: tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#', adminFullURL: tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#'
displayedMetadata: [
{
name: this.$i18n.get('label_thumbnail'),
metadatum: 'row_thumbnail',
slug: 'thumbnail',
},
{
name: this.$i18n.get('label_title'),
metadatum: 'row_title',
metadata_type_object: {core: true, related_mapped_prop: 'title'},
slug: 'title',
}
]
} }
}, },
computed: { computed: {
@ -187,12 +177,10 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.section-status { .section-status {
padding-bottom: 16px;
margin-left: -0.875rem; margin-left: -0.875rem;
font-size: 0.875em; font-size: 0.875em;
.field { .field {
padding: 10px 0 14px 0px !important;
.icon { .icon {
font-size: 1.125em !important; font-size: 1.125em !important;
@ -205,12 +193,58 @@
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px dashed var(--tainacan-info-color); border-bottom: 1px dashed var(--tainacan-info-color);
margin-bottom: 1rem; margin-bottom: 2rem;
} }
.tainacan-table { .related-item-group__items-list {
margin-top: -2rem; list-style: none;
padding: 0px;
margin-bottom: 1rem; margin-bottom: 1rem;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
@media screen and (max-width: 768px) {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
li {
display: flex;
align-items: center;
padding: 8px 32px 8px 6px;
width: 100%;
position: relative;
overflow-x: hidden;
&:hover {
cursor: pointer;
background-color: var(--tainacan-item-hover-background-color);
.actions-cell {
opacity: 1;
visibility: 1;
right: 0;
}
}
}
.actions-cell {
position: absolute;
right: -32px;
padding: 0 6px;
min-height: 28px;
min-width: 28px;
opacity: 0;
visibility: 0;
transition: right 0.3s ease;
}
.table-thumb {
display: block;
min-height: 28px;
min-width: 28px;
margin-left: 2px;
margin-right: 8px;
}
} }
} }
} }

4
src/views/admin/components/modals/available-exporters-modal.vue
View File

@ -7,9 +7,7 @@
tabindex="-1" tabindex="-1"
aria-modal aria-modal
ref="availableExportersModal"> ref="availableExportersModal">
<div <div style="width: auto">
class="tainacan-modal-content"
style="width: auto">
<header class="tainacan-modal-title"> <header class="tainacan-modal-title">
<h2>{{ this.$i18n.get('exporters') }}</h2> <h2>{{ this.$i18n.get('exporters') }}</h2>
<hr> <hr>

1
src/views/admin/pages/singles/item-page.vue
View File

@ -334,6 +334,7 @@
</div> </div>
<related-items-list <related-items-list
:item-id="itemId"
:collection-id="collectionId" :collection-id="collectionId"
:related-items="item.related_items" :related-items="item.related_items"
:is-editable="false" :is-editable="false"

1
src/views/tainacan-admin-i18n.php
View File

@ -587,6 +587,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_reset_zoom' => __( 'Reset zoom', 'tainacan'), 'label_reset_zoom' => __( 'Reset zoom', 'tainacan'),
'label_chart_export_options' => __( 'Chart export options', 'tainacan'), 'label_chart_export_options' => __( 'Chart export options', 'tainacan'),
'label_related_items' => __( 'Items that are related', 'tainacan'), 'label_related_items' => __( 'Items that are related', 'tainacan'),
'label_view_all_%s_related_items' => __( 'View all %s related items', 'tainacan'),
// Instructions. More complex sentences to guide user and placeholders // Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ), 'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),