FOUR-20265: UI Update in the modal to show the process name and task related

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

@@ -1,7 +1,7 @@
 import { t } from "i18next";
 import {
   CaseTitleCell,
-  TruncatedOptionsCell,
+  TruncatedGroupOptionsCell,
   ParticipantsCell,
   StatusCell,
   LinkCell,
@@ -82,15 +82,37 @@ export const taskColumn = () => ({
   resizable: true,
   width: 200,
   cellRenderer: () => ({
-    component: TruncatedOptionsCell,
+    component: TruncatedGroupOptionsCell,
     params: {
       href: (option) => `/tasks/${option.id}/edit`,
       formatterOptions: (option, row, column, columns) => option.name,
-      filterData: (row, column, columns) => {
+      formatData: (row, column, columns) => {
         if (row.case_status === "COMPLETED") {
           return [];
         }
-        return row.tasks.filter((el) => el.status === "ACTIVE");
+
+        const groupedTasks = row.tasks.reduce((acc, task) => {
+          if (task.status !== "ACTIVE") {
+            return acc;
+          }
+
+          const processId = task.process_id;
+          const existGroup = acc.find((group) => group.process_id === processId);
+
+          if (existGroup) {
+            existGroup.options.push(task);
+          } else {
+            acc.push({
+              process_id: processId,
+              options: [task],
+              ...row.processes.find((process) => process.id === processId),
+            });
+          }
+
+          return acc;
+        }, []);
+
+        return groupedTasks;
       },
     },
   }),

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

@@ -1,5 +1,6 @@
 import ParticipantsCell from "./ParticipantsCell.vue";
 import ParticipantCell from "./ParticipantCell.vue";
+import TruncatedGroupOptionsCell from "./truncatedGroupOptionsCell/TruncatedGroupOptionsCell.vue";
 import TruncatedOptionsCell from "./TruncatedOptionsCell.vue";
 import StatusCell from "./StatusCell.vue";
 import CaseTitleCell from "./CaseTitleCell.vue";
@@ -9,6 +10,7 @@ import TruncatedColumn from "./TruncatedColumn.vue";
 
 export {
   ParticipantsCell,
+  TruncatedGroupOptionsCell,
   TruncatedOptionsCell,
   StatusCell,
   CaseTitleCell,

resources/jscomposition/system/table/cell/truncatedGroupOptionsCell/BaseOption.vue

@@ -0,0 +1,61 @@
+<template>
+  <li class="tw-py-0 tw-px-5 tw-text-sm">
+    <a
+      v-if="href !== null"
+      class="hover:tw-text-blue-400 tw-text-gray-500 tw-text-ellipsis tw-text-nowrap tw-overflow-hidden"
+      :href="href(option)">
+      {{ getValueOption(option) }}
+    </a>
+    <span
+      v-else
+      class="hover:tw-text-blue-400 tw-text-gray-500 hover:tw-cursor-pointer
+        tw-text-ellipsis tw-text-nowrap tw-overflow-hidden"
+      @click.prevent.stop="onClickOption(option)">
+      {{ getValueOption(option) }}
+    </span>
+  </li>
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    formatterOptions: {
+      type: Function,
+      default: new Function(),
+    },
+    href: {
+      type: Function,
+      default: null,
+    },
+  },
+  setup(props) {
+    const getValueOption = (option) => {
+      if (typeof props.formatterOptions === "function") {
+        return props.formatterOptions(option, props.row, props.column, props.columns);
+      }
+      return "";
+    };
+
+    return {
+      getValueOption,
+    };
+  },
+});
+</script>

resources/jscomposition/system/table/cell/truncatedGroupOptionsCell/TitleOption.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="tw-flex tw-px-4 tw-text-gray-400
+      tw-text-xs tw-italic tw-space-x-2 tw-items-center">
+    <i class="fp-play-outline tw-text-base" />
+    <span class="tw-text-ellipsis tw-text-nowrap tw-overflow-hidden">{{ getValueOption(option) }}</span>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    formatterOptions: {
+      type: Function,
+      default: new Function(),
+    },
+  },
+  setup(props) {
+    const getValueOption = (option) => {
+      if (typeof props.formatterOptions === "function") {
+        return props.formatterOptions(option, props.row, props.column, props.columns);
+      }
+      return "";
+    };
+
+    return {
+      getValueOption,
+    };
+  },
+});
+</script>

resources/jscomposition/system/table/cell/truncatedGroupOptionsCell/TruncatedGroupOptionsCell.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-p-3">
+    <div
+      v-if="optionsModel.length && optionsModel[0]?.options"
+      class="tw-overflow-hidden tw-text-ellipsis">
+      <a
+        v-if="href !== null"
+        class="hover:tw-text-blue-400 tw-text-gray-500"
+        :href="href(optionsModel[0].options[0])">
+        {{ getValueOption(optionsModel[0].options[0]) }}
+      </a>
+      <span
+        v-else
+        class="hover:tw-text-blue-400 tw-text-gray-500 hover:tw-cursor-pointer"
+        href="#"
+        @click.prevent.stop="onClickOption(optionsModel[0].options[0])">
+        {{ getValueOption(optionsModel[0].options[0]) }}
+      </span>
+    </div>
+    <AppPopover
+      v-if="optionsModel.length"
+      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-flex tw-justify-center tw-items-center tw-rounded-full tw-h-4 tw-w-4 tw-border
+          hover:tw-cursor-pointer hover:tw-bg-gray-100 hover:tw-border-gray-300 tw-bg-white tw-text-gray-400"
+        @click.prevent="onClick">
+        <i class="fas fa-ellipsis-h tw-text-[0.5rem]" />
+      </div>
+      <template #content>
+        <ul
+          class="tw-bg-white tw-list-none tw-text-gray-600 tw-py-2 tw-space-y-2 tw-flex tw-flex-col
+            tw-max-w-80 tw-min-w-50
+            tw-overflow-hidden tw-rounded-lg tw-text-sm tw-border tw-border-gray-300">
+          <li
+            v-for="(optionTitle, indexTitle) in optionsModel"
+            :key="indexTitle">
+            <TitleOption
+              :formatter-options="formatterOptions"
+              :option="optionTitle"
+              :columns="columns"
+              :row="row"
+              :column="column" />
+
+            <ul
+              class="tw-list-disc tw-list-inside">
+              <BaseOption
+                v-for="(option, index) in optionTitle.options"
+                :key="index"
+                :formatter-options="formatterOptions"
+                :option="option"
+                :columns="columns"
+                :row="row"
+                :href="href"
+                :column="column" />
+            </ul>
+          </li>
+        </ul>
+      </template>
+    </AppPopover>
+  </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { isFunction } from "lodash";
+import { AppPopover } from "../../../../base/index";
+import TitleOption from "./TitleOption.vue";
+import BaseOption from "./BaseOption.vue";
+
+export default defineComponent({
+  components: {
+    AppPopover,
+    TitleOption,
+    BaseOption,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+    click: {
+      type: Function,
+      default: new Function(),
+    },
+    formatterOptions: {
+      type: Function,
+      default: new Function(),
+    },
+    href: {
+      type: Function,
+      default: null,
+    },
+    // Filter Data, method to filter the input data
+    formatData: {
+      type: Function,
+      default: null,
+    },
+  },
+  setup(props) {
+    const show = ref(false);
+    const optionsModel = ref(props.row[props.column.field]);
+
+    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 onClickOption = (option, index) => {
+      props.click && props.click(option, props.row, props.column, props.columns);
+    };
+
+    const onClose = () => {
+      show.value = false;
+    };
+
+    onMounted(() => {
+      // Filter the data before render
+      if (props.formatData) {
+        optionsModel.value = props.formatData(props.row, props.column, props.columns);
+      }
+    });
+
+    return {
+      show,
+      optionsModel,
+      onClose,
+      onClickOption,
+      onClick,
+      getValueOption,
+    };
+  },
+});
+</script>