summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModuleSync.vue
diff options
context:
space:
mode:
authorJannik Schönartz2018-08-02 23:18:05 +0200
committerJannik Schönartz2018-08-02 23:18:05 +0200
commit5fd895d5c956fee295f96217c4f8b903c4e55c8e (patch)
tree1ed1f9ac6003f16ff4ffd1426c123b865e4cecb2 /webapp/src/components/BackendModuleSync.vue
parent[server/external-backends] Added sync settings for the backends. Method for g... (diff)
downloadbas-5fd895d5c956fee295f96217c4f8b903c4e55c8e.tar.gz
bas-5fd895d5c956fee295f96217c4f8b903c4e55c8e.tar.xz
bas-5fd895d5c956fee295f96217c4f8b903c4e55c8e.zip
[server/external-backends] Added sync settings for the backends. Groups and clients can be defined there.
Diffstat (limited to 'webapp/src/components/BackendModuleSync.vue')
-rw-r--r--webapp/src/components/BackendModuleSync.vue185
1 files changed, 185 insertions, 0 deletions
diff --git a/webapp/src/components/BackendModuleSync.vue b/webapp/src/components/BackendModuleSync.vue
new file mode 100644
index 0000000..7d259be
--- /dev/null
+++ b/webapp/src/components/BackendModuleSync.vue
@@ -0,0 +1,185 @@
+<i18n>
+{
+ "en": {
+ },
+ "de": {
+ }
+}
+</i18n>
+<template>
+ <v-dialog
+ v-if="$store.state.backends.sync"
+ :value="$store.state.backends.sync"
+ @input="$store.commit('backends/setSync', $event)"
+ max-width="700px"
+ scrollable
+ >
+ <v-card>
+ <v-card-title class="elevation-3">
+ <div class="headline">{{ $t('sync-options') }}</div>
+ </v-card-title>
+ <v-card-text style="height: 500px;">
+ <v-select :items="[ 'todo' ]" :label="$t('sync-option')" offset-y></v-select>
+ <v-layout row>
+ <v-flex style="width: 50%">
+ <v-combobox v-if="objectTypes.length === 0"
+ v-model="cbxGroups"
+ :items="clientFilteredTypes"
+ item-text="title"
+ item-value="id"
+ small-chips
+ multiple
+ :label="$t('groups')"
+ :search-input.sync="searchGroups"
+ hide-selected
+ deletable-chips
+ return-object
+ >
+ <template slot="no-data">
+ <v-list-tile>
+ <v-list-tile-content>
+ <v-list-tile-title>
+ No results matching "<strong>{{ searchGroups }}</strong>". Press <kbd>enter</kbd> to create a new one
+ </v-list-tile-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </template>
+ </v-combobox>
+ <v-autocomplete v-else
+ v-model="cbxGroups"
+ :items="clientFilteredTypes"
+ item-text="title"
+ item-value="id"
+ small-chips
+ multiple
+ :label="$t('groups')"
+ :search-input.sync="searchGroups"
+ hide-selected
+ deletable-chips
+ return-object
+ ></v-autocomplete>
+ </v-flex>
+ <v-flex style="margin-left: 48px; width: 50%">
+ <v-combobox v-if="objectTypes.length === 0"
+ v-model="cbxClients"
+ :items="groupFilteredTypes"
+ item-text="title"
+ item-value="id"
+ small-chips
+ multiple
+ :label="$t('clients')"
+ hide-selected
+ deletable-chips
+ return-object
+ >
+ <template slot="no-data">
+ <v-list-tile>
+ <v-list-tile-content>
+ <v-list-tile-title>
+ No results matching "<strong>{{ searchClients }}</strong>". Press <kbd>enter</kbd> to create a new one
+ </v-list-tile-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </template>
+ </v-combobox>
+ <v-autocomplete v-else
+ v-model="cbxClients"
+ :items="groupFilteredTypes"
+ item-text="title"
+ item-value="id"
+ small-chips
+ multiple
+ :label="$t('clients')"
+ hide-selected
+ deletable-chips
+ return-object
+ ></v-autocomplete>
+ </v-flex>
+ </v-layout>
+ </v-card-text>
+ <v-divider></v-divider>
+ <v-card-actions>
+ <v-flex xl10 offset-xl2 lg12 text-xs-right>
+ <v-btn flat @click.native="$store.commit('backends/setSync', false)">{{ $t('cancel') }}</v-btn>
+ <v-btn @click.native="save" class="primary" raised>{{ $t('save') }}</v-btn>
+ </v-flex>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+</template>
+
+<script>
+
+export default {
+ props: ['backendId'],
+ components: {
+ },
+ data () {
+ return {
+ groupHeaders: [
+ { text: 'Groups', value: 'groups' }
+ ],
+ clientHeaders: [
+ { text: 'Clients', value: 'clients' }
+ ],
+ objectTypes: [],
+ searchGroups: '',
+ searchClients: '',
+ cbxGroups: null,
+ cbxClients: null
+ }
+ },
+ methods: {
+ save (event) {
+ this.$http.post('/api/backends/saveObjectTypes', {
+ id: this.backendId,
+ groups: this.cbxGroups,
+ clients: this.cbxClients
+ }).then(response => {
+ // TODO: Add saved successfull msg.
+ this.$store.commit('backends/setSync', false)
+ }).catch(error => {
+ console.log(error)
+ })
+ }
+ },
+ computed: {
+ groupFilteredTypes () {
+ var types = this.objectTypes
+ types = types.filter(e => {
+ const g = this.cbxGroups.find(x => x.id === e.id && x.title === e.title)
+ return !g
+ })
+ return types
+ },
+ clientFilteredTypes () {
+ var types = this.objectTypes
+ types = types.filter(e => {
+ const c = this.cbxClients.find(y => y.id === e.id && y.title === e.title)
+ return !c
+ })
+ return types
+ }
+ },
+ beforeMount () {
+ },
+ watch: {
+ },
+ created () {
+ // Load the object types from the backend.
+ this.$http('/api/backends/getObjectTypes?id=' + this.backendId).then(response => {
+ this.objectTypes = response.data
+ })
+
+ this.$http('/api/backends/getObjectTypesById?id=' + this.backendId).then(response => {
+ this.cbxGroups = response.data.groups
+ this.cbxClients = response.data.clients
+ })
+ }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>