akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Add avatar upload and merge EditableAvatar.vue with Avatar.vue

Browse Source
This commit is contained in:
iamsivin
2024-11-09 15:30:52 +05:30
parent 271b322761
commit d6cc5422d0
9 changed files with 201 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+5
View File
@@ -192,6 +192,11 @@ const getFormBinding = key => {
};
watch(() => props.contactData, updateState, { immediate: true, deep: true });
// Expose state to parent component for avatar upload
defineExpose({
state,
});
</script>
<template>
app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
+51 -3
View File
@@ -2,10 +2,11 @@
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStore } from 'dashboard/composables/store';
import { useAlert } from 'dashboard/composables';
import { dynamicTime } from 'shared/helpers/timeHelper';
import { debounce } from '@chatwoot/utils';
import EditableAvatar from 'dashboard/components-next/avatar/EditableAvatar.vue';
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import ContactLabels from 'dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue';
import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
@@ -25,6 +26,11 @@ const store = useStore();
const confirmDeleteContactDialogRef = ref(null);
const avatarFile = ref(null);
const avatarUrl = ref('');
const contactsFormRef = ref(null);
const selectedContactData = computed(() => {
if (!props.selectedContact) return {};
@@ -43,6 +49,10 @@ const lastActivityAt = computed(() => {
: '';
});
const avatarSrc = computed(() => {
return avatarUrl.value ? avatarUrl.value : props.selectedContact?.thumbnail;
});
const updateContact = async updatedData => {
await store.dispatch('contacts/update', updatedData);
await store.dispatch(
@@ -60,14 +70,51 @@ const handleFormUpdate = debounce(
const openConfirmDeleteContactDialog = () => {
confirmDeleteContactDialogRef.value?.dialogRef.open();
};
const handleAvatarUpload = async ({ file, url }) => {
avatarFile.value = file;
avatarUrl.value = url;
try {
await updateContact({
...contactsFormRef.value?.state,
avatar: file,
isFormData: true,
});
useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.UPLOAD.SUCCESS_MESSAGE'));
} catch {
useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.UPLOAD.ERROR_MESSAGE'));
}
};
const handleAvatarDelete = async () => {
try {
if (props.selectedContact && props.selectedContact.id) {
await store.dispatch('contacts/deleteAvatar', props.selectedContact.id);
useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.DELETE.SUCCESS_MESSAGE'));
}
avatarFile.value = null;
avatarUrl.value = '';
} catch (error) {
useAlert(
error.message
? error.message
: t('CONTACTS_LAYOUT.DETAILS.AVATAR.DELETE.ERROR_MESSAGE')
);
}
};
</script>
<template>
<div class="flex flex-col items-start gap-8 pb-6">
<div class="flex flex-col items-start gap-3">
<EditableAvatar
:src="selectedContact.thumbnail"
<Avatar
:src="avatarSrc"
:name="selectedContact.name"
:size="72"
allow-upload
@upload="handleAvatarUpload"
@delete="handleAvatarDelete"
/>
<div class="flex flex-col gap-1">
<h3 class="text-base font-medium text-n-slate-12">
@@ -86,6 +133,7 @@ const openConfirmDeleteContactDialog = () => {
<ContactLabels :contact-id="selectedContact.id" />
</div>
<ContactsForm
ref="contactsFormRef"
:contact-data="selectedContactData"
is-details-view
@update="handleFormUpdate"
app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+5 -3
View File
@@ -12,7 +12,7 @@ import { shouldBeUrl } from 'shared/helpers/Validators';
import Button from 'dashboard/components-next/button/Button.vue';
import Input from 'dashboard/components-next/input/Input.vue';
import EditableAvatar from 'dashboard/components-next/avatar/EditableAvatar.vue';
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
import ColorPicker from 'dashboard/components-next/colorpicker/ColorPicker.vue';
@@ -187,10 +187,12 @@ const handleAvatarDelete = () => {
<label class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50">
{{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.LABEL') }}
</label>
<EditableAvatar
label="Avatar"
<Avatar
:src="state.logoUrl"
:name="state.name"
:size="72"
allow-upload
icon-name="i-lucide-building-2"
@upload="handleAvatarUpload"
@delete="handleAvatarDelete"
/>
app/javascript/dashboard/components-next/avatar/Avatar.story.vue
+74 -27
View File
@@ -5,37 +5,30 @@ import Avatar from './Avatar.vue';
<template>
<Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
<Variant title="Default">
<div class="p-4 bg-white dark:bg-slate-900">
<div class="flex p-4 space-x-4 bg-white dark:bg-slate-900">
<Avatar
name=""
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
class="bg-ruby-300 dark:bg-ruby-900"
/>
<Avatar name="Amaya" src="" />
<Avatar name="" src="" />
</div>
</Variant>
<Variant title="Default with upload">
<div class="p-4 bg-white dark:bg-slate-900">
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
class="bg-ruby-300 dark:bg-ruby-900"
allow-upload
/>
</div>
</Variant>
<Variant title="Invalid or empty SRC">
<div class="p-4 space-x-4 bg-white dark:bg-slate-900">
<Avatar src="https://example.com/ruby.png" name="Ruby" allow-upload />
<Avatar name="Bruce Wayne" allow-upload />
</div>
</Variant>
<Variant title="Rounded Full">
<div class="p-4 space-x-4 bg-white dark:bg-slate-900">
<Variant title="Different Shapes">
<div class="gap-4 p-4 bg-white dark:bg-slate-900">
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
name=""
allow-upload
rounded-full
:size="48"
/>
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
name=""
allow-upload
:size="48"
/>
</div>
</Variant>
@@ -43,24 +36,78 @@ import Avatar from './Avatar.vue';
<Variant title="Different Sizes">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
:size="48"
class="bg-green-300 dark:bg-green-900"
name=""
allow-upload
/>
<Avatar
:size="72"
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Jade"
class="bg-indigo-300 dark:bg-indigo-900"
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
name=""
allow-upload
/>
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Emery"
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
name=""
:size="96"
class="bg-woot-300 dark:bg-woot-900"
allow-upload
/>
</div>
</Variant>
<Variant title="With Status">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
status="online"
name="Felix Online"
/>
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Jade"
status="busy"
name="Jade Busy"
/>
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Emery"
status="offline"
name="Emery Offline"
/>
</div>
</Variant>
<Variant title="With Custom Icon">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<Avatar name="Custom Icon" icon-name="i-lucide-user" :size="48" />
<Avatar
name="Custom Industry"
icon-name="i-lucide-building-2"
:size="48"
/>
</div>
</Variant>
<Variant title="Upload States">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<!-- Empty state with upload -->
<Avatar name="Upload New" allow-upload :size="48" />
<!-- With image and upload -->
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Upload"
name="Replace Image"
allow-upload
:size="48"
/>
</div>
</Variant>
<Variant title="Name Initials">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<Avatar name="Catherine" :size="48" />
<Avatar name="John Doe" :size="48" />
<Avatar name="Rose Doe John" :size="48" />
</div>
</Variant>
</Story>
</template>
app/javascript/dashboard/components-next/avatar/Avatar.vue
+50 -7
View File
@@ -39,11 +39,12 @@ const props = defineProps({
},
});
const emit = defineEmits(['upload']);
const emit = defineEmits(['upload', 'delete']);
const { t } = useI18n();
const isImageValid = ref(true);
const fileInput = ref(null);
const AVATAR_COLORS = {
dark: [
@@ -138,6 +139,32 @@ const invalidateCurrentImage = () => {
isImageValid.value = false;
};
const handleUploadAvatar = () => {
fileInput.value.click();
};
const handleImageUpload = event => {
const [file] = event.target.files;
if (file) {
emit('upload', {
file,
url: file ? URL.createObjectURL(file) : null,
});
}
};
const handleDeleteAvatar = () => {
if (fileInput.value) {
fileInput.value.value = null;
}
emit('delete');
};
const handleDismiss = event => {
event.stopPropagation();
handleDeleteAvatar();
};
watch(
() => props.src,
() => {
@@ -147,7 +174,7 @@ watch(
</script>
<template>
<span class="relative inline-flex" :style="containerStyles">
<span class="relative inline-flex group/avatar" :style="containerStyles">
<!-- Status Badge -->
<slot name="badge" :size="size">
<div
@@ -158,6 +185,15 @@ watch(
/>
</slot>
<!-- Delete Avatar Button -->
<div
v-if="src && allowUpload"
class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 -right-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
@click="handleDismiss"
>
<Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
</div>
<!-- Avatar Container -->
<span
role="img"
@@ -202,16 +238,23 @@ watch(
/>
</template>
<!-- Upload Overlay -->
<!-- Upload Overlay and Input -->
<div
v-if="allowUpload"
role="button"
class="absolute inset-0 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl dark:bg-slate-900/50 bg-slate-900/20 group-hover/avatar:visible group-hover/avatar:opacity-100"
@click="emit('upload')"
class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
@click="handleUploadAvatar"
>
<Icon
icon="i-lucide-upload"
class="text-white dark:text-white size-4"
class="text-white"
:style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
/>
<input
ref="fileInput"
type="file"
accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
class="hidden"
@change="handleImageUpload"
/>
</div>
</span>
app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
-36
View File
@@ -1,36 +0,0 @@
<script setup>
import EditableAvatar from './EditableAvatar.vue';
</script>
<template>
<Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
<Variant title="Default">
<div class="p-4 bg-white dark:bg-slate-900">
<EditableAvatar
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
class="bg-ruby-300 dark:bg-ruby-900"
/>
</div>
</Variant>
<Variant title="Different Sizes">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<EditableAvatar
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
:size="48"
class="bg-green-300 dark:bg-green-900"
/>
<EditableAvatar
:size="72"
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
class="bg-indigo-300 dark:bg-indigo-900"
/>
<EditableAvatar
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
:size="96"
class="bg-woot-300 dark:bg-woot-900"
/>
</div>
</Variant>
</Story>
</template>
app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
-105
View File
@@ -1,105 +0,0 @@
<script setup>
import { computed, ref } from 'vue';
import Icon from 'dashboard/components-next/icon/Icon.vue';
const props = defineProps({
src: {
type: String,
default: '',
},
size: {
type: Number,
default: 72,
},
name: {
type: String,
default: '',
},
});
const emit = defineEmits(['upload', 'delete']);
const avatarSize = computed(() => `${props.size}px`);
const iconSize = computed(() => `${props.size / 2}px`);
const fileInput = ref(null);
const imgError = ref(false);
const shouldShowImage = computed(() => props.src && !imgError.value);
const handleUploadAvatar = () => {
fileInput.value.click();
};
const handleImageUpload = event => {
const [file] = event.target.files;
if (file) {
emit('upload', {
file,
url: file ? URL.createObjectURL(file) : null,
});
}
};
const handleDeleteAvatar = () => {
if (fileInput.value) {
fileInput.value.value = null;
}
emit('delete');
};
const handleDismiss = event => {
event.stopPropagation();
handleDeleteAvatar();
};
</script>
<template>
<div
class="relative flex flex-col items-center gap-2 select-none rounded-xl outline outline-1 outline-n-container group/avatar"
:style="{ width: avatarSize, height: avatarSize }"
>
<img
v-if="shouldShowImage"
:src="src"
:alt="name || 'avatar'"
class="object-cover w-full h-full shadow-sm rounded-xl"
@error="imgError = true"
/>
<div
v-else
class="flex items-center justify-center w-full h-full rounded-xl bg-n-alpha-2"
>
<Icon
icon="i-lucide-building-2"
class="text-n-brand/50"
:style="{ width: `${iconSize}`, height: `${iconSize}` }"
/>
</div>
<div
v-if="src"
class="absolute z-20 outline outline-1 outline-n-container flex items-center cursor-pointer justify-center w-6 h-6 transition-all invisible opacity-0 duration-500 ease-in-out -top-2.5 -right-2.5 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
@click="handleDismiss"
>
<Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
</div>
<div
class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
@click="handleUploadAvatar"
>
<Icon
icon="i-lucide-upload"
class="text-white"
:style="{ width: `${iconSize}`, height: `${iconSize}` }"
/>
<input
ref="fileInput"
type="file"
accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
class="hidden"
@change="handleImageUpload"
/>
</div>
</div>
</template>
app/javascript/dashboard/i18n/locale/en/contact.json
+10
View File
@@ -510,6 +510,16 @@
"SUCCESS_MESSAGE": "Contact deleted successfully",
"ERROR_MESSAGE": "Could not delete contact. Please try again later."
}
},
"AVATAR": {
"UPLOAD": {
"ERROR_MESSAGE": "Could not upload avatar. Please try again later.",
"SUCCESS_MESSAGE": "Avatar uploaded successfully"
},
"DELETE": {
"SUCCESS_MESSAGE": "Avatar deleted successfully",
"ERROR_MESSAGE": "Could not delete avatar. Please try again later."
}
}
},
"SIDEBAR": {
app/javascript/histoire.setup.ts
+6
View File
@@ -4,6 +4,7 @@ import i18nMessages from 'dashboard/i18n';
import { createI18n } from 'vue-i18n';
import { vResizeObserver } from '@vueuse/components';
import { directive as onClickaway } from 'vue3-click-away';
import FloatingVue from 'floating-vue';
import store from 'dashboard/store';
const i18n = createI18n({
@@ -17,4 +18,9 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
app.use(i18n);
app.directive('resize', vResizeObserver);
app.directive('onClickaway', onClickaway);
app.use(FloatingVue, {
instantMove: true,
arrowOverflow: false,
disposeTimeout: 5000000,
});
});