✨ csv export of templates

src/i18n/en_US.js

@@ -46,6 +46,7 @@ export const en_US = {
     close: "Close",
     confirm: "Confirm",
     delete: "Delete",
+    download: "Télécharger",
     modify: "Modify",
     remove: "Remove",
     send: "Send",
@@ -647,6 +648,12 @@ export const en_US = {
     continue: "Continue with {method}",
   },
   template: {
+    csv: {
+      export: 'CSV export',
+      warning: 'Warning',
+      noOptions: `Exported file do not contain available options of fields such as select, checkboxes...
+            <br>Please keep this in mind while building your import file.`
+    },
     label: 'Template',
     plural: 'Templates',
     scopes: {

src/i18n/fr_FR.js

@@ -52,6 +52,7 @@ export const fr_FR = {
     close: "Fermer",
     confirm: "Confirmer",
     delete: "Supprimer",
+    download: "Télécharger",
     modify: "Modifier",
     remove: "Retirer",
     send: "Envoyer",
@@ -661,6 +662,12 @@ export const fr_FR = {
     continue: "Continuer avec {method}",
   },
   template: {
+    csv: {
+      export: 'Export CSV',
+      warning: 'Attention',
+      noOption: `Le fichier exporté ne contient pas les contraintes de saisie telles que des listes déroulantes, cases à cocher....
+       <br>Soyez y attentif lors de la construction de votre fichier d'import.`
+    },
     label: 'Template',
     plural: 'Templates',
     scopes: {

src/store/template.js

@@ -170,6 +170,22 @@ const Template = {
               {root: true}
           ))
     },
+    /**
+     * export current template as csv
+     */
+    exportCsv({getters}) {
+      const templateId = getters['current'].id
+      return authority.get(
+          `templates/${templateId}/export_as_csv`,
+          {responseType: 'arraybuffer'}
+      ).then(response => {
+          let blob = new Blob([response.data], { type: 'application/csv' })
+          let link = document.createElement('a')
+          link.href = window.URL.createObjectURL(blob)
+          link.download = 'template.csv'
+          link.click()
+      })
+    },
     /**
      * Retrieve all templates of current project in store
      *

src/views/templates/Template.vue

@@ -7,6 +7,15 @@
     <v-card-title>
       {{ template.name }}
       <v-spacer />
+      <v-btn
+          class="mr-2"
+          tile
+          elevation="0"
+          color="secondary"
+          @click="csvOpen = true"
+      >
+        {{ $t('template.csv.export') }}
+      </v-btn>
       <v-btn
         v-if="template.scope > 2"
         tile
@@ -32,6 +41,19 @@
         :is-submit-button-displayed="false"
       />
     </v-card-text>
+    <v-dialog v-model="csvOpen">
+      <v-card>
+        <v-card-title>
+          {{ $t ('template.csv.warning') }}
+        </v-card-title>
+        <v-card-text v-html="$t ('template.csv.noOption')">
+        </v-card-text>
+        <v-card-actions>
+          <v-btn @click="csvOpen = false">{{$t('btn.cancel')}}</v-btn>
+          <v-btn @click="csvExport">{{$t('btn.download')}}</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
@@ -58,6 +80,7 @@ export default {
     TemplateForm,
   },
   data: () => ({
+    csvOpen: false,
     editMode: false,
   }),
   computed: {
@@ -65,6 +88,11 @@ export default {
   },
   methods: {
     ...mapActions('template', ['updateTemplate']),
+    csvExport() {
+      this.$store.dispatch('template/exportCsv').then(() => {
+        this.csvOpen = false
+      })
+    },
     onSaveTemplate(template) {
       this.updateTemplate( {
         ...this.template,