summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorUdo Walter2018-07-20 05:49:54 +0200
committerUdo Walter2018-07-20 05:49:54 +0200
commitbe1394e50b38f229260e267828cd880299b99393 (patch)
tree6deb141088fdf46d41cf48443a1b5e2478494326
parent[webapp/devserver] api port for the webpack dev server proxy must now be set ... (diff)
downloadbas-be1394e50b38f229260e267828cd880299b99393.tar.gz
bas-be1394e50b38f229260e267828cd880299b99393.tar.xz
bas-be1394e50b38f229260e267828cd880299b99393.zip
[webapp/settings] added switch to enable colored tab panels
-rw-r--r--server/api/groups.js10
-rw-r--r--webapp/src/components/GroupModule.vue14
-rw-r--r--webapp/src/components/GroupModuleEditDialog.vue (renamed from webapp/src/components/GroupModuleEdit.vue)28
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue4
-rw-r--r--webapp/src/components/SettingsModule.vue11
-rw-r--r--webapp/src/store/global.js27
-rw-r--r--webapp/src/store/groups.js44
7 files changed, 85 insertions, 53 deletions
diff --git a/server/api/groups.js b/server/api/groups.js
index 2d1182b..8158d1c 100644
--- a/server/api/groups.js
+++ b/server/api/groups.js
@@ -6,9 +6,11 @@ module.exports = {
get: function (req, res) {
var id = req.query.id > 0 ? req.query.id : null
switch (req.query.action) {
- case 'getInfo':
- db.group.findOne({ where: { id: req.query.id }}).then(group => {
- res.send(group)
+ case 'getParents':
+ db.group.findOne({ where: { id: req.query.id }, include: ['parents']}).then(group => {
+ group.getParents().then(parents => {
+ res.send(parents.map(x => ({ id: x.id, name: x.name })))
+ })
})
break
case 'getSubGroups':
@@ -28,7 +30,7 @@ module.exports = {
post: function (req, res) {
var id = req.body.id > 0 ? req.body.id : null
switch (req.body.action) {
- case 'setInfo':
+ case 'update':
if (!id) res.end()
db.group.update({ name: req.body.name }, { where: { id: id } })
res.end()
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 6ad9279..123f847 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -12,7 +12,7 @@
<v-layout>
<v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
<v-card>
- <v-tabs :value="activeTab" @input="updateActiveTab" slider-color="primary">
+ <v-tabs :value="activeTab" @input="updateActiveTab" :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
<template v-for="(group, index) in groupChain">
<v-icon v-if="group.id > 0" :key="2*index">keyboard_arrow_right</v-icon>
<v-tab :key="2*index+1" ripple>
@@ -31,19 +31,20 @@
</v-tabs-items>
</v-flex>
</v-layout>
+ <group-module-edit-dialog />
</v-container>
</template>
<script>
import GroupModuleGroupView from '@/components/GroupModuleGroupView'
-import GroupModuleEdit from '@/components/GroupModuleEdit'
-import { mapState } from 'vuex'
+import GroupModuleEditDialog from '@/components/GroupModuleEditDialog'
+import { mapState, mapGetters } from 'vuex'
export default {
name: 'GroupModule',
components: {
GroupModuleGroupView,
- GroupModuleEdit
+ GroupModuleEditDialog
},
data () {
return {
@@ -53,6 +54,7 @@ export default {
}
},
computed: {
+ ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
...mapState('groups', ['groupChain', 'activeTab'])
},
methods: {
@@ -61,7 +63,9 @@ export default {
}
},
created () {
- this.$store.dispatch('groups/loadGroup', { tabIndex: 0, id: 0 })
+ if (this.$store.state.groups.groupChain == null || this.$store.state.groups.groupChain.length === 0) {
+ this.$store.dispatch('groups/loadGroupInChain', { tabIndex: 0, id: 0 })
+ }
}
}
</script>
diff --git a/webapp/src/components/GroupModuleEdit.vue b/webapp/src/components/GroupModuleEditDialog.vue
index 4b91269..8eab1e1 100644
--- a/webapp/src/components/GroupModuleEdit.vue
+++ b/webapp/src/components/GroupModuleEditDialog.vue
@@ -8,31 +8,35 @@
</i18n>
<template>
- <v-card>
- <div class="input-fields">
- <v-text-field v-model="name" label="Name" box color="primary"></v-text-field>
- </div>
- <div class="action-buttons text-xs-right">
- <v-btn flat @click="$emit('close')">Cancel</v-btn>
- <v-btn color="primary" @click="saveData">Save</v-btn>
- </div>
- </v-card>
+ <v-dialog :value="editDialog" @input="setEditDialog" max-width="600px">
+ <v-card>
+ <div class="input-fields">
+ <v-text-field v-model="name" label="Name" box color="primary"></v-text-field>
+ </div>
+ <div class="action-buttons text-xs-right">
+ <v-btn flat @click="$emit('close')">Cancel</v-btn>
+ <v-btn color="primary" @click="saveData">Save</v-btn>
+ </div>
+ </v-card>
+ </v-dialog>
</template>
<script>
+import { mapState, mapMutations } from 'vuex'
export default {
- name: 'GroupModuleEdit',
+ name: 'GroupModuleEditDialog',
props: ['id', 'client'],
data () {
return {
name: ''
}
},
- watch: {
- id () { this.loadData() }
+ computed: {
+ ...mapState('groups', ['editDialog'])
},
methods: {
+ ...mapMutations('groups', ['setEditDialog']),
loadData () {
if (!this.id) return
if (this.client) {
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index f427275..a9976f9 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -68,8 +68,8 @@ export default {
},
methods: {
loadGroup (group) {
- this.$store.dispatch('groups/loadGroup', {
- tabIndex: this.tabIndex + 1, id: group.id, name: group.name
+ this.$store.dispatch('groups/loadGroupInChain', {
+ tabIndex: this.tabIndex + 1, id: group.id, name: group.name, switchTab: true
})
}
}
diff --git a/webapp/src/components/SettingsModule.vue b/webapp/src/components/SettingsModule.vue
index dc20d71..262c2a2 100644
--- a/webapp/src/components/SettingsModule.vue
+++ b/webapp/src/components/SettingsModule.vue
@@ -2,11 +2,13 @@
{
"en": {
"darkTheme": "Dark Theme",
+ "coloredTabs": "Colored tabpanels",
"clipped": "Show menu under the top bar",
"mini": "Show icons in collapsed menu"
},
"de": {
"darkTheme": "Dunkles Design",
+ "coloredTabs": "Tab-Panels einfärben",
"clipped": "Menü an die Hauptleiste andocken",
"mini": "Symbole im eingeklappten Menü anzeigen"
}
@@ -30,6 +32,11 @@
color="primary"
></v-switch>
<v-switch
+ :label="$t('coloredTabs')"
+ v-model="coloredTabs"
+ color="primary"
+ ></v-switch>
+ <v-switch
:label="$t('clipped')"
v-model="clipped"
color="primary"
@@ -64,6 +71,10 @@ export default {
get () { return this.$store.state.dark },
set (value) { this.$store.commit('setDark', value) }
},
+ coloredTabs: {
+ get () { return this.$store.state.coloredTabs },
+ set (value) { this.$store.commit('setColoredTabs', value) }
+ },
clipped: {
get () { return this.$store.state.clipped },
set (value) { this.$store.commit('setClipped', value) }
diff --git a/webapp/src/store/global.js b/webapp/src/store/global.js
index 366b0fb..0b52b12 100644
--- a/webapp/src/store/global.js
+++ b/webapp/src/store/global.js
@@ -2,33 +2,26 @@ export default {
state: {
locale: localStorage.getItem('locale') || 'en',
dark: localStorage.getItem('dark') !== 'false',
+ coloredTabs: localStorage.getItem('coloredTabs') === 'true',
clipped: localStorage.getItem('clipped') !== 'false',
mini: localStorage.getItem('mini') !== 'false',
snackbars: []
},
getters: {
+ tabsDark: state => state.dark || state.coloredTabs,
+ tabsColor: state => state.coloredTabs ? 'primary' : '',
+ tabsSliderColor: state => state.coloredTabs ? 'white' : 'primary',
nextSnackbar (state) {
if (state.snackbars) return state.snackbars[0]
else return ''
- }
+ },
},
mutations: {
- setLocale (state, value) {
- state.locale = value
- localStorage.setItem('locale', value)
- },
- setDark (state, value) {
- state.dark = value
- localStorage.setItem('dark', value)
- },
- setClipped (state, value) {
- state.clipped = value
- localStorage.setItem('clipped', value)
- },
- setMini (state, value) {
- state.mini = value
- localStorage.setItem('mini', value)
- },
+ setLocale: (state, value) => { state.locale = value; localStorage.setItem('locale', value) },
+ setDark: (state, value) => { state.dark = value; localStorage.setItem('dark', value) },
+ setColoredTabs: (state, value) => { state.coloredTabs = value; localStorage.setItem('coloredTabs', value) },
+ setClipped: (state, value) => { state.clipped = value; localStorage.setItem('clipped', value) },
+ setMini: (state, value) => { state.mini = value; localStorage.setItem('mini', value) },
shiftSnackbars (state) {
state.snackbars.shift()
},
diff --git a/webapp/src/store/groups.js b/webapp/src/store/groups.js
index fca5358..c5ecce4 100644
--- a/webapp/src/store/groups.js
+++ b/webapp/src/store/groups.js
@@ -4,30 +4,48 @@ export default {
namespaced: true,
state: {
groupChain: [],
- activeTab: 0
+ activeTab: 0,
+ editGroupDialog: false,
+ editGroup: null,
},
mutations: {
updateActiveTab (state, tabIndex) {
state.activeTab = tabIndex
},
- addGroup (state, data) {
- if (state.groupChain.length <= data.tabIndex || state.groupChain[data.tabIndex].id !== data.group.id) {
- state.groupChain = state.groupChain.slice(0, data.tabIndex)
- state.groupChain.push(data.group)
+ setGroupInChain (state, { tabIndex, group }) {
+ if (state.groupChain.length <= tabIndex || state.groupChain[tabIndex].id !== group.id) {
+ state.groupChain = state.groupChain.slice(0, tabIndex)
+ state.groupChain.push(group)
}
- state.activeTab = data.tabIndex
+ },
+ openEditGroupDialog (state, group) {
+ state.editGroupDialog = true
+ state.editGroup = group
+ },
+ closeEditGroupDialog (state) {
+ state.editGroupDialog = false
+ state.editGroup = null
}
},
actions: {
- loadGroup (context, data) {
- var getSubGroups = axios('/api/groups?action=getSubGroups&id=' + data.id)
- var getClients = axios('/api/groups?action=getClients&id=' + data.id)
+ loadGroupInChain (context, { id, name, tabIndex, switchTab }) {
+ var getSubGroups = axios.get('/api/groups?action=getSubGroups&id=' + id)
+ var getClients = axios.get('/api/groups?action=getClients&id=' + id)
axios.all([getSubGroups, getClients]).then(axios.spread((groupRespsonse, clientResponse) => {
- var group = { id: data.id, name: data.name }
- group.subGroups = groupRespsonse.data
- group.clients = clientResponse.data
- context.commit('addGroup', { group: group, tabIndex: data.tabIndex })
+ var group = { id: id, name: name, subGroups: groupRespsonse.data, clients: clientResponse.data }
+ context.commit('setGroupInChain', { group: group, tabIndex: tabIndex })
+ if (switchTab) context.commit('updateActiveTab', tabIndex)
}))
+ },
+ editGroup (context, { id, name }) {
+ axios.get('/api/groups?action=getParents&id=' + id).then(res => {
+ context.commit('openEditGroupDialog', { id: id, name: name, parents: res.data })
+ })
+ },
+ saveGroup (context) {
+ axios.post('/api/groups?action=update&id=' + context.state.editGroup.id).then(res => {
+ context.commit('closeEditGroupDialog')
+ })
}
}
}