Show uploaded files in vacancy details page

src/views/Exercises/Edit/Vacancy.vue

@@ -405,16 +405,17 @@ export default {
               // Upload completed successfully, now we can get the download URL
               uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                 //console.log('File available at', downloadURL);
+                const file = item.file;
+                const fileExtension = file.name.split('.')[1]; 
+
                 if (downloadURL.includes('job-description')) {
 
                   // set job description database values
-                  this.exercise.uploadedJobDescriptionTemplate = true;
-                  this.exercise.jobDescUrl = downloadURL;
+                  this.exercise.uploadedJobDescriptionTemplate = `job-description.${fileExtension}`;
                 } else if (downloadURL.includes('terms-and-conditions')) {
 
                   // set terms and conditions database values
-                  this.exercise.uploadedTermsAndConditionsTemplate = true;
-                  this.exercise.tAndCUrl = downloadURL;
+                  this.exercise.uploadedTermsAndConditionsTemplate = `terms-and-conditions.${fileExtension}`;
                 }
 
                 // don't forget to save

src/views/Exercises/Show/Vacancy.vue

@@ -121,27 +121,77 @@
           Has uploaded Job Description Template
         </dt>
         <dd class="govuk-summary-list__value">
-          <a :href="exercise.jobDescUrl">{{ exercise.uploadedJobDescriptionTemplate }}</a>
+          <a @click="download(exercise.uploadedJobDescriptionTemplate)">{{ exercise.uploadedJobDescriptionTemplate }}</a>
         </dd>
       </div>
       <div class="govuk-summary-list__row">
         <dt class="govuk-summary-list__key">
           Has uploaded Terms and Conditions Template
         </dt>
         <dd class="govuk-summary-list__value">
-          <a :href="exercise.tAndCUrl">{{ exercise.uploadedTermsAndConditionsTemplate }}</a>
+          <a @click="download(exercise.uploadedTermsAndConditionsTemplate)">{{ exercise.uploadedTermsAndConditionsTemplate }}</a>
         </dd>
       </div>              
     </dl>
   </div>
 </template>
 
 <script>
+import firebase from 'firebase';
+
 export default {
   computed: {
     exercise() {
       return this.$store.getters['exerciseDocument/data']();
     },
+    userId() {
+      return this.$store.state.auth.currentUser.uid;
+    },
+    exerciseId() {
+      return this.$store.getters['exerciseDocument/id'];
+    },
+  },
+  methods: {
+    download(fileName) {
+      // Create a reference to the file we want to download
+      const fileSavePath = `exercise-${this.exerciseId}/${fileName}`;
+
+      // Get a reference to the storage service, which is used to create references in your storage bucket
+      const storage = firebase.storage();
+
+      // Create a storage reference from our storage service
+      const storageRef = storage.ref();
+
+      // Create a reference with an initial file path and name
+      const fileNameRef = storageRef.child(fileSavePath);
+
+      // Get the download URL
+      fileNameRef.getDownloadURL().then((url) => {
+        // open url in another window
+        window.open(url);
+      }).catch((error) => {
+
+        // A full list of error codes is available at
+        // https://firebase.google.com/docs/storage/web/handle-errors
+        switch (error.code) {
+        case 'storage/object-not-found':
+          // File doesn't exist
+          break;
+
+        case 'storage/unauthorized':
+          // User doesn't have permission to access the object
+          break;
+
+        case 'storage/canceled':
+          // User canceled the upload
+          break;
+
+        case 'storage/unknown':
+          // Unknown error occurred, inspect the server response
+          break;
+        }
+      });
+    },
   },
 };
 </script>