udate sick form comments and object struction

src/views/SickForm.vue

@@ -5,8 +5,9 @@
     enctype="multipart/form-data"
   >
   <div class="row">
+    <!-- 1st col of inputs -->
   <div class="col-md-8">
-    <!--1. name-->
+    <!--1. row -> name-->
     <div class="form-row" >
       <div class="form-group col-md-5 col-sm-12 col-sm-12">
         <input
@@ -39,7 +40,7 @@
         />
       </div>
     </div>
-      <!--2. Email && phonenumber -->
+      <!--2. row -> Email && phonenumber -->
     <div class="form-row">
       <div class="form-group col-md-6 col-sm-12">
         <input
@@ -62,7 +63,7 @@
         />
       </div>
     </div>
-      <!--3. Adress street haus num -->
+      <!--3. row -> Adress street haus num -->
     <div class="form-row">
       <div class="form-group col-md-9">
         <input
@@ -85,7 +86,7 @@
         />
       </div>
     </div>
-    <!-- 4. Adress city + country-->
+    <!-- 4. row -> Adress city + country-->
     <div class="form-row">
       <div class="form-group col-md-2">
         <input type="text" class="form-control" id="inputZip" placeholder="Postleizahl" v-model="patientStudent.Address.ZIPcode" required />
@@ -101,7 +102,7 @@
      </select>
     </div>
     </div>
-    <!-- 5.date select and file upload -->
+    <!-- 5. row -> date select and file upload -->
      <div class="form-row">
       <div class="form-group col-md-4">
         <label for="date-input-start">Startdatum</label>
@@ -118,6 +119,7 @@
       </div>
     </div>
   </div>
+  <!-- 2nd col of inputs -->
   <div class="col-md-4">
     <div class="form-row h-50 p-1">
     <div class="form-group col-md-12">
@@ -139,7 +141,7 @@
           type="text-area"
           class="form-control h-75"
           id="mess"
-          v-model="Message"
+          v-model="patientStudent.Message"
           required
         >
         </textarea>
@@ -172,14 +174,14 @@ export default {
           City: '',
           ZIPcode: '',
           selectedCountry: 'Germany'
-        }
+        },
+        Message: ''
       },
       SickNote: {
         diagnose: '',
         StartDate: new Date().getDate(),
         EndDate: new Date().getDate()
       },
-      Message: '',
       countries:
       [
         { name: 'Afghanistan', code: 'AF' },
@@ -439,18 +441,18 @@ export default {
       const sizeLimit = 2000000 // 2 megabyte
       const fileExtension = file.name.split('.').pop()
       console.log(fileExtension)
-      if (!allowedExtentions.includes(fileExtension)) { // extention validation
+      if (!allowedExtentions.includes(fileExtension)) { // check extention validation
         this.$refs.file.value = null // delete the file from selection
-        Swal.fire({
+        Swal.fire({ //  rise up an Alret
           title: 'Fehler!',
           text: 'Die Datei muss jpg, jpeg, png oder pdf',
           icon: 'error',
           confirmButtonColor: '#1a4273',
           background: '#dadada'
         })
-      } else if (file.size > sizeLimit) { // size validation
+      } else if (file.size > sizeLimit) { // check size validation
         this.$refs.file.value = null
-        Swal.fire({
+        Swal.fire({ //  rise up an Alret
           title: 'Fehler!',
           text: 'Die Datei ist zu Groß',
           icon: 'error',
@@ -476,8 +478,7 @@ export default {
       // FormData is a dictionary type -> (key , value)
       formData.append('patientStudent', JSON.stringify(this.patientStudent))
       formData.append('SickNote', JSON.stringify(this.SickNote))
-      formData.append('Message', JSON.stringify(this.Message))
-      // add file to the message body
+      // add file to the post request body
       formData.append('sickNoteEvidence', this.EvidenceFile)
 
       // perform the post request
@@ -490,7 +491,7 @@ export default {
 
       const data = res.data
       console.log(data)
-      // trigger alert the the form is accepted
+      // trigger alert that the form was accepted
       Swal.fire({
         title: 'Gesandet!',
         text: 'Danke für Ihre Meldung',
@@ -498,6 +499,7 @@ export default {
         confirmButtonColor: '#1a4273',
         background: '#dadada'
       })
+
       // reset the form
       event.target.reset()
     }