mirror of https://github.com/Requarks/wiki.git
Nick
5 years ago
22 changed files with 326 additions and 4 deletions
Split 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 |
|||
Write
Preview
Loading…
Cancel
Save