From efc4d1bd07854bd13537afdf747dfad6a0de98a0 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Sun, 11 Aug 2024 14:24:37 +0300
Subject: [PATCH] M: Improve cst table UI

---
 .../src/components/ui/TextContent.tsx         | 28 +++++++++++++++++++
 .../src/context/ConceptOptionsContext.tsx     |  2 +-
 .../RSFormPage/EditorRSList/TableRSList.tsx   |  8 ++++--
 rsconcept/frontend/src/utils/utils.ts         | 15 ++++++++++
 4 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 rsconcept/frontend/src/components/ui/TextContent.tsx

diff --git a/rsconcept/frontend/src/components/ui/TextContent.tsx b/rsconcept/frontend/src/components/ui/TextContent.tsx
new file mode 100644
index 00000000..61a9f433
--- /dev/null
+++ b/rsconcept/frontend/src/components/ui/TextContent.tsx
@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+
+import { globals } from '@/utils/constants';
+import { truncateText } from '@/utils/utils';
+
+import { CProps } from '../props';
+
+export interface TextContentProps extends CProps.Styling {
+  text: string;
+  maxLength?: number;
+}
+
+function TextContent({ className, text, maxLength, ...restProps }: TextContentProps) {
+  const truncated = maxLength ? truncateText(text, maxLength) : text;
+  const isTruncated = maxLength && text.length > maxLength;
+  return (
+    <div
+      className={clsx('text-xs text-pretty', className)}
+      data-tooltip-id={isTruncated ? globals.tooltip : undefined}
+      data-tooltip-content={isTruncated ? text : undefined}
+      {...restProps}
+    >
+      {truncated}
+    </div>
+  );
+}
+
+export default TextContent;
diff --git a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
index cef7672f..94c3b4d6 100644
--- a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
+++ b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
@@ -152,7 +152,7 @@ export const OptionsState = ({ children }: OptionsStateProps) => {
           id={`${globals.tooltip}`}
           layer='z-topmost'
           place='right-start'
-          className={clsx('mt-3 translate-y-1/2', 'max-w-[20rem]')}
+          className={clsx('mt-1 translate-y-1/2', 'max-w-[20rem]')}
         />
         {children}
       </>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx
index a665b236..9ee5b8be 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx
@@ -7,6 +7,7 @@ import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import { CProps } from '@/components/props';
 import DataTable, { createColumnHelper, RowSelectionState, VisibilityState } from '@/components/ui/DataTable';
 import NoData from '@/components/ui/NoData';
+import TextContent from '@/components/ui/TextContent';
 import TextURL from '@/components/ui/TextURL';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
@@ -30,6 +31,9 @@ const COLUMN_DEFINITION_HIDE_THRESHOLD = 1000;
 const COLUMN_TYPE_HIDE_THRESHOLD = 1200;
 const COLUMN_CONVENTION_HIDE_THRESHOLD = 1800;
 
+const COMMENT_MAX_SYMBOLS = 100;
+const DEFINITION_MAX_SYMBOLS = 120;
+
 const columnHelper = createColumnHelper<IConstituenta>();
 
 function TableRSList({
@@ -111,7 +115,7 @@ function TableRSList({
         size: 1000,
         minSize: 200,
         maxSize: 1000,
-        cell: props => <div className='text-xs text-pretty'>{props.getValue()}</div>
+        cell: props => <TextContent text={props.getValue()} maxLength={DEFINITION_MAX_SYMBOLS} />
       }),
       columnHelper.accessor('convention', {
         id: 'convention',
@@ -120,7 +124,7 @@ function TableRSList({
         minSize: 100,
         maxSize: 500,
         enableHiding: true,
-        cell: props => <div className='text-xs text-pretty'>{props.getValue()}</div>
+        cell: props => <TextContent text={props.getValue()} maxLength={COMMENT_MAX_SYMBOLS} />
       })
     ],
     [colors]
diff --git a/rsconcept/frontend/src/utils/utils.ts b/rsconcept/frontend/src/utils/utils.ts
index 52e2faf2..c16b3cd6 100644
--- a/rsconcept/frontend/src/utils/utils.ts
+++ b/rsconcept/frontend/src/utils/utils.ts
@@ -66,6 +66,21 @@ export function applyPattern(text: string, mapping: Record<string, string>, patt
   return output;
 }
 
+/**
+ * Truncate text to max symbols. Add ellipsis if truncated.
+ */
+export function truncateText(text: string, maxSymbols: number): string {
+  if (text.length <= maxSymbols) {
+    return text;
+  }
+  const trimmedText = text.slice(0, maxSymbols);
+  const lastSpaceIndex = trimmedText.lastIndexOf(' ');
+  if (lastSpaceIndex === -1) {
+    return trimmedText + '...';
+  }
+  return trimmedText.slice(0, lastSpaceIndex) + '...';
+}
+
 /**
  * Check if Axios response is html.
  */