Merge pull request #54 from SourceCodeOER/fix_fetch_exercise

fix(file): download file link

Author: dewita

components/Gestion/ExerciseForm.vue

@@ -133,9 +133,9 @@
           <Icon type="archive" theme="theme--white"/>
           {{labelFileText}}</label>
         <span class="error-message">{{errors[0]}}</span>
-        <a v-if="exercise && exercise.file && filename" :href="`${cdnLink}/${exercise.file}`" target="_blank"
+        <span v-if="exercise && exercise.file && filename" @click="downloadFile"
            class="message message--primary-color"
-           style="text-decoration: underline; cursor: pointer;">Télécharger le fichier</a>
+           style="text-decoration: underline; cursor: pointer;">Télécharger le fichier</span>
         <span class="message message--red" v-if="filename"
               style="text-decoration: underline; cursor: pointer;"
               @click="deleteFile">Supprimer le fichier</span>
@@ -209,6 +209,9 @@
   import TagColorLegend from "~/components/Tag/TagColorLegend.vue";
 
   const debounce = require('lodash.debounce');
+
+  const download = require('downloadjs');
+
   @Component({
     components: {TagColorLegend, CustomSelect, ValidationObserver, ValidationProvider, RichTextEditor, Tag, Icon}
   })
@@ -366,6 +369,34 @@
       }
     }
 
+    async downloadFile() {
+      if(this.exercise) {
+        try {
+
+          const result:Blob = await this.$axios.$get(`/files/${this.exercise.file}`, {responseType: 'blob'});
+
+          download(result, "archive.zip", result.type);
+
+          this.$displaySuccess("Téléchargement éffectué.");
+
+        } catch (e) {
+          const error = e as AxiosError;
+
+          if (error.response) {
+            const status: number = error.response.status;
+
+            if (status === 404) {
+              this.$displayError(`Ce fichier est introuvable`);
+            } else if (status === 500) {
+              this.$displayError(`Une erreur est survenue lors du téléchargement.`);
+            }
+          } else {
+            this.$displayError(`Une erreur est survenue lors du téléchargement.`);
+          }
+        }
+      }
+    }
+
     mounted() {
       if (process.client && this.exercise !== undefined) {
         this.form.title = this.exercise.title;

components/Panel/Item/DetailsPanel.vue

@@ -22,11 +22,11 @@
           </button>
         </a>
 
-        <a v-if="!!exercise.file" :href="`${cdnLink}/${exercise.file}`" target="_blank" class="button-wrapper">
-          <button class=" button--ternary-color-reverse">
+        <div v-if="!!exercise.file" @click="downloadFile" class="button-wrapper">
+          <button class="button--ternary-color-reverse">
             Télécharger l'exercice
           </button>
-        </a>
+        </div>
 
       </div>
     </div>
@@ -41,6 +41,8 @@
   import {BusEvent} from "~/components/Event/BusEvent";
   import {AxiosError} from "axios";
 
+  const download = require('downloadjs');
+
   @Component({
     components: {Rating, Icon}
   })
@@ -91,6 +93,32 @@
       return arrayOfTagByCategories
     }
 
+    async downloadFile() {
+      try {
+
+        const result:Blob = await this.$axios.$get(`/files/${this.exercise.file}`, {responseType: 'blob'});
+
+        download(result, "archive.zip", result.type);
+
+        this.$displaySuccess("Téléchargement éffectué.");
+
+      } catch (e) {
+        const error = e as AxiosError;
+
+        if (error.response) {
+          const status: number = error.response.status;
+
+          if (status === 404) {
+            this.$displayError(`Ce fichier est introuvable`);
+          } else if (status === 500) {
+            this.$displayError(`Une erreur est survenue lors du téléchargement.`);
+          }
+        } else {
+          this.$displayError(`Une erreur est survenue lors du téléchargement.`);
+        }
+      }
+    }
+
     created() {
       const link: string | undefined = this.$accessor.sharedEnv.CDN_SERVER;
       this.cdnLink = link ? link : ''

nuxt.config.js

@@ -31,6 +31,7 @@ module.exports = {
   },
   proxy: {
     '/api/': {target: undefined},
+    '/files/': {target: undefined},
     '/auth/': {target: undefined}
   },
   auth: {

server/utils/extendedNuxtConfig.js

@@ -14,9 +14,10 @@ const nuxtConfig = {
 
 // Do final object manipulation for things where
 // extending objects is not appropriate
-if (nuxtConfig.proxy && nuxtConfig.proxy['/api/'] && nuxtConfig.proxy['/auth/']) {
+if (nuxtConfig.proxy && nuxtConfig.proxy['/files/'] && nuxtConfig.proxy['/api/'] && nuxtConfig.proxy['/auth/']) {
   nuxtConfig.proxy['/api/'].target = config.get('API_SERVER');
   nuxtConfig.proxy['/auth/'].target = config.get('API_SERVER');
+  nuxtConfig.proxy['/files/'].target = config.get('API_SERVER');
 }
 
 module.exports = nuxtConfig;