chore: move frontend files

2024-02-07 14:56:56 +01:00
parent 447641c222
commit fc4676315d
606 changed files with 0 additions and 0 deletions
--- a/frontend/src/views/migrate/Migration.vue
+++ b/frontend/src/views/migrate/Migration.vue
@ -0,0 +1,57 @@
+<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 setup lang="ts">
+import {computed} from 'vue'
+import {useI18n} from 'vue-i18n'
+
+import {MIGRATORS} from './migrators'
+import {useTitle} from '@/composables/useTitle'
+import {useConfigStore} from '@/stores/config'
+
+const {t} = useI18n({useScope: 'global'})
+
+useTitle(() => t('migrate.title'))
+
+const configStore = useConfigStore()
+const availableMigrators = computed(() => configStore.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>
--- a/frontend/src/views/migrate/MigrationHandler.vue
+++ b/frontend/src/views/migrate/MigrationHandler.vue
@ -0,0 +1,313 @@
+<template>
+	<div class="content">
+		<h1>{{ $t('migrate.titleService', {name: migrator.name}) }}</h1>
+		<p>{{ $t('migrate.descriptionDo') }}</p>
+
+		<template v-if="message === '' && lastMigrationFinishedAt === null">
+			<template v-if="isMigrating === false">
+				<template v-if="migrator.isFileMigrator">
+					<p>{{ $t('migrate.importUpload', {name: migrator.name}) }}</p>
+					<input
+						ref="uploadInput"
+						class="is-hidden"
+						type="file"
+						@change="migrate"
+					>
+					<x-button
+						:loading="migrationFileService.loading"
+						:disabled="migrationFileService.loading || undefined"
+						@click="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 || undefined"
+						: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"
+						class="logo"
+					>
+					<div class="progress-dots">
+						<span
+							v-for="i in progressDotsCount"
+							:key="i"
+						/>
+					</div>
+					<Logo class="logo" />
+				</div>
+				<p>{{ $t('migrate.inProgress') }}</p>
+			</div>
+		</template>
+		<div v-else-if="lastMigrationStartedAt && lastMigrationFinishedAt === null">
+			<p>
+				{{ $t('migrate.migrationInProgress') }}
+			</p>
+			<x-button :to="{name: 'home'}">
+				{{ $t('home.goToOverview') }}
+			</x-button>
+		</div>
+		<div v-else-if="lastMigrationFinishedAt">
+			<p>
+				{{
+					$t('migrate.alreadyMigrated1', {name: migrator.name, date: formatDateLong(lastMigrationFinishedAt)})
+				}}<br>
+				{{ $t('migrate.alreadyMigrated2') }}
+			</p>
+			<div class="buttons">
+				<x-button @click="migrate">
+					{{ $t('migrate.confirm') }}
+				</x-button>
+				<x-button
+					:to="{name: 'home'}"
+					variant="tertiary"
+					class="has-text-danger"
+				>
+					{{ $t('misc.cancel') }}
+				</x-button>
+			</div>
+		</div>
+		<div v-else>
+			<Message
+				v-if="migrator.isFileMigrator"
+				class="mb-4"
+			>
+				{{ message }}
+			</Message>
+			<Message
+				v-else
+				class="mb-4"
+			>
+				{{ $t('migrate.migrationStartedWillReciveEmail', {service: migrator.name}) }}
+			</Message>
+
+			<x-button :to="{name: 'home'}">
+				{{ $t('home.goToOverview') }}
+			</x-button>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+export default {
+	beforeRouteEnter(to) {
+		if (MIGRATORS[to.params.service as string] === undefined) {
+			return {name: 'not-found'}
+		}
+	},
+}
+</script>
+
+<script setup lang="ts">
+import {computed, ref, shallowReactive} from 'vue'
+import {useI18n} from 'vue-i18n'
+
+import Logo from '@/assets/logo.svg?component'
+import Message from '@/components/misc/message.vue'
+
+import AbstractMigrationService, {type MigrationConfig} from '@/services/migrator/abstractMigration'
+import AbstractMigrationFileService from '@/services/migrator/abstractMigrationFile'
+
+import {formatDateLong} from '@/helpers/time/formatDate'
+import {parseDateOrNull} from '@/helpers/parseDateOrNull'
+
+import {MIGRATORS, Migrator} from './migrators'
+import {useTitle} from '@/composables/useTitle'
+import {useProjectStore} from '@/stores/projects'
+
+const props = defineProps<{
+	service: string,
+	code?: string,
+}>()
+
+const PROGRESS_DOTS_COUNT = 8
+
+const {t} = useI18n({useScope: 'global'})
+
+const progressDotsCount = ref(PROGRESS_DOTS_COUNT)
+const authUrl = ref('')
+const isMigrating = ref(false)
+const lastMigrationFinishedAt = ref<Date | null>(null)
+const lastMigrationStartedAt = ref<Date | null>(null)
+const message = ref('')
+const migratorAuthCode = ref('')
+
+const migrator = computed<Migrator>(() => MIGRATORS[props.service])
+
+// eslint-disable-next-line vue/no-ref-object-destructure
+const migrationService = shallowReactive(new AbstractMigrationService(migrator.value.id))
+// eslint-disable-next-line vue/no-ref-object-destructure
+const migrationFileService = shallowReactive(new AbstractMigrationFileService(migrator.value.id))
+
+useTitle(() => t('migrate.titleService', {name: migrator.value.name}))
+
+async function initMigration() {
+	if (migrator.value.isFileMigrator) {
+		return
+	}
+
+	authUrl.value = await migrationService.getAuthUrl().then(({url}) => url)
+
+	const TOKEN_HASH_PREFIX = '#token='
+	migratorAuthCode.value = location.hash.startsWith(TOKEN_HASH_PREFIX)
+		? location.hash.substring(TOKEN_HASH_PREFIX.length)
+		: props.code as string
+
+	if (!migratorAuthCode.value) {
+		return
+	}
+	const {startedAt, finishedAt} = await migrationService.getStatus()
+	if (startedAt) {
+		lastMigrationStartedAt.value = parseDateOrNull(startedAt)
+	}
+	if (finishedAt) {
+		lastMigrationFinishedAt.value = parseDateOrNull(finishedAt)
+		if (lastMigrationFinishedAt.value) {
+			return
+		}
+	}
+
+	if (lastMigrationStartedAt.value && lastMigrationFinishedAt.value === null) {
+		// Migration already in progress
+		return
+	}
+
+	await migrate()
+}
+
+initMigration()
+
+const uploadInput = ref<HTMLInputElement | null>(null)
+
+async function migrate() {
+	isMigrating.value = true
+	lastMigrationFinishedAt.value = null
+	message.value = ''
+
+	let migrationConfig: MigrationConfig | File = {code: migratorAuthCode.value}
+
+	if (migrator.value.isFileMigrator) {
+		if (uploadInput.value?.files?.length === 0) {
+			return
+		}
+		migrationConfig = uploadInput.value?.files?.[0] as File
+	}
+
+	try {
+		const result = migrator.value.isFileMigrator
+			? await migrationFileService.migrate(migrationConfig as File)
+			: await migrationService.migrate(migrationConfig as MigrationConfig)
+		message.value = result.message
+		const projectStore = useProjectStore()
+		return projectStore.loadProjects()
+	} finally {
+		isMigrating.value = 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;
+}
+
+.logo {
+	display: block;
+	max-height: 100px;
+	max-width: 100px;
+}
+
+.progress-dots {
+	height: 40px;
+	width: 140px;
+	overflow: visible;
+
+	span {
+		transition: all 500ms ease;
+		background: var(--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: var(--primary);
+	}
+	10% {
+		transform: translate(0, -15px);
+		background-color: var(--primary-dark);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	@keyframes wave {
+		10% {
+			transform: translate(0, 0);
+			background-color: var(--primary);
+		}
+	}
+}
+</style>
--- a/frontend/src/views/migrate/icons/microsoft-todo.svg
+++ b/frontend/src/views/migrate/icons/microsoft-todo.svg
@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1007.9 821.8">
+  <defs>
+    <radialGradient id="c" cx="410.2" cy="853.3" r="85" gradientTransform="rotate(45 546.8 785.4)" gradientUnits="userSpaceOnUse">
+      <stop offset=".5" stop-opacity=".1"/>
+      <stop offset="1" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="e" cx="1051.1" cy="1265.9" r="85" gradientTransform="rotate(-135 769.6 767.5)" xlink:href="#c"/>
+    <radialGradient id="h" cx="27.6" cy="2001.4" r="85" gradientTransform="scale(1 -1) rotate(45 2979.2 860.2)" xlink:href="#c"/>
+    <linearGradient id="a" x1="700.8" y1="597" x2="749.8" y2="597" gradientTransform="matrix(.867 0 0 1.307 86.6 -142.3)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-opacity=".1"/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="f" x1="1880.8" y1="34.3" x2="1929.8" y2="34.3" gradientTransform="matrix(.867 0 0 -.796 -1446 767.1)" xlink:href="#a"/>
+    <linearGradient id="i" x1="308.4" y1="811.6" x2="919.3" y2="200.7" gradientTransform="rotate(-45 613.8 506.2)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2987e6"/>
+      <stop offset="1" stop-color="#58c1f5"/>
+    </linearGradient>
+    <mask id="b" x="317.1" y="651.8" width="170" height="205.2" maskUnits="userSpaceOnUse">
+      <path class="a" transform="rotate(45 546.8 845.5)" d="M367.7 871h85v85h-85z"/>
+    </mask>
+    <mask id="d" x="837.9" y="95.8" width="205.2" height="205.2" maskUnits="userSpaceOnUse">
+      <path class="a" transform="rotate(-135 932.9 246)" d="M876 260h170v85H876z"/>
+    </mask>
+    <mask id="g" x="-35.2" y="299.5" width="205.2" height="205.2" maskUnits="userSpaceOnUse">
+      <path class="a" transform="rotate(-45 -81.7 457.6)" d="M-22 463.7h170v85H-22z"/>
+    </mask>
+    <style>
+      .a{fill:#fff}
+    </style>
+  </defs>
+  <path transform="rotate(45 852.3 570)" style="fill:url(#a)" d="M694.4 269.8h42.5v736.5h-42.5z"/>
+  <g style="mask:url(#b)">
+    <circle cx="402.1" cy="736.8" r="85" style="fill:url(#c)"/>
+  </g>
+  <g style="mask:url(#d)">
+    <circle cx="922.9" cy="216" r="85" style="fill:url(#e)"/>
+  </g>
+  <path transform="rotate(135 226.7 680)" style="fill:url(#f)" d="M185.3 515.6h42.5v448.5h-42.5z"/>
+  <g style="mask:url(#g)">
+    <circle cx="85" cy="419.7" r="85" style="fill:url(#h)"/>
+  </g>
+  <rect x="164.4" y="320" width="288" height="576" rx="42.5" transform="rotate(-45 163.7 559.5)" style="fill:#195abd"/>
+  <rect x="469.8" y="74.2" width="288" height="864" rx="42.5" transform="rotate(45 750.5 438.2)" style="fill:url(#i)"/>
+</svg>
--- a/frontend/src/views/migrate/icons/ticktick.svg
+++ b/frontend/src/views/migrate/icons/ticktick.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg" class="logo_1OKcB"><g fill="none" fill-rule="evenodd"><rect></rect><path d="M30.755 33.292l-7.34 8.935L40.798 56.48a5.782 5.782 0 008.182-.854l31.179-38.93-9.026-7.228L43.614 43.83l-12.86-10.538z" fill="#FFB000"></path><path d="M44 78.1C25.197 78.1 9.9 62.803 9.9 44S25.197 9.9 44 9.9V0C19.738 0 0 19.738 0 44s19.738 44 44 44 44-19.738 44-44h-9.9c0 18.803-15.297 34.1-34.1 34.1" fill="#4772FA"></path></g></svg>
--- a/frontend/src/views/migrate/icons/todoist.svg
+++ b/frontend/src/views/migrate/icons/todoist.svg
@ -0,0 +1,6 @@
+<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <path d="M224 0H32A32 32 0 0 0 0 32v192a32 32 0 0 0 32 32h192a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32" fill="#E44332"/>
+  <path d="m54.1 120.8 102.6-59.6c2.2-1.3 2.3-5.2-.2-6.6l-8.8-5.1a8 8 0 0 0-8 0c-1.2.8-83.1 48.3-85.8 50-3.3 1.8-7.4 1.8-10.6 0L0 74v21.6l43 25.2c3.8 2.2 7.5 2.1 11.1 0" fill="#FFF"/>
+  <path d="M54.1 161.6 156.7 102c2.2-1.3 2.3-5.2-.2-6.6l-8.8-5.1a8 8 0 0 0-8 0l-85.8 50c-3.3 1.8-7.4 1.8-10.6 0L0 114.7v21.6l43 25.2c3.8 2.2 7.5 2.1 11.1 0" fill="#FFF"/>
+  <path d="m54.1 205 102.6-59.6c2.2-1.3 2.3-5.2-.2-6.7l-8.8-5a8 8 0 0 0-8 0L54 183.6c-3.3 1.9-7.4 1.9-10.6 0L0 158.2v21.6L43 205c3.8 2.1 7.5 2 11.1 0" fill="#FFF"/>
+</svg>
--- a/frontend/src/views/migrate/icons/trello.svg
+++ b/frontend/src/views/migrate/icons/trello.svg
@ -0,0 +1,11 @@
+<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
+      <stop stop-color="#0091E6" offset="0%"/>
+      <stop stop-color="#0079BF" offset="100%"/>
+    </linearGradient>
+  </defs>
+  <rect fill="url(#a)" width="256" height="256" rx="25"/>
+  <rect fill="#FFF" x="144.6" y="33.3" width="78.1" height="112" rx="12"/>
+  <rect fill="#FFF" x="33.3" y="33.3" width="78.1" height="176" rx="12"/>
+</svg>
--- a/frontend/src/views/migrate/icons/vikunja-file.png
+++ b/frontend/src/views/migrate/icons/vikunja-file.png
--- a/frontend/src/views/migrate/icons/wunderlist.jpg
+++ b/frontend/src/views/migrate/icons/wunderlist.jpg
--- a/frontend/src/views/migrate/migrators.ts
+++ b/frontend/src/views/migrate/migrators.ts
@ -0,0 +1,52 @@
+import wunderlistIcon from './icons/wunderlist.jpg'
+import todoistIcon from './icons/todoist.svg?url'
+import trelloIcon from './icons/trello.svg?url'
+import microsoftTodoIcon from './icons/microsoft-todo.svg?url'
+import vikunjaFileIcon from './icons/vikunja-file.png?url'
+import tickTickIcon from './icons/ticktick.svg?url'
+
+export interface Migrator {
+	id: string
+	name: string
+	isFileMigrator?: boolean
+	icon: string
+}
+
+interface IMigratorRecord {
+	[key: Migrator['id']]: Migrator
+ }
+
+export const MIGRATORS = {
+	wunderlist: {
+		id: 'wunderlist',
+		name: 'Wunderlist',
+		icon: wunderlistIcon,
+	},
+	todoist: {
+		id: 'todoist',
+		name: 'Todoist',
+		icon: todoistIcon as string,
+	},
+	trello: {
+		id: 'trello',
+		name: 'Trello',
+		icon: trelloIcon as string,
+	},
+	'microsoft-todo': {
+		id: 'microsoft-todo',
+		name: 'Microsoft Todo',
+		icon: microsoftTodoIcon as string,
+	},
+	'vikunja-file': {
+		id: 'vikunja-file',
+		name: 'Vikunja Export',
+		icon: vikunjaFileIcon,
+		isFileMigrator: true,
+	},
+	ticktick: {
+		id: 'ticktick',
+		name: 'TickTick',
+		icon: tickTickIcon as string,
+		isFileMigrator: true,
+	},
+} as const satisfies IMigratorRecord
				`@ -0,0 +1 @@`
				`<svg viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg" class="logo_1OKcB"><g fill="none" fill-rule="evenodd"><rect></rect><path d="M30.755 33.292l-7.34 8.935L40.798 56.48a5.782 5.782 0 008.182-.854l31.179-38.93-9.026-7.228L43.614 43.83l-12.86-10.538z" fill="#FFB000"></path><path d="M44 78.1C25.197 78.1 9.9 62.803 9.9 44S25.197 9.9 44 9.9V0C19.738 0 0 19.738 0 44s19.738 44 44 44 44-19.738 44-44h-9.9c0 18.803-15.297 34.1-34.1 34.1" fill="#4772FA"></path></g></svg>`