Skip to content

Commit 0b93544

Browse files
NGPixelNGPixel
committed
feat: admin rendering UI + module configuration UI + UI fixes
1 parent 92d0925 commit 0b93544

22 files changed

+212
-62
lines changed

‎client/components/admin.vue

+11
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
v-list-tile(to='/locale')
1515
v-list-tile-avatar: v-icon language
1616
v-list-tile-title {{ $t('admin:locale.title') }}
17+
v-list-tile(to='/pages')
18+
v-list-tile-avatar: v-icon insert_drive_file
19+
v-list-tile-title {{ $t('admin:pages.title') }}
1720
v-list-tile(to='/stats')
1821
v-list-tile-avatar: v-icon show_chart
1922
v-list-tile-title {{ $t('admin:stats.title') }}
@@ -90,6 +93,7 @@ const router = new VueRouter({
9093
{ path: '/dashboard', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-dashboard.vue') },
9194
{ path: '/general', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-general.vue') },
9295
{ path: '/locale', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-locale.vue') },
96+
{ path: '/pages', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-pages.vue') },
9397
{ path: '/stats', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-stats.vue') },
9498
{ path: '/theme', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-theme.vue') },
9599
{ path: '/groups', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-groups.vue') },
@@ -154,4 +158,11 @@ export default {
154158
}
155159
}
156160
161+
.admin-header-icon {
162+
position: absolute;
163+
top: 1rem;
164+
right: 1rem;
165+
166+
}
167+
157168
</style>

‎client/components/admin/admin-api.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template lang='pug'>
22
v-card(flat)
33
v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
4+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') call_split
45
.headline.blue--text.text--darken-2 API
56
.subheading.grey--text Manage keys to access the API
67
v-card

‎client/components/admin/admin-auth.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template lang='pug'>
22
v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
33
.pa-3.pt-4
4+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') lock_outline
45
.headline.primary--text Authentication
56
.subheading.grey--text Configure the authentication settings of your wiki
67
v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)

‎client/components/admin/admin-contribute.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template lang='pug'>
22
v-card(flat)
33
v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
4+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') favorite
45
.headline.primary--text {{ $t('admin:contribute.title') }}
56
.subheading.grey--text {{ $t('admin:contribute.subtitle') }}
67
v-card.pa-3

‎client/components/admin/admin-dev.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template lang='pug'>
22
div
33
v-card(flat, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
4+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') weekend
45
.headline.primary--text Developer Tools
56
.subheading.grey--text ¯\_(ツ)_/¯
67
v-tabs(

‎client/components/admin/admin-editor.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template lang='pug'>
22
v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
33
.pa-3.pt-4
4+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') transform
45
.headline.primary--text Editor
56
.subheading.grey--text Configure the content editor
67
v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)

‎client/components/admin/admin-general.vue

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
v-container(fluid, fill-height, grid-list-lg)
33
v-layout(row wrap)
44
v-flex(xs12)
5+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') widgets
56
.headline.primary--text {{ $t('admin:general.title') }}
67
.subheading.grey--text {{ $t('admin:general.subtitle') }}
78
v-form.pt-3

‎client/components/admin/admin-groups-edit.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template lang='pug'>
22
v-card
33
v-card(flat, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
4+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') people
45
.headline.blue--text.text--darken-2 Edit Group
56
.subheading.grey--text {{name}}
67
v-btn(color='primary', fab, absolute, bottom, right, small, to='/groups'): v-icon arrow_upward

‎client/components/admin/admin-groups.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template lang='pug'>
22
v-card(flat)
33
v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
4+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') people
45
.headline.blue--text.text--darken-2 Groups
56
.subheading.grey--text Manage groups and their permissions
67
v-card

‎client/components/admin/admin-locale.vue

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
v-container(fluid, fill-height, grid-list-lg)
33
v-layout(row wrap)
44
v-flex(xs12)
5+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') language
56
.headline.primary--text {{ $t('admin:locale.title') }}
67
.subheading.grey--text {{ $t('admin:locale.subtitle') }}
78
v-form.pt-3

‎client/components/admin/admin-logging.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template lang='pug'>
22
v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
33
.pa-3.pt-4
4+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') graphic_eq
45
.headline.primary--text Logging
56
.subheading.grey--text Configure the system logger(s)
67
v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)

‎client/components/admin/admin-pages.vue

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template lang='pug'>
2+
v-card(flat)
3+
v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
4+
.admin-header-icon: v-icon(size='80', color='grey lighten-2') insert_drive_file
5+
.headline.blue--text.text--darken-2 Pages
6+
.subheading.grey--text Manage pages
7+
v-card
8+
v-card-title
9+
v-btn(color='primary', dark, slot='activator')
10+
v-icon(left) add
11+
| New Page
12+
v-btn(icon, @click='refresh')
13+
v-icon.grey--text refresh
14+
v-spacer
15+
v-text-field(solo, append-icon='search', label='Search', single-line, hide-details, v-model='search')
16+
v-data-table(
17+
:items='groups'
18+
:headers='headers'
19+
:search='search'
20+
:pagination.sync='pagination'
21+
:rows-per-page-items='[15]'
22+
hide-actions
23+
)
24+
template(slot='items', slot-scope='props')
25+
tr.is-clickable(:active='props.selected', @click='$router.push("/e/" + props.item.id)')
26+
td.text-xs-right {{ props.item.id }}
27+
td {{ props.item.name }}
28+
td {{ props.item.userCount }}
29+
td {{ props.item.createdAt | moment('calendar') }}
30+
td {{ props.item.updatedAt | moment('calendar') }}
31+
template(slot='no-data')
32+
v-alert.ma-3(icon='warning', :value='true', outline) No pages to display.
33+
.text-xs-center.py-2(v-if='groups.length > 15')
34+
v-pagination(v-model='pagination.page', :length='pages')
35+
</template>
36+
37+
<script>
38+
39+
export default {
40+
data() {
41+
return {
42+
selectedGroup: {},
43+
pagination: {},
44+
groups: [],
45+
headers: [
46+
{ text: 'ID', value: 'id', width: 50, align: 'right' },
47+
{ text: 'Title', value: 'title' },
48+
{ text: 'Path', value: 'path' },
49+
{ text: 'Created', value: 'createdAt', width: 250 },
50+
{ text: 'Last Updated', value: 'updatedAt', width: 250 }
51+
],
52+
search: ''
53+
}
54+
},
55+
computed: {
56+
pages () {
57+
if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
58+
return 0
59+
}
60+
61+
return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
62+
}
63+
},
64+
methods: {
65+
async refresh() {
66+
// await this.$apollo.queries.groups.refetch()
67+
this.$store.commit('showNotification', {
68+
message: 'Pages have been refreshed.',
69+
style: 'success',
70+
icon: 'cached'
71+
})
72+
}
73+
}
74+
}
75+
</script>
76+
77+
<style lang='scss'>
78+
79+
</style>

0 commit comments

Comments
 (0)