User Data Export and import (#699)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/699
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>

src/views/migrator/Migrate.vue

@@ -3,15 +3,20 @@
 		<h1>{{ $t('migrate.title') }}</h1>
 		<p>{{ $t('migrate.description') }}</p>
 		<div class="migration-services-overview">
-			<router-link :key="m" :to="{name: 'migrate.service', params: {service: m}}" v-for="m in availableMigrators">
-				<img :alt="m" :src="`/images/migration/${m}.png`"/>
-				{{ m }}
+			<router-link
+				:key="m.identifier"
+				:to="{name: 'migrate.service', params: {service: m.identifier}}"
+				v-for="m in availableMigrators">
+				<img :alt="m.name" :src="`/images/migration/${m.identifier}.png`"/>
+				{{ m.name }}
 			</router-link>
 		</div>
 	</div>
 </template>
 
 <script>
+import {getMigratorFromSlug} from '../../helpers/migrator'
+
 export default {
 	name: 'migrate.service',
 	mounted() {
@@ -19,7 +24,7 @@ export default {
 	},
 	computed: {
 		availableMigrators() {
-			return this.$store.state.config.availableMigrators
+			return this.$store.state.config.availableMigrators.map(getMigratorFromSlug)
 		},
 	},
 }

src/views/migrator/MigrateService.vue

@@ -2,12 +2,13 @@
 	<migration
 		:identifier="identifier"
 		:name="name"
+		:is-file-migrator="isFileMigrator"
 	/>
 </template>
 
 <script>
 import Migration from '../../components/migrator/migration'
-import router from '../../router'
+import {getMigratorFromSlug} from '../../helpers/migrator'
 
 export default {
 	name: 'migrateService',
@@ -18,31 +19,20 @@ export default {
 		return {
 			name: '',
 			identifier: '',
+			isFileMigrator: false,
 		}
 	},
 	mounted() {
 		this.setTitle(this.$t('migrate.titleService', {name: this.name}))
 	},
 	created() {
-		switch (this.$route.params.service) {
-			case 'wunderlist':
-				this.name = 'Wunderlist'
-				this.identifier = 'wunderlist'
-				break
-			case 'todoist':
-				this.name = 'Todoist'
-				this.identifier = 'todoist'
-				break
-			case 'trello':
-				this.name = 'Trello'
-				this.identifier = 'trello'
-				break
-			case 'microsoft-todo':
-				this.name = 'Microsoft Todo'
-				this.identifier = 'microsoft-todo'
-				break
-			default:
-				router.push({name: '404'})
+		try {
+			const {name, identifier, isFileMigrator} = getMigratorFromSlug(this.$route.params.service)
+			this.name = name
+			this.identifier = identifier
+			this.isFileMigrator = isFileMigrator
+		} catch (e) {
+			this.$router.push({name: '404'})
 		}
 	},
 }