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
+10 -2
View File
@@ -6,7 +6,9 @@
{{ 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">
<form @submit.prevent="saveAddress()">
<div class="col-xs-12 col-md-6">
<div class="form-group"> <div class="form-group">
<label for="salutation" class="control-label"> <label for="salutation" class="control-label">
Anrede: Anrede:
@@ -39,7 +41,7 @@
<label for="dateOfBirth" class="control-label"> <label for="dateOfBirth" class="control-label">
Geburtsdatum: Geburtsdatum:
</label> </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>
<div class="form-group"> <div class="form-group">
<label for="gender" class="control-label"> <label for="gender" class="control-label">
@@ -50,6 +52,8 @@
<option value="M">männlich</option> <option value="M">männlich</option>
</select> </select>
</div> </div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group"> <div class="form-group">
<label for="street" class="control-label"> <label for="street" class="control-label">
Straße: Straße:
@@ -76,13 +80,17 @@
<option v-for="country in countries" :value="country.code">{{ country.name }}</option> <option v-for="country in countries" :value="country.code">{{ country.name }}</option>
</select> </select>
</div> </div>
</div>
<div class="col-xs-12">
<div class="form-group"> <div class="form-group">
<button type="submit" class="button button--active"> <button type="submit" class="button button--active">
Speichern Speichern
</button> </button>
</div> </div>
</div>
</form> </form>
</div> </div>
</div>
</template> </template>
<script> <script>
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/CrmData.vue
+15 -4
View File
@@ -1,11 +1,13 @@
<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">
<div class="col-xs-12 col-md-6">
<h2>Selektionsmerkmale</h2> <h2>Selektionsmerkmale</h2>
<template v-for="selectionGroup in this.crmData.selectionGroups"> <template v-for="selectionGroup in this.crmData.selectionGroups">
<h3>{{ selectionGroup.name}}</h3> <h3>{{ selectionGroup.name}}</h3>
@@ -18,6 +20,8 @@
</label> </label>
</div> </div>
</template> </template>
</div>
<div class="col-xs-12 col-md-6">
<h2>CRM Aktionen</h2> <h2>CRM Aktionen</h2>
<div class="checkbox" v-for="action in this.crmData.actions"> <div class="checkbox" v-for="action in this.crmData.actions">
<label :class="{ disabled: !action.changeable}"> <label :class="{ disabled: !action.changeable}">
@@ -27,7 +31,8 @@
{{ action.name }} {{ action.name }}
</label> </label>
</div> </div>
</template> </div>
</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');