summaryrefslogtreecommitdiffstats
path: root/webapp/src
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src')
-rw-r--r--webapp/src/components/BackendModule.vue76
-rw-r--r--webapp/src/components/BackendModuleEdit.vue7
-rw-r--r--webapp/src/components/BackendModuleTable.vue66
-rw-r--r--webapp/src/store/backends.js54
-rw-r--r--webapp/src/store/index.js4
5 files changed, 121 insertions, 86 deletions
diff --git a/webapp/src/components/BackendModule.vue b/webapp/src/components/BackendModule.vue
index 32fef57..71ba02f 100644
--- a/webapp/src/components/BackendModule.vue
+++ b/webapp/src/components/BackendModule.vue
@@ -2,48 +2,65 @@
{
"en": {
"delete-are-you-sure": "Are you sure you want to delete this backend? | Are you sure you want to delete those backends?",
- "delete-backend": "Delete {0} backend | Delete {0} backends"
+ "delete-backend": "Delete {0} backend | Delete {0} backends",
+ "backends": "Backends"
},
"de": {
"delete-are-you-sure": "Sind sie sicher, dass sie dieses Backend Löschen wollen? | Sind sie sicher, dass sie diese Backends Löschen wollen?",
- "delete-backend": "Lösche {0} Backend | Delete {0} Backends"
+ "delete-backend": "Lösche {0} Backend | Delete {0} Backends",
+ "backends": "Backends"
}
}
</i18n>
<template>
- <!--
- <component :is="component" @edit-backend="setEditComponent" @cancel-edit="setTableComponent" :backend-id="backendId"></component>
- -->
- <v-container>
+ <v-container fill-height>
<v-layout>
- <v-flex xl10 offset-xl1 lg12>
- <backend-module-table ref="backendTable" @edit-backend="editBackend" @delete-dialog="openDeleteDialog"/>
+ <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-card>
+ <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
+ v-model="tab"
+ centered
+ >
+ <v-tab>
+ {{ $t('backends') }}
+ </v-tab>
+ </v-tabs>
+ </v-card>
+ <v-tabs-items v-model="tab">
+ <v-tab-item>
+ <v-subheader>{{ $t('backends') }}</v-subheader>
+ <backend-module-table/>
+ </v-tab-item>
+ </v-tabs-items>
</v-flex>
</v-layout>
- <v-dialog v-model="dialog" max-width="50%">
- <backend-module-edit v-if="editDialog" :backendId="backendId" @cancel-edit="dialog = false; backendId = 0" @reload-table="$refs.backendTable.loadData()"/>
-
- <v-card v-if="deleteDialog">
+ <v-dialog
+ v-if="$store.state.backends.dialog"
+ :value="$store.state.backends.dialog"
+ @input="$store.commit('backends/setDialog', { show: $event })"
+ max-width="700px"
+ >
+ <v-card v-if="$store.state.backends.deleteDialog">
<v-card-title primary-title>
<div>
- <div class="headline">{{ $tc('delete-backend', backendsDelete.length, [backendsDelete.length]) }}</div>
- <template v-for="item in backendsDelete">
+ <div class="headline">{{ $tc('delete-backend', selected.length, [selected.length]) }}</div>
+ <template v-for="item in selected">
<span class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }} ({{ item.type }})</span><br :key="item.id">
</template>
</div>
</v-card-title>
<v-card-text>
- {{ $tc('delete-are-you-sure', backendsDelete.length) }}
+ {{ $tc('delete-are-you-sure', selected.length) }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="dialog = false; delDialog = false">{{ $t('cancel') }}</v-btn>
- <v-btn color="error" @click="dialog = false; delDialog = false; $refs.backendTable.deleteBackends()">{{ $t('delete') }}</v-btn>
+ <v-btn flat="flat" @click="$store.commit('backends/setDialog', { show: false, del: true })">{{ $t('cancel') }}</v-btn>
+ <v-btn color="error" @click="$store.commit('backends/setDialog', { show: false }); $store.dispatch('backends/deleteSelectedBackends')">{{ $t('delete') }}</v-btn>
</v-card-actions>
</v-card>
-
+ <backend-module-edit v-else :backendId="$store.state.backends.backendId"/>
</v-dialog>
</v-container>
@@ -52,6 +69,7 @@
<script>
import BackendModuleTable from '@/components/BackendModuleTable'
import BackendModuleEdit from '@/components/BackendModuleEdit'
+import { mapState, mapGetters } from 'vuex'
export default {
name: 'BackendModule',
@@ -62,30 +80,14 @@ export default {
data () {
return {
component: 'BackendModuleTable',
- backendId: 0,
- dialog: false,
- delDialog: false,
- backendsDelete: []
+ tab: ''
}
},
methods: {
- editBackend (id) {
- this.backendId = id
- this.dialog = true
- },
- openDeleteDialog (selected) {
- this.dialog = true
- this.delDialog = true
- this.backendsDelete = selected
- }
},
computed: {
- deleteDialog: function () {
- return this.dialog && this.delDialog
- },
- editDialog: function () {
- return this.dialog && !this.delDialog
- }
+ ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
+ ...mapState('backends', ['selected'])
},
beforeMount () {
}
diff --git a/webapp/src/components/BackendModuleEdit.vue b/webapp/src/components/BackendModuleEdit.vue
index 663c6b0..90045f4 100644
--- a/webapp/src/components/BackendModuleEdit.vue
+++ b/webapp/src/components/BackendModuleEdit.vue
@@ -89,6 +89,7 @@
v-model="element.value"
:label="element.name"
:key="element.name"
+ color="primary"
></v-switch>
<v-select
offset-y
@@ -108,7 +109,7 @@
<v-divider></v-divider>
<v-layout>
<v-flex xl10 offset-xl1 lg12 text-xs-right>
- <v-btn flat @click.native="$emit('cancel-edit')">{{ $t('cancel') }}</v-btn>
+ <v-btn flat @click.native="$store.commit('backends/setDialog', { show: false })">{{ $t('cancel') }}</v-btn>
<v-btn color="primary" v-show="step == 1" @click.native="completeStepOne()">{{ $t('continue') }}</v-btn>
<v-btn color="primary" v-show="step == 2" @click.native="completeStepTwo()">{{ $t('continue') }}</v-btn>
<v-btn type="submit" v-show="step == 3" class="primary" raised>{{ $t('submit') }}</v-btn>
@@ -152,8 +153,8 @@ export default {
}).then(response => {
// TODO: Add backend saved successfull msg.
console.log('TODO: Implement snackbar and print backend added successfully msg.')
- this.$emit('reload-table')
- this.$emit('cancel-edit')
+ this.$store.dispatch('backends/loadData')
+ this.$store.commit('backends/setDialog', { show: false })
}).catch(error => {
console.log(error)
// if (error.response.data.status === '') {
diff --git a/webapp/src/components/BackendModuleTable.vue b/webapp/src/components/BackendModuleTable.vue
index af652fb..2ca15b3 100644
--- a/webapp/src/components/BackendModuleTable.vue
+++ b/webapp/src/components/BackendModuleTable.vue
@@ -25,11 +25,12 @@
<v-data-table
class="group-table"
:headers="headers"
- :items="items"
+ :items="backends"
item-key="id"
hide-actions
select-all
- v-model="selected"
+ :value="selected"
+ @input="$store.commit('backends/setSelected', $event)"
>
<template slot="items" slot-scope="props">
<tr @click="props.selected = !props.selected">
@@ -56,7 +57,7 @@
>
<v-icon>cached</v-icon>
</v-btn>
- <v-btn flat icon color="primary" @click.stop="$emit('edit-backend', props.item.id)">
+ <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editBackend', props.item.id)">
<v-icon>edit</v-icon>
</v-btn>
</v-layout>
@@ -65,28 +66,26 @@
</template>
</v-data-table>
</v-card>
-
- <v-layout>
- <v-flex xl10 offset-xl1 lg12 text-xs-right>
- <v-btn color="primary" flat @click="checkConnections(selected)">
- <v-icon left>remove_circle_outline</v-icon>{{ $tc('check-connection', this.selected.length, [this.selected.length]) }}
- </v-btn>
- <v-btn color="error" flat @click="$emit('delete-dialog', selected)"><!-- @click="deleteBackends(selected)"-->
- <v-icon left>remove_circle_outline</v-icon>{{ $tc('delete-backend', this.selected.length, [this.selected.length]) }}
- </v-btn>
- <v-btn color="success" flat @click="$emit('edit-backend', 0)">
- <v-icon left>add_circle_outline</v-icon>{{ $t('add-backend-btn') }}
- </v-btn>
- </v-flex>
- </v-layout>
+ <div class="text-xs-right">
+ <v-btn color="primary" flat @click="checkConnections(selected)">
+ <v-icon left>cached</v-icon>{{ $tc('check-connection', selected.length, [selected.length]) }}
+ </v-btn>
+ <v-btn color="error" flat @click="$store.commit('backends/setDialog', { show: true, del: true } )"><!-- @click="deleteBackends(selected)"-->
+ <v-icon left>remove_circle_outline</v-icon>{{ $tc('delete-backend', selected.length, [selected.length]) }}
+ </v-btn>
+ <v-btn color="success" flat @click="$store.commit('backends/editBackend', 0)">
+ <v-icon left>add_circle_outline</v-icon>{{ $t('add-backend-btn') }}
+ </v-btn>
+ </div>
</div>
</template>
<script>
+import { mapState } from 'vuex'
+
export default {
name: 'BackendModuleTable',
data () {
return {
- items: [],
dialog: false,
backendName: '',
backendId: '',
@@ -97,34 +96,10 @@ export default {
{ text: 'Name', value: 'name', width: '10000px' },
{ text: 'Type', value: 'type' },
{ sortable: false }
- ],
- selected: []
+ ]
}
},
methods: {
- loadData () {
- this.$http('/api/backends/getBackendList').then(response => {
- // Needed for initializing the diffrent dynamic loading buttons.
- var tmpItems = response.data
- tmpItems.forEach(function (item) {
- // Variable for the loading animation.
- item.loading = false
- // Variable for the test connection color
- item.connection = 'primary'
- })
- this.items = tmpItems
- })
- },
- deleteBackends () {
- // Filter selected array to get a list of ids.
- const filteredArray = this.selected.map(x => x.id)
- this.$http.post('/api/backends/deleteBackends', {
- id: filteredArray
- }).then(response => {
- this.loadData()
- this.selected = []
- })
- },
checkConnection (item) {
// Set to start the loading animation.
item.loading = true
@@ -156,9 +131,10 @@ export default {
watch: {
},
computed: {
+ ...mapState('backends', ['selected', 'backends'])
},
- beforeMount () {
- this.loadData()
+ created () {
+ this.$store.dispatch('backends/loadData')
}
}
</script>
diff --git a/webapp/src/store/backends.js b/webapp/src/store/backends.js
new file mode 100644
index 0000000..bc99669
--- /dev/null
+++ b/webapp/src/store/backends.js
@@ -0,0 +1,54 @@
+import axios from 'axios'
+
+export default {
+ namespaced: true,
+ state: {
+ backends: [],
+ dialog: false,
+ deleteDialog: false,
+ selected: [],
+ backendId: ''
+ },
+ mutations: {
+ setDialog (state, value) {
+ state.dialog = value.show
+ state.deleteDialog = value.del
+ },
+ setSelected (state, value) {
+ state.selected = value
+ },
+ setBackends (state, value) {
+ state.backends = value
+ },
+ editBackend (state, value) {
+ state.backendId = value
+ state.dialog = true
+ state.deleteDialog = false
+ }
+ },
+ actions: {
+ deleteSelectedBackends (context) {
+ // Filter selected array to get a list of ids.
+ const filteredArray = context.state.selected.map(x => x.id)
+ axios.post('/api/backends/deleteBackends', {
+ id: filteredArray
+ }).then(response => {
+ context.dispatch('loadData')
+ context.commit('setSelected', [])
+ })
+ },
+ loadData (context) {
+ axios.get('/api/backends/getBackendList').then(response => {
+ // Needed for initializing the diffrent dynamic loading buttons.
+ var tmpItems = response.data
+ tmpItems.forEach(function (item) {
+ // Variable for the loading animation.
+ item.loading = false
+ // Variable for the test connection color
+ item.connection = 'primary'
+ })
+ context.commit('setBackends', tmpItems)
+ })
+ }
+ }
+}
diff --git a/webapp/src/store/index.js b/webapp/src/store/index.js
index 435a317..afaa1b4 100644
--- a/webapp/src/store/index.js
+++ b/webapp/src/store/index.js
@@ -2,11 +2,13 @@ import Vue from 'vue'
import Vuex from 'vuex'
import globalStore from '@/store/global'
import groups from '@/store/groups'
+import backends from '@/store/backends'
Vue.use(Vuex)
globalStore.modules = {
- groups
+ groups,
+ backends
}
export default new Vuex.Store(globalStore)