@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/custom-components/CustomizedTable/VirtualizeTableBody.jsx

@@ -0,0 +1,295 @@
+import React, { useMemo } from 'react';
+import { TableVirtuoso } from 'react-virtuoso';
+import TableRow from '@mui/material/TableRow';
+import PropTypes from 'prop-types';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { Checkbox, useTheme, Box } from '@mui/material';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowDownShortWide, faArrowUpWideShort } from '@fortawesome/free-solid-svg-icons';
+export default function VirtualizedTableBody({
+  rows,
+  StyledTableCell,
+  renderCellContent,
+  visibleColumns,
+  tableHeight = 500,
+  rowSelectionConfig = {},
+  showAllBorders = false,
+  onTogglePin,
+  handleSort,
+  reorderedGroups = [],
+  colspanData = null,
+}) {
+  const theme = useTheme();
+  /** Proper header rendering with wrapped text */
+  const {
+    setSelectedRows,
+    selectedRows = [],
+    rowSelectionEnabled = false,
+    handleSelectAllFunc,
+    selectAllCheckedFunc,
+    // selectedRowsUnique = 'id',
+  } = rowSelectionConfig;
+  /** Proper header rendering with wrapped text */
+  const selectAllChecked = useMemo(() => {
+    if (selectAllCheckedFunc) return selectAllCheckedFunc();
+    return selectedRows?.length === rows?.length && rows?.length > 0;
+  }, [selectedRows, rows]);
+  const handleSelectAll = () => {
+    if (handleSelectAllFunc) {
+      handleSelectAllFunc();
+    } else {
+      if (selectedRows.length === rows.length) {
+        setSelectedRows([]);
+      } else {
+        setSelectedRows([...rows]);
+      }
+    }
+  };
+  const { translate } = useTranslateProvider();
+
+  const fixedHeaderContent = () => (
+    <>
+      {colspanData && reorderedGroups.length > 0 && (
+        <TableRow>
+          {reorderedGroups.map((group, i) => (
+            <th
+              key={i}
+              colSpan={group.span}
+              className={group.isSticky ? 'row1-sticky-cell' : ''}
+              data-first-child={group.firstChild}
+              style={{
+                textAlign: 'center',
+                padding: '8px',
+                fontSize: '0.8rem',
+                // Horizontal sticky only – vertical stickiness is handled by <thead>
+                position: group.isSticky ? 'sticky' : 'static',
+                left: group.isSticky ? `${group.stickyLeft}px` : 'auto',
+                zIndex: group.isSticky ? 20 : 10,
+                backgroundColor: theme.palette.custom.tableHeader,
+                borderLeft: group.label && group.label !== '' ? '1px solid #d1d1d1' : 'none',
+                borderRight: (group.label && group.label !== '') || group.isLastSticky ? '1px solid #d1d1d1' : 'none',
+                borderBottom: '1px solid #d1d1d1',
+                borderTop: '1px solid #d1d1d1',
+                boxSizing: 'border-box',
+              }}
+              dangerouslySetInnerHTML={{ __html: group.label || '' }}
+            />
+          ))}
+        </TableRow>
+      )}
+      <TableRow>
+        {visibleColumns.map((column, index) => {
+          const isSticky = column.isSticky === true || column.isSticky === 'true';
+          const cellField = column.field || `col-${column.originalIndex}`;
+          if (rowSelectionEnabled && column.field === 'rowSelect') {
+            return (
+              <StyledTableCell
+                key={column.field || index}
+                padding="checkbox"
+                align={column.align || 'center'}
+                className={isSticky ? 'row2-sticky-cell' : ''}
+                data-field={cellField}
+                style={{
+                  minWidth: column.minWidth || 60,
+                  whiteSpace: 'normal',
+                  wordBreak: 'break-word',
+                  // Horizontal sticky only for pinned columns
+                  position: isSticky ? 'sticky' : 'static',
+                  left: isSticky ? `${column.stickyLeft}px` : 'auto',
+                  zIndex: isSticky ? 15 : 'auto',
+                  backgroundColor: theme.palette.custom.tableHeader,
+                  borderLeft: showAllBorders || isSticky ? '1px solid #d1d1d1' : 'none',
+                  borderRight: showAllBorders || isSticky ? '1px solid #d1d1d1' : 'none',
+                  boxSizing: 'border-box',
+                }}
+              >
+                <Checkbox color="primary" checked={selectAllChecked} onChange={handleSelectAll} />
+              </StyledTableCell>
+            );
+          }
+
+          return (
+            !column.hide && (
+              <StyledTableCell
+                variant="head"
+                key={index}
+                align={column.align || 'center'}
+                className={isSticky ? 'row2-sticky-cell' : ''}
+                data-field={cellField}
+                style={{
+                  width: column.width,
+                  minWidth: column.minWidth,
+                  maxWidth: 'none',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  // Horizontal sticky only for pinned columns – <thead> handles vertical
+                  position: isSticky ? 'sticky' : 'static',
+                  left: isSticky ? `${column.stickyLeft}px` : 'auto',
+                  zIndex: isSticky ? 15 : 'auto',
+                  backgroundColor: theme.palette.custom.tableHeader,
+                  borderLeft: isSticky ? `1px solid ${theme.palette.divider}` : 'none',
+                  borderRight: isSticky ? `1px solid ${theme.palette.divider}` : 'none',
+                  fontSize: '0.75rem',
+                  padding: '10px 10px',
+                  cursor: 'pointer',
+                  borderBottom: `1px solid ${theme.palette.divider}`,
+                }}
+              >
+                <div
+                  style={{
+                    position: 'relative',
+                    zIndex: isSticky ? 9100 : 'inherit',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: column.align || 'center',
+                  }}
+                >
+                  {/* Clicking label text pins the column */}
+                  <span
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onTogglePin(e, column.field);
+                    }}
+                    style={{
+                      userSelect: 'none',
+                      cursor: 'pointer',
+                      fontWeight: column.isUserPinned ? 700 : 'inherit',
+                    }}
+                  >
+                    {translate(column?.label)}
+                  </span>
+                  {/* Sort icon triggers sort */}
+                  {column.sortable && (
+                    <span
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSort?.(column);
+                      }}
+                      style={{ marginLeft: '6px', cursor: 'pointer', display: 'flex', alignItems: 'center' }}
+                    >
+                      {column.sortOrder === 'asc' ? (
+                        <FontAwesomeIcon icon={faArrowUpWideShort} size="xs" />
+                      ) : (
+                        <FontAwesomeIcon icon={faArrowDownShortWide} size="xs" />
+                      )}
+                    </span>
+                  )}
+                </div>
+              </StyledTableCell>
+            )
+          );
+        })}
+      </TableRow>
+    </>
+  );
+
+  const itemContent = (index, row) =>
+    visibleColumns
+      .filter((col) => !col.hide)
+      .map((column, colIndex) => {
+        const isSticky = column.isSticky === true || column.isSticky === 'true';
+        return (
+          <StyledTableCell
+            key={colIndex}
+            align={column.align || 'center'}
+            style={{
+              width: column.width,
+              minWidth: column.minWidth,
+              maxWidth: 'none',
+              backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#fff',
+              position: isSticky ? 'sticky' : 'relative',
+              left: isSticky ? `${column.stickyLeft}px` : 'auto',
+              zIndex: isSticky ? 500 : 1, // Sync with main table
+              borderLeft: showAllBorders || isSticky ? '1px solid #d1d1d1' : 'none',
+              borderRight: showAllBorders || isSticky ? '1px solid #d1d1d1' : 'none',
+            }}
+          >
+            {renderCellContent(column, row, index)}
+          </StyledTableCell>
+        );
+      });
+
+  return (
+    <Box
+      sx={{
+        height: tableHeight,
+        width: '100%',
+        '& .virtuoso-grid-list': {
+          '&::-webkit-scrollbar': {
+            width: '8px !important',
+            height: '8px !important',
+          },
+          '&::-webkit-scrollbar-track': {
+            backgroundColor: `${theme.palette.mode === 'dark' ? '#1e1e1e' : '#f1f1f1'} !important`,
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: `${theme.palette.mode === 'dark' ? '#555' : '#ccc'} !important`,
+            borderRadius: '4px !important',
+          },
+          '&::-webkit-scrollbar-thumb:hover': {
+            backgroundColor: `${theme.palette.mode === 'dark' ? '#777' : '#999'} !important`,
+          },
+        },
+        // Also target the scroller div directly if it's not a grid list
+        '& [data-virtuoso-scroller="true"], & .data-virtuoso-scroller': {
+          '&::-webkit-scrollbar': {
+            width: '8px !important',
+            height: '8px !important',
+          },
+          '&::-webkit-scrollbar-track': {
+            backgroundColor: `${theme.palette.mode === 'dark' ? '#1e1e1e' : '#f1f1f1'} !important`,
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: `${theme.palette.mode === 'dark' ? '#555' : '#ccc'} !important`,
+            borderRadius: '4px !important',
+          },
+          '&::-webkit-scrollbar-thumb:hover': {
+            backgroundColor: `${theme.palette.mode === 'dark' ? '#777' : '#999'} !important`,
+          },
+        },
+        scrollbarColor: theme.palette.mode === 'dark' ? '#555 #1e1e1e !important' : '#ccc #f1f1f1 !important',
+        scrollbarWidth: 'thin !important',
+      }}
+    >
+      <TableVirtuoso
+        style={{ height: '100%' }}
+        data={rows}
+        components={{
+          Table: (props) => (
+            <table
+              {...props}
+              style={{
+                ...props.style,
+                width: 'max-content',
+                minWidth: '100%',
+                tableLayout: 'auto',
+                borderCollapse: 'separate',
+                borderSpacing: 0,
+              }}
+            />
+          ),
+          TableHead: React.forwardRef((props, ref) => (
+            <thead {...props} ref={ref} style={{ ...props.style, zIndex: 1098, position: 'sticky', top: 0 }} />
+          )),
+        }}
+        fixedHeaderContent={fixedHeaderContent}
+        itemContent={itemContent}
+      />
+    </Box>
+  );
+}
+
+VirtualizedTableBody.propTypes = {
+  rows: PropTypes.any,
+  StyledTableCell: PropTypes.any,
+  renderCellContent: PropTypes.any,
+  visibleColumns: PropTypes.any,
+  tableHeight: PropTypes.any,
+  rowSelectionConfig: PropTypes.any,
+  showAllBorders: PropTypes.bool,
+  onTogglePin: PropTypes.func,
+  handleSort: PropTypes.func,
+  reorderedGroups: PropTypes.array,
+  colspanData: PropTypes.any,
+};

package/src/views/custom-components/CustomizedTable/helper.jsx

@@ -0,0 +1,159 @@
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import { styled } from '@mui/material/styles';
+import TableRow from '@mui/material/TableRow';
+import React, { useEffect, useRef, useState } from 'react';
+import { Tooltip } from '@mui/material';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import SafeHtml from '@/common/SafeHtml.jsx';
+// Centralized default styles
+export const defaultStyles = {
+  table: (_theme) => ({
+    borderRadius: '3px 3px 0 0',
+    '&::-webkit-scrollbar': { width: '50px' },
+    scrollbarWidth: 'thin',
+    maxHeight: 'calc(100vh - 150px)',
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+  }),
+  header: (theme) => ({
+    border: 'none',
+    minWidth: '80px',
+    fontSize: '0.875rem',
+    position: 'sticky',
+    padding: '',
+    margin: 0,
+    top: 0,
+    zIndex: theme.zIndex.appBar - 2,
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.custom?.tableHeader || '#1E293B' : '#f8f9fa',
+    color: theme.palette.mode === 'dark' ? '#EDF2F7 !important' : '#e5e5e5ff !important',
+    // color: '#909FB7 !important',
+    borderBottom: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.1)' : '#cececeff'}`,
+    '&:last-child': {
+      borderRight: 'none',
+    },
+  }),
+  cell: (theme) => ({
+    borderBottom: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : '#ccc'}`,
+    padding: '5px 16px',
+    verticalAlign: 'top',
+    fontSize: '0.8125rem',
+    maxWidth: 400,
+    height: 50,
+    wordWrap: 'break-word',
+    whiteSpace: 'normal',
+    lineHeight: '28px',
+    color: theme.palette.mode === 'dark' ? '#EDF2F7 !important' : '',
+  }),
+  row: (theme, mode) => {
+    const hoverBg = mode !== 'dark' ? '#D7E5EA' : '#414141ff';
+    return {
+      '&:not(:first-of-type):hover td': { transform: 'scaleY(1)', transition: 'transform 0.15s' },
+      '&:last-child td, &:last-child th': { borderBottom: '.1px solid #ccc' },
+
+      '&:hover': {
+        backgroundColor: hoverBg,
+      },
+      '&:hover .sticky-cell': {
+        backgroundColor: `${hoverBg} !important`,
+      },
+    };
+  },
+  actionsContainer: {
+    display: 'flex',
+    gap: '10px',
+  },
+  headerTypography: {
+    fontSize: '0.875rem',
+    fontWeight: 'bold',
+  },
+};
+
+export const createStyledTableCell = (headerStyle = {}, cellStyle = {}) =>
+  styled(TableCell)(({ theme }) => ({
+    [`&.${tableCellClasses.head}`]: {
+      ...defaultStyles.header(theme),
+      ...(typeof headerStyle === 'function' ? headerStyle(theme) : headerStyle),
+    },
+    [`&.${tableCellClasses.body}`]: {
+      ...defaultStyles.cell(theme),
+      ...(typeof cellStyle === 'function' ? cellStyle(theme) : cellStyle),
+    },
+  }));
+export const createStyledTableRow = (rowStyle = {}) =>
+  styled(TableRow)(({ theme }) => ({
+    ...defaultStyles.row(
+      theme,
+      useSelector((state) => state?.theme?.mode)
+    ),
+    ...(typeof rowStyle === 'function' ? rowStyle(theme) : rowStyle),
+  }));
+export const createStyledTableContainer = (tableStyle = {}) => {
+  return styled(TableContainer)(({ theme, ...props }) => {
+    // Merge tableStyle from factory with potential props
+    const combinedStyle = {
+      ...(typeof tableStyle === 'function' ? tableStyle(theme) : tableStyle),
+      ...(typeof props.tableStyle === 'function' ? props.tableStyle(theme) : props.tableStyle),
+    };
+
+    let maxHeight = defaultStyles.table(theme).maxHeight;
+    if (combinedStyle && typeof combinedStyle === 'object' && 'maxHeight' in combinedStyle) {
+      if (typeof combinedStyle.maxHeight === 'number') {
+        maxHeight = `calc(100vh - ${150 + combinedStyle.maxHeight}px)`;
+      } else if (combinedStyle.maxHeight) {
+        maxHeight = combinedStyle.maxHeight;
+      }
+    }
+
+    return {
+      ...defaultStyles.table(theme),
+      ...combinedStyle,
+      maxHeight,
+    };
+  });
+};
+
+export const TooltipContent = ({ content, maxLines, isHtml, showFullContent = false }) => {
+  const normalizedContent = Array.isArray(content) ? content.join(', ') : content;
+
+  const contentRef = useRef(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      const { scrollHeight, clientHeight } = contentRef.current;
+      setIsTruncated(scrollHeight > clientHeight);
+    }
+  }, [normalizedContent]);
+
+  return (
+    <Tooltip
+      title={isHtml ? <div dangerouslySetInnerHTML={{ __html: normalizedContent }} /> : normalizedContent}
+      disableHoverListener={!isTruncated}
+      arrow
+    >
+      <div
+        ref={contentRef}
+        style={{
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          WebkitLineClamp: showFullContent ? 0 : maxLines,
+          overflow: 'hidden',
+          lineHeight: '1.5',
+        }}
+      >
+        {isHtml ? <div dangerouslySetInnerHTML={{ __html: normalizedContent }} /> : <span>{normalizedContent}</span>}
+      </div>
+    </Tooltip>
+  );
+};
+
+TooltipContent.propTypes = {
+  isHtml: PropTypes.any,
+  content: PropTypes.any,
+  maxLines: PropTypes.any,
+};