From b0db0a1f33e6205f4fc52eb60ee3a7374514ab2d Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Mon, 20 Jan 2025 23:14:08 -0400
Subject: [PATCH] FOUR-20598: Horizontal adaptation define a minimum width of
 the columns

---
 .../jscomposition/base/table/BaseTable.vue    |  5 ++---
 resources/jscomposition/base/table/TCell.vue  | 21 +++++++++++++++----
 .../jscomposition/base/table/THeader.vue      | 15 ++++++++++---
 .../table/composables/columnComposable.js     | 11 +++++++---
 .../casesDetail/components/TaskTable.vue      |  3 +--
 .../cases/casesDetail/config/columns.js       |  6 +++---
 .../cases/casesMain/CasesDataSection.vue      | 12 ++++-------
 .../cases/casesMain/config/columns.js         |  6 +++---
 .../system/table/FilterableTable.vue          | 10 ++++++---
 .../jscomposition/system/table/SortTable.vue  |  3 +--
 10 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index 8aafe78f43..224638f0ae 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -1,8 +1,7 @@
 <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-overflow-y-auto"
-  >
+      tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto tw-overflow-y-auto">
     <table
       class="tw-w-full tw-border-collapse"
       :class="{
@@ -86,7 +85,7 @@ import TCell from "./TCell.vue";
 import ContainerRow from "./ContainerRow.vue";
 
 const defaultConfig = () => ({
-  tableFixed: true,
+  tableFixed: false,
 });
 
 export default defineComponent({
diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
index ea1da74dc3..559ab8d5e7 100644
--- a/resources/jscomposition/base/table/TCell.vue
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -1,13 +1,15 @@
 <template>
   <td
-    class="tw-relative"
-    :style="{ width: `${column.width}px` }">
+    :style="{ width: width }"
+    class="tw-relative">
     <template v-if="!column.cellRenderer">
       <slot
         :columns="columns"
         :column="column"
         :row="row">
-        <div class="tw-p-3 tw-text-ellipsis tw-text-nowrap tw-overflow-hidden">
+        <div
+          :style="{ width: width }"
+          class="tw-p-3 tw-text-ellipsis tw-text-nowrap tw-overflow-hidden">
           {{ getValue() }}
         </div>
       </slot>
@@ -15,6 +17,7 @@
     <component
       :is="getComponent()"
       v-else
+      :style="{ width: width }"
       v-bind="getParams()"
       :columns="columns"
       :column="column"
@@ -24,7 +27,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, computed } from "vue";
 import { isFunction, get } from "lodash";
 
 export default defineComponent({
@@ -56,11 +59,21 @@ export default defineComponent({
 
     const collapseContainer = (value) => emit("toogleContainer", value);
 
+    const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
+
+    const width = computed(() => {
+      if (index.value === props.columns.length - 1) {
+        return "auto";
+      }
+      return `${props.column.width || 200}px`;
+    });
+
     return {
       getComponent,
       getParams,
       getValue,
       collapseContainer,
+      width,
     };
   },
 });
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
index b9aa24f079..302c434ab8 100644
--- a/resources/jscomposition/base/table/THeader.vue
+++ b/resources/jscomposition/base/table/THeader.vue
@@ -1,8 +1,9 @@
 <template>
   <th
     class="tw-relative thead-resizable"
-    :style="{ width: width + 'px' }">
+    :style="{ width: width }">
     <div
+      :style="{ width: width}"
       class="tw-py-4 tw-px-3 tw-text-left tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis">
       <slot>
         {{ $t(getValue()) }}
@@ -22,7 +23,7 @@
 
 <script>
 import { isFunction } from "lodash";
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed, ref } from "vue";
 import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
@@ -39,7 +40,14 @@ export default defineComponent({
   setup(props, { emit }) {
     const columnResize = columnResizeComposable(props.column);
 
-    const width = computed(() => props.column.width || 200);
+    const index = computed(() => props.columns.findIndex((column) => column.field === props.column.field));
+
+    const width = computed(() => {
+      if (index.value === props.columns.length - 1) {
+        return "auto";
+      }
+      return `${props.column.width || 200}px`;
+    });
 
     const getValue = () => {
       if (isFunction(props.column?.headerFormatter)) {
@@ -50,6 +58,7 @@ export default defineComponent({
     };
     return {
       getValue,
+      index,
       width,
       columnResize,
     };
diff --git a/resources/jscomposition/base/table/composables/columnComposable.js b/resources/jscomposition/base/table/composables/columnComposable.js
index dde1e46c5c..1daf93c845 100644
--- a/resources/jscomposition/base/table/composables/columnComposable.js
+++ b/resources/jscomposition/base/table/composables/columnComposable.js
@@ -12,13 +12,17 @@ export const columnResizeComposable = (column) => {
   const startWidth = ref(0);
   const isResizing = ref(false);
 
-  //Resize the column value
+  const minWidth = 144;
+
+  // Resize the column value
   const doResize = (event) => {
     if (isResizing.value) {
       const diff = event.pageX - startX.value;
-      const min = 30;
+      const min = minWidth;
       const currentWidth = Math.max(min, startWidth.value + diff);
 
+      console.log("doResize", currentWidth);
+
       column.width = currentWidth;
     }
   };
@@ -35,7 +39,8 @@ export const columnResizeComposable = (column) => {
   const startResize = (event, index) => {
     isResizing.value = true;
     startX.value = event.pageX;
-    startWidth.value = column.width || 200;
+    startWidth.value = column.width || minWidth;
+    console.log("startResize", startWidth.value);
 
     document.addEventListener("mousemove", doResize);
     document.addEventListener("mouseup", stopResize);
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
index ed56cb338f..600fa61b88 100644
--- a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -5,8 +5,7 @@
       :columns="columnsConfig"
       :data="data"
       :placeholder="showPlaceholder"
-      @changeFilter="onChangeFilter"
-    >
+      @changeFilter="onChangeFilter">
       <template #placeholder>
         <TablePlaceholder
           :placeholder="placeholderType"
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index d810a10999..ac095bf1dd 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -14,7 +14,7 @@ const taskNumberColumn = () => ({
   field: "id",
   header: "Tasks #",
   resizable: true,
-  width: 100,
+  width: 144,
   filter: true,
   formatter: (row, column, columns) => `#${row.id}`,
   cellRenderer: () => ({
@@ -68,7 +68,7 @@ const dueDateColumn = () => ({
   field: "due_at",
   header: "Due Date",
   resizable: true,
-  width: 200,
+  width: "auto",
   filter: true,
   formatter: (row, column, columns) => formatDate(row.due_at, "datetime"),
 });
@@ -127,7 +127,7 @@ const startedColumn = () => ({
   header: "Started",
   filter: true,
   resizable: true,
-  width: 200,
+  width: "auto",
   formatter: (row, column, columns) => formatDate(row.initiated_at, "datetime"),
 });
 
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 4cabeffa53..f95c9eb961 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -3,20 +3,17 @@
     <CaseFilter @enter="onChangeSearch" />
     <BadgesSection
       v-model="badgesData"
-      @remove="onRemoveBadge"
-    />
+      @remove="onRemoveBadge" />
     <FilterableTable
       ref="table"
       :columns="columnsConfig"
       :data="data"
       :placeholder="showPlaceholder"
-      @changeFilter="onChangeFilter"
-    >
+      @changeFilter="onChangeFilter">
       <template #placeholder>
         <TablePlaceholder
           :placeholder="placeholderType"
-          class="tw-grow"
-        />
+          class="tw-grow" />
       </template>
     </FilterableTable>
     <Pagination
@@ -28,8 +25,7 @@
       :page="dataPagination.page"
       :pages="dataPagination.pages"
       @perPage="onPerPage"
-      @go="onGo"
-    />
+      @go="onGo" />
   </div>
 </template>
 <script setup>
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index fa061a73d3..c10e440a3e 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -1,3 +1,4 @@
+import { t } from "i18next";
 import {
   CaseTitleCell,
   TruncatedOptionsCell,
@@ -7,7 +8,6 @@ import {
   TruncatedColumn,
 } from "../../../system/index";
 import { formatDate } from "../../../utils";
-import { t } from "i18next";
 
 export default {};
 /**
@@ -33,7 +33,7 @@ export const caseNumberColumn = () => ({
   field: "case_number",
   header: "Case #",
   resizable: true,
-  width: 100,
+  width: 144,
   filter: {
     dataType: "string",
     operators: ["=", ">", ">=", "in", "between"],
@@ -162,7 +162,7 @@ export const completedColumn = () => ({
   field: "completed_at",
   header: "Completed",
   resizable: true,
-  width: 200,
+  width: "auto",
   formatter: (row, column, columns) => formatDate(row.completed_at, "datetime"),
   filter: {
     dataType: "datetime",
diff --git a/resources/jscomposition/system/table/FilterableTable.vue b/resources/jscomposition/system/table/FilterableTable.vue
index 11b6d11a7d..18344f0181 100644
--- a/resources/jscomposition/system/table/FilterableTable.vue
+++ b/resources/jscomposition/system/table/FilterableTable.vue
@@ -3,14 +3,14 @@
     :columns="columns"
     :data="data"
     :placeholder="placeholder"
-    class="tw-grow"
-  >
+    :config="config"
+    class="tw-grow">
     <template
       v-for="(column, index) in columns"
       #[`theader-filter-${column.field}`]>
       <FilterColumn
-        :id="column.field"
         v-if="column.filter"
+        :id="column.field"
         :key="`default-${index}-${hasFilter(index,column)}`"
         :filter="column.filter"
         :value="getFilter(index, column)"
@@ -42,6 +42,10 @@ const props = defineProps({
     type: Boolean,
     default: () => false,
   },
+  config: {
+    type: Object,
+    default: () => {},
+  },
 });
 
 const filters = ref([]);
diff --git a/resources/jscomposition/system/table/SortTable.vue b/resources/jscomposition/system/table/SortTable.vue
index 4ab4b61f88..b6363e9e93 100644
--- a/resources/jscomposition/system/table/SortTable.vue
+++ b/resources/jscomposition/system/table/SortTable.vue
@@ -5,8 +5,7 @@
     :data="data"
     :config="config"
     :placeholder="placeholder"
-    class="tw-grow"
-  >
+    class="tw-grow">
     <template
       v-for="(column, index) in columns"
       #[`theader-filter-${column.field}`]>