summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModuleEdit.vue
diff options
context:
space:
mode:
authorJannik Schönartz2018-07-30 06:37:59 +0200
committerJannik Schönartz2018-07-30 06:37:59 +0200
commitc16e8e15d9f463d344b2260f09e8be334b391867 (patch)
treeb7652c2a98586fcf1656d88dd34520b846ee0ccb /webapp/src/components/BackendModuleEdit.vue
parent[webapp] Refactored redundant variable naming. (diff)
downloadbas-c16e8e15d9f463d344b2260f09e8be334b391867.tar.gz
bas-c16e8e15d9f463d344b2260f09e8be334b391867.tar.xz
bas-c16e8e15d9f463d344b2260f09e8be334b391867.zip
[webapp/external-backends] Dialog polishing. Thx Udo for fixing the scroll content in dialog bug.
Diffstat (limited to 'webapp/src/components/BackendModuleEdit.vue')
-rw-r--r--webapp/src/components/BackendModuleEdit.vue206
1 files changed, 65 insertions, 141 deletions
diff --git a/webapp/src/components/BackendModuleEdit.vue b/webapp/src/components/BackendModuleEdit.vue
index 5b60e09..664ace5 100644
--- a/webapp/src/components/BackendModuleEdit.vue
+++ b/webapp/src/components/BackendModuleEdit.vue
@@ -27,96 +27,18 @@
}
</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 && !loadData"
- :rules="[() => true]"
- >{{ $t('backend_type') }}</v-stepper-step>
- <v-divider></v-divider>
- <v-stepper-step
- :complete="stepCompleted >= 2"
- step="2"
- :editable="stepCompleted >= 2"
- >{{ $t('input_credentials') }}</v-stepper-step>
- <v-divider></v-divider>
- <v-stepper-step
- :complete="stepCompleted >= 3"
- step="3"
- :editable="stepCompleted >= 3"
- >{{ $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"
- prepend-icon="view_list"
- ></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"
- prepend-icon="assignment_ind"
- ></v-text-field>
- <backend-module-edit-dynamic-fields :elements="elements"/>
- </v-stepper-content>
- <v-stepper-content step="3" class="stepper-content">
- <v-container>
- <v-layout align-center justify-center column>
- <v-btn
- fab
- dark
- icon
- :loading="loading"
- :disabled="loading"
- @click.stop="checkConnection"
- large
- >
- <v-icon x-large color="primary">cached</v-icon>
- </v-btn>
- <div class="display-1">{{ $t('status') }}: <strong :class="statusColor">{{ statusLabel }}</strong></div>
- </v-layout>
- </v-container>
- </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="$store.commit('backends/setDialog', { show: false })">{{ $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>
-<!--
-<template>
-<v-form class="edit-backend-form" ref="form" v-model="valid" @submit.prevent="submit" lazy-validation>
+ <!-- dialog needs scrollable attribute-->
<v-card>
- <v-stepper v-model="step" horizontal>
+ <v-card-title style="padding: 0px">
+ <v-stepper v-model="step" horizontal style="width: 100%; background: transparent;" class="elevation-3">
<v-stepper-header>
<v-stepper-step
:complete="stepCompleted >= 1"
step="1"
:editable="stepCompleted >= 1 && !loadData"
:rules="[() => true]"
- >{{ $t('backend_type') }}</v-stepper-step>
+ >{{ $t('backend_type') }}<small>{{ backendType }}</small>
+ </v-stepper-step>
<v-divider></v-divider>
<v-stepper-step
:complete="stepCompleted >= 2"
@@ -128,68 +50,70 @@
:complete="stepCompleted >= 3"
step="3"
:editable="stepCompleted >= 3"
- >{{ $t('test_connection') }}
- <small>{{ $t('stepper_optional') }}</small>
+ >{{ $t('test_connection') }}<small>{{ $t('stepper_optional') }}</small>
</v-stepper-step>
</v-stepper-header>
- <v-card-text style="height: 500px;">
-<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"
- prepend-icon="view_list"
- ></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"
- prepend-icon="assignment_ind"
- ></v-text-field>
- <backend-module-edit-dynamic-fields :elements="elements"/>
- </v-stepper-content>
- <v-stepper-content step="3" class="stepper-content">
- <v-container>
- <v-layout align-center justify-center column>
- <v-btn
- fab
- dark
- icon
- :loading="loading"
- :disabled="loading"
- @click.stop="checkConnection"
- large
- >
- <v-icon x-large color="primary">cached</v-icon>
- </v-btn>
- <div class="display-1">{{ $t('status') }}: <strong :class="statusColor">{{ statusLabel }}</strong></div>
- </v-layout>
- </v-container>
- </v-stepper-content>
- </v-stepper-items>
-
- </v-card-text>
- <v-divider></v-divider>
- <v-card-actions>
- <v-flex xl10 offset-xl1 lg12 text-xs-right>
- <v-btn flat @click.native="$store.commit('backends/setDialog', { show: false })">{{ $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-card-actions>
- </v-stepper>
+ </v-stepper>
+ </v-card-title>
+ <v-card-text style="height: 500px;">
+ <v-form class="edit-backend-form" ref="form" v-model="valid" @submit.prevent="submit" lazy-validation>
+ <v-stepper v-model="step" horizontal style="width: 100%; background: transparent" class="elevation-0">
+ <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"
+ prepend-icon="view_list"
+ ></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"
+ prepend-icon="assignment_ind"
+ ></v-text-field>
+ <backend-module-edit-dynamic-fields :elements="elements"/>
+ </v-stepper-content>
+ <v-stepper-content step="3" class="stepper-content">
+ <v-container>
+ <v-layout align-center justify-center column>
+ <v-btn
+ fab
+ dark
+ icon
+ :loading="loading"
+ :disabled="loading"
+ @click.stop="checkConnection"
+ large
+ >
+ <v-icon x-large color="primary">cached</v-icon>
+ </v-btn>
+ <div class="display-1">{{ $t('status') }}: <strong :class="statusColor">{{ statusLabel }}</strong></div>
+ </v-layout>
+ </v-container>
+ </v-stepper-content>
+ </v-stepper-items>
+ </v-stepper>
+ </v-form>
+ </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/setDialog', { show: false })">{{ $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" @click="submit" v-show="step == 3" class="primary" raised>{{ $t('submit') }}</v-btn>
+ </v-flex>
+ </v-card-actions>
</v-card>
-</v-form>
</template>
--->
+
<script>
import BackendModuleEditDynamicFields from '@/components/BackendModuleEditDynamicFields'