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

webpack/component/ue/view.vue

@@ -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);
+
+			});
+
 		}
     }
 

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);