Skip to content

Commit

Permalink
refactor: dev optimizations + improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
NGPixel committed Mar 18, 2018
1 parent 3dc9b92 commit 392cbe9
Show file tree
Hide file tree
Showing 31 changed files with 1,388 additions and 1,008 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
**/node_modules/**
**/*.min.js
assets/**
client/libs/**
coverage/**
repo/**
data/**
Expand Down
1 change: 0 additions & 1 deletion client/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ Vue.component('login', () => import(/* webpackMode: "eager" */ './components/log
Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/nav-header.vue'))
Vue.component('navigator', () => import(/* webpackMode: "eager" */ './components/navigator.vue'))
Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.vue'))
Vue.component('toggle', () => import(/* webpackMode: "eager" */ './components/toggle.vue'))

let bootstrap = () => {
// ====================================
Expand Down
163 changes: 59 additions & 104 deletions client/components/admin-dev.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,71 @@
.pa-3.pt-4
.headline.primary--text Developer Tools
.subheading.grey--text ¯\_(ツ)_/¯
v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
v-tab Graph API Playground
v-tab Graph API Map

v-tab-item(:transition='false', :reverse-transition='false')
v-tabs(v-model='selectedTab', color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows, @input='tabChanged')
v-tab(key='0') Graph API Playground
v-tab(key='1') Graph API Map
v-tabs-items(v-model='selectedTab')
v-tab-item(key='0', :transition='false', :reverse-transition='false')
#graphiql

v-tab-item(key='1', :transition='false', :reverse-transition='false')
#voyager

</template>

<script>
import React from 'react'
import ReactDOM from 'react-dom'
import GraphiQL from 'graphiql'
import { Voyager } from 'graphql-voyager'
import 'graphiql/graphiql.css'
import 'graphql-voyager/dist/voyager.css'
const fetcher = (qry, respType) => {
return fetch('/graphql', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(qry),
credentials: 'include'
}).then(response => {
if (respType === 'json') {
return response.json()
} else {
return response.text()
}
}).then(responseBody => {
try {
return JSON.parse(responseBody)
} catch (error) {
return responseBody
}
})
}
export default {
data() {
return {}
return {
selectedTab: '0'
}
},
mounted() {
this.renderGraphiQL()
},
methods: {
tabChanged (tabId) {
switch (tabId) {
case '1':
this.renderVoyager()
break
}
},
renderGraphiQL() {
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: graphQLParams => {
return fetch('/graphql', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(graphQLParams),
credentials: 'include'
}).then(function (response) {
return response.text()
}).then(function (responseBody) {
try {
return JSON.parse(responseBody)
} catch (error) {
return responseBody
}
})
},
fetcher: qry => fetcher(qry, 'text'),
query: null,
response: null,
variables: null,
Expand All @@ -55,6 +77,15 @@ export default {
}),
document.getElementById('graphiql')
)
},
renderVoyager() {
ReactDOM.render(
React.createElement(Voyager, {
introspection: qry => fetcher({ query: qry }, 'json'),
workerURI: '/js/voyager.worker.js'
}),
document.getElementById('voyager')
)
}
}
}
Expand All @@ -79,85 +110,9 @@ export default {
background-color: initial;
box-shadow: initial;
}
}
.cm-s-wikijs-dark.CodeMirror {
background: darken(mc('grey','900'), 3%);
color: #e0e0e0;
}
.cm-s-wikijs-dark div.CodeMirror-selected {
background: mc('blue','800');
}
.cm-s-wikijs-dark .cm-matchhighlight {
background: mc('blue','800');
}
.cm-s-wikijs-dark .CodeMirror-line::selection, .cm-s-wikijs-dark .CodeMirror-line > span::selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::selection {
background: mc('red', '500');
}
.cm-s-wikijs-dark .CodeMirror-line::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::-moz-selection {
background: mc('red', '500');
}
.cm-s-wikijs-dark .CodeMirror-gutters {
background: darken(mc('grey','900'), 6%);
border-right: 1px solid mc('grey','900');
}
.cm-s-wikijs-dark .CodeMirror-guttermarker {
color: #ac4142;
}
.cm-s-wikijs-dark .CodeMirror-guttermarker-subtle {
color: #505050;
}
.cm-s-wikijs-dark .CodeMirror-linenumber {
color: mc('grey','800');
}
.cm-s-wikijs-dark .CodeMirror-cursor {
border-left: 1px solid #b0b0b0;
}
.cm-s-wikijs-dark span.cm-comment {
color: mc('orange','800');
}
.cm-s-wikijs-dark span.cm-atom {
color: #aa759f;
}
.cm-s-wikijs-dark span.cm-number {
color: #aa759f;
}
.cm-s-wikijs-dark span.cm-property, .cm-s-wikijs-dark span.cm-attribute {
color: #90a959;
}
.cm-s-wikijs-dark span.cm-keyword {
color: #ac4142;
}
.cm-s-wikijs-dark span.cm-string {
color: #f4bf75;
}
.cm-s-wikijs-dark span.cm-variable {
color: #90a959;
}
.cm-s-wikijs-dark span.cm-variable-2 {
color: #6a9fb5;
}
.cm-s-wikijs-dark span.cm-def {
color: #d28445;
}
.cm-s-wikijs-dark span.cm-bracket {
color: #e0e0e0;
}
.cm-s-wikijs-dark span.cm-tag {
color: #ac4142;
}
.cm-s-wikijs-dark span.cm-link {
color: #aa759f;
}
.cm-s-wikijs-dark span.cm-error {
background: #ac4142;
color: #b0b0b0;
}
.cm-s-wikijs-dark .CodeMirror-activeline-background {
background: mc('grey','900');
}
.cm-s-wikijs-dark .CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
}
#voyager {
height: calc(100vh - 250px);
}
</style>
45 changes: 45 additions & 0 deletions client/components/admin-editor.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<template lang='pug'>
v-card(flat)
v-card(color='grey lighten-5')
.pa-3.pt-4
.headline.primary--text Editor
.subheading.grey--text Configure the content editor
v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
v-tab(key='settings'): v-icon settings
v-tab(key='code') Markdown

v-tab-item(key='settings', :transition='false', :reverse-transition='false')
v-card.pa-3
v-form
v-radio-group(v-model='selectedEditor')
v-radio(v-for='(editor, n) in editors', :key='n', :label='editor.text', :value='editor.value', color='primary')
v-divider
v-btn(color='primary')
v-icon(left) chevron_right
| Set Editor
v-btn(icon)
v-icon.grey--text refresh
v-tab-item(key='code', :transition='false', :reverse-transition='false')
v-card.pa-3
v-form
v-subheader Editor Configuration
.body-1 This editor has no configuration options you can modify.

</template>

<script>
export default {
data() {
return {
editors: [
{ text: 'Markdown (default)', value: 'code' }
],
selectedEditor: 'code'
}
}
}
</script>

<style lang='scss'>
</style>
108 changes: 108 additions & 0 deletions client/components/admin-groups.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<template lang='pug'>
v-card(flat)
v-card(flat, color='grey lighten-5').pa-3.pt-4
.headline.blue--text.text--darken-2 Groups
.subheading.grey--text Manage groups
v-card
v-card-title
v-btn(color='primary', dark)
v-icon(left) add
| New Group
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.userCount }}
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-if='items.length > 15')
v-pagination(v-model='pagination.page', :length='pages')
</template>

<script>
export default {
data() {
return {
selected: [],
pagination: {},
items: [
{ id: 1, name: 'Administrators', userCount: 1 },
{ id: 2, name: 'Users', userCount: 23 }
],
headers: [
{ text: 'Name', value: 'name' },
{ text: 'Users', value: 'userCount', width: 200 },
{ 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>
19 changes: 19 additions & 0 deletions client/components/admin-rendering.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template lang='pug'>
v-container(fluid, fill-height)
v-layout(row wrap)
v-flex(xs12)
.headline.primary--text Content Rendering
.subheading.grey--text Configure how content is rendered
</template>

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

<style lang='scss'>
</style>
Loading

0 comments on commit 392cbe9

Please sign in to comment.