From 45d47f504948c4098e829dcfad4b2f6a57169279 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Mon, 23 Sep 2024 15:40:42 -0400
Subject: [PATCH 1/6] FOUR-19237: Cases list Pagination

---
 .../jscomposition/base/form/Dropdown.vue      |  26 +-
 .../jscomposition/base/table/Pagination.vue   | 272 ++++++++++++++----
 resources/jscomposition/base/table/TCell.vue  |  13 +-
 resources/jscomposition/base/ui/AppAvatar.vue |  24 +-
 .../jscomposition/base/ui/AppPopover.vue      |  32 +--
 .../cases/casesMain/CasesDataSection.vue      |  37 ++-
 .../cases/casesMain/api/index.js              | 133 ++++++---
 .../cases/casesMain/config/columns.js         |  54 +++-
 .../system/table/cell/CaseTitleCell.vue       |  43 +--
 .../system/table/cell/LinkCell.vue            |  55 ++++
 .../system/table/cell/ParticipantsCell.vue    |  19 +-
 .../table/cell/TruncatedOptionsCell.vue       |  25 +-
 .../jscomposition/system/table/cell/index.js  |  14 +-
 13 files changed, 580 insertions(+), 167 deletions(-)
 create mode 100644 resources/jscomposition/system/table/cell/LinkCell.vue

diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
index 6c2e839aad..6ad84225d4 100644
--- a/resources/jscomposition/base/form/Dropdown.vue
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -21,6 +21,7 @@
     <transition :name="animation">
       <div
         v-if="show"
+        ref="containerRef"
         class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
         :style="{ width: `${widthContainer}px`, top: `${top}px` }">
         <ul class="tw-list-none tw-overflow-hidden tw-rounded">
@@ -92,6 +93,8 @@ export default defineComponent({
   emits: ["input", "change"],
   setup(props, { emit }) {
     const inputRef = ref();
+    const containerRef = ref();
+
     const show = ref(false);
     const widthContainer = ref(100);
     const top = ref(0);
@@ -121,8 +124,18 @@ export default defineComponent({
       emit("change", option);
     };
 
+    /**
+     * This method calculates the new position for dropdown menu
+     * Considers:
+     * - Space down in relation to viewport
+     *
+     * Increase other use cases
+     */
     const calculatePosition = () => {
       const rect = inputRef.value?.getBoundingClientRect();
+      const containerRect = containerRef.value.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
 
       widthContainer.value = rect.width || 100;
 
@@ -137,6 +150,14 @@ export default defineComponent({
         container = container.parentElement;
       }
 
+      // Check: Does the dropdown menu have space down?
+      if (rect.top + containerRect.height > viewportHeight) {
+        topPosition = rect.top - containerRect.height;
+
+        top.value = topPosition;
+        return;
+      }
+
       top.value = inputRef.value.offsetTop - topPosition;
     };
 
@@ -145,10 +166,10 @@ export default defineComponent({
     };
 
     const toogleShow = ($event) => {
-      calculatePosition($event);
+      show.value = !show.value;
 
       nextTick(() => {
-        show.value = !show.value;
+        calculatePosition($event);
       });
     };
 
@@ -161,6 +182,7 @@ export default defineComponent({
     });
 
     return {
+      containerRef,
       show,
       data,
       inputRef,
diff --git a/resources/jscomposition/base/table/Pagination.vue b/resources/jscomposition/base/table/Pagination.vue
index 548b10e20f..d0f5d3ceb6 100644
--- a/resources/jscomposition/base/table/Pagination.vue
+++ b/resources/jscomposition/base/table/Pagination.vue
@@ -1,82 +1,238 @@
 <template>
   <div
-    class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-bg-white">
-    <div>
-      <svg
-        class="tw-h-5 tw-w-5"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        aria-hidden="true">
+    class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-text-gray-500 tw-text-sm">
+    <svg
+      :class="{
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel >0
+      }"
+      class=" tw-rounded-md"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="first">
+      <g id="chevron-double-left">
         <path
-          fill-rule="evenodd"
-          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-          clip-rule="evenodd" />
-      </svg>
-    </div>
+          id="Shape"
+          d="M10 15L5 10L10 5M15 15L10 10L15 5"
+          stroke="#9FA8B5"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round" />
+      </g>
+    </svg>
 
-    <div>
-      <svg
-        class="tw-h-5 tw-w-5"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        aria-hidden="true">
+    <svg
+      :class="{
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100 ': pageModel >0
+      }"
+      class="tw-rounded-md"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="prev">
+      <g id="chevron-left">
         <path
-          fill-rule="evenodd"
-          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-          clip-rule="evenodd" />
-      </svg>
-    </div>
+          id="Shape"
+          d="M12.5 15L7.5 10L12.5 5"
+          stroke="#9FA8B5"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round" />
+      </g>
+    </svg>
 
-    <div>
-      <div
-        class="tw-flex tw-border-1 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-gray-300">
-        <input
-          class="tw-block tw-flex-1 tw-border-0 tw-bg-transparent tw-pl-1 focus-visible:tw-outline-none placeholder:tw-text-gray-400"
-          placeholder="1" />
-      </div>
+    <div
+      class="tw-flex tw-border-1 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-gray-300">
+      <input
+        inputmode="numeric"
+        pattern="\d*"
+        :value="pageModel"
+        class="tw-block tw-w-10 tw-text-center tw-flex-1 tw-border-0 tw-bg-transparent tw-pl-1
+          focus-visible:tw-outline-none placeholder:tw-text-gray-400"
+        placeholder="1"
+        @change="$emit('go',parseInt($event.target.value))">
     </div>
 
-    <div>
-      <svg
-        class="tw-h-5 tw-w-5"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        aria-hidden="true">
+    <svg
+      :class="{
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel < pages-1
+      }"
+      class="tw-rounded-md"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="next">
+      <g id="chevron-right">
         <path
-          fill-rule="evenodd"
-          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-          clip-rule="evenodd" />
-      </svg>
-    </div>
+          id="Shape"
+          d="M7.5 5L12.5 10L7.5 15"
+          stroke="#9FA8B5"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round" />
+      </g>
+    </svg>
 
-    <div>
-      <svg
-        class="tw-h-5 tw-w-5"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        aria-hidden="true">
+    <svg
+      :class="{
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel < pages-1
+      }"
+      class="tw-rounded-md"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      @click="last">
+      <g id="chevron-double-right">
         <path
-          fill-rule="evenodd"
-          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-          clip-rule="evenodd" />
-      </svg>
-    </div>
+          id="Shape"
+          d="M10 5L15 10L10 15M5 5L10 10L5 15"
+          stroke="#9FA8B5"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round" />
+      </g>
+    </svg>
 
-    <div>
-      <span> 153 items </span>
+    <div class="tw-px-2">
+      <span>{{ `${totalModel} items` }} </span>
     </div>
 
     <div>
-      <span> 15 per page</span>
+      <Dropdown
+        v-model="selectedOption"
+        class="tw-w-40"
+        :options="options"
+        @change="onChangeOption">
+        <template #input="{toogleShow}">
+          <div
+            class="tw-flex tw-full tw-items-center tw-space-x-2"
+            @click.prevent.stop="toogleShow()">
+            <span>
+              {{ `${selectedOption.value} per page` }}
+            </span>
+
+            <i
+              class=" hover:tw-bg-gray-100 tw-rounded-md hover:tw-cursor-pointer tw-p-1 fas fa-chevron-down" />
+          </div>
+        </template>
+      </Dropdown>
     </div>
   </div>
 </template>
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, ref, computed } from "vue";
+import { Dropdown } from "../form";
+
+const optionsPerPage = [
+  {
+    value: 15,
+    label: "15 items",
+  },
+  {
+    value: 30,
+    label: "30 items",
+  },
+  {
+    value: 50,
+    label: "50 items",
+
+  },
+];
 
 export default defineComponent({
-  setup() {
-    return {};
+  components: {
+    Dropdown,
+  },
+  props: {
+    total: {
+      type: Number,
+      default: () => (0),
+    },
+    page: {
+      type: Number,
+      default: () => (0),
+    },
+    pages: {
+      type: Number,
+      default: () => (0),
+    },
+  },
+  emits: ["perPage", "go"],
+  setup(props, { emit }) {
+    const options = ref(optionsPerPage);
+    const totalModel = computed(() => props.total);
+    const pageModel = ref(props.page);
+
+    const selectedOption = ref({
+      value: 15,
+      label: "15 items",
+    });
+
+    const first = () => {
+      if (pageModel.value > 0) {
+        pageModel.value = 0;
+        emit("go", 0);
+      }
+    };
+
+    const prev = () => {
+      if (pageModel.value > 0) {
+        pageModel.value -= 1;
+        emit("go", pageModel.value);
+      }
+    };
+
+    const next = () => {
+      if (pageModel.value < props.pages - 1) {
+        pageModel.value += 1;
+        emit("go", pageModel.value);
+      }
+    };
+
+    const last = () => {
+      if (pageModel.value < props.pages - 1) {
+        pageModel.value = props.pages - 1;
+        emit("go", pageModel.value);
+      }
+    };
+
+    const onChangeOption = (e) => {
+      selectedOption.value = e;
+      emit("perPage", e.value);
+    };
+
+    return {
+      options,
+      selectedOption,
+      totalModel,
+      pageModel,
+      first,
+      last,
+      next,
+      onChangeOption,
+      prev,
+    };
   },
 });
 </script>
+<style scoped>
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+</style>
diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
index 74d87bdc2f..7b79296be8 100644
--- a/resources/jscomposition/base/table/TCell.vue
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -11,8 +11,9 @@
       </slot>
     </div>
     <component
+      :is="getComponent()"
       v-else
-      :is="column.cellRenderer()"
+      v-bind="getParams()"
       :columns="columns"
       :column="column"
       :row="row" />
@@ -45,7 +46,17 @@ export default defineComponent({
       }
       return get(props.row, props.column?.field) || "";
     };
+
+    const getComponent = () => props.column.cellRenderer().component;
+
+    const getParams = () => {
+      console.log("BREAK POINT AQUIII renderer");
+      return props.column.cellRenderer().params || {};
+    };
+
     return {
+      getComponent,
+      getParams,
       getValue,
     };
   },
diff --git a/resources/jscomposition/base/ui/AppAvatar.vue b/resources/jscomposition/base/ui/AppAvatar.vue
index cdad2ccb14..185a9a4eb8 100644
--- a/resources/jscomposition/base/ui/AppAvatar.vue
+++ b/resources/jscomposition/base/ui/AppAvatar.vue
@@ -1,16 +1,22 @@
 <template>
-    <span v-if="initials"
-      class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
-      <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
-    </span>
+  <span
+    v-if="initials"
+    class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6
+      tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white"
+    @click.prevent="$emit('click')">
+    <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+  </span>
 
-    <img v-else
-      class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
-      src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-      alt="" />
+  <img
+    v-else
+    class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
+    src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+    alt=""
+    @click.prevent="$emit('click')">
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
   props: {
     src: {
@@ -22,7 +28,7 @@ export default defineComponent({
       default: () => "NA",
     },
   },
-  setup(props, {emit}) {
+  setup(props, { emit }) {
     return {};
   },
 });
diff --git a/resources/jscomposition/base/ui/AppPopover.vue b/resources/jscomposition/base/ui/AppPopover.vue
index 729717638a..f6043eb892 100644
--- a/resources/jscomposition/base/ui/AppPopover.vue
+++ b/resources/jscomposition/base/ui/AppPopover.vue
@@ -79,22 +79,6 @@ export default {
             top = wrapperRect.bottom + 10;
           }
           break;
-        case "bottom":
-          top = wrapperRect.bottom + 10;
-          left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
-          // Verify space bottom
-          if (top + tooltipRect.height > viewportHeight) {
-            calculatedPosition.value = "top";
-            top = wrapperRect.top - tooltipRect.height - 10;
-          }
-
-          const leftaux = wrapperRect.left - tooltipRect.width - 10;
-          // Verify space left
-          if (leftaux < 0) {
-            calculatedPosition.value = "right-bottom";
-            left = wrapperRect.right + 100;
-          }
-          break;
         case "left":
           top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
           left = wrapperRect.left - tooltipRect.width - 10;
@@ -113,6 +97,22 @@ export default {
             left = wrapperRect.left - tooltipRect.width - 10;
           }
           break;
+        case "bottom":
+        default:
+          top = wrapperRect.bottom + 10;
+          left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+          // Verify space bottom
+          if (top + tooltipRect.height > viewportHeight) {
+            calculatedPosition.value = "top";
+            top = wrapperRect.top - tooltipRect.height - 10;
+          }
+
+          const leftaux = wrapperRect.left - tooltipRect.width - 10;
+          // Verify space left
+          if (leftaux < 0) {
+            calculatedPosition.value = "right-bottom";
+            left = wrapperRect.right + 100;
+          }
       }
 
       // Verify if tooltip leaves the viewport
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 51e1526489..77cea166ee 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -10,7 +10,12 @@
       :data="data"
       class="tw-grow tw-overflow-y-scroll" />
 
-    <Pagination />
+    <Pagination
+      :total="dataPagination.total"
+      :page="dataPagination.page"
+      :pages="dataPagination.pages"
+      @perPage="onPerPage"
+      @go="onGo" />
   </div>
 </template>
 <script>
@@ -41,16 +46,44 @@ export default defineComponent({
     const columnsConfig = ref();
     const data = ref();
 
+    const dataPagination = ref({
+      total: 153,
+      page: 0,
+      pages: 10,
+      perPage: 15,
+    });
+
+    const getData = () => getAllData({
+      type: props.listId,
+      page: dataPagination.value.page,
+      perPage: dataPagination.value.perPage,
+    });
+
+    const onGo = async (page) => {
+      dataPagination.value.page = page;
+
+      data.value = await getData();
+    };
+
+    const onPerPage = async (perPage) => {
+      dataPagination.value.perPage = perPage;
+
+      data.value = await getData();
+    };
+
     onMounted(async () => {
-      data.value = await getAllData({ type: props.listId, page: 15 });
+      data.value = await getData();
 
       columnsConfig.value = getColumns(props.listId);
     });
 
     return {
+      dataPagination,
       columnsConfig,
       data,
       badgesData,
+      onGo,
+      onPerPage,
     };
   },
 });
diff --git a/resources/jscomposition/cases/casesMain/api/index.js b/resources/jscomposition/cases/casesMain/api/index.js
index fe86c33782..566f0adfb3 100644
--- a/resources/jscomposition/cases/casesMain/api/index.js
+++ b/resources/jscomposition/cases/casesMain/api/index.js
@@ -14,7 +14,7 @@ export const getCounters = async () => {
 
 // Method to get data case list - change with processmaker API
 export const getData = async () => {
-  let objects_list = [];
+  const objects_list = [];
 
   for (let i = 0; i <= 31; i++) {
     const obj = {
@@ -34,18 +34,7 @@ export const getData = async () => {
   return objects_list;
 };
 
-export const getAllData = async({type, page})=>{
-  const response = allCasesData.data.map(e=> {
-    e.case_title = `${type} ${page} ${e.case_title}`
-    e.case_title_formatted = `${type} ${page} ${e.case_title_formatted}`
-    return e;
-  })
-  
- 
-  return response;
-}
-
-export const allCasesData = {
+export const allCasesData = () => ({
   data: [
     {
       case_number: 0,
@@ -59,18 +48,20 @@ export const allCasesData = {
         { id: 3, name: "accusantium consectetur" },
       ],
       requests: [
-        { id: 92570, name: "delectus voluptatem", parent_request: 24 },
+        {
+          id: 92570,
+          name: "delectus voluptatem",
+          parent_request: 24,
+        },
         { id: 8846, name: "est accusamus culpa", parent_request: 2 },
       ],
       request_tokens: null,
       tasks: [
-        { id: "node_6351", name: "libero tenetur quos quibusdam" },
+        { id: "123", name: "libero tenetur quos quibusdam" },
         { id: "node_2329", name: "modi voluptas quo" },
         { id: "node_4561", name: "asperiores tenetur" },
       ],
-      participants: [
-        { id: 25, name: "Dr. Madie Predovic PhD" }
-      ],
+      participants: [{ id: 25, name: "Dr. Madie Predovic PhD" }],
       initiated_at: "1997-08-01T19:59:17.000000Z",
       completed_at: "2015-11-10T21:25:11.000000Z",
     },
@@ -87,7 +78,11 @@ export const allCasesData = {
       ],
       requests: [
         { id: 689, name: "voluptas aut", parent_request: 185512574 },
-        { id: 3262060, name: "adipisci est qui", parent_request: 93397820 },
+        {
+          id: 3262060,
+          name: "adipisci est qui",
+          parent_request: 93397820,
+        },
       ],
       request_tokens: null,
       tasks: [
@@ -145,7 +140,11 @@ export const allCasesData = {
       ],
       requests: [
         { id: 3, name: "et aliquid", parent_request: 34377361 },
-        { id: 400403, name: "consequatur vel magni", parent_request: 81981614 },
+        {
+          id: 400403,
+          name: "consequatur vel magni",
+          parent_request: 81981614,
+        },
       ],
       request_tokens: null,
       tasks: [
@@ -174,7 +173,11 @@ export const allCasesData = {
       ],
       requests: [
         { id: 845, name: "est voluptates", parent_request: 991 },
-        { id: 6922, name: "repellat deserunt vitae", parent_request: 7 },
+        {
+          id: 6922,
+          name: "repellat deserunt vitae",
+          parent_request: 7,
+        },
       ],
       request_tokens: null,
       tasks: [
@@ -202,7 +205,11 @@ export const allCasesData = {
         { id: 11857, name: "aut occaecati" },
       ],
       requests: [
-        { id: 95, name: "molestias voluptatem", parent_request: 6682658 },
+        {
+          id: 95,
+          name: "molestias voluptatem",
+          parent_request: 6682658,
+        },
         { id: 9706673, name: "et quasi ipsum", parent_request: 2 },
       ],
       request_tokens: null,
@@ -231,8 +238,16 @@ export const allCasesData = {
         { id: 93813951, name: "atque neque" },
       ],
       requests: [
-        { id: 6694520, name: "nihil aperiam", parent_request: 525456 },
-        { id: 9067565, name: "beatae voluptatem dolorem", parent_request: 0 },
+        {
+          id: 6694520,
+          name: "nihil aperiam",
+          parent_request: 525456,
+        },
+        {
+          id: 9067565,
+          name: "beatae voluptatem dolorem",
+          parent_request: 0,
+        },
       ],
       request_tokens: null,
       tasks: [
@@ -261,7 +276,11 @@ export const allCasesData = {
       ],
       requests: [
         { id: 5157906, name: "voluptate ratione", parent_request: 0 },
-        { id: 60923, name: "voluptatem eius ipsa", parent_request: 27 },
+        {
+          id: 60923,
+          name: "voluptatem eius ipsa",
+          parent_request: 27,
+        },
       ],
       request_tokens: null,
       tasks: [
@@ -289,8 +308,16 @@ export const allCasesData = {
         { id: 54, name: "veritatis qui" },
       ],
       requests: [
-        { id: 4444, name: "corrupti adipisci", parent_request: 2310454 },
-        { id: 562211360, name: "voluptatibus id omnis", parent_request: 4 },
+        {
+          id: 4444,
+          name: "corrupti adipisci",
+          parent_request: 2310454,
+        },
+        {
+          id: 562211360,
+          name: "voluptatibus id omnis",
+          parent_request: 4,
+        },
       ],
       request_tokens: null,
       tasks: [
@@ -319,7 +346,11 @@ export const allCasesData = {
       ],
       requests: [
         { id: 3084, name: "tempore incidunt", parent_request: 30470 },
-        { id: 2, name: "neque aut suscipit", parent_request: 81171529 },
+        {
+          id: 2,
+          name: "neque aut suscipit",
+          parent_request: 81171529,
+        },
       ],
       request_tokens: null,
       tasks: [
@@ -347,8 +378,16 @@ export const allCasesData = {
         { id: 294713669, name: "sit dolor" },
       ],
       requests: [
-        { id: 898, name: "voluptatum perferendis", parent_request: 116178 },
-        { id: 96313178, name: "dolor quis ad", parent_request: 480366 },
+        {
+          id: 898,
+          name: "voluptatum perferendis",
+          parent_request: 116178,
+        },
+        {
+          id: 96313178,
+          name: "dolor quis ad",
+          parent_request: 480366,
+        },
       ],
       request_tokens: null,
       tasks: [
@@ -377,7 +416,11 @@ export const allCasesData = {
       ],
       requests: [
         { id: 17469, name: "tenetur temporibus", parent_request: 3 },
-        { id: 94439, name: "odio accusantium sed", parent_request: 189566 },
+        {
+          id: 94439,
+          name: "odio accusantium sed",
+          parent_request: 189566,
+        },
       ],
       request_tokens: null,
       tasks: [
@@ -435,7 +478,11 @@ export const allCasesData = {
       ],
       requests: [
         { id: 346, name: "eum consequatur", parent_request: 78984 },
-        { id: 353990, name: "aut dolorem deleniti", parent_request: 6272 },
+        {
+          id: 353990,
+          name: "aut dolorem deleniti",
+          parent_request: 6272,
+        },
       ],
       request_tokens: null,
       tasks: [
@@ -485,6 +532,24 @@ export const allCasesData = {
       completed_at: "1990-08-24T08:24:20.000000Z",
     },
   ],
-  meta: { total: 1000, perPage: 15, currentPage: 1, lastPage: 67 },
-};
+  meta: {
+    total: 1000, perPage: 15, currentPage: 1, lastPage: 67,
+  },
+});
+
+export const getAllData = async ({ type, page, perPage }) => {
+  const response = [];
+  const allData = allCasesData();
 
+  for (let index = 0; index < perPage; index += 1) {
+    const idxLooper = index % (allData.data.length - 1);
+
+    const item = allData.data[idxLooper];
+    item.case_number = index + 100 * page;
+    item.case_title = `${type} ${page} ${item.case_title}`;
+    item.case_title_formatted = `${type} ${page} ${item.case_title_formatted}`;
+    response.push(item);
+  }
+
+  return response;
+};
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index 40b201cfcf..88cb37bcce 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -1,9 +1,11 @@
 import moment from "moment";
+
 import {
   CaseTitleCell,
   TruncatedOptionsCell,
   ParticipantsCell,
   StatusCell,
+  LinkCell,
 } from "../../../system/index";
 
 const formatDate = (value, format) => {
@@ -17,7 +19,10 @@ const formatDate = (value, format) => {
       config = ProcessMaker.user.datetime_format;
     }
     if (format === "date") {
-      config = ProcessMaker.user.datetime_format.replace(/[\sHh:msaAzZ]/g, "");
+      config = ProcessMaker.user.datetime_format.replace(
+        /[\sHh:msaAzZ]/g,
+        "",
+      );
     }
   }
   if (value) {
@@ -58,6 +63,14 @@ export const caseNumberColumn = () => ({
     type: "string",
     operators: ["=", ">", ">=", "in", "between"],
   },
+  cellRenderer: () => ({
+    component: LinkCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `cases/${row.case_number}`;
+      },
+    },
+  }),
 });
 
 export const caseTitleColumn = () => ({
@@ -65,7 +78,14 @@ export const caseTitleColumn = () => ({
   header: "Case Title",
   resizable: true,
   width: 200,
-  cellRenderer: () => CaseTitleCell,
+  cellRenderer: () => ({
+    component: CaseTitleCell,
+    params: {
+      click: (row, column, columns) => {
+        window.document.location = `cases/${row.case_number}`;
+      },
+    },
+  }),
   filter: {
     type: "string",
     operators: ["=", ">", ">=", "in", "between"],
@@ -77,7 +97,13 @@ export const processColumn = () => ({
   header: "Process",
   resizable: true,
   width: 200,
-  cellRenderer: () => TruncatedOptionsCell,
+  cellRenderer: () => ({
+    component: TruncatedOptionsCell,
+    params: {
+      click: (option, row, column, columns) => {
+      },
+    },
+  }),
   filter: {
     type: "string",
     operators: ["="],
@@ -89,7 +115,14 @@ export const taskColumn = () => ({
   header: "Task",
   resizable: true,
   width: 200,
-  cellRenderer: () => TruncatedOptionsCell,
+  cellRenderer: () => ({
+    component: TruncatedOptionsCell,
+    params: {
+      click: (option, row, column, columns) => {
+        window.document.location = `tasks/${option.id}/edit`;
+      },
+    },
+  }),
   filter: {
     type: "string",
     operators: ["="],
@@ -101,7 +134,14 @@ export const participantsColumn = () => ({
   header: "Participants",
   resizable: true,
   width: 200,
-  cellRenderer: () => ParticipantsCell,
+  cellRenderer: () => ({
+    component: ParticipantsCell,
+    params: {
+      click: (option, row, column, columns) => {
+        window.document.location = `profile/${option.id}`;
+      },
+    },
+  }),
   filter: {
     type: "string",
     operators: ["="],
@@ -113,7 +153,9 @@ export const statusColumn = () => ({
   header: "Status",
   resizable: true,
   width: 200,
-  cellRenderer: () => StatusCell,
+  cellRenderer: () => ({
+    component: StatusCell,
+  }),
   filter: {
     type: "string",
     operators: ["="],
diff --git a/resources/jscomposition/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
index f1e0f96701..25fcf91c62 100644
--- a/resources/jscomposition/system/table/cell/CaseTitleCell.vue
+++ b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
@@ -1,23 +1,24 @@
 <template>
-  <div>
-    <div
-      v-if="row.case_title_formatted"
-      class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
-      :style="{ width: column.width + 'px' }"
-      v-html="row.case_title_formatted" 
-      />
-    <slot
-      v-else
-      :columns="columns"
-      :column="column"
-      :row="row"
-    >
-      {{ getValue() }}
-    </slot>
+  <div
+    class="tw-text-nowrap tw-whitespace-nowrap"
+    :style="{ width: column.width + 'px' } ">
+    <a
+      href="#"
+      class="hover:tw-text-blue-500"
+      @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>
+    </a>
   </div>
 </template>
 <script>
 import { defineComponent } from "vue";
+import { isFunction, get } from "lodash";
 
 export default defineComponent({
   props: {
@@ -33,15 +34,25 @@ export default defineComponent({
       type: Object,
       default: () => ({}),
     },
+    click: {
+      type: Function,
+      default: new Function(),
+    },
   },
-  setup() {
+  setup(props) {
     const getValue = () => {
       if (isFunction(props.column?.formatter)) {
         return props.column?.formatter(props.row, props.column, props.columns);
       }
       return get(props.row, props.column?.field) || "";
     };
+
+    const onClick = () => {
+      props.click && props.click(props.row, props.column, props.columns);
+    };
+
     return {
+      onClick,
       getValue,
     };
   },
diff --git a/resources/jscomposition/system/table/cell/LinkCell.vue b/resources/jscomposition/system/table/cell/LinkCell.vue
new file mode 100644
index 0000000000..d864c6e2e5
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/LinkCell.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    v-if="row.case_title_formatted"
+    class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
+    :style="{ width: column.width + 'px' } ">
+    <a
+      class="hover:tw-text-blue-500"
+      href="#"
+      @click.prevent="onClick">
+      {{ getValue() }}
+    </a>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+import { isFunction, get } from "lodash";
+
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+    click: {
+      type: Function,
+      default: new Function(),
+    },
+  },
+  setup(props) {
+    const getValue = () => {
+      if (isFunction(props.column?.formatter)) {
+        return props.column?.formatter(props.row, props.column, props.columns);
+      }
+      return get(props.row, props.column?.field) || "";
+    };
+
+    const onClick = () => {
+      props.click && props.click(props.row, props.column, props.columns);
+    };
+
+    return {
+      onClick,
+      getValue,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
index 4d00a596bb..4907726bd9 100644
--- a/resources/jscomposition/system/table/cell/ParticipantsCell.vue
+++ b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
@@ -6,15 +6,12 @@
       class="tw-group">
       <AppPopover
         position="bottom"
-        :hover="true"
-      >
+        :hover="true">
         <AppAvatar
-
           :class="`${participant.color}`"
           :initials="participant.name[0]"
           class="tw-cursor-pointer"
-        />
-
+          @click="onClick(participant)" />
         <template #content>
           <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
             {{ participant.name }}
@@ -25,8 +22,7 @@
 
     <span
       v-if="participants.length == 1"
-      class="tw-px-2"
-    >
+      class="tw-px-2">
       {{ participants[0].name }}
     </span>
   </div>
@@ -66,6 +62,10 @@ export default defineComponent({
       type: Object,
       default: () => ({}),
     },
+    click: {
+      type: Function,
+      default: new Function(),
+    },
   },
   setup(props) {
     const participants = computed(() => {
@@ -76,8 +76,13 @@ export default defineComponent({
       return response;
     });
 
+    const onClick = (participant) => {
+      props.click && props.click(participant, props.row, props.column, props.columns);
+    };
+
     return {
       participants,
+      onClick,
     };
   },
 });
diff --git a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
index 71b6f03c0b..ad71507157 100644
--- a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
+++ b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
@@ -1,19 +1,20 @@
 <template>
-  <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap"
-		:style="{ width: column.width + 'px' }">
+  <div
+    class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap"
+    :style="{ width: column.width + 'px' }">
     <div class="tw-overflow-hidden tw-text-ellipsis ">
-			{{ row[column.field][0].name }}
-		</div>
+      {{ row[column.field][0].name }}
+    </div>
 
     <AppPopover
-		  v-model="show"
+      v-model="show"
       :hover="false"
       position="bottom"
       class="!tw-absolute -tw-right-3">
       <div
         class="hover:tw-bg-gray-200 tw-bg-white tw-px-2 tw-rounded-md hover:tw-cursor-pointer"
         @click.prevent.stop="onClick">
-        <i class="fas fa-ellipsis-v"></i>
+        <i class="fas fa-ellipsis-v" />
       </div>
 
       <template #content>
@@ -37,9 +38,7 @@
 import { defineComponent, nextTick, ref } from "vue";
 import { AppPopover } from "../../../base/index";
 
-const isTruncated = (element) => {
-  return element.scrollWidth > element.clientWidth;
-};
+const isTruncated = (element) => element.scrollWidth > element.clientWidth;
 
 export default defineComponent({
   components: {
@@ -58,6 +57,10 @@ export default defineComponent({
       type: Object,
       default: () => ({}),
     },
+    click: {
+      type: Function,
+      default: new Function(),
+    },
   },
   setup(props, { emit }) {
     const show = ref(false);
@@ -67,7 +70,9 @@ export default defineComponent({
       show.value = !show.value;
     };
 
-    const onClickOption = (option, index) => {};
+    const onClickOption = (option, index) => {
+      props.click && props.click(option, props.row, props.column, props.columns);
+    };
 
     const onClose = () => {
       show.value = false;
diff --git a/resources/jscomposition/system/table/cell/index.js b/resources/jscomposition/system/table/cell/index.js
index 3c33f8bb4f..5af39e9029 100644
--- a/resources/jscomposition/system/table/cell/index.js
+++ b/resources/jscomposition/system/table/cell/index.js
@@ -1,11 +1,13 @@
-import ParticipantsCell from "./ParticipantsCell.vue"
-import TruncatedOptionsCell from "./TruncatedOptionsCell.vue"
-import StatusCell from "./StatusCell.vue"
-import CaseTitleCell from "./CaseTitleCell.vue"
+import ParticipantsCell from "./ParticipantsCell.vue";
+import TruncatedOptionsCell from "./TruncatedOptionsCell.vue";
+import StatusCell from "./StatusCell.vue";
+import CaseTitleCell from "./CaseTitleCell.vue";
+import LinkCell from "./LinkCell.vue";
 
 export {
   ParticipantsCell,
   TruncatedOptionsCell,
   StatusCell,
-  CaseTitleCell
-}
+  CaseTitleCell,
+  LinkCell,
+};

From 5c62a1b042f6e1d05c16f2d26f2a5509e2cfcf57 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Mon, 23 Sep 2024 15:59:10 -0400
Subject: [PATCH 2/6] FOUR-19237: Cases list Pagination

---
 resources/jscomposition/base/table/index.js                   | 2 +-
 resources/jscomposition/{base => system}/table/Pagination.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename resources/jscomposition/{base => system}/table/Pagination.vue (99%)

diff --git a/resources/jscomposition/base/table/index.js b/resources/jscomposition/base/table/index.js
index 9a2e23b1cf..c290a40e63 100644
--- a/resources/jscomposition/base/table/index.js
+++ b/resources/jscomposition/base/table/index.js
@@ -1,5 +1,5 @@
 import BaseTable from "./BaseTable.vue";
-import Pagination from "./Pagination.vue";
+import Pagination from "../../system/table/Pagination.vue";
 import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
diff --git a/resources/jscomposition/base/table/Pagination.vue b/resources/jscomposition/system/table/Pagination.vue
similarity index 99%
rename from resources/jscomposition/base/table/Pagination.vue
rename to resources/jscomposition/system/table/Pagination.vue
index d0f5d3ceb6..ddcf5c0448 100644
--- a/resources/jscomposition/base/table/Pagination.vue
+++ b/resources/jscomposition/system/table/Pagination.vue
@@ -129,7 +129,7 @@
 </template>
 <script>
 import { defineComponent, ref, computed } from "vue";
-import { Dropdown } from "../form";
+import { Dropdown } from "../../base/form";
 
 const optionsPerPage = [
   {

From 82c9408d74f532854cf8e197e6f6222df7dbfbdc Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Mon, 23 Sep 2024 16:12:41 -0400
Subject: [PATCH 3/6] FOUR-19237: Cases list Pagination

---
 resources/jscomposition/cases/casesMain/utils/counters.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/jscomposition/cases/casesMain/utils/counters.js b/resources/jscomposition/cases/casesMain/utils/counters.js
index 689831d8c1..7842251b80 100644
--- a/resources/jscomposition/cases/casesMain/utils/counters.js
+++ b/resources/jscomposition/cases/casesMain/utils/counters.js
@@ -32,7 +32,7 @@ export const formatCounters = (data) => {
       url: "/cases-main/all-cases",
     },
     {
-      header: t("All requests"),
+      header: t("My requests"),
       body: data.allRequests.toString(),
       color: "gray",
       icon: "fas fa-play",

From 23906d90c1ea57741a4556580d3efee5e385dd62 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Mon, 23 Sep 2024 16:18:25 -0400
Subject: [PATCH 4/6] FOUR-19237: Cases list Pagination

---
 resources/jscomposition/base/table/TCell.vue  |  5 +----
 .../cases/casesMain/utils/counters.js         | 19 +++++++++++++------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
index 7b79296be8..4a2f0267ce 100644
--- a/resources/jscomposition/base/table/TCell.vue
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -49,10 +49,7 @@ export default defineComponent({
 
     const getComponent = () => props.column.cellRenderer().component;
 
-    const getParams = () => {
-      console.log("BREAK POINT AQUIII renderer");
-      return props.column.cellRenderer().params || {};
-    };
+    const getParams = () => props.column.cellRenderer().params || {};
 
     return {
       getComponent,
diff --git a/resources/jscomposition/cases/casesMain/utils/counters.js b/resources/jscomposition/cases/casesMain/utils/counters.js
index 7842251b80..b6ae790eae 100644
--- a/resources/jscomposition/cases/casesMain/utils/counters.js
+++ b/resources/jscomposition/cases/casesMain/utils/counters.js
@@ -1,6 +1,7 @@
-export default {};
 import { t } from "i18next";
 
+export default {};
+
 export const formatCounters = (data) => {
   const counters = [
     {
@@ -24,14 +25,20 @@ export const formatCounters = (data) => {
       icon: "far fa-check-circle",
       url: "/cases-main/completed",
     },
-    {
+  ];
+
+  if (data.allCases) {
+    counters.push({
       header: t("All cases"),
       body: data.allCases.toString(),
       color: "purple",
       icon: "far fa-clipboard",
       url: "/cases-main/all-cases",
-    },
-    {
+    });
+  }
+
+  if (data.allRequests) {
+    counters.push({
       header: t("My requests"),
       body: data.allRequests.toString(),
       color: "gray",
@@ -39,8 +46,8 @@ export const formatCounters = (data) => {
       url: () => {
         window.location.href = "/requests";
       },
-    },
-  ];
+    });
+  }
 
   return counters;
 };

From 686f04beec968430b5ee65a53224a3e398d07cbd Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Mon, 23 Sep 2024 16:35:37 -0400
Subject: [PATCH 5/6] FOUR-19237: Cases list Pagination

---
 .../cases/casesMain/CasesDataSection.vue      | 18 +++++++++
 .../jscomposition/system/table/Pagination.vue | 37 ++++++-------------
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 77cea166ee..4c1767be4a 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -14,12 +14,14 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :options="optionsPerPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
 </template>
 <script>
 import { defineComponent, ref, onMounted } from "vue";
+import { t } from "i18next";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
@@ -53,6 +55,21 @@ export default defineComponent({
       perPage: 15,
     });
 
+    const optionsPerPage = [
+      {
+        value: 15,
+        label: `15 ${t("items")}`,
+      },
+      {
+        value: 30,
+        label: `30 ${t("items")}`,
+      },
+      {
+        value: 50,
+        label: `50 ${t("items")}`,
+      },
+    ];
+
     const getData = () => getAllData({
       type: props.listId,
       page: dataPagination.value.page,
@@ -82,6 +99,7 @@ export default defineComponent({
       columnsConfig,
       data,
       badgesData,
+      optionsPerPage,
       onGo,
       onPerPage,
     };
diff --git a/resources/jscomposition/system/table/Pagination.vue b/resources/jscomposition/system/table/Pagination.vue
index ddcf5c0448..69a8bcedcf 100644
--- a/resources/jscomposition/system/table/Pagination.vue
+++ b/resources/jscomposition/system/table/Pagination.vue
@@ -3,7 +3,7 @@
     class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-text-gray-500 tw-text-sm">
     <svg
       :class="{
-        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel >0
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel > 0
       }"
       class=" tw-rounded-md"
       width="20"
@@ -25,7 +25,7 @@
 
     <svg
       :class="{
-        'hover:tw-cursor-pointer hover:tw-bg-gray-100 ': pageModel >0
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100 ': pageModel > 0
       }"
       class="tw-rounded-md"
       width="20"
@@ -59,7 +59,7 @@
 
     <svg
       :class="{
-        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel < pages-1
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel < pages - 1
       }"
       class="tw-rounded-md"
       width="20"
@@ -81,7 +81,7 @@
 
     <svg
       :class="{
-        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel < pages-1
+        'hover:tw-cursor-pointer hover:tw-bg-gray-100': pageModel < pages - 1
       }"
       class="tw-rounded-md"
       width="20"
@@ -109,16 +109,15 @@
       <Dropdown
         v-model="selectedOption"
         class="tw-w-40"
-        :options="options"
+        :options="optionsModel"
         @change="onChangeOption">
         <template #input="{toogleShow}">
           <div
             class="tw-flex tw-full tw-items-center tw-space-x-2"
             @click.prevent.stop="toogleShow()">
             <span>
-              {{ `${selectedOption.value} per page` }}
+              {{ `${selectedOption.value} ${$t("per page")}` }}
             </span>
-
             <i
               class=" hover:tw-bg-gray-100 tw-rounded-md hover:tw-cursor-pointer tw-p-1 fas fa-chevron-down" />
           </div>
@@ -131,22 +130,6 @@
 import { defineComponent, ref, computed } from "vue";
 import { Dropdown } from "../../base/form";
 
-const optionsPerPage = [
-  {
-    value: 15,
-    label: "15 items",
-  },
-  {
-    value: 30,
-    label: "30 items",
-  },
-  {
-    value: 50,
-    label: "50 items",
-
-  },
-];
-
 export default defineComponent({
   components: {
     Dropdown,
@@ -164,10 +147,14 @@ export default defineComponent({
       type: Number,
       default: () => (0),
     },
+    options: {
+      type: Array,
+      default: () => [],
+    },
   },
   emits: ["perPage", "go"],
   setup(props, { emit }) {
-    const options = ref(optionsPerPage);
+    const optionsModel = ref(props.options);
     const totalModel = computed(() => props.total);
     const pageModel = ref(props.page);
 
@@ -210,7 +197,7 @@ export default defineComponent({
     };
 
     return {
-      options,
+      optionsModel,
       selectedOption,
       totalModel,
       pageModel,

From cc5e79ad876fbfa107087198110609f7d5fa8a8c Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Tue, 24 Sep 2024 10:16:40 -0400
Subject: [PATCH 6/6] FOUR-19237: Cases list Pagination

---
 .../casesDetail/components/RequestTable.vue    | 15 ++++++++++++---
 .../cases/casesDetail/components/TaskTable.vue | 15 ++++++++++++---
 .../cases/casesMain/CasesDataSection.vue       | 18 ------------------
 .../jscomposition/system/table/Pagination.vue  | 18 +++++++++++++++++-
 4 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
index 43af3690e6..797ed4606b 100644
--- a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
@@ -3,9 +3,11 @@
     <BaseTable
       id="request-table"
       :columns="columnsConfig"
-      :data="data"
-    />
-    <Pagination />
+      :data="data" />
+    <Pagination
+      :total="dataPagination.total"
+      :page="dataPagination.page"
+      :pages="dataPagination.pages" />
   </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
   setup() {
     const data = ref(null);
     const columnsConfig = ref(null);
+    const dataPagination = ref({
+      total: 153,
+      page: 0,
+      pages: 10,
+      perPage: 15,
+    });
 
     onMounted(async () => {
       data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
     return {
       data,
+      dataPagination,
       columnsConfig,
     };
   },
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
index ec56dc0555..223a686f37 100644
--- a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -3,9 +3,11 @@
     <BaseTable
       id="task-table"
       :columns="columnsConfig"
-      :data="data"
-    />
-    <Pagination />
+      :data="data" />
+    <Pagination
+      :total="dataPagination.total"
+      :page="dataPagination.page"
+      :pages="dataPagination.pages" />
   </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
   setup() {
     const data = ref(null);
     const columnsConfig = ref(null);
+    const dataPagination = ref({
+      total: 153,
+      page: 0,
+      pages: 10,
+      perPage: 15,
+    });
 
     onMounted(async () => {
       data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
     return {
       data,
+      dataPagination,
       columnsConfig,
     };
   },
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 4c1767be4a..77cea166ee 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -14,14 +14,12 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
-      :options="optionsPerPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
 </template>
 <script>
 import { defineComponent, ref, onMounted } from "vue";
-import { t } from "i18next";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
@@ -55,21 +53,6 @@ export default defineComponent({
       perPage: 15,
     });
 
-    const optionsPerPage = [
-      {
-        value: 15,
-        label: `15 ${t("items")}`,
-      },
-      {
-        value: 30,
-        label: `30 ${t("items")}`,
-      },
-      {
-        value: 50,
-        label: `50 ${t("items")}`,
-      },
-    ];
-
     const getData = () => getAllData({
       type: props.listId,
       page: dataPagination.value.page,
@@ -99,7 +82,6 @@ export default defineComponent({
       columnsConfig,
       data,
       badgesData,
-      optionsPerPage,
       onGo,
       onPerPage,
     };
diff --git a/resources/jscomposition/system/table/Pagination.vue b/resources/jscomposition/system/table/Pagination.vue
index 69a8bcedcf..9f00435935 100644
--- a/resources/jscomposition/system/table/Pagination.vue
+++ b/resources/jscomposition/system/table/Pagination.vue
@@ -128,6 +128,7 @@
 </template>
 <script>
 import { defineComponent, ref, computed } from "vue";
+import { t } from "i18next";
 import { Dropdown } from "../../base/form";
 
 export default defineComponent({
@@ -154,9 +155,24 @@ export default defineComponent({
   },
   emits: ["perPage", "go"],
   setup(props, { emit }) {
-    const optionsModel = ref(props.options);
     const totalModel = computed(() => props.total);
     const pageModel = ref(props.page);
+    const optionsPerPage = [
+      {
+        value: 15,
+        label: `15 ${t("items")}`,
+      },
+      {
+        value: 30,
+        label: `30 ${t("items")}`,
+      },
+      {
+        value: 50,
+        label: `50 ${t("items")}`,
+      },
+    ];
+
+    const optionsModel = ref(props.options.length ? props.options : optionsPerPage);
 
     const selectedOption = ref({
       value: 15,