mirror of https://github.com/Requarks/wiki.git
Nick
5 years ago
22 changed files with 326 additions and 4 deletions
Unified View
Diff Options
-
3client/client-app.js
-
10client/components/admin/admin-analytics.vue
-
15client/components/admin/admin-auth.vue
-
4client/components/admin/admin-dashboard.vue
-
2client/components/admin/admin-dev-flags.vue
-
8client/components/admin/admin-general.vue
-
2client/components/admin/admin-locale.vue
-
2client/components/admin/admin-mail.vue
-
2client/components/admin/admin-rendering.vue
-
1client/components/admin/admin-search.vue
-
10client/components/admin/admin-storage.vue
-
1client/components/admin/admin-theme.vue
-
5client/components/common/nav-header.vue
-
5client/components/editor/editor-modal-properties.vue
-
167client/components/tags.vue
-
8client/graph/common/common-pages-query-tags.gql
-
8server/controllers/common.js
-
3server/graph/resolvers/page.js
-
11server/graph/schemas/page.graphql
-
8server/models/pages.js
-
50server/models/tags.js
-
5server/views/tags.pug
@ -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 |
||||
xxxxxxxxxx