From ad2e393e8c5f2877ba902c4ece6d17145b9d2d72 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Fri, 30 Mar 2018 18:32:13 +0200 Subject: [PATCH] [data.ue] implemented 'formation' inclusive filter and vue template updated in [ue.view] + managed auto-unblur in template 'beforeMount' --- webpack/component/ue/view.vue | 31 +++++++++- webpack/data/ue.js | 113 ++++++++++++++++++++++++++++++++-- 2 files changed, 138 insertions(+), 6 deletions(-) diff --git a/webpack/component/ue/view.vue b/webpack/component/ue/view.vue index 812cf7b..843ae60 100644 --- a/webpack/component/ue/view.vue +++ b/webpack/component/ue/view.vue @@ -2,6 +2,20 @@
+
+ +
+ +
{{ gname }}
+ +
+ {{ data.name }} +
+ +
+ +
+
@@ -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); + + }); + + } } s \ No newline at end of file diff --git a/webpack/data/ue.js b/webpack/data/ue.js index 238efe3..7d9fb35 100644 --- a/webpack/data/ue.js +++ b/webpack/data/ue.js @@ -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);