Pesquisa de dados em colunas de uma tabela com paginação (parte frontal)

Introdução

Boa tarde a todos. Meu nome é Alexander. Agora trabalho no Megafon como desenvolvedor front-end. Os problemas de recuperação de dados sempre foram particularmente complexos e frequentemente não padronizados nas abordagens. Hoje, gostaria de me concentrar em um problema interessante que tive de resolver recentemente durante o desenvolvimento da plataforma IoT. No entanto, essa tarefa também pode ser encontrada em qualquer outro projeto em que haja um carregamento de dados dinâmico por meio da API REST. Quer esteja carregando durante a paginação, ou durante a rolagem, ou outra coisa ...

Problemático

Ao que parece: qual poderia ser a dificuldade. Especialmente quando se trata apenas da frente? Afinal, todos os algoritmos de pesquisa são implementados principalmente no back-end. Na verdade, sim e não. Vamos imaginar uma planilha simples com paginação de várias páginas e um filtro em cada coluna. Ver abaixo.

Nesta placa, o filtro pela coluna do número BS está aberto. Em palavras simples: ao inserir qualquer caractere no campo de entrada do filtro, você obtém as opções apropriadas no menu suspenso. Ao clicar em qualquer um deles, você filtrará os dados da tabela por este elemento.

Como você pode exibir esse menu suspenso com as opções necessárias? 

Opções de solução

1. filter includes ( ) . , , . . .

   
   
   
   
   

2. 1- , . , 0. 1 ? .

   
   
   
   
   

3. , . “” , .

   
   
   
   
   

   . . : , , .

   
   
   
   
   

1. , , . config.

   
   
   
   
   

2. . , debounce.

   
   
   
   
   

3. / loader

   
   
   
   
   

4. 
   
   
   
   

, JS React , , JS. . 

, . , ( ) . 2 .

:

{
  id: 'address',
  title: ' ',
  filter: filters.address,
  checked: true,
  minWidth: 160
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

address: {
  type: 'includes',
  name: 'addrFilter',
  options: {
    default: {
      values: 'objectsList',
      fetchFunc: 'fetchObjectsList',
      calcFunc: 'address'
    }
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

- . .

options . :

• fetchFunc - thunk ,

  
  
  
  
  

• values - ,

  
  
  
  
  

• calcFunc -

  
  
  
  
  

calcFun. , . , . : = + + …

. :

//object includes calc functions
const calculatedData = useMemo(() => (
  {
    default: (values) =>
    {
      //default calculate
    },
    address: (values) =>
    {
      //calculate with generateAddress function, for example
    },
    ...
	}
), [...]);

//using this object (calcFunc from config):
const data = calculatedData[calcFunc || 'default'](values)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. . , - . :

// debounce function
const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};

//debounceFetch function
const debounceFetch = debounce(async (func, args) => 
  typeof func === 'function' && (await func(args)), 500);

//sending request
useEffect(() => {
  debounceFetch(actions[fetchFunc], { 
    filter: { [filterName]: filterValue || null } 
  });
}, [filter]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. - , , . , , , isLoading. , isLoadingObjects. selector kea, = true , isLoading, true.

kea, redux - - , . - . kea =)

anyLoading===true, .

. , , calcFunc .

, , useFiltersOptions.

, : , , . , , .

, , .