✨ import items from uploaded csv file

src/i18n/en_US.js

@@ -253,6 +253,12 @@ export const en_US = {
     detail: "@:item.label @.lower:detail",
     edit: "Item edition",
     export: "Datacite export",
+    import: {
+      button: "CSV import",
+      success: "Import succeed !",
+      error: "Items haven't been created.",
+      launch: "Launch"
+    },
     file: "File",
     label: "Item",
     none: "No item.",

src/i18n/fr_FR.js

@@ -260,6 +260,12 @@ export const fr_FR = {
     detail: "@:detail de l'@.lower:item.label ",
     edit: "Editer l'élément",
     export: "Export Datacite",
+    import: {
+      button: "Import CSV",
+      success: "Import réussi !",
+      error: "Les objets n'ont pas pu être créés.",
+      launch: "Lancer l'import"
+    },
     file: "Fichier",
     label: "Élément",
     none: "Aucun élément.",

src/router/index.js

@@ -276,6 +276,11 @@ export const routes = [
         name: 'setItemCreate',
         component: () => import(/* webpackChunkName "set" */ '@/views/items/ItemCreate'),
       },
+      {
+        path: 'items/import',
+        name: 'setItemImport',
+        component: () => import(/* webpackChunkName "set" */ '@/views/items/ItemCsvImport'),
+      },
       {
         path: 'template/:templateId',
         name: 'setTemplate',

src/store/item.js

@@ -330,6 +330,19 @@ const Item = {
               {root: true}
           ))
     },
+    itemCSVImport({commit, rootGetters}, file) {
+      const setId = rootGetters['set/setId']
+      const formData = new FormData()
+      formData.append("Content-Type", file.type)
+      formData.append("csv", file)
+      formData.append("set_id", setId)
+      return authority.post(
+          `items/import_csv/`,
+          formData
+      ).then(response => {
+        commit('SET_ITEMS', response.data)
+      })
+    },
     /**
      * Create a copy of current item in the same set
      * changing its title and resetting associated files

src/views/items/ItemCsvImport.vue

+<template>
+  <v-form v-model="isValid" ref="form" lazy-validation>
+    <v-file-input
+      show-size
+      :label="$t('file.upload.label')"
+      @change="updateFileToLoad"
+      :rules="requiredRule"
+    />
+    <v-progress-linear
+      v-show="currentFile"
+      color="primary"
+      :indeterminate="loading"
+      :value="progress"
+    />
+    <v-btn
+      tile
+      elevation="0"
+      color="secondary"
+      class="mr-2"
+      @click="onImport"
+    >
+      {{ $t('file.upload.button') }}
+    </v-btn>
+    <v-btn
+      tile
+      elevation="0"
+      color="primary"
+      :to="{name: 'setItems'}"
+    >
+      {{ $t('btn.cancel') }}
+    </v-btn>
+  </v-form>
+</template>
+
+<script>
+import {mapActions} from 'vuex'
+
+export default {
+  name: "ItemCsvImport",
+  data() {
+    return {
+      isValid: false,
+      requiredRule: [
+        file => !!file || "un fichier est requis",
+        file => !!file && file.type.slice(-3) === 'csv' || "le fichier doit être au format csv",
+      ],
+      loading: false,
+      progress: 0,
+      currentFile: undefined,
+    }
+  },
+  methods: {
+    ...mapActions('dialog', ['displayInfo', 'displayError']),
+    updateFileToLoad(file) {
+      this.progress = 0
+      this.currentFile = file
+    },
+    onImport() {
+      if (this.$refs.form.validate()) {
+        this.loading = true
+        const filename = this.currentFile.name
+        this.$store.dispatch('item/itemCSVImport', this.currentFile)
+          .then(() => {
+            this.$router.push({ name: 'setItems' })
+            this.displayInfo(
+              this.$t('item.import.success', { filename }),
+            )
+          }).catch(error => {
+            this.progress = 0
+            this.loading = false
+            this.$refs.form.reset()
+            this.displayError({
+              error,
+              message: this.$t('item.import.error', { filename })
+            })
+        })
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/sets/Set.vue

@@ -142,23 +142,23 @@ export default {
         {
           id: 'detail',
           label: this.$t('detail'),
-          to: `/sets/${this.set.id}/detail`,
-          isDisplayed: true,
+          to: {name: 'setDetail'},
         },
         {
           id: 'items',
           label: this.$t('item.plural'),
-          to: `/sets/${this.set.id}/items`,
-          isDisplayed: true,
+          to: {name: 'setItems'},
         },
-        {
+
+      ]
+      if (this.set.project.isManager) {
+        tabs.push({
           id: 'template',
           label: this.$t('set.template'),
           to: { name: 'setTemplate', params: { templateId: this.set.template.id } },
-          isDisplayed: this.set.project.isManager,
-        },
-      ];
-      return tabs.filter((tab) => tab.isDisplayed);
+        })
+      }
+      return tabs
     },
     shareItemsHeaders() {
       return [