[webpack.teacher.view]] Can now REMOVE (delete) professors

webpack/component/teacher/view.vue

@@ -6,7 +6,7 @@
 
 		<div class='card container'>
 
-			<section data-create=''>
+			<section class='valid'>
 
 				<select class='category'>
 					<option selected='selected' disabled='disabled'>Catégorie d'enseignant</option>
@@ -38,8 +38,8 @@
 				:data-lname='prof.lastName'
 				:data-fname='prof.firstName'>
 
-				<div class='remove' :data-remove='prof.idProfesseur' @click="gstore.remove($event.currentTarget.getAttribute('data-remove'))"></div>
+				<div class='remove' :data-remove='prof.idProfesseur' @click="gstore.ir_handler($event.currentTarget.getAttribute('data-remove'))"></div>
-				<div class='edit'   :data-edit='prof.idProfesseur'   @click="gstore.edit($event.currentTarget.getAttribute('data-edit'))"></div>
+				<div class='edit'   :data-edit='prof.idProfesseur'   @click="gstore.ie_handler($event.currentTarget.getAttribute('data-edit'))"></div>
 
 				<span class='category'>{{ prof.categorie }}</span>
 				<h1 :class="prof.hoursToDo > prof.equiTD ? 'warning' : ''">{{ prof.firstName }} {{ prof.lastName }}</h1>

webpack/data/teacher.js

@@ -204,3 +204,86 @@ gstore.add('is_handler', function(e){
 });
 
 
+
+
+
+/* (5) Manage instant remove
+---------------------------------------------------------*/
+/* (1) Define remove handler */
+gstore.add('ir_handler', function(prof_id){
+
+	/* (1) Abort if wrong prof_id */
+	if( prof_id == null || isNaN(prof_id) )
+		return;
+
+	/* (2) Prepare confirmation pop-up */
+	var popup_rq = {
+		title:   'Confirmation de suppression',
+		content: "La suppression de l'enseignant <b>sadkfjsdlkf</b> est irréversible.<br><br>Voulez-vous le supprimer définitivement ?",
+		action:  'Supprimer',
+		type:    'invalid'
+	};
+
+	/* (3) Show popup */
+	(new Promise( (resolve, reject) => {
+
+		popup.ask({
+			title:   'Confirmation de suppression',
+			content: "La suppression de l'enseignant <b>sadkfjsdlkf</b> est irréversible.<br><br>Voulez-vous le supprimer définitivement ?",
+			action:  'Supprimer',
+			type:    'invalid'
+		}, (popup_rs) => { popup_rs && resolve() });
+
+	})).then(function(){
+
+
+		return new Promise( (resolve, reject) => {
+
+			/* (3.1) Delete professor */
+			api.call('DELETE professor/'+prof_id, {}, function(rs){
+
+				/* (3.1.1) Abort on error */
+				if( rs.error !== 0 || rs.deleted !== true )
+					return reject(rs.error);
+
+				/* (3.1.2) Success */
+				resolve();
+
+			});
+
+		});
+
+	/* (4) On success */
+	}).then(function(){
+
+		/* (4.1) Find index in gstore */
+		var gi = gstore.get.professors.map( (data, i) => { return ( data.idProfesseur && data.idProfesseur == prof_id ) ? i : ''; }).join('');
+
+		/* (4.2) Do nothing if not found */
+		if( isNaN(gi) ) return;
+
+		/* (4.3) Else -> remove from visible */
+		gstore.get.professors.splice(gi, 1);
+
+
+	/* (5) On error */
+	}).catch(function(err_code){
+
+		popup.ask({
+			title:   'Error ('+err_code+')',
+			content: 'La suppression à échoué. Veuillez réessayer ultérieurement.',
+			action:  'OK',
+			type:    'neutral'
+		}, () => {});
+
+	});
+
+
+
+
+
+
+
+});
+
+

webpack/scss/container.scss

@@ -145,6 +145,10 @@
 		// border: 1px solid darken(#fff, 10%);
 		box-shadow: 0 1px 1px darken(#fff, 20%);
 
+		box-shadow: 0 1px 1px darken(#fff, 20%);
+		&.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; }
+		&.valid{   box-shadow: 0; border: 1px solid $form-valid-color; }
+
 		background-color: #fff;
 
 		color: $primary-color;

webpack/scss/pop-up.scss

@@ -34,9 +34,9 @@
 	& > .header{
 		display: block;
 		position: relative;
-			width: calc( 100% - 2*1em );
+			width: calc( 100% - 2*2em );
 
-		padding: 1em;
+		padding: 1em 2em;
 
 		border-radius: 5px 5px 0 0;
 		border-bottom: 2px solid darken($bg-color, 5%);
@@ -50,9 +50,9 @@
 	& > .body{
 		display: block;
 		position: relative;
-			width: calc( 100% - 2*1em );
+			width: calc( 100% - 2*2em );
 
-		padding: 1em;
+		padding: 2em;
 
 		b, strong{ color: darken($primary-color, 10%); }
 
@@ -61,9 +61,9 @@
 	& > .footer{
 		display: flex;
 		position: relative;
-			width: calc( 100% - 2*1em );
+			width: calc( 100% - 2*2em );
 
-		padding: 1em;
+		padding: 1em 2em;
 
 		background-color: darken($bg-color, 5%);