ProcessMaker · pmPaulis · Oct 2, 2024 · Oct 1, 2024 · Oct 2, 2024
diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
@@ -1,51 +1,76 @@
 <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>
           <THeader
             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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>