From 741b16b32e6d93fb2c8bd28b8a2441d0794816e5 Mon Sep 17 00:00:00 2001
From: Wayne <wayne.lee@2fi-solutions.com.hk>
Date: Sat, 24 Aug 2024 22:01:09 +0900
Subject: [PATCH] Two line cell

---
 .../TimeLeaveModal/TimeLeaveInputTable.tsx    | 14 +++++++++++
 src/components/TimeLeaveModal/TwoLineCell.tsx | 24 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/components/TimeLeaveModal/TwoLineCell.tsx

diff --git a/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx b/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx
index 25e3c81..9e85bf2 100644
--- a/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx
+++ b/src/components/TimeLeaveModal/TimeLeaveInputTable.tsx
@@ -6,6 +6,7 @@ import {
   GridCellParams,
   GridColDef,
   GridEditInputCell,
+  GridRenderCellParams,
   GridRenderEditCellParams,
   GridRowId,
   GridRowModel,
@@ -45,6 +46,7 @@ import { roundToNearestQuarter } from "@/app/utils/manhourUtils";
 import FastTimeEntryModal from "../TimesheetTable/FastTimeEntryModal";
 import { LeaveType } from "@/app/api/timesheets";
 import DisabledEdit from "./DisabledEdit";
+import TwoLineCell from "./TwoLineCell";
 
 dayjs.extend(isBetween);
 
@@ -325,6 +327,9 @@ const TimeLeaveInputTable: React.FC<Props> = ({
             return leave?.name || "Unknown leave";
           }
         },
+        renderCell(params: GridRenderCellParams<TimeLeaveRow, number>) {
+          return <TwoLineCell>{params.formattedValue}</TwoLineCell>;
+        },
         renderEditCell(params: GridRenderEditCellParams<TimeLeaveRow, number>) {
           return (
             <ProjectSelect
@@ -455,6 +460,9 @@ const TimeLeaveInputTable: React.FC<Props> = ({
             );
           }
         },
+        renderCell(params: GridRenderCellParams<TimeLeaveRow, number>) {
+          return <TwoLineCell>{params.formattedValue}</TwoLineCell>;
+        },
       },
       {
         field: "taskId",
@@ -496,6 +504,9 @@ const TimeLeaveInputTable: React.FC<Props> = ({
           ).find((t) => t.id === params.value);
           return task ? task.name : t("None");
         },
+        renderCell(params: GridRenderCellParams<TimeLeaveRow, number>) {
+          return <TwoLineCell>{params.formattedValue}</TwoLineCell>;
+        },
       },
       {
         field: "inputHours",
@@ -578,6 +589,9 @@ const TimeLeaveInputTable: React.FC<Props> = ({
             content
           );
         },
+        renderCell(params: GridRenderCellParams<TimeLeaveRow>) {
+          return <TwoLineCell>{params.value}</TwoLineCell>;
+        },
       },
     ],
     [
diff --git a/src/components/TimeLeaveModal/TwoLineCell.tsx b/src/components/TimeLeaveModal/TwoLineCell.tsx
new file mode 100644
index 0000000..f32e56a
--- /dev/null
+++ b/src/components/TimeLeaveModal/TwoLineCell.tsx
@@ -0,0 +1,24 @@
+import { Box, Tooltip } from "@mui/material";
+import React from "react";
+
+const TwoLineCell: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <Tooltip title={children}>
+      <Box
+        sx={{
+          whiteSpace: "normal",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          lineHeight: "22px",
+        }}
+      >
+        {children}
+      </Box>
+    </Tooltip>
+  );
+};
+
+export default TwoLineCell;