[webpack.ue.view] no more need for $router (it is in Gstore) for navigation funcs [webpack.ue.manage] eased 'rem_form' (by index no more ID) + fetch professors / created layout for changing professor for a cours|TD|TP

webpack/component/ue/manage.vue

@@ -9,8 +9,8 @@
 			<!-- FILTERS -->
 			<section class='filter'>
 
-				<div>Type</div>
 				<div>enseignant</div>
+				<div class='null'></div>
 				<div>volume horaire</div>
 				<div>formations</div>
 
@@ -21,13 +21,16 @@
 				v-for='(c,i) in gstore.manage.cours'
 				:data-id='c.idCours'>
 
+				<select v-model='c.idProf' @change='upd_prof(i)'>
+					<option value='-1' v-show='c.idProf!=-1'>Aucun enseignant affecté</option>
+					<option v-for='p in gstore.manage.prof' :value='p.idProfesseur' v-show='p.idProfesseur!=c.idProf'>{{ `${p.firstName} ${p.lastName}` }}</option>
+				</select>
 				<div>Cours</div>
-				<div :data-prof='c.idProf'>{{ c.idProf ? `${c.firstName} ${c.lastName}` : 'Aucun enseignant affecté' }}</div>
 				<div>{{ c.volume }}</div>
 				<div class='taglist'>
 					<div v-for='f in c.formations' data-action>
 					 	<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
-						<span data-remove @click='gstore.rem_form(0, c.idCours, f)'></span>
+						<span data-remove @click='gstore.rem_form(0, i, f)'></span>
 					</div>
 
 					<div data-action>
@@ -52,13 +55,16 @@
 				data-anim-incoming='1'
 				:data-anim-bounce='gstore.nav_anim.out?1:0'>
 
+				<select v-model='td.idProf' @change='upd_prof(i)'>
+					<option value='-1' v-show='td.idProf!=-1'>Aucun enseignant affecté</option>
+					<option v-for='p in gstore.manage.prof' :value='p.idProfesseur' v-show='p.idProfesseur!=td.idProf'>{{ `${p.firstName} ${p.lastName}` }}</option>
+				</select>
 				<div>TD</div>
-				<div :data-prof='td.idProf'>{{ td.idProf ? `${td.firstName} ${td.lastName}` : 'Aucun enseignant affecté' }}</div>
 				<div>{{ td.volume }}</div>
 				<div class='taglist'>
 					<div v-for='f in td.formations' data-action>
 					 	<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
-						<span data-remove @click='gstore.rem_form(1, td.idTD, f)'></span>
+						<span data-remove @click='gstore.rem_form(1, i, f)'></span>
 					</div>
 
 					<div data-action>
@@ -83,13 +89,16 @@
 				data-anim-incoming='1'
 				:data-anim-bounce='gstore.nav_anim.out?1:0'>
 
+				<select v-model='tp.idProf' @change='upd_prof(i)'>
+					<option value='-1' v-show='tp.idProf!=-1'>Aucun enseignant affecté</option>
+					<option v-for='p in gstore.manage.prof' :value='p.idProfesseur' v-show='p.idProfesseur!=tp.idProf'>{{ `${p.firstName} ${p.lastName}` }}</option>
+				</select>
 				<div>TP</div>
-				<div :data-prof='tp.idProf'>{{ tp.idProf ? `${tp.firstName} ${tp.lastName}` : 'Aucun enseignant affecté' }}</div>
 				<div>{{ tp.volume }}</div>
 				<div class='taglist'>
 					<div v-for='f in tp.formations' data-action>
 					 	<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
-						<span data-remove @click='gstore.rem_form(2, tp.idTP, f)'></span>
+						<span data-remove @click='gstore.rem_form(2, i, f)'></span>
 					</div>
 
 					<div data-action>
@@ -123,7 +132,14 @@
 			return { gstore: gstore.get }
 		},
 		beforeMount(){
-			gstore.get.manage_load(this.$route.params.code, this.$router);
+
+			/* (1) Try to load data */
+			gstore.get.load_ue_groups(this.$route.params.code, 3).catch( (err) => { // try at max 3 times (200ms each) for UE to be loaded
+
+				/* (2) On error -> go to 'view' page */
+				gstore.get.router.push('/ue/view/');
+
+			});
 		}
 	}
 

webpack/component/ue/view.vue

@@ -105,7 +105,7 @@
 
 				<!-- if VIEW MODE -->
 				<div class='footer' v-show='gstore.edit_i!=pi'>
-					<button class='neutral' @click='gstore.nav_in($router, pi)'>Configurer</button>
+					<button class='neutral' @click='gstore.nav_in(pi)'>Configurer</button>
 				</div>
 				<!-- if EDIT MODE -->
 				<div class='footer' v-show='gstore.edit_i==pi'>

webpack/data/ue.js

@@ -543,6 +543,7 @@ gstore.add('manage', {
 	cours: [],
 	td:    [],
 	tp:    [],
+	prof:  []
 });
 
 
@@ -578,16 +579,18 @@ gstore.add('load_ue_groups', function(code, recur=0){
 
 		api.call(`GET ue/cours/${code}`, {}, function(rs){
 
+			// erase data
+			gstore.get.manage.cours.splice(0);
+
 			// reject on error
-			if( rs.error !== 0 || !(rs['groups'] instanceof Array) ){
+			if( rs.error !== 0 || !(rs['groups'] instanceof Array) )
-				gstore.get.manage.cours.splice();
+				return reject({ label: 'Cours', code: rs.error});
-				reject({ label: 'Cours', code: rs.error});
-			}
 
 			// store data
 			// for each field add a 'add_form' for instant-adding formations afterwards
 			for( var group of rs.groups ){
 				group.add_form = '-';
+				( group.idProf == null ) && ( group.idProf = -1 );
 				gstore.get.manage.cours.push( group );
 			}
 
@@ -603,16 +606,18 @@ gstore.add('load_ue_groups', function(code, recur=0){
 
 			api.call(`GET ue/td/${code}`, {}, function(rs){
 
+				// erase data
+				gstore.get.manage.td.splice(0);
+
 				// reject on error
-				if( rs.error !== 0 || !(rs['groups'] instanceof Array) ){
+				if( rs.error !== 0 || !(rs['groups'] instanceof Array) )
-					gstore.get.manage.td.splice();
+					return reject({ label: 'TD', code: rs.error});
-					reject({ label: 'TD', code: rs.error});
-				}
 
 				// store data
 				// for each field add a 'add_form' for instant-adding formations afterwards
 				for( var group of rs.groups ){
 					group.add_form = '-';
+					( group.idProf == null ) && ( group.idProf = -1 );
 					gstore.get.manage.td.push( group );
 				}
 
@@ -630,16 +635,18 @@ gstore.add('load_ue_groups', function(code, recur=0){
 
 			api.call(`GET ue/tp/${code}`, {}, function(rs){
 
+				// erase data
+				gstore.get.manage.tp.splice(0);
+
 				// reject on error
-				if( rs.error !== 0 || !(rs['groups'] instanceof Array) ){
+				if( rs.error !== 0 || !(rs['groups'] instanceof Array) )
-					gstore.get.manage.tp.splice();
+					return reject({ label: 'TP', code: rs.error});
-					reject({ label: 'TP', code: rs.error});
-				}
 
 				// store data
 				// for each field add a 'add_form' for instant-adding formations afterwards
 				for( var group of rs.groups ){
 					group.add_form = '-';
+					( group.idProf == null ) && ( group.idProf = -1 );
 					gstore.get.manage.tp.push( group );
 				}
 
@@ -650,6 +657,35 @@ gstore.add('load_ue_groups', function(code, recur=0){
 
 		});
 
+	/* (6) Ask for professors data */
+	}).then( () => {
+
+		return new Promise( (resolve, reject) => {
+
+			// 1. if already downloaded
+			if( gstore.get.manage.prof.length > 0 )
+				return resolve();
+
+			// 2. Else fetch from database
+			api.call(`GET professor/0`, {}, function(rs){
+
+				// erase data
+				gstore.get.manage.prof.splice(0);
+
+				// reject on error
+				if( rs.error !== 0 || !(rs['professors'] instanceof Array) )
+					return reject({ label: 'Professeurs', code: rs.error});
+
+				// store data
+				gstore.get.manage.prof = rs.professors;
+
+				// resolve data on success
+				resolve();
+
+			});
+
+		});
+
 	});
 
 })
@@ -668,35 +704,29 @@ gstore.add('nav_anim', {
 });
 
 /* (2) Manage nav in */
-gstore.add('nav_in', function($router, ue_i){
+gstore.add('nav_in', function(ue_i){
 
 	/* (1) Abort if wrong ue_i */
 	if( ue_i == null || isNaN(ue_i) || gstore.get.ues[ue_i] == null)
 		return;
 
-	/* (2) Try to get data (Promise) */
-	gstore.get.load_ue_groups(gstore.get.ues[ue_i].code).then( () => {
-
 	/* 1. Start animation */
 	gstore.get.nav_anim.in = true;
 
 	setTimeout( () => {
 
 		/* 2. Load page */
-			$router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`);
+		gstore.get.router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`);
 
 		/* 3. Stop animation */
 		gstore.get.nav_anim.in = false;
 
 	}, 500 );
 
-	}).catch( (err) => console.log(`[label] ${err.label} [error] ${err.code}`) );
-
-
 });
 
 /* (3) Manage nav out */
-gstore.add('nav_out', function($router){
+gstore.add('nav_out', function(){
 
 	/* 1. Start animation */
 	gstore.get.nav_anim.out = true;
@@ -704,15 +734,15 @@ gstore.add('nav_out', function($router){
 	setTimeout( () => {
 
 		/* 2. Load page */
-		$router.push(`/ue/view/`);
+		gstore.get.router.push(`/ue/view/`);
 
 		/* 3. Stop animation */
 		gstore.get.nav_anim.out = false;
 
 		/* 4. Remove 'manage' data */
-		gstore.get.manage.cours = [];
+		gstore.get.manage.cours.splice();
-		gstore.get.manage.td    = [];
+		gstore.get.manage.td.splice();
-		gstore.get.manage.tp    = [];
+		gstore.get.manage.tp.splice();
 
 	}, 500 );
 
@@ -723,30 +753,113 @@ gstore.add('nav_out', function($router){
 
 
 
-
+/* (11) Manage 'manage' formations add|rem
-
-/* (11) Load 'manage' page data if loaded from URL
 ---------------------------------------------------------*/
-gstore.add('manage_load', function(code, $router){
+/* (1) Remove a formation */
+gstore.add('rem_form', function(type, res_i, id_form){
 
-	/* (1) Try to load data */
+	// 1. Check params types
-	gstore.get.load_ue_groups(code, 3).catch( (err) => { // try at max 3 times (200ms each) for UE to be loaded
+	if( isNaN(type) || isNaN(res_i) || isNaN(id_form) )
+		return;
+
+	// 2. Check @type param
+	if( [0,1,2].indexOf(type) == -1 )
+		return;
+
+	// 3. extract API resource from @type
+	var res  = [ 'cours', 'td', 'tp' ][type];
+	var resM = [ 'Cours', 'TD', 'TP' ][type];
+
+	// 4. Extract @resource from @res_i
+	var resource = gstore.get.manage[res][res_i];
+
+	// 4- Manage unreachable resource
+	if( resource == null )
+		return;
+
+	// 5. Extract resource ID
+	var res_id = resource[`id${resM}`];
+
+	// 6. Request to remove formation
+	api.call(`PUT ue/${res}/${res_id}`, { rem_form: [id_form] }, (rs) => {
+
+		// 6.1. Manage error
+		if( rs.error !== 0 || rs.updated !== true )
+			return;
+
+		// 6.2. Get reference of data in gstore (if Cours, TD, TP)
+		var local = gstore.get.manage[res];
+
+		// 6.3. Unset formation to remove from view
+		for( var f_index in resource.formations ){ // search its index
+
+			// if found -> remove by index
+			if( resource.formations[f_index] === id_form ){
+				resource.formations.splice(f_index, 1);
+				break;
+			}
+
+		}
 
-		/* (2) On error -> go to 'view' page */
-		$router.push('/ue/view/');
 
 	});
 
-})
+
+
+});
+
+/* (2) Add a formation */
+gstore.add('add_form', function(type, id_res, i){
+
+	// 1. Check params types
+	if( isNaN(type) || isNaN(id_res) || isNaN(i) )
+		return;
+
+	// 2. Check @type param
+	if( [0,1,2].indexOf(type) == -1 )
+		return;
+
+	// 3. extract API resource from @type
+	var res  = [ 'cours', 'td', 'tp' ][type];
+	var resM = [ 'Cours', 'TD', 'TP' ][type];
+
+	// 4. Exit if @i is invalid
+	if( gstore.get.manage[res][i] == null )
+		return;
+
+	// 5. Extract <select> formation id
+	var id_form = gstore.get.manage[res][i].add_form;
+
+	// 6. Exit if not a number
+	if( isNaN(id_form) )
+		return;
+
+	// 7. Request to add formation
+	api.call(`PUT ue/${res}/${id_res}`, { add_form: [id_form] }, (rs) => {
+
+		// 7.1. Manage error
+		if( rs.error !== 0 || rs.updated !== true )
+			return;
+
+		// 7.2. Unselect the <select>
+		gstore.get.manage[res][i].add_form = '-';
+
+		// 7.3. Add formation to update VueJS
+		gstore.get.manage[res][i].formations.push(id_form);
+
+	});
+
+
+});
 
 
 
 
 
-/* (12) Manage 'manage' formations add|rem
+/* (12) Manage 'prof' for Cours|TD|T{}
 ---------------------------------------------------------*/
-/* (1) Remove a formation */
+/* (1) Update a prof (or unset) */
-gstore.add('rem_form', function(type, id_res, id_form){
+gstore.add('upd_prof', function(type, id_res, id_form){
 
 	// 1. Check params types
 	if( isNaN(type) || isNaN(id_res) || isNaN(id_form) )
@@ -797,47 +910,3 @@ gstore.add('rem_form', function(type, id_res, id_form){
 
 
 });
-
-/* (2) Add a formation */
-gstore.add('add_form', function(type, id_res, i){
-
-	// 1. Check params types
-	if( isNaN(type) || isNaN(id_res) || isNaN(i) )
-		return;
-
-	// 2. Check @type param
-	if( [0,1,2].indexOf(type) == -1 )
-		return;
-
-	// 3. extract API resource from @type
-	var res  = [ 'cours', 'td', 'tp' ][type];
-	var resM = [ 'Cours', 'TD', 'TP' ][type];
-
-	// 4. Exit if @i is invalid
-	if( gstore.get.manage[res][i] == null )
-		return;
-
-	// 5. Extract <select> formation id
-	var id_form = gstore.get.manage[res][i].add_form;
-
-	// 6. Exit if not a number
-	if( isNaN(id_form) )
-		return;
-
-	// 7. Request to add formation
-	api.call(`PUT ue/${res}/${id_res}`, { add_form: [id_form] }, (rs) => {
-
-		// 7.1. Manage error
-		if( rs.error !== 0 || rs.updated !== true )
-			return;
-
-		// 7.2. Unselect the <select>
-		gstore.get.manage[res][i].add_form = '-';
-
-		// 7.3. Add formation to update VueJS
-		gstore.get.manage[res][i].formations.push(id_form);
-
-	});
-
-
-});

webpack/scss/container/list.scss

@@ -22,7 +22,7 @@
 	/* (1) List element */
 	& > section{
 
-		flex: 1 1 95%;
+		flex: 1 1 90%;
 
 		display: flex;
 
@@ -37,7 +37,7 @@
 
 		// flex properties
 		flex-direction:  row;
-		justify-content: flex-start;
+		justify-content: space-between;
 		align-items:     center;
 		flex-wrap:       nowrap;
 
@@ -62,6 +62,39 @@
 			&.tp:hover{    border-left-color: $form-invalid-color; }
 
 		}
+
+
+		/* (1.3) Select elements*/
+		& > select{
+			display: inline-block;
+			position: relative;
+				height: 1.8em;
+				width: auto;
+
+			margin: 0;
+			margin-right: 1em;
+			padding: .2em .5em;
+			padding-right: 1em;
+
+			border: 1px solid lighten($form-neutral-color, 5%);
+			border-radius: 3px;
+
+			background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right .5em bottom .1em no-repeat;
+			background-size: auto 80%;
+
+			color: #999;
+			font-size: .8em;
+
+			cursor: default;
+
+			-webkit-appearance: none;
+			-moz-appearance:    none;
+			appearance:         none;
+
+			justify-self: space-around;
+			flex: 0 1 20em;
+
+		}
 	}
 
 
@@ -94,36 +127,14 @@
 			&[data-filter='up']{ background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
 		}
 
-	}
 
+		& > div.null:after{ content: none; }
 
-	/* (3) List title */
-	& > h1{
-
-		flex: 1 0 95%;
-
-		display: inline-block;
-
-		margin: .8em 1.2em;
-
-		font-size: inherit;
-		color: #888;
-
-	}
-
-	/* (4) List separator */
-	& > hr{
-		display: block;
-		position: relative;
-
-		margin: 1em 1.5em;
-
-		border: 0;
-		border-bottom: 2px solid darken($bg-color, 5%);
 	}
 
 	/* Tags color -> darker */
-	.tag{
+	.tag,
+	& > section > select{
 		color: $primary-color;
 	}