[webpack.ue.manage] implemented 'remove' for Cours|TD|TP

webpack/component/ue/manage.vue

@@ -21,6 +21,7 @@
 				v-for='(c,i) in gstore.manage.cours'
 				:data-id='c.idCours'>
 
+				<div class='icon' @click='gstore.rem(0, i)'></div>
 				<select v-model='c.new_prof' @change='gstore.upd_prof(0, 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>
@@ -55,6 +56,7 @@
 				data-anim-incoming='1'
 				:data-anim-bounce='gstore.nav_anim.out?1:0'>
 
+				<div class='icon' @click='gstore.rem(1, i)'></div>
 				<select v-model='td.new_prof' @change='gstore.upd_prof(1, 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>
@@ -89,6 +91,7 @@
 				data-anim-incoming='1'
 				:data-anim-bounce='gstore.nav_anim.out?1:0'>
 
+				<div class='icon' @click='gstore.rem(2, i)'></div>
 				<select v-model='tp.new_prof' @change='gstore.upd_prof(2, 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>

webpack/data/ue.js

@@ -756,7 +756,7 @@ gstore.add('nav_out', function(){
 
 
 
-/* (11) Manage 'manage' formations add|rem
+/* (11) Manage 'manage' inline modifications
 ---------------------------------------------------------*/
 /* (1) Remove a formation */
 gstore.add('rem_form', function(type, res_i, id_form){
@@ -861,13 +861,7 @@ gstore.add('add_form', function(type, res_i){
 
 });
 
-
+/* (3) Update a prof (set or unset) */
-
-
-
-/* (12) Manage 'prof' for Cours|TD|T{}
----------------------------------------------------------*/
-/* (1) Update a prof (or unset) */
 gstore.add('upd_prof', function(type, res_i){
 
 	// 1. Check params types
@@ -919,4 +913,87 @@ gstore.add('upd_prof', function(type, res_i){
 	});
 
 
+});
+
+
+
+
+/* (12) Remove a Cours|TD|TP
+---------------------------------------------------------*/
+/* (1) Update a prof (or unset) */
+gstore.add('rem', function(type, res_i){
+
+	// 1. Check params types
+	if( isNaN(type) || isNaN(res_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. 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. Popup ask
+	(new Promise( (resolve, reject) => {
+
+		popup.ask({
+			title:   'Confirmation de suppression',
+			content: `La suppression du ${resM} est irréversible.<br><br>Voulez-vous le supprimer définitivement ?`,
+			action:  'Supprimer',
+			type:    'invalid'
+		}, (popup_rs) => { popup_rs && resolve() });
+
+	// 7. On popup confirm
+	})).then( () => {
+
+		return new Promise( (resolve, reject) => {
+
+			// 7.1. delete cours,td,tp
+			api.call(`DELETE ue/${res}/${res_id}`, {}, function(rs){
+
+				// reject on error
+				if( rs.error !== 0 || rs.deleted !== true )
+					return reject(rs.error);
+
+				// else -> resolve
+				resolve();
+
+			});
+
+		});
+
+	// 8. On success -> update VueJS
+	}).then( () => {
+
+
+		/* remove from visible */
+		gstore.get.manage[res].splice(res_i, 1);
+
+
+	/* (6) On error */
+	}).catch(function(err_code){
+
+		popup.ask({
+			title:   'Error ('+err_code+')',
+			content: 'La suppression a échouée. Veuillez réessayer ultérieurement.',
+			action:  'OK',
+			type:    'neutral'
+		}, () => {});
+
+	});
+
+
 });

webpack/scss/container/list.scss

@@ -37,12 +37,12 @@
 
 		// flex properties
 		flex-direction:  row;
-		justify-content: space-between;
+		justify-content: flex-start;
 		align-items:     center;
 		flex-wrap:       nowrap;
 
 		/* (1.1) Element item */
-		& > div{
+		& > div:not(.icon){
 			flex: 1 1 0;
 
 			// fix
@@ -95,6 +95,24 @@
 			flex: 0 1 20em;
 
 		}
+
+		/* (1.4) Icon (remove) */
+		& > div.icon{
+			display: inline-block;
+				width: 1.2em;
+				height: 1.2em;
+
+			margin-right: 1em;
+
+			background: url('/asset/svg/cross.svg@aaaaaa') center center no-repeat;
+			background-size: 60% auto;
+
+			overflow: hidden;
+
+			cursor: pointer;
+
+			&:hover{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
+		}
 	}