LinkWithPill.vue, link-with-pill.spec.ts, ProfilePicture.vue, Profile…

…Pic.vue, profile-pic.spec.ts, ListSkeleton.story.vue - add onclick event to prevent default behaviour of link and execute a function
orangehrm · Nov 1, 2024 · 232237b · 232237b
1 parent 15975c3
commit 232237b
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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() {