FOUR-19237: Cases list "Pagination"

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,

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,14 @@ export default defineComponent({
       }
       return get(props.row, props.column?.field) || "";
     };
+
+    const getComponent = () => props.column.cellRenderer().component;
+
+    const getParams = () => props.column.cellRenderer().params || {};
+
     return {
+      getComponent,
+      getParams,
       getValue,
     };
   },

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";

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 {};
   },
 });

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

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,
     };
   },

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,
     };
   },