Migration Improvements (#47)

Make "migration" "import everywhere"

Add checking for migration status before trying to migrate

Add get status from migrations

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: vikunja/frontend#47

src/components/migrator/migrate.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="content">
-		<h1>Migrate your data from other services to Vikunja</h1>
+		<h1>Import your data from other services to Vikunja</h1>
 		<p>Click on the logo of one of the third-party services below to get started.</p>
 		<div class="migration-services-overview">
 			<router-link :to="{name: 'migrateWunderlist'}">

src/components/migrator/wunderlist.vue

@@ -2,11 +2,11 @@
 	<div class="content">
 		<h1>Import your data from Wunderlist to Vikunja</h1>
 		<p>Vikunja will import all folders, lists, tasks, notes, reminders and files you have access to.</p>
-		<template v-if="isMigrating === false && message === ''">
+		<template v-if="isMigrating === false && message === '' && lastMigrationDate === 0">
 			<p>To authorize Vikunja to access your Wunderlist Account, click the button below.</p>
 			<a :href="authUrl" class="button is-primary" :class="{'is-loading': migrationService.loading}" :disabled="migrationService.loading">Get Started</a>
 		</template>
-		<div class="migration-in-progress-container" v-else-if="isMigrating === true && message === ''">
+		<div class="migration-in-progress-container" v-else-if="isMigrating === true && message === '' && lastMigrationDate === 0">
 			<div class="migration-in-progress">
 				<img src="/images/migration/wunderlist.png" alt="Wunderlist Logo"/>
 				<div class="progress-dots">
@@ -21,7 +21,18 @@
 				</div>
 				<img src="/images/logo.svg" alt="Vikunja Logo">
 			</div>
-			<p>Migration in progress, hang tight...</p>
+			<p>Importing in progress, hang tight...</p>
+		</div>
+		<div v-else-if="lastMigrationDate > 0">
+			<p>
+				It looks like you've already imported your stuff from wunderlist at {{ new Date(lastMigrationDate * 1000) }}.<br/>
+				Importing again is possible, but might create duplicates.
+				Are you sure?
+			</p>
+			<div class="buttons">
+				<button class="button is-primary" @click="migrate">I am sure, please start migrating now!</button>
+				<router-link :to="{name: 'home'}" class="button is-danger is-outlined">Cancel</router-link>
+			</div>
 		</div>
 		<div v-else>
 			<div class="message is-primary">
@@ -45,6 +56,7 @@
 				migrationService: WunderlistMigrationService,
 				authUrl: '',
 				isMigrating: false,
+				lastMigrationDate: 0,
 				message: '',
 				wunderlistCode: '',
 			}
@@ -55,9 +67,18 @@
 			this.message = ''
 
 			if(typeof this.$route.query.code !== 'undefined') {
-				this.isMigrating = true
 				this.wunderlistCode = this.$route.query.code
-				this.migrate()
+				this.migrationService.getStatus()
+					.then(r => {
+						if(r.time_unix > 0) {
+							this.lastMigrationDate = r.time_unix
+							return
+						}
+						this.migrate()
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
 			}
 		},
 		methods: {
@@ -71,6 +92,8 @@
 					})
 			},
 			migrate() {
+				this.isMigrating = true
+				this.lastMigrationDate = 0
 				this.migrationService.migrate({code: this.wunderlistCode})
 					.then(r => {
 						this.message = r.message

src/services/abstractService.js

@@ -282,9 +282,21 @@ export default class AbstractService {
 			return Promise.reject({message: 'This model is not able to get data.'})
 		}
 
+		return this.getM(this.paths.get, model, params)
+	}
+
+	/**
+	 * This is a more abstract implementation which only does a get request.
+	 * Services which need more flexibility can use this.
+	 * @param url
+	 * @param model
+	 * @param params
+	 * @returns {Q.Promise<unknown>}
+	 */
+	getM(url, model = {}, params = {}) {
 		const cancel = this.setLoading()
 		model = this.beforeGet(model)
-		return this.http.get(this.getReplacedRoute(this.paths.get, model), {params: params})
+		return this.http.get(this.getReplacedRoute(url, model), {params: params})
 			.catch(error => {
 				return this.errorHandler(error)
 			})

src/services/migrator/abstractMigrationService.js

@@ -3,15 +3,21 @@ import AbstractService from '../abstractService'
 // This service builds on top of the abstract service and basically just hides away method names.
 // It enables migration services to be created with minimal overhead and even better method names.
 export default class AbstractMigrationService extends AbstractService {
+	serviceUrlKey = ''
+
 	constructor(serviceUrlKey) {
 		super({
 			update: '/migration/'+serviceUrlKey+'/migrate',
-			get: '/migration/'+serviceUrlKey+'/auth',
 		})
+		this.serviceUrlKey = serviceUrlKey
 	}
 
 	getAuthUrl() {
-		return this.get({})
+		return this.getM('/migration/'+this.serviceUrlKey+'/auth')
+	}
+
+	getStatus() {
+		return this.getM('/migration/'+this.serviceUrlKey+'/status')
 	}
 
 	migrate(data) {