summaryrefslogblamecommitdiffstats
path: root/webapp/src/components/BackendModuleSync.vue
blob: 7d259beb95ea46ec70cd42cfa0aec99b66f45756 (plain) (tree)
























































































































































































                                                                                                                          
<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>