summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModuleEdit.vue
diff options
context:
space:
mode:
authorJannik Schönartz2018-07-19 05:42:25 +0200
committerJannik Schönartz2018-07-19 05:42:25 +0200
commit478adf83cb6bdc37bc2cc6086920018f9a8dd7f5 (patch)
treedd163790e405339b6607f6624ab6eb82901b3ae7 /webapp/src/components/BackendModuleEdit.vue
parent[webapp/dashboard] added devMode (diff)
downloadbas-478adf83cb6bdc37bc2cc6086920018f9a8dd7f5.tar.gz
bas-478adf83cb6bdc37bc2cc6086920018f9a8dd7f5.tar.xz
bas-478adf83cb6bdc37bc2cc6086920018f9a8dd7f5.zip
[webapp/external-backends] Reworked list into data-table (sorting, multiple selection). Added checkConnection functionality.
Diffstat (limited to 'webapp/src/components/BackendModuleEdit.vue')
-rw-r--r--webapp/src/components/BackendModuleEdit.vue223
1 files changed, 132 insertions, 91 deletions
diff --git a/webapp/src/components/BackendModuleEdit.vue b/webapp/src/components/BackendModuleEdit.vue
index 49e48bb..663c6b0 100644
--- a/webapp/src/components/BackendModuleEdit.vue
+++ b/webapp/src/components/BackendModuleEdit.vue
@@ -2,105 +2,120 @@
{
"en": {
"select_backend_type": "Select a backend type.",
- "input_credentials": "Fill in the backend credentials.",
+ "input_credentials": "Fill in the backend details.",
"backend_name": "Backend name",
"backend_empty_error": "This field can not be empty.",
- "backendtype_empty_error": "Please choose a backend type."
+ "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.",
- "backendtype_empty_error": "Bitte wähle einen Backendtyp aus."
+ "backend_type": "Backend Typ",
+ "backendtype_empty_error": "Bitte wähle einen Backendtyp aus.",
+ "stepper_optional": "Optional"
}
}
</i18n>
<template>
- <v-container>
+ <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 md8 offset-md2 sm10 offset-sm1>
- <v-form class="edit-backend-form" ref="form" v-model="valid" @submit.prevent="submit" lazy-validation>
- <v-stepper v-model="step" vertical>
- <v-stepper-step
- :complete="stepCompleted >= 1"
- step="1"
- :editable="stepCompleted >= 1"
- edit-icon="check"
- :rules="[() => true]"
- >{{ $t('select_backend_type') }}</v-stepper-step>
- <v-stepper-content step="1">
- <v-text-field solo
- class="backend-select"
- v-model="backendName"
- :label="$t('backend_name')"
- :rules="[() => !!backendName || $t('backend_empty_error')]"
- ref="backendName"
- ></v-text-field>
- <v-select
- solo
- offset-y
- class="backend-select"
- v-model="backendType"
- :items="backendChoices"
- :rules="[() => !!backendType || $t('backendtype_empty_error')]"
- @change="loadInputFields"
- ></v-select>
- <v-btn color="primary" @click.native="completeStepOne();">{{ $t('continue') }}</v-btn>
- <v-btn flat @click.native="$emit('cancel-edit')">{{ $t('cancel') }}</v-btn>
- </v-stepper-content>
- <v-stepper-step
- :complete="stepCompleted >= 2"
- step="2"
- :editable="stepCompleted >= 2"
- edit-icon="check"
- >{{ $t('input_credentials') }}</v-stepper-step>
- <v-stepper-content step="2">
- <template v-for="element in elements">
- <v-text-field
- solo
- v-if="element.type == 'text'"
- label="Regular"
- :key="element.name"
- v-model="element.value"
- ></v-text-field>
- <v-text-field
- solo
- v-if="element.type == 'password'"
- label="Regular"
- :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
- solo
- offset-y
- v-if="element.type == 'select'"
- :items="element.items"
- label="Standard"
- :key="element.name"
- v-model="element.value"
- ></v-select>
- </template>
- <!--<v-btn color="primary" @click.native="step = 3; stepCompleted = Math.max(2, stepCompleted)">{{ $t('continue') }}</v-btn>-->
- <v-btn type="submit" class="primary" raised>{{ $t('submit') }}</v-btn>
- <v-btn flat @click.native="$emit('cancel-edit')">{{ $t('cancel') }}</v-btn>
- </v-stepper-content>
- <!--<v-stepper-step :complete="stepCompleted >= 3" step="3" :editable="stepCompleted >= 3" edit-icon="check">Select an ad format and name ad unit</v-stepper-step>-->
- </v-stepper>
- </v-form>
+ <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-container>
+ </v-stepper>
+ </v-form>
</template>
<script>
@@ -113,10 +128,9 @@ export default {
valid: true,
step: 1,
stepCompleted: 0,
- backendType: '',
backendChoices: [],
elements: [],
- show: false,
+ backendType: '',
backendName: '',
loadData: false
}
@@ -124,14 +138,21 @@ export default {
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: this.elements
+ 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)
@@ -158,17 +179,33 @@ export default {
this.backendName = response.data.backendName
this.loadData = true
this.backendType = response.data.backendType
- this.elements = JSON.parse(response.data.backendCredentials)
+ 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.backendName !== '' && this.backendType !== '') {
+ 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: {
@@ -177,15 +214,19 @@ export default {
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>
-.backend-select {
- margin: 6px;
+.stepper-content {
+ height: 600px;
+ overflow: auto;
}
</style>