From e1a7fb4999c00f9c5cb9c63f2e508a03d0ccfb32 Mon Sep 17 00:00:00 2001
From: konrad <k@knt.li>
Date: Tue, 26 Oct 2021 20:21:19 +0000
Subject: [PATCH] fix: migration icons are not resolved properly (#864)

Co-authored-by: kolaente <k@knt.li>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/864
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
---
 src/components/migrator/migration.vue         | 255 -----------------
 src/helpers/migrator.ts                       |  48 ----
 src/views/migrator/Migrate.vue                |  40 +--
 src/views/migrator/MigrateService.vue         | 260 ++++++++++++++++--
 .../migrator/icons}/microsoft-todo.svg        |   0
 .../migrator/icons}/todoist.svg               |   0
 .../migrator/icons}/trello.svg                |   0
 .../migrator/icons}/vikunja-file.png          | Bin
 .../migrator/icons}/wunderlist.jpg            | Bin
 src/views/migrator/migrators.ts               |  45 +++
 10 files changed, 303 insertions(+), 345 deletions(-)
 delete mode 100644 src/components/migrator/migration.vue
 delete mode 100644 src/helpers/migrator.ts
 rename src/{assets/migration => views/migrator/icons}/microsoft-todo.svg (100%)
 rename src/{assets/migration => views/migrator/icons}/todoist.svg (100%)
 rename src/{assets/migration => views/migrator/icons}/trello.svg (100%)
 rename src/{assets/migration => views/migrator/icons}/vikunja-file.png (100%)
 rename src/{assets/migration => views/migrator/icons}/wunderlist.jpg (100%)
 create mode 100644 src/views/migrator/migrators.ts

diff --git a/src/components/migrator/migration.vue b/src/components/migrator/migration.vue
deleted file mode 100644
index 235df9ca..00000000
--- a/src/components/migrator/migration.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<template>
-	<div class="content">
-		<h1>{{ $t('migrate.titleService', {name: name}) }}</h1>
-		<p>{{ $t('migrate.descriptionDo') }}</p>
-		<template v-if="isMigrating === false && message === '' && lastMigrationDate === null">
-			<template v-if="isFileMigrator">
-				<p>{{ $t('migrate.importUpload', {name: name}) }}</p>
-				<input
-					@change="migrate"
-					class="is-hidden"
-					ref="uploadInput"
-					type="file"
-				/>
-				<x-button
-					:loading="migrationService.loading"
-					:disabled="migrationService.loading || null"
-					@click="$refs.uploadInput.click()"
-				>
-					{{ $t('migrate.upload') }}
-				</x-button>
-			</template>
-			<template v-else>
-				<p>{{ $t('migrate.authorize', {name: name}) }}</p>
-				<x-button
-					:loading="migrationService.loading"
-					:disabled="migrationService.loading || null"
-					:href="authUrl"
-				>
-					{{ $t('migrate.getStarted') }}
-				</x-button>
-			</template>
-		</template>
-		<div
-			class="migration-in-progress-container"
-			v-else-if="isMigrating === true && message === '' && lastMigrationDate === null">
-			<div class="migration-in-progress">
-				<img :alt="name" :src="serviceIconSource"/>
-				<div class="progress-dots">
-					<span v-for="i in progressDotsCount" :key="i" />
-				</div>
-				<img alt="Vikunja" :src="logoUrl">
-			</div>
-			<p>{{ $t('migrate.inProgress') }}</p>
-		</div>
-		<div v-else-if="lastMigrationDate">
-			<p>
-				{{ $t('migrate.alreadyMigrated1', {name: name, date: formatDate(lastMigrationDate)}) }}<br/>
-				{{ $t('migrate.alreadyMigrated2') }}
-			</p>
-			<div class="buttons">
-				<x-button @click="migrate">{{ $t('migrate.confirm') }}</x-button>
-				<x-button :to="{name: 'home'}" type="tertary" class="has-text-danger">{{ $t('misc.cancel') }}</x-button>
-			</div>
-		</div>
-		<div v-else>
-			<div class="message is-primary">
-				<div class="message-body">
-					{{ message }}
-				</div>
-			</div>
-			<x-button :to="{name: 'home'}">{{ $t('misc.refresh') }}</x-button>
-		</div>
-	</div>
-</template>
-
-<script>
-import AbstractMigrationService from '../../services/migrator/abstractMigration'
-import AbstractMigrationFileService from '../../services/migrator/abstractMigrationFile'
-import {SERVICE_ICONS} from '../../helpers/migrator'
-
-import logoUrl from '@/assets/logo.svg'
-
-const PROGRESS_DOTS_COUNT = 8
-
-export default {
-	name: 'migration',
-	data() {
-		return {
-			progressDotsCount: PROGRESS_DOTS_COUNT,
-			authUrl: '',
-			isMigrating: false,
-			lastMigrationDate: null,
-			message: '',
-			migratorAuthCode: '',
-			migrationService: null,
-			logoUrl,
-		}
-	},
-	props: {
-		name: {
-			type: String,
-			required: true,
-		},
-		identifier: {
-			type: String,
-			required: true,
-		},
-		isFileMigrator: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-		serviceIconSource() {
-			return SERVICE_ICONS[this.identifier]()
-		},
-	},
-	created() {
-		this.message = ''
-
-		if (this.isFileMigrator) {
-			this.migrationService = new AbstractMigrationFileService(this.identifier)
-			return
-		}
-		
-		this.migrationService = new AbstractMigrationService(this.identifier)
-		this.getAuthUrl()
-
-		if (typeof this.$route.query.code !== 'undefined' || location.hash.startsWith('#token=')) {
-			if (location.hash.startsWith('#token=')) {
-				this.migratorAuthCode = location.hash.substring(7)
-				console.debug(location.hash.substring(7))
-			} else {
-				this.migratorAuthCode = this.$route.query.code
-			}
-			this.migrationService.getStatus()
-				.then(r => {
-					if (r.time) {
-						if (typeof r.time === 'string' && r.time.startsWith('0001-')) {
-							this.lastMigrationDate = null
-						} else {
-							this.lastMigrationDate = new Date(r.time)
-						}
-
-						if (this.lastMigrationDate) {
-							return
-						}
-					}
-					this.migrate()
-				})
-		}
-	},
-	methods: {
-		async getAuthUrl() {
-			const { url } = await this.migrationService.getAuthUrl()
-			this.authUrl = url
-		},
-
-		async migrate() {
-			this.isMigrating = true
-			this.lastMigrationDate = null
-			this.message = ''
-
-			let migrationConfig = { code: this.migratorAuthCode }
-
-			if (this.isFileMigrator) {
-				if (this.$refs.uploadInput.files.length === 0) {
-					return
-				}
-				migrationConfig = this.$refs.uploadInput.files[0]
-			}
-
-			try {
-				const { message } = await this.migrationService.migrate(migrationConfig)
-				this.message = message
-				return this.$store.dispatch('namespaces/loadNamespaces')
-			} finally {
-				this.isMigrating = false
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.migration-in-progress-container {
-  max-width: 400px;
-  margin: 4rem auto 0;
-  text-align: center;
-}
-
-.migration-in-progress {
-  text-align: center;
-  display: flex;
-  max-width: 400px;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-
-  img {
-    display: block;
-    max-height: 100px;
-  }
-
-  .progress-dots {
-    height: 40px;
-    width: 140px;
-    overflow: visible;
-
-    span {
-      transition: all 500ms ease;
-      background: $grey-500;
-      height: 10px;
-      width: 10px;
-      display: inline-block;
-      border-radius: 10px;
-      animation: wave 2s ease infinite;
-      margin-right: 5px;
-
-      &:nth-child(1) {
-        animation-delay: 0;
-      }
-
-      &:nth-child(2) {
-        animation-delay: 100ms;
-      }
-
-      &:nth-child(3) {
-        animation-delay: 200ms;
-      }
-
-      &:nth-child(4) {
-        animation-delay: 300ms;
-      }
-
-      &:nth-child(5) {
-        animation-delay: 400ms;
-      }
-
-      &:nth-child(6) {
-        animation-delay: 500ms;
-      }
-
-      &:nth-child(7) {
-        animation-delay: 600ms;
-      }
-
-      &:nth-child(8) {
-        animation-delay: 700ms;
-      }
-    }
-  }
-
-  @keyframes wave {
-    0%, 40%, 100% {
-      transform: translate(0, 0);
-      background-color: $primary;
-    }
-    10% {
-      transform: translate(0, -15px);
-      background-color: $primary-dark;
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/helpers/migrator.ts b/src/helpers/migrator.ts
deleted file mode 100644
index 92106b76..00000000
--- a/src/helpers/migrator.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export interface Migrator {
-	name: string
-	identifier: string
-	isFileMigrator?: boolean
-}
-
-export const getMigratorFromSlug = (slug: string): Migrator => {
-	switch (slug) {
-		case 'wunderlist':
-			return {
-				name: 'Wunderlist',
-				identifier: 'wunderlist',
-			}
-		case 'todoist':
-			return {
-				name: 'Todoist',
-				identifier: 'todoist',
-			}
-		case 'trello':
-			return {
-				name: 'Trello',
-				identifier: 'trello',
-			}
-		case 'microsoft-todo':
-			return {
-				name: 'Microsoft Todo',
-				identifier: 'microsoft-todo',
-			}
-		case 'vikunja-file':
-			return {
-				name: 'Vikunja Export',
-				identifier: 'vikunja-file',
-				isFileMigrator: true,
-			}
-		default:
-			throw new Error('Unknown migrator slug ' + slug)
-	}
-}
-
-
-// NOTE: we list the imports individually for better build time optimisation
-export const SERVICE_ICONS = {
-	'vikunja-file': () => import('@/assets/migration/vikunja-file.png'),
-	'microsoft-todo': () => import('@/assets/migration/microsoft-todo.svg'),
-	'todoist': () => import('@/assets/migration/todoist.svg'),
-	'trello': () => import('@/assets/migration/trello.svg'),
-	'wunderlist': () => import('@/assets/migration/wunderlist.jpg'),
-}
\ No newline at end of file
diff --git a/src/views/migrator/Migrate.vue b/src/views/migrator/Migrate.vue
index 3f3a6e34..5ec7bf2f 100644
--- a/src/views/migrator/Migrate.vue
+++ b/src/views/migrator/Migrate.vue
@@ -2,13 +2,18 @@
 	<div class="content">
 		<h1>{{ $t('migrate.title') }}</h1>
 		<p>{{ $t('migrate.description') }}</p>
-		<div class="migration-services-overview">
+		<div class="migration-services">
 			<router-link
-				v-for="{name, identifier} in availableMigrators"
-				:key="identifier"
-				:to="{name: 'migrate.service', params: {service: identifier}}"
+				v-for="{name, id, icon} in availableMigrators"
+				:key="id"
+				class="migration-service-link"
+				:to="{name: 'migrate.service', params: {service: id}}"
 			>
-				<img :alt="name" :src="serviceIconSources[identifier]"/>
+				<img
+					class="migration-service-image"
+					:alt="name"
+					:src="icon"
+				/>
 				{{ name }}
 			</router-link>
 		</div>
@@ -16,38 +21,37 @@
 </template>
 
 <script>
-import {getMigratorFromSlug, SERVICE_ICONS} from '../../helpers/migrator'
-
+import {MIGRATORS} from './migrators'
 
 export default {
-	name: 'migrate.service',
+	name: 'Migrate',
 	mounted() {
 		this.setTitle(this.$t('migrate.title'))
 	},
 	computed: {
 		availableMigrators() {
-			return this.$store.state.config.availableMigrators.map(getMigratorFromSlug)
-		},
-		serviceIconSources() {
-			return this.availableMigrators.map(({identifier}) => SERVICE_ICONS[identifier]())
+			return this.$store.state.config.availableMigrators
+				.map((id) => MIGRATORS[id])
+				.filter((item) => Boolean(item))
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-.migration-services-overview {
+.migration-services {
   text-align: center;
+}
 
-  a {
+.migration-service-link {
     display: inline-block;
     width: 100px;
     text-transform: capitalize;
     margin-right: 1rem;
 
-    img {
-      display: block;
-    }
-  }
+}
+
+.migration-service-image {
+	display: block;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/migrator/MigrateService.vue b/src/views/migrator/MigrateService.vue
index fddf901e..ae6d762b 100644
--- a/src/views/migrator/MigrateService.vue
+++ b/src/views/migrator/MigrateService.vue
@@ -1,40 +1,252 @@
 <template>
-	<migration
-		:identifier="identifier"
-		:name="name"
-		:is-file-migrator="isFileMigrator"
-	/>
+	<div class="content">
+		<h1>{{ $t('migrate.titleService', {name: migrator.name}) }}</h1>
+		<p>{{ $t('migrate.descriptionDo') }}</p>
+
+		<template v-if="message === '' && lastMigrationDate === null">
+			<template v-if="isMigrating === false">
+				<template v-if="migrator.isFileMigrator">
+					<p>{{ $t('migrate.importUpload', {name: migrator.name}) }}</p>
+					<input
+						@change="migrate"
+						class="is-hidden"
+						ref="uploadInput"
+						type="file"
+					/>
+					<x-button
+						:loading="migrationService.loading"
+						:disabled="migrationService.loading || null"
+						@click="$refs.uploadInput.click()"
+					>
+						{{ $t('migrate.upload') }}
+					</x-button>
+				</template>
+				<template v-else>
+					<p>{{ $t('migrate.authorize', {name: migrator.name}) }}</p>
+					<x-button
+						:loading="migrationService.loading"
+						:disabled="migrationService.loading || null"
+						:href="authUrl"
+					>
+						{{ $t('migrate.getStarted') }}
+					</x-button>
+				</template>
+			</template>
+			<div
+				v-else
+				class="migration-in-progress-container"
+			>
+				<div class="migration-in-progress">
+					<img :alt="migrator.name" :src="migrator.icon"/>
+					<div class="progress-dots">
+						<span v-for="i in progressDotsCount" :key="i" />
+					</div>
+					<img alt="Vikunja" :src="logoUrl" />
+				</div>
+				<p>{{ $t('migrate.inProgress') }}</p>
+			</div>
+		</template>
+		<div v-else-if="lastMigrationDate">
+			<p>
+				{{ $t('migrate.alreadyMigrated1', {name: migrator.name, date: formatDate(lastMigrationDate)}) }}<br/>
+				{{ $t('migrate.alreadyMigrated2') }}
+			</p>
+			<div class="buttons">
+				<x-button @click="migrate">{{ $t('migrate.confirm') }}</x-button>
+				<x-button :to="{name: 'home'}" type="tertary" class="has-text-danger">{{ $t('misc.cancel') }}</x-button>
+			</div>
+		</div>
+		<div v-else>
+			<div class="message is-primary">
+				<div class="message-body">
+					{{ message }}
+				</div>
+			</div>
+			<x-button :to="{name: 'home'}">{{ $t('misc.refresh') }}</x-button>
+		</div>
+	</div>
 </template>
 
 <script>
-import Migration from '../../components/migrator/migration'
-import {getMigratorFromSlug} from '../../helpers/migrator'
+import AbstractMigrationService from '@/services/migrator/abstractMigration'
+import AbstractMigrationFileService from '@/services/migrator/abstractMigrationFile'
+import {MIGRATORS} from './migrators'
+
+import logoUrl from '@/assets/logo.svg'
+
+const PROGRESS_DOTS_COUNT = 8
 
 export default {
-	name: 'migrateService',
-	components: {
-		Migration,
-	},
+	name: 'MigrateService',
 	data() {
 		return {
-			name: '',
-			identifier: '',
-			isFileMigrator: false,
+			progressDotsCount: PROGRESS_DOTS_COUNT,
+			authUrl: '',
+			isMigrating: false,
+			lastMigrationDate: null,
+			message: '',
+			migratorAuthCode: '',
+			migrationService: null,
+			logoUrl,
 		}
 	},
-	mounted() {
-		this.setTitle(this.$t('migrate.titleService', {name: this.name}))
+
+	computed: {
+		migrator() {
+			return MIGRATORS[this.$route.params.service]
+		},
 	},
+
+	beforeRouteEnter(to) {
+		if (MIGRATORS[to.params.service] === undefined) {
+			return { name: 'not-found' }
+		}
+	},
+
 	created() {
-		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: 'not-found'})
-		}
+		this.initMigration()
+	},
+
+	mounted() {
+		this.setTitle(this.$t('migrate.titleService', {name: this.migrator.name}))
+	},
+
+	methods: {
+		async initMigration() {
+			this.migrationService = this.migrator.isFileMigrator
+				? new AbstractMigrationFileService(this.migrator.id)
+				: new AbstractMigrationService(this.migrator.id)
+
+			if (this.migrator.isFileMigrator) {
+				return
+			}
+			
+			this.authUrl = await this.migrationService.getAuthUrl().then(({url}) => url)
+
+			this.migratorAuthCode = location.hash.startsWith('#token=')
+				? location.hash.substring(7)
+				: this.$route.query.code
+
+			if (!this.migratorAuthCode) {
+				return
+			}
+			const {time} = await this.migrationService.getStatus()
+			if (time) {
+				this.lastMigrationDate = typeof time === 'string' && time?.startsWith('0001-')
+					? null
+					: new Date(time)
+
+				if (this.lastMigrationDate) {
+					return
+				}
+			}
+			await this.migrate()
+		},
+
+		async migrate() {
+			this.isMigrating = true
+			this.lastMigrationDate = null
+			this.message = ''
+
+			let migrationConfig = { code: this.migratorAuthCode }
+
+			if (this.migrator.isFileMigrator) {
+				if (this.$refs.uploadInput.files.length === 0) {
+					return
+				}
+				migrationConfig = this.$refs.uploadInput.files[0]
+			}
+
+			try {
+				const { message } = await this.migrationService.migrate(migrationConfig)
+				this.message = message
+				return this.$store.dispatch('namespaces/loadNamespaces')
+			} finally {
+				this.isMigrating = false
+			}
+		},
 	},
 }
 </script>
 
+<style lang="scss" scoped>
+.migration-in-progress-container {
+  max-width: 400px;
+  margin: 4rem auto 0;
+  text-align: center;
+}
+
+.migration-in-progress {
+  text-align: center;
+  display: flex;
+  max-width: 400px;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+
+  img {
+    display: block;
+    max-height: 100px;
+  }
+}
+
+.progress-dots {
+	height: 40px;
+	width: 140px;
+	overflow: visible;
+
+	span {
+		transition: all 500ms ease;
+		background: $grey-500;
+		height: 10px;
+		width: 10px;
+		display: inline-block;
+		border-radius: 10px;
+		animation: wave 2s ease infinite;
+		margin-right: 5px;
+
+		&:nth-child(1) {
+			animation-delay: 0;
+		}
+
+		&:nth-child(2) {
+			animation-delay: 100ms;
+		}
+
+		&:nth-child(3) {
+			animation-delay: 200ms;
+		}
+
+		&:nth-child(4) {
+			animation-delay: 300ms;
+		}
+
+		&:nth-child(5) {
+			animation-delay: 400ms;
+		}
+
+		&:nth-child(6) {
+			animation-delay: 500ms;
+		}
+
+		&:nth-child(7) {
+			animation-delay: 600ms;
+		}
+
+		&:nth-child(8) {
+			animation-delay: 700ms;
+		}
+	}
+}
+
+@keyframes wave {
+	0%, 40%, 100% {
+		transform: translate(0, 0);
+		background-color: $primary;
+	}
+	10% {
+		transform: translate(0, -15px);
+		background-color: $primary-dark;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/assets/migration/microsoft-todo.svg b/src/views/migrator/icons/microsoft-todo.svg
similarity index 100%
rename from src/assets/migration/microsoft-todo.svg
rename to src/views/migrator/icons/microsoft-todo.svg
diff --git a/src/assets/migration/todoist.svg b/src/views/migrator/icons/todoist.svg
similarity index 100%
rename from src/assets/migration/todoist.svg
rename to src/views/migrator/icons/todoist.svg
diff --git a/src/assets/migration/trello.svg b/src/views/migrator/icons/trello.svg
similarity index 100%
rename from src/assets/migration/trello.svg
rename to src/views/migrator/icons/trello.svg
diff --git a/src/assets/migration/vikunja-file.png b/src/views/migrator/icons/vikunja-file.png
similarity index 100%
rename from src/assets/migration/vikunja-file.png
rename to src/views/migrator/icons/vikunja-file.png
diff --git a/src/assets/migration/wunderlist.jpg b/src/views/migrator/icons/wunderlist.jpg
similarity index 100%
rename from src/assets/migration/wunderlist.jpg
rename to src/views/migrator/icons/wunderlist.jpg
diff --git a/src/views/migrator/migrators.ts b/src/views/migrator/migrators.ts
new file mode 100644
index 00000000..f0885950
--- /dev/null
+++ b/src/views/migrator/migrators.ts
@@ -0,0 +1,45 @@
+import wunderlistIcon from './icons/wunderlist.jpg'
+import todoistIcon from './icons/todoist.svg'
+import trelloIcon from './icons/trello.svg'
+import microsoftTodoIcon from './icons/microsoft-todo.svg'
+import vikunjaFileIcon from './icons/vikunja-file.png'
+
+export interface Migrator {
+	id: string
+	name: string
+	isFileMigrator?: boolean
+	icon: string
+}
+
+interface IMigratorRecord {
+	[key: Migrator['id']]: Migrator
+ }
+
+export const MIGRATORS: IMigratorRecord = {
+	wunderlist: {
+		id: 'wunderlist',
+		name: 'Wunderlist',
+		icon: wunderlistIcon,
+	},
+	todoist: {
+		id: 'todoist',
+		name: 'Todoist',
+		icon: todoistIcon,
+	},
+	trello: {
+		id: 'trello',
+		name: 'Trello',
+		icon: trelloIcon,
+	},
+	'microsoft-todo': {
+		id: 'microsoft-todo',
+		name: 'Microsoft Todo',
+		icon: microsoftTodoIcon,
+	},
+	'vikunja-file': {
+		id: 'vikunja-file',
+		name: 'Vikunja Export',
+		icon: vikunjaFileIcon,
+		isFileMigrator: true,
+	},
+}
\ No newline at end of file