summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModuleEditDynamicFields.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/BackendModuleEditDynamicFields.vue')
-rw-r--r--webapp/src/components/BackendModuleEditDynamicFields.vue73
1 files changed, 73 insertions, 0 deletions
diff --git a/webapp/src/components/BackendModuleEditDynamicFields.vue b/webapp/src/components/BackendModuleEditDynamicFields.vue
new file mode 100644
index 0000000..eae6357
--- /dev/null
+++ b/webapp/src/components/BackendModuleEditDynamicFields.vue
@@ -0,0 +1,73 @@
+<i18n>
+{
+ "en": {
+ },
+ "de": {
+ }
+}
+</i18n>
+<template>
+ <div>
+ <template v-for="element in elements">
+ <v-text-field
+ v-if="element.type == 'text'"
+ :label="element.name"
+ :key="element.name"
+ v-model="element.value"
+ :prepend-icon="element.icon"
+ ></v-text-field>
+ <v-text-field
+ v-else-if="element.type == 'password'"
+ :label="element.name"
+ :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"
+ :prepend-icon="element.icon"
+ ></v-text-field>
+ <div v-else-if="element.type == 'switch'" :key="element.name">
+ <v-switch
+ v-model="element.value"
+ :label="element.name"
+ :key="element.name"
+ color="primary"
+ :prepend-icon="element.icon"
+ ></v-switch>
+ <backend-module-edit-dynamic-fields :elements="element.elements" v-if="element.value"/>
+ </div>
+ <v-select
+ offset-y
+ v-else-if="element.type == 'select'"
+ :items="element.items"
+ :label="element.name"
+ :key="element.name"
+ v-model="element.value"
+ ></v-select>
+ </template>
+ </div>
+</template>
+
+<script>
+import BackendModuleEditDynamicFields from '@/components/BackendModuleEditDynamicFields'
+
+export default {
+ props: ['elements'],
+ data () {
+ return {
+ }
+ },
+ methods: {
+ },
+ computed: {
+ },
+ created () {
+ this.$options.components['BackendModuleEditDynamicFields'] = BackendModuleEditDynamicFields
+ }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>