Merge pull request #7623 from ProcessMaker/bugfix/FOUR-19800

FOUR-19800:UI: Remove the link in the process column in the cases list

Author: ryancooley

resources/jscomposition/cases/casesMain/config/columns.js

@@ -4,6 +4,7 @@ import {
   ParticipantsCell,
   StatusCell,
   LinkCell,
+  TruncatedColumn,
 } from "../../../system/index";
 import { formatDate } from "../../../utils";
 
@@ -67,11 +68,8 @@ export const processColumn = () => ({
   resizable: true,
   width: 200,
   cellRenderer: () => ({
-    component: TruncatedOptionsCell,
+    component: TruncatedColumn,
     params: {
-      click: (option, row, column, columns) => {
-        window.document.location = `/tasks/${option.id}/edit`;
-      },
       formatterOptions: (option, row, column, columns) => option.name,
     },
   }),

resources/jscomposition/system/table/cell/TruncatedColumn.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-p-3">
+    <div class="tw-overflow-hidden tw-text-ellipsis ">
+      <span class="tw-text-gray-500">
+        {{ 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"
+    >
+      <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"
+      >
+        <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"
+        >
+          <template v-for="(option, index) in optionsModel">
+            <li
+              v-if="index > 0"
+              :key="index"
+              class="hover:tw-bg-gray-100"
+            >
+              <span class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+                {{ getValueOption(option, index) }}
+              </span>
+            </li>
+          </template>
+        </ul>
+      </template>
+    </AppPopover>
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+import { isFunction } from "lodash";
+import { AppPopover } from "../../../base/index";
+
+export default defineComponent({
+  components: {
+    AppPopover,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+    formatterOptions: {
+      type: Function,
+      default: new Function(),
+    },
+  },
+  setup(props) {
+    const show = ref(false);
+    const optionsModel = ref(props.row[props.column.field]);
+
+    const getValue = () => {
+      if (isFunction(props.column?.formatter)) {
+        return props.column?.formatter(props.row, props.column, props.columns);
+      }
+      return props.row[props.column.field].length ? props.row[props.column.field][0].name : "";
+    };
+
+    const getValueOption = (option) => {
+      if (isFunction(props.formatterOptions)) {
+        return props.formatterOptions(option, props.row, props.column, props.columns);
+      }
+      return "";
+    };
+
+    const onClick = () => {
+      show.value = !show.value;
+    };
+
+    const onClose = () => {
+      show.value = false;
+    };
+
+    return {
+      show,
+      optionsModel,
+      onClose,
+      onClick,
+      getValue,
+      getValueOption,
+    };
+  },
+});
+</script>

resources/jscomposition/system/table/cell/index.js

@@ -5,6 +5,7 @@ import StatusCell from "./StatusCell.vue";
 import CaseTitleCell from "./CaseTitleCell.vue";
 import LinkCell from "./LinkCell.vue";
 import CollapseFormCell from "./CollapseFormCell.vue";
+import TruncatedColumn from "./TruncatedColumn.vue";
 
 export {
   ParticipantsCell,
@@ -14,4 +15,5 @@ export {
   LinkCell,
   CollapseFormCell,
   ParticipantCell,
+  TruncatedColumn,
 };