Arrange fields into columns
This commit is contained in:
@@ -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">×</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');
|
||||
|
||||
Reference in New Issue
Block a user