Recherche de données dans les colonnes d'un tableau avec pagination (partie avant)

introduction

Bon après-midi à tous. Mon nom est Alexander. Maintenant, je travaille chez Megafon en tant que développeur front-end. Les problèmes de recherche de données ont toujours été particulièrement complexes et souvent non standard dans les approches. Aujourd'hui, je voudrais me concentrer sur un problème intéressant que j'ai dû résoudre assez récemment lors du développement de la plateforme IoT. Cependant, une telle tâche peut également être rencontrée sur tout autre projet où il y a un chargement dynamique de données via l'API REST. Que ce soit en cours de chargement pendant la pagination, ou pendant le défilement, ou autre chose ...

Problématique

Il semblerait: quelle pourrait être la difficulté. Surtout quand il s'agit uniquement de l'avant? Après tout, tous les algorithmes de recherche sont mis en œuvre principalement sur le back-end. En fait, oui et non. Imaginons une feuille de calcul simple qui a une pagination de plusieurs pages et un filtre sur chaque colonne. Voir ci-dessous.

Dans cette plaque, le filtre par la colonne du numéro BS est ouvert. En termes simples: en entrant des caractères dans le champ de saisie du filtre, vous obtenez les options appropriées dans la liste déroulante. En cliquant sur l'un d'entre eux, vous filtrerez les données du tableau par cet élément.

Comment afficher une telle liste déroulante avec les options nécessaires? 

Options de solution

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.

, : , , . , , .

, , .