Skip to content

Commit

Permalink
refactor: global namespace + admin pages UI
Browse files Browse the repository at this point in the history
  • Loading branch information
NGPixel committed Mar 5, 2018
1 parent f203173 commit 7acc4e9
Show file tree
Hide file tree
Showing 61 changed files with 751 additions and 508 deletions.
113 changes: 113 additions & 0 deletions client/components/admin-api.vue
@@ -0,0 +1,113 @@
<template lang='pug'>
v-card(flat)
v-card(flat, color='grey lighten-5').pa-3.pt-4
.headline.blue--text.text--darken-2 API
.subheading.grey--text Manage keys to access the API
v-card
v-card-title
v-btn(color='primary', dark)
v-icon(left) add
| New API Key
v-btn(icon)
v-icon.grey--text refresh
v-spacer
v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search')
v-data-table(
v-model='selected'
:items='items',
:headers='headers',
:search='search',
:pagination.sync='pagination',
:rows-per-page-items='[15]'
select-all,
hide-actions,
disable-initial-sort
)
template(slot='headers', slot-scope='props')
tr
th(width='50')
th.text-xs-right(
width='80'
:class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
@click='changeSort(`id`)'
)
v-icon(small) arrow_upward
| ID
th.text-xs-left(
v-for='header in props.headers'
:key='header.text'
:width='header.width'
:class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
@click='changeSort(header.value)'
)
| {{ header.text }}
v-icon(small) arrow_upward
template(slot='items', slot-scope='props')
tr(:active='props.selected')
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 {{ props.item.name }}
td {{ props.item.key }}
td {{ props.item.createdOn }}
td {{ props.item.updatedOn }}
td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
template(slot='no-data')
v-alert(icon='warning', :value='true') No users to display!
.text-xs-center.py-2
v-pagination(v-model='pagination.page', :length='pages')
</template>

<script>
export default {
data() {
return {
selected: [],
pagination: {},
items: [
{ id: 1, key: 'user@test.com' },
{ id: 2, key: 'dude@test.com' },
{ id: 3, key: 'dude@test.com' }
],
headers: [
{ text: 'Name', value: 'name' },
{ text: 'Key', value: 'key' },
{ text: 'Created On', value: 'createdOn' },
{ text: 'Updated On', value: 'updatedOn' },
{ text: '', value: 'actions', sortable: false, width: 50 }
],
search: ''
}
},
computed: {
pages () {
if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
return 0
}
return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
}
},
methods: {
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()
}
}
}
}
</script>

<style lang='scss'>
</style>
4 changes: 3 additions & 1 deletion client/components/admin-auth.vue
Expand Up @@ -28,7 +28,9 @@
v-btn(color='primary')
v-icon(left) chevron_right
| Set Providers

v-btn(color='black', dark)
v-icon(left) layers_clear
| Flush Sessions
</template>

<script>
Expand Down
19 changes: 19 additions & 0 deletions client/components/admin-dev.vue
@@ -0,0 +1,19 @@
<template lang='pug'>
v-container(fluid, fill-height)
v-layout(row wrap)
v-flex(xs12)
.headline.primary--text Developer Tools
.subheading.grey--text ¯\_(ツ)_/¯
</template>

<script>
export default {
data() {
return {}
}
}
</script>

<style lang='scss'>
</style>
3 changes: 3 additions & 0 deletions client/components/admin-search.vue
Expand Up @@ -20,6 +20,9 @@
v-btn(color='primary')
v-icon(left) chevron_right
| Set Engine
v-btn(color='black', dark)
v-icon(left) refresh
| Rebuild Index
v-tab-item(key='db')
v-card.pa-3 TODO
v-tab-item(key='algolia')
Expand Down
53 changes: 53 additions & 0 deletions client/components/admin-storage.vue
@@ -0,0 +1,53 @@
<template lang='pug'>
v-card(flat)
v-card(color='grey lighten-5')
.pa-3.pt-4
.headline.primary--text Storage
.subheading.grey--text Set backup and sync targets for your content
v-tabs(color='grey lighten-4', grow, slider-color='primary', show-arrows)
v-tab(key='settings'): v-icon settings
v-tab(key='local') Local FS
v-tab(key='git') Git
v-tab(key='s3') Amazon S3
v-tab(key='azure') Azure Blob Storage
v-tab(key='digitalocean') DigitalOcean Spaces
v-tab(key='dropbox') Dropbox
v-tab(key='gdrive') Google Drive
v-tab(key='onedrive') OneDrive
v-tab(key='scp') SCP (SSH)

v-tab-item(key='settings')
v-card.pa-3
v-form
v-checkbox(v-for='(target, n) in targets', v-model='auths', :key='n', :label='target.text', :value='target.value', color='primary')
v-divider
v-btn(color='primary')
v-icon(left) chevron_right
| Set Backup Targets

</template>

<script>
export default {
data() {
return {
targets: [
{ text: 'Local FS', value: 'local' },
{ text: 'Git', value: 'auth0' },
{ text: 'Amazon S3', value: 'algolia' },
{ text: 'Azure Blob Storage', value: 'elasticsearch' },
{ text: 'DigitalOcean Spaces', value: 'solr' },
{ text: 'Dropbox', value: 'solr' },
{ text: 'Google Drive', value: 'solr' },
{ text: 'OneDrive', value: 'solr' },
{ text: 'SCP (SSH)', value: 'solr' }
],
auths: ['local']
}
}
}
</script>

<style lang='scss'>
</style>
123 changes: 61 additions & 62 deletions client/components/admin-users.vue
@@ -1,66 +1,65 @@
<template lang='pug'>
v-container(fluid, fill-height, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.headline.blue--text.text--darken-2 Users
.subheading.grey--text Manage users
v-card.mt-3.elevation-1
v-card-title
v-btn(color='primary', dark)
v-icon(left) add
| New User
v-btn(color='primary', dark)
v-icon(left) lock_outline
| Authorize User
v-btn(icon)
v-icon.grey--text refresh
v-spacer
v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search')
v-data-table(
v-model='selected'
:items='items',
:headers='headers',
:search='search',
:pagination.sync='pagination',
:rows-per-page-items='[15]'
select-all,
hide-actions,
disable-initial-sort
)
template(slot='headers', slot-scope='props')
tr
th(width='50')
th.text-xs-right(
width='80'
:class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
@click='changeSort(`id`)'
)
v-icon(small) arrow_upward
| ID
th.text-xs-left(
v-for='header in props.headers'
:key='header.text'
:width='header.width'
:class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
@click='changeSort(header.value)'
)
| {{ header.text }}
v-icon(small) arrow_upward
template(slot='items', slot-scope='props')
tr(:active='props.selected')
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 {{ props.item.email }}
td {{ props.item.name }}
td {{ props.item.provider }}
td {{ props.item.createdOn }}
td {{ props.item.updatedOn }}
td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
template(slot='no-data')
v-alert(icon='warning', :value='true') No users to display!
.text-xs-center.py-2
v-pagination(v-model='pagination.page', :length='pages')
v-card(flat)
v-card(flat, color='grey lighten-5').pa-3.pt-4
.headline.blue--text.text--darken-2 Users
.subheading.grey--text Manage users
v-card
v-card-title
v-btn(color='primary', dark)
v-icon(left) add
| New User
v-btn(color='primary', dark)
v-icon(left) lock_outline
| Authorize User
v-btn(icon)
v-icon.grey--text refresh
v-spacer
v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search')
v-data-table(
v-model='selected'
:items='items',
:headers='headers',
:search='search',
:pagination.sync='pagination',
:rows-per-page-items='[15]'
select-all,
hide-actions,
disable-initial-sort
)
template(slot='headers', slot-scope='props')
tr
th(width='50')
th.text-xs-right(
width='80'
:class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
@click='changeSort(`id`)'
)
v-icon(small) arrow_upward
| ID
th.text-xs-left(
v-for='header in props.headers'
:key='header.text'
:width='header.width'
:class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
@click='changeSort(header.value)'
)
| {{ header.text }}
v-icon(small) arrow_upward
template(slot='items', slot-scope='props')
tr(:active='props.selected')
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 {{ props.item.email }}
td {{ props.item.name }}
td {{ props.item.provider }}
td {{ props.item.createdOn }}
td {{ props.item.updatedOn }}
td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
template(slot='no-data')
v-alert(icon='warning', :value='true') No users to display!
.text-xs-center.py-2
v-pagination(v-model='pagination.page', :length='pages')
</template>

<script>
Expand Down
19 changes: 19 additions & 0 deletions client/components/admin-utilities.vue
@@ -0,0 +1,19 @@
<template lang='pug'>
v-container(fluid, fill-height)
v-layout(row wrap)
v-flex(xs12)
.headline.primary--text Utilities
.subheading.grey--text Maintenance and troubleshooting tools
</template>

<script>
export default {
data() {
return {}
}
}
</script>

<style lang='scss'>
</style>
9 changes: 8 additions & 1 deletion client/components/admin.vue
Expand Up @@ -50,6 +50,9 @@
v-list-tile-title Storage
v-divider.my-2
v-subheader System
v-list-tile(to='/api')
v-list-tile-action: v-icon call_split
v-list-tile-title API Access
v-list-tile(to='/system')
v-list-tile-action: v-icon tune
v-list-tile-title System Info
Expand Down Expand Up @@ -83,7 +86,11 @@ const router = new VueRouter({
{ path: '/users', component: () => import(/* webpackChunkName: "admin" */ './admin-users.vue') },
{ path: '/auth', component: () => import(/* webpackChunkName: "admin" */ './admin-auth.vue') },
{ path: '/search', component: () => import(/* webpackChunkName: "admin" */ './admin-search.vue') },
{ path: '/system', component: () => import(/* webpackChunkName: "admin" */ './admin-system.vue') }
{ path: '/storage', component: () => import(/* webpackChunkName: "admin" */ './admin-storage.vue') },
{ path: '/api', component: () => import(/* webpackChunkName: "admin" */ './admin-api.vue') },
{ path: '/system', component: () => import(/* webpackChunkName: "admin" */ './admin-system.vue') },
{ path: '/utilities', component: () => import(/* webpackChunkName: "admin" */ './admin-utilities.vue') },
{ path: '/dev', component: () => import(/* webpackChunkName: "admin" */ './admin-dev.vue') }
]
})
Expand Down
1 change: 1 addition & 0 deletions package.json
Expand Up @@ -98,6 +98,7 @@
"mongodb": "3.0.2",
"multer": "1.3.0",
"node-2fa": "1.1.2",
"oauth2orize": "1.11.0",
"ora": "1.4.0",
"passport": "0.4.0",
"passport-auth0": "0.6.1",
Expand Down

0 comments on commit 7acc4e9

Please sign in to comment.