[webpack.teacher.view] real-time search with 'instant-search' by: lastName + firstName

This commit is contained in:
xdrm-brackets 2018-03-04 18:15:48 +01:00
parent 405e74d8d8
commit 400709ca08
3 changed files with 64 additions and 2 deletions

View File

@ -2,14 +2,20 @@
<div id='CONTAINER'>
<input class='card instant-search neutral' type='text' placeholder='Recherche instantannée'>
<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
<div class='card container'>
<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
<section v-for='prof in gstore.professors' :data-id='prof.idProfesseur'>
<section v-for='prof in gstore.professors'
:data-visible='prof.visible'
:data-id='prof.idProfesseur'
:data-category='prof.idCat'
:data-lname='prof.lastName'
:data-fname='prof.firstName'>
<span class='category'>{{ prof.categorie }}</span>
<h1>{{ prof.firstName }} {{ prof.lastName }}</h1>

View File

@ -14,5 +14,58 @@ api.call('GET professor/1/', { vh: true }, function(rs){
console.log(rs);
gstore.get.professors = rs.professors;
});
/* (2) Manage Instant Search (IS)
---------------------------------------------------------*/
/* (1) Define global timeout index */
gstore.add('is_to', null);
/* (2) Define search value buffer */
gstore.add('is_buf', null);
/* (3) Define instant search function */
gstore.add('is_handler', function(e){
/* (1) Remove last timeout */
if( gstore.get.is_to != null )
clearTimeout(gstore.get.is_to);
/* (2) Store value in buffer */
gstore.get.is_buf = e.target.value.trim().toLowerCase();
/* (3) Launch timeout (wait 1s) before filtering */
gstore.get.is_to = setTimeout(function(){
// 1. Fetch elements
var local_ptr = gstore.get.professors;
var l = gstore.get.professors.length;
// 2. For each element
for( var e = 0 ; e < l ; e++ ){
// 2.1. De-activate by default
var element = document.querySelector('section[data-id=\''+local_ptr[e].idProfesseur+'\']');
if( !element ) continue;
element.className = 'hidden';
// 2.2. Extract name components
var fname = local_ptr[e].firstName.trim().toLowerCase();
var lname = local_ptr[e].lastName.trim().toLowerCase();
// 2.3. Check if matches
if( gstore.get.is_buf.length == 0 || fname.search(gstore.get.is_buf) + lname.search(gstore.get.is_buf) > -2 )
element.className = '';
}
}, 500);
});

View File

@ -149,6 +149,9 @@
color: $primary-color;
// hidden mode
&.hidden{ display: none; }
/* (2) Card generic title */
& > span.category{