summaryrefslogblamecommitdiffstats
path: root/webapp/src/components/BackendModuleSync.vue
blob: 7edd1a7acf450700759469c9b8a47cfb8e9d9602 (plain) (tree)
1
2
3
4
5
6
7
8
9


         

                                           

         

                                                     




           

                                                      
                     





                                                          
















































































                                                                                                                      





























                                                                                                       

                                                                                                                                               































                                                                                 


                                            

     
          





                                                                                          
 





                                                                                              







                                                                   
<i18n>
{
  "en": {
    "sync-options": "Synchronise Settings",
    "sync-type": "Sync type"
  },
  "de": {
    "sync-options": "Synchronisierungseinstellungen",
    "sync-type": "Synchronisierungstyp"
  }
}
</i18n>
<template>
  <v-dialog
    :value="$store.state.backends.sync"
    @input="$store.commit('backends/setSync', $event)"
    max-width="500px"
    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; padding: 40px">
      <v-select
      :items="syncTypes"
      :label="$t('sync-type')"
      offset-y
      prepend-icon="settings_ethernet"
      ></v-select>
      <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
        prepend-icon="group"
      >
        <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
        prepend-icon="group"
      ></v-autocomplete>
      <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
        prepend-icon="laptop"
      >
        <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
        prepend-icon="laptop"
      ></v-autocomplete>
    </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,
      syncTypes: [ 'Two-Way', 'Upload Only', 'Upload Then Delete', 'Upload Mirror', 'Download Only', 'Download Then Delete', 'Download Mirror']
    }
  },
  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
    },
    sync: function () {
      return this.$store.state.backends.sync
    }
  },
  watch: {
    sync: function (value) {
      if (value) {
        // 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>