Fixes missing collection name on Filters and Metadata list. Replaces some assets for plugin page.

src/admin/components/lists/filters-list.vue

@@ -1,7 +1,20 @@
 <template>
     <div class="filters-list-page">
         <b-loading :active.sync="isLoadingMetadatumTypes"/>
-        <tainacan-title v-if="!isRepositoryLevel"/>
+        <div 
+                v-if="!isRepositoryLevel"
+                class="tainacan-page-title">
+            <h1>
+                {{ $i18n.get('title_collection_filters_edition') + ' ' }}
+                <span style="font-weight: 600;">{{ collectionName }}</span>
+            </h1>
+            <a 
+                    @click="$router.go(-1)"
+                    class="back-link has-text-secondary">
+                {{ $i18n.get('back') }}
+            </a>
+            <hr>
+        </div>
         <p v-if="isRepositoryLevel">{{ $i18n.get('info_repository_filters_inheritance') }}</p>
         <br>
         <div class="columns">
@@ -207,6 +220,7 @@ export default {
     data(){           
         return {
             collectionId: '',
+            collectionName: '',
             isRepositoryLevel: false,
             isDraggingFromAvailable: false,
             isLoadingMetadatumTypes: true,
@@ -284,6 +298,9 @@ export default {
         ...mapGetters('metadata', [
             'getMetadata',
         ]),
+        ...mapActions('collection', [
+            'fetchCollectionName'
+        ]),
         handleChange($event) {     
             if ($event.added) {
                 this.addNewFilter($event.added.element, $event.added.newIndex);
@@ -494,6 +511,13 @@ export default {
             .catch(() => {
                 this.isLoadingFilters = false;
             });
+
+        
+        // Obtains collection name
+        this.fetchCollectionName(this.collectionId).then((collectionName) => {
+            this.collectionName = collectionName;
+        });
+        
     }
 }
 </script>
@@ -504,6 +528,35 @@ export default {
 
     .filters-list-page {
 
+        .tainacan-page-title {
+            margin-bottom: 40px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-end;
+            justify-content: space-between;
+
+            h1, h2 {
+                font-size: 20px;
+                font-weight: 500;
+                color: $gray5;
+                display: inline-block;
+                width: 80%;
+                flex-shrink: 1;
+                flex-grow: 1;
+            }
+            a.back-link{
+                font-weight: 500;
+                float: right;
+                margin-top: 5px;
+            }
+            hr{
+                margin: 3px 0px 4px 0px; 
+                height: 1px;
+                background-color: $secondary;
+                width: 100%;
+            }
+        }
+                    
         .column:not(.available-metadata-area){
             overflow: hidden;
             flex-grow: 2;

src/admin/components/lists/metadata-list.vue

@@ -2,7 +2,20 @@
     <div class="metadata-list-page">
         <b-loading :active.sync="isLoadingMetadatumTypes"/>
         <b-loading :active.sync="isLoadingMetadatumMappers"/>
-        <tainacan-title v-if="!isRepositoryLevel"/>
+                <div 
+                v-if="!isRepositoryLevel"
+                class="tainacan-page-title">
+            <h1>
+                {{ $i18n.get('title_collection_metadata_edition') + ' ' }}
+                <span style="font-weight: 600;">{{ collectionName }}</span>
+            </h1>
+            <a 
+                    @click="$router.go(-1)"
+                    class="back-link has-text-secondary">
+                {{ $i18n.get('back') }}
+            </a>
+            <hr>
+        </div>
         <p v-if="isRepositoryLevel">{{ $i18n.get('info_repository_metadata_inheritance') }}</p>
         <br>
         <b-tabs v-model="activeTab">    
@@ -457,6 +470,9 @@ export default {
             'getMetadata',
             'getMetadatumMappers'
         ]),
+        ...mapActions('collection', [
+            'fetchCollectionName'
+        ]),
         handleChange(event) {     
             if (event.added) {
                 this.addNewMetadatum(event.added.element, event.added.newIndex);
@@ -784,6 +800,11 @@ export default {
             .catch(() => {
                 this.isLoadingMetadatumMappers = false;
             });
+
+        // Obtains collection name
+        this.fetchCollectionName(this.collectionId).then((collectionName) => {
+            this.collectionName = collectionName;
+        });
     }
 }
 </script>
@@ -794,6 +815,35 @@ export default {
 
     .metadata-list-page {
 
+        .tainacan-page-title {
+            margin-bottom: 40px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-end;
+            justify-content: space-between;
+
+            h1, h2 {
+                font-size: 20px;
+                font-weight: 500;
+                color: $gray5;
+                display: inline-block;
+                width: 80%;
+                flex-shrink: 1;
+                flex-grow: 1;
+            }
+            a.back-link{
+                font-weight: 500;
+                float: right;
+                margin-top: 5px;
+            }
+            hr{
+                margin: 3px 0px 4px 0px; 
+                height: 1px;
+                background-color: $secondary;
+                width: 100%;
+            }
+        }
+                    
         .column:not(.available-metadata-area){
             overflow: hidden;
             flex-grow: 2;

src/readme.txt

@@ -77,7 +77,7 @@ If you have Imagick installed in your server, Tainacan will be able to automatic
 
 == Screenshots ==
  
-1. Manage collections
+1. Manage your repository
 2. Set up your collection
 3. Choose the metadata and filters for your collection
 4. Add items described by your metadata