Merge pull request #7638 from ProcessMaker/bugfix/FOUR-19815

UI: The mouse over the links does not show the link
ProcessMaker · Oct 29, 2024 · 1b6761d · 1b6761d
2 parents bf573ac + 98d7060
commit 1b6761d
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 43 deletions.
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -20,9 +20,7 @@ const taskNumberColumn = () => ({
   cellRenderer: () => ({
     component: LinkCell,
     params: {
-      click: (row, column, columns) => {
-        window.document.location = `/tasks/${row.id}/edit`;
-      },
+      href: (row) => `/tasks/${row.id}/edit`,
     },
   }),
 });
@@ -36,9 +34,7 @@ const taskNameColumn = () => ({
   cellRenderer: () => ({
     component: LinkCell,
     params: {
-      click: (row, column, columns) => {
-        window.document.location = `/tasks/${row.id}/edit`;
-      },
+      href: (row) => `/tasks/${row.id}/edit`,
     },
   }),
 });
@@ -87,9 +83,7 @@ const requestIdColumn = () => ({
   cellRenderer: () => ({
     component: LinkCell,
     params: {
-      click: (row, column, columns) => {
-        window.document.location = `/requests/${row.id}`;
-      },
+      href: (row) => `/requests/${row.id}`,
     },
   }),
 });
@@ -111,9 +105,7 @@ const taskColumn = () => ({
   cellRenderer: () => ({
     component: TruncatedOptionsCell,
     params: {
-      click: (option, row, column, columns) => {
-        window.document.location = `/tasks/${option.id}/edit`;
-      },
+      href: (row) => `/tasks/${row.id}/edit`,
       formatterOptions: (option, row, column, columns) => option.element_name,
     },
   }),

diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -39,9 +39,7 @@ export const caseNumberColumn = () => ({
   cellRenderer: () => ({
     component: LinkCell,
     params: {
-      click: (row, column, columns) => {
-        window.document.location = `/cases/${row.case_number}`;
-      },
+      href: (row) => `/cases/${row.case_number}`,
     },
   }),
 });
@@ -54,9 +52,7 @@ export const caseTitleColumn = () => ({
   cellRenderer: () => ({
     component: CaseTitleCell,
     params: {
-      click: (row, column, columns) => {
-        window.document.location = `/cases/${row.case_number}`;
-      },
+      href: (row) => `/cases/${row.case_number}`,
     },
   }),
   filter: {
@@ -89,9 +85,7 @@ export const taskColumn = () => ({
   cellRenderer: () => ({
     component: TruncatedOptionsCell,
     params: {
-      click: (option, row, column, columns) => {
-        window.document.location = `/tasks/${option.id}/edit`;
-      },
+      href: (option) => `/tasks/${option.id}/edit`,
       formatterOptions: (option, row, column, columns) => option.name,
     },
   }),

diff --git a/resources/jscomposition/system/table/cell/CaseTitle.vue b/resources/jscomposition/system/table/cell/CaseTitle.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="tw-overflow-hidden tw-text-ellipsis">
+    <span
+      v-if="title"
+      v-html="title"
+    />
+    <span v-else>{{ defaultValue }}</span>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    defaultValue: {
+      type: String,
+      default: "",
+    },
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
@@ -1,25 +1,34 @@
 <template>
-  <div
-    class="tw-text-nowrap tw-whitespace-nowrap tw-p-3">
+  <div class="tw-text-nowrap tw-whitespace-nowrap tw-p-3">
+    <a
+      v-if="href !== null"
+      class="hover:tw-text-blue-400 tw-text-gray-500"
+      :href="href(row)"
+    >
+      <case-title
+        :title="row.case_title_formatted"
+        :default-value="getValue()"
+      />
+    </a>
     <span
-      href="#"
+      v-else
       class="hover:tw-text-blue-400 tw-text-gray-500 hover:tw-cursor-pointer"
-      @click.prevent="onClick">
-      <div
-        v-if="row.case_title_formatted"
-        class="tw-overflow-hidden tw-text-ellipsis"
-        v-html="row.case_title_formatted" />
-      <span
-        v-else
-        class="tw-overflow-hidden tw-text-ellipsis">{{ getValue() }}</span>
+      @click.prevent="onClick"
+    >
+      <case-title
+        :title="row.case_title_formatted"
+        :default-value="getValue()"
+      />
     </span>
   </div>
 </template>
 <script>
 import { defineComponent } from "vue";
 import { isFunction, get } from "lodash";
+import CaseTitle from "./CaseTitle.vue";
 
 export default defineComponent({
+  components: { CaseTitle },
   props: {
     columns: {
       type: Array,
@@ -37,6 +46,10 @@ export default defineComponent({
       type: Function,
       default: new Function(),
     },
+    href: {
+      type: Function,
+      default: null,
+    },
   },
   setup(props) {
     const getValue = () => {

diff --git a/resources/jscomposition/system/table/cell/LinkCell.vue b/resources/jscomposition/system/table/cell/LinkCell.vue
@@ -1,10 +1,19 @@
 <template>
   <div
-    class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-p-3">
+    class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-p-3"
+  >
+    <a
+      v-if="href !== null"
+      class="hover:tw-text-blue-400 tw-text-gray-500"
+      :href="href(row)"
+    >
+      {{ getValue() }}
+    </a>
     <span
+      v-else
       class="hover:tw-text-blue-400 tw-text-gray-500 hover:tw-cursor-pointer"
-      href="#"
-      @click.prevent="onClick">
+      @click.prevent="onClick"
+    >
       {{ getValue() }}
     </span>
   </div>
@@ -30,6 +39,10 @@ const props = defineProps({
     type: Function,
     default: new Function(),
   },
+  href: {
+    type: Function,
+    default: null,
+  },
 });
 
 const getValue = () => {

diff --git a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
@@ -1,37 +1,58 @@
 <template>
   <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-p-3">
     <div class="tw-overflow-hidden tw-text-ellipsis ">
+      <a
+        v-if="href !== null"
+        class="hover:tw-text-blue-400 tw-text-gray-500"
+        :href="href(row[column.field][0])"
+      >
+        {{ getValue() }}
+      </a>
       <span
+        v-else
         class="hover:tw-text-blue-400 tw-text-gray-500 hover:tw-cursor-pointer"
         href="#"
-        @click.prevent.stop="onClickOption(row[column.field][0], 0)">
+        @click.prevent.stop="onClickOption(row[column.field][0], 0)"
+      >
         {{ getValue() }}
       </span>
     </div>
-
     <AppPopover
       v-if="optionsModel.length > 1"
       v-model="show"
       :hover="false"
       position="bottom"
-      class="!tw-absolute tw-right-0 tw-top-0  tw-h-full tw-flex tw-items-center">
+      class="!tw-absolute tw-right-0 tw-top-0  tw-h-full tw-flex tw-items-center"
+    >
       <div
         class="tw-self-center tw-px-2 tw-rounded-md hover:tw-cursor-pointer hover:tw-bg-gray-200 tw-bg-white "
-        @click.prevent="onClick">
+        @click.prevent="onClick"
+      >
         <i class="fas fa-ellipsis-v" />
       </div>
-
       <template #content>
         <ul
           class="tw-bg-white tw-list-none tw-text-gray-600
-            tw-overflow-hidden tw-rounded-lg tw-w-50 tw-text-sm tw-border tw-border-gray-300">
+            tw-overflow-hidden tw-rounded-lg tw-w-50 tw-text-sm tw-border tw-border-gray-300"
+        >
           <template v-for="(option, index) in optionsModel">
             <li
               v-if="index > 0"
               :key="index"
               class="hover:tw-bg-gray-100"
-              @click.prevent.stop="onClickOption(option, index)">
-              <span class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer">
+            >
+              <a
+                v-if="href !== null"
+                class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200"
+                :href="getLink(option)"
+              >
+                {{ getValueOption(option, index) }}
+              </a>
+              <span
+                v-else
+                class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer"
+                @click.prevent.stop="onClickOption(option, index)"
+              >
                 {{ getValueOption(option, index) }}
               </span>
             </li>
@@ -71,6 +92,10 @@ export default defineComponent({
       type: Function,
       default: new Function(),
     },
+    href: {
+      type: Function,
+      default: null,
+    },
   },
   setup(props) {
     const show = ref(false);