summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModule.vue
diff options
context:
space:
mode:
authorJannik Schönartz2018-07-20 06:01:04 +0200
committerJannik Schönartz2018-07-20 06:01:04 +0200
commit42e3165eb42a182cbefe03322fbb46f8da359ac3 (patch)
tree3925abf46ebc961d6daf70d299ef41f0ca7e16d6 /webapp/src/components/BackendModule.vue
parent[webapp/settings] added switch to enable colored tab panels (diff)
downloadbas-42e3165eb42a182cbefe03322fbb46f8da359ac3.tar.gz
bas-42e3165eb42a182cbefe03322fbb46f8da359ac3.tar.xz
bas-42e3165eb42a182cbefe03322fbb46f8da359ac3.zip
[webapp/external-backends] Switched from emits to vuex storage system. Added Tab-Panel for more consistency.
Diffstat (limited to 'webapp/src/components/BackendModule.vue')
-rw-r--r--webapp/src/components/BackendModule.vue76
1 files changed, 39 insertions, 37 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 () {
}