From 16d152cff5638e5d0697cb5d357e0d36ae4b676b Mon Sep 17 00:00:00 2001
From: alexandre dewit <alexandre.dewit@student.uclouvain.be>
Date: Sun, 29 Mar 2020 15:41:20 +0200
Subject: [PATCH 1/9] feat(Icon): new symbol

- Upload Icon
---
 components/Symbols/Icon.vue                 |  1 +
 components/Symbols/library/UploadSymbol.vue | 11 +++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 components/Symbols/library/UploadSymbol.vue

diff --git a/components/Symbols/Icon.vue b/components/Symbols/Icon.vue
index 12f3a7b..aec0981 100644
--- a/components/Symbols/Icon.vue
+++ b/components/Symbols/Icon.vue
@@ -43,6 +43,7 @@
       mail: () => import('./library/MailSymbol.vue'),
       clock: () => import('./library/ClockSymbol.vue'),
       info: () => import('./library/InfoSymbol.vue'),
+      upload: () => import('./library/UploadSymbol.vue'),
       book: () => import('./library/BookSymbol.vue')
     }
   })
diff --git a/components/Symbols/library/UploadSymbol.vue b/components/Symbols/library/UploadSymbol.vue
new file mode 100644
index 0000000..06d59bc
--- /dev/null
+++ b/components/Symbols/library/UploadSymbol.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><title>upload</title><path d='M320,367.79h76c55,0,100-29.21,100-83.6s-53-81.47-96-83.6c-8.89-85.06-71-136.8-144-136.8-69,0-113.44,45.79-128,91.2-60,5.7-112,43.88-112,106.4s54,106.4,120,106.4h56' :class="themeStroke" style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><polyline :class="themeStroke" points='320 255.79 256 191.79 192 255.79' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line :class="themeStroke" x1='256' y1='448.21' x2='256' y2='207.79' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
+</template>
+
+<script lang="ts">
+  import Symbol from "../Symbol.vue";
+  import {Component, Mixins} from 'vue-property-decorator'
+
+  @Component
+  export default class UploadSymbol extends Mixins(Symbol) {}
+</script>

From 86b60e9f8e52cccd75c2e90459c21b3494ecd44b Mon Sep 17 00:00:00 2001
From: alexandre dewit <alexandre.dewit@student.uclouvain.be>
Date: Sun, 29 Mar 2020 15:41:39 +0200
Subject: [PATCH 2/9] feat(Form): add upload file Form component

---
 components/Gestion/ImportForm.vue | 197 ++++++++++++++++++++++++++++++
 1 file changed, 197 insertions(+)
 create mode 100644 components/Gestion/ImportForm.vue

diff --git a/components/Gestion/ImportForm.vue b/components/Gestion/ImportForm.vue
new file mode 100644
index 0000000..4972cb9
--- /dev/null
+++ b/components/Gestion/ImportForm.vue
@@ -0,0 +1,197 @@
+<template>
+  <section class="content">
+
+    <h1>{{title}}</h1>
+
+    <p>
+      Vous pouvez importer des exercices depuis cette interface en tenant compte de ce
+      <a href="https://sourcecodeoer.github.io/sourcecode_api/#operation/createMultipleExercises" target="_blank">
+        format</a>.
+    </p>
+    <ValidationObserver ref="observer" tag="form"
+                        @submit.prevent="validateBeforeSubmit">
+      <ValidationProvider tag="div"
+                          name="archive zip"
+                          rules="mimes:application/json"
+                          ref="fileObserver"
+                          v-slot="{ errors }">
+            <span class="label__name">
+              Uploadez votre fichier (json)
+            </span>
+        <input id="Archive" name="archive" ref="inputFile" @change="selectedFile" class="input--secondary-color"
+               type="file">
+        <label for="Archive">
+          <Icon type="archive" theme="theme--white"/>
+          {{labelFileText}}</label>
+        <span class="error-message">{{errors[0]}}</span>
+        <span class="message message--red" v-if="filename"
+              style="text-decoration: underline; cursor: pointer;"
+              @click="deleteFile">Supprimer le fichier</span>
+      </ValidationProvider>
+
+    </ValidationObserver>
+
+    <p class="disclaimer">* champs obligatoires</p>
+    <div class="cta__validate--wrapper">
+      <button @click="validateBeforeSubmit"
+              class="button--ternary-color-reverse cta__validate">
+        Importer les exercices
+      </button>
+    </div>
+  </section>
+
+</template>
+
+<script lang="ts">
+
+  import {Component, Vue, Prop, Ref} from "vue-property-decorator";
+  import {ValidationProvider, ValidationObserver} from 'vee-validate';
+  import {AxiosError} from "axios";
+  import Icon from "~/components/Symbols/Icon.vue";
+  import CustomSelect from "~/components/Input/CustomSelect.vue";
+
+  const debounce = require('lodash.debounce');
+
+  @Component({
+    components: {CustomSelect, ValidationObserver, ValidationProvider, Icon}
+  })
+  export default class ExerciseForm extends Vue {
+    /**
+     * Validation Observer for the zip archive and the url
+     */
+    @Ref() observer!: InstanceType<typeof ValidationObserver>;
+    /**
+     * Observer for the input file element
+     */
+    @Ref() inputFile!: HTMLInputElement;
+    /**
+     * Validation Observer for the zip archive and the url
+     */
+    @Ref() fileObserver!: InstanceType<typeof ValidationProvider>;
+
+    @Prop({type: String, required: true}) title!: string;
+
+    /**
+     * The name of the uploaded file
+     * Default is null
+     */
+    filename: string | null = null;
+
+
+    /**
+     * Returns the name of the uploaded file or a default message instead
+     */
+    protected get labelFileText() {
+      if (this.filename !== null) {
+        if (this.filename.length > 18) {
+          return this.filename.slice(0, 18) + '...'
+        }
+
+        return this.filename
+      }
+
+      return 'Choisir un fichier...'
+    }
+
+    /**
+     * Get the json file from the input file element
+     */
+    file(): File | null {
+
+      const inputFile: any = this.fileObserver.value;
+
+      if (!inputFile) {
+        return null;
+      }
+
+      return inputFile
+    }
+
+    /**
+     * Event for the changed state of the input file
+     */
+    async selectedFile(event: Event) {
+      const inputElement: HTMLInputElement | null = event.target as HTMLInputElement | null;
+
+      if (inputElement !== null) {
+        const files = inputElement.files;
+        if (files !== null) {
+          const file: File | null = files.item(0);
+          this.filename = file !== null ? file.name : null;
+          await this.fileObserver.validate(file);
+        }
+      }
+    }
+
+    /**
+     * Delete file from input and reset the filename
+     */
+    deleteFile() {
+      this.filename = null;
+      this.inputFile.files = null;
+      this.fileObserver.reset();
+    }
+
+    /**
+     * Validate the entire page and send the new exercise
+     */
+    async validateBeforeSubmit() {
+
+      // Basic validation form
+      const isValid = await this.observer.validate();
+
+      let reader = new FileReader();
+
+      if (isValid) {
+
+        const file: File | null = this.file();
+
+        if (file !== null) {
+
+          reader.readAsText(file, "UTF-8");
+          reader.onload = async (evt: any) => {
+            const text: string = evt.target.result;
+            try {
+              this.$nuxt.$loading.start();
+              await this.$axios.$post("/api/bulk/create_exercises", JSON.parse(text));
+              this.$displaySuccess("L'importation s'est correctement déroulée.");
+            } catch (e) {
+              const error = e as AxiosError;
+
+              if (error.response) {
+                const status = error.response.status;
+
+                if (status === 400) {
+                  this.$displayWarning("Votre fichier ne possède pas le bon format.")
+                } else if (status === 401) {
+                  this.$displayWarning("Vous n'êtes pas autorisé à effectuer cette action.")
+                } else if (status === 500) {
+                  this.$displayError("Une erreur est survenue depuis nos serveurs.")
+                } else {
+                  this.$displayError("Une erreur est survenue.")
+                }
+              } else {
+                this.$displayError("Une erreur est survenue.")
+              }
+
+            } finally {
+              this.$nuxt.$loading.finish();
+            }
+          };
+        }
+
+        requestAnimationFrame(() => {
+          this.observer.reset();
+        });
+
+      } else {
+        this.$displayWarning("Votre fichier ne possède pas le bon format.", {time: 5000})
+      }
+    }
+  }
+
+</script>
+
+<style lang="scss" scoped>
+  @import "../../assets/css/exercise-gestion";
+</style>

From 08d5d31a3e1a628976fd282ed2a7181060d9181d Mon Sep 17 00:00:00 2001
From: alexandre dewit <alexandre.dewit@student.uclouvain.be>
Date: Sun, 29 Mar 2020 15:42:17 +0200
Subject: [PATCH 3/9] feat(Upload): add upload exercices page

---
 .../importer-des-exercices/index.vue          | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 pages/administration/importer-des-exercices/index.vue

diff --git a/pages/administration/importer-des-exercices/index.vue b/pages/administration/importer-des-exercices/index.vue
new file mode 100644
index 0000000..b457036
--- /dev/null
+++ b/pages/administration/importer-des-exercices/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="container--with-menu" id="CreateExercise">
+    <div class="banner banner--with-shadow-bottom">
+      <div class="banner__nav">
+        <span>
+          Administration > Importation d'exercices
+        </span>
+      </div>
+    </div>
+
+    <div class="wrapper">
+      <ImportForm title="Importer des exercices"/>
+    </div>
+  </div>
+
+</template>
+
+
+<script lang="ts">
+  import {Component, Vue} from 'vue-property-decorator'
+  import ImportForm from "~/components/Gestion/ImportForm.vue";
+
+  @Component({
+    components: {ImportForm},
+    middleware: ['auth', 'admin']
+  })
+  export default class extends Vue {
+  }
+</script>
+

From 3fbb9a96f013bf6bda16c5e423aa222c83e6908f Mon Sep 17 00:00:00 2001
From: alexandre dewit <alexandre.dewit@student.uclouvain.be>
Date: Sun, 29 Mar 2020 15:42:37 +0200
Subject: [PATCH 4/9] feat(Menu): add new link (import exercises)

---
 components/Menu.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/Menu.vue b/components/Menu.vue
index d43e776..505fd9c 100644
--- a/components/Menu.vue
+++ b/components/Menu.vue
@@ -53,6 +53,12 @@
               </div>
               Exercices
             </nuxt-link>
+            <nuxt-link class="cta-link cta-link-with-arrow" tag="li" to="/administration/importer-des-exercices">
+              <div class="logo-link-wrapper">
+                <Icon type="upload" theme="theme--white"/>
+              </div>
+              Importer
+            </nuxt-link>
             <nuxt-link class="cta-link cta-link-with-arrow" tag="li" :class="isAdministrationCategoryLink" to="/administration/categories">
               <div class="logo-link-wrapper">
                 <Icon type="bookmark" theme="theme--white"/>

From 5809007dec5bb252ef5524242524c7b4fe2f09eb Mon Sep 17 00:00:00 2001
From: alexandre dewit <alexandre.dewit@student.uclouvain.be>
Date: Sun, 29 Mar 2020 17:31:00 +0200
Subject: [PATCH 5/9] workaround(Upload): utf8 file correctly parsed now

---
 components/Gestion/ImportForm.vue | 57 ++++++++++++++++---------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/components/Gestion/ImportForm.vue b/components/Gestion/ImportForm.vue
index 4972cb9..d53dde3 100644
--- a/components/Gestion/ImportForm.vue
+++ b/components/Gestion/ImportForm.vue
@@ -11,7 +11,7 @@
     <ValidationObserver ref="observer" tag="form"
                         @submit.prevent="validateBeforeSubmit">
       <ValidationProvider tag="div"
-                          name="archive zip"
+                          name="fichier json"
                           rules="mimes:application/json"
                           ref="fileObserver"
                           v-slot="{ errors }">
@@ -50,8 +50,6 @@
   import Icon from "~/components/Symbols/Icon.vue";
   import CustomSelect from "~/components/Input/CustomSelect.vue";
 
-  const debounce = require('lodash.debounce');
-
   @Component({
     components: {CustomSelect, ValidationObserver, ValidationProvider, Icon}
   })
@@ -147,37 +145,42 @@
         const file: File | null = this.file();
 
         if (file !== null) {
-
-          reader.readAsText(file, "UTF-8");
-          reader.onload = async (evt: any) => {
-            const text: string = evt.target.result;
-            try {
-              this.$nuxt.$loading.start();
-              await this.$axios.$post("/api/bulk/create_exercises", JSON.parse(text));
-              this.$displaySuccess("L'importation s'est correctement déroulée.");
-            } catch (e) {
-              const error = e as AxiosError;
-
-              if (error.response) {
-                const status = error.response.status;
-
-                if (status === 400) {
-                  this.$displayWarning("Votre fichier ne possède pas le bon format.")
-                } else if (status === 401) {
-                  this.$displayWarning("Vous n'êtes pas autorisé à effectuer cette action.")
-                } else if (status === 500) {
-                  this.$displayError("Une erreur est survenue depuis nos serveurs.")
+          reader.onloadend = async () => {
+            if (reader.result !== null) {
+              const buffer = reader.result as ArrayBuffer;
+              const string: string = new TextDecoder().decode(buffer);
+
+              try {
+                this.$nuxt.$loading.start();
+                await this.$axios.$post("/api/bulk/create_exercises", JSON.parse(string));
+                this.$displaySuccess("L'importation s'est correctement déroulée.");
+              } catch (e) {
+                const error = e as AxiosError;
+
+                if (error.response) {
+                  const status = error.response.status;
+
+                  if (status === 400) {
+                    this.$displayWarning("Votre fichier ne possède pas le bon format.")
+                  } else if (status === 401) {
+                    this.$displayWarning("Vous n'êtes pas autorisé à effectuer cette action.")
+                  } else if (status === 500) {
+                    this.$displayError("Une erreur est survenue depuis nos serveurs.")
+                  } else {
+                    this.$displayError("Une erreur est survenue.")
+                  }
                 } else {
                   this.$displayError("Une erreur est survenue.")
                 }
-              } else {
-                this.$displayError("Une erreur est survenue.")
+              } finally {
+                this.$nuxt.$loading.finish();
               }
 
-            } finally {
-              this.$nuxt.$loading.finish();
             }
           };
+
+          reader.readAsArrayBuffer(file);
+
         }
 
         requestAnimationFrame(() => {

From c12421854505175f940f643c7c0f98ebffcb7327 Mon Sep 17 00:00:00 2001
From: alexandre dewit <alexandre.dewit@student.uclouvain.be>
Date: Mon, 30 Mar 2020 18:06:05 +0200
Subject: [PATCH 6/9] fix(Export): now exporting json file with good mime type
 and charset (application/json;charset=utf-8

---
 pages/administration/exercices/index.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/pages/administration/exercices/index.vue b/pages/administration/exercices/index.vue
index 352d0ec..1cf8415 100644
--- a/pages/administration/exercices/index.vue
+++ b/pages/administration/exercices/index.vue
@@ -430,7 +430,9 @@
       try {
         const result = await this.$axios.$post('/api/export', {data: {exercise_ids: this.selectedExercises}});
 
-        download(JSON.stringify(result), "export.json", 'application/json');
+        const blob = new Blob([JSON.stringify(result)], {type: 'application/json;charset=utf-8;'});
+
+        download(blob, "export.json", 'application/json;charset=utf-8;');
 
         this.$displaySuccess("L'export a bien été effectué.");
         this.selectedExercises = [];
@@ -472,7 +474,9 @@
 
         const result = await this.$axios.$post('/api/export', exportExerciseRequest);
 
-        download(JSON.stringify(result), "export.json", 'application/json');
+        const blob = new Blob([JSON.stringify(result)], {type: 'application/json;charset=utf-8;'});
+
+        download(blob, "export.json", 'application/json;charset=utf-8;');
 
         this.$displaySuccess("L'export a bien été effectué.");
         this.selectedExercises = [];

From e228f0d8727924d89e4bfebd0fef191aafb1dc30 Mon Sep 17 00:00:00 2001
From: alexandre dewit <alexandre.dewit@student.uclouvain.be>
Date: Tue, 31 Mar 2020 15:27:06 +0200
Subject: [PATCH 7/9] feat(Form): add components to handle TextInput and
 FileInput

---
 components/Input/FileInput.vue | 123 +++++++++++++++++++++++++++++++++
 components/Input/TextInput.vue |  45 ++++++++++++
 2 files changed, 168 insertions(+)
 create mode 100644 components/Input/FileInput.vue
 create mode 100644 components/Input/TextInput.vue

diff --git a/components/Input/FileInput.vue b/components/Input/FileInput.vue
new file mode 100644
index 0000000..d773750
--- /dev/null
+++ b/components/Input/FileInput.vue
@@ -0,0 +1,123 @@
+<template>
+  <ValidationProvider ref="fileObserver" :tag="tag" :rules="rules" :name="name" :vid="vid" v-slot="{ errors }">
+    <slot></slot>
+    <input :id="name" name="archive" ref="inputFile" @change="selectedFile" class="input--secondary-color input__file"
+           type="file">
+    <label :for="name">
+      <Icon type="archive" theme="theme--white"/>
+      {{labelFileText}}</label>
+    <span class="error-message">{{errors[0]}}</span>
+    <slot name="footer"></slot>
+    <span class="message message--red" v-if="filename"
+          style="text-decoration: underline; cursor: pointer;"
+          @click="deleteFile">Supprimer le fichier</span>
+  </ValidationProvider>
+</template>
+
+<script lang="ts">
+  import {ValidationProvider} from 'vee-validate';
+  import {Component, Emit, Prop, Ref, Vue} from "vue-property-decorator";
+  import Icon from "~/components/Symbols/Icon.vue";
+
+  @Component({
+    components: {
+      Icon,
+      ValidationProvider
+    }
+  })
+  export default class TextInput extends Vue {
+
+    @Prop({type: [String, Object], default: ''}) rules!: string | object;
+    @Prop({type: String, default: ''}) name!: string;
+    @Prop({type: String, default: undefined}) vid!: string | undefined;
+    @Prop({type: String, default: 'div'}) tag!: string;
+    @Prop({type:String, default: ''}) defaultFilename!:string;
+
+    /**
+     * Observer for the input file element
+     */
+    @Ref() inputFile!: HTMLInputElement;
+    /**
+     * Validation Observer for the zip archive and the url
+     */
+    @Ref() fileObserver!: InstanceType<typeof ValidationProvider>;
+
+    /**
+     * The name of the uploaded file
+     * Default is null
+     */
+    filename: string | null = null;
+
+    /**
+     * Returns the name of the uploaded file or a default message instead
+     */
+    protected get labelFileText() {
+      if (this.filename !== null) {
+        if (this.filename.length > 18) {
+          return this.filename.slice(0, 18) + '...'
+        }
+
+        return this.filename
+      }
+
+      return 'Choisir un fichier...'
+    }
+
+
+    @Emit()
+    input(file: File | null) {
+      return file;
+    }
+
+    /**
+     * Get the file from the input file element
+     */
+    file(): File | null {
+      const inputFile: any = this.fileObserver.value;
+      if (!inputFile) {
+        return null;
+      }
+      return inputFile
+    }
+
+    /**
+     * Event for the changed state of the input file
+     */
+    async selectedFile() {
+      const inputElement: HTMLInputElement = this.inputFile;
+      const files = inputElement.files;
+      if (files !== null) {
+        const file: File | null = files.item(0);
+        this.filename = file !== null ? file.name : null;
+        await this.fileObserver.validate(file);
+        this.input(file);
+      }
+    }
+
+    /**
+     * Delete file from input and reset the filename
+     */
+    deleteFile() {
+      this.$nextTick(async () => {
+        this.filename = null;
+        this.inputFile.files = null;
+        this.inputFile.value = '';
+        this.fileObserver.value = undefined;
+        this.fileObserver.reset();
+        this.input(null);
+      });
+    }
+
+    mounted() {
+      this.filename = this.defaultFilename === '' ? null : this.defaultFilename;
+    }
+
+  }
+</script>
+
+
+<style lang="scss" scoped>
+  label {
+    align-self: flex-start;
+  }
+</style>
diff --git a/components/Input/TextInput.vue b/components/Input/TextInput.vue
new file mode 100644
index 0000000..31c970b
--- /dev/null
+++ b/components/Input/TextInput.vue
@@ -0,0 +1,45 @@
+<template>
+  <ValidationProvider :tag="tag" :rules="rules" :name="name" :vid="vid" v-slot="{ errors }">
+    <slot></slot>
+    <input class="input--grey" :type="type" :placeholder="placeholder" v-model="currentValue">
+    <span class="error-message">{{ errors[0] }}</span>
+  </ValidationProvider>
+</template>
+
+<script lang="ts">
+  import {ValidationProvider} from 'vee-validate';
+  import {Component, Emit, Prop, Vue, Watch} from "vue-property-decorator";
+
+  @Component({
+    components: {
+      ValidationProvider
+    }
+  })
+  export default class TextInput extends Vue {
+
+    @Prop({type: [String, Object], default: ''}) rules!: string | object;
+    @Prop({type: String, default: ''}) name!: string;
+    @Prop({type: String, default: undefined}) vid!: string | undefined;
+    @Prop({type: String, default: 'text'}) type!: string;
+    @Prop({type: String, default: 'div'}) tag!: string;
+    @Prop({type:String, default: ''}) defaultValue!:string;
+    @Prop({type:String, default: ''}) placeholder!:string;
+
+    currentValue: string = '';
+
+    @Watch('currentValue')
+    OnCurrentValueChange(val: string) {
+      this.input(val);
+    }
+
+    @Emit()
+    input(value: string) {
+      return value;
+    }
+
+    mounted() {
+      this.currentValue = this.defaultValue;
+    }
+
+  }
+</script>

From fe7239dabdd5e8da08d0f165c3f535f3683e0aaf Mon Sep 17 00:00:00 2001
From: alexandre dewit <alexandre.dewit@student.uclouvain.be>
Date: Tue, 31 Mar 2020 15:27:45 +0200
Subject: [PATCH 8/9] refactor(form): extract form logic into the right file
 (form.scss)

---
 assets/css/_exercise-gestion.scss | 25 -------------------------
 assets/css/form.scss              | 24 ++++++++++++++++++++++++
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/assets/css/_exercise-gestion.scss b/assets/css/_exercise-gestion.scss
index d1e0798..6023030 100644
--- a/assets/css/_exercise-gestion.scss
+++ b/assets/css/_exercise-gestion.scss
@@ -72,31 +72,6 @@ form {
     font-weight: bold;
   }
 
-  label[for=Archive] {
-    align-self: flex-start;
-  }
-
-  .message {
-    margin-top: 10px;
-    font-style: italic;
-    font-size: .75em;
-
-    &.message--primary-color {
-      color: $PRIMARY_COLOR
-    }
-
-    &.message--red {
-      color: $RED
-    }
-  }
-
-  .error-message {
-    margin-top: 10px;
-
-    &.error-message--red {
-      color: $RED;
-    }
-  }
 }
 
 .validation__tag {
diff --git a/assets/css/form.scss b/assets/css/form.scss
index 0b5a85b..3a9e986 100644
--- a/assets/css/form.scss
+++ b/assets/css/form.scss
@@ -95,6 +95,30 @@ input[type=file] {
   font-style: italic;
 }
 
+
+form {
+  .message {
+    margin-top: 10px;
+    font-style: italic;
+    font-size: .75em;
+
+    &.message--primary-color {
+      color: $PRIMARY_COLOR
+    }
+
+    &.message--red {
+      color: $RED
+    }
+  }
+
+  .error-message {
+    margin-top: 10px;
+
+    &.error-message--red {
+      color: $RED;
+    }
+  }
+}
 /**
   Custom theme of textarea
  */

From 42d159c0dbb9dc6fb576902273338962f0673523 Mon Sep 17 00:00:00 2001
From: alexandre dewit <alexandre.dewit@student.uclouvain.be>
Date: Tue, 31 Mar 2020 15:29:38 +0200
Subject: [PATCH 9/9] fix(ImportForm): no bug when adding, deleting then adding
 the same file

- also, refactor the code to let the FileInput component doing the job.
---
 components/Gestion/ImportForm.vue | 117 ++++++++----------------------
 1 file changed, 29 insertions(+), 88 deletions(-)

diff --git a/components/Gestion/ImportForm.vue b/components/Gestion/ImportForm.vue
index d53dde3..27dff96 100644
--- a/components/Gestion/ImportForm.vue
+++ b/components/Gestion/ImportForm.vue
@@ -6,28 +6,21 @@
     <p>
       Vous pouvez importer des exercices depuis cette interface en tenant compte de ce
       <a href="https://sourcecodeoer.github.io/sourcecode_api/#operation/createMultipleExercises" target="_blank">
-        format</a>.
+        format</a>. Votre fichier doit être en UTF-8 !
     </p>
-    <ValidationObserver ref="observer" tag="form"
+    <ValidationObserver ref="observer"
+                        tag="form"
                         @submit.prevent="validateBeforeSubmit">
-      <ValidationProvider tag="div"
-                          name="fichier json"
-                          rules="mimes:application/json"
-                          ref="fileObserver"
-                          v-slot="{ errors }">
+
+      <FileInput
+        ref="fileObserver"
+        rules="required|mimes:application/json"
+        name="fichier json"
+        @input="updateFile">
             <span class="label__name">
               Uploadez votre fichier (json)
             </span>
-        <input id="Archive" name="archive" ref="inputFile" @change="selectedFile" class="input--secondary-color"
-               type="file">
-        <label for="Archive">
-          <Icon type="archive" theme="theme--white"/>
-          {{labelFileText}}</label>
-        <span class="error-message">{{errors[0]}}</span>
-        <span class="message message--red" v-if="filename"
-              style="text-decoration: underline; cursor: pointer;"
-              @click="deleteFile">Supprimer le fichier</span>
-      </ValidationProvider>
+      </FileInput>
 
     </ValidationObserver>
 
@@ -45,89 +38,30 @@
 <script lang="ts">
 
   import {Component, Vue, Prop, Ref} from "vue-property-decorator";
-  import {ValidationProvider, ValidationObserver} from 'vee-validate';
+  import {ValidationObserver} from 'vee-validate';
   import {AxiosError} from "axios";
   import Icon from "~/components/Symbols/Icon.vue";
-  import CustomSelect from "~/components/Input/CustomSelect.vue";
+  import FileInput from "~/components/Input/FileInput.vue";
 
   @Component({
-    components: {CustomSelect, ValidationObserver, ValidationProvider, Icon}
+    components: {FileInput, ValidationObserver, Icon}
   })
   export default class ExerciseForm extends Vue {
     /**
      * Validation Observer for the zip archive and the url
      */
     @Ref() observer!: InstanceType<typeof ValidationObserver>;
-    /**
-     * Observer for the input file element
-     */
-    @Ref() inputFile!: HTMLInputElement;
-    /**
-     * Validation Observer for the zip archive and the url
-     */
-    @Ref() fileObserver!: InstanceType<typeof ValidationProvider>;
-
-    @Prop({type: String, required: true}) title!: string;
-
-    /**
-     * The name of the uploaded file
-     * Default is null
-     */
-    filename: string | null = null;
 
+    @Ref() fileObserver!: FileInput;
 
-    /**
-     * Returns the name of the uploaded file or a default message instead
-     */
-    protected get labelFileText() {
-      if (this.filename !== null) {
-        if (this.filename.length > 18) {
-          return this.filename.slice(0, 18) + '...'
-        }
-
-        return this.filename
-      }
-
-      return 'Choisir un fichier...'
-    }
-
-    /**
-     * Get the json file from the input file element
-     */
-    file(): File | null {
+    @Prop({type: String, required: true}) title!: string;
 
-      const inputFile: any = this.fileObserver.value;
+    form: {file: File | null} = {
+      file: null
+    };
 
-      if (!inputFile) {
-        return null;
-      }
-
-      return inputFile
-    }
-
-    /**
-     * Event for the changed state of the input file
-     */
-    async selectedFile(event: Event) {
-      const inputElement: HTMLInputElement | null = event.target as HTMLInputElement | null;
-
-      if (inputElement !== null) {
-        const files = inputElement.files;
-        if (files !== null) {
-          const file: File | null = files.item(0);
-          this.filename = file !== null ? file.name : null;
-          await this.fileObserver.validate(file);
-        }
-      }
-    }
-
-    /**
-     * Delete file from input and reset the filename
-     */
-    deleteFile() {
-      this.filename = null;
-      this.inputFile.files = null;
-      this.fileObserver.reset();
+    updateFile(file: File | null) {
+      this.form.file = file;
     }
 
     /**
@@ -142,7 +76,7 @@
 
       if (isValid) {
 
-        const file: File | null = this.file();
+        const file: File | null = this.form.file;
 
         if (file !== null) {
           reader.onloadend = async () => {
@@ -154,6 +88,13 @@
                 this.$nuxt.$loading.start();
                 await this.$axios.$post("/api/bulk/create_exercises", JSON.parse(string));
                 this.$displaySuccess("L'importation s'est correctement déroulée.");
+
+                this.$nextTick(() => {
+                  this.form.file;
+                  // @ts-ignore
+                  this.fileObserver.deleteFile();
+                  this.observer.reset();
+                })
               } catch (e) {
                 const error = e as AxiosError;
 
@@ -170,7 +111,7 @@
                     this.$displayError("Une erreur est survenue.")
                   }
                 } else {
-                  this.$displayError("Une erreur est survenue.")
+                  this.$displayError("Le contenu de votre fichier n'est pas correct.")
                 }
               } finally {
                 this.$nuxt.$loading.finish();