mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[webpack.teacher.view] can now toggle 'CREATE' card + fixed layout now 'CREATE' card is !!exactly!! the same size as others

This commit is contained in:
xdrm-brackets 2018-03-07 18:49:28 +01:00
parent c21b744986
commit e04649a8f5
4 changed files with 96 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webpack/component/teacher/view.vue
View File

@ -2,11 +2,13 @@
<div id='CONTAINER'> <div id='CONTAINER'>
<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
<div class='card container'> <div class='card container'>
<section class='valid' data-create=''> <input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
<button class='card toggle valid' :data-active='gstore.create_card?1:0' @click='gstore.create_card=!gstore.create_card'>+</button>
<section class='valid' data-create='' v-show='gstore.create_card'>
<select class='category' v-model='gstore.create_cat'> <select class='category' v-model='gstore.create_cat'>
<option selected='selected' disabled='disabled' value='-'>Catégorie d'enseignant</option> <option selected='selected' disabled='disabled' value='-'>Catégorie d'enseignant</option>

35
webpack/data/teacher.js
View File

@ -209,49 +209,52 @@ gstore.add('is_handler', function(e){
/* (5) Manage instant create /* (5) Manage instant create
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) Initialize inputs */ /* (1) Initialize toggle show */
gstore.add('create_card', false);
/* (2) Initialize inputs */
gstore.add('create_cat', '-'); gstore.add('create_cat', '-');
gstore.add('create_name', ''); gstore.add('create_name', '');
gstore.add('create_cas', ''); gstore.add('create_cas', '');
gstore.add('create_h', ''); gstore.add('create_h', '');
/* (2) Initialize error message */ /* (3) Initialize error message */
gstore.add('create_err_valid', false); gstore.add('create_err_valid', false);
gstore.add('create_err', ''); gstore.add('create_err', '');
/* (3) Define create handler */ /* (4) Define create handler */
gstore.add('ic_handler', function(prof_id){ gstore.add('ic_handler', function(prof_id){
/* (3.1) Trim text input */ /* (4.1) Trim text input */
gstore.get.create_name = gstore.get.create_name.trim(); gstore.get.create_name = gstore.get.create_name.trim();
gstore.get.create_cas = gstore.get.create_cas.trim().toLowerCase(); gstore.get.create_cas = gstore.get.create_cas.trim().toLowerCase();
gstore.get.create_h = gstore.get.create_h.trim(); gstore.get.create_h = gstore.get.create_h.trim();
/* (3.2) Store values locally */ /* (4.2) Store values locally */
var cat = gstore.get.create_cat; var cat = gstore.get.create_cat;
var name = gstore.get.create_name.split(' '); var name = gstore.get.create_name.split(' ');
var cas = gstore.get.create_cas; var cas = gstore.get.create_cas;
var hour = gstore.get.create_h; var hour = gstore.get.create_h;
/* (3.3) Init client-side check */ /* (4.3) Init client-side check */
var errors = []; var errors = [];
/* (3.3.1) Check category */ /* (4.3.1) Check category */
if( isNaN(cat) ) errors.push('La catégorie de l\'enseignant est manquante'); if( isNaN(cat) ) errors.push('La catégorie de l\'enseignant est manquante');
/* (3.3.2) Check name */ /* (4.3.2) Check name */
if( name.length !== 2 || name[0].length < 2 || name[1].length < 2 ) if( name.length !== 2 || name[0].length < 2 || name[1].length < 2 )
errors.push('Le nom doit suivre le format "Prénom Nom"'); errors.push('Le nom doit suivre le format "Prénom Nom"');
/* (3.3.3) Check CAS login */ /* (4.3.3) Check CAS login */
if( !/^([a-z]{4,16})?$/.test(cas) ) if( !/^([a-z]{4,16})?$/.test(cas) )
errors.push('L\'identifiant doit être vide ou comprendre de 4 à 16 lettres'); errors.push('L\'identifiant doit être vide ou comprendre de 4 à 16 lettres');
/* (3.3.4) Check hours */ /* (4.3.4) Check hours */
if( hour === '' || isNaN(hour) || hour < 0 ) if( hour === '' || isNaN(hour) || hour < 0 )
errors.push('Le nombre d\'heures doit être un entier positif.'); errors.push('Le nombre d\'heures doit être un entier positif.');
/* (3.4) Show first error only (for 2s) */ /* (4.4) Show first error only (for 2s) */
if( errors.length > 0 ){ if( errors.length > 0 ){
gstore.get.create_err = errors[0]; gstore.get.create_err = errors[0];
@ -262,7 +265,7 @@ gstore.add('ic_handler', function(prof_id){
/* (4.1) Création de la requête */ /* (4.5.1) Création de la requête */
var rq = { var rq = {
firstName: name[0], firstName: name[0],
lastName: name[1], lastName: name[1],
@ -276,24 +279,24 @@ gstore.add('ic_handler', function(prof_id){
if( cas.length > 0 ) rq.casLogin = cas; if( cas.length > 0 ) rq.casLogin = cas;
/* (4.2) Send request */ /* (4.5.2) Send request */
api.call('POST professor', rq, function(rs){ api.call('POST professor', rq, function(rs){
console.log(rs); console.log(rs);
/* (4.2.1) Manage 'already exist' error */ /* (4.5.2.1) Manage 'already exist' error */
if( rs.error == 29 ){ if( rs.error == 29 ){
gstore.get.create_err = 'Le couple Nom-Prénom est déja utilisé.'; gstore.get.create_err = 'Le couple Nom-Prénom est déja utilisé.';
return setTimeout(() => gstore.add('create_err', ''), 2000); return setTimeout(() => gstore.add('create_err', ''), 2000);
} }
/* (4.2.2) Manage other errors */ /* (4.5.2.2) Manage other errors */
if( rs.error !== 0 ){ if( rs.error !== 0 ){
gstore.get.create_err = 'erreur ('+rs.error+') Impossible de créer l\'enseignant'; gstore.get.create_err = 'erreur ('+rs.error+') Impossible de créer l\'enseignant';
return setTimeout(() => gstore.add('create_err', ''), 2000); return setTimeout(() => gstore.add('create_err', ''), 2000);
} }
/* (4.2.3) Show that user is created */ /* (4.5.2.3) Show that user is created */
// display all is ok // display all is ok
gstore.add('create_err_valid', true); gstore.add('create_err_valid', true);
gstore.add('create_err', 'L\'enseignant a été créé, il s\'affichera au prochain rechargement'); gstore.add('create_err', 'L\'enseignant a été créé, il s\'affichera au prochain rechargement');

73
webpack/scss/container.scss
View File

@ -79,43 +79,16 @@
/* [2] Card style -> instant-search
---------------------------------*/
#CONTAINER > input.card.instant-search{
display: block;
position: absolute;
top: .5em;
left: .5em;
// 100% - filtr - padding - border
width: calc( 100% - 20em - 1em - 6*1em );
height: calc( 3em - 2*.5em - 2*1px);
margin: 0;
padding: .5em 1em;
border-radius: 3px / 3px;
background-color: #fff;
box-shadow: 0 2px 2px darken(#fff, 10%);
}
/* [3] Card style -> container /* [3] Card style -> container
---------------------------------*/ ---------------------------------*/
#CONTAINER > div.card.container{ #CONTAINER > div.card.container{
display: flex; display: flex;
position: absolute; position: absolute;
top: 3em; top: 0;
left: 0; left: 0;
width: calc( 100% - 20em ); width: calc( 100% - 20em );
min-height: calc( 100% - 3em ); min-height: 100%;
// flex properties // flex properties
flex-direction: row; flex-direction: row;
@ -127,13 +100,41 @@
overflow: hidden; overflow: hidden;
/* [3.1] Card style -> instant-search
---------------------------------*/
& > input.instant-search{
display: inline-block;
position: relative;
// - marg - padd - [NEW] - separ
flex: 0 1 calc( 100% - 2*1em - 2*.5em - 2em - 2*1em );
margin: 1em .5em;
padding: .5em 1em;
border-radius: 3px / 3px;
background-color: #fff;
box-shadow: 0 2px 2px darken(#fff, 10%);
& + button.card.toggle{
display: inline-block;
position: relative;
flex: 0 1 calc( 2em - 2*.5em );
margin: 1em .5em;
font-weight: bold;
}
}
/* (1) Card container */ /* (1) Card container */
& > section{ & > section{
// flex-grow: 1; flex: 1 1 0;
flex-basis: 15em;
flex-shrink: 1;
flex-grow: 1;
display: flex; display: flex;
position: relative; position: relative;
@ -142,7 +143,7 @@
padding: 1.5em; padding: 1.5em;
border-radius: 3px / 3px; border-radius: 3px / 3px;
// border: 1px solid darken(#fff, 10%); border: 1px solid transparent;
box-shadow: 0 1px 1px darken(#fff, 20%); box-shadow: 0 1px 1px darken(#fff, 20%);
box-shadow: 0 1px 1px darken(#fff, 20%); box-shadow: 0 1px 1px darken(#fff, 20%);
@ -240,8 +241,8 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-left: -.4em; // emulate no <select> margin-left: -.4em; // emulate no <select>
margin-top: -.8em; // replace as if not a select margin-top: -1em; // replace as if not a select
margin-bottom: -.4em; // fix layout for following elements margin-bottom: -.3em; // fix layout for following elements
// remove border // remove border
border: 0; border: 0;

48
webpack/scss/global.scss
View File

@ -115,13 +115,13 @@ input[type=submit].neutral{
padding: .5em 1em; padding: .5em 1em;
border-radius: 3px; border-radius: 3px;
border: 1px solid $form-neutral-color; border: 1px solid $form-neutral-color;
background: $bg-color center center no-repeat; background: #fff center center no-repeat;
text-transform: uppercase; text-transform: uppercase;
font-weight: normal; font-weight: normal;
color: darken($form-neutral-color, 15%); color: $primary-color;
cursor: pointer; cursor: pointer;
@ -129,10 +129,10 @@ input[type=submit].neutral{
border-color .1s ease-in-out, border-color .1s ease-in-out,
background .2s ease-in-out; background .2s ease-in-out;
&:hover, &:focus{ &:hover, &[data-active='1']{
color: darken($form-neutral-color, 35%); color: #fff;
border-color: $primary-color; border-color: $form-neutral-color;
background-color: #fff; background-color: $form-neutral-color;
} }
} }
@ -142,7 +142,13 @@ button.grey, .grey > button,
input[type=button].grey, .grey > input[type=button], input[type=button].grey, .grey > input[type=button],
input[type=submit].grey, .grey > input[type=submit]{ input[type=submit].grey, .grey > input[type=submit]{
border-color: $form-grey-color; color: $form-grey-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-grey-color;
background-color: $form-grey-color;
}
cursor: default; cursor: default;
} }
@ -152,7 +158,13 @@ button.valid, .valid > button,
input[type=button].valid, .valid > input[type=button], input[type=button].valid, .valid > input[type=button],
input[type=submit].valid, .valid > input[type=submit]{ input[type=submit].valid, .valid > input[type=submit]{
border-color: $form-valid-color; color: $form-valid-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-valid-color;
background-color: $form-valid-color;
}
} }
@ -161,7 +173,13 @@ button.invalid, .invalid > button,
input[type=button].invalid, .invalid > input[type=button], input[type=button].invalid, .invalid > input[type=button],
input[type=submit].invalid, .invalid > input[type=submit]{ input[type=submit].invalid, .invalid > input[type=submit]{
border-color: $form-invalid-color; color: $form-invalid-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-invalid-color;
background-color: $form-invalid-color;
}
} }
@ -170,7 +188,13 @@ button.search, .search > button,
input[type=button].search, .search > input[type=button], input[type=button].search, .search > input[type=button],
input[type=submit].search, .search > input[type=submit]{ input[type=submit].search, .search > input[type=submit]{
border-color: $form-search-color; color: $form-search-color;
&:hover, &[data-active='1']{
color: #fff;
border-color: $form-search-color;
background-color: $form-search-color;
}
} }