From 0dc7f8b6553da1102e276f2484937fdfdc1c108b Mon Sep 17 00:00:00 2001
From: Thilo Wischmeyer <thwischm@gmail.com>
Date: Mon, 8 Mar 2021 14:13:19 +0100
Subject: [PATCH] Replaced custom file picker with the one from vuetify
---
frontend/src/components/ImportDialog.vue | 9 +--
frontend/src/components/export/DataExport.vue | 11 ++--
.../src/components/export/InstanceExport.vue | 11 ++--
.../components/student_list/StudentList.vue | 29 ++++-----
.../student_list/StudentListReverseMapper.vue | 39 +++++-------
frontend/src/components/util/FileSelect.vue | 63 -------------------
6 files changed, 41 insertions(+), 121 deletions(-)
delete mode 100644 frontend/src/components/util/FileSelect.vue
diff --git a/frontend/src/components/ImportDialog.vue b/frontend/src/components/ImportDialog.vue
index c6c46935..3ac78726 100644
--- a/frontend/src/components/ImportDialog.vue
+++ b/frontend/src/components/ImportDialog.vue
@@ -17,9 +17,10 @@
>rusty-hektor</a> to convert
and pseudonomize ILIAS output.
</p>
- <file-select
+ <v-file-input
v-model="hektorFile"
- display-text="Select json file"
+ label="Select file"
+ accept="application/JSON"
/>
</v-card-text>
<v-card-actions>
@@ -42,14 +43,10 @@
</template>
<script>
- import FileSelect from '@/components/util/FileSelect.vue'
import { importData } from '@/api'
export default {
name: 'ImportDialog',
- components: {
- FileSelect
- },
data: () => {
return {
show: true,
diff --git a/frontend/src/components/export/DataExport.vue b/frontend/src/components/export/DataExport.vue
index 9f84ad7a..61b1213e 100644
--- a/frontend/src/components/export/DataExport.vue
+++ b/frontend/src/components/export/DataExport.vue
@@ -16,10 +16,10 @@
align="center"
>
- <file-select
+ <v-file-input
v-model="mapFile"
- display-text="Select map file"
- class="ma-3"
+ label="Map file"
+ accept="application/JSON"
/>
<span>Without the mapping, the data will still be obfuscated.</span>
</v-row>
@@ -85,13 +85,10 @@
import Component, { mixins } from 'vue-class-component'
import { getters } from '@/store/getters'
import ax, { StudentExportItem, fetchStudentExportData } from '@/api'
-import FileSelect from '@/components/util/FileSelect.vue'
import { mutations as mut } from '@/store/mutations'
import { ExportType, exportMixin } from '@/components/mixins/exportMixin.ts'
-@Component({
- components: { FileSelect }
-})
+@Component
export default class DataExport extends mixins(exportMixin) {
get studentMap () { return getters.state.studentMap }
diff --git a/frontend/src/components/export/InstanceExport.vue b/frontend/src/components/export/InstanceExport.vue
index be2f2457..8d81c9f7 100644
--- a/frontend/src/components/export/InstanceExport.vue
+++ b/frontend/src/components/export/InstanceExport.vue
@@ -16,10 +16,10 @@
align="center"
>
- <file-select
+ <v-file-input
v-model="mapFile"
- display-text="Select map file"
- class="ma-3"
+ label="Map file"
+ accept="application/JSON"
/>
<span>Without the mapping, the data will still be obfuscated.</span>
</v-row>
@@ -59,13 +59,10 @@
import Component, { mixins } from 'vue-class-component'
import { getters } from '@/store/getters'
import ax, { StudentExportItem, fetchStudentExportData, fetchInstanceExportData, InstanceExportData } from '@/api'
-import FileSelect from '@/components/util/FileSelect.vue'
import { mutations as mut } from '@/store/mutations'
import { ExportType, exportMixin } from '@/components/mixins/exportMixin'
-@Component({
- components: { FileSelect }
-})
+@Component
export default class DataExport extends mixins(exportMixin) {
exportDialog = true
mapFile: File | null = null
diff --git a/frontend/src/components/student_list/StudentList.vue b/frontend/src/components/student_list/StudentList.vue
index 759f4362..6d01d081 100644
--- a/frontend/src/components/student_list/StudentList.vue
+++ b/frontend/src/components/student_list/StudentList.vue
@@ -1,28 +1,29 @@
<template>
<v-card>
- <v-card-title>
- <span class="title">
+ <v-toolbar flat>
+ <v-toolbar-title>
Participants
- </span>
- <student-list-reverse-mapper class="ml-4" />
+ </v-toolbar-title>
<v-spacer />
+ <v-toolbar-items />
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
+ class="mr-6"
/>
- <v-card-actions>
- <v-btn
- icon
- @click="refresh"
- >
- <v-icon>refresh</v-icon>
- </v-btn>
- <student-list-menu />
- </v-card-actions>
- </v-card-title>
+ <student-list-reverse-mapper />
+ <v-btn
+ icon
+ @click="refresh"
+ >
+ <v-icon>refresh</v-icon>
+ </v-btn>
+ <student-list-menu />
+ </v-toolbar>
+ <v-divider />
<v-data-table
:headers="headers"
:items="studentListItems"
diff --git a/frontend/src/components/student_list/StudentListReverseMapper.vue b/frontend/src/components/student_list/StudentListReverseMapper.vue
index 70be9ad0..e6a1d80a 100644
--- a/frontend/src/components/student_list/StudentListReverseMapper.vue
+++ b/frontend/src/components/student_list/StudentListReverseMapper.vue
@@ -1,33 +1,23 @@
<template>
- <v-row
-
- align="center"
- >
- <file-select
- v-model="file"
- display-text="Select map file"
- />
- <v-tooltip top>
- <template #activator="{ on }">
- <v-btn
- icon
- v-on="on"
- @click="readMapFileAndApply"
- >
- <v-icon>vpn_key</v-icon>
- </v-btn>
- </template>
- <span>Apply mapping</span>
- </v-tooltip>
- </v-row>
+ <v-tooltip top>
+ <template #activator="{ on }">
+ <div v-on="on">
+ <v-file-input
+ v-model="file"
+ hide-input
+ prepend-icon="vpn_key"
+ accept="application/JSON"
+ @change="readMapFileAndApply"
+ />
+ </div>
+ </template>
+ <span>Apply mapping</span>
+ </v-tooltip>
</template>
<script>
-import FileSelect from '@/components/util/FileSelect'
-
export default {
name: 'StudentListReverseMapper',
- components: { FileSelect },
data () {
return {
file: null,
@@ -36,6 +26,7 @@ export default {
},
methods: {
readMapFileAndApply () {
+ console.debug('hallo')
this.fileReader.onload = event => {
const studentMap = JSON.parse(event.target.result)
this.reverseMapStudents(studentMap)
diff --git a/frontend/src/components/util/FileSelect.vue b/frontend/src/components/util/FileSelect.vue
deleted file mode 100644
index ccf0463c..00000000
--- a/frontend/src/components/util/FileSelect.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
- <label class="file-select">
- <div
- id="selectButton"
- class="select-button"
- >
- <span v-if="value">Selected: {{ value.name }}</span>
- <span v-else>{{ displayText }}</span>
- </div>
- <input
- id="file-input"
- type="file"
- @change="handleFileChange"
- >
- </label>
-</template>
-
-<script>
-export default {
- props: {
- value: File,
- displayText: {
- type: String,
- default: 'Select File'
- }
- },
- data() {
- return {
- hover: false,
- }
- },
- methods: {
- handleFileChange (e) {
- this.$emit('input', e.target.files[0])
- },
- }
-}
-</script>
-
-<style scoped>
- .file-select > .select-button {
- padding: 0.5rem;
-
- color: white;
- background-color: #2EA169;
-
- border-radius: .3rem;
-
- text-align: center;
- font-weight: bold;
- max-width: fit-content;
- }
-
- .select-button:hover {
- background-color: #2f7451;
- cursor: pointer;
- }
-
-
- .file-select > input[type="file"] {
- display: none;
- }
-</style>
--
GitLab