From 691ce71b9c0bce8cca47b678f5da32de5fe5b34f Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 26 Apr 2024 14:18:26 +0530
Subject: [PATCH] chore: review comments

---
 .../settings/personal/UserProfilePicture.vue  |  4 +-
 .../v3/components/Form/InitialsAvatar.vue     |  6 +--
 .../v3/components/Form/ProfileAvatar.vue      | 54 +++++++------------
 app/javascript/v3/helpers/CommonHelper.js     |  2 +
 4 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue
index 489f95ecd..0fd372dc0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue
@@ -8,8 +8,8 @@
       <profile-avatar
         :src="src"
         :name="userNameWithoutEmoji"
-        @change-avatar="updateProfilePicture"
-        @delete-avatar="deleteProfilePicture"
+        @change="updateProfilePicture"
+        @delete="deleteProfilePicture"
       />
     </div>
   </div>
diff --git a/app/javascript/v3/components/Form/InitialsAvatar.vue b/app/javascript/v3/components/Form/InitialsAvatar.vue
index 0f0a8c7f5..7f7b596d8 100644
--- a/app/javascript/v3/components/Form/InitialsAvatar.vue
+++ b/app/javascript/v3/components/Form/InitialsAvatar.vue
@@ -1,8 +1,8 @@
 <template>
   <div
     class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
-    :class="`h-[${size}px] w-[${size}]px ${colorClass}`"
-    :style="style"
+    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
+    :style="fontSizeStyle"
     aria-hidden="true"
   >
     <slot>{{ initial }}</slot>
@@ -32,7 +32,7 @@ const props = defineProps({
     default: 72,
   },
 });
-const style = computed(() => ({
+const fontSizeStyle = computed(() => ({
   fontSize: `${Math.floor(props.size / 2.5)}px`,
 }));
 const colorClass = computed(() => {
diff --git a/app/javascript/v3/components/Form/ProfileAvatar.vue b/app/javascript/v3/components/Form/ProfileAvatar.vue
index 5be638eea..fb802d35d 100644
--- a/app/javascript/v3/components/Form/ProfileAvatar.vue
+++ b/app/javascript/v3/components/Form/ProfileAvatar.vue
@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="relative rounded-xl h-[72px] w-[72px] cursor-pointer"
-    @mouseover="onImageOver"
-    @mouseleave="onImageOut"
-  >
+  <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
     <img
       v-if="shouldShowImage"
       class="rounded-xl h-[72px] w-[72px]"
@@ -19,27 +15,24 @@
       ref="fileInputRef"
       type="file"
       accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-      style="display: none"
+      hidden
       @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 dark:border-ash-75 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 class="hidden group-hover:block">
+      <button
+        v-if="src"
+        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none dark:border-ash-75 reset-base -top-2 -right-2 bg-ash-300"
+        @click="onAvatarDelete"
+      >
+        <fluent-icon icon="dismiss" size="16" class="text-ash-900" />
+      </button>
+      <button
+        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>
   </div>
 </template>
 <script setup>
@@ -60,7 +53,6 @@ const emits = defineEmits(['change', 'delete']);
 
 const hasImageLoaded = ref(false);
 const imageLoadedError = ref(false);
-const shouldShowUploadIcon = ref(false);
 const fileInputRef = ref(null);
 
 const shouldShowImage = computed(() => props.src && !imageLoadedError.value);
@@ -74,27 +66,19 @@ const onImageLoad = () => {
   imageLoadedError.value = false;
 };
 
-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-avatar', {
+  emits('change', {
     file,
     url: file ? URL.createObjectURL(file) : null,
   });
 };
 
 const onAvatarDelete = () => {
-  emits('delete-avatar');
+  emits('delete');
 };
 </script>
diff --git a/app/javascript/v3/helpers/CommonHelper.js b/app/javascript/v3/helpers/CommonHelper.js
index a4b55bdd5..8e75d2b09 100644
--- a/app/javascript/v3/helpers/CommonHelper.js
+++ b/app/javascript/v3/helpers/CommonHelper.js
@@ -3,6 +3,8 @@ export const replaceRouteWithReload = url => {
 };
 
 export const userInitial = name => {
+  if (!name) return '';
+
   const parts = name.split(/[ -]/).filter(Boolean);
   let initials = parts.map(part => part[0].toUpperCase()).join('');
   return initials.slice(0, 2);