[js] override Element prototype with adding: Element.addClass('classname') + Element.remClass('classname') | [webpack.teacher.view] implemented filter show/hide

webpack/component/teacher/view.vue

@@ -47,7 +47,7 @@
 
 				<div class='fold' :data-show='gstore.filters[gname][0].visible ? 1 : 0' @click='gstore.filters[gname][0].visible = !gstore.filters[gname][0].visible'>{{ gname }}</div>
 
-				<span v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='data.active = !data.active' :title='data.code'>{{ data.name }}</span>
+				<span v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='data.active = !data.active; gstore.filter_handler();' :title='data.code'>{{ data.name }}</span>
 
 			</div>
 

webpack/data/common.js

@@ -1,6 +1,7 @@
 import {GlobalStore} from '../lib/gstore'
 import {APIClient}   from '../lib/api-client'
 import {PopUp}       from '../lib/pop-up'
+require('../lib/css-class-override')
 
 window.gstore = new GlobalStore();
 

webpack/data/teacher.js

@@ -17,7 +17,73 @@ api.call('GET professor/1/', { vh: true }, function(rs){
 
 
 
-/* (2) Manage Filters
+/* (2) Define filters' callback
+---------------------------------------------------------*/
+/* (1) Define global callback */
+gstore.add('filter_handler', function(){
+
+	var request = {};
+
+	/* (1) Get all filter types */
+	var filter_type = Object.keys(gstore.get.filters);
+
+	/* (2) Get all formated filter data */
+	for( ftype of filter_type ){
+
+		// 1. Initialize result filter
+		request[ftype] = [];
+		var fl         = gstore.get.filters[ftype].length;
+
+		// 2. Add only @code for @active entries
+		for( var f = 1 ; f < fl ; f++ ){
+
+			// 2.1. Store filter locally (for easier access)
+			var filter = gstore.get.filters[ftype][f];
+
+			// 2.2. If active -> add to list
+			( filter.code != null && filter.active ) && request[ftype].push(filter.code);
+
+		}
+
+	}
+
+
+	/* (3) Get professor id for matching filter */
+	api.call('POST professor/filter', request, function(rs){
+
+		// 1. Abort on error
+		if( rs.error !== 0 ) return console.log('No filter result found, error: '+rs.error);
+		console.log(rs);
+
+		// 2. Fetch professor elements
+		var local_ptr = gstore.get.professors;
+		var l         = gstore.get.professors.length;
+
+		// 3. For each element
+		for( var e = 0 ; e < l ; e++ ){
+
+			// 3.1. Show by default
+			var element = document.querySelector('section[data-id=\''+local_ptr[e].idProfesseur+'\']');
+			if( !element ) continue;
+
+			element.remClass('filter-hidden');
+
+			// 3.2. Only hide if does not match filter
+			if( rs.professors.indexOf(local_ptr[e].idProfesseur) <= -1 )
+				element.addClass('filter-hidden');
+
+		}
+
+
+	});
+
+
+
+});
+
+
+
+/* (3) Get Filters
 ---------------------------------------------------------*/
 /* (1) Define global filter */
 gstore.add('filters', {
@@ -35,7 +101,7 @@ api.call('GET formation', {}, function(rs){
 	// {2} Format UE filters //
 	for( var i = 0 ; i < rs.formations.length ; i++ )
 		gstore.get.filters.formations.push({
-			code:   rs.formations[i].id,
+			code:   rs.formations[i].idForm,
 			name:   rs.formations[i].labelForm,
 			active: false
 		});
@@ -63,7 +129,7 @@ api.call('GET ue', {}, function(rs){
 
 
 
-/* (3) Manage Instant Search (IS)
+/* (4) Manage Instant Search (IS)
 ---------------------------------------------------------*/
 /* (1) Define global timeout index */
 gstore.add('is_to', null);
@@ -93,19 +159,22 @@ gstore.add('is_handler', function(e){
 		// 2. For each element
 		for( var e = 0 ; e < l ; e++ ){
 
-			// 2.1. De-activate by default
+			// 2.1. Show by default
 			var element = document.querySelector('section[data-id=\''+local_ptr[e].idProfesseur+'\']');
 			if( !element ) continue;
 
-			element.className = 'hidden';
+			element.remClass('search-hidden');
 
 			// 2.2. Extract name components
 			var fname    = local_ptr[e].firstName.trim().toLowerCase();
 			var lname    = local_ptr[e].lastName.trim().toLowerCase();
+			var fullname = fname+' '+lname;
 
-			// 2.3. Check if matches
+			// 2.3. Hide if does not match
-			if( gstore.get.is_buf.length == 0 || fname.search(gstore.get.is_buf) + lname.search(gstore.get.is_buf) > -2 )
+			var match_offset = gstore.get.is_buf.length == 0 || fname.search(gstore.get.is_buf) + lname.search(gstore.get.is_buf) + fullname.search(gstore.get.is_buf);
-				element.className = '';
+
+			if( match_offset <= -3 )
+				element.addClass('search-hidden');
 
 		}
 

webpack/lib/css-class-override.js

@@ -0,0 +1,48 @@
+/* Ajout de classe pour un element (surcharge de l'ELEMENT natif)
+*
+* @className<String>				Classe a ajouter a l'element
+*
+*/
+Element.prototype.addClass = function(className){
+
+	/* [1] On transforme la classe actuelle en tableau
+	====================================================*/
+	var classArray = this.className.split(' ');
+
+	/* [2] On ajoute la classe si elle n'y est pas deja
+	====================================================*/
+	if( classArray.indexOf(className) > -1 ) return; // La classe y est deja
+
+	classArray.push(className);
+
+	/* [3] On reformatte tout
+	====================================================*/
+	this.className = classArray.join(' ').trim();
+
+}
+
+
+/* Suppression de classe pour un element (surcharge de l'ELEMENT natif)
+*
+* @className<String>				Classe a supprimer a l'element
+*
+*/
+Element.prototype.remClass = function(className){
+
+	/* [1] On transforme la classe actuelle en tableau
+	====================================================*/
+	var classArray = this.className.split(' ');
+
+	/* [2] On retire la classe si elle y est
+	====================================================*/
+	var index = classArray.indexOf(className);
+
+	if( index == -1 ) return; // La classe n'y est pas
+
+	classArray = classArray.slice(0,index).concat( classArray.slice(index+1) );
+
+	/* [3] On reformatte tout
+	====================================================*/
+	this.className = classArray.join(' ').trim();
+
+}

webpack/scss/container.scss

@@ -150,7 +150,8 @@
 		color: $primary-color;
 
 		// hidden mode
-		&.hidden{ display: none; }
+		&.search-hidden,
+		&.filter-hidden{ display: none; }
 
 		/* (2) Card generic title */
 		& > span.category{
@@ -431,7 +432,7 @@
 			display: none;
 			position: relative;
 
-			text-indent: 1.5em;
+			text-indent: 2em;
 			margin-bottom: 1em;
 
 			cursor: default;
@@ -448,6 +449,7 @@
 
 				display: block;
 				position: absolute;
+					margin-left: .5em;
 					width: calc( 1em - 2*2px );
 					height: calc( 1em - 2*2px );