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

feat: user edit UI + admin UI improvements + fixes

Browse Source
This commit is contained in:
Nicolas Giard
2018-12-15 17:15:13 -05:00
parent 366a835278
commit 17244a0cb3
70 changed files with 1272 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/components/admin.vue
View File

@@ -23,7 +23,7 @@
v-list-tile-title {{ $t('admin:pages.title') }}
v-list-tile-action
v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
.caption.grey--text 123
.caption.grey--text {{ info.pagesTotal }}
v-list-tile(to='/theme')
v-list-tile-avatar: v-icon palette
v-list-tile-title {{ $t('admin:theme.title') }}
@@ -32,12 +32,15 @@
v-list-tile(to='/groups')
v-list-tile-avatar: v-icon people
v-list-tile-title {{ $t('admin:groups.title') }}
v-list-tile-action
v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
.caption.grey--text {{ info.groupsTotal }}
v-list-tile(to='/users')
v-list-tile-avatar: v-icon perm_identity
v-list-tile-title {{ $t('admin:users.title') }}
v-list-tile-action
v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
.caption.grey--text 1
.caption.grey--text {{ info.usersTotal }}
v-divider.my-2
v-subheader.pl-4 {{ $t('admin:nav.modules') }}
v-list-tile(to='/auth')
@@ -86,7 +89,15 @@
<script>
import VueRouter from 'vue-router'
import { get } from 'vuex-pathify'
import { get, sync } from 'vuex-pathify'
import statsQuery from 'gql/admin/dashboard/dashboard-query-stats.gql'
import adminStore from '@/store/admin'
/* global WIKI */
WIKI.$store.registerModule('admin', adminStore)
const router = new VueRouter({
mode: 'history',
@@ -102,6 +113,7 @@ const router = new VueRouter({
{ path: '/groups', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-groups.vue') },
{ path: '/groups/:id', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-groups-edit.vue') },
{ path: '/users', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-users.vue') },
{ path: '/users/:id', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-users-edit.vue') },
{ path: '/auth', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-auth.vue') },
{ path: '/rendering', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-rendering.vue') },
{ path: '/editor', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-editor.vue') },
@@ -144,11 +156,25 @@ export default {
}
},
computed: {
darkMode: get('site/dark')
darkMode: get('site/dark'),
info: sync('admin/info')
},
router,
created() {
this.$store.commit('page/SET_MODE', 'admin')
},
apollo: {
info: {
query: statsQuery,
fetchPolicy: 'network-only',
manual: true,
result({ data, loading, networkStatus }) {
this.info = data.system.info
},
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-stats-refresh')
}
}
}
}
</script>

2
client/components/admin/admin-api.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') call_split
img(src='/svg/icon-rest-api.svg', alt='API', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2 API
.subheading.grey--text Manage keys to access the API

2
client/components/admin/admin-auth.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') lock_outline
img(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;')
.admin-header-title
.headline.primary--text Authentication
.subheading.grey--text Configure the authentication settings of your wiki

2
client/components/admin/admin-contribute.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') favorite
img(src='/svg/icon-heart-health.svg', alt='Contribute', style='width: 80px;')
.admin-header-title
.headline.primary--text {{ $t('admin:contribute.title') }}
.subheading.grey--text {{ $t('admin:contribute.subtitle') }}

25
client/components/admin/admin-dashboard.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') dashboard
img(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;')
.admin-header-title
.headline.primary--text {{ $t('admin:dashboard.title') }}
.subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
@@ -92,8 +92,7 @@
<script>
import AnimatedNumber from 'animated-number-vue'
import statsQuery from 'gql/admin/dashboard/dashboard-query-stats.gql'
import { get } from 'vuex-pathify'
export default {
components: {
@@ -101,13 +100,6 @@ export default {
},
data() {
return {
info: {
currentVersion: 'n/a',
latestVersion: 'n/a',
groupsTotal: 0,
pagesTotal: 0,
usersTotal: 0
},
recentPages: [],
popularPages: []
}
@@ -115,20 +107,11 @@ export default {
computed: {
isLatestVersion() {
return this.info.currentVersion === this.info.latestVersion
}
},
info: get('admin/info')
},
methods: {
round(val) { return Math.round(val) }
},
apollo: {
info: {
query: statsQuery,
fetchPolicy: 'network-only',
update: (data) => data.system.info,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-system-refresh')
}
}
}
}
</script>

2
client/components/admin/admin-dev.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') weekend
img(src='/svg/icon-console.svg', alt='Developer Tools', style='width: 80px;')
.admin-header-title
.headline.primary--text Developer Tools
.subheading.grey--text ¯\_(ツ)_/¯

2
client/components/admin/admin-editor.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') transform
img(src='/svg/icon-web-design.svg', alt='Editor', style='width: 80px;')
.admin-header-title
.headline.primary--text Editor
.subheading.grey--text Configure the content editor

6
client/components/admin/admin-general.vue
View File

@@ -3,7 +3,7 @@
v-layout(row wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') widgets
img(src='/svg/icon-categorize.svg', alt='General', style='width: 80px;')
.admin-header-title
.headline.primary--text {{ $t('admin:general.title') }}
.subheading.grey--text {{ $t('admin:general.subtitle') }}
@@ -60,7 +60,7 @@
outline
label='Google Analytics ID'
:counter='255'
prepend-icon='public'
prepend-icon='timeline'
persistent-hint
hint='Property tracking ID for Google Analytics.'
)
@@ -72,7 +72,7 @@
label='Company / Organization Name'
v-model='company'
:counter='255'
prepend-icon='public'
prepend-icon='business'
persistent-hint
hint='Name to use when displaying copyright notice in the footer. Leave empty to hide.'
)

8
client/components/admin/admin-groups-edit.vue
View File

@@ -3,11 +3,13 @@
v-layout(row wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') people
img(src='/svg/icon-social-group.svg', alt='Edit Group', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2 Edit Group
.subheading.grey--text {{name}}
v-spacer
.caption.grey--text ID #[strong {{group.id}}]
v-divider.mx-3(vertical)
v-btn(color='indigo', large, outline, to='/groups')
v-icon arrow_back
v-dialog(v-model='deleteGroupDialog', max-width='500', v-if='!group.isSystem')
@@ -24,7 +26,7 @@
v-icon(left) check
span Update Group
v-card.mt-3
v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey darken-2"', fixed-tabs, slider-color='white', show-arrows, dark)
v-tab(key='properties') Properties
v-tab(key='permissions') Permissions
v-tab(key='rules') Page Rules
@@ -41,8 +43,6 @@
counter='255'
prepend-icon='people'
)
v-divider
.caption.mt-3.grey--text ID: {{group.id}}
v-tab-item(key='permissions', :transition='false', :reverse-transition='false')
v-container.pa-3(fluid, grid-list-md)

2
client/components/admin/admin-groups.vue
View File

@@ -3,7 +3,7 @@
v-layout(row wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') people
img(src='/svg/icon-people.svg', alt='Groups', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2 Groups
.subheading.grey--text Manage groups and their permissions

2
client/components/admin/admin-locale.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') language
img(src='/svg/icon-globe-earth.svg', alt='Locale', style='width: 80px;')
.admin-header-title
.headline.primary--text {{ $t('admin:locale.title') }}
.subheading.grey--text {{ $t('admin:locale.subtitle') }}

2
client/components/admin/admin-logging.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') graphic_eq
img(src='/svg/icon-registry-editor.svg', alt='Logging', style='width: 80px;')
.admin-header-title
.headline.primary--text Logging
.subheading.grey--text Configure the system logger(s)

2
client/components/admin/admin-navigation.vue
View File

@@ -3,7 +3,7 @@
v-layout(row wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') near_me
img(src='/svg/icon-triangle-arrow.svg', alt='Navigation', style='width: 80px;')
.admin-header-title
.headline.primary--text {{$t('navigation.title')}}
.subheading.grey--text {{$t('navigation.subtitle')}}

2
client/components/admin/admin-pages.vue
View File

@@ -3,7 +3,7 @@
v-layout(row wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') insert_drive_file
img(src='/svg/icon-file.svg', alt='Page', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2 Pages
.subheading.grey--text Manage pages

2
client/components/admin/admin-rendering.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') system_update_alt
img(src='/svg/icon-process.svg', alt='Rendering', style='width: 80px;')
.admin-header-title
.headline.primary--text Rendering
.subheading.grey--text Configure how content is rendered

2
client/components/admin/admin-search.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') search
img(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;')
.admin-header-title
.headline.primary--text Search Engine
.subheading.grey--text Configure the search capabilities of your wiki

2
client/components/admin/admin-storage.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') storage
img(src='/svg/icon-cloud-storage.svg', alt='Storage', style='width: 80px;')
.admin-header-title
.headline.primary--text Storage
.subheading.grey--text Set backup and sync targets for your content

2
client/components/admin/admin-system.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') tune
img(src='/svg/icon-tune.svg', alt='System Info', style='width: 80px;')
.admin-header-title
.headline.primary--text {{ $t('admin:system.title') }}
.subheading.grey--text {{ $t('admin:system.subtitle') }}

2
client/components/admin/admin-theme.vue
View File

@@ -3,7 +3,7 @@
v-layout(row wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') palette
img(src='/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;')
.admin-header-title
.headline.primary--text Theme
.subheading.grey--text Modify the look &amp; feel of your wiki

291
client/components/admin/admin-users-edit.vue
View File

@@ -3,148 +3,193 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') perm_identity
img(src='/svg/icon-male-user.svg', alt='Edit User', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2 Users
.subheading.grey--text Manage users
.headline.blue--text.text--darken-2 Edit User
.subheading.grey--text {{user.name}}
v-spacer
v-btn(outline, color='grey', large, @click='refresh')
v-icon refresh
v-btn(color='primary', large, depressed, @click='authorizeUser')
v-icon(left) lock_outline
span Authorize Social User
v-btn(color='primary', large, depressed, @click='createUser')
v-icon(left) add
span New Local User
.caption.grey--text ID #[strong {{user.id}}]
v-divider.mx-3(vertical)
v-btn(color='indigo', large, outline, to='/users')
v-icon arrow_back
v-dialog(v-model='deleteUserDialog', max-width='500', v-if='user.id !== currentUserId && !user.isSystem')
v-btn(color='red', large, outline, slot='activator')
v-icon(color='red') delete
v-card
.dialog-header.is-red Delete User?
v-card-text Are you sure you want to delete user #[strong {{ user.name }}]?
v-card-actions
v-spacer
v-btn(flat, @click='deleteUserDialog = false') Cancel
v-btn(color='red', dark, @click='deleteUser') Delete
v-btn(color='primary', large, depressed, @click='updateUser')
v-icon(left) check
span Update User
v-flex(xs5)
v-card
v-toolbar(color='primary', dense, dark, flat)
v-icon.mr-2 directions_run
span Basic Info
v-list.py-0(two-line, dense)
v-list-tile
v-list-tile-avatar
v-icon alternate_email
v-list-tile-content
v-list-tile-title Email
v-list-tile-sub-title {{ user.email }}
v-list-tile-action
v-btn(icon, color='grey', flat)
v-icon edit
v-divider
v-list-tile
v-list-tile-avatar
v-icon person
v-list-tile-content
v-list-tile-title Display Name
v-list-tile-sub-title {{ user.name }}
v-list-tile-action
v-btn(icon, color='grey', flat)
v-icon edit
v-card.mt-3
v-data-table(
v-model='selected'
:items='users',
:headers='headers',
:search='search',
:pagination.sync='pagination',
:rows-per-page-items='[15]'
hide-actions,
disable-initial-sort
)
template(slot='headers', slot-scope='props')
tr
th.text-xs-left(
v-for='header in props.headers'
:key='header.text'
:width='header.width'
:class='[`column`, header.sortable ? `sortable` : ``, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
@click='changeSort(header.value)'
)
| {{ header.text }}
v-icon(small, v-if='header.sortable') arrow_upward
template(slot='items', slot-scope='props')
tr.is-clickable(:active='props.selected', @click='$router.push("/users/" + props.item.id)')
//- td
v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
td.text-xs-right {{ props.item.id }}
td: strong {{ props.item.name }}
td {{ props.item.email }}
td {{ props.item.providerKey }}
td {{ props.item.createdAt | moment('from') }}
td
v-menu(bottom, right, min-width='200')
v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
v-list
v-list-tile(@click='')
v-list-tile-action
v-icon(color='primary') edit
v-list-tile-content
v-list-tile-title Edit
v-list-tile(@click='')
v-list-tile-action
v-icon(color='red') block
v-list-tile-content
v-list-tile-title Block
template(slot='no-data')
.pa-3
v-alert(icon='warning', :value='true', outline) No users to display!
.text-xs-center.py-2
v-pagination(v-model='pagination.page', :length='pages')
v-toolbar(color='primary', dense, dark, flat)
v-icon.mr-2 lock_outline
span Authentication
v-list.py-0(two-line, dense)
v-list-tile
v-list-tile-avatar
v-icon business
v-list-tile-content
v-list-tile-title Provider
v-list-tile-sub-title {{ user.providerKey }}
v-list-tile-action
v-img(src='https://static.requarks.io/logo/wikijs.svg', alt='')
template(v-if='user.providerKey === `local`')
v-divider
v-list-tile
v-list-tile-avatar
v-icon security
v-list-tile-content
v-list-tile-title Password
v-list-tile-sub-title ********
v-list-tile-action
v-btn(icon, color='grey', flat)
v-icon cached
v-list-tile-action
v-btn(icon, color='grey', flat)
v-icon email
v-divider
v-list-tile
v-list-tile-avatar
v-icon screen_lock_portrait
v-list-tile-content
v-list-tile-title Two Factor Authentication (2FA)
v-list-tile-sub-title.red--text Inactive
v-list-tile-action
v-btn(icon, color='grey', flat)
v-icon power_settings_new
template(v-if='user.providerId')
v-divider
v-list-tile
v-list-tile-avatar
v-icon person
v-list-tile-content
v-list-tile-title Provider Id
v-list-tile-sub-title {{ user.providerId }}
v-card.mt-3
v-toolbar(color='primary', dense, dark, flat)
v-icon.mr-2 people
span User Groups
v-list(dense)
template(v-for='(group, idx) in user.groups')
v-list-tile
v-list-tile-avatar
v-icon people_outline
v-list-tile-content
v-list-tile-title {{group.name}}
v-list-tile-action
v-btn(icon, color='red', flat)
v-icon clear
v-divider(v-if='idx < user.groups.length - 1')
v-card-chin
v-spacer
v-btn(small, color='primary', flat)
v-icon(left) how_to_reg
span Assign to group
v-flex(xs7)
v-card
v-toolbar(color='primary', dense, dark, flat)
v-icon.mr-2 directions_walk
span Extended Metadata
v-list.py-0(two-line, dense)
v-list-tile
v-list-tile-avatar
v-icon public
v-list-tile-content
v-list-tile-title Location
v-list-tile-sub-title {{ user.location }}
v-list-tile-action
v-btn(icon, color='grey', flat)
v-icon edit
v-divider
v-list-tile
v-list-tile-avatar
v-icon local_library
v-list-tile-content
v-list-tile-title Job Title
v-list-tile-sub-title {{ user.jobTitle }}
v-list-tile-action
v-btn(icon, color='grey', flat)
v-icon edit
v-divider
v-list-tile
v-list-tile-avatar
v-icon map
v-list-tile-content
v-list-tile-title Timezone
v-list-tile-sub-title {{ user.timezone }}
v-list-tile-action
v-btn(icon, color='grey', flat)
v-icon edit
v-card.mt-3
v-toolbar(color='primary', dense, dark, flat)
v-icon.mr-2 insert_drive_file
span Content
v-card-text
em.caption.grey--text Coming soon
user-authorize(v-model='isAuthorizeDialogShown')
user-create(v-model='isCreateDialogShown')
</template>
<script>
import usersQuery from 'gql/admin/users/users-query-list.gql'
import _ from 'lodash'
import { get } from 'vuex-pathify'
import UserAuthorize from './admin-users-authorize.vue'
import UserCreate from './admin-users-create.vue'
import userQuery from 'gql/admin/users/users-query-single.gql'
export default {
components: {
UserAuthorize,
UserCreate
},
data() {
return {
selected: [],
pagination: {},
users: [],
headers: [
{ text: 'ID', value: 'id', width: 80, sortable: true },
{ text: 'Name', value: 'name', sortable: true },
{ text: 'Email', value: 'email', sortable: true },
{ text: 'Provider', value: 'provider', sortable: true },
{ text: 'Created', value: 'createdAt', sortable: true },
{ text: '', value: 'actions', sortable: false, width: 50 }
],
search: '',
isAuthorizeDialogShown: false,
isCreateDialogShown: false
deleteUserDialog: false,
user: {
}
}
},
computed: {
pages () {
if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
return 0
}
return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
}
currentUserId: get('user/id')
},
methods: {
authorizeUser() {
this.isAuthorizeDialogShown = true
},
createUser() {
this.isCreateDialogShown = true
},
async refresh() {
await this.$apollo.queries.users.refetch()
this.$store.commit('showNotification', {
message: 'Users list has been refreshed.',
style: 'success',
icon: 'cached'
})
},
changeSort (column) {
if (this.pagination.sortBy === column) {
this.pagination.descending = !this.pagination.descending
} else {
this.pagination.sortBy = column
this.pagination.descending = false
}
},
toggleAll () {
if (this.selected.length) {
this.selected = []
} else {
this.selected = this.items.slice()
}
}
deleteUser() {},
updateUser() {}
},
apollo: {
users: {
query: usersQuery,
user: {
query: userQuery,
variables() {
return {
id: _.toSafeInteger(this.$route.params.id)
}
},
fetchPolicy: 'network-only',
update: (data) => data.users.list,
update: (data) => data.users.single,
watchLoading (isLoading) {
this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-refresh')
}

22
client/components/admin/admin-users.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') perm_identity
img(src='/svg/icon-customer.svg', alt='Users', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2 Users
.subheading.grey--text Manage users
@@ -48,24 +48,16 @@
td {{ props.item.providerKey }}
td {{ props.item.createdAt | moment('from') }}
td
v-menu(bottom, right, min-width='200')
v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
v-list
v-list-tile(@click='')
v-list-tile-action
v-icon(color='primary') edit
v-list-tile-content
v-list-tile-title Edit
v-list-tile(@click='')
v-list-tile-action
v-icon(color='red') block
v-list-tile-content
v-list-tile-title Block
v-tooltip(left, v-if='props.item.isSystem')
v-icon(slot='activator') lock_outline
span System User
template(slot='no-data')
.pa-3
v-alert(icon='warning', :value='true', outline) No users to display!
.text-xs-center.py-2
v-card-chin
v-spacer
v-pagination(v-model='pagination.page', :length='pages')
v-spacer
user-authorize(v-model='isAuthorizeDialogShown')
user-create(v-model='isCreateDialogShown')

2
client/components/admin/admin-utilities.vue
View File

@@ -3,7 +3,7 @@
v-layout(row, wrap)
v-flex(xs12)
.admin-header
v-icon(size='80', color='grey lighten-2') build
img(src='/svg/icon-maintenance.svg', alt='Utilities', style='width: 80px;')
.admin-header-title
.headline.primary--text Utilities
.subheading.grey--text Maintenance and troubleshooting tools

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

@@ -128,7 +128,7 @@
v-list-tile-action: v-icon(color='grey') person_add
v-list-tile-title Register
page-selector(mode='create', v-model='newPageModal')
page-selector(mode='create', v-model='newPageModal', :open-handler='pageNewCreate')
</template>
<script>
@@ -208,6 +208,9 @@ export default {
pageNew () {
this.newPageModal = true
},
pageNewCreate ({ path, locale }) {
window.location.assign(`/e/${path}`)
},
pageView () {
window.location.assign(`/${this.path}`)
},

50
client/components/common/page-selector.vue
View File

@@ -50,13 +50,23 @@
v-list-tile
v-list-tile-avatar: v-icon insert_drive_file
v-list-tile-title File D
v-card-text.grey.pa-2(:class='darkMode ? `darken-3-d5` : `lighten-1`')
v-card-actions.grey.pa-2(:class='darkMode ? `darken-3-d5` : `lighten-1`')
v-select(
solo
dark
background-color='grey darken-3-d2'
hide-details
single-line
:items='namespaces'
style='flex: 0 0 100px;'
v-model='currentLocale'
)
v-text-field(
solo
hide-details
v-model='location'
prefix='/'
v-model='currentPath'
flat
prepend-inner-icon='subdirectory_arrow_right'
clearable
)
v-card-chin
@@ -76,17 +86,31 @@ export default {
type: Boolean,
default: false
},
path: {
type: String,
default: 'new-page'
},
locale: {
type: String,
default: 'en'
},
mode: {
type: String,
default: 'create'
},
openHandler: {
type: Function,
default: () => {}
}
},
data() {
return {
searchLoading: false,
location: '/new-page',
currentLocale: 'en',
currentPath: 'new-page',
tree: [],
treeChildren: []
treeChildren: [],
namespaces: ['en']
}
},
computed: {
@@ -105,13 +129,25 @@ export default {
]
}
},
watch: {
isShown(newValue, oldValue) {
if (newValue && !oldValue) {
this.currentPath = this.path
this.currentLocale = this.locale
}
}
},
methods: {
close() {
this.isShown = false
},
open() {
if (this.mode === 'create') {
window.location.assign(`/e${this.location}`)
const exit = this.openHandler({
locale: this.currentLocale,
path: this.currentPath
})
if (exit !== false) {
this.close()
}
},
async fetchFolders(item) {

2
client/components/common/v-card-chin.vue
View File

@@ -1,7 +1,7 @@
<template lang='pug'>
div
v-divider.my-0
v-card-actions(:class='dark ? "" : "grey lighten-4"')
v-card-actions(:class='dark ? "grey darken-4-l5" : "grey lighten-4"')
slot
</template>

24
client/components/editor.vue
View File

@@ -40,40 +40,50 @@
)
.subheading {{ $t('editor:save.processing') }}
.caption.blue--text.text--lighten-3 {{ $t('editor:save.pleaseWait') }}
v-dialog(v-model='dialogEditorSelector', persistent, max-width='550')
v-dialog(v-model='dialogEditorSelector', persistent, max-width='700')
v-card.radius-7(color='blue darken-3', dark)
v-card-text.text-xs-center.py-4
.subheading Which editor do you want to use for this page?
v-container(grid-list-lg, fluid)
v-layout(row, wrap, justify-center)
v-flex(xs4)
v-flex(xs3)
v-card.radius-7.grey(
hover
light
ripple
)
v-card-text.text-xs-center(@click='selectEditor("api")')
img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
.body-2.mt-2.grey--text.text--darken-2 API Docs
.caption.grey--text.text--darken-1 REST / GraphQL
v-flex(xs3)
v-card.radius-7(
hover
light
ripple
)
v-card-text.text-xs-center(@click='selectEditor("code")')
v-icon(large, color='primary') code
img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
.body-2.mt-2 Code
.caption.grey--text Raw HTML
v-flex(xs4)
v-flex(xs3)
v-card.radius-7(
hover
light
ripple
)
v-card-text.text-xs-center(@click='selectEditor("markdown")')
v-icon(large, color='primary') list_alt
img(src='/svg/icon-markdown.svg', alt='Markdown', style='width: 36px;')
.body-2.mt-2 Markdown
.caption.grey--text Default
v-flex(xs4)
v-flex(xs3)
v-card.radius-7.grey(
hover
light
ripple
)
v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
v-icon(large, color='grey darken-1') web
img(src='/svg/icon-open-in-browser.svg', alt='Visual Builder', style='width: 36px;')
.body-2.mt-2.grey--text.text--darken-2 Visual Builder
.caption.grey--text.text--darken-1 Drag-n-drop
.caption.blue--text.text--lighten-2 This cannot be changed once the page is created.

12
client/components/editor/editor-modal-properties.vue
View File

@@ -176,6 +176,7 @@
@click='$refs.menuPublishEnd.save(publishEndDate)'
) OK
page-selector(mode='create', v-model='pageSelectorShown', :path='path', :locale='locale', :open-handler='setPath')
v-tour(name='editorPropertiesTour', :steps='tourSteps')
</template>
@@ -194,6 +195,7 @@ export default {
return {
isPublishStartShown: false,
isPublishEndShown: false,
pageSelectorShown: false,
namespaces: ['en'],
tourSteps: [
{
@@ -234,11 +236,11 @@ export default {
this.isShown = false
},
showPathSelector() {
this.$store.commit('showNotification', {
message: 'Coming soon!',
style: 'purple',
icon: 'directions_boat'
})
this.pageSelectorShown = true
},
setPath({ path, locale }) {
this.locale = locale
this.path = path
}
}
}