[data.ue] implemented 'formation' inclusive filter and vue template updated in [ue.view] + managed auto-unblur in template 'beforeMount'

This commit is contained in:
xdrm-brackets 2018-03-30 18:32:13 +02:00
parent 1ead035f0e
commit ad2e393e8c
2 changed files with 138 additions and 6 deletions

View File

@ -2,6 +2,20 @@
<div id='CONTAINER' class='card'>
<div class='card filter'>
<div v-for='(filter_grp, gname) in gstore.filters' :title='gname' data-unblur-filter>
<div class='fold-toggle' :data-show='gstore.filters[gname][0].visible?1:0' @click='gstore.show_fgroup(gname)' :data-count='gstore.filters[gname][0].active.length' data-unblur-filter>{{ gname }}</div>
<div class='fold' data-unblur-filter>
<span v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='gstore.toggle_filter(gname, i); gstore.filter_handler(gname);' :title='data.code' data-unblur-filter>{{ data.name }}</span>
</div>
</div>
</div>
<div class='card container' :data-anim-outgoing='gstore.nav_anim.in?1:0'>
<input data-anim='0' class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='ue_view_instant_search'>
@ -149,6 +163,21 @@
name: 'CONTAINER_VIEW',
data(){
return { gstore: gstore.get }
},
beforeMount(){
// set onblur to hide filter
window.onblur.link('ue.filter', (e) => {
// ignore [data-unblur-filter] elements
if( e.target.getAttribute('data-unblur-filter') !== null )
return;
// else: hide
gstore.get.show_fgroup(-1);
});
}
}

View File

@ -1,9 +1,14 @@
/* (1) Load formations
---------------------------------------------------------*/
/* (1) Initialize list */
/* (1) Define global filter */
gstore.add('filters', {
formations: [{ visible: false, active: [] }]
});
/* (2) Initialize list */
gstore.add('formations', []);
/* (2) Get Formations */
/* (3) Get Formations */
api.call('GET formation', {}, function(rs){
// {1} If error -> abort //
@ -14,9 +19,17 @@ api.call('GET formation', {}, function(rs){
for( var i = 0 ; i < rs.formations.length ; i++ )
gstore.get.formations.push( rs.formations[i] );
// {3} Format formation list for filters
for( var i = 0 ; i < rs.formations.length ; i++ )
gstore.get.filters.formations.push({
code: rs.formations[i].idForm,
name: rs.formations[i].labelForm,
active: false
});
/* (3) Get Formation label */
});
/* (4) Get Formation label */
gstore.add('form_by_id', function(form_id){
/* (1) Abort if wrong form_id */
@ -37,7 +50,6 @@ gstore.add('form_by_id', function(form_id){
/* (2) Load ues
---------------------------------------------------------*/
/* (1) Initialize list */
@ -59,10 +71,101 @@ api.call('GET ue/', { vh: true }, function(rs){
/* (3) Define filters' callback
---------------------------------------------------------*/
/* (1) Define global callback */
gstore.add('filter_handler', function(){
let filter_ids = [];
// 1. Get each formation ID
for( let form of gstore.get.filters.formations ){
// 1.1. Ignore if 'code' not found
if( form.code === null )
continue;
// 1.2. If active -> add to list
( form.code != null && form.active ) && filter_ids.push(form.code);
}
// 3. For UE element
main_loop: for( let ue of gstore.get.ues ){
// 3.1. Show by default
let element = document.querySelector('section[data-id=\''+ue.code+'\']');
if( !(element instanceof Element) )
continue;
element.remClass('filter-hidden');
// 3.2. If no filter -> let all visible
if( filter_ids.length <= 0 )
continue;
// 3.3. If at least one matching formatiom id -> let visible
for( let fid of filter_ids )
if( ue.formations.indexOf(fid) > -1 )
continue main_loop;
// XXXXX. If did not match -> hide
element.addClass('filter-hidden');
}
});
/* (3) Get Filters
---------------------------------------------------------*/
/* (2) Define filter group show/hide */
gstore.add('show_fgroup', function(gname){
var opened = gstore.get.filters[gname] != null && gstore.get.filters[gname][0].visible;
// {1} hide all by default//
for( var f in gstore.get.filters )
gstore.get.filters[f][0].visible = false;
// {2} If wrong @gname -> abort //
if( gstore.get.filters[gname] == null )
return;
// {3} Show selected filter //
gstore.get.filters[gname][0].visible = !opened;
});
/* (3) Define filter item toggle */
gstore.add('toggle_filter', function(gname, i){
// {1} If wrong @gname -> abort //
if( gstore.get.filters[gname] == null )
return;
// {2} If wrong @i -> abort //
if( gstore.get.filters[gname][i] == null )
return;
// {3} Toggle filter activation //
gstore.get.filters[gname][i].active = !gstore.get.filters[gname][i].active;
// {4} Update active table //
gstore.get.filters[gname][0].active.splice(0);
for( var f = 1 ; f < gstore.get.filters[gname].length ; f++ )
if( gstore.get.filters[gname][f].active )
gstore.get.filters[gname][0].active.push(f);
});
/* (2) Manage Instant Search (IS)
/* (4) Manage Instant Search (IS)
---------------------------------------------------------*/
/* (1) Define global timeout index */
gstore.add('is_to', null);