chore: add user initial helper

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

@@ -5,13 +5,13 @@
     :style="style"
     aria-hidden="true"
   >
-    <slot>{{ userInitial }}</slot>
+    <slot>{{ initial }}</slot>
   </div>
 </template>
 
 <script setup>
 import { computed } from 'vue';
-
+import { userInitial } from 'v3/helpers/CommonHelper';
 const colors = {
   1: 'bg-ash-200 text-ash-900',
   2: 'bg-amber-200 text-amber-900',
@@ -22,7 +22,6 @@ const colors = {
   7: 'bg-mint-100 text-mint-800',
   8: 'bg-orange-100 text-orange-800',
 };
-
 const props = defineProps({
   name: {
     type: String,
@@ -33,18 +32,11 @@ const props = defineProps({
     default: 72,
   },
 });
-
 const style = computed(() => ({
   fontSize: `${Math.floor(props.size / 2.5)}px`,
 }));
-
 const colorClass = computed(() => {
   return colors[(props.name.length % 8) + 1];
 });
-
-const userInitial = computed(() => {
-  const parts = props.name.split(/[ -]/).filter(Boolean);
-  let initials = parts.map(part => part[0].toUpperCase()).join('');
-  return initials.slice(0, 2);
-});
+const initial = userInitial(props.name);
 </script>

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

@@ -26,7 +26,7 @@
         'px-3 py-2 mb-0': spacing === 'compact',
         'pl-9': icon,
       }"
-      disabled
+      :disabled="disabled"
       class="block w-full h-10 ltr:pl-3 ltr:pr-2 rtl:pl-2 rtl:pr-3 py-2.5 !border-none shadow-sm appearance-none reset-base rounded-xl outline outline-1 focus:outline-1 text-ash-900 placeholder:text-ash-200 sm:text-sm sm:leading-6"
       @input="onInput"
       @blur="$emit('blur')"

app/javascript/v3/helpers/CommonHelper.js

@@ -1,3 +1,9 @@
 export const replaceRouteWithReload = url => {
   window.location = url;
 };
+
+export const userInitial = name => {
+  const parts = name.split(/[ -]/).filter(Boolean);
+  let initials = parts.map(part => part[0].toUpperCase()).join('');
+  return initials.slice(0, 2);
+};

app/javascript/v3/helpers/specs/CommonHelper.spec.js

@@ -0,0 +1,10 @@
+import { userInitial } from '../CommonHelper';
+
+describe('#userInitial', () => {
+  it('returns the initials of the user', () => {
+    expect(userInitial('John Doe')).toEqual('JD');
+    expect(userInitial('John')).toEqual('J');
+    expect(userInitial('John-Doe')).toEqual('JD');
+    expect(userInitial('John Doe Smith')).toEqual('JD');
+  });
+});