[webpack.teacher.view] real-time search with 'instant-search' by: lastName + firstName
This commit is contained in:
parent
405e74d8d8
commit
400709ca08
|
@ -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>
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -149,6 +149,9 @@
|
|||
|
||||
color: $primary-color;
|
||||
|
||||
// hidden mode
|
||||
&.hidden{ display: none; }
|
||||
|
||||
/* (2) Card generic title */
|
||||
& > span.category{
|
||||
|
||||
|
|
Loading…
Reference in New Issue