StudentListReverseMapper.vue

<template>
  <v-layout row align-center>
    <file-select v-model="file" display-text="Select map file"/>
    <v-tooltip top>
      <v-btn
        icon slot="activator"
        @click="readMapFileAndApply"
      >
        <v-icon>vpn_key</v-icon>
      </v-btn>
      <span>Apply mapping</span>
    </v-tooltip>
  </v-layout>
</template>

<script>
import FileSelect from '@/components/util/FileSelect'
import { parseCSVMapMixin } from '@/components/mixins/mixins'

export default {
  components: {FileSelect},
  name: 'student-list-reverse-mapper',
  mixins: [parseCSVMapMixin],
  data () {
    return {
      file: null,
      fileReader: new FileReader()
    }
  },
  methods: {
    readMapFileAndApply () {
      this.fileReader.onload = event => {
        const studentMap = this.parseCSVMap(event.target.result)
        this.reverseMapStudents(studentMap)
      }
      this.fileReader.readAsText(this.file)
    },
    reverseMapStudents (studentMap) {
      this.$store.commit('SET_STUDENT_MAP', studentMap)
      this.$store.commit('SET_STUDENTS', Object.values(this.$store.state.students))
    }
  }
}
</script>

<style scoped>

</style>