Arrange fields into columns
This commit is contained in:
Björn Fromme
+84
-76
@@ -6,82 +6,90 @@
|
||||
{{ message }}
|
||||
</div>
|
||||
<img :src="loaderUrl" alt="" v-show="loading">
|
||||
<form @submit.prevent="saveAddress()" v-show="!loading">
|
||||
<div class="form-group">
|
||||
<label for="salutation" class="control-label">
|
||||
Anrede:
|
||||
</label>
|
||||
<select id="salutation" v-model="address.salutation" class="form-control">
|
||||
<option value="">Bitte wählen...</option>
|
||||
<option value="Frau">Frau</option>
|
||||
<option value="Herr">Herr</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="title" class="control-label">
|
||||
Titel:
|
||||
</label>
|
||||
<input id="title" type="text" v-model="address.title" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="name" class="control-label">
|
||||
Name:
|
||||
</label>
|
||||
<input id="name" type="text" v-model="address.name" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="firstName" class="control-label">
|
||||
Vorname:
|
||||
</label>
|
||||
<input id="firstName" type="text" v-model="address.firstName" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="dateOfBirth" class="control-label">
|
||||
Geburtsdatum:
|
||||
</label>
|
||||
<input id="dateOfBirth" type="text" ref="picker" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="gender" class="control-label">
|
||||
Geschlecht:
|
||||
</label>
|
||||
<select id="gender" v-model="address.gender" class="form-control">
|
||||
<option value="W">weiblich</option>
|
||||
<option value="M">männlich</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="street" class="control-label">
|
||||
Straße:
|
||||
</label>
|
||||
<input id="street" type="text" v-model="address.street" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="zipCode" class="control-label">
|
||||
PLZ:
|
||||
</label>
|
||||
<input id="zipCode" type="text" v-model="address.zipCode" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city" class="control-label">
|
||||
Stadt:
|
||||
</label>
|
||||
<input id="city" type="text" v-model="address.city" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="country" class="control-label">
|
||||
Land:
|
||||
</label>
|
||||
<select id="country" v-model="address.country" class="form-control">
|
||||
<option v-for="country in countries" :value="country.code">{{ country.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="button button--active">
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<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:
|
||||
</label>
|
||||
<select id="salutation" v-model="address.salutation" class="form-control">
|
||||
<option value="">Bitte wählen...</option>
|
||||
<option value="Frau">Frau</option>
|
||||
<option value="Herr">Herr</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="title" class="control-label">
|
||||
Titel:
|
||||
</label>
|
||||
<input id="title" type="text" v-model="address.title" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="name" class="control-label">
|
||||
Name:
|
||||
</label>
|
||||
<input id="name" type="text" v-model="address.name" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="firstName" class="control-label">
|
||||
Vorname:
|
||||
</label>
|
||||
<input id="firstName" type="text" v-model="address.firstName" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="dateOfBirth" class="control-label">
|
||||
Geburtsdatum:
|
||||
</label>
|
||||
<input id="dateOfBirth" type="text" ref="picker" class="form-control datepicker--visible">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="gender" class="control-label">
|
||||
Geschlecht:
|
||||
</label>
|
||||
<select id="gender" v-model="address.gender" class="form-control">
|
||||
<option value="W">weiblich</option>
|
||||
<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:
|
||||
</label>
|
||||
<input id="street" type="text" v-model="address.street" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="zipCode" class="control-label">
|
||||
PLZ:
|
||||
</label>
|
||||
<input id="zipCode" type="text" v-model="address.zipCode" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="city" class="control-label">
|
||||
Stadt:
|
||||
</label>
|
||||
<input id="city" type="text" v-model="address.city" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="country" class="control-label">
|
||||
Land:
|
||||
</label>
|
||||
<select id="country" v-model="address.country" class="form-control">
|
||||
<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>
|
||||
|
||||
|
||||
+32
-21
@@ -1,33 +1,38 @@
|
||||
<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">
|
||||
<h2>Selektionsmerkmale</h2>
|
||||
<template v-for="selectionGroup in this.crmData.selectionGroups">
|
||||
<h3>{{ selectionGroup.name}}</h3>
|
||||
<div class="checkbox" v-for="selection in selectionGroup.selections">
|
||||
<label :class="{ disabled: !selection.changeable}">
|
||||
<input type="checkbox" class="form-control" v-model="selection.value"
|
||||
:disabled="!selection.changeable" @change="saveSelections()"/>
|
||||
<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>
|
||||
<div class="checkbox" v-for="selection in selectionGroup.selections">
|
||||
<label :class="{ disabled: !selection.changeable}">
|
||||
<input type="checkbox" class="form-control" v-model="selection.value"
|
||||
:disabled="!selection.changeable" @change="saveSelections()"/>
|
||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
||||
{{ selection.name }}
|
||||
</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}">
|
||||
<input type="checkbox" class="form-control" v-model="action.value" :disabled="!action.changeable"
|
||||
@change="saveSelections()"/>
|
||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
||||
{{ selection.name }}
|
||||
{{ action.name }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
<h2>CRM Aktionen</h2>
|
||||
<div class="checkbox" v-for="action in this.crmData.actions">
|
||||
<label :class="{ disabled: !action.changeable}">
|
||||
<input type="checkbox" class="form-control" v-model="action.value" :disabled="!action.changeable"
|
||||
@change="saveSelections()"/>
|
||||
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
|
||||
{{ action.name }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</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