check input en cleanup

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

@@ -3,7 +3,7 @@
     <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>
+    <v-text-field class="black-text" readonly>{{ data.syndicusEmail }}</v-text-field>
     <label class="black-text">Template</label>
     <v-autocomplete
       clearable
@@ -18,31 +18,31 @@
       <div v-if="this.inputArguments.length !== 0">
         <h2>Argumenten</h2>
         <div v-for="(arg, index) in this.positionsArguments">
-          <label>{{arg.substring(1, arg.length-1)}}</label>
+          <label>{{ arg.substring(1, arg.length - 1) }}</label>
           <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"/>
+      <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:
+ * SendMail component wordt gebruikt door als props een data object met post object met volgende keys mee geven:
  *    timeStamp: String
  *    description: String
  *    imageURL: String
  * Dit komt overeen met de velden van een post die de student gemaakt heeft.
+ * Ook moet je in het data object de syndicusEmail meegeven.
  */
 
 import FotoCardSyndicus from "@/components/syndicus/FotoCardSyndicus.vue";
@@ -58,8 +58,8 @@ export default {
         syndicusEmail: '[email protected]',
         post: {
           timeStamp: new Date(),
-          description: 'fghsljdfbglbsdljbgjlbflsbvjfbsvdblkfdsjgmfjsdgljlfkdjsgljdflgsljflgjldfv',
-          imageURL: 'https://cdn.pixabay.com/photo/2022/08/31/13/05/sea-7423274__480.jpg'
+          description: '',
+          imageURL: ''
         }
       })
     }
@@ -73,11 +73,24 @@ export default {
   }),
   methods: {
     sendMail() {
-      console.log("send mail")
+      const email = this.$props.data.syndicusEmail;
+      const subject = this.subject;
+      const body = this.getMailBody();
+
+      if (!(email && subject && body)) {
+        this.$store.dispatch("snackbar/open", {
+          message: "Vul alle velden in",
+          color: "error"
+        })
+        return
+      }
+
+      window.location.href = `mailto:${email}?subject=${subject}&body=${body}`;
+
     },
     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');
+      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 = [];
@@ -87,7 +100,7 @@ export default {
 
       while ((match = regex.exec(this.description)) !== null) {
         const argument = match[1];
-        if (!this.positionsArguments.includes(argument)){
+        if (!this.positionsArguments.includes(argument)) {
           this.positionsArguments.push(argument);
         }
       }
@@ -108,7 +121,7 @@ export default {
     }
   },
   watch: {
-    description(){
+    description() {
       this.updateArguments();
     }
   },