feat: complete avatar

app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue

@@ -4,56 +4,19 @@
       <span class="text-sm font-medium text-ash-900">
         {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
       </span>
-      <div
-        class="relative rounded-xl h-[72px] w-[72px] cursor-pointer"
-        @mouseover="onImageOver"
-        @mouseleave="onImageOut"
-      >
-        <img
-          v-if="shouldShowImage"
-          class="rounded-xl h-[72px] w-[72px]"
-          :src="src"
-          draggable="false"
-          @load="onImageLoad"
-          @error="onImageLoadError"
-        />
-        <Avatar
-          v-show="!shouldShowImage"
-          :username="userNameWithoutEmoji"
-          :size="72"
-        />
-        <input
-          ref="fileInputRef"
-          type="file"
-          accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-          style="display: none"
-          @change="onImageUpload"
-        />
-        <button
-          v-if="src && shouldShowUploadIcon"
-          class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none reset-base -top-2 -right-2 bg-ash-300"
-          @click="onAvatarDelete"
-        >
-          <fluent-icon
-            icon="dismiss"
-            size="16"
-            class="text-slate-800 dark:text-slate-200"
-          />
-        </button>
-        <button
-          v-if="shouldShowUploadIcon"
-          class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
-          @click="openFileInput"
-        >
-          <fluent-icon icon="avatar-upload" size="32" class="text-white" />
-        </button>
-      </div>
+
+      <profile-avatar
+        :src="src"
+        :name="userNameWithoutEmoji"
+        @change="updateProfilePicture"
+        @delete="deleteProfilePicture"
+      />
     </div>
   </div>
 </template>
 <script setup>
-import { computed, ref } from 'vue';
-import Avatar from 'v3/components/Form/Avatar.vue';
+import { computed } from 'vue';
+import ProfileAvatar from 'v3/components/Form/ProfileAvatar.vue';
 import { removeEmoji } from 'shared/helpers/emoji';
 const props = defineProps({
   src: {
@@ -68,51 +31,13 @@ const props = defineProps({
 
 const emits = defineEmits(['change', 'delete']);
 
-const hasImageLoaded = ref(false);
-const imageLoadedError = ref(false);
-const shouldShowUploadIcon = ref(false);
-const fileInputRef = ref(null);
 const userNameWithoutEmoji = computed(() => removeEmoji(props.name));
 
-const shouldShowImage = computed(() => {
-  if (!props.src) {
-    return false;
-  }
-  if (hasImageLoaded.value) {
-    return !imageLoadedError.value;
-  }
-  return true;
-});
-
-const onImageLoadError = () => {
-  imageLoadedError.value = true;
+const updateProfilePicture = e => {
+  emits('change', e);
 };
 
-const onImageLoad = () => {
-  hasImageLoaded.value = true;
-};
-
-const onImageOver = () => {
-  shouldShowUploadIcon.value = true;
-};
-
-const onImageOut = () => {
-  shouldShowUploadIcon.value = false;
-};
-
-const openFileInput = () => {
-  fileInputRef.value.click();
-};
-
-const onImageUpload = event => {
-  const [file] = event.target.files;
-  emits('change', {
-    file,
-    url: file ? URL.createObjectURL(file) : null,
-  });
-};
-
-const onAvatarDelete = () => {
+const deleteProfilePicture = () => {
   emits('delete');
 };
 </script>

app/javascript/v3/components/Form/InitialsAvatar.vue

@@ -15,6 +15,12 @@ import { computed } from 'vue';
 const colors = {
   1: 'bg-ash-200 text-ash-900',
   2: 'bg-amber-200 text-amber-900',
+  3: 'bg-pink-100 text-pink-800',
+  4: 'bg-purple-100 text-purple-800',
+  5: 'bg-indigo-100 text-indigo-800',
+  6: 'bg-grass-100 text-grass-800',
+  7: 'bg-mint-100 text-mint-800',
+  8: 'bg-orange-100 text-orange-800',
 };
 
 const props = defineProps({
@@ -33,7 +39,7 @@ const style = computed(() => ({
 }));
 
 const colorClass = computed(() => {
-  return colors[(props.username.length % 2) + 1];
+  return colors[(props.username.length % 8) + 1];
 });
 
 const userInitial = computed(() => {

app/javascript/v3/components/Form/ProfileAvatar.vue

@@ -0,0 +1,120 @@
+<template>
+  <div
+    class="relative rounded-xl h-[72px] w-[72px] cursor-pointer"
+    @mouseover="onImageOver"
+    @mouseleave="onImageOut"
+  >
+    <div
+      v-if="shouldShowFallback"
+      class="flex items-center justify-center h-[72px] w-[72px] rounded-xl bg-ash-300"
+    >
+      <fluent-icon icon="person" type="filled" size="40" class="text-ash-50" />
+    </div>
+    <img
+      v-if="shouldShowImage"
+      class="rounded-xl h-[72px] w-[72px]"
+      :src="src"
+      draggable="false"
+      @load="onImageLoad"
+      @error="onImageLoadError"
+    />
+    <initials-avatar
+      v-if="!shouldShowImage"
+      :username="userNameWithoutEmoji"
+      :size="72"
+    />
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+      style="display: none"
+      @change="onImageUpload"
+    />
+    <button
+      v-if="src && shouldShowUploadIcon"
+      class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none reset-base -top-2 -right-2 bg-ash-300"
+      @click="onAvatarDelete"
+    >
+      <fluent-icon
+        icon="dismiss"
+        size="16"
+        class="text-slate-800 dark:text-slate-200"
+      />
+    </button>
+    <button
+      v-if="shouldShowUploadIcon"
+      class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
+      @click="openFileInput"
+    >
+      <fluent-icon icon="avatar-upload" size="32" class="text-white" />
+    </button>
+  </div>
+</template>
+<script setup>
+import { computed, ref } from 'vue';
+import InitialsAvatar from 'v3/components/Form/InitialsAvatar.vue';
+import { removeEmoji } from 'shared/helpers/emoji';
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+});
+
+const emits = defineEmits(['change', 'delete']);
+
+const hasImageLoaded = ref(false);
+const imageLoadedError = ref(false);
+const shouldShowUploadIcon = ref(false);
+const fileInputRef = ref(null);
+const userNameWithoutEmoji = computed(() => removeEmoji(props.name));
+
+const shouldShowFallback = computed(() => !props.src && !props.name);
+
+const shouldShowImage = computed(() => {
+  if (!props.src) {
+    return false;
+  }
+  if (hasImageLoaded.value) {
+    return !imageLoadedError.value;
+  }
+  return true;
+});
+
+const onImageLoadError = () => {
+  imageLoadedError.value = true;
+};
+
+const onImageLoad = () => {
+  hasImageLoaded.value = true;
+};
+
+const onImageOver = () => {
+  shouldShowUploadIcon.value = true;
+};
+
+const onImageOut = () => {
+  shouldShowUploadIcon.value = false;
+};
+
+const openFileInput = () => {
+  fileInputRef.value.click();
+};
+
+const onImageUpload = event => {
+  const [file] = event.target.files;
+  emits('change', {
+    file,
+    url: file ? URL.createObjectURL(file) : null,
+  });
+};
+
+const onAvatarDelete = () => {
+  emits('delete');
+};
+</script>