FOUR-2600 Vertical adaptation - Calculate the adaptative row calculation based on screen size

resources/jscomposition/base/table/BaseTable.vue

@@ -7,7 +7,9 @@
       :class="{
         'tw-table-fixed':getDefaultConfig(config).tableFixed
       }">
-      <thead class="tw-border-b tw-sticky tw-top-0 tw-z-[9] tw-bg-gray-50 tw-text-[#5C6066] tw-border-[#EBEDEF]">
+      <thead
+        ref="thead"
+        class="tw-border-b tw-sticky tw-top-0 tw-z-[9] tw-bg-gray-50 tw-text-[#5C6066] tw-border-[#EBEDEF]">
         <tr>
           <THeader
             v-for="(column, index) in columns"
@@ -25,7 +27,9 @@
       <transition
         name="fade-table"
         mode="out-in">
-        <tbody v-show="!placeholder">
+        <tbody
+          v-show="!placeholder"
+          ref="tbody">
           <template v-for="(row, indexRow) in data">
             <TRow :key="`row-${indexRow}`">
               <template #[`cell`]>
@@ -117,7 +121,8 @@ export default defineComponent({
     const slots = useSlots();
     const configRow = ref([]);
     const showContainer = ref(false);
-
+    const tbody = ref(null);
+    const thead = ref(null);
     const toogleContainer = (toogle, index) => {
       configRow.value.splice(index, 1, { showContainer: toogle });
     };
@@ -144,6 +149,8 @@ export default defineComponent({
       slots,
       checkContainerRow,
       checkEllipsisMenu,
+      tbody,
+      thead,
     };
   },
 });

resources/jscomposition/cases/casesMain/CasesDataSection.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="tw-w-full tw-space-y-3 tw-flex tw-flex-col tw-overflow-hidden tw-grow">
-    <CaseFilter @enter="onChangeSearch" />
+  <div class="tw-w-full tw-flex tw-flex-col tw-overflow-hidden tw-grow">
+    <CaseFilter
+      class="tw-pb-3"
+      @enter="onChangeSearch" />
     <BadgesSection
       v-model="badgesData"
+      class="tw-pb-3"
       @remove="onRemoveBadge">
       <template #endsection>
         <div
@@ -31,9 +34,11 @@
       </template>
     </FilterableTable>
     <Pagination
+      ref="paginator"
       :key="dataPagination.page"
       :class="{
-        ' tw-opacity-50':showPlaceholder
+        'tw-opacity-50':showPlaceholder,
+        'tw-pt-3':true
       }"
       :total="dataPagination.total"
       :page="dataPagination.page"
@@ -43,7 +48,7 @@
   </div>
 </template>
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, nextTick } from "vue";
 import { useRouter, useRoute } from "vue-router/composables";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
@@ -69,6 +74,7 @@ const data = ref();
 const search = ref();
 const filters = ref([]);
 const table = ref();
+const paginator = ref();
 const showPlaceholder = ref(false);
 const placeholderType = ref("loading");
 const route = useRoute();
@@ -184,16 +190,35 @@ const onResetTable = async () => {
   await hookGetData();
 };
 
-onMounted(async () => {
+const autoPagination = () => {
+  const heightTable = table.value.getHeightTBody();
+  const heightThead = table.value.getHeightThead();
+
+  const rowsNumber = heightTable / heightThead;
+
+  const pageSizes = [15, 30, 50];
+  const appropriateSize = pageSizes.find((size) => rowsNumber < size) || pageSizes[pageSizes.length - 1];
+
+  dataPagination.value.page = 1;
+  dataPagination.value.perPage = appropriateSize;
+  paginator.value.setPerPage(appropriateSize);
+};
+
+onMounted(() => {
+  columnsConfig.value = getColumns(props.listId);
+
   getFilters().then((response) => {
     const filtersSaved = formatFilterSaved(response.data.filters);
     filters.value = filtersSaved;
     badgesData.value = formatFilterBadges(filtersSaved, columnsConfig.value);
     table.value.addFilters(filtersSaved);
-    hookGetData();
-  });
 
-  columnsConfig.value = getColumns(props.listId);
+    // This section only for auto pagination
+    nextTick(() => {
+      autoPagination();
+      hookGetData();
+    });
+  });
 });
 </script>
 <style scoped>

resources/jscomposition/system/table/FilterableTable.vue

@@ -1,5 +1,6 @@
 <template>
   <BaseTable
+    ref="baseTable"
     :columns="columns"
     :data="data"
     :placeholder="placeholder"
@@ -51,6 +52,8 @@ const props = defineProps({
 
 const filters = ref([]);
 
+const baseTable = ref(null);
+
 const onChangeFilter = (column, val, index) => {
   // All filter with sortable are reset to null
   if (val.sortable) {
@@ -110,9 +113,15 @@ const hasFilter = (index, column) => {
   return filter || "";
 };
 
+const getHeightTBody = () => baseTable.value.$el.clientHeight - baseTable.value.$refs.thead.clientHeight;
+
+const getHeightThead = () => baseTable.value.$refs.thead.clientHeight;
+
 defineExpose({
   removeFilter,
   removeAllFilters,
   addFilters,
+  getHeightTBody,
+  getHeightThead,
 });
 </script>

resources/jscomposition/system/table/Pagination.vue

@@ -215,6 +215,17 @@ const onChangeOption = (e) => {
   emit("perPage", e.value);
 };
 
+const setPerPage = (value) => {
+  selectedOption.value = {
+    value,
+    label: `${value} ${t("Per page")}`,
+  };
+  emit("perPage", value);
+};
+
+defineExpose({
+  setPerPage,
+});
 </script>
 <style scoped>
 /* Chrome, Safari, Edge, Opera */