vikunja-frontend/src/views/migrator/Migrate.vue
konrad e1a7fb4999 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>
2021-10-26 20:21:19 +00:00

57 lines
No EOL
1 KiB
Vue

<template>
<div class="content">
<h1>{{ $t('migrate.title') }}</h1>
<p>{{ $t('migrate.description') }}</p>
<div class="migration-services">
<router-link
v-for="{name, id, icon} in availableMigrators"
:key="id"
class="migration-service-link"
:to="{name: 'migrate.service', params: {service: id}}"
>
<img
class="migration-service-image"
:alt="name"
:src="icon"
/>
{{ name }}
</router-link>
</div>
</div>
</template>
<script>
import {MIGRATORS} from './migrators'
export default {
name: 'Migrate',
mounted() {
this.setTitle(this.$t('migrate.title'))
},
computed: {
availableMigrators() {
return this.$store.state.config.availableMigrators
.map((id) => MIGRATORS[id])
.filter((item) => Boolean(item))
},
},
}
</script>
<style lang="scss" scoped>
.migration-services {
text-align: center;
}
.migration-service-link {
display: inline-block;
width: 100px;
text-transform: capitalize;
margin-right: 1rem;
}
.migration-service-image {
display: block;
}
</style>