feat: user Avatar script setup (#1935)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1935
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/views/user/settings/Avatar.vue

@@ -1,25 +1,13 @@
 <template>
 	<card :title="$t('user.settings.avatar.title')">
 		<div class="control mb-4">
-			<label class="radio">
+			<label
-				<input name="avatarProvider" type="radio" v-model="avatarProvider" value="default"/>
+				v-for="(label, providerId) in AVATAR_PROVIDERS"
-				{{ $t('misc.default') }}
+				:key="providerId"
-			</label>
+				class="radio"
-			<label class="radio">
+			>
-				<input name="avatarProvider" type="radio" v-model="avatarProvider" value="initials"/>
+				<input name="avatarProvider" type="radio" v-model="avatarProvider" :value="providerId"/>
-				{{ $t('user.settings.avatar.initials') }}
+				{{ label }}
-			</label>
-			<label class="radio">
-				<input name="avatarProvider" type="radio" v-model="avatarProvider" value="gravatar"/>
-				{{ $t('user.settings.avatar.gravatar') }}
-			</label>
-			<label class="radio">
-				<input name="avatarProvider" type="radio" v-model="avatarProvider" value="marble"/>
-				{{ $t('user.settings.avatar.marble') }}
-			</label>
-			<label class="radio">
-				<input name="avatarProvider" type="radio" v-model="avatarProvider" value="upload"/>
-				{{ $t('user.settings.avatar.upload') }}
 			</label>
 		</div>
 
@@ -31,14 +19,16 @@
 				ref="avatarUploadInput"
 				type="file"
 			/>
+
 			<x-button
+				v-if="!isCropAvatar"
 				:loading="avatarService.loading || loading"
 				@click="$refs.avatarUploadInput.click()"
-				v-if="!isCropAvatar">
+			>
 				{{ $t('user.settings.avatar.uploadAvatar') }}
 			</x-button>
 			<template v-else>
-				<cropper
+				<Cropper
 					:src="avatarToCrop"
 					:stencil-props="{aspectRatio: 1}"
 					@ready="() => loading = false"
@@ -55,7 +45,7 @@
 			</template>
 		</template>
 
-		<div class="mt-2" v-if="avatarProvider !== 'upload'">
+		<div class="mt-2" v-else>
 			<x-button
 				:loading="avatarService.loading || loading"
 				@click="updateAvatarStatus()"
@@ -69,83 +59,97 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
+
+export default defineComponent({
+	name: 'user-settings-avatar',
+})
+</script>
+
+<script setup lang="ts">
+import {ref, shallowReactive} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useStore} from 'vuex'
 import {Cropper} from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 
 import AvatarService from '@/services/avatar'
 import AvatarModel from '@/models/avatar'
+import { useTitle } from '@/composables/useTitle'
+import { success } from '@/message'
 
-export default defineComponent({
+const {t} = useI18n()
-	name: 'user-settings-avatar',
+const store = useStore()
-	data() {
-		return {
-			avatarProvider: '',
-			avatarService: new AvatarService(),
-			isCropAvatar: false,
-			avatarToCrop: null,
-			loading: false, // Seperate variable because some things we're doing in browser take a bit
-		}
-	},
-	created() {
-		this.avatarStatus()
-	},
-	components: {
-		Cropper,
-	},
-	mounted() {
-		this.setTitle(`${this.$t('user.settings.avatar.title')} - ${this.$t('user.settings.title')}`)
-	},
-	methods: {
-		async avatarStatus() {
-			const { avatarProvider } = await this.avatarService.get({})
-			this.avatarProvider = avatarProvider
-		},
 
-		async updateAvatarStatus() {
+const AVATAR_PROVIDERS = {
-			const avatarStatus = new AvatarModel({avatarProvider: this.avatarProvider})
+	default: t('misc.default'),
-			await this.avatarService.update(avatarStatus)
+	initials: t('user.settings.avatar.initials'),
-			this.$message.success({message: this.$t('user.settings.avatar.statusUpdateSuccess')})
+	gravatar: t('user.settings.avatar.gravatar'),
-			this.$store.commit('auth/reloadAvatar')
+	marble: t('user.settings.avatar.marble'),
-		},
+	upload: t('user.settings.avatar.upload'),
+}
 
-		async uploadAvatar() {
+useTitle(() => `${t('user.settings.avatar.title')} - ${t('user.settings.title')}`)
-			this.loading = true
-			const {canvas} = this.$refs.cropper.getResult()
 
-			if (!canvas) {
+const avatarService = shallowReactive(new AvatarService())
-				this.loading = false
+// Seperate variable because some things we're doing in browser take a bit
-				return
+const loading = ref(false)
-			}
 
-			try {
-				const blob = await new Promise(resolve => canvas.toBlob(blob => resolve(blob)))
-				await this.avatarService.create(blob)
-				this.$message.success({message: this.$t('user.settings.avatar.setSuccess')})
-				this.$store.commit('auth/reloadAvatar')
-			} finally {
-				this.loading = false
-				this.isCropAvatar = false
-			}
-		},
 
-		cropAvatar() {
+const avatarProvider = ref('')
-			const avatar = this.$refs.avatarUploadInput.files
+async function avatarStatus() {
+	const { avatarProvider: currentProvider } = await avatarService.get({})
+	avatarProvider.value = currentProvider
+}
+avatarStatus()
 
-			if (avatar.length === 0) {
-				return
-			}
 
-			this.loading = true
+async function updateAvatarStatus() {
-			const reader = new FileReader()
+	await avatarService.update(new AvatarModel({avatarProvider: avatarProvider.value}))
-			reader.onload = e => {
+	success({message: t('user.settings.avatar.statusUpdateSuccess')})
-				this.avatarToCrop = e.target.result
+	store.commit('auth/reloadAvatar')
-				this.isCropAvatar = true
+}
-			}
+
-			reader.onloadend = () => this.loading = false
+const cropper = ref()
-			reader.readAsDataURL(avatar[0])
+const isCropAvatar = ref(false)
-		},
+
-	},
+async function uploadAvatar() {
-})
+	loading.value = true
+	const {canvas} = cropper.value.getResult()
+
+	if (!canvas) {
+		loading.value = false
+		return
+	}
+
+	try {
+		const blob = await new Promise(resolve => canvas.toBlob(blob => resolve(blob)))
+		await avatarService.create(blob)
+		success({message: t('user.settings.avatar.setSuccess')})
+		store.commit('auth/reloadAvatar')
+	} finally {
+		loading.value = false
+		isCropAvatar.value = false
+	}
+}
+
+const avatarToCrop = ref()
+const avatarUploadInput = ref()
+function cropAvatar() {
+	const avatar = avatarUploadInput.value.files
+
+	if (avatar.length === 0) {
+		return
+	}
+
+	loading.value = true
+	const reader = new FileReader()
+	reader.onload = e => {
+		avatarToCrop.value = e.target.result
+		isCropAvatar.value = true
+	}
+	reader.onloadend = () => loading.value = false
+	reader.readAsDataURL(avatar[0])
+}
 </script>
 
 <style lang="scss">