mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 17:24:10 +00:00
4bfec37a53
Match the Company Settings design pattern: sidebar navigation on desktop
with dropdown on mobile, child routes rendered via RouterView. Each tab
(General, Profile Photo, Security) is now a BaseSettingCard with its own
route under /admin/user-settings/{general,profile-photo,security}.
84 lines
1.9 KiB
Vue
84 lines
1.9 KiB
Vue
<template>
|
|
<form @submit.prevent="updateAvatar">
|
|
<BaseSettingCard
|
|
:title="$t('settings.account_settings.profile_picture')"
|
|
:description="$t('settings.account_settings.profile_picture_description')"
|
|
>
|
|
<BaseInputGrid>
|
|
<BaseInputGroup
|
|
:label="$t('settings.account_settings.profile_picture')"
|
|
>
|
|
<BaseFileUploader
|
|
v-model="imgFiles"
|
|
:avatar="true"
|
|
accept="image/*"
|
|
@change="onFileInputChange"
|
|
@remove="onFileInputRemove"
|
|
/>
|
|
</BaseInputGroup>
|
|
</BaseInputGrid>
|
|
|
|
<BaseButton :loading="isSaving" :disabled="isSaving" class="mt-6">
|
|
<template #left="slotProps">
|
|
<BaseIcon
|
|
v-if="!isSaving"
|
|
name="ArrowDownOnSquareIcon"
|
|
:class="slotProps.class"
|
|
/>
|
|
</template>
|
|
{{ $t('settings.company_info.save') }}
|
|
</BaseButton>
|
|
</BaseSettingCard>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useUserStore } from '@/scripts/admin/stores/user'
|
|
|
|
const userStore = useUserStore()
|
|
|
|
const isSaving = ref(false)
|
|
let avatarFileBlob = ref(null)
|
|
let imgFiles = ref([])
|
|
const isAdminAvatarRemoved = ref(false)
|
|
|
|
if (userStore.currentUser.avatar) {
|
|
imgFiles.value.push({
|
|
image: userStore.currentUser.avatar,
|
|
})
|
|
}
|
|
|
|
function onFileInputChange(fileName, file) {
|
|
avatarFileBlob.value = file
|
|
}
|
|
|
|
function onFileInputRemove() {
|
|
avatarFileBlob.value = null
|
|
isAdminAvatarRemoved.value = true
|
|
}
|
|
|
|
async function updateAvatar() {
|
|
if (!avatarFileBlob.value && !isAdminAvatarRemoved.value) {
|
|
return
|
|
}
|
|
|
|
isSaving.value = true
|
|
|
|
try {
|
|
let data = new FormData()
|
|
|
|
if (avatarFileBlob.value) {
|
|
data.append('admin_avatar', avatarFileBlob.value)
|
|
}
|
|
data.append('is_admin_avatar_removed', isAdminAvatarRemoved.value)
|
|
|
|
await userStore.uploadAvatar(data)
|
|
avatarFileBlob.value = null
|
|
isAdminAvatarRemoved.value = false
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
</script>
|