From e78b72e713962986544106377a9398ddf5b36f6b Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 23 Feb 2021 11:00:15 -0300
Subject: [PATCH 1/9] Adds required icon on metadata list. Also tooltips for
 private an required icons. #481

---
 .../compound/child-metadata-list.vue          | 19 ++++++++++++++-
 src/views/admin/pages/lists/metadata-page.vue | 23 ++++++++++++++++---
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
index d7972801c..fdf77caf5 100644
--- a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
+++ b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
@@ -75,6 +75,17 @@
                             :class="{'is-danger': formWithErrors == metadatum.id }">
                             {{ metadatum.name }}
                     </span>
+                    <span 
+                            v-if="metadatum.required === 'yes'"
+                            class="label-details"
+                            v-tooltip="{
+                                content: $i18n.get('label_required'),
+                                autoHide: true,
+                                classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                placement: 'auto-start'
+                            }">
+                        *&nbsp;
+                    </span>
                     <span   
                             v-if="metadatum.id != undefined && metadatum.metadata_type_object"
                             class="label-details">  
@@ -97,7 +108,13 @@
                         </span>
                         <span 
                                 v-if="metadatum.status == 'private'"
-                                class="icon">
+                                class="icon"
+                                v-tooltip="{
+                                    content: $i18n.get('status_private'),
+                                    autoHide: true,
+                                    classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                    placement: 'auto-start'
+                                }">
                             <i class="tainacan-icon tainacan-icon-private"/>
                         </span>
                     </span>
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index 2aff8b20b..3a82bc574 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -47,7 +47,7 @@
                                     :animation="250">
                                 <div    
                                         v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)"
-                                        :key="metadatum.id">                
+                                        :key="metadatum.id">
                                     <div 
                                             class="active-metadatum-item"
                                             :class="{
@@ -94,6 +94,17 @@
                                                     :class="{'is-danger': formWithErrors == metadatum.id }">
                                                     {{ metadatum.name }}
                                             </span>
+                                            <span 
+                                                    v-if="metadatum.required === 'yes'"
+                                                    class="label-details"
+                                                    v-tooltip="{
+                                                        content: $i18n.get('label_required'),
+                                                        autoHide: true,
+                                                        classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                                        placement: 'auto-start'
+                                                    }">
+                                                *&nbsp;
+                                            </span>
                                             <span   
                                                     v-if="metadatum.id != undefined && metadatum.metadata_type_object"
                                                     class="label-details"
@@ -106,8 +117,14 @@
                                                 {{ $i18n.get('info_not_saved') }}
                                                 </span>
                                                 <span 
-                                                        v-if="metadatum.status == 'private'"
-                                                        class="icon">
+                                                        v-if="metadatum.status === 'private'"
+                                                        class="icon"
+                                                        v-tooltip="{
+                                                            content: $i18n.get('status_private'),
+                                                            autoHide: true,
+                                                            classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                                            placement: 'auto-start'
+                                                        }">
                                                     <i class="tainacan-icon tainacan-icon-private"/>
                                                 </span>
                                             </span>

From 7ca32e28c63dddbefcea4f77858aec071a43408a Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 23 Feb 2021 15:53:59 -0300
Subject: [PATCH 2/9] Updates to hovered metadata and filters colors #481

---
 src/views/admin/pages/lists/filters-page.vue  | 125 ++++++++----------
 src/views/admin/pages/lists/metadata-page.vue | 123 +++++++----------
 src/views/admin/scss/_tooltips.scss           |   4 +-
 3 files changed, 108 insertions(+), 144 deletions(-)

diff --git a/src/views/admin/pages/lists/filters-page.vue b/src/views/admin/pages/lists/filters-page.vue
index 183de0763..27758f754 100644
--- a/src/views/admin/pages/lists/filters-page.vue
+++ b/src/views/admin/pages/lists/filters-page.vue
@@ -44,7 +44,7 @@
                         <div  
                                 class="active-filter-item" 
                                 :class="{
-                                    'not-sortable-item': (isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true),
+                                    'not-sortable-item': (isRepositoryLevel || isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true),
                                     'not-focusable-item': openedFilterId == filter.id, 
                                     'disabled-filter': filter.enabled == false,
                                     'inherited-filter': filter.inherited || isRepositoryLevel
@@ -98,7 +98,13 @@
                                     </span>
                                     <span 
                                             v-if="filter.status == 'private'"
-                                            class="icon">
+                                            class="icon"
+                                            v-tooltip="{
+                                                content: $i18n.get('status_private'),
+                                                autoHide: true,
+                                                classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                                placement: 'auto-start'
+                                            }">
                                         <i class="tainacan-icon tainacan-icon-private"/>
                                     </span>
                                 </span> 
@@ -822,6 +828,7 @@ export default {
         .column {
             overflow-x: hidden;
             overflow-y: auto;
+            padding: 0.75em 0;
 
             &>section.field {
                 position: absolute;
@@ -866,7 +873,7 @@ export default {
             }
 
             &.filters-area-receive {
-                border: 1px dashed gray;
+                border: 1px dashed var(--tainacan-gray4);
             }
 
             .collapse {
@@ -928,7 +935,7 @@ export default {
                 .controls { 
                     font-size: 0.875em;
                     position: absolute;
-                    right: 5px; 
+                    right: 10px; 
                     top: 10px;
                     .switch {
                         position: relative;
@@ -941,53 +948,38 @@ export default {
                     }
                 }
 
-                &.not-sortable-item, &.not-sortable-item:hover {
+                &.not-sortable-item,
+                &.not-sortable-item:hover {
                     cursor: default;
                     background-color: var(--tainacan-white) !important;
                 } 
-                &.not-focusable-item, &.not-focusable-item:hover {
+                &.not-focusable-item,
+                &.not-focusable-item:hover {
                     cursor: default;
                 
                     .metadatum-name {
                         color: var(--tainacan-secondary);
                     }
                 }
-                &.disabled-metadatum {
+                &.disabled-filter:not(.not-sortable-item),
+                &.disabled-filter:not(.not-sortable-item):hover {
                     color: var(--tainacan-gray3);
+                    .label-details, .not-saved {
+                        color: var(--tainacan-gray3) !important;
+                    }
                 }    
             }
             .active-filter-item:hover:not(.not-sortable-item) {
-                background-color: var(--tainacan-secondary);
-                border-color: var(--tainacan-secondary);
-                color: var(--tainacan-white) !important;
+                background-color: var(--tainacan-turquoise1);
+                border-color: var(--tainacan-turquoise1);
 
-                &>.field, form {
-                    background-color: var(--tainacan-white) !important;
+                .label-details, .not-saved {
+                    color: var(--tainacan-gray4) !important;
                 }
-
                 .grip-icon { 
-                    color: var(--tainacan-white);
+                    color: var(--tainacan-secondary);
                 }
 
-                .label-details, .icon, .icon-level-identifier>i {
-                    color: var(--tainacan-white) !important;
-                }
-
-                .switch.is-small {
-                    input[type="checkbox"] + .check {
-                        background-color: var(--tainacan-secondary) !important;
-                        border: 1.5px solid white !important;
-                        &::before { background-color: var(--tainacan-white) !important; }
-                    } 
-                    input[type="checkbox"]:checked + .check {
-                        border: 1.5px solid white !important;
-                        &::before { background-color: var(--tainacan-white) !important; }
-                    }
-                    &:hover input[type="checkbox"] + .check {
-                        border: 1.5px solid white !important;
-                        background-color: var(--tainacan-secondary) !important;
-                    }
-                }
             }
             .sortable-ghost {
                 border: 1px dashed var(--tainacan-gray2);
@@ -999,9 +991,7 @@ export default {
                 position: relative;
 
                 .grip-icon { 
-                    color: var(--tainacan-gray3);
-                    top: 2px;
-                    position: relative;
+                    color: var(--tainacan-white); 
                 }
             }
         }
@@ -1103,56 +1093,51 @@ export default {
                 position: relative;
                 top: 2px;
             }
-            .available-metadatum-item:not(.disabled-metadatum)  {
-                &:hover{
-                    background-color: var(--tainacan-secondary);
-                    border-color: var(--tainacan-secondary);
-                    color: var(--tainacan-white) !important;
-                    position: relative;
-                    left: -4px;
+            .available-metadatum-item:not(.disabled-metadatum):hover{
+                background-color: var(--tainacan-turquoise1);
+                border-color: var(--tainacan-turquoise2);
+                position: relative;
+                left: -4px;
 
-                    &:after {
-                        border-color: transparent var(--tainacan-secondary) transparent transparent;
-                    }
-                    &:before {
-                        border-color: transparent var(--tainacan-secondary) transparent transparent;
-                    }
-                    .icon-level-identifier>i {
-                        color: var(--tainacan-white) !important;
-                    }
-                    .grip-icon {
-                        color: var(--tainacan-white) !important;
-                    }
+                &:after {
+                    border-color: transparent var(--tainacan-turquoise1) transparent transparent;
+                }
+                &:before {
+                    border-color: transparent var(--tainacan-turquoise2) transparent transparent;
+                }
+                .grip-icon {
+                    color: var(--tainacan-secondary) !important;
                 }
             }
         }
 
         .inherited-filter {
             &.active-filter-item:hover:not(.not-sortable-item) {
-                background-color: var(--tainacan-blue5);
-                border-color: var(--tainacan-blue5);
+                background-color: var(--tainacan-blue1);
+                border-color: var(--tainacan-blue1);
                 
-                .switch.is-small {
-                    input[type="checkbox"] + .check {
-                        background-color: var(--tainacan-blue5) !important;
-                    } 
-                    &:hover input[type="checkbox"] + .check {
-                        background-color: var(--tainacan-blue5) !important;
-                    }
+                .grip-icon { 
+                    color: var(--tainacan-blue5) !important; 
                 }
             }
         }
         .inherited-metadatum {
-
-            &.available-metadatum-item:hover {
-                background-color: var(--tainacan-blue5) !important;
-                border-color: var(--tainacan-blue5) !important;
+            .switch.is-small input[type="checkbox"]:checked + .check {
+                border: 1.5px solid var(--tainacan-blue5);
+                &::before { background-color: var(--tainacan-blue5); }
+            }
+            &.available-metadatum-item:not(.disabled-metadatum):hover {
+                background-color: var(--tainacan-blue1) !important;
+                border-color: var(--tainacan-blue2) !important;
             
+                .grip-icon { 
+                    color: var(--tainacan-blue5) !important; 
+                }
                 &:after {
-                    border-color: transparent var(--tainacan-blue5) transparent transparent !important;
+                    border-color: transparent var(--tainacan-blue1) transparent transparent !important;
                 }
                 &:before {
-                    border-color: transparent var(--tainacan-blue5) transparent transparent !important;
+                    border-color: transparent var(--tainacan-blue2) transparent transparent !important;
                 }
 
             }
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index 3a82bc574..6f7e76f48 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -598,9 +598,7 @@ export default {
 </script>
 
 <style lang="scss">
-    #tainacan-admin-app .metadata-list-page .available-metadata-area .available-metadatum-item:hover .icon {
-        color: white !important;
-    }
+
     .metadata-list-page {
         padding-bottom: 0;
 
@@ -620,12 +618,12 @@ export default {
                 flex-shrink: 1;
                 flex-grow: 1;
             }
-            a.back-link{
+            a.back-link {
                 font-weight: 500;
                 float: right;
                 margin-top: 5px;
             }
-            hr{
+            hr {
                 margin: 3px 0px 4px 0px; 
                 height: 1px;
                 background-color: var(--tainacan-secondary);
@@ -641,6 +639,7 @@ export default {
         .column {
             overflow-x: hidden;
             overflow-y: auto;
+            padding: 0.75em 0;
 
             &>section.field {
                 position: absolute;
@@ -694,7 +693,7 @@ export default {
             }
 
             &.metadata-area-receive {
-                border: 1px dashed gray;
+                border: 1px dashed var(--tainacan-gray4);
             }
 
             .collapse {
@@ -749,7 +748,7 @@ export default {
                 .controls { 
                     font-size: 0.875em;
                     position: absolute;
-                    right: 5px;
+                    right: 10px;
                     top: 10px;
                     .switch {
                         position: relative;
@@ -767,48 +766,31 @@ export default {
                     cursor: default;
                     background-color: var(--tainacan-white) !important;
                 } 
-                &.not-focusable-item, &.not-focusable-item:hover {
+                &.not-focusable-item,
+                &.not-focusable-item:hover {
                     cursor: default;
                 
                     .metadatum-name {
                         color: var(--tainacan-secondary);
                     }
                 }
-                &.disabled-metadatum {
+                &.disabled-metadatum:not(.not-sortable-item),
+                &.disabled-metadatum:not(.not-sortable-item):hover {
                     color: var(--tainacan-gray3);
-                }    
+                    .label-details, .not-saved {
+                        color: var(--tainacan-gray3) !important;
+                    }
+                }
             }
             .active-metadatum-item:hover:not(.not-sortable-item) {
-                background-color: var(--tainacan-secondary);
-                border-color: var(--tainacan-secondary);
-                color: var(--tainacan-white) !important;
-                        
-                &>.field, form {
-                    background-color: var(--tainacan-white) !important;
-                }
+                background-color: var(--tainacan-turquoise1);
+                border-color: var(--tainacan-turquoise1);
 
-                .label-details, .icon, .not-saved, .icon-level-identifier>i {
-                    color: var(--tainacan-white) !important;
+                .label-details, .not-saved {
+                    color: var(--tainacan-gray4) !important;
                 }
-
                 .grip-icon { 
-                    color: var(--tainacan-white); 
-                }
-
-                .switch.is-small {
-                    input[type="checkbox"] + .check {
-                        background-color: var(--tainacan-secondary) !important;
-                        border: 1.5px solid white !important;
-                        &::before { background-color: var(--tainacan-white) !important; }
-                    } 
-                    input[type="checkbox"]:checked + .check {
-                        border: 1.5px solid white !important;
-                        &::before { background-color: var(--tainacan-white) !important; }
-                    }
-                    &:hover input[type="checkbox"] + .check {
-                        border: 1.5px solid white !important;
-                        background-color: var(--tainacan-secondary) !important;
-                    }
+                    color: var(--tainacan-secondary) !important; 
                 }
             }
             .sortable-ghost {
@@ -932,13 +914,13 @@ export default {
                 }
                 25%  {
                     color: var(--tainacan-white);            
-                    background-color: #2cb4c1; 
-                    border-color: #2cb4c1;
+                    background-color: var(--tainacan-secondary); 
+                    border-color: var(--tainacan-secondary);
                 }
                 75%  {
                     color: var(--tainacan-white);            
-                    background-color: #2cb4c1; 
-                    border-color: #2cb4c1;
+                    background-color: var(--tainacan-secondary); 
+                    border-color: var(--tainacan-secondary);
                 }
                 100% {
                     color: #222;             
@@ -947,10 +929,10 @@ export default {
                 }
             }
             @keyframes hightlighten-icon {
-                0%   { color: #b1b1b1; }
+                0%   { color: var(--tainacan-gray3); }
                 25%  { color: var(--tainacan-white); }
                 75%  { color: var(--tainacan-white); }
-                100% { color: #b1b1b1; }
+                100% { color: var(--tainacan-gray3); }
             }
             @keyframes hightlighten-arrow {
                 0%   {
@@ -958,12 +940,12 @@ export default {
                     border-color: transparent white transparent transparent; 
                 }
                 25%  {
-                    border-color: transparent #2cb4c1 transparent transparent;
-                    border-color: transparent #2cb4c1 transparent transparent; 
+                    border-color: transparent var(--tainacan-secondary) transparent transparent;
+                    border-color: transparent var(--tainacan-secondary) transparent transparent; 
                 }
                 75%  {
-                    border-color: transparent #2cb4c1 transparent transparent;
-                    border-color: transparent #2cb4c1 transparent transparent; 
+                    border-color: transparent var(--tainacan-secondary) transparent transparent;
+                    border-color: transparent var(--tainacan-secondary)transparent transparent; 
                 }
                 100% {
                     border-color: transparent white transparent transparent;
@@ -992,51 +974,48 @@ export default {
                 }
             }
             .available-metadatum-item:hover {
-                background-color: var(--tainacan-secondary);
-                border-color: var(--tainacan-secondary);
-                color: var(--tainacan-white);
+                background-color: var(--tainacan-turquoise1);
+                border-color: var(--tainacan-turquoise2);
                 position: relative;
                 left: -4px;
 
                 &:after {
-                    border-color: transparent var(--tainacan-secondary) transparent transparent;
+                    border-color: transparent var(--tainacan-turquoise1) transparent transparent;
                 }
                 &:before {
-                    border-color: transparent var(--tainacan-secondary) transparent transparent;
+                    border-color: transparent var(--tainacan-turquoise2) transparent transparent;
                 }
-                .icon {
-                    color: var(--tainacan-white) !important;
-                }
-            
                 .grip-icon { 
-                    color: var(--tainacan-white);
+                    color: var(--tainacan-secondary);
                 }
-                
             }
         }
         .inherited-metadatum {
+            .switch.is-small input[type="checkbox"]:checked + .check {
+                border: 1.5px solid var(--tainacan-blue5);
+                &::before { background-color: var(--tainacan-blue5); }
+            }
+
             &.active-metadatum-item:hover:not(.not-sortable-item) {
-                background-color: var(--tainacan-blue5);
-                border-color: var(--tainacan-blue5);
+                background-color: var(--tainacan-blue1);
+                border-color: var(--tainacan-blue1);
                 
-                .switch.is-small {
-                    input[type="checkbox"] + .check {
-                        background-color: var(--tainacan-blue5) !important;
-                    } 
-                    &:hover input[type="checkbox"] + .check {
-                        background-color: var(--tainacan-blue5) !important;
-                    }
+                .grip-icon { 
+                    color: var(--tainacan-blue5) !important; 
                 }
             }
             &.available-metadatum-item:hover {
-                background-color: var(--tainacan-blue5) !important;
-                border-color: var(--tainacan-blue5) !important;
-            
+                background-color: var(--tainacan-blue1) !important;
+                border-color: var(--tainacan-blue2) !important;
+
+                .grip-icon { 
+                    color: var(--tainacan-blue5) !important; 
+                }
                 &:after {
-                    border-color: transparent var(--tainacan-blue5) transparent transparent !important;
+                    border-color: transparent var(--tainacan-blue1) transparent transparent !important;
                 }
                 &:before {
-                    border-color: transparent var(--tainacan-blue5) transparent transparent !important;
+                    border-color: transparent var(--tainacan-blue2) transparent transparent !important;
                 }
             }
         }
diff --git a/src/views/admin/scss/_tooltips.scss b/src/views/admin/scss/_tooltips.scss
index eda76cb2a..deaf10c92 100644
--- a/src/views/admin/scss/_tooltips.scss
+++ b/src/views/admin/scss/_tooltips.scss
@@ -14,10 +14,10 @@
 }
 .repository-tooltip {
     .tooltip-inner {
-        background: var(--tainacan-blue1) !important;
+        background: var(--tainacan-blue2) !important;
     }
     .tooltip-arrow {
-        border-color: var(--tainacan-blue1) !important;
+        border-color: var(--tainacan-blue2) !important;
     }
 }
 .tooltip {

From 7153b070c95c9da4299db283beb132d09d241342 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 23 Feb 2021 17:55:22 -0300
Subject: [PATCH 3/9] Begins implementation of metadata compact and detailed
 list view. #481.

---
 .../edition/collection-edition-form.vue       |  1 +
 .../components/other/metadatum-details.vue    | 92 +++++++++++++++++++
 src/views/admin/pages/lists/metadata-page.vue | 40 +++++++-
 src/views/tainacan-admin-i18n.php             |  4 +-
 4 files changed, 132 insertions(+), 5 deletions(-)
 create mode 100644 src/views/admin/components/other/metadatum-details.vue

diff --git a/src/views/admin/components/edition/collection-edition-form.vue b/src/views/admin/components/edition/collection-edition-form.vue
index ff79a6d22..c44f6a255 100644
--- a/src/views/admin/components/edition/collection-edition-form.vue
+++ b/src/views/admin/components/edition/collection-edition-form.vue
@@ -4,6 +4,7 @@
             :class="{'repository-level-page' : isNewCollection }">
         <tainacan-title 
                 :bread-crumb-items="[{ path: '', label: $i18n.get('collection') }]"/>
+        
         <form 
                 v-if="collection != null && collection != undefined && ((isNewCollection && $userCaps.hasCapability('tnc_rep_edit_collections')) || (!isNewCollection && collection.current_user_can_edit))" 
                 class="tainacan-form" 
diff --git a/src/views/admin/components/other/metadatum-details.vue b/src/views/admin/components/other/metadatum-details.vue
new file mode 100644
index 000000000..c62bbcc8e
--- /dev/null
+++ b/src/views/admin/components/other/metadatum-details.vue
@@ -0,0 +1,92 @@
+<template>
+<div class="tainacan-form metadatum-details">
+    <div 
+            v-if="metadatum.description"
+            class="field">
+        <div class="label">{{ $i18n.getHelperTitle('metadata', 'description') }}</div>
+        <div class="content">{{ metadatum.description }}</div>
+    </div>
+    <div 
+            v-if="metadatum.semantic_uri"
+            class="field">
+        <div class="label">{{ $i18n.getHelperTitle('metadata', 'semantic_uri') }}</div>
+        <div class="content">{{ metadatum.semantic_uri }}</div>
+    </div>
+        <div class="field">
+        <div class="label">{{ $i18n.getHelperTitle('metadata', 'status') }}</div>
+        <div class="content">
+            <template v-if="metadatum.status === 'publish'">{{ $i18n.get('publish_visibility') }}</template>
+            <template v-if="metadatum.status === 'private'">{{ $i18n.get('private_visibility') }}</template>
+        </div>
+    </div>
+        <div class="field">
+        <div class="label">{{ $i18n.get('label_display') }}</div>
+        <div class="content">
+            <template v-if="metadatum.display === 'yes'">{{ $i18n.get('label_display_default') }}</template>
+            <template v-if="metadatum.display === 'no'">{{ $i18n.get('label_not_display') }}</template>
+            <template v-if="metadatum.display === 'never'">{{ $i18n.get('label_display_never') }}</template>
+        </div>
+    </div>
+    <div class="field">
+        <div class="label">{{ $i18n.get('label_insert_options') }}</div>
+        <div class="content">{{ insertOptions }}</div>
+    </div>
+    <template 
+            v-if="metadatum.metadata_type_options">
+        <div class="field">
+            <div class="label">{{ $i18n.get('label_options') }}</div>
+            <div class="content">{{ JSON.stringify(metadatum.metadata_type_options) }}</div>
+        </div>
+    </template>
+</div>
+</template>
+
+<script>
+export default {
+    props: {
+        metadatum: Object
+    },
+    computed: {
+        insertOptions() {
+            const enableInsertOptions = [];
+
+            if (this.metadatum.required)
+                enableInsertOptions.push(this.$i18n.getHelperTitle('metadata', 'required'));
+            if (this.metadatum.multiple)
+                enableInsertOptions.push(this.$i18n.getHelperTitle('metadata', 'multiple'));
+            if (this.metadatum.collection_key)
+                enableInsertOptions.push(this.$i18n.getHelperTitle('metadata', 'collection_key'));
+
+            return enableInsertOptions.join(', ');
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.metadatum-details {
+    padding: 0.75em 1.5em 0.75em 3.5em;
+    -moz-column-count: 2;
+    -moz-column-gap: 0;
+    -moz-column-rule: none;
+    -webkit-column-count: 2;
+    -webkit-column-gap: 0;
+    -webkit-column-rule: none;
+    column-count: 2;
+    column-gap: 4em;
+    column-rule: none;
+
+    &>.field, &>section {
+        -webkit-column-break-inside: avoid;
+        page-break-inside: avoid;
+        break-inside: avoid;
+        margin-bottom: 1em;
+    }
+    .field > .field:not(:last-child) {
+        margin-bottom: 0em;
+    }
+    .field .content {
+        font-size: 0.9em;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index 6f7e76f48..88a81b551 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="{ 'repository-level-page page-container': isRepositoryLevel }">
         <tainacan-title 
-                    :bread-crumb-items="[{ path: '', label: this.$i18n.get('metadata') }]"/>
+                :bread-crumb-items="[{ path: '', label: this.$i18n.get('metadata') }]"/>
         
         <template v-if="isRepositoryLevel">
             <p>{{ $i18n.get('info_repository_metadata_inheritance') }}</p>
@@ -32,7 +32,24 @@
                                     <p>{{ $i18n.get('info_there_is_no_metadatum' ) }}</p>
                                     <p>{{ $i18n.get('info_create_metadata' ) }}</p>
                                 </div>
-                            </section>     
+                            </section>
+                            <div class="tainacan-form sub-header">
+                                <h3 class="label has-text-secondary">{{ $i18n.get('metadata') }}</h3>
+
+                                <b-field class="header-item">
+                                    <b-select
+                                            id="tainacan-switch-compact-metadata-list" 
+                                            size="is-small"
+                                            v-model="showCompactMetadataList">
+                                        <option :value="true">
+                                            {{ $i18n.get('label_compact_list') }}
+                                        </option>
+                                        <option :value="false">
+                                            {{ $i18n.get('label_detailed_list') }}
+                                        </option>
+                                    </b-select>
+                                </b-field>
+                            </div>
                             <draggable 
                                     v-model="activeMetadatumList"
                                     class="active-metadata-area"
@@ -51,6 +68,7 @@
                                     <div 
                                             class="active-metadatum-item"
                                             :class="{
+                                                'is-compact-item': showCompactMetadataList,
                                                 'not-sortable-item': isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder,
                                                 'not-focusable-item': openedMetadatumId == metadatum.id,
                                                 'disabled-metadatum': metadatum.enabled == false,
@@ -175,6 +193,11 @@
                                                 </a>
                                             </span>
                                         </div>
+                                        <transition name="form-collapse">
+                                            <metadatum-details 
+                                                    v-if="!showCompactMetadataList && openedMetadatumId !== metadatum.id"
+                                                    :metadatum="metadatum" />
+                                        </transition>
                                         <transition name="form-collapse">
                                             <div v-if="openedMetadatumId == metadatum.id">
                                                 <metadatum-edition-form
@@ -271,6 +294,7 @@
 <script>
 import MetadataMappingList from '../../components/lists/metadata-mapping-list.vue';
 import MetadatumEditionForm from '../../components/edition/metadatum-edition-form.vue';
+import MetadatumDetails from '../../components/other/metadatum-details.vue';
 import ChildMetadataList from '../../components/metadata-types/compound/child-metadata-list.vue';
 import CustomDialog from '../../components/other/custom-dialog.vue';
 import { mapGetters, mapActions } from 'vuex';
@@ -280,7 +304,8 @@ export default {
     components: {
         MetadataMappingList,
         MetadatumEditionForm,
-        ChildMetadataList
+        ChildMetadataList,
+        MetadatumDetails
     },
     data() {
         return {
@@ -294,7 +319,8 @@ export default {
             formWithErrors: '',
             hightlightedMetadatum: '',
             editForms: {},
-            columnsTopY: 0
+            columnsTopY: 0,
+            showCompactMetadataList: true
         }
     },
     computed: {
@@ -664,6 +690,12 @@ export default {
             }
         }
 
+        .sub-header {
+            display: flex;
+            justify-content: space-between;
+            padding: 0.5em;
+        }
+
         .loading-spinner {
             animation: spinAround 500ms infinite linear;
             border: 2px solid var(--tainacan-gray2);
diff --git a/src/views/tainacan-admin-i18n.php b/src/views/tainacan-admin-i18n.php
index 019bf4416..9fa7238c5 100644
--- a/src/views/tainacan-admin-i18n.php
+++ b/src/views/tainacan-admin-i18n.php
@@ -536,7 +536,9 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_switch_document_type'					 => __( 'Switch document type', 'tainacan' ),
 	'label_sending_form'							 => __( 'Sending form...', 'tainacan' ),
 	'label_form_not_loaded'							 => __( 'This form could not be loaded', 'tainacan' ),
-	
+	'label_compact_list'							 => __( 'Compact list', 'tainacan'),
+	'label_detailed_list'							 => __( 'Detailed list', 'tainacan'),
+
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),
 	'instruction_delete_selected_items'              => __( 'Delete selected items', 'tainacan' ),

From 9fd2310fc58fbe3112181bc2894710eb050cc218 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 25 Feb 2021 11:37:46 -0300
Subject: [PATCH 4/9] Adds textual filters to metadata and filters list #481

---
 .../compound/child-metadata-list.vue          |  14 +-
 .../class-tainacan-metadata-type.php          |  22 ++++
 .../components/other/metadatum-details.vue    |  22 ++--
 src/views/admin/pages/lists/filters-page.vue  |  89 +++++++++----
 src/views/admin/pages/lists/metadata-page.vue | 123 ++++++++++++++----
 src/views/tainacan-admin-i18n.php             |   2 +
 6 files changed, 206 insertions(+), 66 deletions(-)

diff --git a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
index fdf77caf5..26ce8a56b 100644
--- a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
+++ b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
@@ -14,8 +14,8 @@
                 </p>
                 <p>{{ $i18n.get('info_create_child_metadata') }}</p>
             </div>
-        </section>    
-        <draggable 
+        </section>
+        <draggable
                 v-model="childrenMetadata"
                 :style="{ minHeight: childrenMetadata.length > 0 ? '40px' : '70px' }"
                 class="active-metadata-area child-metadata-area"
@@ -31,18 +31,19 @@
             <div 
                     class="active-metadatum-item"
                     :class="{
-                        'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId,
+                        'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '',
                         'not-focusable-item': openedMetadatumId == metadatum.id,
                         'disabled-metadatum': parent.enabled == false,
                         'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel
                     }" 
                     v-for="(metadatum, index) in childrenMetadata"
-                    :key="metadatum.id">
+                    :key="metadatum.id"
+                    v-show="metadataNameFilterString == '' || metadatum.name.toString().toLowerCase().indexOf(metadataNameFilterString.toString().toLowerCase()) >= 0">
                 <div 
                         :ref="'metadatum-handler-' + metadatum.id"
                         class="handle">
                     <span 
-                            :style="{ opacity: !( metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId) ? '1.0' : '0.0' }"
+                            :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '') ? '1.0' : '0.0' }"
                             v-tooltip="{
                                 content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
                                 autoHide: true,
@@ -195,7 +196,8 @@
         props: {
             isRepositoryLevel: Boolean,
             parent: Object,
-            isParentMultiple: Boolean
+            isParentMultiple: Boolean,
+            metadataNameFilterString: String
         },
         data() {
             return {
diff --git a/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php b/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php
index 6ff671cad..c8d133efa 100644
--- a/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php
+++ b/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php
@@ -199,12 +199,33 @@ abstract class Metadata_Type  {
         return isset($options[$key]) ? $options[$key] : '';
     }
 
+    /**
+     * Gets print-ready version of the options list in html
+     *
+     * Checks if at least one option exists, otherwise return an empty string
+     * 
+     * @return string An html content with labels and values for the options or an empty string
+     */
+    public function get_options_as_html() {
+        $options_as_html = '';
+        $options = $this->get_options();
+        
+        if ( count($options) > 0 ) {
+            foreach($options as $option_label => $option_value) {
+                $options_as_html .= '<div class="field"><div class="label">' . $option_label .'</div>';
+                $options_as_html .= '<div class="value">' . $option_value . '</div></div>';
+            }
+        }
+        return $options_as_html;
+    }
+
     /**
      * allow i18n from messages
      */
     public function get_form_labels(){
        return [];
     }
+
     /**
      * generate the metadata for this metadatum type
      */
@@ -226,6 +247,7 @@ abstract class Metadata_Type  {
         $attributes['primitive_type']      = $this->get_primitive_type();
         $attributes['form_component']      = $this->get_form_component();
         $attributes['preview_template']    = $this->get_preview_template();
+        $attributes['options_as_html']     = $this->get_options_as_html();
 
         return $attributes;
         
diff --git a/src/views/admin/components/other/metadatum-details.vue b/src/views/admin/components/other/metadatum-details.vue
index c62bbcc8e..54b1f6cf4 100644
--- a/src/views/admin/components/other/metadatum-details.vue
+++ b/src/views/admin/components/other/metadatum-details.vue
@@ -4,24 +4,24 @@
             v-if="metadatum.description"
             class="field">
         <div class="label">{{ $i18n.getHelperTitle('metadata', 'description') }}</div>
-        <div class="content">{{ metadatum.description }}</div>
+        <div class="value">{{ metadatum.description }}</div>
     </div>
     <div 
             v-if="metadatum.semantic_uri"
             class="field">
         <div class="label">{{ $i18n.getHelperTitle('metadata', 'semantic_uri') }}</div>
-        <div class="content">{{ metadatum.semantic_uri }}</div>
+        <div class="value">{{ metadatum.semantic_uri }}</div>
     </div>
         <div class="field">
         <div class="label">{{ $i18n.getHelperTitle('metadata', 'status') }}</div>
-        <div class="content">
+        <div class="value">
             <template v-if="metadatum.status === 'publish'">{{ $i18n.get('publish_visibility') }}</template>
             <template v-if="metadatum.status === 'private'">{{ $i18n.get('private_visibility') }}</template>
         </div>
     </div>
         <div class="field">
         <div class="label">{{ $i18n.get('label_display') }}</div>
-        <div class="content">
+        <div class="value">
             <template v-if="metadatum.display === 'yes'">{{ $i18n.get('label_display_default') }}</template>
             <template v-if="metadatum.display === 'no'">{{ $i18n.get('label_not_display') }}</template>
             <template v-if="metadatum.display === 'never'">{{ $i18n.get('label_display_never') }}</template>
@@ -29,15 +29,11 @@
     </div>
     <div class="field">
         <div class="label">{{ $i18n.get('label_insert_options') }}</div>
-        <div class="content">{{ insertOptions }}</div>
+        <div class="value">{{ insertOptions }}</div>
     </div>
-    <template 
-            v-if="metadatum.metadata_type_options">
-        <div class="field">
-            <div class="label">{{ $i18n.get('label_options') }}</div>
-            <div class="content">{{ JSON.stringify(metadatum.metadata_type_options) }}</div>
-        </div>
-    </template>
+    <div
+            v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.options_as_html"
+            v-html="metadatum.metadata_type_object.options_as_html" />
 </div>
 </template>
 
@@ -85,7 +81,7 @@ export default {
     .field > .field:not(:last-child) {
         margin-bottom: 0em;
     }
-    .field .content {
+    .field .value {
         font-size: 0.9em;
     }
 }
diff --git a/src/views/admin/pages/lists/filters-page.vue b/src/views/admin/pages/lists/filters-page.vue
index 27758f754..b2b9d33ee 100644
--- a/src/views/admin/pages/lists/filters-page.vue
+++ b/src/views/admin/pages/lists/filters-page.vue
@@ -12,12 +12,31 @@
             
             <div
                     v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || (!isRepositoryLevel && collection && collection.current_user_can_edit_filters))"
-                    :style="{ height: activeFilterList.length <= 0 && !isLoadingFilters ? 'auto' : 'calc(100vh - 6px - ' + columnsTopY + 'px)'}"
+                    :style="{ height: activeFiltersList.length <= 0 && !isLoadingFilters ? 'auto' : 'calc(100vh - 6px - ' + columnsTopY + 'px)'}"
                     class="columns"
                     ref="filterEditionPageColumns">
                 <div class="column">
+
+                    <div class="tainacan-form sub-header">
+                        <h3 class="has-text-secondary">{{ $i18n.get('filters') }}</h3>
+
+                        <template v-if="activeFiltersList && activeFiltersList.length > 5 && !isLoadingFilters">
+                                
+                            <b-field class="header-item">
+                                <b-input 
+                                        :placeholder="$i18n.get('instruction_type_search_filter_filter')"
+                                        v-model="filterNameFilterString"
+                                        icon="magnify"
+                                        size="is-small"
+                                        icon-right="close-circle"
+                                        icon-right-clickable
+                                        @icon-right-click="filterNameFilterString = ''" />
+                            </b-field>
+                        </template>
+                    </div>
+
                     <section 
-                            v-if="activeFilterList.length <= 0 && !isLoadingFilters"
+                            v-if="activeFiltersList.length <= 0 && !isLoadingFilters"
                             class="field is-grouped-centered section">
                         <div class="content has-text-gray has-text-centered">
                             <p>
@@ -28,32 +47,34 @@
                             <p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>  
                             <p>{{ $i18n.get('info_create_filters' ) }}</p>
                         </div>
-                    </section>        
-                    <draggable 
+                    </section>
+
+                    <draggable
                             class="active-filters-area"
                             @change="handleChangeOnFilter"
                             :class="{'filters-area-receive': isDraggingFromAvailable}" 
-                            v-model="activeFilterList"
+                            v-model="activeFiltersList"
                             :group="{ name:'filters', pull: false, put: true }"
                             :sort="(openedFilterId == '' || openedFilterId == undefined) && !isRepositoryLevel"
                             :handle="'.handle'" 
                             ghost-class="sortable-ghost"
                             filter=".not-sortable-item"
                             :prevent-on-filter="false"
-                            :animation="250"> 
-                        <div  
+                            :animation="250">
+                        <div
                                 class="active-filter-item" 
                                 :class="{
-                                    'not-sortable-item': (isRepositoryLevel || isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true),
+                                    'not-sortable-item': (isRepositoryLevel || isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || filterNameFilterString != ''),
                                     'not-focusable-item': openedFilterId == filter.id, 
                                     'disabled-filter': filter.enabled == false,
                                     'inherited-filter': filter.inherited || isRepositoryLevel
                                 }" 
-                                v-for="(filter, index) in activeFilterList" 
-                                :key="filter.id">
+                                v-for="(filter, index) in activeFiltersList" 
+                                :key="filter.id"
+                                v-show="filterNameFilterString == '' || filter.name.toString().toLowerCase().indexOf(filterNameFilterString.toString().toLowerCase()) >= 0">
                             <div class="handle">
                                 <span 
-                                        :style="{ opacity: !(isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || isRepositoryLevel) ? '1.0' : '0.0' }"
+                                        :style="{ opacity: !(isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true || isRepositoryLevel || filterNameFilterString != '') ? '1.0' : '0.0' }"
                                         v-tooltip="{
                                             content: (isSelectingFilterType || filter.id == undefined || openedFilterId != '' || choosenMetadatum.name == filter.name || isUpdatingFiltersOrder == true) ? $i18n.get('info_not_allowed_change_order_filters') : $i18n.get('instruction_drag_and_drop_filter_sort'),
                                             autoHide: true,
@@ -386,11 +407,12 @@ export default {
             currentFilterTypePreview: undefined,
             columnsTopY: 0,
             filtersSearchCancel: undefined,
-            metadataSearchCancel: undefined
+            metadataSearchCancel: undefined,
+            filterNameFilterString: ''
         }
     },
     computed: {
-        activeFilterList: {
+        activeFiltersList: {
             get() {
                 return this.getFilters();
             },
@@ -406,9 +428,9 @@ export default {
         '$route.query': {
             handler(newQuery) {
                 if (newQuery.edit != undefined) {
-                    let existingFilterIndex = this.activeFilterList.findIndex((filter) => filter.id == newQuery.edit);
+                    let existingFilterIndex = this.activeFiltersList.findIndex((filter) => filter.id == newQuery.edit);
                     if (existingFilterIndex >= 0)
-                        this.editFilter(this.activeFilterList[existingFilterIndex])                        
+                        this.editFilter(this.activeFiltersList[existingFilterIndex])                        
                 }
             },
             immediate: true
@@ -547,7 +569,7 @@ export default {
             this.availableMetadata.splice(metadatumIndex, 1);
             
             // Inserts it at the end of the list
-            let lastFilterIndex = this.activeFilterList.length;
+            let lastFilterIndex = this.activeFiltersList.length;
             // // Updates store with temporary Filter
             // this.addTemporaryFilter(metadatumType);
 
@@ -573,7 +595,7 @@ export default {
             this.choosenMetadatum = {};
 
             // Removes element from filters list
-            this.activeFilterList.splice(this.newFilterIndex, 1);
+            this.activeFiltersList.splice(this.newFilterIndex, 1);
         },
         handleChangeOnMetadata($event) {
             if ($event.removed) {
@@ -582,7 +604,7 @@ export default {
         },
         updateFiltersOrder() {
             let filtersOrder = [];
-            for (let filter of this.activeFilterList) {
+            for (let filter of this.activeFiltersList) {
                 filtersOrder.push({'id': filter.id, 'enabled': filter.enabled});
             }
             this.isUpdatingFiltersOrder = true;
@@ -608,7 +630,7 @@ export default {
                 }
             }
            
-            for (let activeFilter of this.activeFilterList) {
+            for (let activeFilter of this.activeFiltersList) {
                 for (let i = availableMetadata.length - 1; i >= 0 ; i--) {
                     if (activeFilter.metadatum != undefined) {
                         if (activeFilter.metadatum.metadatum_id == availableMetadata[i].id)
@@ -621,7 +643,7 @@ export default {
         },  
         onChangeEnable($event, index) {
             let filtersOrder = [];
-            for (let filter of this.activeFilterList) {
+            for (let filter of this.activeFiltersList) {
                 filtersOrder.push({'id': filter.id, 'enabled': filter.enabled});
             }
             filtersOrder[index].enabled = $event;
@@ -750,16 +772,16 @@ export default {
 
                         // Checks URL as router watcher would not wait for list to load
                         if (this.$route.query.edit != undefined) {
-                            let existingFilterIndex = this.activeFilterList.findIndex((filter) => filter.id == this.$route.query.edit);
+                            let existingFilterIndex = this.activeFiltersList.findIndex((filter) => filter.id == this.$route.query.edit);
                             if (existingFilterIndex >= 0)
-                                this.editFilter(this.activeFilterList[existingFilterIndex]);                        
+                                this.editFilter(this.activeFiltersList[existingFilterIndex]);                        
                         }
 
                         // Cancels previous Request
                         if (this.metadataSearchCancel != undefined)
                             this.metadataSearchCancel.cancel('Metadata search Canceled.');
 
-                        // Needs to be done after activeFilterList exists to compare and remove chosen metadata.
+                        // Needs to be done after activeFiltersList exists to compare and remove chosen metadata.
                         this.fetchMetadata({
                             collectionId: this.collectionId, 
                             isRepositoryLevel: this.isRepositoryLevel, 
@@ -842,6 +864,25 @@ export default {
                     margin-right: 0;
                 }
             }
+            h3 {
+                font-weight: 500;
+            }
+        }
+
+        .sub-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0.5em;
+
+            .header-item {
+                margin-left: 0.75rem;
+                margin-bottom: 0px;
+            }
+
+            h3 {
+                margin-right: auto;
+            }
         }
 
         .loading-spinner {
@@ -1016,7 +1057,7 @@ export default {
             }
 
             h3 {
-                margin: 0.2em 0em 1em 0em;
+                margin: 0.875em 0em 1em 0em;
                 font-weight: 500;
             }
 
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index 88a81b551..8affe3830 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -14,12 +14,75 @@
                     v-model="activeTab">    
                 <b-tab-item :label="$i18n.get('metadata')">
                     <div
-                            :style="{ height: activeMetadatumList.length <= 0 && !isLoadingMetadata ? 'auto' : 'calc(100vh - 6px - ' + columnsTopY + 'px)'}"
+                            :style="{ height: activeMetadatumList && activeMetadatumList.length <= 0 && !isLoadingMetadata ? 'auto' : 'calc(100vh - 6px - ' + columnsTopY + 'px)'}"
                             class="columns"
                             ref="metadataEditionPageColumns">
                         <b-loading :active.sync="isLoadingMetadatumTypes"/>
 
                         <div class="column">     
+                           
+                            <div class="tainacan-form sub-header">
+                                <h3 class="has-text-secondary">{{ $i18n.get('metadata') }}</h3>
+
+                                <template v-if="activeMetadatumList && activeMetadatumList.length > 5 && !isLoadingMetadata">
+                                    <b-field class="header-item">
+                                        <b-dropdown
+                                                id="tainacan-switch-compact-metadata-list"
+                                                v-model="showCompactMetadataList"
+                                                :mobile-modal="true"
+                                                position="is-bottom-right"
+                                                :aria-label="$i18n.get('label_view_mode')"
+                                                aria-role="list"
+                                                trap-focus>
+                                            <button 
+                                                    class="button is-white"
+                                                    :aria-label="$i18n.get('label_visualization')"
+                                                    slot="trigger">
+                                                <span class="gray-icon icon">
+                                                    <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (showCompactMetadataList ? 'menu' : 'viewlist')" />
+                                                </span>
+                                                <span>{{ showCompactMetadataList ? $i18n.get('label_compact_list') : $i18n.get('label_detailed_list') }}</span>
+                                                <span class="icon">
+                                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
+                                                </span>
+                                            </button>
+                                            <b-dropdown-item 
+                                                    aria-controls="items-list-results"
+                                                    role="button"
+                                                    :value="true"
+                                                    :class="{ 'is-active': showCompactMetadataList }"
+                                                    aria-role="listitem">
+                                                <span class="gray-icon icon">
+                                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-menu" />
+                                                </span>
+                                                <span>{{ $i18n.get('label_compact_list') }}</span>
+                                            </b-dropdown-item>
+                                            <b-dropdown-item 
+                                                    aria-controls="items-list-results"
+                                                    role="button"
+                                                    :value="false"
+                                                    :class="{ 'is-active': !showCompactMetadataList }"
+                                                    aria-role="listitem">
+                                                <span class="gray-icon icon">
+                                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-viewlist" />
+                                                </span>
+                                                <span>{{ $i18n.get('label_detailed_list') }}</span>
+                                            </b-dropdown-item>
+                                        </b-dropdown>
+                                    </b-field>
+                                    <b-field class="header-item">
+                                        <b-input 
+                                                :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
+                                                v-model="metadataNameFilterString"
+                                                icon="magnify"
+                                                size="is-small"
+                                                icon-right="close-circle"
+                                                icon-right-clickable
+                                                @icon-right-click="metadataNameFilterString = ''" />
+                                    </b-field>
+                                </template>
+                            </div>
+
                             <section 
                                     v-if="activeMetadatumList.length <= 0 && !isLoadingMetadata"
                                     class="field is-grouped-centered section">
@@ -33,23 +96,7 @@
                                     <p>{{ $i18n.get('info_create_metadata' ) }}</p>
                                 </div>
                             </section>
-                            <div class="tainacan-form sub-header">
-                                <h3 class="label has-text-secondary">{{ $i18n.get('metadata') }}</h3>
 
-                                <b-field class="header-item">
-                                    <b-select
-                                            id="tainacan-switch-compact-metadata-list" 
-                                            size="is-small"
-                                            v-model="showCompactMetadataList">
-                                        <option :value="true">
-                                            {{ $i18n.get('label_compact_list') }}
-                                        </option>
-                                        <option :value="false">
-                                            {{ $i18n.get('label_detailed_list') }}
-                                        </option>
-                                    </b-select>
-                                </b-field>
-                            </div>
                             <draggable 
                                     v-model="activeMetadatumList"
                                     class="active-metadata-area"
@@ -64,12 +111,13 @@
                                     :animation="250">
                                 <div    
                                         v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)"
-                                        :key="metadatum.id">
+                                        :key="metadatum.id"
+                                        v-show="metadataNameFilterString == '' || filterByMetadatumName(metadatum)">
                                     <div 
                                             class="active-metadatum-item"
                                             :class="{
                                                 'is-compact-item': showCompactMetadataList,
-                                                'not-sortable-item': isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder,
+                                                'not-sortable-item': isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '',
                                                 'not-focusable-item': openedMetadatumId == metadatum.id,
                                                 'disabled-metadatum': metadatum.enabled == false,
                                                 'inherited-metadatum': metadatum.inherited || isRepositoryLevel,
@@ -79,7 +127,7 @@
                                                 :ref="'metadatum-handler-' + metadatum.id"
                                                 class="handle">
                                             <span 
-                                                    :style="{ opacity: !(isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder) ? '1.0' : '0.0' }"
+                                                    :style="{ opacity: !(isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '') ? '1.0' : '0.0' }"
                                                     v-tooltip="{
                                                         content: isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
                                                         autoHide: true,
@@ -215,6 +263,7 @@
                                     <child-metadata-list
                                             v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
                                             :parent.sync="metadatum"
+                                            :metadata-name-filter-string="metadataNameFilterString"
                                             :is-parent-multiple="metadatum.multiple == 'yes' || (editForms[metadatum.id] && editForms[metadatum.id].multiple == 'yes')"
                                             :is-repository-level="isRepositoryLevel" />
                                 </div>
@@ -320,7 +369,8 @@ export default {
             hightlightedMetadatum: '',
             editForms: {},
             columnsTopY: 0,
-            showCompactMetadataList: true
+            showCompactMetadataList: true,
+            metadataNameFilterString: ''
         }
     },
     computed: {
@@ -618,6 +668,21 @@ export default {
                             <div>` + metadatum.preview_template + `</div>
                         </div>
                     </div>`;
+        },
+        filterByMetadatumName(metadatum) {
+            if (metadatum.metadata_type_object && 
+                metadatum.metadata_type_object.component == 'tainacan-compound' &&
+                metadatum.metadata_type_options &&
+                metadatum.metadata_type_options.children_objects &&
+                metadatum.metadata_type_options.children_objects.length
+            ) {
+                let childNamesArray = metadatum.metadata_type_options.children_objects.map((children) => children.name);
+                childNamesArray.push(metadatum.name);
+
+                return childNamesArray.some((childName) => childName.toString().toLowerCase().indexOf(this.metadataNameFilterString.toString().toLowerCase()) >= 0);
+            }
+            else 
+                return metadatum.name.toString().toLowerCase().indexOf(this.metadataNameFilterString.toString().toLowerCase()) >= 0;
         }
     }
 }
@@ -679,6 +744,9 @@ export default {
                     margin-right: 0;
                 }
             }
+            h3 {
+                font-weight: 500;
+            }
         }
 
         .page-title {
@@ -692,8 +760,18 @@ export default {
 
         .sub-header {
             display: flex;
+            align-items: center;
             justify-content: space-between;
             padding: 0.5em;
+
+            .header-item {
+                margin-left: 0.75rem;
+                margin-bottom: 0px;
+            }
+
+            h3 {
+                margin-right: auto;
+            }
         }
 
         .loading-spinner {
@@ -860,8 +938,7 @@ export default {
             }
 
             h3 {
-                margin: 0.2em 0em 1em 0em;
-                font-weight: 500;
+                margin: 0.875em 0em 1em 0em;
             }
 
             .available-metadatum-item {
diff --git a/src/views/tainacan-admin-i18n.php b/src/views/tainacan-admin-i18n.php
index 9fa7238c5..62acb588e 100644
--- a/src/views/tainacan-admin-i18n.php
+++ b/src/views/tainacan-admin-i18n.php
@@ -553,6 +553,8 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'instruction_cover_page'                         => __( 'Search a Page to choose.', 'tainacan' ),
 	'instruction_type_search_users'		             => __( 'Search users...', 'tainacan' ),
 	'instruction_type_search_users_filter'           => __( 'Search users to filter...', 'tainacan' ),
+	'instruction_type_search_metadata_filter'        => __( 'Search metadata to filter...', 'tainacan' ),
+	'instruction_type_search_filter_filter'        	 => __( 'Search filters to filter...', 'tainacan' ),
 	'instruction_type_search_roles_filter'           => __( 'Search roles to filter...', 'tainacan' ),
 	'instruction_select_a_parent_collection'         => __( 'Select a parent collection.', 'tainacan' ),
 	'instruction_select_collection_thumbnail'        => __( 'Select a thumbnail image for collection', 'tainacan' ),

From 1cf57298f35da0db0d3c0f80c8147eaf8da66edc Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 26 Feb 2021 17:35:00 -0300
Subject: [PATCH 5/9] Adds separate collapse for each metadata and option to
 open multiple metadata at once #481

---
 .../compound/child-metadata-list.vue          |  73 ++++++---
 .../components/search/filters-items-list.vue  |   9 +-
 src/views/admin/pages/lists/filters-page.vue  |  89 ++++++-----
 src/views/admin/pages/lists/metadata-page.vue | 151 +++++++++---------
 src/views/admin/scss/_tabs.scss               |   2 +-
 src/views/tainacan-admin-i18n.php             |   1 +
 6 files changed, 185 insertions(+), 140 deletions(-)

diff --git a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
index 26ce8a56b..04fc21d7d 100644
--- a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
+++ b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
@@ -42,6 +42,18 @@
                 <div 
                         :ref="'metadatum-handler-' + metadatum.id"
                         class="handle">
+                    <span 
+                            v-tooltip="{
+                                content: $i18n.get('label_view_metadata_details'),
+                                autoHide: true,
+                                classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                placement: 'auto-start'
+                            }"
+                            @click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
+                            class="gray-icon icon"
+                            style="cursor: pointer">
+                        <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
+                    </span>
                     <span 
                             :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '') ? '1.0' : '0.0' }"
                             v-tooltip="{
@@ -53,24 +65,7 @@
                             class="icon grip-icon">
                         <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
                     </span>
-                    <span 
-                            v-tooltip="{
-                                content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
-                                autoHide: true,
-                                classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
-                                placement: 'auto-start'
-                            }"
-                            class="icon icon-level-identifier">
-                        <i 
-                            :class="{ 
-                                'tainacan-icon-collections': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
-                                'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
-                                'has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
-                                'has-text-blue5': (metadatum.collection_id == 'default' || isRepositoryLevel),
-                                'has-text-gray3': !parent.enabled
-                            }"
-                            class="tainacan-icon" />
-                    </span>  
+                     
                     <span 
                             class="metadatum-name"
                             :class="{'is-danger': formWithErrors == metadatum.id }">
@@ -118,6 +113,24 @@
                                 }">
                             <i class="tainacan-icon tainacan-icon-private"/>
                         </span>
+                        <span 
+                                v-tooltip="{
+                                    content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
+                                    autoHide: true,
+                                    classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                    placement: 'auto-start'
+                                }"
+                                class="icon icon-level-identifier">
+                            <i 
+                                :class="{ 
+                                    'tainacan-icon-collections': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
+                                    'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
+                                    'has-text-turquoise5': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
+                                    'has-text-blue5': (metadatum.collection_id == 'default' || isRepositoryLevel),
+                                    'has-text-gray3': !parent.enabled
+                                }"
+                                class="tainacan-icon" />
+                        </span>
                     </span>
                     <span 
                             class="loading-spinner" 
@@ -165,6 +178,11 @@
                         </a>
                     </span>
                 </div>
+                <transition name="form-collapse">
+                    <metadatum-details 
+                            v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
+                            :metadatum="metadatum" />
+                </transition>
                 <transition name="form-collapse">
                     <div v-if="openedMetadatumId == metadatum.id">
                         <metadatum-edition-form
@@ -187,17 +205,23 @@
 <script>
     import { mapActions } from 'vuex';
     import MetadatumEditionForm from '../../edition/metadatum-edition-form.vue';
+    import MetadatumDetails from '../../other/metadatum-details.vue';
     import CustomDialog from '../../other/custom-dialog.vue';
 
     export default {
         components: {
-            MetadatumEditionForm 
+            MetadatumEditionForm,
+            MetadatumDetails
         },
         props: {
             isRepositoryLevel: Boolean,
             parent: Object,
             isParentMultiple: Boolean,
-            metadataNameFilterString: String
+            metadataNameFilterString: String,
+            collapseAll: {
+                type: Boolean,
+                default: new Boolean()
+            }
         },
         data() {
             return {
@@ -209,7 +233,8 @@
                 hightlightedMetadatum: '',
                 editForms: {},
                 metadataSearchCancel: undefined,
-                childrenMetadata: []
+                childrenMetadata: [],
+                collapses: {}
             }
         },
         watch: {
@@ -232,6 +257,9 @@
                         this.childrenMetadata = [];
                 }, 
                 immediate: true
+            },
+            collapseAll(isCollapsed) {
+                this.childrenMetadata.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
             }
         },
         beforeRouteLeave ( to, from, next ) {
@@ -397,6 +425,9 @@
             isAvailableChildMetadata(to, from, item) {
                 return !['tainacan-compound', 'tainacan-taxonomy'].includes(item.id);
             },
+            isCollapseOpen(metadatumId) {
+                return this.collapses[metadatumId] == true;
+            }
         }
     }
 </script>
diff --git a/src/views/admin/components/search/filters-items-list.vue b/src/views/admin/components/search/filters-items-list.vue
index ebff775c1..fed4d6533 100644
--- a/src/views/admin/components/search/filters-items-list.vue
+++ b/src/views/admin/components/search/filters-items-list.vue
@@ -22,11 +22,13 @@
                     isRepositoryLevel) || filters.length > 0)"
                 class="link-style collapse-all"
                 @click="collapseAll = !collapseAll">
-            {{ !collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
             <span class="icon">
                 <i 
                         :class="{ 'tainacan-icon-arrowdown' : !collapseAll, 'tainacan-icon-arrowright' : collapseAll }"
-                        class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
+                        class="has-text-secondary tainacan-icon tainacan-icon-1-125em"/>
+            </span>
+            <span class="collapse-all__text">
+                {{ !collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
             </span>
         </button>
 
@@ -495,6 +497,9 @@
     .collapse-all {
         display: inline-flex;
         align-items: center;
+        margin-left: -0.65em;
+    }
+    .collapse-all__text {
         font-size: 0.75em !important;
     }
     .filters-components-list {
diff --git a/src/views/admin/pages/lists/filters-page.vue b/src/views/admin/pages/lists/filters-page.vue
index b2b9d33ee..94aa6e81d 100644
--- a/src/views/admin/pages/lists/filters-page.vue
+++ b/src/views/admin/pages/lists/filters-page.vue
@@ -18,7 +18,7 @@
                 <div class="column">
 
                     <div class="tainacan-form sub-header">
-                        <h3 class="has-text-secondary">{{ $i18n.get('filters') }}</h3>
+                        <h3>{{ $i18n.get('filters') }}</h3>
 
                         <template v-if="activeFiltersList && activeFiltersList.length > 5 && !isLoadingFilters">
                                 
@@ -84,24 +84,6 @@
                                         class="icon grip-icon">
                                     <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
                                 </span>
-                                <span 
-                                        v-tooltip="{
-                                            content: filter.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
-                                            autoHide: true,
-                                            classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
-                                            placement: 'auto-start'
-                                        }"
-                                        class="icon icon-level-identifier">
-                                    <i 
-                                        :class="{ 
-                                            'tainacan-icon-collections': filter.collection_id == collectionId, 
-                                            'tainacan-icon-repository': filter.collection_id != collectionId,
-                                            'has-text-turquoise5': filter.enabled && filter.collection_id != 'default', 
-                                            'has-text-blue5': filter.enabled && filter.collection_id == 'default',
-                                            'has-text-gray3': !filter.enabled  
-                                        }"
-                                        class="tainacan-icon" />
-                                </span> 
                                 <span 
                                         class="filter-name"
                                         :class="{'is-danger': formWithErrors == filter.id }">
@@ -128,7 +110,25 @@
                                             }">
                                         <i class="tainacan-icon tainacan-icon-private"/>
                                     </span>
-                                </span> 
+                                    <span 
+                                            v-tooltip="{
+                                                content: filter.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
+                                                autoHide: true,
+                                                classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                                placement: 'auto-start'
+                                            }"
+                                            class="icon icon-level-identifier">
+                                        <i 
+                                            :class="{ 
+                                                'tainacan-icon-collections': filter.collection_id == collectionId, 
+                                                'tainacan-icon-repository': filter.collection_id != collectionId,
+                                                'has-text-turquoise5': filter.enabled && filter.collection_id != 'default', 
+                                                'has-text-blue5': filter.enabled && filter.collection_id == 'default',
+                                                'has-text-gray3': !filter.enabled  
+                                            }"
+                                            class="tainacan-icon" />
+                                    </span> 
+                                </span>
                                 <span 
                                         class="loading-spinner" 
                                         v-if="filter.id == undefined"/>
@@ -191,7 +191,7 @@
                         v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || !isRepositoryLevel)"
                         class="column available-metadata-area">
                     <div class="field" >
-                        <h3 class="label has-text-secondary"> {{ $i18n.get('label_available_metadata') }}</h3>
+                        <h3 class="label"> {{ $i18n.get('label_available_metadata') }}</h3>
                         <draggable
                                 @change="handleChangeOnMetadata"
                                 v-if="availableMetadata.length > 0 && !isLoadingMetadatumTypes"
@@ -220,22 +220,7 @@
                                             }" 
                                             class="icon grip-icon">
                                         <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
-                                    </span>
-                                    <span 
-                                            v-tooltip="{
-                                                content: isRepositoryLevel || metadatum.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
-                                                autoHide: true,
-                                                classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
-                                                placement: 'auto-start'
-                                            }"
-                                            class="icon icon-level-identifier">
-                                        <i 
-                                            :class="{   
-                                                'tainacan-icon-collections has-text-turquoise5': metadatum.collection_id == collectionId && !isRepositoryLevel, 
-                                                'tainacan-icon-repository has-text-blue5': isRepositoryLevel || metadatum.collection_id != collectionId 
-                                            }"
-                                            class="tainacan-icon" />
-                                    </span>  
+                                    </span> 
                                     <span 
                                             v-tooltip="{
                                                 content: metadatum.name + (metadatum.parent_name ? (' (' + $i18n.get('info_child_of') + ' ' + metadatum.parent_name + ')') : ''),
@@ -252,6 +237,21 @@
                                             <em>{{ '(' + $i18n.get('info_child_of') + ' ' + metadatum.parent_name + ')' }}</em>
                                         </span>
                                     </span>
+                                    <span 
+                                            v-tooltip="{
+                                                content: isRepositoryLevel || metadatum.collection_id != collectionId ? $i18n.get('label_repository_filter') : $i18n.get('label_collection_filter'),
+                                                autoHide: true,
+                                                classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                                placement: 'auto-start'
+                                            }"
+                                            class="icon icon-level-identifier">
+                                        <i 
+                                            :class="{   
+                                                'tainacan-icon-collections has-text-turquoise5': metadatum.collection_id == collectionId && !isRepositoryLevel, 
+                                                'tainacan-icon-repository has-text-blue5': isRepositoryLevel || metadatum.collection_id != collectionId 
+                                            }"
+                                            class="tainacan-icon" />
+                                    </span> 
                                 </div>
                             </template>
                         </draggable>   
@@ -873,7 +873,7 @@ export default {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 0.5em;
+            padding: 0.5em 1em 0.5em 0.5em;
 
             .header-item {
                 margin-left: 0.75rem;
@@ -899,7 +899,6 @@ export default {
 
         .active-filters-area {
             font-size: 0.875em;
-            margin-right: 0.8em;
             margin-left: -0.8em;
             padding-right: 3em;
             min-height: 330px;
@@ -1010,6 +1009,10 @@ export default {
                     }
                 }    
             }
+            .active-filter-item:not(:hover) .icon-level-identifier .tainacan-icon::before,
+            .active-filter-item:hover.not-sortable-item .icon-level-identifier .tainacan-icon::before {
+                color: var(--tainacan-gray3) !important;
+            }
             .active-filter-item:hover:not(.not-sortable-item) {
                 background-color: var(--tainacan-turquoise1);
                 border-color: var(--tainacan-turquoise1);
@@ -1090,7 +1093,7 @@ export default {
                     font-weight: bold;
                     margin-left: 0.4em;
                     display: inline-block;
-                    width: calc(100% - 80px);
+                    width: calc(100% - 60px);
                 }
                 &:after,
                 &:before {
@@ -1134,6 +1137,10 @@ export default {
                 position: relative;
                 top: 2px;
             }
+            .available-metadatum-item:not(:hover) .icon-level-identifier .tainacan-icon::before,
+            .available-filter-item:hover.not-sortable-item .icon-level-identifier .tainacan-icon::before {
+                color: var(--tainacan-gray3) !important;
+            }
             .available-metadatum-item:not(.disabled-metadatum):hover{
                 background-color: var(--tainacan-turquoise1);
                 border-color: var(--tainacan-turquoise2);
@@ -1155,7 +1162,7 @@ export default {
         .inherited-filter {
             &.active-filter-item:hover:not(.not-sortable-item) {
                 background-color: var(--tainacan-blue1);
-                border-color: var(--tainacan-blue1);
+                border-color: var(--tainacan-blue2);
                 
                 .grip-icon { 
                     color: var(--tainacan-blue5) !important; 
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index 8affe3830..e07441749 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -19,57 +19,12 @@
                             ref="metadataEditionPageColumns">
                         <b-loading :active.sync="isLoadingMetadatumTypes"/>
 
-                        <div class="column">     
+                        <div class="column">
                            
                             <div class="tainacan-form sub-header">
-                                <h3 class="has-text-secondary">{{ $i18n.get('metadata') }}</h3>
+                                <h3>{{ $i18n.get('metadata') }}</h3>
 
-                                <template v-if="activeMetadatumList && activeMetadatumList.length > 5 && !isLoadingMetadata">
-                                    <b-field class="header-item">
-                                        <b-dropdown
-                                                id="tainacan-switch-compact-metadata-list"
-                                                v-model="showCompactMetadataList"
-                                                :mobile-modal="true"
-                                                position="is-bottom-right"
-                                                :aria-label="$i18n.get('label_view_mode')"
-                                                aria-role="list"
-                                                trap-focus>
-                                            <button 
-                                                    class="button is-white"
-                                                    :aria-label="$i18n.get('label_visualization')"
-                                                    slot="trigger">
-                                                <span class="gray-icon icon">
-                                                    <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (showCompactMetadataList ? 'menu' : 'viewlist')" />
-                                                </span>
-                                                <span>{{ showCompactMetadataList ? $i18n.get('label_compact_list') : $i18n.get('label_detailed_list') }}</span>
-                                                <span class="icon">
-                                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
-                                                </span>
-                                            </button>
-                                            <b-dropdown-item 
-                                                    aria-controls="items-list-results"
-                                                    role="button"
-                                                    :value="true"
-                                                    :class="{ 'is-active': showCompactMetadataList }"
-                                                    aria-role="listitem">
-                                                <span class="gray-icon icon">
-                                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-menu" />
-                                                </span>
-                                                <span>{{ $i18n.get('label_compact_list') }}</span>
-                                            </b-dropdown-item>
-                                            <b-dropdown-item 
-                                                    aria-controls="items-list-results"
-                                                    role="button"
-                                                    :value="false"
-                                                    :class="{ 'is-active': !showCompactMetadataList }"
-                                                    aria-role="listitem">
-                                                <span class="gray-icon icon">
-                                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-viewlist" />
-                                                </span>
-                                                <span>{{ $i18n.get('label_detailed_list') }}</span>
-                                            </b-dropdown-item>
-                                        </b-dropdown>
-                                    </b-field>
+                                <template v-if="activeMetadatumList && !isLoadingMetadata">
                                     <b-field class="header-item">
                                         <b-input 
                                                 :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
@@ -83,6 +38,22 @@
                                 </template>
                             </div>
 
+                            <button
+                                    aria-controls="filters-items-list"
+                                    :aria-expanded="!collapseAll"
+                                    v-if="activeMetadatumList.length > 0"
+                                    class="link-style collapse-all"
+                                    @click="collapseAll = !collapseAll">
+                                <span class="icon">
+                                    <i 
+                                            :class="{ 'tainacan-icon-arrowdown' : collapseAll, 'tainacan-icon-arrowright' : !collapseAll }"
+                                            class="has-text-secondary tainacan-icon tainacan-icon-1-125em"/>
+                                </span>
+                                <span class="collapse-all__text">
+                                    {{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
+                                </span>
+                            </button>
+
                             <section 
                                     v-if="activeMetadatumList.length <= 0 && !isLoadingMetadata"
                                     class="field is-grouped-centered section">
@@ -116,7 +87,7 @@
                                     <div 
                                             class="active-metadatum-item"
                                             :class="{
-                                                'is-compact-item': showCompactMetadataList,
+                                                'is-compact-item': !isCollapseOpen(metadatum.id),
                                                 'not-sortable-item': isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '',
                                                 'not-focusable-item': openedMetadatumId == metadatum.id,
                                                 'disabled-metadatum': metadatum.enabled == false,
@@ -126,6 +97,18 @@
                                         <div 
                                                 :ref="'metadatum-handler-' + metadatum.id"
                                                 class="handle">
+                                            <span 
+                                                    v-tooltip="{
+                                                        content: $i18n.get('label_view_metadata_details'),
+                                                        autoHide: true,
+                                                        classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                                        placement: 'auto-start'
+                                                    }"
+                                                    @click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
+                                                    class="gray-icon icon"
+                                                    style="cursor: pointer">
+                                                <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
+                                            </span>
                                             <span 
                                                     :style="{ opacity: !(isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '') ? '1.0' : '0.0' }"
                                                     v-tooltip="{
@@ -137,24 +120,6 @@
                                                     class="icon grip-icon">
                                                 <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
                                             </span>
-                                            <span 
-                                                    v-tooltip="{
-                                                        content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
-                                                        autoHide: true,
-                                                        classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
-                                                        placement: 'auto-start'
-                                                    }"
-                                                    class="icon icon-level-identifier">
-                                                <i 
-                                                    :class="{ 
-                                                        'tainacan-icon-collections': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
-                                                        'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
-                                                        'has-text-turquoise5': metadatum.enabled && (metadatum.collection_id != 'default' && !isRepositoryLevel), 
-                                                        'has-text-blue5': metadatum.enabled && (metadatum.collection_id == 'default' || isRepositoryLevel),
-                                                        'has-text-gray3': !metadatum.enabled
-                                                    }"
-                                                    class="tainacan-icon" />
-                                            </span>  
                                             <span 
                                                     class="metadatum-name"
                                                     :class="{'is-danger': formWithErrors == metadatum.id }">
@@ -193,6 +158,24 @@
                                                         }">
                                                     <i class="tainacan-icon tainacan-icon-private"/>
                                                 </span>
+                                                <span 
+                                                        v-tooltip="{
+                                                            content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
+                                                            autoHide: true,
+                                                            classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                                            placement: 'auto-start'
+                                                        }"
+                                                        class="icon icon-level-identifier">
+                                                    <i 
+                                                        :class="{ 
+                                                            'tainacan-icon-collections': (metadatum.collection_id != 'default' && !isRepositoryLevel), 
+                                                            'tainacan-icon-repository': (metadatum.collection_id == 'default') || isRepositoryLevel,
+                                                            'has-text-turquoise5': metadatum.enabled && (metadatum.collection_id != 'default' && !isRepositoryLevel), 
+                                                            'has-text-blue5': metadatum.enabled && (metadatum.collection_id == 'default' || isRepositoryLevel),
+                                                            'has-text-gray3': !metadatum.enabled
+                                                        }"
+                                                        class="tainacan-icon" />
+                                                </span>
                                             </span>
                                             <span 
                                                     class="loading-spinner" 
@@ -243,7 +226,7 @@
                                         </div>
                                         <transition name="form-collapse">
                                             <metadatum-details 
-                                                    v-if="!showCompactMetadataList && openedMetadatumId !== metadatum.id"
+                                                    v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
                                                     :metadatum="metadatum" />
                                         </transition>
                                         <transition name="form-collapse">
@@ -265,7 +248,8 @@
                                             :parent.sync="metadatum"
                                             :metadata-name-filter-string="metadataNameFilterString"
                                             :is-parent-multiple="metadatum.multiple == 'yes' || (editForms[metadatum.id] && editForms[metadatum.id].multiple == 'yes')"
-                                            :is-repository-level="isRepositoryLevel" />
+                                            :is-repository-level="isRepositoryLevel"
+                                            :collapse-all="collapseAll" />
                                 </div>
                             </draggable> 
                         </div>
@@ -274,7 +258,7 @@
                                 v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_metadata')) || !isRepositoryLevel"
                                 class="column available-metadata-area" >
                             <div class="field">
-                                <h3 class="label has-text-secondary">{{ $i18n.get('label_available_metadata_types') }}</h3>
+                                <h3 class="label">{{ $i18n.get('label_available_metadata_types') }}</h3>
                                 <draggable 
                                         v-model="availableMetadatumList"
                                         :sort="false" 
@@ -368,9 +352,10 @@ export default {
             formWithErrors: '',
             hightlightedMetadatum: '',
             editForms: {},
+            collapses: {},
             columnsTopY: 0,
-            showCompactMetadataList: true,
-            metadataNameFilterString: ''
+            collapseAll: false,
+            metadataNameFilterString: '',
         }
     },
     computed: {
@@ -404,6 +389,9 @@ export default {
                 }
             },
             immediate: true
+        },
+        collapseAll(isCollapsed) {
+            this.activeMetadatumList.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
         }
     },
     beforeRouteLeave ( to, from, next ) {
@@ -482,7 +470,6 @@ export default {
             'getMetadatumTypes',
             'getMetadata',
         ]),
-                
         handleChange(event) {     
             if (event.added) {
                 this.addNewMetadatum(event.added.element, event.added.newIndex);
@@ -683,6 +670,9 @@ export default {
             }
             else 
                 return metadatum.name.toString().toLowerCase().indexOf(this.metadataNameFilterString.toString().toLowerCase()) >= 0;
+        },
+        isCollapseOpen(metadatumId) {
+            return this.collapses[metadatumId] == true;
         }
     }
 }
@@ -762,7 +752,7 @@ export default {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 0.5em;
+            padding: 0.5em 1em 0.5em 0.5em;
 
             .header-item {
                 margin-left: 0.75rem;
@@ -774,6 +764,14 @@ export default {
             }
         }
 
+        .collapse-all {
+            display: inline-flex;
+            align-items: center;
+            margin-left: 0.25em;
+        }
+        .collapse-all__text {
+            font-size: 0.75em !important;
+        }
         .loading-spinner {
             animation: spinAround 500ms infinite linear;
             border: 2px solid var(--tainacan-gray2);
@@ -788,7 +786,6 @@ export default {
 
         .active-metadata-area {
             font-size: 0.875em;
-            margin-right: 0.8em;
             margin-left: -0.8em;
             padding-right: 3em;
             min-height: 330px;
@@ -892,6 +889,10 @@ export default {
                     }
                 }
             }
+            .active-metadatum-item:not(:hover) .icon-level-identifier .tainacan-icon::before,
+            .active-filter-item:hover.not-sortable-item .icon-level-identifier .tainacan-icon::before {
+                color: var(--tainacan-gray3) !important;
+            }
             .active-metadatum-item:hover:not(.not-sortable-item) {
                 background-color: var(--tainacan-turquoise1);
                 border-color: var(--tainacan-turquoise1);
diff --git a/src/views/admin/scss/_tabs.scss b/src/views/admin/scss/_tabs.scss
index c2988fe01..3e22e1903 100644
--- a/src/views/admin/scss/_tabs.scss
+++ b/src/views/admin/scss/_tabs.scss
@@ -36,7 +36,7 @@
 }
 .b-tabs {
     .tab-content {         
-        padding: 0.75em 1.5em;  
+        padding: 0.75em;
     }
     .tabs a,
     .tabs a:hover,
diff --git a/src/views/tainacan-admin-i18n.php b/src/views/tainacan-admin-i18n.php
index 62acb588e..2f0cabd09 100644
--- a/src/views/tainacan-admin-i18n.php
+++ b/src/views/tainacan-admin-i18n.php
@@ -538,6 +538,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_form_not_loaded'							 => __( 'This form could not be loaded', 'tainacan' ),
 	'label_compact_list'							 => __( 'Compact list', 'tainacan'),
 	'label_detailed_list'							 => __( 'Detailed list', 'tainacan'),
+	'label_view_metadata_details'					 => __( 'View metadata details', 'tainacan'),
 
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),

From 97d2ecc781b3be700f43a99ac26507a18dd515ff Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 1 Mar 2021 16:18:45 -0300
Subject: [PATCH 6/9] Adds filter by metadata type on metadata list. #481

---
 .../compound/child-metadata-list.vue          |  49 +++++--
 src/views/admin/pages/lists/metadata-page.vue | 121 +++++++++++++++---
 src/views/tainacan-admin-i18n.php             |   1 +
 3 files changed, 141 insertions(+), 30 deletions(-)

diff --git a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
index 04fc21d7d..3b52be8f6 100644
--- a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
+++ b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
@@ -31,14 +31,14 @@
             <div 
                     class="active-metadatum-item"
                     :class="{
-                        'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '',
+                        'not-sortable-item': metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
                         'not-focusable-item': openedMetadatumId == metadatum.id,
                         'disabled-metadatum': parent.enabled == false,
                         'inherited-metadatum': (metadatum.collection_id != collectionId && metadatum.parent == 0) || isRepositoryLevel
                     }" 
                     v-for="(metadatum, index) in childrenMetadata"
                     :key="metadatum.id"
-                    v-show="metadataNameFilterString == '' || metadatum.name.toString().toLowerCase().indexOf(metadataNameFilterString.toString().toLowerCase()) >= 0">
+                    v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
                 <div 
                         :ref="'metadatum-handler-' + metadatum.id"
                         class="handle">
@@ -55,7 +55,7 @@
                         <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
                     </span>
                     <span 
-                            :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '') ? '1.0' : '0.0' }"
+                            :style="{ opacity: !(metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadatum.parent == 0 || metadatum.collection_id != collectionId || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
                             v-tooltip="{
                                 content: metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
                                 autoHide: true,
@@ -71,17 +71,6 @@
                             :class="{'is-danger': formWithErrors == metadatum.id }">
                             {{ metadatum.name }}
                     </span>
-                    <span 
-                            v-if="metadatum.required === 'yes'"
-                            class="label-details"
-                            v-tooltip="{
-                                content: $i18n.get('label_required'),
-                                autoHide: true,
-                                classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
-                                placement: 'auto-start'
-                            }">
-                        *&nbsp;
-                    </span>
                     <span   
                             v-if="metadatum.id != undefined && metadatum.metadata_type_object"
                             class="label-details">  
@@ -113,6 +102,16 @@
                                 }">
                             <i class="tainacan-icon tainacan-icon-private"/>
                         </span>
+                        <span 
+                                v-if="metadatum.required === 'yes'"
+                                v-tooltip="{
+                                    content: $i18n.get('label_required'),
+                                    autoHide: true,
+                                    classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                    placement: 'auto-start'
+                                }">
+                            *&nbsp;
+                        </span>
                         <span 
                                 v-tooltip="{
                                     content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
@@ -218,6 +217,14 @@
             parent: Object,
             isParentMultiple: Boolean,
             metadataNameFilterString: String,
+            hasSomeMetadataTypeFilterApplied: {
+                type: Boolean,
+                default: new Boolean()
+            },
+            metadataTypeFilterOptions: {
+                type: Array,
+                default: new Array()
+            },
             collapseAll: {
                 type: Boolean,
                 default: new Boolean()
@@ -427,6 +434,20 @@
             },
             isCollapseOpen(metadatumId) {
                 return this.collapses[metadatumId] == true;
+            },
+            filterByMetadatumName(metadatum) {
+                return metadatum.name.toString().toLowerCase().indexOf(this.metadataNameFilterString.toString().toLowerCase()) >= 0;
+            },
+            filterByMetadatumType(metadatum) {
+                if (!this.hasSomeMetadataTypeFilterApplied)
+                    return true;
+
+                for (let metadatumType of this.metadataTypeFilterOptions) {
+                    if (metadatumType.enabled && metadatum.metadata_type == metadatumType.type)
+                        return true;
+                }
+                
+                return false;
             }
         }
     }
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index e07441749..874c0277d 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -25,6 +25,38 @@
                                 <h3>{{ $i18n.get('metadata') }}</h3>
 
                                 <template v-if="activeMetadatumList && !isLoadingMetadata">
+                                    <b-field class="header-item">
+                                        <b-dropdown
+                                                :mobile-modal="true"
+                                                :disabled="activeMetadatumList.length <= 0"
+                                                class="show metadata-options-dropdown"
+                                                aria-role="list"
+                                                trap-focus>
+                                            <button
+                                                    :aria-label="$i18n.get('label_filter_by_metadata_type')"
+                                                    class="button is-white"
+                                                    slot="trigger">
+                                                <span>{{ $i18n.get('label_filter_by_metadata_type') }}</span>
+                                                <span class="icon">
+                                                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown"/>
+                                                </span>
+                                            </button>
+                                            <div class="metadata-options-container">
+                                                <b-dropdown-item
+                                                        v-for="(metadataType, index) in metadataTypeFilterOptions"
+                                                        :key="index"
+                                                        class="control"
+                                                        custom
+                                                        aria-role="listitem">
+                                                    <b-checkbox
+                                                            v-model="metadataType.enabled"
+                                                            :native-value="metadataType.enabled">
+                                                        {{ metadataType.name }}
+                                                    </b-checkbox>
+                                                </b-dropdown-item>   
+                                            </div>
+                                        </b-dropdown>
+                                    </b-field>
                                     <b-field class="header-item">
                                         <b-input 
                                                 :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
@@ -83,12 +115,12 @@
                                 <div    
                                         v-for="(metadatum, index) in activeMetadatumList.filter((meta) => meta != undefined && meta.parent == 0)"
                                         :key="metadatum.id"
-                                        v-show="metadataNameFilterString == '' || filterByMetadatumName(metadatum)">
+                                        v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)">
                                     <div 
                                             class="active-metadatum-item"
                                             :class="{
                                                 'is-compact-item': !isCollapseOpen(metadatum.id),
-                                                'not-sortable-item': isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '',
+                                                'not-sortable-item': isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied,
                                                 'not-focusable-item': openedMetadatumId == metadatum.id,
                                                 'disabled-metadatum': metadatum.enabled == false,
                                                 'inherited-metadatum': metadatum.inherited || isRepositoryLevel,
@@ -110,7 +142,7 @@
                                                 <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
                                             </span>
                                             <span 
-                                                    :style="{ opacity: !(isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '') ? '1.0' : '0.0' }"
+                                                    :style="{ opacity: !(isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder || metadataNameFilterString != '' || hasSomeMetadataTypeFilterApplied) ? '1.0' : '0.0' }"
                                                     v-tooltip="{
                                                         content: isRepositoryLevel || metadatum.id == undefined || openedMetadatumId != '' || isUpdatingMetadataOrder ? $i18n.get('info_not_allowed_change_order_metadata') : $i18n.get('instruction_drag_and_drop_metadatum_sort'),
                                                         autoHide: true,
@@ -125,17 +157,6 @@
                                                     :class="{'is-danger': formWithErrors == metadatum.id }">
                                                     {{ metadatum.name }}
                                             </span>
-                                            <span 
-                                                    v-if="metadatum.required === 'yes'"
-                                                    class="label-details"
-                                                    v-tooltip="{
-                                                        content: $i18n.get('label_required'),
-                                                        autoHide: true,
-                                                        classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
-                                                        placement: 'auto-start'
-                                                    }">
-                                                *&nbsp;
-                                            </span>
                                             <span   
                                                     v-if="metadatum.id != undefined && metadatum.metadata_type_object"
                                                     class="label-details"
@@ -158,6 +179,16 @@
                                                         }">
                                                     <i class="tainacan-icon tainacan-icon-private"/>
                                                 </span>
+                                                <span 
+                                                        v-if="metadatum.required === 'yes'"
+                                                        v-tooltip="{
+                                                            content: $i18n.get('label_required'),
+                                                            autoHide: true,
+                                                            classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : ''],
+                                                            placement: 'auto-start'
+                                                        }">
+                                                    *&nbsp;
+                                                </span>
                                                 <span 
                                                         v-tooltip="{
                                                             content: (metadatum.collection_id == 'default') || isRepositoryLevel ? $i18n.get('label_repository_metadatum') : $i18n.get('label_collection_metadatum'),
@@ -247,6 +278,8 @@
                                             v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
                                             :parent.sync="metadatum"
                                             :metadata-name-filter-string="metadataNameFilterString"
+                                            :metadata-type-filter-options="metadataTypeFilterOptions"
+                                            :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
                                             :is-parent-multiple="metadatum.multiple == 'yes' || (editForms[metadatum.id] && editForms[metadatum.id].multiple == 'yes')"
                                             :is-repository-level="isRepositoryLevel"
                                             :collapse-all="collapseAll" />
@@ -356,12 +389,16 @@ export default {
             columnsTopY: 0,
             collapseAll: false,
             metadataNameFilterString: '',
+            metadataTypeFilterOptions: []
         }
     },
     computed: {
         collection() {
             return this.getCollection();
         },
+        hasSomeMetadataTypeFilterApplied() {
+            return this.metadataTypeFilterOptions.length && this.metadataTypeFilterOptions.some((metadatumType) => metadatumType.enabled);
+        },
         availableMetadatumList: {
             get() {
                 return this.getMetadatumTypes();
@@ -437,13 +474,20 @@ export default {
 
         this.fetchMetadatumTypes()
             .then(() => {
+                this.metadataTypeFilterOptions = JSON.parse(JSON.stringify(this.getMetadatumTypes()))
+                    .map((metadatumType) => {
+                        return {
+                            enabled: false,
+                            name: metadatumType.name,
+                            type: metadatumType.className
+                        }
+                    });
                 this.isLoadingMetadatumTypes = false;
             })
             .catch(() => {
                 this.isLoadingMetadatumTypes = false;
             });
         this.refreshMetadata();
-       
     },
     beforeDestroy() {
 
@@ -470,7 +514,7 @@ export default {
             'getMetadatumTypes',
             'getMetadata',
         ]),
-        handleChange(event) {     
+        handleChange(event) {
             if (event.added) {
                 this.addNewMetadatum(event.added.element, event.added.newIndex);
             } else if (event.removed) {
@@ -671,6 +715,31 @@ export default {
             else 
                 return metadatum.name.toString().toLowerCase().indexOf(this.metadataNameFilterString.toString().toLowerCase()) >= 0;
         },
+        filterByMetadatumType(metadatum) {
+            if (!this.hasSomeMetadataTypeFilterApplied)
+                return true;
+
+            if (metadatum.metadata_type_object && 
+                metadatum.metadata_type_object.component == 'tainacan-compound' &&
+                metadatum.metadata_type_options &&
+                metadatum.metadata_type_options.children_objects &&
+                metadatum.metadata_type_options.children_objects.length
+            ) {
+                let childTypesArray = metadatum.metadata_type_options.children_objects.map((children) => children.metadata_type);
+                childTypesArray.push(metadatum.metadata_type);
+
+                for (let metadatumType of this.metadataTypeFilterOptions) {
+                    if (metadatumType.enabled && childTypesArray.some((childType) => childType == metadatumType.type))
+                        return true;
+                }
+            } else {
+                for (let metadatumType of this.metadataTypeFilterOptions) {
+                    if (metadatumType.enabled && metadatum.metadata_type == metadatumType.type)
+                        return true;
+                }
+            }
+            return false;
+        },
         isCollapseOpen(metadatumId) {
             return this.collapses[metadatumId] == true;
         }
@@ -762,6 +831,26 @@ export default {
             h3 {
                 margin-right: auto;
             }
+
+            .dropdown-menu {
+                display: block;
+
+                div.dropdown-content {
+                    padding: 0;
+
+                    .metadata-options-container {
+                        max-height: 288px;
+                        overflow: auto;
+                        font-size: 1.125em;
+                    }
+                    .dropdown-item {
+                        padding: 0.25em 1.0em 0.25em 0.75em;
+                    }
+                    .dropdown-item span{
+                        vertical-align: middle;
+                    }
+                }
+            }
         }
 
         .collapse-all {
diff --git a/src/views/tainacan-admin-i18n.php b/src/views/tainacan-admin-i18n.php
index 2f0cabd09..a8b91ccd1 100644
--- a/src/views/tainacan-admin-i18n.php
+++ b/src/views/tainacan-admin-i18n.php
@@ -539,6 +539,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_compact_list'							 => __( 'Compact list', 'tainacan'),
 	'label_detailed_list'							 => __( 'Detailed list', 'tainacan'),
 	'label_view_metadata_details'					 => __( 'View metadata details', 'tainacan'),
+	'label_filter_by_metadata_type'					 => __( 'Filter by metadatum type', 'tainacan'),
 
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),

From 77d415436da5668f572f49b3de9236330c1da004 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 1 Mar 2021 18:01:06 -0300
Subject: [PATCH 7/9] Begins implementation of custom options_as_html per each
 metadata type. #481.

---
 ...lass-tainacan-rest-metadata-controller.php |  7 ++-
 .../class-tainacan-metadata-type.php          |  8 ++-
 .../taxonomy/class-tainacan-taxonomy.php      | 63 ++++++++++++++++++-
 .../components/other/metadatum-details.vue    | 36 +++++++----
 .../js/store/modules/metadata/actions.js      |  5 +-
 src/views/admin/pages/lists/metadata-page.vue |  3 +-
 6 files changed, 101 insertions(+), 21 deletions(-)

diff --git a/src/classes/api/endpoints/class-tainacan-rest-metadata-controller.php b/src/classes/api/endpoints/class-tainacan-rest-metadata-controller.php
index 9f2e28846..c578021a0 100644
--- a/src/classes/api/endpoints/class-tainacan-rest-metadata-controller.php
+++ b/src/classes/api/endpoints/class-tainacan-rest-metadata-controller.php
@@ -308,14 +308,17 @@ class REST_Metadata_Controller extends REST_Controller {
 			$item_arr = $item->_toArray();
 			$item_arr['metadata_type_object'] = $item->get_metadata_type_object()->_toArray();
 
-			if(isset($item_arr['metadata_type_options']) && isset($item_arr['metadata_type_options']['taxonomy_id'])){
+			if ( isset($request['include_options_as_html']) && $request['include_options_as_html'] == 'yes' )
+				$item_arr['options_as_html'] = $item->get_metadata_type_object()->get_options_as_html();
+
+			if ( isset($item_arr['metadata_type_options']) && isset($item_arr['metadata_type_options']['taxonomy_id']) ) {
 				$taxonomy = Repositories\Taxonomies::get_instance()->get_db_identifier_by_id( $item_arr['metadata_type_options']['taxonomy_id'] );
 				//$taxonomy = new Entities\Taxonomy($item_arr['metadata_type_options']['taxonomy_id']);
 				//$item_arr['metadata_type_options']['taxonomy'] = $taxonomy->get_db_identifier();
 				$item_arr['metadata_type_options']['taxonomy'] = $taxonomy;
 			}
 
-			if($request['context'] === 'edit'){
+			if ($request['context'] === 'edit') {
 				$item_arr['current_user_can_edit'] = $item->can_edit();
 				$item_arr['current_user_can_delete'] = $item->can_delete();
 				ob_start();
diff --git a/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php b/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php
index c8d133efa..b20faccd3 100644
--- a/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php
+++ b/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php
@@ -211,8 +211,11 @@ abstract class Metadata_Type  {
         $options = $this->get_options();
         
         if ( count($options) > 0 ) {
+
+            $form_labels = $this->get_form_labels();
+            
             foreach($options as $option_label => $option_value) {
-                $options_as_html .= '<div class="field"><div class="label">' . $option_label .'</div>';
+                $options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
                 $options_as_html .= '<div class="value">' . $option_value . '</div></div>';
             }
         }
@@ -247,8 +250,7 @@ abstract class Metadata_Type  {
         $attributes['primitive_type']      = $this->get_primitive_type();
         $attributes['form_component']      = $this->get_form_component();
         $attributes['preview_template']    = $this->get_preview_template();
-        $attributes['options_as_html']     = $this->get_options_as_html();
-
+        
         return $attributes;
         
     }
diff --git a/src/views/admin/components/metadata-types/taxonomy/class-tainacan-taxonomy.php b/src/views/admin/components/metadata-types/taxonomy/class-tainacan-taxonomy.php
index d099be10f..6f6f54b74 100644
--- a/src/views/admin/components/metadata-types/taxonomy/class-tainacan-taxonomy.php
+++ b/src/views/admin/components/metadata-types/taxonomy/class-tainacan-taxonomy.php
@@ -82,8 +82,8 @@ class Taxonomy extends Metadata_Type {
 	public function get_form_labels(){
 		return [
 			'taxonomy_id' => [
-				'title' => __( 'Related Collection', 'tainacan' ),
-				'description' => __( 'Select the collection to fetch items', 'tainacan' ),
+				'title' => __( 'Related Taxonomy', 'tainacan' ),
+				'description' => __( 'Select the taxonomy to fetch terms', 'tainacan' ),
 			],
 			'input_type' => [
 				'title' => __( 'Input type', 'tainacan' ),
@@ -104,6 +104,65 @@ class Taxonomy extends Metadata_Type {
 		];
 	}
 
+	    /**
+     * Gets print-ready version of the options list in html
+     *
+     * Checks if at least one option exists, otherwise return an empty string
+     * 
+     * @return string An html content with labels and values for the options or an empty string
+     */
+    public function get_options_as_html() {
+        $options_as_html = '';
+        $options = $this->get_options();
+		
+        if ( count($options) > 0 ) {
+
+            $form_labels = $this->get_form_labels();
+            
+            foreach($options as $option_label => $option_value) {
+                $options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
+                
+				$readable_option_value = '';
+				switch($option_label) {
+					
+					case 'taxonomy_id':
+						$taxonomy = \tainacan_taxonomies()->fetch( (int) $option_value );
+						if ( $taxonomy instanceof \Tainacan\Entities\Taxonomy )
+							$readable_option_value = $taxonomy->get_name();
+						else
+							$readable_option_value = $option_value;
+						break;
+
+					case 'input_type':
+							if ($option_value == 'tainacan-taxonomy-radio')
+								$readable_option_value = __('Radio', 'tainacan');
+							else if ($option_value == 'tainacan-taxonomy-checkbox')
+								$readable_option_value = __('Checkbox', 'tainacan');
+							else if ($option_value == 'tainacan-taxonomy-taginput')
+								$readable_option_value = __('Taginput', 'tainacan');
+							else
+								$readable_option_value = $option_value;
+						break;
+
+					case 'allow_new_terms':
+						if ($option_value == 'yes')
+							$readable_option_value = __('Yes', 'tainacan');
+						else if ($option_value == 'no')
+							$readable_option_value = __('No', 'tainacan');
+						else
+							$readable_option_value = $option_value;
+					break;
+
+					default:
+						$readable_option_value = $option_value;
+				}
+				$options_as_html .= '<div class="value">' . $readable_option_value . '</div></div>';
+
+            }
+        }
+        return $options_as_html;
+    }
+
 	public function validate_options( Metadatum $metadatum) {
 
 		if ( !in_array($metadatum->get_status(), apply_filters('tainacan-status-require-validation', ['publish','future','private'])) )
diff --git a/src/views/admin/components/other/metadatum-details.vue b/src/views/admin/components/other/metadatum-details.vue
index 54b1f6cf4..ba7c643a5 100644
--- a/src/views/admin/components/other/metadatum-details.vue
+++ b/src/views/admin/components/other/metadatum-details.vue
@@ -12,14 +12,14 @@
         <div class="label">{{ $i18n.getHelperTitle('metadata', 'semantic_uri') }}</div>
         <div class="value">{{ metadatum.semantic_uri }}</div>
     </div>
-        <div class="field">
+    <!-- <div class="field">
         <div class="label">{{ $i18n.getHelperTitle('metadata', 'status') }}</div>
         <div class="value">
             <template v-if="metadatum.status === 'publish'">{{ $i18n.get('publish_visibility') }}</template>
             <template v-if="metadatum.status === 'private'">{{ $i18n.get('private_visibility') }}</template>
         </div>
-    </div>
-        <div class="field">
+    </div> -->
+    <div class="field">
         <div class="label">{{ $i18n.get('label_display') }}</div>
         <div class="value">
             <template v-if="metadatum.display === 'yes'">{{ $i18n.get('label_display_default') }}</template>
@@ -32,8 +32,8 @@
         <div class="value">{{ insertOptions }}</div>
     </div>
     <div
-            v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.options_as_html"
-            v-html="metadatum.metadata_type_object.options_as_html" />
+            v-if="metadatum.options_as_html"
+            v-html="metadatum.options_as_html" />
 </div>
 </template>
 
@@ -46,11 +46,11 @@ export default {
         insertOptions() {
             const enableInsertOptions = [];
 
-            if (this.metadatum.required)
+            if (this.metadatum.required === 'yes')
                 enableInsertOptions.push(this.$i18n.getHelperTitle('metadata', 'required'));
-            if (this.metadatum.multiple)
+            if (this.metadatum.multiple === 'yes')
                 enableInsertOptions.push(this.$i18n.getHelperTitle('metadata', 'multiple'));
-            if (this.metadatum.collection_key)
+            if (this.metadatum.collection_key === 'yes')
                 enableInsertOptions.push(this.$i18n.getHelperTitle('metadata', 'collection_key'));
 
             return enableInsertOptions.join(', ');
@@ -62,17 +62,29 @@ export default {
 <style lang="scss" scoped>
 .metadatum-details {
     padding: 0.75em 1.5em 0.75em 3.5em;
-    -moz-column-count: 2;
+    -moz-column-count: 3;
     -moz-column-gap: 0;
     -moz-column-rule: none;
-    -webkit-column-count: 2;
+    -webkit-column-count: 3;
     -webkit-column-gap: 0;
     -webkit-column-rule: none;
-    column-count: 2;
+    column-count: 3;
     column-gap: 4em;
     column-rule: none;
 
-    &>.field, &>section {
+    @media screen and (max-width: 1024px) {
+        -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;
+    }
+
+    /deep/ .field {
         -webkit-column-break-inside: avoid;
         page-break-inside: avoid;
         break-inside: avoid;
diff --git a/src/views/admin/js/store/modules/metadata/actions.js b/src/views/admin/js/store/modules/metadata/actions.js
index 3adf88e4e..a65ec28c8 100644
--- a/src/views/admin/js/store/modules/metadata/actions.js
+++ b/src/views/admin/js/store/modules/metadata/actions.js
@@ -1,6 +1,6 @@
 import axios from '../../../axios';
 
-export const fetchMetadata = ({commit}, {collectionId, isRepositoryLevel, isContextEdit, includeDisabled, isAdvancedSearch, parent, includeControlMetadataTypes}) => {
+export const fetchMetadata = ({commit}, { collectionId, isRepositoryLevel, isContextEdit, includeDisabled, isAdvancedSearch, parent, includeControlMetadataTypes, includeOptionsAsHtml }) => {
 
     const source = axios.CancelToken.source();
 
@@ -26,6 +26,9 @@ export const fetchMetadata = ({commit}, {collectionId, isRepositoryLevel, isCont
             if (includeControlMetadataTypes)
                 endpoint += '&include_control_metadata_types=true';
 
+            if (includeOptionsAsHtml)
+                endpoint += '&include_options_as_html=yes';
+
             axios.tainacan.get(endpoint, { cancelToken: source.token })
                 .then((res) => {
                     let metadata = res.data;
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index 874c0277d..0ccae27e8 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -662,7 +662,8 @@ export default {
                 isRepositoryLevel: this.isRepositoryLevel, 
                 isContextEdit: true, 
                 includeDisabled: true,
-                parent: '0'
+                parent: '0',
+                includeOptionsAsHtml: true
             }).then((resp) => {
                     resp.request
                         .then(() => {

From d707be223175ec6ea0499c2310672526fab582dd Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 2 Mar 2021 12:13:09 -0300
Subject: [PATCH 8/9] Implements metadata options_as_html o other types #481.

---
 .../edition/metadatum-edition-form.vue        |  12 +-
 .../compound/child-metadata-list.vue          |   2 +-
 .../compound/class-tainacan-compound.php      |  11 ++
 .../class-tainacan-metadata-type.php          |   6 +-
 .../numeric/class-tainacan-numeric.php        |   1 +
 .../class-tainacan-relationship.php           |  63 +++++++++++
 .../metadata-types/taxonomy/FormTaxonomy.vue  |   5 +-
 .../taxonomy/class-tainacan-taxonomy.php      | 107 ++++++++++++------
 .../components/other/metadatum-details.vue    |  20 ++--
 .../js/store/modules/metadata/actions.js      |  18 ++-
 src/views/admin/pages/lists/metadata-page.vue |   2 +-
 11 files changed, 192 insertions(+), 55 deletions(-)

diff --git a/src/views/admin/components/edition/metadatum-edition-form.vue b/src/views/admin/components/edition/metadatum-edition-form.vue
index 76c15d251..acd9019c2 100644
--- a/src/views/admin/components/edition/metadatum-edition-form.vue
+++ b/src/views/admin/components/edition/metadatum-edition-form.vue
@@ -316,8 +316,10 @@
             if (this.closedByForm) {
                 this.editedMetadatum.saved = true;
             } else {
-                this.oldForm.saved = this.editForm.saved;
-                if (JSON.stringify(this.editForm) != JSON.stringify(this.oldForm))
+                delete this.oldForm['saved'];
+                delete this.editForm['saved'];
+                //console.log(this.oldForm, this.editForm);
+                if (_.isEqual(this.editForm, this.oldForm))
                     this.editedMetadatum.saved = false;
                 else
                     this.editedMetadatum.saved = true;
@@ -341,7 +343,8 @@
                         metadatumId: metadatum.id,
                         isRepositoryLevel: this.isRepositoryLevel,
                         index: this.index,
-                        options: this.editForm
+                        options: this.editForm,
+                        includeOptionsAsHtml: true
                     })
                         .then(() => {
                             this.editForm = {};
@@ -380,7 +383,8 @@
                         metadatumId: metadatum.id,
                         isRepositoryLevel: this.isRepositoryLevel,
                         index: this.index,
-                        options: formObj
+                        options: formObj,
+                        includeOptionsAsHtml: true
                     })
                         .then(() => {
                             this.editForm = {};
diff --git a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
index 3b52be8f6..d35600b30 100644
--- a/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
+++ b/src/views/admin/components/metadata-types/compound/child-metadata-list.vue
@@ -51,7 +51,7 @@
                             }"
                             @click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
                             class="gray-icon icon"
-                            style="cursor: pointer">
+                            :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
                         <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
                     </span>
                     <span 
diff --git a/src/views/admin/components/metadata-types/compound/class-tainacan-compound.php b/src/views/admin/components/metadata-types/compound/class-tainacan-compound.php
index 2dbb868b2..1669efce5 100644
--- a/src/views/admin/components/metadata-types/compound/class-tainacan-compound.php
+++ b/src/views/admin/components/metadata-types/compound/class-tainacan-compound.php
@@ -73,6 +73,17 @@ class Compound extends Metadata_Type {
             ]
         ];
     }
+	
+	/**
+     * Gets print-ready version of the options list in html
+     *
+     * Checks if at least one option exists, otherwise return an empty string
+     * 
+     * @return string An html content with labels and values for the options or an empty string
+     */
+    public function get_options_as_html() {
+        return '';
+    }
 
 	/**
 	 * save options and remove old children
diff --git a/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php b/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php
index b20faccd3..1915fa02e 100644
--- a/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php
+++ b/src/views/admin/components/metadata-types/metadata-type/class-tainacan-metadata-type.php
@@ -215,8 +215,10 @@ abstract class Metadata_Type  {
             $form_labels = $this->get_form_labels();
             
             foreach($options as $option_label => $option_value) {
-                $options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
-                $options_as_html .= '<div class="value">' . $option_value . '</div></div>';
+				if ( $option_value != '' ) {
+                    $options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
+                    $options_as_html .= '<div class="value">' . ($option_value == 'yes' ? __('Yes', 'tainacan') : ($option_value == 'no' ? __('No', 'tainacan') : $option_value) ) . '</div></div>';
+                }
             }
         }
         return $options_as_html;
diff --git a/src/views/admin/components/metadata-types/numeric/class-tainacan-numeric.php b/src/views/admin/components/metadata-types/numeric/class-tainacan-numeric.php
index 4ad0584e7..cc496cab0 100644
--- a/src/views/admin/components/metadata-types/numeric/class-tainacan-numeric.php
+++ b/src/views/admin/components/metadata-types/numeric/class-tainacan-numeric.php
@@ -37,4 +37,5 @@ class Numeric extends Metadata_Type {
             ]
         ];
     }
+    
 }
\ No newline at end of file
diff --git a/src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php b/src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php
index 1767175a2..9c4680e77 100644
--- a/src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php
+++ b/src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php
@@ -66,6 +66,69 @@ class Relationship extends Metadata_Type {
 		];
 	}
 
+	/**
+     * Gets print-ready version of the options list in html
+     *
+     * Checks if at least one option exists, otherwise return an empty string
+     * 
+     * @return string An html content with labels and values for the options or an empty string
+     */
+    public function get_options_as_html() {
+        $options_as_html = '';
+        $options = $this->get_options();
+		
+        if ( count($options) > 0 ) {
+
+			// Remove this option that is not relevant for the user
+			if ( isset($options['related_primitive_type']) )
+				unset($options['related_primitive_type']);
+
+			$form_labels = $this->get_form_labels();
+				
+			foreach($options as $option_label => $option_value) {
+
+				if ( $option_value != '' ) {
+					$options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
+					
+					$readable_option_value = '';
+
+					switch($option_label) {
+						
+						case 'collection_id':
+							$collection = \tainacan_collections()->fetch( (int) $option_value );
+							if ( $collection instanceof \Tainacan\Entities\Collection )
+								$readable_option_value = $collection->get_name();
+							else
+								$readable_option_value = $option_value;
+						break;
+
+						case 'search':
+							$metadata = \tainacan_metadata()->fetch( (int) $option_value );
+							if ( $metadata ) {
+								$readable_option_value = $metadata;
+							} else
+								$readable_option_value = $option_value;
+						break;
+
+						case 'repeated':
+							if ($option_value == 'yes')
+								$readable_option_value = __('Yes', 'tainacan');
+							else if ($option_value == 'no')
+								$readable_option_value = __('No', 'tainacan');
+							else
+								$readable_option_value = $option_value;
+						break;
+
+						default:
+							$readable_option_value = $option_value;
+					}
+					$options_as_html .= '<div class="value">' . $readable_option_value . '</div></div>';
+				}
+            }
+        }
+        return $options_as_html;
+    }
+
 	public function validate_options(\Tainacan\Entities\Metadatum $metadatum) {
 		if ( !in_array($metadatum->get_status(), apply_filters('tainacan-status-require-validation', ['publish','future','private'])) )
 			return true;
diff --git a/src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue b/src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue
index 7be3a3058..93f58ffe6 100644
--- a/src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue
+++ b/src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue
@@ -153,6 +153,7 @@
                 isReady: false,
                 taxonomies: [],
                 taxonomy_id: '',
+                taxonomy: '',
                 loading: false,
                 allow_new_terms: 'yes',
                 link_filtered_by_collections: [],
@@ -235,6 +236,7 @@
 
                 this.visible_options_list = ( this.value.visible_options_list ) ? this.value.visible_options_list : false;
                 this.link_filtered_by_collections = ( this.value.link_filtered_by_collections ) ? this.value.link_filtered_by_collections : [];
+                this.taxonomy = this.value.taxonomy ? this.value.taxonomy : '';
             }
 
             this.isReady = true;
@@ -286,7 +288,8 @@
                     input_type: this.input_type,
                     allow_new_terms: this.allow_new_terms,
                     visible_options_list: this.visible_options_list,
-                    link_filtered_by_collections: this.link_filtered_by_collections
+                    link_filtered_by_collections: this.link_filtered_by_collections,
+                    taxonomy: this.taxonomy
                 })
             },
             updateSelectedCollections(selectedCollections) {
diff --git a/src/views/admin/components/metadata-types/taxonomy/class-tainacan-taxonomy.php b/src/views/admin/components/metadata-types/taxonomy/class-tainacan-taxonomy.php
index 6f6f54b74..e46988e1d 100644
--- a/src/views/admin/components/metadata-types/taxonomy/class-tainacan-taxonomy.php
+++ b/src/views/admin/components/metadata-types/taxonomy/class-tainacan-taxonomy.php
@@ -104,7 +104,7 @@ class Taxonomy extends Metadata_Type {
 		];
 	}
 
-	    /**
+	/**
      * Gets print-ready version of the options list in html
      *
      * Checks if at least one option exists, otherwise return an empty string
@@ -117,47 +117,84 @@ class Taxonomy extends Metadata_Type {
 		
         if ( count($options) > 0 ) {
 
-            $form_labels = $this->get_form_labels();
-            
-            foreach($options as $option_label => $option_value) {
-                $options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
-                
-				$readable_option_value = '';
-				switch($option_label) {
-					
-					case 'taxonomy_id':
-						$taxonomy = \tainacan_taxonomies()->fetch( (int) $option_value );
-						if ( $taxonomy instanceof \Tainacan\Entities\Taxonomy )
-							$readable_option_value = $taxonomy->get_name();
-						else
-							$readable_option_value = $option_value;
-						break;
+			// Remove this option as it doesn't matter if using a taginput
+			if ( isset($options['visible_options_list']) && isset($options['input_type']) && $options['input_type'] == 'tainacan-taxonomy-tag-input' )
+				unset($options['visible_options_list']);
 
-					case 'input_type':
-							if ($option_value == 'tainacan-taxonomy-radio')
-								$readable_option_value = __('Radio', 'tainacan');
-							else if ($option_value == 'tainacan-taxonomy-checkbox')
-								$readable_option_value = __('Checkbox', 'tainacan');
-							else if ($option_value == 'tainacan-taxonomy-taginput')
-								$readable_option_value = __('Taginput', 'tainacan');
+			$form_labels = $this->get_form_labels();
+				
+			foreach($options as $option_label => $option_value) {
+
+				if ( $option_value != '' ) {
+					$options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
+					
+					$readable_option_value = '';
+
+					switch($option_label) {
+						
+						case 'taxonomy_id':
+							$taxonomy = \tainacan_taxonomies()->fetch( (int) $option_value );
+							if ( $taxonomy instanceof \Tainacan\Entities\Taxonomy )
+								$readable_option_value = $taxonomy->get_name();
 							else
 								$readable_option_value = $option_value;
 						break;
 
-					case 'allow_new_terms':
-						if ($option_value == 'yes')
-							$readable_option_value = __('Yes', 'tainacan');
-						else if ($option_value == 'no')
-							$readable_option_value = __('No', 'tainacan');
-						else
+						case 'input_type':
+								if ($option_value == 'tainacan-taxonomy-radio')
+									$readable_option_value = __('Radio', 'tainacan');
+								else if ($option_value == 'tainacan-taxonomy-checkbox')
+									$readable_option_value = __('Checkbox', 'tainacan');
+								else if ($option_value == 'tainacan-taxonomy-tag-input')
+									$readable_option_value = __('Taginput', 'tainacan');
+								else
+									$readable_option_value = $option_value;
+						break;
+
+						case 'visible_options_list':
+							if ($option_value == 1)
+								$readable_option_value = __('Yes', 'tainacan');
+							else if ($option_value == 0)
+								$readable_option_value = __('No', 'tainacan');
+							else
+								$readable_option_value = $option_value;
+						break;
+
+						case 'allow_new_terms':
+							if ($option_value == 'yes')
+								$readable_option_value = __('Yes', 'tainacan');
+							else if ($option_value == 'no')
+								$readable_option_value = __('No', 'tainacan');
+							else
+								$readable_option_value = $option_value;
+						break;
+
+						case 'link_filtered_by_collections':
+							if (count($option_value) > 0) {
+								$collections = \tainacan_collections()->fetch( [ 'post__in' => $option_value ], 'OBJECT' );
+								
+								if ( is_array($collections) ) {
+									
+									$collection_names = '';
+									for ($i = 0; $i < count($collections); $i++) {
+										$collection_names .= $collections[$i]->get_name();
+										if ($i < count($collections) - 1)
+											$collection_names .= ', ';
+									}
+
+									$readable_option_value = $collection_names;
+								}
+								else
+									$readable_option_value = $option_value;
+							} else
+								$readable_option_value = __( 'None', 'tainacan' );
+						break;
+
+						default:
 							$readable_option_value = $option_value;
-					break;
-
-					default:
-						$readable_option_value = $option_value;
+					}
+					$options_as_html .= '<div class="value">' . $readable_option_value . '</div></div>';
 				}
-				$options_as_html .= '<div class="value">' . $readable_option_value . '</div></div>';
-
             }
         }
         return $options_as_html;
diff --git a/src/views/admin/components/other/metadatum-details.vue b/src/views/admin/components/other/metadatum-details.vue
index ba7c643a5..803e7c6ab 100644
--- a/src/views/admin/components/other/metadatum-details.vue
+++ b/src/views/admin/components/other/metadatum-details.vue
@@ -27,7 +27,9 @@
             <template v-if="metadatum.display === 'never'">{{ $i18n.get('label_display_never') }}</template>
         </div>
     </div>
-    <div class="field">
+    <div 
+            v-if="insertOptions != ''"
+            class="field">
         <div class="label">{{ $i18n.get('label_insert_options') }}</div>
         <div class="value">{{ insertOptions }}</div>
     </div>
@@ -89,12 +91,16 @@ export default {
         page-break-inside: avoid;
         break-inside: avoid;
         margin-bottom: 1em;
-    }
-    .field > .field:not(:last-child) {
-        margin-bottom: 0em;
-    }
-    .field .value {
-        font-size: 0.9em;
+
+        & > .field:not(:last-child) {
+            margin-bottom: 0em;
+        }
+        .label {
+            white-space: normal;
+        }
+        .value {
+            font-size: 0.9em;
+        }
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/admin/js/store/modules/metadata/actions.js b/src/views/admin/js/store/modules/metadata/actions.js
index a65ec28c8..20418b08c 100644
--- a/src/views/admin/js/store/modules/metadata/actions.js
+++ b/src/views/admin/js/store/modules/metadata/actions.js
@@ -51,7 +51,7 @@ export const fetchMetadata = ({commit}, { collectionId, isRepositoryLevel, isCon
     });
 };
 
-export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, status, isRepositoryLevel, newIndex, parent}) => {
+export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, status, isRepositoryLevel, newIndex, parent, includeOptionsAsHtml}) => {
     return new Promise((resolve, reject) => {
         let endpoint = '';
         if (!isRepositoryLevel)
@@ -59,7 +59,12 @@ export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, stat
         else
             endpoint = '/metadata/';
 
-        axios.tainacan.post(endpoint + '?context=edit', {
+        endpoint += '?context=edit';
+
+        if (includeOptionsAsHtml)
+            endpoint += '&include_options_as_html=yes';
+
+        axios.tainacan.post(endpoint, {
             name: name,
             metadata_type: metadatumType,
             status: status,
@@ -77,7 +82,7 @@ export const sendMetadatum = ({commit}, {collectionId, name, metadatumType, stat
     });
 };
 
-export const updateMetadatum = ({commit}, {collectionId, metadatumId, isRepositoryLevel, index, options}) => {
+export const updateMetadatum = ({commit}, {collectionId, metadatumId, isRepositoryLevel, index, options, includeOptionsAsHtml}) => {
     return new Promise((resolve, reject) => {
         let endpoint = '';
 
@@ -86,7 +91,12 @@ export const updateMetadatum = ({commit}, {collectionId, metadatumId, isReposito
         else
             endpoint = '/metadata/' + metadatumId;
 
-        axios.tainacan.put(endpoint + '?context=edit', options)
+        endpoint += '?context=edit';
+
+        if (includeOptionsAsHtml)
+            endpoint += '&include_options_as_html=yes';
+
+        axios.tainacan.put(endpoint, options)
             .then(res => {
                 let metadatum = res.data;
                 commit('setSingleMetadatum', { metadatum: metadatum, index: index, isRepositoryLevel: isRepositoryLevel });
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index 0ccae27e8..198c6fe23 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -138,7 +138,7 @@
                                                     }"
                                                     @click="$set(collapses, metadatum.id, !isCollapseOpen(metadatum.id))"
                                                     class="gray-icon icon"
-                                                    style="cursor: pointer">
+                                                    :style="{ cursor: 'pointer', opacity: openedMetadatumId != metadatum.id ? '1.0' : '0.0' }">
                                                 <i :class="'tainacan-icon tainacan-icon-1-25em tainacan-icon-' + (isCollapseOpen(metadatum.id) ? 'arrowdown' : 'arrowright')" />
                                             </span>
                                             <span 

From cb4cab050543bf764ccbfad08a0b328948f3651b Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 2 Mar 2021 14:18:03 -0300
Subject: [PATCH 9/9] Fixes 'not saved' status detection logic. #481

---
 .../admin/components/edition/metadatum-edition-form.vue     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/views/admin/components/edition/metadatum-edition-form.vue b/src/views/admin/components/edition/metadatum-edition-form.vue
index acd9019c2..63d0e7553 100644
--- a/src/views/admin/components/edition/metadatum-edition-form.vue
+++ b/src/views/admin/components/edition/metadatum-edition-form.vue
@@ -316,10 +316,8 @@
             if (this.closedByForm) {
                 this.editedMetadatum.saved = true;
             } else {
-                delete this.oldForm['saved'];
-                delete this.editForm['saved'];
-                //console.log(this.oldForm, this.editForm);
-                if (_.isEqual(this.editForm, this.oldForm))
+                this.$set(this.oldForm, 'saved', this.editForm.saved);
+                if (!_.isEqual(this.editForm, this.oldForm))
                     this.editedMetadatum.saved = false;
                 else
                     this.editedMetadatum.saved = true;