email-templates/src/components/EmailModel.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>