1+ use gloo_timers:: callback:: Timeout ;
12use thoth_api:: model:: affiliation:: AffiliationWithInstitution ;
23use thoth_api:: model:: institution:: Institution ;
34use thoth_errors:: ThothError ;
@@ -46,6 +47,7 @@ use crate::models::Dropdown;
4647use crate :: string:: CANCEL_BUTTON ;
4748use crate :: string:: EDIT_BUTTON ;
4849use crate :: string:: REMOVE_BUTTON ;
50+ use crate :: DEFAULT_DEBOUNCING_TIMEOUT ;
4951
5052use super :: ToElementValue ;
5153use super :: ToOption ;
@@ -62,6 +64,9 @@ pub struct AffiliationsFormComponent {
6264 delete_affiliation : PushDeleteAffiliation ,
6365 update_affiliation : PushUpdateAffiliation ,
6466 notification_bus : NotificationDispatcher ,
67+ search_callback : Callback < ( ) > ,
68+ search_query : String ,
69+ debounce_timeout : Option < Timeout > ,
6570}
6671
6772#[ derive( Default ) ]
@@ -77,7 +82,8 @@ pub enum Msg {
7782 SetInstitutionsFetchState ( FetchActionInstitutions ) ,
7883 GetInstitutions ,
7984 ToggleSearchResultDisplay ( bool ) ,
80- SearchInstitution ( String ) ,
85+ SearchQueryChanged ( String ) ,
86+ SearchInstitution ,
8187 SetAffiliationCreateState ( PushActionCreateAffiliation ) ,
8288 CreateAffiliation ,
8389 SetAffiliationUpdateState ( PushActionUpdateAffiliation ) ,
@@ -111,6 +117,8 @@ impl Component for AffiliationsFormComponent {
111117 let delete_affiliation = Default :: default ( ) ;
112118 let update_affiliation = Default :: default ( ) ;
113119 let notification_bus = NotificationBus :: dispatcher ( ) ;
120+ let search_callback = ctx. link ( ) . callback ( |_| Msg :: SearchInstitution ) ;
121+ let search_query: String = Default :: default ( ) ;
114122
115123 ctx. link ( ) . send_message ( Msg :: GetAffiliations ) ;
116124 ctx. link ( ) . send_message ( Msg :: GetInstitutions ) ;
@@ -127,6 +135,9 @@ impl Component for AffiliationsFormComponent {
127135 delete_affiliation,
128136 update_affiliation,
129137 notification_bus,
138+ search_callback,
139+ search_query,
140+ debounce_timeout : None ,
130141 }
131142 }
132143
@@ -138,7 +149,7 @@ impl Component for AffiliationsFormComponent {
138149 if show_form {
139150 let body = InstitutionsRequestBody {
140151 variables : SearchVariables {
141- limit : Some ( 9999 ) ,
152+ limit : Some ( 25 ) ,
142153 ..Default :: default ( )
143154 } ,
144155 ..Default :: default ( )
@@ -391,11 +402,26 @@ impl Component for AffiliationsFormComponent {
391402 self . show_results = value;
392403 true
393404 }
394- Msg :: SearchInstitution ( value) => {
405+ Msg :: SearchQueryChanged ( value) => {
406+ self . search_query = value;
407+ // cancel previous timeout
408+ self . debounce_timeout = self . debounce_timeout . take ( ) . and_then ( |timeout| {
409+ timeout. cancel ( ) ;
410+ None
411+ } ) ;
412+ // start new timeout
413+ let search_callback = self . search_callback . clone ( ) ;
414+ let timeout = Timeout :: new ( DEFAULT_DEBOUNCING_TIMEOUT , move || {
415+ search_callback. emit ( ( ) ) ;
416+ } ) ;
417+ self . debounce_timeout = Some ( timeout) ;
418+ false
419+ }
420+ Msg :: SearchInstitution => {
395421 let body = InstitutionsRequestBody {
396422 variables : SearchVariables {
397- filter : Some ( value ) ,
398- limit : Some ( 9999 ) ,
423+ filter : Some ( self . search_query . clone ( ) ) ,
424+ limit : Some ( 25 ) ,
399425 ..Default :: default ( )
400426 } ,
401427 ..Default :: default ( )
@@ -531,7 +557,7 @@ impl Component for AffiliationsFormComponent {
531557 placeholder="Search Institution"
532558 aria-haspopup="true"
533559 aria-controls="institutions-menu"
534- oninput={ ctx. link( ) . callback( |e: InputEvent | Msg :: SearchInstitution ( e. to_value( ) ) ) }
560+ oninput={ ctx. link( ) . callback( |e: InputEvent | Msg :: SearchQueryChanged ( e. to_value( ) ) ) }
535561 onfocus={ ctx. link( ) . callback( |_| Msg :: ToggleSearchResultDisplay ( true ) ) }
536562 onblur={ ctx. link( ) . callback( |_| Msg :: ToggleSearchResultDisplay ( false ) ) }
537563 />
0 commit comments