[webpack.teacher.view] instant-edit now works !! (but need to get categoryLabel from other request maybe..)

This commit is contained in:
xdrm-brackets 2018-03-08 13:58:30 +01:00
parent c4041532a8
commit 5785b58703
3 changed files with 151 additions and 33 deletions

View File

@ -133,9 +133,9 @@
"lastName": { "des": "Professor first name.", "typ": "varchar(2,30,alphanumeric)", "opt": true }, "lastName": { "des": "Professor first name.", "typ": "varchar(2,30,alphanumeric)", "opt": true },
"category": { "des": "Professor category UID.", "typ": "id", "opt": true }, "category": { "des": "Professor category UID.", "typ": "id", "opt": true },
"hoursToDo": { "des": "Number of hours professor have to do", "typ": "id", "opt": true }, "hoursToDo": { "des": "Number of hours professor have to do", "typ": "id", "opt": true },
"initials": { "des": "Professor initials", "typ": "varchar(2,2,letters)", "opt": true }, "initials": { "des": "Professor initials", "typ": "varchar(2,8,letters)", "opt": true },
"isAdmin": { "des": "Whether professor is an admin", "typ": "boolean", "opt": true }, "isAdmin": { "des": "Whether professor is an admin", "typ": "boolean", "opt": true },
"casLogin": { "des": "Optional CAS username", "typ": "varchar(6,10,letters)", "opt": true } "casLogin": { "des": "Optional CAS username", "typ": "varchar(6,16,letters)", "opt": true }
}, },
"out": { "out": {
"updated": { "des": "Whether the professor has been updated", "typ": "boolean" } "updated": { "des": "Whether the professor has been updated", "typ": "boolean" }

View File

@ -52,18 +52,40 @@
:data-lname='prof.lastName' :data-lname='prof.lastName'
:data-fname='prof.firstName'> :data-fname='prof.firstName'>
<div class='goo-menu'>
<!-- if VIEW MODE -->
<div class='goo-menu' v-show='gstore.edit_i!=pi'>
<div class='admin' :data-admin='prof.idProfesseur' :data-active='prof.admin?1:0' @click="gstore.ia_handler(pi)"></div> <div class='admin' :data-admin='prof.idProfesseur' :data-active='prof.admin?1:0' @click="gstore.ia_handler(pi)"></div>
<div class='remove' :data-remove='prof.idProfesseur' @click="gstore.ir_handler($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.ie_handler($event.currentTarget.getAttribute('data-edit'))"></div> <div class='edit' :data-edit='prof.idProfesseur' @click="gstore.ie_toggle(pi)"></div>
</div> </div>
<span class='category'>{{ prof.categorie }}</span> <!-- if VIEW MODE -->
<h1 :class="prof.hoursToDo > prof.equiTD ? 'warning' : ''">{{ prof.firstName }} {{ prof.lastName }} <span :data-visible='prof.casLogin.length'>({{ prof.casLogin }})</span></h1> <span v-show='gstore.edit_i!=pi' class='category'>{{ prof.categorie }}</span>
<!-- if EDIT MODE -->
<select v-show='gstore.edit_i==pi' v-model='gstore.edit_cat' class='category'>
<option selected='selected' disabled='disabled' value='-'>Catégorie d'enseignant</option>
<option v-for='cat in gstore.categories' :value='cat.idCategorie'>{{ cat.labelCategorie }}</option>
</select>
<!-- endif -->
<!-- if VIEW MODE -->
<h1 v-show='gstore.edit_i!=pi' :class="prof.hoursToDo > prof.equiTD ? 'warning' : ''">{{ prof.firstName }} {{ prof.lastName }} <span :data-visible='prof.casLogin.length'>({{ prof.casLogin }})</span></h1>
<!-- if EDIT MODE -->
<h1 v-show='gstore.edit_i==pi' :class="prof.hoursToDo > prof.equiTD ? 'warning' : ''">
<input type='text' placeholder='Prénom Nom' v-model='gstore.edit_name'>
<span data-visible='1'>(<input type='text' placeholder='identifiant' v-model='gstore.edit_cas'>)</span>
</h1>
<!-- endif -->
<div class='table'> <div class='table'>
<div> <div>
<span>{{prof.hoursToDo}}</span> <!-- if VIEW MODE -->
<span v-show='gstore.edit_i!=pi'>{{prof.hoursToDo}}</span>
<!-- if EDIT MODE -->
<span v-show='gstore.edit_i==pi'><input type='text' placeholder='???' v-model='gstore.edit_h'></span>
<!-- endif -->
<span>heures à faire</span> <span>heures à faire</span>
</div> </div>
<div> <div>
@ -72,12 +94,23 @@
</div> </div>
</div> </div>
<div class='sub'><strong>{{ prof.VHCours + prof.VHTd + prof.VHTp }}h</strong> physiques prévues</div> <!-- if VIEW MODE -->
<div v-show='gstore.edit_i!=pi' class='sub'><strong>{{ prof.VHCours + prof.VHTd + prof.VHTp }}h</strong> physiques prévues</div>
<!-- if EDIT MODE -->
<div v-show='gstore.edit_i==pi' :class="gstore.edit_err.length > 0 ? 'sub warning' : 'sub'" :data-valid='gstore.edit_err_valid?1:0'>{{ gstore.edit_err }}</div>
<!-- endif -->
<div class='footer'> <div class='footer'>
<span :class="(prof.VHCours == 0) ? 'course' : 'course active'">{{ prof.VHCours }}h <span>Cours</span></span><hr> <!-- if VIEW MODE -->
<span :class="(prof.VHTd == 0) ? 'td' : 'td active'">{{ prof.VHTd }}h <span>TD</span></span><hr> <span v-show='gstore.edit_i!=pi' :class="(prof.VHCours == 0) ? 'course' : 'course active'">{{ prof.VHCours }}h <span>Cours</span></span>
<span :class="(prof.VHTp == 0) ? 'tp' : 'tp active'">{{ prof.VHTp }}h <span>TP</span></span> <hr v-show='gstore.edit_i!=pi'>
<span v-show='gstore.edit_i!=pi' :class="(prof.VHTd == 0) ? 'td' : 'td active'">{{ prof.VHTd }}h <span>TD</span></span>
<hr v-show='gstore.edit_i!=pi'>
<span v-show='gstore.edit_i!=pi' :class="(prof.VHTp == 0) ? 'tp' : 'tp active'">{{ prof.VHTp }}h <span>TP</span></span>
<!-- if EDIT MODE -->
<button v-show='gstore.edit_i==pi' class='search' @click='gstore.ie_handler(pi)'>Modifier l'enseignant</button>
<button v-show='gstore.edit_i==pi' class='grey' @click='gstore.ie_toggle(-1)'>Annuler</button>
<!-- endif -->
</div> </div>
</section> </section>

View File

@ -338,7 +338,7 @@ gstore.add('ir_handler', function(prof_id){
/* (2.2) Exit if not found */ /* (2.2) Exit if not found */
if( isNaN(gi) ) return; if( isNaN(gi) ) return;
local = gstore.get.professors[gi]; var local = gstore.get.professors[gi];
/* (3) Show popup */ /* (3) Show popup */
(new Promise( (resolve, reject) => { (new Promise( (resolve, reject) => {
@ -398,58 +398,144 @@ gstore.add('ir_handler', function(prof_id){
/* (7) Manage instant edit /* (7) Manage instant edit
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) Define edit handler */ /* (1) Init edit_mode */
gstore.add('ie_handler', function(prof_id){ gstore.add('edit_i', -1);
/* (1) Abort if wrong prof_id */ /* (2) Initialize inputs */
if( prof_id == null || isNaN(prof_id) ) gstore.add('edit_cat', '-');
gstore.add('edit_name', '');
gstore.add('edit_cas', '');
gstore.add('edit_h', '');
/* (3) Initialize error message */
gstore.add('edit_err_valid', false);
gstore.add('edit_err', '');
/* (4) Define toggle view */
gstore.add('ie_toggle', function(prof_i){
/* (4.1) Abort if wrong prof_i */
if( prof_i == null || isNaN(prof_i) || gstore.get.professors[prof_i] == null)
return gstore.add('edit_i', -1);
/* (4.2) Toggle current value */
var prof = gstore.get.professors[prof_i];
/* (4.3) Pre-fill edit values */
gstore.get.edit_cat = prof.idCat;
gstore.get.edit_cas = prof.casLogin;
gstore.get.edit_name = prof.firstName+' '+prof.lastName;
gstore.get.edit_h = prof.hoursToDo.toString();
/* (4.4) Set card to edit mode */
gstore.get.edit_i = prof_i;
});
/* (5) Confirm update */
gstore.add('ie_handler', function(prof_i){
/* (5.1) Abort if wrong prof_i */
if( prof_i == null || isNaN(prof_i) || gstore.get.professors[prof_i] == null)
return; return;
/* (2.1) Find index in gstore */ /* (5.2) Toggle current value */
var gi = gstore.get.professors.map( (data, i) => { return ( data.idProfesseur && data.idProfesseur == prof_id ) ? i : ''; }).join(''); var prof = gstore.get.professors[prof_i];
/* (2.2) Exit if not found */ /* (5.3) Trim text input */
if( isNaN(gi) ) return; gstore.get.edit_name = gstore.get.edit_name.trim();
local = gstore.get.professors[gi]; gstore.get.edit_cas = gstore.get.edit_cas.trim().toLowerCase();
gstore.get.edit_h = gstore.get.edit_h.trim();
/* (5.4) Store values locally */
var cat = gstore.get.edit_cat;
var name = gstore.get.edit_name.split(' ');
var cas = gstore.get.edit_cas;
var hour = gstore.get.edit_h;
/* (5.5) Init client-side check */
var errors = [];
/* (5.5.1) Check category */
if( isNaN(cat) ) errors.push('La catégorie de l\'enseignant est manquante');
/* (5.5.2) Check name */
if( name.length !== 2 || name[0].length < 2 || name[1].length < 2 )
errors.push('Le nom doit suivre le format "Prénom Nom"');
/* (5.5.3) Check CAS login */
if( !/^([a-z]{4,16})?$/.test(cas) )
errors.push('L\'identifiant doit être vide ou comprendre de 4 à 16 lettres');
/* (5.5.4) Check hours */
if( hour === '' || isNaN(hour) || hour < 0 )
errors.push('Le nombre d\'heures doit être un entier positif.');
/* (5.6) Show first error only (for 2s) */
if( errors.length > 0 ){
gstore.get.edit_err = errors[0];
return setTimeout(() => gstore.add('edit_err', ''), 2000);
}
/* (3) Show popup */ /* (5.7) Création de la requête */
var rq = {};
( name[0] != prof.firstName ) && ( rq.firstName = name[0] );
( name[1] != prof.lastName ) && ( rq.lastName = name[1] );
( cat != prof.idCat ) && ( rq.category = cat );
( hour != prof.hoursToDo ) && ( rq.hoursToDo = hour );
( cas != prof.casLogin ) && ( rq.casLogin = cas );
// update initials whatever have been modified (to avoid API error when no field given)
rq.initials = name[0].substr(0,2) + name[1].substr(0,2);
(new Promise( (resolve, reject) => { (new Promise( (resolve, reject) => {
popup.ask({ popup.ask({
title: 'Confirmation de modification', title: 'Confirmation de modification',
content: "La modification de l'enseignant <b>"+local.firstName+" "+local.lastName+"</b> est irréversible.<br><br>Voulez-vous le modifier ?", content: "La modification de l'enseignant <b>"+prof.firstName+" "+prof.lastName+"</b> est irréversible.<br><br>Voulez-vous le modifier ?",
action: 'Modifier', action: 'Modifier',
type: 'search' type: 'search'
}, (popup_rs) => { popup_rs && resolve() }); }, (popup_rs) => { popup_rs && resolve() });
/* (4) On pop-up confirmation */ /* (5.8) On pop-up confirmation */
})).then(function(){ })).then(function(){
return new Promise( (resolve, reject) => { return new Promise( (resolve, reject) => {
/* (4.1) Delete professor */ /* (5.8.1) Delete professor */
api.call('PUT professor/'+prof_id, {}, function(rs){ api.call('PUT professor/'+prof.idProfesseur, rq, function(rs){
/* (4.1.1) Abort on error */ /* (5.8.1.1) Abort on error */
if( rs.error !== 0 || rs.updated !== true ) if( rs.error !== 0 || rs.updated !== true )
return reject(rs.error); return reject(rs.error);
/* (4.1.2) Success */ /* (5.8.1.2) Success */
resolve(); resolve();
}); });
}); });
/* (5) On success */ /* (5.9) On success */
}).then(function(){ }).then(function(){
/* update VueJS element */ /* (5.9.1) update VueJS element */
// gstore.get.professors[gi]; gstore.get.professors[prof_i].idCat = cat;
gstore.get.professors[prof_i].firstName = name[0];
gstore.get.professors[prof_i].lastName = name[1];
gstore.get.professors[prof_i].casLogin = cas;
gstore.get.professors[prof_i].hoursToDo = hour;
/* (5.9.2) Remove edit mode */
gstore.add('edit_i', -1);
/* (6) On error */ /* (5.10) On error */
}).catch(function(err_code){ }).catch(function(err_code){
popup.ask({ popup.ask({
@ -461,7 +547,6 @@ gstore.add('ie_handler', function(prof_id){
}); });
}); });