summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModule.vue
diff options
context:
space:
mode:
authorJannik Schönartz2019-02-28 04:56:38 +0100
committerJannik Schönartz2019-02-28 04:56:38 +0100
commit0f8fa2a1f704701bde374b5c3c5bd2accd5bfbb4 (patch)
tree64ca60c98197cf9083fb9290558f1fc411ac2048 /webapp/src/components/BackendModule.vue
parent[webapp] fix toolbar height when resizing (diff)
downloadbas-0f8fa2a1f704701bde374b5c3c5bd2accd5bfbb4.tar.gz
bas-0f8fa2a1f704701bde374b5c3c5bd2accd5bfbb4.tar.xz
bas-0f8fa2a1f704701bde374b5c3c5bd2accd5bfbb4.zip
[webapp/backends] Rework to the new DataTable
Diffstat (limited to 'webapp/src/components/BackendModule.vue')
-rw-r--r--webapp/src/components/BackendModule.vue116
1 files changed, 102 insertions, 14 deletions
diff --git a/webapp/src/components/BackendModule.vue b/webapp/src/components/BackendModule.vue
index ba30818..39daedb 100644
--- a/webapp/src/components/BackendModule.vue
+++ b/webapp/src/components/BackendModule.vue
@@ -1,14 +1,30 @@
<i18n>
{
"en": {
+ "addBackendBtn": "Add Backend",
+ "backendId": "id",
+ "backendName": "name",
+ "backends": "Backends",
+ "backendType": "type",
+ "checkConnection": "Check one connection | Check {0} connections",
"deleteAreYouSure": "Are you sure you want to delete this backend? | Are you sure you want to delete those backends?",
+ "id": "ID",
+ "name": "Name",
"removeBackend": "Remove one backend | Remove {0} backends",
- "backends": "Backends"
+ "type": "Type"
},
"de": {
+ "addBackendBtn": "Backend hinzufügen",
+ "backends": "Backends",
+ "backendId": "id",
+ "backendName": "name",
+ "backendType": "typ",
+ "checkConnection": "Überprüfe eine Verbindung | Überprüfe {0} Verbindungen",
"deleteAreYouSure": "Sind Sie sicher, dass sie dieses Backend Löschen wollen? | Sind sie sicher, dass sie diese Backends Löschen wollen?",
+ "id": "ID",
+ "name": "Name",
"removeBackend": "Entferne ein Backend | Entferne {0} Backends",
- "backends": "Backends"
+ "type": "Type"
}
}
</i18n>
@@ -31,7 +47,33 @@
<v-tabs-items v-model="tab">
<v-tab-item>
<v-subheader>{{ $t('backends') }}</v-subheader>
- <backend-module-table/>
+
+ <v-card>
+ <data-table v-model="selectedBackends" :headers="headers" :items="backends" @dblclick="$store.commit('backends/editBackend', $event.id)">
+ <div slot="action" slot-scope="row" style="text-align: right">
+ <v-btn flat icon :loading="row.item.loading"
+ :disabled="row.item.loading"
+ :color="row.item.connection"
+ @click.stop="checkConnection(row.item)"
+ ><v-icon>cached</v-icon></v-btn>
+ <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editSync', row.item.id)"><v-icon>settings_ethernet</v-icon></v-btn>
+ <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editBackend', row.item.id)"><v-icon>edit</v-icon></v-btn>
+ </div>
+ </data-table>
+ </v-card>
+
+ <div class="text-xs-right">
+ <v-btn color="primary" flat @click="checkConnections(selectedBackends)" :disabled="selectedBackends.length === 0">
+ <v-icon left>cached</v-icon>{{ $tc('checkConnection', selectedBackends.length, [selectedBackends.length]) }}
+ </v-btn>
+ <v-btn color="error" flat @click="$store.commit('backends/setDialog', true)" :disabled="selectedBackends.length === 0">
+ <v-icon left>remove_circle_outline</v-icon>{{ $tc('removeBackend', selectedBackends.length, [selectedBackends.length]) }}
+ </v-btn>
+ <v-btn color="success" flat @click="$store.commit('backends/editBackend', 0)">
+ <v-icon left>add_circle_outline</v-icon>{{ $t('addBackendBtn') }}
+ </v-btn>
+ </div>
+
</v-tab-item>
</v-tabs-items>
</v-flex>
@@ -46,12 +88,12 @@
<v-card>
<v-card-title class="elevation-3">
<div>
- <div class="headline">{{ $tc('removeBackend', selected.length, [selected.length]) }}</div>
+ <div class="headline">{{ $tc('removeBackend', selectedBackends.length, [selectedBackends.length]) }}</div>
</div>
</v-card-title>
<v-card-text>
- {{ $tc('deleteAreYouSure', selected.length) }}
- <template v-for="item in selected">
+ {{ $tc('deleteAreYouSure', selectedBackends.length) }}
+ <template v-for="item in selectedBackends">
<div class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }} ({{ item.type }})</div>
</template>
</v-card-text>
@@ -59,7 +101,7 @@
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat="flat" @click="$store.commit('backends/setDialog', false)">{{ $t('cancel') }}</v-btn>
- <v-btn color="error" @click="$store.commit('backends/setDialog', false); $store.dispatch('backends/deleteSelectedBackends')">{{ $t('delete') }}</v-btn>
+ <v-btn color="error" @click="$store.commit('backends/setDialog', false); deleteSelectedBackends()">{{ $t('delete') }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
@@ -69,31 +111,77 @@
</template>
<script>
-import BackendModuleTable from '@/components/BackendModuleTable'
import BackendModuleEdit from '@/components/BackendModuleEdit'
import BackendModuleSync from '@/components/BackendModuleSync'
+import DataTable from '@/components/DataTable'
import { mapState, mapGetters } from 'vuex'
export default {
name: 'BackendModule',
components: {
- BackendModuleTable,
BackendModuleEdit,
- BackendModuleSync
+ BackendModuleSync,
+ DataTable
},
data () {
return {
- component: 'BackendModuleTable',
- tab: 0
+ dialog: false,
+ backendName: '',
+ backendId: '',
+ backendType: '',
+ edit: false,
+ selectedBackends: [],
+ tab: 0,
+ headers: [
+ { text: this.$t('id'), key: 'id' },
+ { text: this.$t('name'), key: 'name' },
+ { text: this.$t('type'), key: 'type' },
+ { key: 'action' }
+ ]
}
},
methods: {
+ checkConnection (item) {
+ // Set to start the loading animation.
+ item.loading = true
+ // Test the credential connection.
+ this.$http.post('/api/backends/' + item.id + '/connection', {
+ headers: {
+ 'Cache-Control': 'no-cache'
+ }
+ }).then(response => {
+ if (response.data.success) {
+ // Set the button color to green if success.
+ item.connection = 'success'
+ } else {
+ // Set the button color to red if error.
+ item.connection = 'error'
+ this.$snackbar({ color: 'error', text: response.data.error })
+ }
+ // Set item.loading = false to end the loading animation.
+ item.loading = false
+ })
+ },
+ checkConnections (items) {
+ const tmp = this
+ items.forEach(function (item) {
+ tmp.checkConnection(item)
+ })
+ },
+ async deleteSelectedBackends () {
+ // Filter selected array to get a list of ids.
+ await this.$http.post('/api/backends/delete', {
+ id: this.selectedBackends.map(x => x.id)
+ })
+ this.$store.dispatch('backends/loadData')
+ }
},
computed: {
...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
- ...mapState('backends', ['selected'])
+ ...mapState('backends', ['backends'])
},
- beforeMount () {
+ created () {
+ this.$store.dispatch('backends/loadData')
}
}