Add Wunderlist migration (#46)

Complete migration flow

Add migration in progress animation

Add handling wunderlist migration flow

Basic migration init structure

Add migrator structure

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

src/components/Home.vue

@@ -2,6 +2,7 @@
 	<div class="content has-text-centered">
 		<h2>Hi {{user.infos.username}}!</h2>
 		<p>Click on a list or namespace on the left to get started.</p>
+		<router-link class="button is-primary is-right noshadow is-outlined" :to="{name: 'migrateStart'}">Import your data into Vikunja</router-link>
 		<TaskOverview :show-all="true"/>
 	</div>
 </template>

src/components/migrator/migrate.vue

@@ -0,0 +1,18 @@
+<template>
+	<div class="content">
+		<h1>Migrate 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'}">
+				<img src="/images/migration/wunderlist.png" alt="Wunderlist"/>
+				Wunderlist
+			</router-link>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'migrate'
+	}
+</script>

src/components/migrator/wunderlist.vue

@@ -0,0 +1,87 @@
+<template>
+	<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 === ''">
+			<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">
+				<img src="/images/migration/wunderlist.png" alt="Wunderlist Logo"/>
+				<div class="progress-dots">
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+				</div>
+				<img src="/images/logo.svg" alt="Vikunja Logo">
+			</div>
+			<p>Migration in progress, hang tight...</p>
+		</div>
+		<div v-else>
+			<div class="message is-primary">
+				<div class="message-body">
+					{{ message }}
+				</div>
+			</div>
+			<router-link :to="{name: 'home'}" class="button is-primary">Refresh</router-link>
+		</div>
+	</div>
+</template>
+
+<script>
+	import WunderlistMigrationService from '../../services/migrator/wunderlist'
+	import message from '../../message'
+
+	export default {
+		name: 'wunderlist',
+		data() {
+			return {
+				migrationService: WunderlistMigrationService,
+				authUrl: '',
+				isMigrating: false,
+				message: '',
+				wunderlistCode: '',
+			}
+		},
+		created() {
+			this.migrationService = new WunderlistMigrationService()
+			this.getAuthUrl()
+			this.message = ''
+
+			if(typeof this.$route.query.code !== 'undefined') {
+				this.isMigrating = true
+				this.wunderlistCode = this.$route.query.code
+				this.migrate()
+			}
+		},
+		methods: {
+			getAuthUrl() {
+				this.migrationService.getAuthUrl()
+					.then(r => {
+						this.authUrl = r.url
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			migrate() {
+				this.migrationService.migrate({code: this.wunderlistCode})
+					.then(r => {
+						this.message = r.message
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+					.finally(() => {
+						this.isMigrating = false
+					})
+			},
+		},
+	}
+</script>

src/router/index.js

@@ -23,6 +23,9 @@ import EditTeamComponent from '@/components/teams/EditTeam'
 import NewTeamComponent from '@/components/teams/NewTeam'
 // Label Handling
 import ListLabelsComponent from '@/components/labels/ListLabels'
+// Migration
+import MigrationComponent from '../components/migrator/migrate'
+import WunderlistMigrationComponent from '../components/migrator/wunderlist'
 
 Vue.use(Router)
 
@@ -135,5 +138,15 @@ export default new Router({
 			name: 'linkShareAuth',
 			component: LinkShareAuthComponent
 		},
+		{
+			path: '/migrate',
+			name: 'migrateStart',
+			component: MigrationComponent,
+		},
+		{
+			path: '/migrate/wunderlist',
+			name: 'migrateWunderlist',
+			component: WunderlistMigrationComponent,
+		},
 	]
 })

src/services/migrator/abstractMigrationService.js

@@ -0,0 +1,20 @@
+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 {
+	constructor(serviceUrlKey) {
+		super({
+			update: '/migration/'+serviceUrlKey+'/migrate',
+			get: '/migration/'+serviceUrlKey+'/auth',
+		})
+	}
+
+	getAuthUrl() {
+		return this.get({})
+	}
+
+	migrate(data) {
+		return this.update(data)
+	}
+}

src/services/migrator/wunderlist.js

@@ -0,0 +1,7 @@
+import AbstractMigrationService from './abstractMigrationService'
+
+export default class WunderlistMigrationService extends AbstractMigrationService {
+	constructor() {
+		super('wunderlist')
+	}
+}

src/styles/components/_all.scss

@@ -11,3 +11,4 @@
 @import 'taskRelations';
 @import 'tasks';
 @import 'teams';
+@import 'migrator';

src/styles/components/migrator.scss

@@ -0,0 +1,69 @@
+.migration-services-overview {
+  text-align: center;
+
+  a {
+    display: inline-block;
+    width: 100px;
+
+    img {
+      display: block;
+    }
+  }
+}
+
+.migration-in-progress-container {
+  max-width: 400px;
+  margin: 4em 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: 2em;
+
+  img {
+    display: block;
+    max-height: 100px;
+  }
+
+  .progress-dots {
+    height: 40px;
+    width: 140px;
+    overflow: visible;
+
+    span {
+      transition: all 500ms ease;
+      background: $grey;
+      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;
+    }
+  }
+}