mirror of https://github.com/requarks/wiki
Nick
6 years ago
parent
8e80b7471d
commit
5a7fd2d73e
@ -0,0 +1,167 @@
|
|||||||
|
<template lang='pug'>
|
||||||
|
v-app(:dark='darkMode').tags
|
||||||
|
nav-header
|
||||||
|
v-navigation-drawer.pb-0.elevation-1(app, fixed, clipped, :right='$vuetify.rtl', permanent, width='300')
|
||||||
|
vue-scroll(:ops='scrollStyle')
|
||||||
|
v-list(dense, nav)
|
||||||
|
v-list-item(href='/')
|
||||||
|
v-list-item-icon: v-icon mdi-home
|
||||||
|
v-list-item-title {{$t('common:header.home')}}
|
||||||
|
template(v-for='(tags, groupName) in tagsGrouped')
|
||||||
|
v-divider.my-2
|
||||||
|
v-subheader.pl-4(:key='`tagGroup-` + groupName') {{groupName}}
|
||||||
|
v-list-item(v-for='tag of tags', @click='toggleTag(tag.tag)', :key='`tag-` + tag.tag')
|
||||||
|
v-list-item-icon
|
||||||
|
v-icon(v-if='isSelected(tag.tag)', color='primary') mdi-checkbox-intermediate
|
||||||
|
v-icon(v-else) mdi-checkbox-blank-outline
|
||||||
|
v-list-item-title {{tag.title}}
|
||||||
|
v-content
|
||||||
|
v-toolbar(color='primary', dark, flat, height='58')
|
||||||
|
template(v-if='selection.length > 0')
|
||||||
|
.overline.mr-3.animated.fadeInLeft Current Selection
|
||||||
|
v-chip.mr-3.primary--text(
|
||||||
|
v-for='tag of tagsSelected'
|
||||||
|
color='white'
|
||||||
|
close
|
||||||
|
@click:close='toggleTag(tag.tag)'
|
||||||
|
) {{tag.title}}
|
||||||
|
v-spacer
|
||||||
|
v-btn.animated.fadeIn(
|
||||||
|
small
|
||||||
|
outlined
|
||||||
|
color='blue lighten-4'
|
||||||
|
rounded
|
||||||
|
@click='selection = []'
|
||||||
|
)
|
||||||
|
v-icon(left) mdi-close
|
||||||
|
span Clear Selection
|
||||||
|
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-text-field.tags-search(
|
||||||
|
label='Search within results...'
|
||||||
|
solo
|
||||||
|
hide-details
|
||||||
|
flat
|
||||||
|
rounded
|
||||||
|
single-line
|
||||||
|
height='40'
|
||||||
|
prepend-icon='mdi-file-document-box-search-outline'
|
||||||
|
append-icon='mdi-arrow-right'
|
||||||
|
)
|
||||||
|
v-divider.mx-3(vertical)
|
||||||
|
.overline Order By
|
||||||
|
v-select.ml-2(
|
||||||
|
:items='orderByItems'
|
||||||
|
v-model='orderBy'
|
||||||
|
background-color='white'
|
||||||
|
hide-details
|
||||||
|
label='Order By'
|
||||||
|
rounded
|
||||||
|
single-line
|
||||||
|
dense
|
||||||
|
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-divider
|
||||||
|
nav-footer
|
||||||
|
notify
|
||||||
|
search-results
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { get } from 'vuex-pathify'
|
||||||
|
import _ from 'lodash'
|
||||||
|
|
||||||
|
import tagsQuery from 'gql/common/common-pages-query-tags.gql'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tags: [],
|
||||||
|
selection: [],
|
||||||
|
displayStyle: 0,
|
||||||
|
orderBy: 'TITLE',
|
||||||
|
orderByItems: [
|
||||||
|
{ text: 'Creation Date', value: 'CREATED' },
|
||||||
|
{ text: 'ID', value: 'ID' },
|
||||||
|
{ text: 'Last Modified', value: 'UPDATED' },
|
||||||
|
{ text: 'Path', value: 'PATH' },
|
||||||
|
{ text: 'Title', value: 'TITLE' }
|
||||||
|
],
|
||||||
|
scrollStyle: {
|
||||||
|
vuescroll: {},
|
||||||
|
scrollPanel: {
|
||||||
|
initialScrollY: 0,
|
||||||
|
initialScrollX: 0,
|
||||||
|
scrollingX: false,
|
||||||
|
easing: 'easeOutQuad',
|
||||||
|
speed: 1000,
|
||||||
|
verticalNativeBarPos: this.$vuetify.rtl ? `left` : `right`
|
||||||
|
},
|
||||||
|
rail: {
|
||||||
|
gutterOfEnds: '2px'
|
||||||
|
},
|
||||||
|
bar: {
|
||||||
|
onlyShowBarOnScroll: false,
|
||||||
|
background: '#CCC',
|
||||||
|
hoverStyle: {
|
||||||
|
background: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
darkMode: get('site/dark'),
|
||||||
|
tagsGrouped () {
|
||||||
|
return _.groupBy(this.tags, t => t.title.charAt(0).toUpperCase())
|
||||||
|
},
|
||||||
|
tagsSelected () {
|
||||||
|
return _.filter(this.tags, t => _.includes(this.selection, t.tag))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.$store.commit('page/SET_MODE', 'tags')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleTag (tag) {
|
||||||
|
if (_.includes(this.selection, tag)) {
|
||||||
|
this.selection = _.without(this.selection, tag)
|
||||||
|
} else {
|
||||||
|
this.selection.push(tag)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isSelected (tag) {
|
||||||
|
return _.includes(this.selection, tag)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
apollo: {
|
||||||
|
tags: {
|
||||||
|
query: tagsQuery,
|
||||||
|
fetchPolicy: 'cache-and-network',
|
||||||
|
update: (data) => _.cloneDeep(data.pages.tags),
|
||||||
|
watchLoading (isLoading) {
|
||||||
|
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'tags-refresh')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss'>
|
||||||
|
.tags-search {
|
||||||
|
.v-input__control {
|
||||||
|
min-height: initial !important;
|
||||||
|
}
|
||||||
|
.v-input__prepend-outer {
|
||||||
|
margin-top: 8px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
query {
|
||||||
|
pages {
|
||||||
|
tags {
|
||||||
|
tag
|
||||||
|
title
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
extends master.pug
|
||||||
|
|
||||||
|
block body
|
||||||
|
#root
|
||||||
|
tags
|
||||||
Loading…
Reference in new issue