865

web/src/components/RealtimeTable/Cell/Cell/Cell.jsx

@@ -31,12 +31,13 @@ const LockBadge = styled.div`
 `;
 
 // Функция для подсветки текста
-const highlightText = (text, searchQuery) => {
-  if (!searchQuery || !text) return text;
-
-  const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  const regex = new RegExp(`(${escapedQuery})`, 'gi');
+const highlightText = (text, searchQueries) => {
+  if (!text) return text;
+  const cleanSearchQueries = searchQueries.filter(q => (q !== undefined && q !== ''));
+  if (cleanSearchQueries.length == 0) return text;
 
+  const escapedQueries = cleanSearchQueries.map(query => query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+  const regex = new RegExp(`(${ escapedQueries.join('|')})`, 'gi');
   const parts = text.split(regex);
 
   return parts.map((part, index) =>
@@ -89,7 +90,7 @@ const formatNumber = (value, asInteger = false) => {
   });
 };
 
-const Cell = React.memo(({ cell, row, column, onClick, globalFilter, backgroundColor, color, isEditable }) => {
+const Cell = React.memo(({ cell, row, column, onClick, globalFilter, columnFilter, backgroundColor, color, isEditable }) => {
   const { lockedCells } = useRealtime();
   const cellKey = `${row.id}_${column.id}`;
 
@@ -105,9 +106,10 @@ const Cell = React.memo(({ cell, row, column, onClick, globalFilter, backgroundC
   }
 
   const highlightedContent = useMemo(() => {
-    return highlightText(textValue, globalFilter);
+    return highlightText(textValue, [globalFilter, columnFilter]);
   }, [textValue, globalFilter]);
 
+
   // Базовые стили для заблокированной ячейки
   const lockedStyles = isLocked ? {
     border: '2px solid #e0e0e0',

web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -229,6 +229,12 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
           minHeight: '1px',
           maxHeight: '1px',
           visibility: 'hidden',
+          '& svg': {
+            height: '1px',
+            minHeight: '1px',
+            maxHeight: '1px',
+            visibility: 'hidden',
+          }
         },
       },
       muiTablePaperProps: getTablePaperStyles(),

web/src/components/RealtimeTable/TableHead/TableHead.jsx

@@ -313,10 +313,10 @@ const FilterCell = ({ column, table }) => {
             onChange={(e) => handleFilterChange(e.target.value)}
             style={{
               width: '100%',
-              padding: '4px 6px',
-              fontSize: '11px',
+              padding: '0.25rem 0.375rem', 
+              fontSize: '0.6875rem', 
               border: '1px solid #ddd',
-              borderRadius: '4px',
+              borderRadius: '0.25rem',
               backgroundColor: 'white',
             }}
           >
@@ -330,23 +330,30 @@ const FilterCell = ({ column, table }) => {
         );
 
       case 'range': {
-        // Для диапазона можно реализовать два поля
         const [min, max] = column.getFilterValue() || ['', ''];
         return (
-          <div style={{ display: 'flex', gap: '4px' }}>
+          <div style={{ display: 'flex', gap: '0.25rem' }}> {/* 4px */}
             <input
               type="number"
               placeholder="От"
               value={min}
               onChange={(e) => column.setFilterValue([e.target.value, max])}
-              style={{ width: '50%', padding: '4px', fontSize: '11px' }}
+              style={{
+                width: '50%',
+                padding: '0.25rem', 
+                fontSize: '0.6875rem' 
+              }}
             />
             <input
               type="number"
               placeholder="До"
               value={max}
               onChange={(e) => column.setFilterValue([min, e.target.value])}
-              style={{ width: '50%', padding: '4px', fontSize: '11px' }}
+              style={{
+                width: '50%',
+                padding: '0.25rem', 
+                fontSize: '0.6875rem' 
+              }}
             />
           </div>
         );
@@ -361,10 +368,10 @@ const FilterCell = ({ column, table }) => {
             placeholder="Поиск..."
             style={{
               width: '100%',
-              padding: '4px 6px',
-              fontSize: '11px',
+              padding: '0.25rem 0.375rem',
+              fontSize: '0.6875rem',
               border: '1px solid #ddd',
-              borderRadius: '4px',
+              borderRadius: '0.25rem', 
               boxSizing: 'border-box',
             }}
           />

web/src/components/RealtimeTable/tableColumns.jsx

@@ -112,6 +112,7 @@ export const getTableColumns = ({
           globalFilter={
             table.getState().globalFilter
           }
+          columnFilter={table.getState().columnFilters?.find(f => f.id === column.id)?.value}
           isEditable={row.original?.row_type === 'INPUT' || false}
           backgroundColor={columnColors[column.id]?.color_type?.[row.original?.row_type || row.row_type]}
           color={columnColors[column.id]?.color_type?.['COLOR']}