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



                                                    
                                                        

                                                          


                                                               





                                                                  


                                                                    




          



















































































                                                                                                        
              




                                                                                                                

               

                




                
                            





                       

                         
                      






                                       





                                                            



                                                      
                                         


                                                                                           
                                    

























                                                                                                    







                                                                                                                   



                        
                                    




                                                            








                                                            







                                      

                            
     

          

   



                                                                   


                  

        
<i18n>
{
  "en": {
    "select_backend_type": "Select a backend type.",
    "input_credentials": "Fill in the backend details.",
    "backend_name": "Backend name",
    "backend_empty_error": "This field can not be empty.",
    "backend_type": "Backend type",
    "backendtype_empty_error": "Please choose a backend type.",
    "stepper_optional": "optional"
  },
  "de": {
    "select_backend_type": "Wähle einen Backend typ aus.",
    "input_credentials": "Gib die benötigten Backend Daten ein.",
    "backend_name": "Backend Name",
    "backend_empty_error": "Dieses Feld darf nicht leer sein.",
    "backend_type": "Backend Typ",
    "backendtype_empty_error": "Bitte wähle einen Backendtyp aus.",
    "stepper_optional": "Optional"
  }
}
</i18n>

<template>
  <v-form class="edit-backend-form" ref="form" v-model="valid" @submit.prevent="submit" lazy-validation>
    <v-stepper v-model="step" horizontal>
      <v-stepper-header>
        <v-stepper-step
          :complete="stepCompleted >= 1"
          step="1"
          :editable="stepCompleted >= 1"
          edit-icon="check"
          :rules="[() => true]"
        >{{ $t('select_backend_type') }}</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step
          :complete="stepCompleted >= 2"
          step="2"
          :editable="stepCompleted >= 2"
          edit-icon="check"
        >{{ $t('input_credentials') }}</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step
          :complete="stepCompleted >= 3"
          step="3"
          :editable="stepCompleted >= 3"
          edit-icon="check"
        >{{ $t('test_connection') }}
        <small>{{ $t('stepper_optional') }}</small>
        </v-stepper-step>
      </v-stepper-header>
      <v-stepper-items>
        <v-stepper-content step="1" class="stepper-content">
          <v-select
            offset-y
            v-model="backendType"
            :items="backendChoices"
            :label="$t('backend_type')"
            :rules="[() => !!backendType || $t('backendtype_empty_error')]"
            @change="loadInputFields"
          ></v-select>
        </v-stepper-content>
        <v-stepper-content step="2" class="stepper-content">
          <v-text-field
            v-model="backendName"
            :label="$t('backend_name')"
            :rules="[() => !!backendName || $t('backend_empty_error')]"
            ref="backendName"
          ></v-text-field>
          <template v-for="element in elements">
            <v-text-field
              v-if="element.type == 'text'"
              label="TODO:"
              :key="element.name"
              v-model="element.value"
              :prepend-icon="element.icon"
            ></v-text-field>
            <v-text-field
              v-if="element.type == 'password'"
              label="TODOOO yoo"
              :key="element.name"
              :append-icon="element.show ? 'visibility_off' : 'visibility'"
              :type="element.show ? 'text' : 'password'"
              @click:append="element.show = !element.show"
              v-model="element.value"
            ></v-text-field>
            <v-switch
              v-if="element.type == 'switch'"
              v-model="element.value"
              :label="element.name"
              :key="element.name"
            ></v-switch>
            <v-select
              offset-y
              v-if="element.type == 'select'"
              :items="element.items"
              label="Standard"
              :key="element.name"
              v-model="element.value"
            ></v-select>
          </template>
        </v-stepper-content>
        <v-stepper-content step="3" class="stepper-content">
          <v-btn color="primary">{{ $t('work_in_progress') }}</v-btn>
        </v-stepper-content>
      </v-stepper-items>

<v-divider></v-divider>
    <v-layout>
      <v-flex xl10 offset-xl1 lg12 text-xs-right>
        <v-btn flat @click.native="$emit('cancel-edit')">{{ $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" v-show="step == 3" class="primary" raised>{{ $t('submit') }}</v-btn>
      </v-flex>
    </v-layout>
    </v-stepper>
  </v-form>
</template>

<script>

export default {
  name: 'BackendModuleEdit',
  props: ['backendId'],
  data () {
    return {
      valid: true,
      step: 1,
      stepCompleted: 0,
      backendChoices: [],
      elements: [],
      backendType: '',
      backendName: '',
      loadData: false
    }
  },
  methods: {
    submit (event) {
      if (this.$refs.form.validate()) {
        var credentials = []
        this.elements.forEach(function (element) {
          const e = { id: element.id, value: element.value }
          credentials.push(e)
        })

        this.$http.post('/api/backends/saveBackend', {
          backendId: this.backendId,
          backendName: this.backendName,
          backendType: this.backendType,
          backendCredentials: credentials
        }).then(response => {
          // TODO: Add backend saved successfull msg.
          console.log('TODO: Implement snackbar and print backend added successfully msg.')
          this.$emit('reload-table')
          this.$emit('cancel-edit')
        }).catch(error => {
          console.log(error)
          // if (error.response.data.status === '') {
          // }
          // this.$refs.form.validate()
        })
      }
    },
    loadBackendTypes () {
      this.$http('/api/backends/getBackendTypes').then(response => {
        this.backendChoices = response.data
      })
    },
    loadInputFields () {
      if (!this.loadData) {
        this.$http('/api/backends/getCredentialsByType?type=' + this.backendType).then(response => {
          this.elements = response.data
        })
      }
    },
    loadBackend (backendId) {
      this.$http('/api/backends/getBackendInfoById?id=' + this.backendId).then(response => {
        this.backendName = response.data.backendName
        this.loadData = true
        this.backendType = response.data.backendType
        const credentialValues = JSON.parse(response.data.backendCredentials)
        this.$http('/api/backends/getCredentialsByType?type=' + this.backendType).then(res => {
          var credentials = res.data

          // Make an array merge to combine the credentials with the values.
          var mergedCredentials = credentials.map(x => Object.assign(x, credentialValues.find(y => y.id === x.id)))
          this.elements = mergedCredentials
        })
      })
    },
    completeStepOne () {
      // Error handling
      if (this.backendType !== '') {
        this.step = 2
        this.stepCompleted = Math.max(1, this.stepCompleted)
      } else {
        this.$refs.form.validate()
      }
    },
    completeStepTwo () {
      // Error handling
      if (this.backendName !== '') {
        this.step = 3
        this.stepCompleted = Math.max(2, this.stepCompleted)
      } else {
        this.$refs.form.validate()
      }
    }
  },
  computed: {
  },
  beforeMount () {
    this.loadBackendTypes()
    if (this.backendId !== 0) {
      this.loadBackend(this.backendId)
      this.step = 2
      this.stepCompleted = 3
    }
  },
  watch: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.stepper-content {
  height: 600px;
  overflow: auto;
}
</style>