Suchen von Daten in Spalten einer Tabelle mit Paginierung (vorderer Teil)

Einführung

Guten Abend allerseits. Ich heiße Alexander. Jetzt arbeite ich bei Megafon als Front-End-Entwickler. Datenabrufprobleme waren schon immer besonders komplex und in Ansätzen oft nicht standardisiert. Heute möchte ich mich auf ein interessantes Problem konzentrieren, das ich kürzlich bei der Entwicklung der IoT-Plattform lösen musste. Eine solche Aufgabe kann jedoch auch bei jedem anderen Projekt auftreten, bei dem dynamische Daten über die REST-API geladen werden. Ob es während der Paginierung oder beim Scrollen geladen wird oder etwas anderes ...

Problematisch

Es scheint: Was könnte die Schwierigkeit sein. Vor allem, wenn es nur um die Front geht? Schließlich sind alle Suchalgorithmen hauptsächlich im Backend implementiert. In der Tat ja und nein. Stellen wir uns eine einfache Tabelle vor, die eine Paginierung mehrerer Seiten und einen Filter für jede Spalte enthält. Siehe unten.

In dieser Platte ist der Filter nach der BS-Nummernspalte geöffnet. Mit einfachen Worten: Durch Eingabe von Zeichen in das Filtereingabefeld erhalten Sie die entsprechenden Optionen in der Dropdown-Liste. Wenn Sie auf eines davon klicken, filtern Sie die Daten in der Tabelle nach diesem Element.

Wie können Sie ein solches Dropdown mit den erforderlichen Optionen anzeigen? 

Lösungsoptionen

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.

, : , , . , , .

, , .