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: vikunja/frontend#864
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2021-10-26 20:21:19 +00:00
parent 6394485524
commit e1a7fb4999
10 changed files with 303 additions and 345 deletions

View File

@ -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>

View File

@ -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'),
}

View File

@ -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>

View File

@ -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>

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 745 B

After

Width:  |  Height:  |  Size: 745 B

View File

Before

Width:  |  Height:  |  Size: 512 B

After

Width:  |  Height:  |  Size: 512 B

View File

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

View 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,
},
}