summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModule.vue
diff options
context:
space:
mode:
authorJannik Schönartz2018-07-19 05:42:25 +0200
committerJannik Schönartz2018-07-19 05:42:25 +0200
commit478adf83cb6bdc37bc2cc6086920018f9a8dd7f5 (patch)
treedd163790e405339b6607f6624ab6eb82901b3ae7 /webapp/src/components/BackendModule.vue
parent[webapp/dashboard] added devMode (diff)
downloadbas-478adf83cb6bdc37bc2cc6086920018f9a8dd7f5.tar.gz
bas-478adf83cb6bdc37bc2cc6086920018f9a8dd7f5.tar.xz
bas-478adf83cb6bdc37bc2cc6086920018f9a8dd7f5.zip
[webapp/external-backends] Reworked list into data-table (sorting, multiple selection). Added checkConnection functionality.
Diffstat (limited to 'webapp/src/components/BackendModule.vue')
-rw-r--r--webapp/src/components/BackendModule.vue62
1 files changed, 55 insertions, 7 deletions
diff --git a/webapp/src/components/BackendModule.vue b/webapp/src/components/BackendModule.vue
index 85a7a6f..32fef57 100644
--- a/webapp/src/components/BackendModule.vue
+++ b/webapp/src/components/BackendModule.vue
@@ -1,14 +1,52 @@
<i18n>
{
"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"
},
"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"
}
}
</i18n>
<template>
+ <!--
<component :is="component" @edit-backend="setEditComponent" @cancel-edit="setTableComponent" :backend-id="backendId"></component>
+ -->
+ <v-container>
+ <v-layout>
+ <v-flex xl10 offset-xl1 lg12>
+ <backend-module-table ref="backendTable" @edit-backend="editBackend" @delete-dialog="openDeleteDialog"/>
+ </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-card-title primary-title>
+ <div>
+ <div class="headline">{{ $tc('delete-backend', backendsDelete.length, [backendsDelete.length]) }}</div>
+ <template v-for="item in backendsDelete">
+ <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) }}
+ </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-card-actions>
+ </v-card>
+
+ </v-dialog>
+
+ </v-container>
</template>
<script>
@@ -24,19 +62,30 @@ export default {
data () {
return {
component: 'BackendModuleTable',
- backendId: 0
+ backendId: 0,
+ dialog: false,
+ delDialog: false,
+ backendsDelete: []
}
},
methods: {
- setEditComponent (value) {
- this.component = 'BackendModuleEdit'
- this.backendId = value
+ editBackend (id) {
+ this.backendId = id
+ this.dialog = true
},
- setTableComponent () {
- this.component = 'BackendModuleTable'
+ 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
+ }
},
beforeMount () {
}
@@ -46,5 +95,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
</style>