184 lines
7.9 KiB
Vue
184 lines
7.9 KiB
Vue
<template>
|
|
|
|
<div id='CONTAINER' class='card'>
|
|
|
|
<div class='card filter'>
|
|
|
|
<div v-for='(filter_grp, gname) in gstore.filters' :title='gname' data-unblur-filter>
|
|
|
|
<div class='fold-toggle' :data-show='gstore.filters[gname][0].visible?1:0' @click='gstore.show_fgroup(gname)' :data-count='gstore.filters[gname][0].active.length' data-unblur-filter>{{ gname }}</div>
|
|
|
|
<div class='fold' data-unblur-filter>
|
|
<span v-for='(data, i) in filter_grp' v-if='i > 0' :class="data.active == true ? 'active' : ''" @click='gstore.toggle_filter(gname, i); gstore.filter_handler(gname);' :title='data.code' data-unblur-filter>{{ data.name }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class='card container' :data-anim-outgoing='gstore.nav_anim.in?1:0'>
|
|
|
|
<input data-anim='0' class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='ue_view_instant_search'>
|
|
<button data-anim='0' class='card toggle valid' :data-active='gstore.create_card?1:0' @click='gstore.create_card=!gstore.create_card' title='Créer une UE'>+</button>
|
|
|
|
<section class='valid' data-create='' v-show='gstore.create_card'>
|
|
|
|
<select v-model='gstore.create_form' class='category'>
|
|
<option selected='selected' disabled='disabled' value='-'>Formation par défaut</option>
|
|
<option value='-1'>Aucune formation par défaut</option>
|
|
<option v-for='form in gstore.formations' :value='form.idForm'>{{ form.labelForm }}</option>
|
|
</select>
|
|
|
|
<h1 class='pin'>
|
|
<input type='text' placeholder='Libellé' v-model='gstore.create_label'>
|
|
<span data-visible='1'>(<input type='text' placeholder='code' v-model='gstore.create_code'>)</span>
|
|
</h1>
|
|
|
|
<div class='table little'>
|
|
<div>
|
|
<span class='notlast active reflow' data-error='0'>0 CM</span>
|
|
</div>
|
|
<div>
|
|
<span class='notlast active reflow' data-error='0'>0 TD</span>
|
|
</div>
|
|
<div>
|
|
<span class='notlast active reflow' data-error='0'>0 TP</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div :class="gstore.create_err.length > 0 ? 'sub warning' : 'sub'" :data-valid='gstore.create_err_valid?1:0'>{{ gstore.create_err }}</div>
|
|
|
|
<div class='footer'>
|
|
<span class='course'><input type='text' placeholder='???' v-model='gstore.create_vol.c'><span>Cours</span></span>
|
|
<hr>
|
|
<span class='td'><input type='text' placeholder='???' v-model='gstore.create_vol.td'><span>TD</span></span>
|
|
<hr>
|
|
<span class='tp'><input type='text' placeholder='???' v-model='gstore.create_vol.tp'><span>TP</span></span>
|
|
</div>
|
|
|
|
<div class='footer'>
|
|
<button class='valid' @click='gstore.ic_handler()'>Créer l'UE</button>
|
|
<button class='neutral' @click='gstore.ic_reset(); gstore.create_card=false'>Annuler</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if='gstore.ues.length <= 0' data-anim='0'>Aucune UE trouvée</section>
|
|
|
|
<section v-for='(ue, pi) in gstore.ues'
|
|
:class="gstore.edit_i==pi ? 'search' : ''"
|
|
:data-id='ue.code'
|
|
:data-label='ue.label'>
|
|
|
|
|
|
<!-- if VIEW MODE -->
|
|
<div class='goo-menu' v-show='gstore.edit_i!=pi'>
|
|
<div class='enabled' :data-enabled='ue.code' :data-active='ue.disabled?0:1' title='UE activée' @click="gstore.ia_handler(pi)"></div>
|
|
<div class='required' :data-required='ue.code' :data-active='ue.required?1:0' title='UE obligatoire' @click="gstore.io_handler(pi)"></div>
|
|
<div class='remove' :data-remove='ue.code' title='Supprimer' @click="gstore.ir_handler(ue.code)"></div>
|
|
<div class='edit' :data-edit='ue.code' title='Modifier' @click="gstore.ie_toggle(pi)"></div>
|
|
</div>
|
|
|
|
<!-- if VIEW MODE -->
|
|
<span v-show='gstore.edit_i!=pi' class='category'>{{ ue.labelForm || 'Aucune formation par défaut' }}</span>
|
|
<!-- if EDIT MODE -->
|
|
<select v-show='gstore.edit_i==pi' v-model='gstore.edit_form' class='category'>
|
|
<option selected='selected' disabled='disabled' value='-'>Formation par défaut</option>
|
|
<option value='-1'>Aucune formation par défaut</option>
|
|
<option v-for='form in gstore.formations' :value='form.idForm'>{{ form.labelForm }}</option>
|
|
</select>
|
|
<!-- endif -->
|
|
|
|
<!-- if VIEW MODE -->
|
|
<h1 v-show='gstore.edit_i!=pi' :class='ue.required?`pin`:`pin disabled`' :title='ue.required?`obligatoire`:`optionnelle`'><span :data-strike='ue.disabled?1:0'>{{ ue.label }}</span><span :data-visible='1'>({{ ue.code }})</span></h1>
|
|
<!-- if EDIT MODE -->
|
|
<h1 v-show='gstore.edit_i==pi' :class='ue.required?`pin`:`pin disabled`'>
|
|
<input type='text' placeholder='Libellé' v-model='gstore.edit_label'>
|
|
<!-- <span :data-visible='1'>({{ ue.code }})</span> -->
|
|
<span data-visible='1'>(<input type='text' placeholder='code' v-model='gstore.edit_code'>)</span>
|
|
</h1>
|
|
<!-- endif -->
|
|
|
|
<div class='table little'>
|
|
<div>
|
|
<span class='active reflow' :data-error='ue.nbrCours>ue.nbrProfCours || ue.modCours > 0?1:0'>{{ ue.nbrCours }} CM</span>
|
|
<span v-show='ue.nbrCours>ue.nbrProfCours' class='notlast user-icon reflow nospace' :data-tooltip='`${ue.nbrCours-ue.nbrProfCours} enseignant(s) manquant(s)`'></span>
|
|
<span v-show='ue.modCours > 0' class='notlast time-icon reflow nospace' :data-tooltip='`${ue.volumeCours-ue.modCours} à ajouter | ${ue.modCours} à enlever`'></span>
|
|
</div>
|
|
<div>
|
|
<span class='active reflow' :data-error='ue.nbrTD>ue.nbrProfTD || ue.modTD > 0?1:0'>{{ ue.nbrTD }} TD</span>
|
|
<span v-show='ue.nbrTD>ue.nbrProfTD' class='notlast user-icon reflow nospace' :data-tooltip='`${ue.nbrCours-ue.nbrProfCours} enseignant(s) manquant(s)`'></span>
|
|
<span v-show='ue.modTD > 0' class='notlast time-icon reflow nospace' :data-tooltip='`${ue.volumeTD-ue.modTD} à ajouter | ${ue.modTD} à enlever`'></span>
|
|
</div>
|
|
<div>
|
|
<span class='active reflow' :data-error='ue.nbrTP>ue.nbrProfTP || ue.modTP > 0?1:0'>{{ ue.nbrTP }} TP</span>
|
|
<span v-show='ue.nbrTP>ue.nbrProfTP' class='notlast user-icon reflow nospace' :data-tooltip='`${ue.nbrCours-ue.nbrProfCours} enseignant(s) manquant(s)`'></span>
|
|
<span v-show='ue.modTP > 0' class='notlast time-icon reflow nospace' :data-tooltip='`${ue.volumeTP-ue.modTP} à ajouter | ${ue.modTP} à enlever`'></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- if VIEW MODE -->
|
|
<div v-show='gstore.edit_i!=pi' class='taglist'>
|
|
<span v-if='ue.formations.length==0' class='tag invalid'>Aucune formation</span>
|
|
<span v-for='form_id in ue.formations' :class="!!gstore.form_by_id(form_id).isInternal ? 'tag search' : 'tag'">{{ gstore.form_by_id(form_id).labelForm || '???' }}</span>
|
|
</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 -->
|
|
|
|
|
|
<!-- if VIEW MODE -->
|
|
<div class='footer' v-show='gstore.edit_i!=pi'>
|
|
<button class='neutral' @click='gstore.nav_in(pi)'>Configurer</button>
|
|
</div>
|
|
<!-- if EDIT MODE -->
|
|
<div class='footer' v-show='gstore.edit_i==pi'>
|
|
<button class='search' @click='gstore.ie_handler(pi)'>Modifier l'UE</button>
|
|
<button class='grey' @click='gstore.ie_toggle(-1)'>Annuler</button>
|
|
</div>
|
|
<!-- endif -->
|
|
|
|
<div class='info'>
|
|
<strong class='cm reflow'>{{ ue.volumeCours}}</strong> CM
|
|
<strong class='td reflow'>{{ ue.volumeTD}}</strong> TD
|
|
<strong class='tp reflow'>{{ ue.volumeTP }}</strong> TP →
|
|
<strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'CONTAINER_VIEW',
|
|
data(){
|
|
return { gstore: gstore.get }
|
|
},
|
|
beforeMount(){
|
|
|
|
// set onblur to hide filter
|
|
window.onblur.link('ue.filter', (e) => {
|
|
|
|
// ignore [data-unblur-filter] elements
|
|
if( e.target.getAttribute('data-unblur-filter') !== null )
|
|
return;
|
|
|
|
// else: hide
|
|
gstore.get.show_fgroup(-1);
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
</script>s |