[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
parent
1ead035f0e
commit
ad2e393e8c
|
|
@ -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,7 +163,22 @@
|
|||
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);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>s
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue