Arrange fields into columns

This commit is contained in:
Björn Fromme
2018-10-15 17:14:15 +02:00
parent 4cf57bf475
commit f06ba62fc3
2 changed files with 116 additions and 97 deletions
@@ -6,7 +6,9 @@
{{ message }}
</div>
<img :src="loaderUrl" alt="" v-show="loading">
<form @submit.prevent="saveAddress()" v-show="!loading">
<div class="row" v-show="!loading">
<form @submit.prevent="saveAddress()">
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label for="salutation" class="control-label">
Anrede:
@@ -39,7 +41,7 @@
<label for="dateOfBirth" class="control-label">
Geburtsdatum:
</label>
<input id="dateOfBirth" type="text" ref="picker" class="form-control">
<input id="dateOfBirth" type="text" ref="picker" class="form-control datepicker--visible">
</div>
<div class="form-group">
<label for="gender" class="control-label">
@@ -50,6 +52,8 @@
<option value="M">männlich</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label for="street" class="control-label">
Straße:
@@ -76,13 +80,17 @@
<option v-for="country in countries" :value="country.code">{{ country.name }}</option>
</select>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<button type="submit" class="button button--active">
Speichern
</button>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
@@ -1,11 +1,13 @@
<template>
<div id="myep-main">
<h1>CRM Merkmale</h1>
<div v-if="message" class="alert alert-danger">
<div v-if="message" class="alert alert-dismissible" :class="messageClass">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
{{ message }}
</div>
<img :src="loaderUrl" alt="" v-if="loading">
<template v-if="!loading">
<div class="row" v-if="loaded">
<div class="col-xs-12 col-md-6">
<h2>Selektionsmerkmale</h2>
<template v-for="selectionGroup in this.crmData.selectionGroups">
<h3>{{ selectionGroup.name}}</h3>
@@ -18,6 +20,8 @@
</label>
</div>
</template>
</div>
<div class="col-xs-12 col-md-6">
<h2>CRM Aktionen</h2>
<div class="checkbox" v-for="action in this.crmData.actions">
<label :class="{ disabled: !action.changeable}">
@@ -27,7 +31,8 @@
{{ action.name }}
</label>
</div>
</template>
</div>
</div>
</div>
</template>
@@ -39,7 +44,9 @@
data () {
return {
loading: false,
loaded: false,
message: '',
messageClass: '',
crmData: []
}
},
@@ -59,15 +66,17 @@
}
}).then((response) => {
this.crmData = response.data[0];
this.loaded = true;
}).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :(';
this.messageClass = 'alert-danger';
}).then(() => {
this.loading = false;
EventBus.$emit('scrollTo', '#myep-main');
});
},
saveSelections () {
this.loading = false;
this.loading = true;
axios({
url: '/api/crm-selections/' + this.crmData.id,
headers: {
@@ -77,8 +86,10 @@
data: this.crmData
}).then(() => {
this.message = 'Die Änderungen wurden gespeichert';
this.messageClass = 'alert-success';
}).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :(';
this.messageClass = 'alert-danger';
}).then(() => {
this.loading = false;
EventBus.$emit('scrollTo', '#myep-main');