🎉 Hello world
This commit is contained in:
commit
ade7ab4dec
22
.gitignore
vendored
Normal file
22
.gitignore
vendored
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
/package-lock.json
|
||||||
29
README.md
Normal file
29
README.md
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
# email-templates
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
yarn run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
yarn run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run your tests
|
||||||
|
```
|
||||||
|
yarn run test
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
yarn run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [[
|
||||||
|
'@vue/app', { useBuiltIns: "entry" }
|
||||||
|
]]
|
||||||
|
}
|
||||||
49
package.json
Normal file
49
package.json
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
{
|
||||||
|
"name": "email-templates",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^2.6.5",
|
||||||
|
"vue": "^2.6.10",
|
||||||
|
"vue-nl2br": "^0.1.2",
|
||||||
|
"vue-resource": "^1.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^3.11.0",
|
||||||
|
"@vue/cli-plugin-eslint": "^3.11.0",
|
||||||
|
"@vue/cli-service": "^3.11.0",
|
||||||
|
"babel-eslint": "^10.0.1",
|
||||||
|
"eslint": "^5.16.0",
|
||||||
|
"eslint-plugin-vue": "^5.0.0",
|
||||||
|
"vue-devtools": "^5.1.3",
|
||||||
|
"vue-template-compiler": "^2.6.10"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"rules": {},
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "babel-eslint"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"postcss": {
|
||||||
|
"plugins": {
|
||||||
|
"autoprefixer": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions"
|
||||||
|
]
|
||||||
|
}
|
||||||
17
public/email.php
Normal file
17
public/email.php
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
$slug = $_POST['slug'];
|
||||||
|
$emails_json = json_decode(file_get_contents(__DIR__.'/emails.json'), true);
|
||||||
|
$emails = [];
|
||||||
|
foreach ($emails_json as $email) {
|
||||||
|
$emails[$email['slug']] = $email;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!array_key_exists($slug, $emails)) {
|
||||||
|
header('HTTP/1.0 404 Not Found');
|
||||||
|
}
|
||||||
|
|
||||||
|
$email = $emails[$slug];
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
die(json_encode($email));
|
||||||
116
public/emails.json
Normal file
116
public/emails.json
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"slug": "excuse",
|
||||||
|
"name": "Excuses suite problème",
|
||||||
|
"subject": "Je suis désolé! Nous sommes au courant de votre problème et sommes en train de travailler dessus",
|
||||||
|
"body": "Je viens de voir votre mail. \n\nJe suis désolé de voir que vous avez des problèmes.\n\nJe vais commencer à enquêter sur ce comportement et reviens vers vous.\n\nNous allons nous assurer que ceci soit corrigé au plus vite.\n\nEn attendant, dites moi s'il y a quoi que ce soit que je puisse faire pour être sûr que vous ayez la meilleure expérience."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "question",
|
||||||
|
"name": "Question rapide",
|
||||||
|
"subject": "Puis-je vous poser une question ?",
|
||||||
|
"body": "Bonjour, je voulais juste vous poser une petite question rapide.\n\n[INSÉREZ LA QUESTION ICI]\n\nEn l'attente de votre retour. Merci."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "casser",
|
||||||
|
"name": "Casser avec quelqu'un",
|
||||||
|
"subject": "Je suis désolé.",
|
||||||
|
"body": "Je sais que ça ne se fait pas par email, mais je dois te dire quelque chose d'important, et c'est très difficile à dire en personne.\n\nJe pense que nous devrions voir d'autres gens.\n\nThis is a life decision I needed to make for myself. Please don't take this upon yourself, wonder what you could have done differently, or think you're less of a person because of this.\n\nYou're truly a great person, and I've sincerely enjoyed the time we've spent together. \n\nI don't regret us being together at all. This is a decision I need to make, and I'm sorry if it hurts you. This is something I simply need to do.\n\nI hope this break will be amicable for the both of us. If you're upset, I understand. I wish no ill will towards you, and I hope you find happiness.\n\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "candidature",
|
||||||
|
"name": "Candidature",
|
||||||
|
"subject": "Disponible pour aider",
|
||||||
|
"body": "Bonjour !\n\nJ'ai entendu dire que vous cherchiez quelqu'un pouvant relever des défis pour votre entreprise.\n\nJ'aimerais me présenter et vous démontrer que je suis prêts à résoudre ces problèmes pour vous.\n\nVoici un lien à propos de moi et de mes expériences : https://www.mon-merveilleux-site.com\n\nQuand vous aurez du temps cette semaine, j'aimerais beaucoup que nous ayons un entretien avec vous afin de savoir si notre collaboration serait fructueuse.\n\nQuelle est votre disponibilité pour un appel rapide ?"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "annulation-service",
|
||||||
|
"name": "Annulation d'un service et remboursement",
|
||||||
|
"subject": "Annulation et remboursement",
|
||||||
|
"body": "Je souhaiterais annuler ce servive au plus vite.\n\nMerci de faire le nécessaire et, s'il vous plait, veuillez rembourser tous les frais associés.\n\nMerci."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "relance",
|
||||||
|
"name": "Relance",
|
||||||
|
"subject": "Je prend des nouvelles",
|
||||||
|
"body": "Bonjour,\n\nJe souhaite juste prendre des nouvelles.\n\nJe vous ai envoyé un e-mail il y a un moment et je voulais juste faire un point sur cette conversation et voir comment les choses avancent pour vous.\n\nJuste pour vous rafraîchir la mémoire, je vous ai emailé à propos de [ DESCRIPTION EN UNE PHRASE DU POINT PRINCIPAL DU MAIL PRÉCÉDENT ]\n\nDites moi s'il y a quoique ce soit que je puisse faire pour avancer !"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "recu-a-faire-plus-tard",
|
||||||
|
"name": "Tache reçue, je le ferai plus tard",
|
||||||
|
"subject": "Bien reçu. Merci",
|
||||||
|
"body": "Petit rappel : Je suis très occupé en ce moment, donc cela va me prendre un peu plus de temps que prévu de le faire.\n\nN'hésitez pas à me le rappeler si je ne reviens pas vers vous bientôt.\n\nAussi, dites moi si, entre temps, vos priorités ont changé et que vous n'avez plus besoin de [ CE QU'IL FAUT FAIRE ]."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "remboursement-accepte",
|
||||||
|
"name": "Accepté un remboursement",
|
||||||
|
"subject": "Votre remboursement a été accepté.",
|
||||||
|
"body": "Bonjour, je viens de recevoir votre demande de remboursement.\n\nJe suis désolé que nous n'ayons pas été à la hauteur de votre exigences.\n\nJ'ai procédé au remboursement complet de votre produit. Cela sera visible prochainement sur votre relevé bancaire.\n\nN'hésitez pas à revenir vers moi si vous avez un problème.\n\nBonne journée à vous."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "fait-longtemps",
|
||||||
|
"name": "Ça fait longtemps, on rattrape le temps",
|
||||||
|
"subject": "Hey. Comment ça va depuis le temps ?",
|
||||||
|
"body": "Ça fait un moment qu'on a pas parlé !\n\nComment ça va ?\n\nJe voulais juste reprendre contact et rattraper le temps et voir comment tu allais.\n \nRépond moi vite et dis moi ce qui t'es arrivé depuis la dernière fois."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "besoin-conseil",
|
||||||
|
"name": "Besoin conseil",
|
||||||
|
"subject": "Besoin d'un conseil",
|
||||||
|
"body": "Bonjour,\n\nj'ai besoin de ton aide si ça ne te dérange pas.\n\nJ'ai du mal avec [ DESCRIPTION DU PROBLÈME ]\n\nTu as un conseil ?\n\nTout ce que tu proposes sera grandement apprécié !"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "pas-interesse",
|
||||||
|
"name": "Pas intéressé par l'offre",
|
||||||
|
"subject": "Merci pour l'offre",
|
||||||
|
"body": "Salut,\n\nj'apprécie la pensée et l'énergie que tu as mises pour m'offrir [ LA CHOSE QUE VOUS NE SOUHAITEZ PAS ]\n\nCeci étant dit, ce n'est pas approprié pour moi en ce moment. Si cela me convient, plus tard, je te le ferai savoir.\n\nTu peux toujours m'envoyer des trucs, hein. J'apprécie :)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "relance-facture",
|
||||||
|
"name": "Relance pour facture",
|
||||||
|
"subject": "Petit rappel - argent du",
|
||||||
|
"body": "Je voulais juste vous rappeler que vous me devez [ MONTANT DU ]\n\nC'est facile d'oublier ce genre de chose, donc je souhaitais juste vous envoyer un petit rappel.\n\nN'hésitez pas à revenir vers moi si vous avez une préférence pour l'envoi de l'argent. Je m'adapte, donc tout ce qui vous ira.\n\nMerci !"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "decale-rdv",
|
||||||
|
"name": "Décalé un RDV",
|
||||||
|
"subject": "Désolé, on doit décaler notre RDV",
|
||||||
|
"body": "Je suis terriblement désolé.\n\nUn empêchement de dernière minute m'oblire à décaler notre rendez-vous.\n\nN'hésitez pas à me donner vos disponibilités. J'essayerai de faire correspondre avec mon planning.\n\nEncore une fois, désolé pour le changement de plan."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "planifie-call",
|
||||||
|
"name": "Planifier un call",
|
||||||
|
"subject": "Un appel cette semaine ?",
|
||||||
|
"body": "Il faudrait planifier un appel rapide pour parler de [ LE SUJET ]\n\nQuelles sont vos disponibilités cette semaine ?\n\nEn l'attente de notre prochaine discussion,\n\nCordialement,"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "sick-work",
|
||||||
|
"name": "Malade / Doit rester à la maison",
|
||||||
|
"subject": "À la maison aujourd'hui",
|
||||||
|
"body": "Bonjour,\n\nSuite à une maladie, je vais devoir travailler depuis la maison aujourd'hui.\n\nJe serai disponible par tous les moyens traditionnels (e-mail, téléphone, etc.)\n\nMerci de me laisser dans la boucle !"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "merci-appel",
|
||||||
|
"name": "Merci d'avoir appelé",
|
||||||
|
"subject": "Merci pour l'appel !",
|
||||||
|
"body": "Je viens de voir que vous m'avez appelé. J'apprécie le geste.\n\nJe n'hésiterai pas à vous rappeler au plus vite.\n\nSi vous souhaitez un retour un peu plus rapide, je préfère les e-mails.\n\nRépondez moi avec le point principal de votre appel et nous pourrons commencer par là.\n\nMerci et bonne journée !"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "merci-partage-lien",
|
||||||
|
"name": "Merci d'avoir partagé ce lien",
|
||||||
|
"subject": "Merci pour le partage.",
|
||||||
|
"body": "Cool !\n\nMerci d'avoir partagé ce lien avec moi.\n\nJ'adore ouvrir ma boîte et voir ce genre de chose."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "desabo-aggressif",
|
||||||
|
"name": "Désabonnement aggressif",
|
||||||
|
"subject": "Merci de me désabonner rapidement.",
|
||||||
|
"body": "J'ai essayé de me désabonner de votre liste de diffusion à plusieurs reprises et cela ne fonctionne pas.\n\nMerci de me retirer manuellement de votre liste le plus rapidement possible. Merci de me retirer des autres listes que vous posséder par la même occasion.\n\nJe vais commencer à marquer vos e-mails comme spam dorénavant et potentiellement, contacter la CNIL.\n\nMerci."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "desabo-poli",
|
||||||
|
"name": "Désabonnement poli",
|
||||||
|
"subject": "Service plus souhaité.",
|
||||||
|
"body": "Je suis désolé. Ce service ne m'est plus du tout utile.\n\nPouvez-vous annuler mon compte ? Ce serait grandement apprécié.\n\nMerci."
|
||||||
|
}
|
||||||
|
]
|
||||||
4
public/emails.php
Normal file
4
public/emails.php
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
readfile(__DIR__.'/emails.json');
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.php
Normal file
17
public/index.php
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="favicon.ico">
|
||||||
|
<title>Modèles d'Email</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>Désolé mais cette application ne fonctionne pas sans JavaScript. Merci de l'activer pour continuer.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
31
src/App.vue
Normal file
31
src/App.vue
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<img alt="Vue logo" src="./assets/hero.png">
|
||||||
|
<EmailModel/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import EmailModel from './components/EmailModel.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'app',
|
||||||
|
components: {
|
||||||
|
EmailModel
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#app {
|
||||||
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/assets/hero.png
Normal file
BIN
src/assets/hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
73
src/components/EmailModel.vue
Normal file
73
src/components/EmailModel.vue
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<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>
|
||||||
13
src/main.js
Normal file
13
src/main.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import VueResource from 'vue-resource';
|
||||||
|
|
||||||
|
Vue.use(VueResource);
|
||||||
|
Vue.config.productionTip = false;
|
||||||
|
Vue.config.debug = true;
|
||||||
|
Vue.config.devtools = true;
|
||||||
|
Vue.http.options.emulateJSON = true;
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
render: h => h(App),
|
||||||
|
}).$mount('#app');
|
||||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
// vue.config.js
|
||||||
|
module.exports = {
|
||||||
|
publicPath: "/shikiryu/email-templates/dist/"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user