Adds 'See Collection' button to collection subheader.

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

@@ -9,12 +9,20 @@
             </button>
             <b-field class="order-area">
                 <button
-                        :disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm"
+                        :disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm || order == 'asc'"
                         class="button is-white is-small"
-                        @click="onChangeOrder()">
+                        @click="onChangeOrder('asc')">
                     <b-icon 
                             class="gray-icon"
-                            :icon="order === 'ASC' ? 'sort-ascending' : 'sort-descending'"/>
+                            icon="sort-ascending"/>
+                </button>
+                <button
+                        :disabled="orderedTermsList.length <= 0 || isLoadingTerms || isEditingTerm || order == 'desc'"
+                        class="button is-white is-small"
+                        @click="onChangeOrder('desc')">
+                    <b-icon 
+                            class="gray-icon"
+                            icon="sort-descending"/>
                 </button>
             </b-field>
 
@@ -147,8 +155,8 @@ export default {
         ...mapGetters('taxonomy',[
             'getTerms'
         ]),
-        onChangeOrder() {
+        onChangeOrder(newOrder) {
-            this.order == 'asc' ? this.order = 'desc' : this.order = 'asc';
+            this.order = newOrder;
             this.loadTerms(0);
         },
         addNewTerm() {
@@ -388,7 +396,7 @@ export default {
     @import "../../scss/_variables.scss";
 
     .order-area {
-        display: inline-block;
+        display: inline-flex !important;
         padding: 4px;
         margin-left: 30px;
 

src/admin/components/navigation/tainacan-repository-subheader.vue

@@ -5,19 +5,32 @@
             :class="{'is-menu-compressed': isMenuCompressed, 'is-repository-level' : isRepositoryLevel}">
         <h1 v-if="isRepositoryLevel">{{ repositoryName }}</h1>
         <h1 v-else>{{ $i18n.get('collection') + '' }} <span class="has-text-weight-bold">{{ collectionName }}</span></h1>
+        <a
+                :href="collectionURL"
+                target="_blank"
+                v-if="!isRepositoryLevel"
+                class="button"
+                id="see-collection-button">
+            <eye-icon /> {{ $i18n.get('label_see_collection') }}
+        </a>
     </div>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import EyeIcon from '../other/eye-icon.vue';
 
 export default {
     name: 'TainacanRepositorySubheader',
     data() {
         return {
-            repositoryName: tainacan_plugin.repository_name
+            repositoryName: tainacan_plugin.repository_name,
+            collectionId: ''
         }
     },
+    components: {
+        EyeIcon
+    },
     props: {
         isMenuCompressed: false,
         isRepositoryLevel: true
@@ -25,18 +38,25 @@ export default {
     computed: {
         collectionName() {
             return this.getCollectionName();
+        },
+        collectionURL() {
+            return this.getCollectionURL();
         }
     },
     methods: {
         ...mapActions('collection', [
-            'fetchCollectionName'
+            'fetchCollectionNameAndURL'
         ]),
         ...mapGetters('collection', [
             'getCollectionName',
+            'getCollectionURL'
         ])
     },
     mounted() {
-        this.fetchCollectionName();
+        if (!this.isRepositoryLevel) {
+            this.collectionId = this.$route.params.collectionId;
+            this.fetchCollectionNameAndURL(this.collectionId);
+        }
     }
 }
 </script>
@@ -54,7 +74,7 @@ export default {
         overflow-y: hidden;
         padding-top: 10px;
         padding-bottom: 10px;
-        padding-right: $page-side-padding;
+        padding-right: 0;
         padding-left: calc((4.166666667% - 6.666666667px) + 160px);
         margin: 0px;
         vertical-align: middle; 
@@ -67,6 +87,7 @@ export default {
 
         &.is-repository-level {
             background-color: $blue5;
+            padding-right: $page-side-padding;
         }
 
         &.is-menu-compressed {     
@@ -74,15 +95,29 @@ export default {
         }
 
         h1 {
-            font-size: 18px;
+            font-size: 1.125rem;
             color: white;
-            line-height: 18px;
+            line-height: 1.125rem;
             max-width: 100%;
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;  
             transition: all 0.2s linear;
         }
+
+        #see-collection-button {
+            border: none;
+            border-radius: 0px !important;
+            height: 42px !important;
+            right: 0;
+            position: relative;
+            background-color: $turquoise4;
+            color: white;
+            
+            .eye-icon {
+                margin-right: 0.75rem;
+            }
+        }
     }
 </style>
 

src/admin/components/other/eye-icon.vue

@@ -0,0 +1,163 @@
+<template>
+
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xml:space="preserve"
+   viewBox="0 0 20 14"
+   y="0px"
+   x="0px"
+   width="20" 
+   height="20" 
+   version="1.1"
+   class="eye-icon">
+
+<path
+   id="path56"
+   d="M 10,0 C 7.0316493,-0.05440347 4.0111777,1.1325791 2.0710468,3.4179754 1.1631135,4.4654257 0.43447312,5.681008 0,7 c 1.0982625,3.319095 3.9681881,6.044348 7.4282551,6.734139 3.3914659,0.723339 7.2342739,0.03321 9.7934699,-2.420502 C 18.475945,10.128872 19.453576,8.6385839 20,7 18.901737,3.6809051 16.031812,0.95565213 12.571745,0.26586056 11.727831,0.08190134 10.863219,-1.1439431e-4 10,0 Z m 0,2 c 2.617061,-0.050813 5.27673,1.0895398 6.849519,3.2199707 0.361792,0.6728511 1.318734,1.4471184 0.841243,2.2270081 C 16.483135,9.899037 13.995213,11.646083 11.272966,11.92392 8.5410704,12.281194 5.5668346,11.496655 3.6809516,9.4066345 3.0239343,8.7008905 2.483548,7.8849111 2.0996094,7 3.1988496,4.4005461 5.6997692,2.4563534 8.5098665,2.1053252 9.003048,2.0331183 9.5016597,1.9999846 10,2 Z" /><g
+   transform="translate(-2,-5)"
+   style="display:none"
+   class="st0"
+   id="g10">
+	<g
+   style="display:inline"
+   class="st1"
+   id="g8">
+		<g
+   id="g6">
+			<path
+   d="m 12,8 c 0.1,0 0.2,0 0.3,0 V 8 C 12.2,8 12.1,8 12,8 m 0,0 c -0.1,0 -0.2,0 -0.3,0 v 0 c 0.1,0 0.2,0 0.3,0 m 0.3,8 v 0 c -0.1,0 -0.2,0 -0.3,0 0.1,0 0.2,0 0.3,0 m -0.6,0 c 0.1,0 0.2,0 0.3,0 -0.1,0 -0.2,0 -0.3,0 v 0 M 12,6 C 5,6 2,12 2,12 c 0,0 3,6 10,6 7,0 10,-6 10,-6 0,0 -3,-6 -10,-6 z m 0.4,10 c 2,-0.2 3.6,-1.9 3.6,-4 0,-2.1 -1.6,-3.8 -3.6,-4 3.9,0.2 6.2,2.6 7.2,4 -1,1.4 -3.3,3.8 -7.2,4 z m -0.8,0 C 7.7,15.8 5.4,13.4 4.4,12 5.4,10.6 7.7,8.2 11.6,8 9.6,8.2 8,9.9 8,12 c 0,2.1 1.6,3.8 3.6,4 z M 12,14 c -1.1,0 -2,-0.9 -2,-2 0,-1.1 0.9,-2 2,-2 1.1,0 2,0.9 2,2 0,1.1 -0.9,2 -2,2 z"
+   id="path4" />
+		</g>
+	</g>
+</g>
+<g
+   transform="translate(-2,-5)"
+   style="display:none"
+   class="st0"
+   id="g18">
+	<circle
+   style="display:inline;fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10"
+   class="st2"
+   cx="12"
+   cy="11.5"
+   r="3.5"
+   id="circle12" />
+	<g
+   style="display:inline"
+   class="st1"
+   id="g16">
+		<path
+   d="m 12,7 c 5.2,0 7.3,3.6 7.9,5 -0.6,1.4 -2.7,5 -7.9,5 C 6.8,17 4.7,13.4 4.1,12 4.7,10.6 6.8,7 12,7 M 12,5 C 4,5 2,12 2,12 c 0,0 2,7 10,7 8,0 10,-7 10,-7 0,0 -2,-7 -10,-7 z"
+   id="path14" />
+	</g>
+</g>
+<path
+   style="display:none"
+   class="st0"
+   d="m 14,7 c 0,2.2 -1.8,4 -4,4 C 7.8,11 6,9.2 6,7 6,6.7 6,6.4 6.1,6.1 6.3,6.6 6.9,7 7.5,7 8.3,7 9,6.3 9,5.5 9,4.7 8.3,4 7.5,4 7.4,4 7.4,4 7.3,4 8,3.4 9,3 10,3 c 2.2,0 4,1.8 4,4 z M 10,2 C 4.8,2 2.7,5.6 2.1,7 2.7,8.4 4.8,12 10,12 15.2,12 17.3,8.4 17.9,7 17.3,5.6 15.2,2 10,2 m 0,-2 c 8,0 10,7 10,7 0,0 -2,7 -10,7 C 2,14 0,7 0,7 0,7 2,0 10,0 Z"
+   id="path20" />
+<g
+   transform="translate(-2,-5)"
+   style="display:none"
+   class="st0"
+   id="g42">
+	<g
+   style="display:inline"
+   class="st1"
+   id="g28">
+		<circle
+   cx="12"
+   cy="11.5"
+   r="4.5"
+   id="circle22" />
+		<g
+   id="g26">
+			<path
+   d="m 12,7 c 5.2,0 7.3,3.6 7.9,5 -0.6,1.4 -2.7,5 -7.9,5 C 6.8,17 4.7,13.4 4.1,12 4.7,10.6 6.8,7 12,7 M 12,5 C 4,5 2,12 2,12 c 0,0 2,7 10,7 8,0 10,-7 10,-7 0,0 -2,-7 -10,-7 z"
+   id="path24" />
+		</g>
+	</g>
+	<circle
+   style="display:inline;fill:#ffffff"
+   class="st3"
+   cx="9"
+   cy="10"
+   r="1"
+   id="circle30" />
+	<g
+   style="display:inline"
+   class="st1"
+   id="g38">
+		<circle
+   cx="12"
+   cy="11.5"
+   r="4.5"
+   id="circle32" />
+		<g
+   id="g36">
+			<path
+   d="m 12,7 c 5.2,0 7.3,3.6 7.9,5 -0.6,1.4 -2.7,5 -7.9,5 C 6.8,17 4.7,13.4 4.1,12 4.7,10.6 6.8,7 12,7 M 12,5 C 4,5 2,12 2,12 c 0,0 2,7 10,7 8,0 10,-7 10,-7 0,0 -2,-7 -10,-7 z"
+   id="path34" />
+		</g>
+	</g>
+	<circle
+   style="display:inline;fill:#ffffff"
+   class="st3"
+   cx="8.5"
+   cy="9.5"
+   r="1.5"
+   id="circle40" />
+</g>
+<path
+   style="display:none"
+   class="st0"
+   d="m 13,7 c 0,1.7 -1.3,3 -3,3 C 8.3,10 7,8.7 7,7 7,7 7,6.9 7,6.9 7.2,7 7.3,7 7.5,7 8.3,7 9,6.3 9,5.5 9,5.1 8.8,4.7 8.5,4.4 9,4.1 9.5,4 10,4 c 1.7,0 3,1.3 3,3 z M 10,2 C 4.8,2 2.7,5.6 2.1,7 2.7,8.4 4.8,12 10,12 15.2,12 17.3,8.4 17.9,7 17.3,5.6 15.2,2 10,2 m 0,-2 c 8,0 10,7 10,7 0,0 -2,7 -10,7 C 2,14 0,7 0,7 0,7 2,0 10,0 Z"
+   id="path44" />
+<g
+   transform="translate(-2,-5)"
+   style="display:none"
+   class="st0"
+   id="g54">
+	<circle
+   style="display:inline"
+   class="st1"
+   cx="12"
+   cy="12"
+   r="3"
+   id="circle46" />
+	<g
+   style="display:inline"
+   class="st1"
+   id="g50">
+		<path
+   d="m 12,7 c 5.2,0 7.3,3.6 7.9,5 -0.6,1.4 -2.7,5 -7.9,5 C 6.8,17 4.7,13.4 4.1,12 4.7,10.6 6.8,7 12,7 M 12,5 C 4,5 2,12 2,12 c 0,0 2,7 10,7 8,0 10,-7 10,-7 0,0 -2,-7 -10,-7 z"
+   id="path48" />
+	</g>
+	<circle
+   style="fill:#ffffff"
+   class="st4"
+   cx="9.5"
+   cy="10.5"
+   r="1.5"
+   id="circle52" />
+</g>
+<path
+   id="path4779"
+   d="m 13,7 c 0.06529,1.6168429 -1.383157,3.065288 -3,3 C 8.3831571,10.065288 6.9347117,8.6168429 7,7 6.9347117,5.3831571 8.3831571,3.9347117 10,4 c 1.637418,-0.048194 3.04793,1.3597481 3,3 z" />
+</svg>
+</template>
+
+<script>
+export default {
+    name: 'EyeIcon'
+}
+</script>
+
+<style type="text/scss">
+
+	svg.eye-icon {
+        fill: white;
+    }
+    
+</style>

src/admin/tainacan-admin-i18n.php

@@ -272,6 +272,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_unamed_process'                       	 => __( 'Unamed process', 'tainacan' ),
 	'label_import_collection'                      	 => __( 'Import collection', 'tainacan' ),
     'label_semantic_uri'                      	     => __( 'Semantic Uri', 'tainacan' ),
+    'label_see_collection'                     	     => __( 'See collection', 'tainacan' ),
 
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),

src/js/store/modules/collection/actions.js

@@ -147,6 +147,22 @@ export const fetchCollectionName = ({ commit }, id) => {
     });
 };
 
+export const fetchCollectionNameAndURL = ({ commit }, id) => {
+    //commit('cleanCollectionName');
+    return new Promise((resolve, reject) =>{ 
+        axios.tainacan.get('/collections/' + id + '?fetch_only[0]=name&fetch_only[1]=url')
+        .then(res => {
+            let collection = res.data;
+            commit('setCollectionName', collection.name);
+            commit('setCollectionURL', collection.url);
+            resolve( collection );
+        })
+        .catch(error => {
+            reject(error);
+        })
+    });
+};
+
 export const deleteCollection = ({ commit }, { collectionId, isPermanently }) => {
     return new Promise((resolve, reject) => { 
         let endpoint = '/collections/' + collectionId;
@@ -207,6 +223,8 @@ export const updateCollection = ({ commit }, {
                 enabled_view_modes: enabled_view_modes,
                 default_view_mode: default_view_mode
             });
+            commit('setCollectionName', res.data.name);
+            commit('setCollectionURL', res.data.url);
             resolve( res.data );
         }).catch( error => { 
             reject({ error_message: error['response']['data'].error_message, errors: error['response']['data'].errors });

src/js/store/modules/collection/getters.js

@@ -18,6 +18,10 @@ export const getCollectionName = state => {
     return state.collectionName;
 }
 
+export const getCollectionURL = state => {
+    return state.collectionURL;
+}
+
 export const getAttachments =  state => {
     return state.attachments;
 }

src/js/store/modules/collection/index.js

@@ -9,6 +9,7 @@ const state = {
     collections: [],
     collection: null,
     collectionName: '',
+    collectionURL: '',
     attachments: []
 };
 

src/js/store/modules/collection/mutations.js

@@ -45,6 +45,10 @@ export const setCollectionName = (state, collectionName) => {
     state.collectionName = collectionName;
 }
 
+export const setCollectionURL = (state, collectionURL) => {
+    state.collectionURL = collectionURL;
+}
+
 export const cleanCollectionName = (state) => {
     state.collectionName = '';
 }