From 3db946e48b94f390ca8b13eaf0b6bf55a823116e Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 28 Jun 2021 16:50:41 -0300
Subject: [PATCH] Adds link to full related items list and several visual
 adustments to it on admin side. #521

---
 .../components/edition/item-edition-form.vue  |   1 +
 .../components/lists/related-items-list.vue   | 266 ++++++++++--------
 .../modals/available-exporters-modal.vue      |   4 +-
 src/views/admin/pages/singles/item-page.vue   |   1 +
 .../carousel-collections-list-theme.vue       |   2 +-
 src/views/tainacan-admin-i18n.php             |   1 +
 6 files changed, 155 insertions(+), 120 deletions(-)

diff --git a/src/views/admin/components/edition/item-edition-form.vue b/src/views/admin/components/edition/item-edition-form.vue
index ebda5d46f..d45b7cdd6 100644
--- a/src/views/admin/components/edition/item-edition-form.vue
+++ b/src/views/admin/components/edition/item-edition-form.vue
@@ -582,6 +582,7 @@
                                 </div>
 
                                 <related-items-list
+                                        :item-id="itemId"
                                         :collection-id="collectionId"
                                         :related-items="item.related_items"
                                         :is-editable="!$route.query.iframemode"
diff --git a/src/views/admin/components/lists/related-items-list.vue b/src/views/admin/components/lists/related-items-list.vue
index 50d328051..e1cfabb0a 100644
--- a/src/views/admin/components/lists/related-items-list.vue
+++ b/src/views/admin/components/lists/related-items-list.vue
@@ -10,7 +10,7 @@
                             v-for="(relatedItemGroup, index) of relatedItemsArray"
                             :key="index"
                             class="related-item-group">
-                        <div class="columns">
+                        <div class="columns is-vcentered is-multiline">
                             <div class="column is-narrow">
                                 <div class="section-status">
                                     <div class="field has-addons">
@@ -35,105 +35,107 @@
                                     </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>
 
-                        <table class="tainacan-table">
-                            <tbody>
-                                <tr
-                                        v-for="(relatedItem, itemIndex) of relatedItemGroup.items"
-                                        :key="itemIndex">
-                                    
-                                    <td
-                                            class="status-cell"
-                                            @click="openItemOnNewTab(relatedItem)">
-                                        <span 
-                                                v-if="$statusHelper.hasIcon(relatedItem.status)"
-                                                class="icon has-text-gray"
-                                                v-tooltip="{
-                                                    content: $i18n.get('status_' + relatedItem.status),
-                                                    autoHide: true,
-                                                    placement: 'auto-start'
-                                                }">
-                                            <i 
-                                                    class="tainacan-icon tainacan-icon-1em"
-                                                    :class="$statusHelper.getIcon(relatedItem.status)"
-                                                    />
-                                        </span>
-                                    </td>
-                                    <!-- Item Displayed Metadata -->
-                                    <td
-                                            @click="openItemOnNewTab(relatedItem)"
-                                            :key="columnIndex"
-                                            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
+                        <ul class="related-item-group__items-list">
+                            <li
+                                    v-for="(relatedItem, itemIndex) of relatedItemGroup.items"
+                                    :key="itemIndex">
+                                
+                                <div
+                                        class="status-cell"
+                                        @click="openItemOnNewTab(relatedItem)">
+                                    <span 
+                                            v-if="$statusHelper.hasIcon(relatedItem.status)"
+                                            class="icon has-text-gray"
+                                            v-tooltip="{
+                                                content: $i18n.get('status_' + relatedItem.status),
+                                                autoHide: true,
+                                                placement: 'auto-start'
                                             }">
-                                        <p
-                                                v-tooltip="{
-                                                    delay: {
-                                                        show: 500,
-                                                        hide: 300,
-                                                    },
-                                                    content: relatedItem.title != undefined && relatedItem.title != '' ? relatedItem.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
-                                                    html: true,
-                                                    autoHide: false,
-                                                    placement: 'auto-start'
-                                                }"
-                                                v-if="column.metadata_type_object != undefined && column.metadata_type_object.related_mapped_prop == 'title'"
-                                                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>`)"/>
-                                        
-                                        <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>
+                                        <i 
+                                                class="tainacan-icon tainacan-icon-1em"
+                                                :class="$statusHelper.getIcon(relatedItem.status)"
+                                                />
+                                    </span>
+                                </div>
+                                <div @click="openItemOnNewTab(relatedItem)">
+                                    <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)"
+                                        style="width: 100%">
+                                    <p
+                                            v-tooltip="{
+                                                delay: {
+                                                    show: 500,
+                                                    hide: 300,
+                                                },
+                                                content: relatedItem.title != undefined && relatedItem.title != '' ? relatedItem.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
+                                                html: true,
+                                                autoHide: false,
+                                                placement: 'auto-start'
+                                            }"
+                                            v-html="(relatedItem.title != undefined && relatedItem.title != '') ? relatedItem.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`"/>
+                                </div>
+                                <div 
+                                        v-if="isEditable"
+                                        class="actions-cell"
+                                        :label="$i18n.get('label_actions')">
+                                    <div class="actions-container">
+                                        <a
+                                                v-if="!relatedItem.status != 'trash'"
+                                                id="button-edit"
+                                                @click.prevent.stop="editItemModal = true"
+                                                :aria-label="$i18n.getFrom('items','edit_item')">
+                                            <span
+                                                    v-tooltip="{
+                                                        content: $i18n.get('edit'),
+                                                        autoHide: true,
+                                                        placement: 'auto'
+                                                    }"
+                                                    class="icon">
+                                                <i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit" />
+                                            </span>
+                                        </a>
+                                    </div>
+                                </div>
 
-                                    </td>
-
-                                    <!-- Actions -->
-                                    <td 
-                                            v-if="isEditable"
-                                            class="actions-cell"
-                                            :label="$i18n.get('label_actions')">
-                                        <div class="actions-container">
-                                            <a
-                                                    v-if="!relatedItem.status != 'trash'"
-                                                    id="button-edit"
-                                                    @click.prevent.stop="editItemModal = true"
-                                                    :aria-label="$i18n.getFrom('items','edit_item')">
-                                                <span
-                                                        v-tooltip="{
-                                                            content: $i18n.get('edit'),
-                                                            autoHide: true,
-                                                            placement: 'auto'
-                                                        }"
-                                                        class="icon">
-                                                    <i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
-                                                </span>
-                                            </a>
-                                        </div>
-                                    </td>
-                                    <b-modal 
-                                            :width="1200"
-                                            :active.sync="editItemModal"
-                                            custom-class="tainacan-modal">
-                                        <iframe 
-                                                width="100%"
-                                                style="height: 85vh"
-                                                :src="adminFullURL + $routerHelper.getItemEditPath(collectionId, relatedItem.id) + '?iframemode=true&editingmetadata=' + relatedItemGroup.metadata_id" />
-                                    </b-modal>
-                                </tr>
-                            </tbody>
-                        </table>
+                                <b-modal 
+                                        :width="1200"
+                                        :active.sync="editItemModal"
+                                        custom-class="tainacan-modal">
+                                    <iframe 
+                                            width="100%"
+                                            style="height: 85vh"
+                                            :src="adminFullURL + $routerHelper.getItemEditPath(collectionId, relatedItem.id) + '?iframemode=true&editingmetadata=' + relatedItemGroup.metadata_id" />
+                                </b-modal>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
@@ -148,25 +150,13 @@
             relatedItems: Object,
             isLoading: Boolean,
             isEditable: Boolean,
+            itemId: String,
             collectionId: String
         },
         data() {
             return {
                 editItemModal: false,
-                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',
-                    }
-                ]
+                adminFullURL: tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#'
             }
         },
         computed: {
@@ -187,12 +177,10 @@
         
 <style lang="scss" scoped>
     .section-status {
-        padding-bottom: 16px;
         margin-left: -0.875rem;
         font-size: 0.875em;
 
         .field {
-            padding: 10px 0 14px 0px !important;
 
             .icon  {
                 font-size: 1.125em !important;
@@ -205,12 +193,58 @@
             
             &:not(:last-child) {
                 border-bottom: 1px dashed var(--tainacan-info-color);
-                margin-bottom: 1rem;
+                margin-bottom: 2rem;
             }
-
-            .tainacan-table {
-                margin-top: -2rem;
+            
+            .related-item-group__items-list {
+                list-style: none;
+                padding: 0px;
                 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;
+                }
             }
         }
     }
diff --git a/src/views/admin/components/modals/available-exporters-modal.vue b/src/views/admin/components/modals/available-exporters-modal.vue
index b57062bf8..d985d142a 100644
--- a/src/views/admin/components/modals/available-exporters-modal.vue
+++ b/src/views/admin/components/modals/available-exporters-modal.vue
@@ -7,9 +7,7 @@
             tabindex="-1"
             aria-modal
             ref="availableExportersModal">
-        <div
-                class="tainacan-modal-content"
-                style="width: auto">
+        <div style="width: auto">
             <header class="tainacan-modal-title">
                 <h2>{{ this.$i18n.get('exporters') }}</h2>
                 <hr>
diff --git a/src/views/admin/pages/singles/item-page.vue b/src/views/admin/pages/singles/item-page.vue
index bd2e724b9..1549f4d90 100644
--- a/src/views/admin/pages/singles/item-page.vue
+++ b/src/views/admin/pages/singles/item-page.vue
@@ -334,6 +334,7 @@
                             </div>
 
                             <related-items-list
+                                    :item-id="itemId"
                                     :collection-id="collectionId"
                                     :related-items="item.related_items"
                                     :is-editable="false"
diff --git a/src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list-theme.vue b/src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list-theme.vue
index 67e8dcb9b..d2feac355 100644
--- a/src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list-theme.vue
+++ b/src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list-theme.vue
@@ -165,7 +165,7 @@
                         <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                         <path
                                 d="M0 0h24v24H0z"
-                                fill="none"/>                        
+                                fill="none"/>
                     </svg>
                 </button>
             </div>
diff --git a/src/views/tainacan-admin-i18n.php b/src/views/tainacan-admin-i18n.php
index 6b35a01a4..bb6ea7dbe 100644
--- a/src/views/tainacan-admin-i18n.php
+++ b/src/views/tainacan-admin-i18n.php
@@ -587,6 +587,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_reset_zoom'								 => __( 'Reset zoom', 'tainacan'),
 	'label_chart_export_options'					 => __( 'Chart export options', '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
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),