[webpack.ue.manage] can instant-add formations (api+feedback)

webpack/component/ue/manage.vue

@@ -18,7 +18,7 @@
 
 			<!-- COURS -->
 			<section class='cours'
-				v-for='c in gstore.manage.cours'
+				v-for='(c,i) in gstore.manage.cours'
 				:data-id='c.idCours'>
 
 				<div>Cours</div>
@@ -31,14 +31,14 @@
 					</div>
 
 					<div data-action>
-					 	<select class='tag'>
+					 	<select class='tag' v-model='gstore.manage.cours[i].add_form'>
-						 	<option value='-' disbabled selected>Ajouter</option>
+						 	<option value='-' selected disabled>Ajouter</option>
 						 	<option
 							 	v-for='f in gstore.formations'
 								v-show='c.formations.indexOf(f.idForm) < 0'
 								:value='f.idForm'>{{ f.labelForm }}</option>
 						 </select>
-						<span class='pointer' data-create @click='gstore.add_form(0, c.idCours)'></span>
+						<span class='pointer' data-create @click='gstore.add_form(0, c.idCours, i)'></span>
 					</div>
 				</div>
 
@@ -47,7 +47,7 @@
 
 			<!-- TD -->
 			<section class='td'
-				v-for='td in gstore.manage.td'
+				v-for='(td,i) in gstore.manage.td'
 				:data-id='td.idTD'
 				data-anim-incoming='1'
 				:data-anim-bounce='gstore.nav_anim.out?1:0'>
@@ -62,14 +62,14 @@
 					</div>
 
 					<div data-action>
-					 	<select class='tag'>
+					 	<select class='tag'v-model='gstore.manage.td[i].add_form'>
-						 	<option value='-' disbabled selected>Ajouter</option>
+						 	<option value='-' selected disabled>Ajouter</option>
 						 	<option
 							 	v-for='f in gstore.formations'
 								v-show='td.formations.indexOf(f.idForm) < 0'
 								:value='f.idForm'>{{ f.labelForm }}</option>
 						 </select>
-						<span class='pointer' data-create @click='gstore.add_form(1, td.idTD)'></span>
+						<span class='pointer' data-create @click='gstore.add_form(1, td.idTD, i)'></span>
 					</div>
 				</div>
 
@@ -78,7 +78,7 @@
 
 			<!-- TP -->
 			<section class='tp'
-				v-for='tp in gstore.manage.tp'
+				v-for='(tp,i) in gstore.manage.tp'
 				:data-id='tp.idTP'
 				data-anim-incoming='1'
 				:data-anim-bounce='gstore.nav_anim.out?1:0'>
@@ -93,14 +93,14 @@
 					</div>
 
 					<div data-action>
-					 	<select class='tag'>
+					 	<select class='tag' v-model='gstore.manage.tp[i].add_form'>
-						 	<option value='-' disbabled selected>Ajouter</option>
+						 	<option value='-' selected disabled>Ajouter</option>
 						 	<option
 							 	v-for='f in gstore.formations'
 								v-show='tp.formations.indexOf(f.idForm) < 0'
 								:value='f.idForm'>{{ f.labelForm }}</option>
 						 </select>
-						<span class='pointer' data-create @click='gstore.add_form(2, tp.idTP)'></span>
+						<span class='pointer' data-create @click='gstore.add_form(2, tp.idTP, i)'></span>
 					</div>
 				</div>
 

webpack/data/ue.js

@@ -584,8 +584,14 @@ gstore.add('load_ue_groups', function(code, recur=0){
 				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 = '-';
+				gstore.get.manage.cours.push( group );
+			}
+
 			// resolve data on success
-			gstore.get.manage.cours = rs.groups;
 			resolve();
 
 		});
@@ -603,8 +609,14 @@ gstore.add('load_ue_groups', function(code, recur=0){
 					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 = '-';
+					gstore.get.manage.td.push( group );
+				}
+
 				// resolve data on success
-				gstore.get.manage.td = rs.groups;
 				resolve();
 
 			});
@@ -624,8 +636,14 @@ gstore.add('load_ue_groups', function(code, recur=0){
 					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 = '-';
+					gstore.get.manage.tp.push( group );
+				}
+
 				// resolve data on success
-				gstore.get.manage.tp = rs.groups;
 				resolve();
 
 			});
@@ -778,4 +796,48 @@ 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);
+
+	});
+
+
 });