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>
This commit is contained in:
konrad
parent
6394485524
commit
e1a7fb4999
10 changed files with 303 additions and 345 deletions
|
|
@ -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>
|
|
||||||
|
|
@ -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'),
|
|
||||||
}
|
|
||||||
|
|
@ -2,13 +2,18 @@
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>{{ $t('migrate.title') }}</h1>
|
<h1>{{ $t('migrate.title') }}</h1>
|
||||||
<p>{{ $t('migrate.description') }}</p>
|
<p>{{ $t('migrate.description') }}</p>
|
||||||
<div class="migration-services-overview">
|
<div class="migration-services">
|
||||||
<router-link
|
<router-link
|
||||||
v-for="{name, identifier} in availableMigrators"
|
v-for="{name, id, icon} in availableMigrators"
|
||||||
:key="identifier"
|
:key="id"
|
||||||
:to="{name: 'migrate.service', params: {service: identifier}}"
|
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 }}
|
{{ name }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -16,38 +21,37 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {getMigratorFromSlug, SERVICE_ICONS} from '../../helpers/migrator'
|
import {MIGRATORS} from './migrators'
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'migrate.service',
|
name: 'Migrate',
|
||||||
mounted() {
|
mounted() {
|
||||||
this.setTitle(this.$t('migrate.title'))
|
this.setTitle(this.$t('migrate.title'))
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
availableMigrators() {
|
availableMigrators() {
|
||||||
return this.$store.state.config.availableMigrators.map(getMigratorFromSlug)
|
return this.$store.state.config.availableMigrators
|
||||||
},
|
.map((id) => MIGRATORS[id])
|
||||||
serviceIconSources() {
|
.filter((item) => Boolean(item))
|
||||||
return this.availableMigrators.map(({identifier}) => SERVICE_ICONS[identifier]())
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.migration-services-overview {
|
.migration-services {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
.migration-service-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
|
|
||||||
img {
|
}
|
||||||
|
|
||||||
|
.migration-service-image {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,40 +1,252 @@
|
||||||
<template>
|
<template>
|
||||||
<migration
|
<div class="content">
|
||||||
:identifier="identifier"
|
<h1>{{ $t('migrate.titleService', {name: migrator.name}) }}</h1>
|
||||||
:name="name"
|
<p>{{ $t('migrate.descriptionDo') }}</p>
|
||||||
:is-file-migrator="isFileMigrator"
|
|
||||||
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Migration from '../../components/migrator/migration'
|
import AbstractMigrationService from '@/services/migrator/abstractMigration'
|
||||||
import {getMigratorFromSlug} from '../../helpers/migrator'
|
import AbstractMigrationFileService from '@/services/migrator/abstractMigrationFile'
|
||||||
|
import {MIGRATORS} from './migrators'
|
||||||
|
|
||||||
|
import logoUrl from '@/assets/logo.svg'
|
||||||
|
|
||||||
|
const PROGRESS_DOTS_COUNT = 8
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'migrateService',
|
name: 'MigrateService',
|
||||||
components: {
|
|
||||||
Migration,
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
name: '',
|
progressDotsCount: PROGRESS_DOTS_COUNT,
|
||||||
identifier: '',
|
authUrl: '',
|
||||||
isFileMigrator: false,
|
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() {
|
created() {
|
||||||
try {
|
this.initMigration()
|
||||||
const {name, identifier, isFileMigrator} = getMigratorFromSlug(this.$route.params.service)
|
},
|
||||||
this.name = name
|
|
||||||
this.identifier = identifier
|
mounted() {
|
||||||
this.isFileMigrator = isFileMigrator
|
this.setTitle(this.$t('migrate.titleService', {name: this.migrator.name}))
|
||||||
} catch (e) {
|
},
|
||||||
this.$router.push({name: 'not-found'})
|
|
||||||
|
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>
|
</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>
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 745 B After Width: | Height: | Size: 745 B |
|
Before Width: | Height: | Size: 512 B After Width: | Height: | Size: 512 B |
|
Before Width: | Height: | Size: 6 KiB After Width: | Height: | Size: 6 KiB |
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
45
src/views/migrator/migrators.ts
Normal file
45
src/views/migrator/migrators.ts
Normal file
|
|
@ -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,
|
||||||
|
},
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue