add mailto link

frontend/src/api/services/MailTemplateService.ts

@@ -29,6 +29,15 @@ class MailTemplateService extends EchoService {
     return {} as EchoPromise<MailTemplate>
   }
 
+  /**
+   * Get all mail templates
+   */
+
+  @GET('/mailtemplates/')
+  getMailTemplates(): EchoPromise<MailTemplate[]> {
+    return {} as EchoPromise<MailTemplate[]>
+  }
+
   /**
    * Update mail template
    */

frontend/src/components/admin/mail/SendMail.vue

@@ -2,13 +2,15 @@
   <v-container>
     <h1 align="center">Mail versturen</h1>
     <FotoCardSyndicus align="center" :data="data.post"/>
+    <label class="black-text">Aan</label>
+    <v-text-field class="black-text" readonly >{{ data.syndicusEmail }}</v-text-field>
     <label class="black-text">Template</label>
     <v-autocomplete
       clearable
       outlined
       :items="this.templates"
       item-title="name"
-      item-value="description"
+      item-value="content"
       v-model="this.description"
       v-on:slotchange="updateArguments"
     ></v-autocomplete>
@@ -20,27 +22,42 @@
           <v-text-field v-model="this.inputArguments[index]"></v-text-field>
         </div>
       </div>
+      <h2>Onderwerp</h2>
+      <v-text-field v-model="this.subject"></v-text-field>
       <h2>Bericht</h2>
       <v-container v-html="formattedText"  style="white-space: pre-wrap; font-size: 16px" class="container-border"/>
     </div>
     <v-container align="center">
       <NormalButton text="Stuur email" :parent-function="sendMail"/>
     </v-container>
   </v-container>
+<a :href="'mailto:'+ data.syndicusEmail +'?subject=' +  this.subject +'&body=' + getMailBody()">Send Email</a>
+
 </template>
 
 <script>
+
+/**
+ * SendMail component wordt gebruikt door als props een post object met de volgende keys mee te geven:
+ *    timeStamp: String
+ *    description: String
+ *    imageURL: String
+ * Dit komt overeen met de velden van een post die de student gemaakt heeft.
+ */
+
 import FotoCardSyndicus from "@/components/syndicus/FotoCardSyndicus.vue";
 import NormalButton from "@/components/NormalButton.vue";
+import {RequestHandler} from "@/api/RequestHandler";
+import MailTemplateService from "@/api/services/MailTemplateService";
 
 export default {
   name: 'SendMail',
   props: {
     data: {
-      type: Object,
       default: () => ({
+        syndicusEmail: '[email protected]',
         post: {
-          timeStamp: 'Empty',
+          timeStamp: new Date(),
           description: 'fghsljdfbglbsdljbgjlbflsbvjfbsvdblkfdsjgmfjsdgljlfkdjsgljdflgsljflgjldfv',
           imageURL: 'https://cdn.pixabay.com/photo/2022/08/31/13/05/sea-7423274__480.jpg'
         }
@@ -49,18 +66,18 @@ export default {
   },
   data: () => ({
     description: null,
-    templates: [
-      {id: 1, name: 'Template 1', description: 'Beste #arg1#,\n\n#arg2#  #arg1#  dit is echt een mega lange text om te testen of het wel goed gaat, maar' +
-      'maar blijkbaar\ntesten of het wel goed gaat, maar\n\nMet vriendelijke groeten #naam#'},
-      {id: 2, name: 'Template 2', description: 'Template 2'},
-
-    ],
+    templates: [],
     positionsArguments: [],
-    inputArguments: []
+    inputArguments: [],
+    subject: ''
   }),
   methods: {
     sendMail() {
-      console.log(this.getDescriptionWithArguments());
+      console.log("send mail")
+    },
+    getMailBody() {
+      return encodeURIComponent(this.getDescriptionWithArguments()).replace(/%0A/g, '%0D%0A')+
+        encodeURIComponent("\n\nStudent:\nOpmerking student: " + this.$props.data.post.description + "\nTijdstip: " + this.$props.data.post.timeStamp.toString()+"\nZie bijlage voor foto.\n\n").replace(/%0A/g, '%0D%0A');
     },
     updateArguments() {
       this.positionsArguments = [];
@@ -100,8 +117,15 @@ export default {
       return this.getDescriptionWithArguments().replace(/#([^#]*)#/g, '<b>$1</b>');
     }
   },
-  mounted() {
-    //TODO get templates from backend
+  async mounted() {
+    await RequestHandler.handle(
+      MailTemplateService.getMailTemplates(),
+      {
+        id: 'getMailTemplateError',
+        style: "SNACKBAR",
+      }).then((response) => {
+      this.templates = response
+    })
   },
   components: {NormalButton, FotoCardSyndicus}
 }