summaryrefslogtreecommitdiffstats
path: root/webapp
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
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')
-rw-r--r--webapp/src/components/BackendModule.vue116
-rw-r--r--webapp/src/components/BackendModuleEdit.vue16
-rw-r--r--webapp/src/components/BackendModuleTable.vue158
-rw-r--r--webapp/src/store/backends.js14
4 files changed, 110 insertions, 194 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')
}
}
diff --git a/webapp/src/components/BackendModuleEdit.vue b/webapp/src/components/BackendModuleEdit.vue
index 9c392d5..9d27fbc 100644
--- a/webapp/src/components/BackendModuleEdit.vue
+++ b/webapp/src/components/BackendModuleEdit.vue
@@ -2,10 +2,12 @@
{
"en": {
"inputCredentials": "Login credentials",
+ "backendCreated": "Backend was successfully created.",
"backendName": "Backend name",
"backendEmptyError": "This field can not be empty.",
"backendType": "Backend type",
"backendtypeEmptyError": "Please choose a backend type.",
+ "backendSaved": "Backend was successfully saved.",
"stepperOptional": "optional",
"pending": "pending",
"progress": "in progress ...",
@@ -15,10 +17,12 @@
},
"de": {
"inputCredentials": "Anmeldedaten",
+ "backendCreated": "Backend wurde erfolgreich erstellt.",
"backendName": "Backend Name",
"backendEmptyError": "Dieses Feld darf nicht leer sein.",
"backendType": "Backend Typ",
"backendtypeEmptyError": "Bitte wähle einen Backendtyp aus.",
+ "backendSaved": "Backend wurde erfolgreich gespeichert.",
"stepperOptional": "Optional",
"pending": "nicht getestet",
"progress": "test läuft ...",
@@ -115,7 +119,7 @@
<v-btn flat @click.native="$store.commit('backends/setEdit', 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" @click="submit" v-show="step == 3" class="primary" raised>{{ $t('submit') }}</v-btn>
+ <v-btn type="submit" @click="submit" v-show="step == 3" class="primary" raised>{{ backendId ? $t('save') : $t('create') }}</v-btn>
</v-flex>
</v-card-actions>
</v-card>
@@ -154,15 +158,11 @@ export default {
type: this.backendType,
credentials: this.credentials
}).then(response => {
- // TODO: Add backend saved successfull msg.
- console.log('TODO: Implement snackbar and print backend added successfully msg.')
+ this.$snackbar({ color: 'success', text: this.backendId ? this.$t('backendSaved') : this.$t('backendUpdated') })
this.$store.dispatch('backends/loadData')
this.$store.commit('backends/setEdit', false)
}).catch(error => {
- console.log(error)
- // if (error.response.data.status === '') {
- // }
- // this.$refs.form.validate()
+ this.$snackbar({ color: 'success', text: error.response })
})
}
},
@@ -234,7 +234,7 @@ export default {
} else {
this.statusColor = 'error--text'
this.statusLabel = this.$t('error')
- this.$store.commit('newSnackbar', response.data.error)
+ this.$snackbar({ color: 'error', text: response.data.error })
}
// Set item.loading = false to end the loading animation.
this.loading = false
diff --git a/webapp/src/components/BackendModuleTable.vue b/webapp/src/components/BackendModuleTable.vue
deleted file mode 100644
index efeb260..0000000
--- a/webapp/src/components/BackendModuleTable.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<i18n>
-{
- "en": {
- "addBackendBtn": "Add Backend",
- "backendId": "id",
- "backendName": "name",
- "backendType": "type",
- "removeBackend": "Remove one backend | Remove {0} backends",
- "checkConnection": "Check one connection | Check {0} connections",
- "name": "Name",
- "type": "Type",
- "id": "ID"
- },
- "de": {
- "addBackendBtn": "Backend hinzufügen",
- "backendId": "id",
- "backendName": "name",
- "backendType": "typ",
- "removeBackend": "Entferne ein Backend | Entferne {0} Backends",
- "checkConnection": "Überprüfe eine Verbindung | Überprüfe {0} Verbindungen",
- "name": "Name",
- "type": "Type",
- "id": "ID"
- }
-}
-</i18n>
-
-<template>
- <div>
- <v-card>
- <component-search-table
- :headers="headers"
- :items="backends"
- item-key="id"
- hide-actions
- select-all
- :value="selected"
- @input="$store.commit('backends/setSelected', $event)"
- >
- <template slot="items" slot-scope="props">
- <tr :style="props.color" @click="props.data.selected = !props.data.selected">
- <td>
- <v-checkbox
- color="primary"
- v-model="props.data.selected"
- hide-details
- @click.native.stop
- ></v-checkbox>
- </td>
- <td>{{ props.data.item.id }}</td>
- <td>{{ props.data.item.name }}</td>
- <td>{{ props.data.item.type }}</td>
- <td>
- <v-layout>
- <v-btn
- flat
- icon
- :loading="props.data.item.loading"
- :disabled="props.data.item.loading"
- :color="props.data.item.connection"
- @click.stop="checkConnection(props.data.item)"
- >
- <v-icon>cached</v-icon>
- </v-btn>
- <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editSync', props.data.item.id)">
- <v-icon>settings_ethernet</v-icon>
- </v-btn>
- <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editBackend', props.data.item.id)">
- <v-icon>edit</v-icon>
- </v-btn>
- </v-layout>
- </td>
- </tr>
- </template>
- </component-search-table>
- </v-card>
- <div class="text-xs-right">
- <v-btn color="primary" flat @click="checkConnections(selected)" :disabled="selected.length === 0">
- <v-icon left>cached</v-icon>{{ $tc('checkConnection', selected.length, [selected.length]) }}
- </v-btn>
- <v-btn color="error" flat @click="$store.commit('backends/setDialog', true)" :disabled="selected.length === 0">
- <v-icon left>remove_circle_outline</v-icon>{{ $tc('removeBackend', 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('addBackendBtn') }}
- </v-btn>
- </div>
- </div>
-</template>
-<script>
-import { mapState } from 'vuex'
-import ComponentSearchTable from '@/components/ComponentSearchTable'
-
-export default {
- name: 'BackendModuleTable',
- components: {
- ComponentSearchTable
- },
- data () {
- return {
- dialog: false,
- backendName: '',
- backendId: '',
- backendType: '',
- test: false,
- edit: false
- }
- },
- 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.$store.commit('newSnackbar', 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)
- })
- }
- },
- watch: {
- },
- computed: {
- ...mapState('backends', ['selected', 'backends']),
- headers () {
- return [
- { text: this.$t('id'), value: 'id' },
- { text: this.$t('name'), value: 'name', width: '10000px' },
- { text: this.$t('type'), value: 'type' },
- { sortable: false }
- ]
- }
- },
- created () {
- this.$store.dispatch('backends/loadData')
- }
-}
-</script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>
diff --git a/webapp/src/store/backends.js b/webapp/src/store/backends.js
index d832b6e..43be818 100644
--- a/webapp/src/store/backends.js
+++ b/webapp/src/store/backends.js
@@ -6,7 +6,6 @@ export default {
backends: [],
dialog: false,
edit: false,
- selected: [],
backendId: '',
sync: false
},
@@ -14,9 +13,6 @@ export default {
setDialog (state, value) {
state.dialog = value
},
- setSelected (state, value) {
- state.selected = value
- },
setBackends (state, value) {
state.backends = value
},
@@ -36,16 +32,6 @@ export default {
}
},
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/delete', {
- id: filteredArray
- }).then(response => {
- context.dispatch('loadData')
- context.commit('setSelected', [])
- })
- },
loadData (context) {
axios.get('/api/backends').then(response => {
// Needed for initializing the diffrent dynamic loading buttons.