feat: content link states

client/components/common/nav-header.vue

@@ -71,6 +71,7 @@
                 single-line,
                 solo
                 flat
+                rounded
                 hide-details,
                 prepend-inner-icon='mdi-magnify',
                 :loading='searchIsLoading',

client/components/tags.vue

@@ -21,6 +21,7 @@
           .overline.mr-3.animated.fadeInLeft Current Selection
           v-chip.mr-3.primary--text(
             v-for='tag of tagsSelected'
+            :key='`tagSelected-` + tag.tag'
             color='white'
             close
             @click:close='toggleTag(tag.tag)'
@@ -38,7 +39,7 @@
         template(v-else)
           v-icon.mr-3.animated.fadeInRight mdi-arrow-left
           .overline.animated.fadeInRight Select one or more tags
-      v-toolbar(color='grey lighten-4', flat, height='58')
+      v-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-l5` : `grey lighten-4`', flat, height='58')
         v-text-field.tags-search(
           label='Search within results...'
           solo
@@ -50,12 +51,29 @@
           prepend-icon='mdi-file-document-box-search-outline'
           append-icon='mdi-arrow-right'
         )
+        template(v-if='locales.length > 1')
+          v-divider.mx-3(vertical)
+          .overline Locale
+          v-select.ml-2(
+            :items='locales'
+            v-model='locale'
+            :background-color='$vuetify.theme.dark ? `grey darken-3` : `white`'
+            hide-details
+            label='Locale'
+            item-text='name'
+            item-value='code'
+            rounded
+            single-line
+            dense
+            height='40'
+            style='max-width: 170px;'
+          )
         v-divider.mx-3(vertical)
         .overline Order By
         v-select.ml-2(
           :items='orderByItems'
           v-model='orderBy'
-          background-color='white'
+          :background-color='$vuetify.theme.dark ? `grey darken-3` : `white`'
           hide-details
           label='Order By'
           rounded
@@ -64,12 +82,13 @@
           height='40'
           style='max-width: 250px;'
         )
-        v-divider.mx-3(vertical)
-        v-btn-toggle(v-model='displayStyle', rounded, mandatory)
-          v-btn(text, height='40'): v-icon(small) mdi-view-list
-          v-btn(text, height='40'): v-icon(small) mdi-cards-variant
-          v-btn(text, height='40'): v-icon(small) mdi-format-align-justify
+        v-btn-toggle.ml-2(v-model='orderByDirection', rounded, mandatory)
+          v-btn(text, height='40'): v-icon(size='20') mdi-chevron-double-up
+          v-btn(text, height='40'): v-icon(size='20') mdi-chevron-double-down
       v-divider
+      .text-center.pt-10
+        img(src='/svg/icon-price-tag.svg')
+        .subtitle-2.grey--text Select one or more tags on the left.
     nav-footer
     notify
     search-results
@@ -77,16 +96,25 @@
 
 <script>
 import { get } from 'vuex-pathify'
+import VueRouter from 'vue-router'
 import _ from 'lodash'
 
 import tagsQuery from 'gql/common/common-pages-query-tags.gql'
 
+/* global siteLangs */
+
+const router = new VueRouter({
+  mode: 'history',
+  base: '/t'
+})
+
 export default {
   data() {
     return {
       tags: [],
       selection: [],
-      displayStyle: 0,
+      locale: 'any',
+      locales: [],
       orderBy: 'TITLE',
       orderByItems: [
         { text: 'Creation Date', value: 'CREATED' },
@@ -95,6 +123,7 @@ export default {
         { text: 'Path', value: 'PATH' },
         { text: 'Title', value: 'TITLE' }
       ],
+      orderByDirection: 0,
       scrollStyle: {
         vuescroll: {},
         scrollPanel: {
@@ -127,8 +156,27 @@ export default {
       return _.filter(this.tags, t => _.includes(this.selection, t.tag))
     }
   },
+  watch: {
+    locale (newValue, oldValue) {
+      this.rebuildURL()
+    },
+    orderBy (newValue, oldValue) {
+      this.rebuildURL()
+    },
+    orderByDirection (newValue, oldValue) {
+      this.rebuildURL()
+    }
+  },
+  router,
   created () {
     this.$store.commit('page/SET_MODE', 'tags')
+
+    this.locales = _.concat(
+      [{name: 'Any', code: 'any'}],
+      (siteLangs.length > 0 ? siteLangs : [])
+    )
+
+    this.selection = _.compact(this.$route.path.split('/'))
   },
   methods: {
     toggleTag (tag) {
@@ -137,9 +185,25 @@ export default {
       } else {
         this.selection.push(tag)
       }
+      this.rebuildURL()
     },
     isSelected (tag) {
       return _.includes(this.selection, tag)
+    },
+    rebuildURL () {
+      let urlObj = {
+        path: '/' + this.selection.join('/')
+      }
+      if (this.locale !== `any`) {
+        _.set(urlObj, 'query.lang', this.locale)
+      }
+      if (this.orderBy !== `TITLE`) {
+        _.set(urlObj, 'query.sort', this.orderBy.toLowerCase())
+      }
+      if (this.orderByDirection !== 0) {
+        _.set(urlObj, 'query.dir', this.orderByDirection === 0 ? `asc` : `desc`)
+      }
+      this.$router.push(urlObj)
     }
   },
   apollo: {