EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Arrange fields into columns

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+84 -76
View File
@@ -6,82 +6,90 @@
{{ message }} {{ message }}
</div> </div>
<img :src="loaderUrl" alt="" v-show="loading"> <img :src="loaderUrl" alt="" v-show="loading">
<form @submit.prevent="saveAddress()" v-show="!loading"> <div class="row" v-show="!loading">
<div class="form-group"> <form @submit.prevent="saveAddress()">
<label for="salutation" class="control-label"> <div class="col-xs-12 col-md-6">
Anrede: <div class="form-group">
</label> <label for="salutation" class="control-label">
<select id="salutation" v-model="address.salutation" class="form-control"> Anrede:
<option value="">Bitte wählen...</option> </label>
<option value="Frau">Frau</option> <select id="salutation" v-model="address.salutation" class="form-control">
<option value="Herr">Herr</option> <option value="">Bitte wählen...</option>
</select> <option value="Frau">Frau</option>
</div> <option value="Herr">Herr</option>
<div class="form-group"> </select>
<label for="title" class="control-label"> </div>
Titel: <div class="form-group">
</label> <label for="title" class="control-label">
<input id="title" type="text" v-model="address.title" class="form-control"> Titel:
</div> </label>
<div class="form-group"> <input id="title" type="text" v-model="address.title" class="form-control">
<label for="name" class="control-label"> </div>
Name: <div class="form-group">
</label> <label for="name" class="control-label">
<input id="name" type="text" v-model="address.name" class="form-control"> Name:
</div> </label>
<div class="form-group"> <input id="name" type="text" v-model="address.name" class="form-control">
<label for="firstName" class="control-label"> </div>
Vorname: <div class="form-group">
</label> <label for="firstName" class="control-label">
<input id="firstName" type="text" v-model="address.firstName" class="form-control"> Vorname:
</div> </label>
<div class="form-group"> <input id="firstName" type="text" v-model="address.firstName" class="form-control">
<label for="dateOfBirth" class="control-label"> </div>
Geburtsdatum: <div class="form-group">
</label> <label for="dateOfBirth" class="control-label">
<input id="dateOfBirth" type="text" ref="picker" class="form-control"> Geburtsdatum:
</div> </label>
<div class="form-group"> <input id="dateOfBirth" type="text" ref="picker" class="form-control datepicker--visible">
<label for="gender" class="control-label"> </div>
Geschlecht: <div class="form-group">
</label> <label for="gender" class="control-label">
<select id="gender" v-model="address.gender" class="form-control"> Geschlecht:
<option value="W">weiblich</option> </label>
<option value="M">männlich</option> <select id="gender" v-model="address.gender" class="form-control">
</select> <option value="W">weiblich</option>
</div> <option value="M">männlich</option>
<div class="form-group"> </select>
<label for="street" class="control-label"> </div>
Straße: </div>
</label> <div class="col-xs-12 col-md-6">
<input id="street" type="text" v-model="address.street" class="form-control"> <div class="form-group">
</div> <label for="street" class="control-label">
<div class="form-group"> Straße:
<label for="zipCode" class="control-label"> </label>
PLZ: <input id="street" type="text" v-model="address.street" class="form-control">
</label> </div>
<input id="zipCode" type="text" v-model="address.zipCode" class="form-control"> <div class="form-group">
</div> <label for="zipCode" class="control-label">
<div class="form-group"> PLZ:
<label for="city" class="control-label"> </label>
Stadt: <input id="zipCode" type="text" v-model="address.zipCode" class="form-control">
</label> </div>
<input id="city" type="text" v-model="address.city" class="form-control"> <div class="form-group">
</div> <label for="city" class="control-label">
<div class="form-group"> Stadt:
<label for="country" class="control-label"> </label>
Land: <input id="city" type="text" v-model="address.city" class="form-control">
</label> </div>
<select id="country" v-model="address.country" class="form-control"> <div class="form-group">
<option v-for="country in countries" :value="country.code">{{ country.name }}</option> <label for="country" class="control-label">
</select> Land:
</div> </label>
<div class="form-group"> <select id="country" v-model="address.country" class="form-control">
<button type="submit" class="button button--active"> <option v-for="country in countries" :value="country.code">{{ country.name }}</option>
Speichern </select>
</button> </div>
</div> </div>
</form> <div class="col-xs-12">
<div class="form-group">
<button type="submit" class="button button--active">
Speichern
</button>
</div>
</div>
</form>
</div>
</div> </div>
</template> </template>
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+32 -21
View File
@@ -1,33 +1,38 @@
<template> <template>
<div id="myep-main"> <div id="myep-main">
<h1>CRM Merkmale</h1> <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 }} {{ message }}
</div> </div>
<img :src="loaderUrl" alt="" v-if="loading"> <img :src="loaderUrl" alt="" v-if="loading">
<template v-if="!loading"> <div class="row" v-if="loaded">
<h2>Selektionsmerkmale</h2> <div class="col-xs-12 col-md-6">
<template v-for="selectionGroup in this.crmData.selectionGroups"> <h2>Selektionsmerkmale</h2>
<h3>{{ selectionGroup.name}}</h3> <template v-for="selectionGroup in this.crmData.selectionGroups">
<div class="checkbox" v-for="selection in selectionGroup.selections"> <h3>{{ selectionGroup.name}}</h3>
<label :class="{ disabled: !selection.changeable}"> <div class="checkbox" v-for="selection in selectionGroup.selections">
<input type="checkbox" class="form-control" v-model="selection.value" <label :class="{ disabled: !selection.changeable}">
:disabled="!selection.changeable" @change="saveSelections()"/> <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> <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
{{ selection.name }} {{ action.name }}
</label> </label>
</div> </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> </div>
</template> </div>
</div> </div>
</template> </template>
@@ -39,7 +44,9 @@
data () { data () {
return { return {
loading: false, loading: false,
loaded: false,
message: '', message: '',
messageClass: '',
crmData: [] crmData: []
} }
}, },
@@ -59,15 +66,17 @@
} }
}).then((response) => { }).then((response) => {
this.crmData = response.data[0]; this.crmData = response.data[0];
this.loaded = true;
}).catch(() => { }).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :('; this.message = 'Es ist ein Fehler aufgetreten :(';
this.messageClass = 'alert-danger';
}).then(() => { }).then(() => {
this.loading = false; this.loading = false;
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');
}); });
}, },
saveSelections () { saveSelections () {
this.loading = false; this.loading = true;
axios({ axios({
url: '/api/crm-selections/' + this.crmData.id, url: '/api/crm-selections/' + this.crmData.id,
headers: { headers: {
@@ -77,8 +86,10 @@
data: this.crmData data: this.crmData
}).then(() => { }).then(() => {
this.message = 'Die Änderungen wurden gespeichert'; this.message = 'Die Änderungen wurden gespeichert';
this.messageClass = 'alert-success';
}).catch(() => { }).catch(() => {
this.message = 'Es ist ein Fehler aufgetreten :('; this.message = 'Es ist ein Fehler aufgetreten :(';
this.messageClass = 'alert-danger';
}).then(() => { }).then(() => {
this.loading = false; this.loading = false;
EventBus.$emit('scrollTo', '#myep-main'); EventBus.$emit('scrollTo', '#myep-main');