ItemCsvImport.vue 2 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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)
63
          .then(createdItems => {
64
65
            this.$router.push({ name: 'setItems' })
            this.displayInfo(
66
67
68
69
              [
                this.$t('item.import.success', { filename }),
                this.$tc('item.import.created', createdItems)
              ]
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
            )
          }).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>