From c56e67188cec1ee150dc5e988ae1476ed96e7998 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Tue, 1 Oct 2024 15:01:03 -0400
Subject: [PATCH 1/2] FOUR-18638:Create a component with collpase the row and
 show some content

---
 .../jscomposition/base/table/BaseTable.vue    | 84 +++++++++++++++----
 .../jscomposition/base/table/ContainerRow.vue | 23 +++++
 resources/jscomposition/base/table/TCell.vue  | 18 ++--
 resources/jscomposition/base/table/TRow.vue   | 18 +++-
 .../cases/casesDetail/api/index.js            | 27 ++++--
 .../casesDetail/components/CaseDetail.vue     |  6 +-
 .../casesDetail/components/CompletedForms.vue | 58 +++++++++++++
 .../casesDetail/components/DisplayForm.vue    | 44 ++++++++++
 .../casesDetail/components/EllipsisMenu.vue   | 54 ++++++++++++
 .../casesDetail/components/TaskTable.vue      |  8 +-
 .../cases/casesDetail/config/columns.js       | 28 ++++++-
 .../system/table/cell/CollapseFormCell.vue    | 51 +++++++++++
 .../jscomposition/system/table/cell/index.js  |  2 +
 13 files changed, 382 insertions(+), 39 deletions(-)
 create mode 100644 resources/jscomposition/base/table/ContainerRow.vue
 create mode 100644 resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
 create mode 100644 resources/jscomposition/cases/casesDetail/components/DisplayForm.vue
 create mode 100644 resources/jscomposition/cases/casesDetail/components/EllipsisMenu.vue
 create mode 100644 resources/jscomposition/system/table/cell/CollapseFormCell.vue

diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index 5c757cd94e..6e0b02a8a4 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
-      tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
+      tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto"
+  >
     <table class="tw-w-full tw-border-collapse tw-table-fixed">
       <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
         <tr>
@@ -9,43 +10,67 @@
             v-for="(column, index) in columns"
             :key="index"
             :columns="columns"
-            :column="column">
+            :column="column"
+          >
             <slot :name="`theader-${column.field}`" />
             <template #filter>
               <slot :name="`theader-filter-${column.field}`" />
             </template>
           </THeader>
+          <th class="tw-sticky tw-w-0" />
         </tr>
       </thead>
       <tbody>
-        <TRow
-          v-for="(row, indexRow) in data"
-          :key="indexRow">
-          <TCell
-            v-for="(column, indexColumn) in columns"
-            :key="indexColumn"
+        <template v-for="(row, indexRow) in data">
+          <TRow :key="`row-${indexRow}`">
+            <template #[`cell`]>
+              <TCell
+                v-for="(column, indexColumn) in columns"
+                :key="indexColumn"
+                :columns="columns"
+                :column="column"
+                :row="row"
+                @toogleContainer="(e)=>toogleContainer(e, indexRow)"
+              >
+                <slot :name="`tcell-${indexRow}-${column.field}`" />
+              </TCell>
+            </template>
+            <template
+              v-if="`checkEllpisisMenu(${indexRow})`"
+              #[`menu`]
+            >
+              <slot :name="`ellipsis-menu-${indexRow}`" />
+            </template>
+          </TRow>
+          <ContainerRow
+            v-if="`checkContainerRow(${indexRow})`"
+            :key="`container-${indexRow}`"
+            :show-row="getShowContainer(indexRow)"
             :columns="columns"
-            :column="column"
-            :row="row">
-            <slot :name="`tcell-${indexRow}-${column.field}`" />
-          </TCell>
-        </TRow>
+          >
+            <slot :name="`container-row-${indexRow}`" />
+          </ContainerRow>
+        </template>
       </tbody>
     </table>
   </div>
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import {
+  defineComponent, ref, onUpdated, useSlots, computed,
+} from "vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
+import ContainerRow from "./ContainerRow.vue";
 
 export default defineComponent({
   components: {
     THeader,
     TRow,
     TCell,
+    ContainerRow,
   },
   props: {
     columns: {
@@ -61,8 +86,35 @@ export default defineComponent({
       default: () => ({}),
     },
   },
-  setup() {
-    return {};
+  setup(props) {
+    const slots = useSlots();
+    const configRow = ref([]);
+    const showContainer = ref(false);
+
+    const toogleContainer = (toogle, index) => {
+      configRow.value.splice(index, 1, { showContainer: toogle });
+    };
+
+    const checkContainerRow = computed((index) => Object.hasOwn(slots, `container-row-${index}`));
+    const checkEllpisisMenu = computed((index) => Object.hasOwn(slots, `ellipsis-menu-${index}`));
+
+    onUpdated(async () => {
+      if (configRow.value.length === 0) {
+        configRow.value = props.data ? structuredClone(props.data).fill({ showContainer: false }) : [];
+      }
+    });
+
+    const getShowContainer = (index) => configRow.value[index]?.showContainer;
+
+    return {
+      configRow,
+      showContainer,
+      toogleContainer,
+      getShowContainer,
+      slots,
+      checkContainerRow,
+      checkEllpisisMenu,
+    };
   },
 });
 </script>
diff --git a/resources/jscomposition/base/table/ContainerRow.vue b/resources/jscomposition/base/table/ContainerRow.vue
new file mode 100644
index 0000000000..0e960b83b0
--- /dev/null
+++ b/resources/jscomposition/base/table/ContainerRow.vue
@@ -0,0 +1,23 @@
+<template>
+  <tr
+    v-if="showRow"
+    class="tw-border-b"
+  >
+    <td :colspan="columns.length">
+      <slot />
+    </td>
+  </tr>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: ["showRow", "columns"],
+  setup(props) {
+    return {
+      view: props.showRow,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
index c9e267a9b7..81aba43a3c 100644
--- a/resources/jscomposition/base/table/TCell.vue
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -1,13 +1,14 @@
 <template>
   <td
     class="tw-relative"
-    :style="{ width: `${column.width}px` }">
-    <div
-      v-if="!column.cellRenderer">
+    :style="{ width: `${column.width}px` }"
+  >
+    <div v-if="!column.cellRenderer">
       <slot
         :columns="columns"
         :column="column"
-        :row="row">
+        :row="row"
+      >
         <div class="tw-p-3">
           {{ getValue() }}
         </div>
@@ -19,7 +20,9 @@
       v-bind="getParams()"
       :columns="columns"
       :column="column"
-      :row="row" />
+      :row="row"
+      @collapseContainer="collapseContainer"
+    />
   </td>
 </template>
 
@@ -50,14 +53,17 @@ export default defineComponent({
       return get(props.row, props.column?.field) || "";
     };
 
-    const getComponent = () => props.column.cellRenderer().component;
+    const getComponent = () => props.column.cellRenderer().component || props.column.cellRenderer();
 
     const getParams = () => props.column.cellRenderer().params || {};
 
+    const collapseContainer = (value) => emit("toogleContainer", value);
+
     return {
       getComponent,
       getParams,
       getValue,
+      collapseContainer,
     };
   },
 });
diff --git a/resources/jscomposition/base/table/TRow.vue b/resources/jscomposition/base/table/TRow.vue
index ad929a275a..7506895657 100644
--- a/resources/jscomposition/base/table/TRow.vue
+++ b/resources/jscomposition/base/table/TRow.vue
@@ -1,15 +1,25 @@
 <template>
-  <tr class="tw-border-b">
-    <slot></slot>
+  <tr
+    class="tw-border-b tw-relative"
+    @mouseover="menu = true"
+    @mouseleave="menu = false"
+  >
+    <slot :name="`cell`" />
+    <template v-if="menu">
+      <slot :name="`menu`" />
+    </template>
   </tr>
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 
 export default defineComponent({
   setup() {
-    return {};
+    const menu = ref(false);
+    return {
+      menu,
+    };
   },
 });
 </script>
diff --git a/resources/jscomposition/cases/casesDetail/api/index.js b/resources/jscomposition/cases/casesDetail/api/index.js
index f1d3f30f26..2ceea6cd63 100644
--- a/resources/jscomposition/cases/casesDetail/api/index.js
+++ b/resources/jscomposition/cases/casesDetail/api/index.js
@@ -1,19 +1,25 @@
 import { api } from "../variables";
 
-export const getData = async () => {
+const getData = async () => {
   const objectsList = [];
 
   for (let i = 0; i <= 31; i += 1) {
     const obj = {
       id: `${i}`,
       case_number: 100,
-      case_title: `Case Title ${i}`,
-      process_name: `Process ${i}`,
-      assigned: `Avatar ${i}`,
+      element_name: `Case Title ${i}`,
+      process: {
+        name: `Process ${i}`,
+      },
+      user: {
+        fullname: `Avatar ${i}`,
+      },
       current_task: `Task ${i}`,
-      status: `badge ${i}`,
+      status: "IN_PROGRESS",
       started: `21/21/${i}`,
-      due_date: `21/21/${i}`,
+      due_at: `21/21/${i}`,
+      completed_date: `21/21/${i}`,
+      screen_id: 4,
     };
 
     objectsList.push(obj);
@@ -22,7 +28,7 @@ export const getData = async () => {
   return objectsList;
 };
 
-export const getDataTask = async ({ params, pagination }) => {
+const getDataTask = async ({ params, pagination }) => {
   const response = await api.get("tasks-by-case/", {
     params: {
       ...params,
@@ -32,3 +38,10 @@ export const getDataTask = async ({ params, pagination }) => {
 
   return response.data.data;
 };
+const getScreenData = (id) => {
+  const response = ProcessMaker.apiClient.get(`screens/${id}`);
+
+  return response;
+};
+
+export { getData, getDataTask, getScreenData };
diff --git a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
index b568e843a3..d244d7550e 100644
--- a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
+++ b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
@@ -1,7 +1,8 @@
 <template>
   <Tabs
     :tab-default="tabDefault"
-    :tabs="tabs" />
+    :tabs="tabs"
+  />
 </template>
 
 <script>
@@ -10,6 +11,7 @@ import Tabs from "./Tabs.vue";
 import TaskTable from "./TaskTable.vue";
 import RequestTable from "./RequestTable.vue";
 import TabHistory from "./TabHistory.vue";
+import CompletedForms from "./CompletedForms.vue";
 
 export default defineComponent({
   components: { Tabs },
@@ -26,7 +28,7 @@ export default defineComponent({
         name: translate.t("Overview"), href: "#overview", current: "overview", show: true, content: "",
       },
       {
-        name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: "",
+        name: translate.t("Completed & Form"), href: "#completed_form", current: "completed", show: true, content: CompletedForms,
       },
       {
         name: translate.t("File Manager"), href: "#file_manager", current: "file_manager", show: false, content: "",
diff --git a/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue b/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
new file mode 100644
index 0000000000..df5fae7851
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <BaseTable
+      id="completed-forms"
+      :columns="columnsConfig"
+      :data="data"
+    >
+      <template
+        v-for="(item, index) in data"
+        #[`container-row-${index}`]
+      >
+        <display-form
+          :key="`display-${index}`"
+          :data="item"
+        />
+      </template>
+      <template
+        v-for="(item, index) in data"
+        #[`ellipsis-menu-${index}`]
+      >
+        <ellipsis-menu
+          :key="`ellipsis-${index}`"
+          :data="item"
+        />
+      </template>
+    </BaseTable>
+    <Pagination />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from "vue";
+import { BaseTable, Pagination } from "../../../base";
+import DisplayForm from "./DisplayForm.vue";
+import EllipsisMenu from "./EllipsisMenu.vue";
+import { getData } from "../api/index";
+import { getColumns } from "../config/columns";
+
+export default defineComponent({
+  components: {
+    BaseTable, Pagination, DisplayForm, EllipsisMenu,
+  },
+  setup() {
+    const data = ref(null);
+    const columnsConfig = ref(null);
+
+    onMounted(async () => {
+      data.value = await getData();
+      columnsConfig.value = getColumns("completed_forms");
+    });
+
+    return {
+      data,
+      columnsConfig,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/DisplayForm.vue b/resources/jscomposition/cases/casesDetail/components/DisplayForm.vue
new file mode 100644
index 0000000000..3ffb06bc86
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/DisplayForm.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="tw-py-10 tw-px-32 tw-max-h-[450px] tw-overflow-auto">
+    <vue-form-renderer
+      v-if="screen !== null"
+      v-model="previewData"
+      :config="screen.config"
+      :computed="screen.computed"
+      :custom-css="screen.custom_css"
+      :watchers="screen.watchers"
+      :show-errors="true"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, onMounted, ref } from "vue";
+import { getScreenData } from "../api/index";
+
+export default defineComponent({
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const previewData = ref({});
+    const screen = ref(null);
+
+    const getScreen = (screenId) => {
+      Promise.resolve(getScreenData(screenId)).then((response) => { screen.value = response.data; });
+    };
+
+    onMounted(() => {
+      getScreen(props.data?.screen_id);
+    });
+
+    return {
+      screen,
+      previewData,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/EllipsisMenu.vue b/resources/jscomposition/cases/casesDetail/components/EllipsisMenu.vue
new file mode 100644
index 0000000000..4376c3bf79
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/EllipsisMenu.vue
@@ -0,0 +1,54 @@
+<template>
+  <td class="tw-sticky tw-w-0 tw-right-0 tw-top-0">
+    <div class="tw-float-right tw-relative tw-right-4">
+      <button
+        v-for="item in menuOptions"
+        :key="item.menu"
+        type="button"
+        class="tw-rounded-lg tw-bg-white tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-600 tw-shadow-sm
+        tw-ring-1 tw-ring-gray-300 hover:tw-bg-gray-50 tw-gap-2"
+        @click="executeCallback(item)"
+      >
+        <i
+          class="tw-text-xl tw-text-gray-600"
+          :class="item.icon"
+        />
+      </button>
+    </div>
+  </td>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const onPrint = () => {
+      const { data } = props;
+      window.open(`/requests/${data.case_number}/task/${data.id}/screen/${data.screen_id}`);
+    };
+
+    const menuOptions = [
+      {
+        icon: "fa fa-print",
+        callback: onPrint,
+        name: "print",
+      },
+    ];
+
+    const executeCallback = (item) => item.callback();
+
+    return {
+      menuOptions,
+      executeCallback,
+      onPrint,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
index fd5689f016..60276e8a0a 100644
--- a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -5,14 +5,16 @@
       :columns="columnsConfig"
       :data="data"
       class="tw-grow tw-overflow-y-scroll tw-overflow-hidden"
-      @changeFilter="onChangeFilter" />
+      @changeFilter="onChangeFilter"
+    />
 
     <Pagination
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
       @perPage="onPerPage"
-      @go="onGo" />
+      @go="onGo"
+    />
   </div>
 </template>
 
@@ -27,7 +29,7 @@ const data = ref(null);
 const columnsConfig = ref(null);
 const dataPagination = ref({
   total: 153,
-  page: 0,
+  page: 1,
   pages: 10,
   perPage: 15,
 });
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index a3be35c151..bd462cf035 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -1,13 +1,14 @@
 import {
   StatusCell,
   LinkCell,
+  CollapseFormCell,
 } from "../../../system/index";
 
 export default {};
 
 // Column for Task
 const taskNumberColumn = () => ({
-  field: "id",
+  field: "case_number",
   header: "Tasks #",
   resizable: true,
   width: 200,
@@ -114,6 +115,22 @@ const startedColumn = () => ({
   width: 200,
 });
 
+const completedDateColumn = () => ({
+  field: "completed_date",
+  header: "Completed Date",
+  resizable: true,
+  width: 200,
+});
+
+const actionColumn = () => ({
+  field: "",
+  header: "",
+  resizable: false,
+  width: 50,
+  cellRenderer: () => CollapseFormCell,
+  params: {},
+});
+
 export const getColumns = (type) => {
   const columns = {
     tasks: [
@@ -130,6 +147,15 @@ export const getColumns = (type) => {
       statusColumn(),
       startedColumn(),
     ],
+    completed_forms: [
+      actionColumn(),
+      taskNumberColumn(),
+      taskNameColumn(),
+      processNameColumn(),
+      assignedColumn(),
+      completedDateColumn(),
+      dueDateColumn(),
+    ],
   };
 
   return columns[type];
diff --git a/resources/jscomposition/system/table/cell/CollapseFormCell.vue b/resources/jscomposition/system/table/cell/CollapseFormCell.vue
new file mode 100644
index 0000000000..0ee802781f
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/CollapseFormCell.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="tw-flex tw-justify-center">
+    <button
+      type="button"
+      class="tw-rounded-lg tw-bg-white tw-px-2.5 tw-py-1 tw-text-sm tw-font-semibold tw-text-gray-900
+        tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50"
+      @click="showScreen"
+    >
+      <i
+        class="fas"
+        :class="viewScreen ? 'fa-angle-down' : 'fa-angle-right'"
+      />
+    </button>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    const viewScreen = ref(false);
+
+    const showScreen = () => {
+      viewScreen.value = !viewScreen.value;
+      emit("collapseContainer", viewScreen.value);
+    };
+
+    return {
+      viewScreen,
+      showScreen,
+      color: "red",
+      label: "fabio",
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/index.js b/resources/jscomposition/system/table/cell/index.js
index 5af39e9029..218f02f1da 100644
--- a/resources/jscomposition/system/table/cell/index.js
+++ b/resources/jscomposition/system/table/cell/index.js
@@ -3,6 +3,7 @@ import TruncatedOptionsCell from "./TruncatedOptionsCell.vue";
 import StatusCell from "./StatusCell.vue";
 import CaseTitleCell from "./CaseTitleCell.vue";
 import LinkCell from "./LinkCell.vue";
+import CollapseFormCell from "./CollapseFormCell.vue";
 
 export {
   ParticipantsCell,
@@ -10,4 +11,5 @@ export {
   StatusCell,
   CaseTitleCell,
   LinkCell,
+  CollapseFormCell,
 };

From c884ec8813e4f59004949b347f3ee118d13c3327 Mon Sep 17 00:00:00 2001
From: Fabio Rodolfo Guachalla Blanco <frguachallab@gmail.com>
Date: Wed, 2 Oct 2024 08:09:47 -0400
Subject: [PATCH 2/2] Update CollapseFormCell.vue

---
 resources/jscomposition/system/table/cell/CollapseFormCell.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/jscomposition/system/table/cell/CollapseFormCell.vue b/resources/jscomposition/system/table/cell/CollapseFormCell.vue
index 0ee802781f..ab2d971895 100644
--- a/resources/jscomposition/system/table/cell/CollapseFormCell.vue
+++ b/resources/jscomposition/system/table/cell/CollapseFormCell.vue
@@ -43,8 +43,6 @@ export default defineComponent({
     return {
       viewScreen,
       showScreen,
-      color: "red",
-      label: "fabio",
     };
   },
 });