@argusoft/medplat-app-shell 1.0.6 → 1.0.7

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

@@ -0,0 +1,532 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Pagination, Paper, TablePagination, Box, Typography, Checkbox } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+
+import { styled } from '@mui/material/styles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { Stack } from '@mui/system';
+import CustomInfiniteScroll from '@/views/custom-components/CustomInfiniteScroll';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { useSelector } from 'react-redux';
+import CustomActionIcons from './CustomActionIcons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowDownShortWide, faArrowUpWideShort } from '@fortawesome/free-solid-svg-icons';
+
+import SafeHtml from '@/common/SafeHtml.jsx';
+
+import { getUseSkeleton } from '@/store/reducers/SkeletonReducer';
+const StyledTableContainer = styled(TableContainer)(() => ({
+  borderRadius: '12px',
+  '&::-webkit-scrollbar': {
+    width: '50px',
+  },
+  scrollbarWidth: 'thin',
+}));
+
+export const StyledTableCell = styled(TableCell)(() => ({
+  [`&.${tableCellClasses.head}`]: {
+    border: 'none',
+    minWidth: '80px',
+    fontSize: '0.875rem',
+    position: 'sticky',
+    padding: '12px',
+    top: 0,
+    zIndex: 2,
+    cursor: 'pointer', // Add cursor pointer to indicate clickability
+    whiteSpace: 'nowrap', // Prevents header text from wrapping
+    color: '#FFFFFF',
+    '&:first-of-type': {
+      borderTopLeftRadius: '12px',
+      borderBottomLeftRadius: '12px',
+    },
+    '&:last-of-type': {
+      borderTopRightRadius: '12px',
+      borderBottomRightRadius: '12px',
+    },
+  },
+  [`&.${tableCellClasses.body}`]: {
+    borderBottom: '.1px solid #ccc',
+    // borderRight: '.1px solid #ccc',
+    padding: '10px',
+    verticalAlign: 'top',
+    fontSize: '0.8125 rem',
+    maxWidth: 400,
+    height: 50,
+    wordWrap: 'break-word', // Ensures that the text will wrap onto the next line
+    whiteSpace: 'normal', // Allows text to wrap to the next line
+  },
+}));
+
+export const StyledTableRow = styled(TableRow)(() => {
+  const currentMode = useSelector((state) => state.theme.mode);
+  return {
+    '&:hover': {
+      // Excludes the first row (header)
+      backgroundColor: currentMode !== 'dark' ? '#D7E5EA' : '#3F5A66',
+      transform: 'translateY(-1px)', // Expands vertically while keeping width constant
+      transition: 'transform 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out',
+      boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1), 0px -4px 8px rgba(0, 0, 0, 0.1)', // Shadow on top & bottom
+    },
+    '&:not(:first-child):hover td': {
+      // Exclude header from scaling effect
+      transform: 'scaleY(1.05)', // Slightly increase content size
+      transition: 'transform 0.15s ',
+    },
+    '&:last-child td, &:last-child th': {
+      borderBottom: '.1px solid #ccc', // Add bottom border to the last row
+    },
+  };
+});
+
+const CustomizedTable = ({
+  columns,
+  tableData,
+  actions,
+  rowsPerPageInTable = 10,
+  displayPageSelect = false,
+  noPagination,
+  doNotShowTableHead,
+  fontSize,
+  loadMore,
+  hasMore,
+  handleSort,
+  sortOrder,
+  selectRows = false,
+  setSelectedRows,
+  selectedRows = [],
+  handleToggleStatus,
+  selectedRowsUnique = 'id',
+  disableHtml = false,
+  conditionCheckObj = {}, //contains objects to check for conditional actions. i.e. {editableLocationTypes, deletableLocationTypes}
+  dataTestId,
+  customHeight,
+  totalRows, // New prop for server-side total count
+  currentPage: propCurrentPage, // Controlled page from parent
+  onPageChange, // Callback for page changes
+  isLoading,
+  strip = true,
+  ...props
+}) => {
+  const useSkeleton = useSelector(getUseSkeleton);
+  if (selectRows) {
+    columns = [{ field: 'rowSelect' }, ...columns];
+  }
+  const { translate } = useTranslateProvider();
+  const [internalPage, setInternalPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageInTable);
+  const [rowsPerPageOptionsArray, setRowsPerPageOptionsArray] = useState(null);
+  const [rowData, setRowData] = useState(tableData);
+  const [selectAllChecked, setSelectAllChecked] = useState(
+    selectedRows?.length === rowData?.length && rowData?.length > 0
+  );
+  const conditionCheckObject = conditionCheckObj;
+  useEffect(() => {
+    setRowData(() => tableData);
+  }, [tableData]);
+  useEffect(() => {
+    setSelectAllChecked(selectedRows?.length === rowData?.length && rowData?.length > 0);
+  }, [selectedRows]);
+  const numOptions = 5;
+
+  const page = propCurrentPage !== undefined ? propCurrentPage : internalPage;
+  // Use controlled page if provided, else internal state
+  // setPage(Page);
+
+  // Handle page change
+  const handlePageChange = (newPage) => {
+    if (onPageChange) {
+      onPageChange(newPage); // Parent handles API call
+    } else {
+      setInternalPage(newPage); // Internal state for client-side
+    }
+  };
+  // console.log(tableData)
+
+  useEffect(() => {
+    if (rowsPerPageInTable && rowData) {
+      setInternalPage(0);
+      if (rowData.length <= rowsPerPageInTable) {
+        setRowsPerPageOptionsArray([rowsPerPageInTable]);
+      } else {
+        const increment = Math.ceil((rowData.length - rowsPerPageInTable) / (numOptions - 1));
+        const rowsPerPageOptions = [rowsPerPageInTable];
+        for (let i = 1; i < numOptions - 1; i++) {
+          const option = rowsPerPageInTable + i * increment;
+          rowsPerPageOptions.push(option);
+        }
+        rowsPerPageOptions.push(rowData.length);
+        setRowsPerPageOptionsArray(rowsPerPageOptions);
+      }
+    }
+  }, [rowsPerPageInTable, rowData]);
+
+  const getFieldValue = (obj, field) => {
+    const fieldParts = field.split('.');
+    let value = obj;
+    for (const part of fieldParts) {
+      value = value?.[part];
+      if (value === undefined) return '';
+    }
+    return value;
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setInternalPage(0);
+  };
+
+  const handleSelectAll = () => {
+    if (selectedRows.length === rowData.length) {
+      setSelectedRows([]);
+    } else {
+      setSelectedRows([...rowData]);
+    }
+  };
+
+  const handleRowSelect = (row) => {
+    setSelectedRows((prev) => {
+      const isIncluded = prev.find((item) => item[selectedRowsUnique] === row[selectedRowsUnique]);
+      if (isIncluded) {
+        return prev.filter((item) => item[selectedRowsUnique] !== row[selectedRowsUnique]);
+      } else {
+        return [...prev, row]; // Add row if not already selected
+      }
+    });
+  };
+
+  const renderTableBody = () => {
+    return isLoading && useSkeleton ? (
+      <div className="bg-gray-300 animate-pulse rounded-sm w-full h-100 "></div>
+    ) : (
+      <Table aria-label="Customized Table" data-testid={dataTestId} {...props}>
+        {!doNotShowTableHead && (
+          <TableHead>
+            <TableRow>
+              {columns?.map(
+                (column, index) =>
+                  !column.hide && (
+                    <StyledTableCell
+                      key={index + 1}
+                      align={column.align ? column.align : 'center'}
+                      onClick={() => column.sortable && handleSort(column.field)}
+                      sx={{
+                        backgroundColor: (theme) => theme.palette.custom?.tableHeader,
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: column.align ? column.align : 'center',
+                        }}
+                      >
+                        {selectRows && column.field === 'rowSelect' ? (
+                          <Checkbox color="primary" checked={selectAllChecked} onChange={() => handleSelectAll()} />
+                        ) : (
+                          <>
+                            <Typography variant="caption" className="font-bold" sx={{ fontSize: '0.875rem' }}>
+                              {translate(column?.label)}
+                            </Typography>
+                            {column.sortable &&
+                              (sortOrder === 'asc' ? (
+                                <FontAwesomeIcon className="ml-[5px]" icon={faArrowDownShortWide} />
+                              ) : (
+                                <FontAwesomeIcon className="ml-[5px] text-[1rem]" icon={faArrowUpWideShort} />
+                              ))}
+                          </>
+                        )}
+                      </Box>
+                    </StyledTableCell>
+                  )
+              )}
+            </TableRow>
+          </TableHead>
+        )}
+
+        <TableBody>
+          {rowData && rowData.length ? (
+            (() =>
+              rowsPerPage > 0 && !noPagination && !onPageChange
+                ? rowData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                : rowData)().map((row, rowIndex) => (
+                  <StyledTableRow
+                    key={rowIndex + 1}
+                    sx={(theme) => ({
+                      backgroundColor: strip && rowIndex % 2 !== 0 ? theme.palette.custom.gray4 : 'inherit',
+                    })}
+                  >
+                    {columns.map(
+                      (column, colIndex) =>
+                        !column.hide && (
+                          <React.Fragment key={`${column.field}-${colIndex}`}>
+                            <StyledTableCell
+                              className={`px-4 leading-7 ${fontSize ? `text-[${fontSize}] !important` : ''}`}
+                              style={{
+                                textAlign: column.align ? column.align : 'center',
+                                cursor: column.onClick ? 'pointer' : 'default',
+                                color: column.onClick ? 'blue' : 'inherit',
+                                textDecoration: column.onClick ? 'underline' : 'none',
+                              }}
+                              data-testid={`tableData-row-${rowIndex}-column-${colIndex}`}
+                              onClick={column.onClick ? () => column.onClick(row, rowIndex) : undefined}
+                            >
+                              {selectRows && column.field === 'rowSelect' && (
+                                <Checkbox
+                                  color="primary"
+                                  checked={
+                                    !!selectedRows.find((item) => item[selectedRowsUnique] === row[selectedRowsUnique])
+                                  }
+                                  onChange={() => handleRowSelect(row)}
+                                />
+                              )}
+
+                              {column.field === 'statusCheckbox' && (
+                                <Checkbox color="primary" checked={!!row.status} onChange={() => handleToggleStatus(row)} />
+                              )}
+                              {column.field === 'Actions' && actions && typeof actions === 'function' && (
+                                <div
+                                  style={{ display: 'flex', gap: '2px', alignItems: 'center', justifyContent: 'center' }}
+                                >
+                                  {actions(row).map(
+                                    (action, actionIndex) =>
+                                      (action?.condition ? action.condition(row, conditionCheckObject) : true) && (
+                                        <CustomActionIcons
+                                          disabled={action.disabled === true ? row.state !== 'ACTIVE' : false}
+                                          row={row}
+                                          key={actionIndex + 1}
+                                          icon={action.icon}
+                                          menuClick={action.menuClick}
+                                          menuItems={action.menuItems}
+                                          onClick={() => {
+                                            if (!(action.disabled === true ? row.state !== 'ACTIVE' : false)) {
+                                              action?.onClick(row, rowIndex);
+                                            }
+                                          }}
+                                        />
+                                      )
+                                  )}
+                                </div>
+                              )}
+
+                              {column.field === 'Actions' && actions && typeof actions !== 'function' && (
+                                <div
+                                  style={{ display: 'flex', gap: '2px', alignItems: 'center', justifyContent: 'center' }}
+                                >
+                                  {actions.map(
+                                    (action, actionIndex) =>
+                                      (action?.condition ? action.condition(row, conditionCheckObject) : true) && (
+                                        <CustomActionIcons
+                                          disabled={action.disabled === true ? row.state !== 'ACTIVE' : false}
+                                          row={row}
+                                          key={actionIndex + 1}
+                                          icon={action.icon}
+                                          menuClick={action.menuClick}
+                                          menuItems={action.menuItems}
+                                          onClick={() => {
+                                            if (!(action.disabled === true ? row.state !== 'ACTIVE' : false)) {
+                                              action?.onClick(row, rowIndex);
+                                            }
+                                          }}
+                                        />
+                                      )
+                                  )}
+                                </div>
+                              )}
+
+                              {column.render ? (
+                                column.render(row, rowIndex)
+                              ) : (
+                                <>
+                                  {(getFieldValue(row, column.field) || getFieldValue(row, column.field) === 0) &&
+                                    column.field !== 'Actions' &&
+                                    column.field !== 'rowSelect'
+                                    ? (() =>
+                                      !disableHtml ? (
+                                        <div
+                                          style={{
+                                            fontSize: '0.875rem',
+                                            fontWeight: column.isBold ? 'bold' : 'normal', // Apply bold styling
+                                          }}
+                                          dangerouslySetInnerHTML={{ __html: getFieldValue(row, column.field) }}
+                                        />
+                                      ) : (
+                                        <span style={{ fontWeight: column.isBold ? 'bold' : 'normal' }}>
+                                          {getFieldValue(row, column.field)}
+                                        </span>
+                                      ))()
+                                    : ''}
+                                  {!(getFieldValue(row, column.field) || getFieldValue(row, column.field) === 0) &&
+                                    column.field !== 'Actions' &&
+                                    column.field !== 'Sr. No.' &&
+                                    column.field !== 'rowSelect' &&
+                                    column.field !== 'statusCheckbox' &&
+                                    'NA'}
+                                </>
+                              )}
+                              {column.field === 'Sr. No.' && rowIndex + 1}
+                            </StyledTableCell>
+                          </React.Fragment>
+                        )
+                    )}
+                  </StyledTableRow>
+                ))
+          ) : (
+            <StyledTableRow>
+              <StyledTableCell
+                className={`px-4 leading-7 ${fontSize ? `text-[${fontSize}] !important` : ''} border-b-0 border-r-0`}
+              >
+                {isLoading && useSkeleton ? (
+                  <div className="animate-pulse bg-gray-300 w-full h-100"></div>
+                ) : (
+                  translate('No Records Available')
+                )}
+              </StyledTableCell>
+            </StyledTableRow>
+          )}
+        </TableBody>
+      </Table>
+    );
+  };
+
+  return (
+    <>
+      <StyledTableContainer
+        component={Paper}
+        style={{ position: 'relative', overflow: 'auto' }}
+        sx={{ maxHeight: customHeight ? `calc(100vh -  ${150 + customHeight}px)` : `calc(100vh - 150px)` }}
+      >
+        {noPagination ? (
+          <CustomInfiniteScroll
+            // pageStart={0}
+            loadMore={loadMore}
+            hasMore={hasMore}
+            renderTableBody={renderTableBody}
+            noPagination={noPagination}
+            customHeight={customHeight}
+            // loader={
+            //   <div
+            //     key={0}
+            //     style={{
+            //       display: 'flex',
+            //       justifyContent: 'center',
+            //       alignItems: 'center',
+            //       padding: '20px',
+            //     }}
+            //   >
+            //     <CircularProgress />
+            //   </div>
+            // }
+            useWindow={false}
+          />
+        ) : (
+          renderTableBody()
+        )}
+      </StyledTableContainer>
+      {!noPagination && !isLoading && (
+        <Grid container justifyContent={'space-between'} sx={{ width: '100%' }}>
+          <Grid>
+            {rowsPerPageOptionsArray && rowsPerPageOptionsArray.length > 0 && (
+              <TablePagination
+                component="div"
+                count={totalRows !== undefined ? totalRows : (() => (rowData ? rowData.length : 0))()}
+                page={page}
+                onPageChange={(event, newPage) => handlePageChange(newPage)}
+                sx={{
+                  '& .MuiTablePagination-actions': {
+                    visibility: 'hidden',
+                  },
+                  '& .MuiSelect-select': {
+                    padding: '6px 32px 6px 16px',
+                  },
+                  '& .MuiTablePagination-input, & .MuiTablePagination-selectLabel': {
+                    display: displayPageSelect ? undefined : 'none',
+                  },
+                }}
+                labelRowsPerPage="Items per page"
+                labelDisplayedRows={({ from, to, count }) => `${from}-${to} of ${count} items`}
+                rowsPerPage={rowsPerPage}
+                onRowsPerPageChange={handleChangeRowsPerPage}
+                rowsPerPageOptions={rowsPerPageOptionsArray}
+              />
+            )}
+          </Grid>
+          <Grid alignItems={'center'} display={'flex'}>
+            <Stack>
+              <Pagination
+                count={
+                  totalRows !== undefined
+                    ? Math.ceil(totalRows / rowsPerPage)
+                    : (() => (rowData ? Math.ceil(rowData.length / rowsPerPage) : 0))()
+                }
+                page={page + 1}
+                onChange={(event, newPage) => {
+                  handlePageChange(newPage - 1); // Convert to 0-based index
+                }}
+                showFirstButton
+                showLastButton
+                sx={{
+                  '& .MuiPaginationItem-root.Mui-selected': {
+                    backgroundColor: '#004C70',
+                    color: '#FFFFFF',
+                  },
+                  '& .MuiPaginationItem-root.Mui-selected:hover': {
+                    backgroundColor: '#678ea0',
+                  },
+                }}
+              />
+            </Stack>
+          </Grid>
+        </Grid>
+      )}
+
+      {!noPagination && isLoading && useSkeleton && (
+        <div className="w-full justify-between flex-wrap flex flex-row mt-4">
+          <div className="flex-wrap flex flex-row">
+            <div className="bg-gray-300 animate-pulse rounded-sm h-[36px] w-[100px] mr-2 mb-2"></div>
+          </div>
+
+          <div className="flex">
+            <div className="bg-gray-300 animate-pulse rounded-sm h-[32px] w-[180px] m-0.5"></div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+CustomizedTable.propTypes = {
+  columns: PropTypes.any,
+  tableData: PropTypes.any,
+  actions: PropTypes.any,
+  rowsPerPageInTable: PropTypes.any,
+  displayPageSelect: PropTypes.any,
+  noPagination: PropTypes.any,
+  doNotShowTableHead: PropTypes.any,
+  fontSize: PropTypes.any,
+  loadMore: PropTypes.any,
+  hasMore: PropTypes.any,
+  handleSort: PropTypes.any,
+  sortOrder: PropTypes.any,
+  conditionCheckObj: PropTypes.any,
+  disableHtml: PropTypes.any,
+  dataTestId: PropTypes.any,
+  customHeight: PropTypes.any,
+  totalRows: PropTypes.any,
+  currentPage: PropTypes.any,
+  onPageChange: PropTypes.any,
+  selectRows: PropTypes.any,
+  setSelectedRows: PropTypes.any,
+  selectedRows: PropTypes.any,
+  selectedRowsUnique: PropTypes.any,
+  isLoading: PropTypes.any,
+  handleToggleStatus: PropTypes.any,
+  strip: PropTypes.any,
+};
+
+export default CustomizedTable;