liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: browse tags localization

Browse Source
This commit is contained in:
Nick
2019-09-12 20:50:31 -04:00
parent 2fcbe4a3c1
commit d89bf1ab71
5 changed files with 114 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
client/components/common/nav-header.vue
View File

@@ -7,7 +7,7 @@
clearable clearable
background-color='deep-purple' background-color='deep-purple'
color='white' color='white'
label='Search...' :label='$t(`common:header.search`)'
single-line single-line
solo solo
flat flat
@@ -22,41 +22,19 @@
v-menu(open-on-hover, offset-y, bottom, left, min-width='250', transition='slide-y-transition') v-menu(open-on-hover, offset-y, bottom, left, min-width='250', transition='slide-y-transition')
template(v-slot:activator='{ on }') template(v-slot:activator='{ on }')
v-app-bar-nav-icon.btn-animate-app(v-on='on', :class='$vuetify.rtl ? `mx-0` : ``') v-app-bar-nav-icon.btn-animate-app(v-on='on', :class='$vuetify.rtl ? `mx-0` : ``')
v-icon mdi-menu-open v-icon mdi-menu
v-list(nav, :light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark', :class='$vuetify.theme.dark ? `grey darken-4` : ``') v-list(nav, :light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark', :class='$vuetify.theme.dark ? `grey darken-4` : ``')
v-list-item.pl-4(href='/') v-list-item.pl-4(href='/')
v-list-item-avatar(size='24'): v-icon(color='blue') mdi-home v-list-item-avatar(size='24'): v-icon(color='blue') mdi-home
v-list-item-title.body-2 {{$t('common:header.home')}} v-list-item-title.body-2 {{$t('common:header.home')}}
v-list-item.pl-4(@click='pageNew', v-if='isAuthenticated') v-list-item.pl-4(@click='')
v-list-item-avatar(size='24'): v-icon(color='green') mdi-file-document-box-plus-outline v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-file-tree
v-list-item-title.body-2 {{$t('common:header.newPage')}} v-list-item-content
template(v-if='path && path.length') v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.siteMap')}}
v-divider.my-0 v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
.overline.pa-4.grey--text {{$t('common:header.currentPage')}} v-list-item.pl-4(href='/t')
v-list-item.pl-4(@click='pageView', v-if='mode !== `view`') v-list-item-avatar(size='24'): v-icon(color='teal') mdi-tag-multiple
v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-file-document-box-outline v-list-item-title.body-2 {{$t('common:header.browseTags')}}
v-list-item-title.body-2 {{$t('common:header.view')}}
v-list-item.pl-4(@click='pageEdit', v-if='mode !== `edit` && isAuthenticated')
v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-file-document-edit-outline
v-list-item-title.body-2 {{$t('common:header.edit')}}
v-list-item.pl-4(@click='pageHistory', v-if='mode !== `history`')
v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-history
v-list-item-content
v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.history')}}
v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
v-list-item.pl-4(@click='pageSource', v-if='mode !== `source`')
v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-code-tags
v-list-item-title.body-2 {{$t('common:header.viewSource')}}
v-list-item.pl-4(@click='pageMove', v-if='isAuthenticated')
v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-content-save-move-outline
v-list-item-content
v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.move')}}
v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
v-list-item.pl-4(@click='pageDelete', v-if='isAuthenticated')
v-list-item-avatar(size='24'): v-icon(color='red darken-2') mdi-trash-can-outline
v-list-item-title.body-2 {{$t('common:header.delete')}}
v-divider.my-0
.overline.pa-4.grey--text {{$t('common:header.assets')}}
v-list-item.pl-4(@click='assets') v-list-item.pl-4(@click='assets')
v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-folder-multiple-image v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-folder-multiple-image
v-list-item-content v-list-item-content
@@ -88,89 +66,98 @@
@keyup.down='searchMove(`down`)' @keyup.down='searchMove(`down`)'
@keyup.up='searchMove(`up`)' @keyup.up='searchMove(`up`)'
) )
//- v-menu( v-tooltip(bottom)
//- v-model='searchAdvMenuShown'
//- left
//- offset-y
//- min-width='450'
//- :close-on-content-click='false'
//- nudge-bottom='7'
//- nudge-right='5'
//- v-if='searchIsShown'
//- )
//- template(v-slot:activator='{ on }')
//- v-btn.nav-header-search-adv(icon, color='grey darken-2', v-on='on')
//- v-icon(color='white') mdi-chevron-down
//- v-card.radius-0(dark)
//- v-toolbar(flat, color='grey darken-4', dense)
//- v-icon.mr-2 mdi-feature-search-outline
//- v-subheader.pl-0 Advanced Search
//- v-spacer
//- v-chip(label, small, color='primary') Coming soon
//- v-card-text.pa-4
//- v-checkbox.mt-0(
//- label='Restrict to current language'
//- color='white'
//- v-model='searchRestrictLocale'
//- hide-details
//- )
//- v-checkbox(
//- label='Search below current path only'
//- color='white'
//- v-model='searchRestrictPath'
//- hide-details
//- )
//- v-divider
//- v-card-actions.grey.darken-3-d4
//- v-container.pa-0(grid-list-md)
//- v-layout(row)
//- v-flex(xs6)
//- v-btn(depressed, color='grey darken-3', block)
//- v-icon(left) mdi-chevron-right
//- span Save as defaults
//- v-flex(xs6)
//- v-btn(depressed, color='grey darken-3', block)
//- v-icon(left) mdi-cached
//- span Reset
v-tooltip(bottom, v-if='isAuthenticated && isAdmin')
template(v-slot:activator='{ on }') template(v-slot:activator='{ on }')
v-btn.ml-2.mr-0(icon, v-on='on', href='/t') v-btn.ml-2.mr-0(icon, v-on='on', href='/t')
v-icon(color='grey') mdi-tag-multiple v-icon(color='grey') mdi-tag-multiple
span Browse Tags span {{$t('common:header.browseTags')}}
v-flex(xs6, md4) v-flex(xs6, md4)
v-toolbar.nav-header-inner.pr-4(color='black', dark, flat) v-toolbar.nav-header-inner.pr-4(color='black', dark, flat)
v-spacer v-spacer
.navHeaderLoading.mr-3 .navHeaderLoading.mr-3
v-progress-circular(indeterminate, color='blue', :size='22', :width='2' v-show='isLoading') v-progress-circular(indeterminate, color='blue', :size='22', :width='2' v-show='isLoading')
slot(name='actions') slot(name='actions')
//- (mobile) SEARCH TOGGLE
v-btn( v-btn(
v-if='!hideSearch && $vuetify.breakpoint.smAndDown' v-if='!hideSearch && $vuetify.breakpoint.smAndDown'
@click='searchToggle' @click='searchToggle'
icon icon
) )
v-icon(color='grey') mdi-magnify v-icon(color='grey') mdi-magnify
v-menu(offset-y, left, transition='slide-y-transition', v-if='mode === `view` && locales.length > 0')
//- LANGUAGES
template(v-if='mode === `view` && locales.length > 0')
v-menu(offset-y, bottom, nudge-bottom='30', transition='slide-y-transition')
template(v-slot:activator='{ on: menu }')
v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }')
v-btn(icon, v-on='{ ...menu, ...tooltip }', :class='$vuetify.rtl ? `ml-3` : ``', tile, height='64')
v-icon(color='grey') mdi-web
span {{$t('common:header.language')}}
v-list(nav)
template(v-for='(lc, idx) of locales')
v-list-item(@click='changeLocale(lc)')
v-list-item-action: v-chip(:color='lc.code === locale ? `blue` : `grey`', small, label, dark) {{lc.code.toUpperCase()}}
v-list-item-title {{lc.name}}
v-divider(vertical)
//- PAGE ACTIONS
template(v-if='isAuthenticated && path')
v-menu(offset-y, bottom, nudge-bottom='30', transition='slide-y-transition')
template(v-slot:activator='{ on: menu }')
v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }')
v-btn(icon, v-on='{ ...menu, ...tooltip }', :class='$vuetify.rtl ? `ml-3` : ``', tile, height='64')
v-icon(color='grey') mdi-file-document-edit-outline
span {{$t('common:header.pageActions')}}
v-list(nav, :light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark', :class='$vuetify.theme.dark ? `grey darken-4` : ``')
.overline.pa-4.grey--text {{$t('common:header.currentPage')}}
v-list-item.pl-4(@click='pageView', v-if='mode !== `view`')
v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-file-document-box-outline
v-list-item-title.body-2 {{$t('common:header.view')}}
v-list-item.pl-4(@click='pageEdit', v-if='mode !== `edit` && isAuthenticated')
v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-file-document-edit-outline
v-list-item-title.body-2 {{$t('common:header.edit')}}
v-list-item.pl-4(@click='pageHistory', v-if='mode !== `history`')
v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-history
v-list-item-content
v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.history')}}
v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
v-list-item.pl-4(@click='pageSource', v-if='mode !== `source`')
v-list-item-avatar(size='24'): v-icon(color='indigo') mdi-code-tags
v-list-item-title.body-2 {{$t('common:header.viewSource')}}
v-list-item.pl-4(@click='pageMove', v-if='isAuthenticated')
v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-content-save-move-outline
v-list-item-content
v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.move')}}
v-list-item-subtitle.overline.grey--text.text--lighten-2 Coming soon
v-list-item.pl-4(@click='pageDelete', v-if='isAuthenticated')
v-list-item-avatar(size='24'): v-icon(color='red darken-2') mdi-trash-can-outline
v-list-item-title.body-2 {{$t('common:header.delete')}}
v-divider(vertical)
//- NEW PAGE
template(v-if='isAuthenticated')
v-tooltip(bottom)
template(v-slot:activator='{ on }')
v-btn(icon, tile, height='64', v-on='on', @click='pageNew')
v-icon(color='grey') mdi-file-document-box-plus-outline
span {{$t('common:header.newPage')}}
v-divider(vertical)
//- ACCOUNT
v-menu(v-if='isAuthenticated', offset-y, bottom, nudge-bottom='30', min-width='300', transition='slide-y-transition')
template(v-slot:activator='{ on: menu }') template(v-slot:activator='{ on: menu }')
v-tooltip(bottom) v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }') template(v-slot:activator='{ on: tooltip }')
v-btn(icon, v-on='{ ...menu, ...tooltip }', :class='$vuetify.rtl ? `ml-3` : ``') v-btn(icon, v-on='{ ...menu, ...tooltip }', :class='$vuetify.rtl ? `ml-0` : ``', tile, height='64')
v-icon(color='grey') mdi-web
span {{$t('common:header.language')}}
v-list(nav)
template(v-for='(lc, idx) of locales')
v-list-item(@click='changeLocale(lc)')
v-list-item-action: v-chip(:color='lc.code === locale ? `blue` : `grey`', small, label, dark) {{lc.code.toUpperCase()}}
v-list-item-title {{lc.name}}
v-tooltip(bottom, v-if='isAuthenticated && isAdmin')
template(v-slot:activator='{ on }')
v-btn.btn-animate-rotate(icon, href='/a', v-on='on', :class='$vuetify.rtl ? `ml-3` : ``')
v-icon(color='grey') mdi-settings
span {{$t('common:header.admin')}}
v-menu(v-if='isAuthenticated', offset-y, min-width='300', left, transition='slide-y-transition')
template(v-slot:activator='{ on: menu }')
v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }')
v-btn(icon, v-on='{ ...menu, ...tooltip }', :class='$vuetify.rtl ? `ml-0` : ``')
v-icon(v-if='picture.kind === `initials`', color='grey') mdi-account-circle v-icon(v-if='picture.kind === `initials`', color='grey') mdi-account-circle
v-avatar(v-else-if='picture.kind === `image`', :size='34') v-avatar(v-else-if='picture.kind === `image`', :size='34')
v-img(:src='picture.url') v-img(:src='picture.url')
@@ -195,6 +182,9 @@
v-list-item-content v-list-item-content
v-list-item-title {{$t('common:header.profile')}} v-list-item-title {{$t('common:header.profile')}}
v-list-item-subtitle.overline Coming soon v-list-item-subtitle.overline Coming soon
v-list-item(href='/a', v-if='isAuthenticated && isAdmin')
v-list-item-action.btn-animate-rotate: v-icon(color='blue-grey') mdi-settings
v-list-item-title.blue-grey--text {{$t('common:header.admin')}}
v-list-item(@click='logout') v-list-item(@click='logout')
v-list-item-action: v-icon(color='red') mdi-logout v-list-item-action: v-icon(color='red') mdi-logout
v-list-item-title.red--text {{$t('common:header.logout')}} v-list-item-title.red--text {{$t('common:header.logout')}}

1
client/components/editor.vue
View File

@@ -31,6 +31,7 @@
) )
v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') mdi-close v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') mdi-close
span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.close') }} span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.close') }}
v-divider(vertical)
v-content v-content
component(:is='currentEditor', :save='save') component(:is='currentEditor', :save='save')
editor-modal-properties(v-model='dialogProps') editor-modal-properties(v-model='dialogProps')

47
client/components/tags.vue
View File

@@ -18,7 +18,7 @@
v-content.grey(:class='$vuetify.theme.dark ? `darken-4-d5` : `lighten-3`') v-content.grey(:class='$vuetify.theme.dark ? `darken-4-d5` : `lighten-3`')
v-toolbar(color='primary', dark, flat, height='58') v-toolbar(color='primary', dark, flat, height='58')
template(v-if='selection.length > 0') template(v-if='selection.length > 0')
.overline.mr-3.animated.fadeInLeft Current Selection .overline.mr-3.animated.fadeInLeft {{$t('tags:currentSelection')}}
v-chip.mr-3.primary--text( v-chip.mr-3.primary--text(
v-for='tag of tagsSelected' v-for='tag of tagsSelected'
:key='`tagSelected-` + tag.tag' :key='`tagSelected-` + tag.tag'
@@ -35,14 +35,14 @@
@click='selection = []' @click='selection = []'
) )
v-icon(left) mdi-close v-icon(left) mdi-close
span Clear Selection span {{$t('tags:clearSelection')}}
template(v-else) template(v-else)
v-icon.mr-3.animated.fadeInRight mdi-arrow-left v-icon.mr-3.animated.fadeInRight mdi-arrow-left
.overline.animated.fadeInRight Select one or more tags .overline.animated.fadeInRight {{$t('tags:selectOneMoreTags')}}
v-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-l5` : `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( v-text-field.tags-search(
v-model='innerSearch' v-model='innerSearch'
label='Search within results...' :label='$t(`tags:searchWithinResultsPlaceholder`)'
solo solo
hide-details hide-details
flat flat
@@ -55,13 +55,13 @@
) )
template(v-if='locales.length > 1') template(v-if='locales.length > 1')
v-divider.mx-3(vertical) v-divider.mx-3(vertical)
.overline Locale .overline {{$t('tags:locale')}}
v-select.ml-2( v-select.ml-2(
:items='locales' :items='locales'
v-model='locale' v-model='locale'
:background-color='$vuetify.theme.dark ? `grey darken-3` : `white`' :background-color='$vuetify.theme.dark ? `grey darken-3` : `white`'
hide-details hide-details
label='Locale' :label='$t(`tags:locale`)'
item-text='name' item-text='name'
item-value='code' item-value='code'
rounded rounded
@@ -71,13 +71,13 @@
style='max-width: 170px;' style='max-width: 170px;'
) )
v-divider.mx-3(vertical) v-divider.mx-3(vertical)
.overline Order By .overline {{$t('tags:orderBy')}}
v-select.ml-2( v-select.ml-2(
:items='orderByItems' :items='orderByItems'
v-model='orderBy' v-model='orderBy'
:background-color='$vuetify.theme.dark ? `grey darken-3` : `white`' :background-color='$vuetify.theme.dark ? `grey darken-3` : `white`'
hide-details hide-details
label='Order By' :label='$t(`tags:orderBy`)'
rounded rounded
single-line single-line
dense dense
@@ -90,7 +90,7 @@
v-divider v-divider
.text-center.pt-10(v-if='selection.length < 1') .text-center.pt-10(v-if='selection.length < 1')
img(src='/svg/icon-price-tag.svg') img(src='/svg/icon-price-tag.svg')
.subtitle-2.grey--text Select one or more tags on the left. .subtitle-2.grey--text {{$t('tags:selectOneMoreTagsHint')}}
.px-5.py-2(v-else) .px-5.py-2(v-else)
v-data-iterator( v-data-iterator(
:items='pages' :items='pages'
@@ -109,15 +109,15 @@
size='96' size='96'
width='2' width='2'
) )
.subtitle-2.grey--text.mt-5 Retrieving page results... .subtitle-2.grey--text.mt-5 {{$t('tags:retrievingResultsLoading')}}
template(v-slot:no-data) template(v-slot:no-data)
.text-center.pt-10 .text-center.pt-10
img(src='/svg/icon-info.svg') img(src='/svg/icon-info.svg')
.subtitle-2.grey--text Couldn't find any page with the selected tags. .subtitle-2.grey--text {{$t('tags:noResults')}}
template(v-slot:no-results) template(v-slot:no-results)
.text-center.pt-10 .text-center.pt-10
img(src='/svg/icon-info.svg') img(src='/svg/icon-info.svg')
.subtitle-2.grey--text Couldn't find any page matching the current filtering options. .subtitle-2.grey--text {{$t('tags:noResultsWithFilter')}}
template(v-slot:default='props') template(v-slot:default='props')
v-row(align='stretch') v-row(align='stretch')
v-col( v-col(
@@ -135,7 +135,8 @@
.d-flex.flex-row.align-center .d-flex.flex-row.align-center
.body-1: strong.primary--text {{item.title}} .body-1: strong.primary--text {{item.title}}
v-spacer v-spacer
.caption Last updated {{item.updatedAt | moment('from')}} i18next.caption(tag='div', path='tags:pageLastUpdated')
span(place='date') {{item.updatedAt | moment('from')}}
.body-2.grey--text {{item.description || '---'}} .body-2.grey--text {{item.description || '---'}}
v-divider.my-2 v-divider.my-2
.d-flex.flex-row.align-center .d-flex.flex-row.align-center
@@ -165,6 +166,7 @@ const router = new VueRouter({
}) })
export default { export default {
i18nOptions: { namespaces: 'tags' },
data() { data() {
return { return {
tags: [], tags: [],
@@ -173,13 +175,6 @@ export default {
locale: 'any', locale: 'any',
locales: [], locales: [],
orderBy: 'title', orderBy: 'title',
orderByItems: [
{ text: 'Creation Date', value: 'createdAt' },
{ text: 'ID', value: 'id' },
{ text: 'Last Modified', value: 'updatedAt' },
{ text: 'Path', value: 'path' },
{ text: 'Title', value: 'title' }
],
orderByDirection: 0, orderByDirection: 0,
pagination: { pagination: {
page: 1, page: 1,
@@ -223,6 +218,15 @@ export default {
}, },
pageTotal () { pageTotal () {
return Math.ceil(this.pages.length / this.pagination.itemsPerPage) return Math.ceil(this.pages.length / this.pagination.itemsPerPage)
},
orderByItems () {
return [
{ text: this.$t('tags:orderByField.creationDate'), value: 'createdAt' },
{ text: this.$t('tags:orderByField.ID'), value: 'id' },
{ text: this.$t('tags:orderByField.lastModified'), value: 'updatedAt' },
{ text: this.$t('tags:orderByField.path'), value: 'path' },
{ text: this.$t('tags:orderByField.title'), value: 'title' }
]
} }
}, },
watch: { watch: {
@@ -243,7 +247,7 @@ export default {
this.$store.commit('page/SET_MODE', 'tags') this.$store.commit('page/SET_MODE', 'tags')
this.locales = _.concat( this.locales = _.concat(
[{name: 'Any', code: 'any'}], [{name: this.$t('tags:localeAny'), code: 'any'}],
(siteLangs.length > 0 ? siteLangs : []) (siteLangs.length > 0 ? siteLangs : [])
) )
@@ -257,7 +261,6 @@ export default {
this.selection.push(tag) this.selection.push(tag)
} }
this.rebuildURL() this.rebuildURL()
console.info(this.$refs.dude)
}, },
isSelected (tag) { isSelected (tag) {
return _.includes(this.selection, tag) return _.includes(this.selection, tag)

2
package.json
View File

@@ -182,7 +182,7 @@
"@babel/preset-env": "^7.6.0", "@babel/preset-env": "^7.6.0",
"@mdi/font": "4.3.95", "@mdi/font": "4.3.95",
"@panter/vue-i18next": "0.15.1", "@panter/vue-i18next": "0.15.1",
"@requarks/ckeditor5": "12.4.0-wiki.11", "@requarks/ckeditor5": "12.4.0-wiki.14",
"@vue/babel-preset-app": "3.11.0", "@vue/babel-preset-app": "3.11.0",
"animate-sass": "0.8.2", "animate-sass": "0.8.2",
"animated-number-vue": "1.0.0", "animated-number-vue": "1.0.0",

BIN
yarn.lock
View File

Binary file not shown.