73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
|
<template>
|
||
|
<div class="hello">
|
||
|
<h1>Modèles d'Email</h1>
|
||
|
<h2>Templates d'email potentiellement pré-rempli à usage professionnel et personnel !</h2>
|
||
|
<select v-model="selected" v-on:change="selectEmail">
|
||
|
<option v-for="template in emails" :value="template.slug" :key="template.slug">
|
||
|
{{ template.name }}
|
||
|
</option>
|
||
|
</select>
|
||
|
<div v-if="email != null">
|
||
|
<h4 class="email-subject">Sujet : {{ email.subject }}</h4>
|
||
|
<nl2br tag="p" :text="email.body" class-name="email-body"></nl2br>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import Vue from 'vue';
|
||
|
import VueResource from 'vue-resource';
|
||
|
import Nl2br from 'vue-nl2br';
|
||
|
|
||
|
Vue.component('nl2br', Nl2br);
|
||
|
Vue.use(VueResource);
|
||
|
|
||
|
export default {
|
||
|
name: "EmailModel",
|
||
|
components: {
|
||
|
Nl2br
|
||
|
},
|
||
|
data: function() {
|
||
|
return {
|
||
|
emails: [],
|
||
|
selected: "",
|
||
|
email: null
|
||
|
}
|
||
|
},
|
||
|
beforeCreate() {
|
||
|
let $this = this;
|
||
|
Vue.http.get("emails.php").then(response => {
|
||
|
$this.emails = response.body
|
||
|
});
|
||
|
},
|
||
|
methods: {
|
||
|
selectEmail: function() {
|
||
|
let $this = this;
|
||
|
Vue.http.post("email.php", {"slug": $this.selected}).then(response => {
|
||
|
$this.email = response.body;
|
||
|
// $this.email.body.replace(/(\r\n|\n\r|\r|\n)/g, '<br>$1');
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
h3 {
|
||
|
margin: 40px 0 0;
|
||
|
}
|
||
|
ul {
|
||
|
list-style-type: none;
|
||
|
padding: 0;
|
||
|
}
|
||
|
li {
|
||
|
display: inline-block;
|
||
|
margin: 0 10px;
|
||
|
}
|
||
|
a {
|
||
|
color: #42b983;
|
||
|
}
|
||
|
.email-subject, .email-body {
|
||
|
text-align: left;
|
||
|
}
|
||
|
</style>
|