💬 Ajoute les catégories et des nouveaux textes

src/components/EmailModel.vue

@@ -1,17 +1,28 @@
 <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>
+    <form class="pure-form pure-form-aligned">
+        <fieldset>
+            <div class="pure-control-group">
+                <label for="topic">Catégorie :</label>
+                <select v-model="topic" v-on:change="selectTopic" id="topic">
+                    <option v-for="template in topics" :value="template" :key="template">
+                        {{ template }}
+                    </option>
+                </select>
+            </div>
+            <div class="pure-control-group">
+                <label for="subject">Sujet :</label>
+                <select v-model="selected" v-on:change="selectEmail" v-bind="topic === null">
+                    <option v-for="template in emails" :value="template.slug" :key="template.slug">
+                        {{ template.name }}
+                    </option>
+                </select>
+            </div>
+            <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>
+        </fieldset>
+    </form>
 </template>
 
 <script>
@@ -31,21 +42,28 @@
             return {
                 emails: [],
                 selected: "",
-                email: null
+                email: null,
+                topics: [],
+                topic: null
             }
         },
         beforeCreate() {
             let $this = this;
-            Vue.http.get("emails.php").then(response => {
-                $this.emails = response.body
+            Vue.http.get("topics.php").then(response => {
+                $this.topics = response.body
             });
         },
         methods: {
+            selectTopic: function() {
+                let $this = this;
+                Vue.http.post("emails.php", {"topic": $this.topic}).then(response => {
+                    $this.emails = response.body;
+                });
+            },
             selectEmail: function() {
                 let $this = this;
-                Vue.http.post("email.php", {"slug": $this.selected}).then(response => {
+                Vue.http.post("email.php", {"topic": $this.topic, "slug": $this.selected}).then(response => {
                     $this.email = response.body;
-                    // $this.email.body.replace(/(\r\n|\n\r|\r|\n)/g, '<br>$1');
                 });
             }
         }
@@ -53,19 +71,8 @@
 </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;
+    .pure-control-group {
+        text-align: left;
     }
     .email-subject, .email-body {
         text-align: left;