From 406ec28e0bcc83460e0bece6f537b44995e6f05c Mon Sep 17 00:00:00 2001
From: dhanu <dhanu@orangehrm.com>
Date: Fri, 11 Oct 2024 12:12:35 +0530
Subject: [PATCH 1/9] LinkWithPill.vue, link-with-pill.spec.ts,
 ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts,
 ListSkeleton.story.vue - add onclick event to prevent default behaviour of
 link and execute a function

---
 .../CardTable/Cell/LinkWithPill.vue           | 13 ++++-
 .../CardTable/Cell/ProfilePicture.vue         | 12 +++++
 .../Cell/__tests__/link-with-pill.spec.ts     | 50 +++++++++++++++++++
 .../core/components/ProfilePic/ProfilePic.vue | 19 ++++++-
 .../ProfilePic/__tests__/profile-pic.spec.ts  | 41 +++++++++++++++
 .../ListTable/ListSkeleton.story.vue          | 44 ++++++++++++++++
 6 files changed, 177 insertions(+), 2 deletions(-)

diff --git a/components/src/core/components/CardTable/Cell/LinkWithPill.vue b/components/src/core/components/CardTable/Cell/LinkWithPill.vue
index 5423c2bb4..2ecc81650 100644
--- a/components/src/core/components/CardTable/Cell/LinkWithPill.vue
+++ b/components/src/core/components/CardTable/Cell/LinkWithPill.vue
@@ -6,7 +6,7 @@
         <oxd-skeleton width="50%" animate></oxd-skeleton>
       </template>
       <template v-else>
-        <a :href="link ? row[link] : '#'" :target="target" :class="linkClasses">
+        <a :href="link ? row[link] : '#'" :target="target" :class="linkClasses" @click="handleLinkClick(row, $event)">
           {{ cell }}
         </a>
         <div v-if="pillProperty" :class="pillClasses">
@@ -45,6 +45,13 @@ export default defineComponent({
       }
       return value;
     },
+    handleLinkClick(row: RowItem, event: MouseEvent) {
+      const cellConfig = this.header?.cellConfig;
+      if (cellConfig && typeof cellConfig?.onClick === 'function') {
+        event.preventDefault();
+        this.header.cellConfig.onClick(row, event);
+      }
+    },
   },
   props: {
     link: {
@@ -70,6 +77,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    header: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   computed: {
     linkClasses(): object {
diff --git a/components/src/core/components/CardTable/Cell/ProfilePicture.vue b/components/src/core/components/CardTable/Cell/ProfilePicture.vue
index 096c83827..d767c3ee7 100644
--- a/components/src/core/components/CardTable/Cell/ProfilePicture.vue
+++ b/components/src/core/components/CardTable/Cell/ProfilePicture.vue
@@ -12,6 +12,8 @@
     :link="profilePicture.link"
     :imageSrc="profilePicture.src"
     :link-mode="profilePicture.target"
+    :header="profilePicture.header"
+    :rowItem="profilePicture.rowItem"
     v-bind="$attrs"
   />
 </template>
@@ -52,6 +54,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    header: {
+      type: Object,
+      default: () => ({}),
+    },
+    rowItem: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   setup(props) {
     const imgSrc = ref(null);
@@ -82,6 +92,8 @@ export default defineComponent({
             ? props.rowItem[props.link]
             : null,
         target: props.target ?? TARGET_SELF,
+        header: props.header,
+        rowItem: props.rowItem,
       };
     });
 
diff --git a/components/src/core/components/CardTable/Cell/__tests__/link-with-pill.spec.ts b/components/src/core/components/CardTable/Cell/__tests__/link-with-pill.spec.ts
index 34e59f7c4..56cc8a049 100644
--- a/components/src/core/components/CardTable/Cell/__tests__/link-with-pill.spec.ts
+++ b/components/src/core/components/CardTable/Cell/__tests__/link-with-pill.spec.ts
@@ -109,4 +109,54 @@ describe('CardTable > Cell > LinkWithPill.vue', () => {
         .trim(),
     ).toEqual('external');
   });
+
+  it('should trigger handleLinkClick on link click', async () => {
+    const mockOnClick = jest.fn();
+    const rowItem = {
+      url1: 'https://orangehrm.com',
+      tag: 'external',
+    };
+
+    const wrapper = mount(LinkWithPill, {
+      global: GLOBAL,
+      props: {
+        item: 'This is a link',
+        target: '_parent',
+        link: 'url1',
+        rowItem: rowItem,
+        header: {
+          cellConfig: {
+            onClick: mockOnClick,
+          },
+        },
+      },
+    });
+
+    const link = wrapper.find('a');
+    await link.trigger('click');
+
+    expect(mockOnClick).toHaveBeenCalledWith(rowItem, expect.any(MouseEvent));
+  });
+
+  it('should not prevent default behavior if no onClick handler is present', async () => {
+    const wrapper = mount(LinkWithPill, {
+      global: GLOBAL,
+      props: {
+        item: 'This is a link',
+        target: '_blank',
+        link: 'url1',
+        rowItem: {
+          url1: 'https://orangehrm.com',
+          tag: 'external',
+        },
+      },
+    });
+
+    const link = wrapper.find('a');
+    const event = { preventDefault: jest.fn() };
+
+    await link.trigger('click', event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
 });
diff --git a/components/src/core/components/ProfilePic/ProfilePic.vue b/components/src/core/components/ProfilePic/ProfilePic.vue
index bfa90154e..9b01aa123 100644
--- a/components/src/core/components/ProfilePic/ProfilePic.vue
+++ b/components/src/core/components/ProfilePic/ProfilePic.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="classes">
     <slot>
-      <a v-if="link" :href="link" :target="linkMode">
+      <a v-if="link" :href="link" :target="linkMode" @click="handleLinkClick($event)">
         <span
           class="img-tag"
           :style="`background-image: url(${profileImage})`"
@@ -55,6 +55,23 @@ export default defineComponent({
         return TARGETS.indexOf(value) !== -1;
       },
     },
+    header: {
+      type: Object,
+      default: () => ({}),
+    },
+    rowItem: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    handleLinkClick(event: MouseEvent | KeyboardEvent) {
+      const cellConfig = this.header?.cellConfig;
+      if (cellConfig && typeof cellConfig?.onClick === 'function') {
+        event.preventDefault();
+        this.header.cellConfig.onClick(this.rowItem, event);
+      }
+    },
   },
   computed: {
     classes(): object {
diff --git a/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts b/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
index cf9abe1e2..668042fe0 100644
--- a/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
+++ b/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
@@ -23,4 +23,45 @@ describe('ProfilePic.vue', () => {
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
+
+  it('should trigger handleLinkClick on link click', async () => {
+    const mockOnClick = jest.fn();
+    const rowItem = {
+      id: 1,
+      name: 'John Doe',
+    };
+
+    const wrapper = mount(ProfilePic, {
+      props: {
+        link: 'https://orangehrm.com',
+        rowItem: rowItem,
+        header: {
+          cellConfig: {
+            onClick: mockOnClick,
+          },
+        },
+      },
+    });
+
+    const link = wrapper.find('a');
+    await link.trigger('click');
+
+    expect(mockOnClick).toHaveBeenCalledWith(rowItem, expect.any(MouseEvent));
+  });
+
+  it('should not prevent default behavior if no onClick handler is present', async () => {
+    const wrapper = mount(ProfilePic, {
+      props: {
+        link: 'https://orangehrm.com',
+      },
+    });
+
+    const link = wrapper.find('a');
+    const event = { preventDefault: jest.fn() };
+
+    await link.trigger('click', event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
+
 });
diff --git a/storybook/stories/core/components/ListTable/ListSkeleton.story.vue b/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
index 64a8e282f..adc46c57c 100644
--- a/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
+++ b/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
@@ -13,6 +13,10 @@
     :skeleton="showSkeleton"
     v-model:selected="checkedItems"
   ></oxd-list-table>
+  <br />
+  <p>{{ LinkPhillResult }}</p>
+  <br/>
+  <p>{{ profilePicResult }}</p>
 </template>
 
 <script>
@@ -30,6 +34,8 @@ export default {
 
   data() {
     return {
+      LinkPhillResult: '',
+      profilePicResult: '',
       selector: {
         style: {flex: 1},
       },
@@ -44,6 +50,23 @@ export default {
           iconStyle: 'color: #929baa; justify-content: center;',
           cellType: 'oxd-table-cell-profile-pic',
         },
+        {
+          name: 'profilePic',
+          style: {
+            width: '55px',
+            'justify-content': 'center',
+          },
+          iconName: 'oxd-profile-pic',
+          iconStyle: 'color: #929baa; justify-content: center;',
+          cellType: 'oxd-table-cell-profile-pic',
+          cellProps: {
+            link: "url1",
+            target: "_blank",
+          },
+          cellConfig: {
+            onClick: this.onClickProfilePic,
+          },
+        },
         {
           name: 'col1',
           sortField: 'col1.name',
@@ -71,6 +94,20 @@ export default {
             pillProperty: ['tag', 'name'],
           },
         },
+        {
+          name: 'col2',
+          title: 'Link with Pill with onClick event',
+          style: {flex: 1},
+          cellType: 'oxd-table-cell-link-with-pill',
+          cellProps: {
+            link: 'url1',
+            target: '_blank',
+            pillProperty: ['tag', 'name'],
+          },
+          cellConfig: {
+            onClick: this.onClickLinkWithPill,
+          },
+        },
         {
           name: 'col4',
           title: 'Date',
@@ -116,6 +153,13 @@ export default {
         },
       };
     },
+    onClickLinkWithPill(row, event) {
+      this.LinkPhillResult = 'Link with Pill with onClick function executed: ' + row.col2;
+    },
+    onClickProfilePic(row, event) {
+      console.log('Profile Pic with onClick function executed: ', row.col2);
+      this.profilePicResult = 'Profile Pic with onClick function executed: ' + row.col2;
+    },
   },
 
   beforeMount() {

From 1f12a2eb4e438f93810f6e18f79afb557f85266e Mon Sep 17 00:00:00 2001
From: dhanu <dhanu@orangehrm.com>
Date: Fri, 1 Nov 2024 15:53:36 +0530
Subject: [PATCH 2/9] ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts-
 add onclick event to prevent default behaviour of link and execute a function

---
 .../CardTable/Cell/ProfilePicture.vue         | 17 +++++++++---
 .../core/components/ProfilePic/ProfilePic.vue | 20 +++++++-------
 .../ProfilePic/__tests__/profile-pic.spec.ts  | 26 +++++--------------
 .../ListTable/ListSkeleton.story.vue          |  1 -
 4 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/components/src/core/components/CardTable/Cell/ProfilePicture.vue b/components/src/core/components/CardTable/Cell/ProfilePicture.vue
index d767c3ee7..4d5daba1c 100644
--- a/components/src/core/components/CardTable/Cell/ProfilePicture.vue
+++ b/components/src/core/components/CardTable/Cell/ProfilePicture.vue
@@ -12,8 +12,8 @@
     :link="profilePicture.link"
     :imageSrc="profilePicture.src"
     :link-mode="profilePicture.target"
-    :header="profilePicture.header"
-    :rowItem="profilePicture.rowItem"
+    :isCustomFunctionExist="isCustomFunctionExist"
+    @linkClick="handleLinkClick"
     v-bind="$attrs"
   />
 </template>
@@ -92,13 +92,20 @@ export default defineComponent({
             ? props.rowItem[props.link]
             : null,
         target: props.target ?? TARGET_SELF,
-        header: props.header,
-        rowItem: props.rowItem,
       };
     });
 
     const isLoading = computed(() => props.loading || imgLoading.value);
 
+    const handleLinkClick = (event: MouseEvent | KeyboardEvent) => {
+      props.header?.cellConfig.onClick(props.rowItem, event);
+    };
+
+    const isCustomFunctionExist = computed(() => {
+      const cellConfig = props.header?.cellConfig;
+      return cellConfig && typeof cellConfig?.onClick === 'function';
+    });
+
     watchEffect(async () => {
       imgSrc.value = await loadImage(props.item as string);
     });
@@ -106,6 +113,8 @@ export default defineComponent({
     return {
       isLoading,
       profilePicture,
+      handleLinkClick,
+      isCustomFunctionExist
     };
   },
 });
diff --git a/components/src/core/components/ProfilePic/ProfilePic.vue b/components/src/core/components/ProfilePic/ProfilePic.vue
index 9b01aa123..f6c972eaa 100644
--- a/components/src/core/components/ProfilePic/ProfilePic.vue
+++ b/components/src/core/components/ProfilePic/ProfilePic.vue
@@ -29,6 +29,11 @@ import {
 import {defaultUser} from './images';
 export default defineComponent({
   name: 'oxd-profile-pic',
+
+  emits: [
+    'linkClick',
+  ],
+
   props: {
     size: {
       type: String,
@@ -55,21 +60,16 @@ export default defineComponent({
         return TARGETS.indexOf(value) !== -1;
       },
     },
-    header: {
-      type: Object,
-      default: () => ({}),
-    },
-    rowItem: {
-      type: Object,
-      default: () => ({}),
+    isCustomFunctionExist: {
+      type: Boolean,
+      default: false,
     },
   },
   methods: {
     handleLinkClick(event: MouseEvent | KeyboardEvent) {
-      const cellConfig = this.header?.cellConfig;
-      if (cellConfig && typeof cellConfig?.onClick === 'function') {
+      if(this.isCustomFunctionExist) {
         event.preventDefault();
-        this.header.cellConfig.onClick(this.rowItem, event);
+        this.$emit('linkClick', event);
       }
     },
   },
diff --git a/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts b/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
index 668042fe0..e6d47f8ec 100644
--- a/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
+++ b/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
@@ -24,44 +24,32 @@ describe('ProfilePic.vue', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('should trigger handleLinkClick on link click', async () => {
-    const mockOnClick = jest.fn();
-    const rowItem = {
-      id: 1,
-      name: 'John Doe',
-    };
-
+  it('should emit linkClick with event payload on link click when isCustomFunctionExist is true', async () => {
     const wrapper = mount(ProfilePic, {
       props: {
         link: 'https://orangehrm.com',
-        rowItem: rowItem,
-        header: {
-          cellConfig: {
-            onClick: mockOnClick,
-          },
-        },
+        isCustomFunctionExist: true,
       },
     });
 
     const link = wrapper.find('a');
     await link.trigger('click');
 
-    expect(mockOnClick).toHaveBeenCalledWith(rowItem, expect.any(MouseEvent));
+    expect(wrapper.emitted('linkClick')).toBeTruthy();
   });
 
-  it('should not prevent default behavior if no onClick handler is present', async () => {
+  it('should not emit linkClick when isCustomFunctionExist is false', async () => {
     const wrapper = mount(ProfilePic, {
       props: {
         link: 'https://orangehrm.com',
+        isCustomFunctionExist: false,
       },
     });
 
     const link = wrapper.find('a');
-    const event = { preventDefault: jest.fn() };
-
-    await link.trigger('click', event);
+    await link.trigger('click');
 
-    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(wrapper.emitted('linkClick')).toBeFalsy();
   });
 
 });
diff --git a/storybook/stories/core/components/ListTable/ListSkeleton.story.vue b/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
index adc46c57c..d15b27d7b 100644
--- a/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
+++ b/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
@@ -157,7 +157,6 @@ export default {
       this.LinkPhillResult = 'Link with Pill with onClick function executed: ' + row.col2;
     },
     onClickProfilePic(row, event) {
-      console.log('Profile Pic with onClick function executed: ', row.col2);
       this.profilePicResult = 'Profile Pic with onClick function executed: ' + row.col2;
     },
   },

From e34266b4d8888f56bc561a1403fee6dc3d474f1a Mon Sep 17 00:00:00 2001
From: dhanu <dhanu@orangehrm.com>
Date: Fri, 1 Nov 2024 16:03:04 +0530
Subject: [PATCH 3/9] indentation correct from lint command

---
 .../core/components/CardTable/Cell/LinkWithPill.vue |  7 ++++++-
 .../components/CardTable/Cell/ProfilePicture.vue    |  2 +-
 .../CardTable/Cell/__tests__/link-with-pill.spec.ts |  2 +-
 .../src/core/components/ProfilePic/ProfilePic.vue   | 13 ++++++++-----
 .../ProfilePic/__tests__/profile-pic.spec.ts        |  1 -
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/src/core/components/CardTable/Cell/LinkWithPill.vue b/components/src/core/components/CardTable/Cell/LinkWithPill.vue
index 2ecc81650..ad68800a5 100644
--- a/components/src/core/components/CardTable/Cell/LinkWithPill.vue
+++ b/components/src/core/components/CardTable/Cell/LinkWithPill.vue
@@ -6,7 +6,12 @@
         <oxd-skeleton width="50%" animate></oxd-skeleton>
       </template>
       <template v-else>
-        <a :href="link ? row[link] : '#'" :target="target" :class="linkClasses" @click="handleLinkClick(row, $event)">
+        <a
+          :href="link ? row[link] : '#'"
+          :target="target"
+          :class="linkClasses"
+          @click="handleLinkClick(row, $event)"
+        >
           {{ cell }}
         </a>
         <div v-if="pillProperty" :class="pillClasses">
diff --git a/components/src/core/components/CardTable/Cell/ProfilePicture.vue b/components/src/core/components/CardTable/Cell/ProfilePicture.vue
index 4d5daba1c..fa79bbd38 100644
--- a/components/src/core/components/CardTable/Cell/ProfilePicture.vue
+++ b/components/src/core/components/CardTable/Cell/ProfilePicture.vue
@@ -114,7 +114,7 @@ export default defineComponent({
       isLoading,
       profilePicture,
       handleLinkClick,
-      isCustomFunctionExist
+      isCustomFunctionExist,
     };
   },
 });
diff --git a/components/src/core/components/CardTable/Cell/__tests__/link-with-pill.spec.ts b/components/src/core/components/CardTable/Cell/__tests__/link-with-pill.spec.ts
index 56cc8a049..10dc30cab 100644
--- a/components/src/core/components/CardTable/Cell/__tests__/link-with-pill.spec.ts
+++ b/components/src/core/components/CardTable/Cell/__tests__/link-with-pill.spec.ts
@@ -153,7 +153,7 @@ describe('CardTable > Cell > LinkWithPill.vue', () => {
     });
 
     const link = wrapper.find('a');
-    const event = { preventDefault: jest.fn() };
+    const event = {preventDefault: jest.fn()};
 
     await link.trigger('click', event);
 
diff --git a/components/src/core/components/ProfilePic/ProfilePic.vue b/components/src/core/components/ProfilePic/ProfilePic.vue
index f6c972eaa..a818e98d1 100644
--- a/components/src/core/components/ProfilePic/ProfilePic.vue
+++ b/components/src/core/components/ProfilePic/ProfilePic.vue
@@ -1,7 +1,12 @@
 <template>
   <div :class="classes">
     <slot>
-      <a v-if="link" :href="link" :target="linkMode" @click="handleLinkClick($event)">
+      <a
+        v-if="link"
+        :href="link"
+        :target="linkMode"
+        @click="handleLinkClick($event)"
+      >
         <span
           class="img-tag"
           :style="`background-image: url(${profileImage})`"
@@ -30,9 +35,7 @@ import {defaultUser} from './images';
 export default defineComponent({
   name: 'oxd-profile-pic',
 
-  emits: [
-    'linkClick',
-  ],
+  emits: ['linkClick'],
 
   props: {
     size: {
@@ -67,7 +70,7 @@ export default defineComponent({
   },
   methods: {
     handleLinkClick(event: MouseEvent | KeyboardEvent) {
-      if(this.isCustomFunctionExist) {
+      if (this.isCustomFunctionExist) {
         event.preventDefault();
         this.$emit('linkClick', event);
       }
diff --git a/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts b/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
index e6d47f8ec..47bb0c234 100644
--- a/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
+++ b/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
@@ -51,5 +51,4 @@ describe('ProfilePic.vue', () => {
 
     expect(wrapper.emitted('linkClick')).toBeFalsy();
   });
-
 });

From e491e39a86177121573b8ff580a87a5bc8421563 Mon Sep 17 00:00:00 2001
From: dhanu <dhanu@orangehrm.com>
Date: Fri, 1 Nov 2024 16:04:31 +0530
Subject: [PATCH 4/9] Icons.ts - add external link icon

---
 components/src/core/components/Icon/icons.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/src/core/components/Icon/icons.ts b/components/src/core/components/Icon/icons.ts
index e63bd9d22..ea9c430ae 100644
--- a/components/src/core/components/Icon/icons.ts
+++ b/components/src/core/components/Icon/icons.ts
@@ -2117,6 +2117,11 @@ export const oxdRequired: icon = {
 </svg>`,
 };
 
+export const oxdExternalLink: icon = {
+  name: 'oxd-external-link',
+  value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><g id="Interface / External_Link"><path id="Vector" style="fill:none" d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>`,
+};
+
 const icons: Icons = {
   'oxd-likes': oxdLikes,
   'oxd-birthday': oxdBirthday,
@@ -2350,6 +2355,7 @@ const icons: Icons = {
   'oxd-employee-autocomplete': oxdEmployeeAutocomplete,
   'oxd-status': oxdStatus,
   'oxd-required': oxdRequired,
+  'oxd-external-link': oxdExternalLink,
 };
 
 export default icons;

From 2f72fbe7c90b02c410b228f754dc353f0b1f7e55 Mon Sep 17 00:00:00 2001
From: dhanu <dhanu@orangehrm.com>
Date: Fri, 1 Nov 2024 16:07:20 +0530
Subject: [PATCH 5/9] add log details

---
 changelog.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/changelog.md b/changelog.md
index b05f1ff39..638a61e1c 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,9 @@
 2024-11-01 - d9cb67f8abf3c1128203f14bce687c8b5b4075a6 - Remove unnecessary separator between consecutive page numbers in OXD pagination
 
+2024-11-01 - b2384fef4dffc9f5ebd4009f24fba38ab1c76e01 - ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts- add onclick event to prevent default behaviour of link and execute a function
+
+2024-11-01 - 891d531ac92cf7e3bcced8c018a7f7fd2efe6bb9 - Icons.ts - add external link icon
+
 2024-10-28 - e5840791366e3abbf3cb6b57f77ede4a8842fb79 - Icon/icons.ts - Add oxd-date-input, oxd-attachment-input,oxd-checkbox-input, oxd-checkbox-group-input, oxd-select-input, oxd-file-input, oxd-radio-input, oxd-radio-group-input, oxd-switch-input, oxd-time-input, oxd-text-input, oxd-password-input, oxd-circle-plus, oxd-textbox, oxd-text, oxd-divider, oxd-grid, oxd-grid-item, oxd-subform, oxd-masterdata, oxd-employee-autocomplete, oxd-status, oxd-required to OXD Icons
 
 2024-10-26 - a7f234223a3a34e55a77e3c216733c9f01e5e3c9 - directives/focus-first-element/index.ts - Update the focus first directive to wait for animations to stop

From b7481d67fff3d377c67cb7ad0449f60dfcd2d221 Mon Sep 17 00:00:00 2001
From: dhanu <dhanu@orangehrm.com>
Date: Fri, 1 Nov 2024 17:16:29 +0530
Subject: [PATCH 6/9] ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts-
 add onclick event to prevent default behaviour of link and execute a function
 fix issue

---
 .../CardTable/Cell/ProfilePicture.vue         | 17 +++++++--------
 .../core/components/ProfilePic/ProfilePic.vue | 13 ++++++------
 .../ProfilePic/__tests__/profile-pic.spec.ts  | 21 ++++---------------
 3 files changed, 17 insertions(+), 34 deletions(-)

diff --git a/components/src/core/components/CardTable/Cell/ProfilePicture.vue b/components/src/core/components/CardTable/Cell/ProfilePicture.vue
index fa79bbd38..3a8435f6f 100644
--- a/components/src/core/components/CardTable/Cell/ProfilePicture.vue
+++ b/components/src/core/components/CardTable/Cell/ProfilePicture.vue
@@ -12,8 +12,7 @@
     :link="profilePicture.link"
     :imageSrc="profilePicture.src"
     :link-mode="profilePicture.target"
-    :isCustomFunctionExist="isCustomFunctionExist"
-    @linkClick="handleLinkClick"
+    :link-handler="handleLinkClick"
     v-bind="$attrs"
   />
 </template>
@@ -97,14 +96,13 @@ export default defineComponent({
 
     const isLoading = computed(() => props.loading || imgLoading.value);
 
-    const handleLinkClick = (event: MouseEvent | KeyboardEvent) => {
-      props.header?.cellConfig.onClick(props.rowItem, event);
-    };
-
-    const isCustomFunctionExist = computed(() => {
+    const handleLinkClick = (event: MouseEvent) => {
       const cellConfig = props.header?.cellConfig;
-      return cellConfig && typeof cellConfig?.onClick === 'function';
-    });
+      if (cellConfig && typeof cellConfig?.onClick === 'function') {
+        event.preventDefault();
+        props.header?.cellConfig.onClick(props.rowItem, event);
+      }
+    };
 
     watchEffect(async () => {
       imgSrc.value = await loadImage(props.item as string);
@@ -114,7 +112,6 @@ export default defineComponent({
       isLoading,
       profilePicture,
       handleLinkClick,
-      isCustomFunctionExist,
     };
   },
 });
diff --git a/components/src/core/components/ProfilePic/ProfilePic.vue b/components/src/core/components/ProfilePic/ProfilePic.vue
index a818e98d1..2e473aec7 100644
--- a/components/src/core/components/ProfilePic/ProfilePic.vue
+++ b/components/src/core/components/ProfilePic/ProfilePic.vue
@@ -63,16 +63,15 @@ export default defineComponent({
         return TARGETS.indexOf(value) !== -1;
       },
     },
-    isCustomFunctionExist: {
-      type: Boolean,
-      default: false,
+    linkHandler: {
+      type: Function,
+      required: false,
     },
   },
   methods: {
-    handleLinkClick(event: MouseEvent | KeyboardEvent) {
-      if (this.isCustomFunctionExist) {
-        event.preventDefault();
-        this.$emit('linkClick', event);
+    handleLinkClick(event: MouseEvent) {
+      if (this.linkHandler && typeof this.linkHandler === 'function') {
+        this.linkHandler(event);
       }
     },
   },
diff --git a/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts b/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
index 47bb0c234..297949d0e 100644
--- a/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
+++ b/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
@@ -24,31 +24,18 @@ describe('ProfilePic.vue', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('should emit linkClick with event payload on link click when isCustomFunctionExist is true', async () => {
+  it('should call linkHandler with event payload on link click when linkHandler is provided', async () => {
+    const mockLinkHandler = jest.fn();
     const wrapper = mount(ProfilePic, {
       props: {
         link: 'https://orangehrm.com',
-        isCustomFunctionExist: true,
+        linkHandler: mockLinkHandler,
       },
     });
 
     const link = wrapper.find('a');
     await link.trigger('click');
 
-    expect(wrapper.emitted('linkClick')).toBeTruthy();
-  });
-
-  it('should not emit linkClick when isCustomFunctionExist is false', async () => {
-    const wrapper = mount(ProfilePic, {
-      props: {
-        link: 'https://orangehrm.com',
-        isCustomFunctionExist: false,
-      },
-    });
-
-    const link = wrapper.find('a');
-    await link.trigger('click');
-
-    expect(wrapper.emitted('linkClick')).toBeFalsy();
+    expect(mockLinkHandler).toHaveBeenCalledWith(expect.any(MouseEvent));
   });
 });

From b486c32ce63616ef3a5a58da8f7c34c7b8644edd Mon Sep 17 00:00:00 2001
From: dhanu <dhanu@orangehrm.com>
Date: Fri, 1 Nov 2024 17:18:11 +0530
Subject: [PATCH 7/9] add log details

---
 changelog.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/changelog.md b/changelog.md
index 638a61e1c..444b34677 100644
--- a/changelog.md
+++ b/changelog.md
@@ -2,6 +2,8 @@
 
 2024-11-01 - b2384fef4dffc9f5ebd4009f24fba38ab1c76e01 - ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts- add onclick event to prevent default behaviour of link and execute a function
 
+2024-11-01 - 5f4c5306a8ec4b497cb824fa673e50ac0162af4b - ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts- add onclick event to prevent default behaviour of link and execute a function fix issue
+
 2024-11-01 - 891d531ac92cf7e3bcced8c018a7f7fd2efe6bb9 - Icons.ts - add external link icon
 
 2024-10-28 - e5840791366e3abbf3cb6b57f77ede4a8842fb79 - Icon/icons.ts - Add oxd-date-input, oxd-attachment-input,oxd-checkbox-input, oxd-checkbox-group-input, oxd-select-input, oxd-file-input, oxd-radio-input, oxd-radio-group-input, oxd-switch-input, oxd-time-input, oxd-text-input, oxd-password-input, oxd-circle-plus, oxd-textbox, oxd-text, oxd-divider, oxd-grid, oxd-grid-item, oxd-subform, oxd-masterdata, oxd-employee-autocomplete, oxd-status, oxd-required to OXD Icons

From cd0abf9f28ab16766fb7b454fda8e1a1c6d6d250 Mon Sep 17 00:00:00 2001
From: dhanu <dhanu@orangehrm.com>
Date: Mon, 4 Nov 2024 11:25:27 +0530
Subject: [PATCH 8/9] remove unused code

---
 components/src/core/components/ProfilePic/ProfilePic.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/src/core/components/ProfilePic/ProfilePic.vue b/components/src/core/components/ProfilePic/ProfilePic.vue
index 2e473aec7..948c52c26 100644
--- a/components/src/core/components/ProfilePic/ProfilePic.vue
+++ b/components/src/core/components/ProfilePic/ProfilePic.vue
@@ -35,8 +35,6 @@ import {defaultUser} from './images';
 export default defineComponent({
   name: 'oxd-profile-pic',
 
-  emits: ['linkClick'],
-
   props: {
     size: {
       type: String,

From 5738c84fe9272420ae85efcbaf8047824840c87d Mon Sep 17 00:00:00 2001
From: dhanu <dhanu@orangehrm.com>
Date: Mon, 4 Nov 2024 11:59:49 +0530
Subject: [PATCH 9/9] add log details

---
 changelog.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/changelog.md b/changelog.md
index 444b34677..8cd22c371 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,7 +1,5 @@
 2024-11-01 - d9cb67f8abf3c1128203f14bce687c8b5b4075a6 - Remove unnecessary separator between consecutive page numbers in OXD pagination
 
-2024-11-01 - b2384fef4dffc9f5ebd4009f24fba38ab1c76e01 - ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts- add onclick event to prevent default behaviour of link and execute a function
-
 2024-11-01 - 5f4c5306a8ec4b497cb824fa673e50ac0162af4b - ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts- add onclick event to prevent default behaviour of link and execute a function fix issue
 
 2024-11-01 - 891d531ac92cf7e3bcced8c018a7f7fd2efe6bb9 - Icons.ts - add external link icon