ptut-vhost/webpack/component/ue/manage.vue

195 lines
6.3 KiB
Vue

<template>
<div id='CONTAINER' class='list'>
<div class='list container' data-anim-incoming='1' :data-anim-bounce='gstore.nav_anim.out?1:0'>
<section class='filter'>
<button class='back reflow search' @click='$router.back()'>Retour</button>
</section>
<!-- FILTERS -->
<section class='filter'>
<div style='flex-basis: 3.2em'></div>
<div :data-filter='gstore.order.current===0?1:0' @click='gstore.order_toggle(0)'>enseignant <span class='arrow' :data-way='gstore.order.way'></span></div>
<div :data-filter='gstore.order.current===1?1:0' @click='gstore.order_toggle(1)'>volume horaire <span class='arrow' :data-way='gstore.order.way'></span></div>
<div :data-filter='gstore.order.current===2?1:0' @click='gstore.order_toggle(2)'>formations <span class='arrow' :data-way='gstore.order.way'></span></div>
</section>
<!-- CREATE -->
<section class='create'
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'>
<div class='icon' @click='gstore.ccreate()'></div>
<select v-model='gstore.ccrea.prof'>
<option value='-1'>Aucun enseignant affecté</option>
<option v-for='p in gstore.manage.prof' :value='p.idProfesseur'>{{ `${p.firstName} ${p.lastName}` }}</option>
</select>
<select v-model='gstore.ccrea.type' class='min'>
<option value='-' disabled>Type</option>
<option value='0'>CM</option>
<option value='1'>TD</option>
<option value='2'>TP</option>
</select>
<input type='text' placeholder='volume' v-model='gstore.ccrea.vol'>
<div style='margin-left: 1em;' :class="gstore.ccrea.err.length > 0 ? (gstore.ccrea.valid ? 'warning valid' : 'warning invalid') : ''" :data-valid='gstore.ccrea.valid?1:0'>{{ gstore.ccrea.err }}</div>
</section>
<section class='filter'></section>
<!-- COURS -->
<section class='bcours'
v-for='(c,i) in gstore.manage.cours'
:data-id='c.idCours'
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'
:data-prof='c.idProf'
:data-vol='c.volume'
:data-form='c.formations.join(`|`)'>
<div class='icon remove' @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>
</select>
<div class='cm reflow active'>{{ c.volume }}</div>
<div class='taglist'>
<div v-for='f in c.formations' data-action>
<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
<span data-remove @click='gstore.rem_form(0, i, f)'></span>
</div>
<div data-action>
<select class='tag' v-model='gstore.manage.cours[i].add_form'>
<option value='-' selected disabled>Ajouter</option>
<option
v-for='f in gstore.formations'
v-show='c.formations.indexOf(f.idForm) < 0'
:value='f.idForm'>{{ f.labelForm }}</option>
</select>
<span class='pointer' data-create @click='gstore.add_form(0, i)'></span>
</div>
</div>
</section>
<!-- TD -->
<section class='btd'
v-for='(td,i) in gstore.manage.td'
:data-id='td.idTD'
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'
:data-prof='td.idProf'
:data-vol='td.volume'
:data-form='td.formations.join(`|`)'>
<div class='icon remove' @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>
</select>
<div class='td reflow active'>{{ td.volume }}</div>
<div class='taglist'>
<div v-for='f in td.formations' data-action>
<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
<span data-remove @click='gstore.rem_form(1, i, f)'></span>
</div>
<div data-action>
<select class='tag'v-model='gstore.manage.td[i].add_form'>
<option value='-' selected disabled>Ajouter</option>
<option
v-for='f in gstore.formations'
v-show='td.formations.indexOf(f.idForm) < 0'
:value='f.idForm'>{{ f.labelForm }}</option>
</select>
<span class='pointer' data-create @click='gstore.add_form(1, i)'></span>
</div>
</div>
</section>
<!-- TP -->
<section class='btp'
v-for='(tp,i) in gstore.manage.tp'
:data-id='tp.idTP'
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'
:data-prof='tp.idProf'
:data-vol='tp.volume'
:data-form='tp.formations.join(`|`)'>
<div class='icon remove' @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>
</select>
<div class='tp reflow active'>{{ tp.volume }}</div>
<div class='taglist'>
<div v-for='f in tp.formations' data-action>
<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
<span data-remove @click='gstore.rem_form(2, i, f)'></span>
</div>
<div data-action>
<select class='tag' v-model='gstore.manage.tp[i].add_form'>
<option value='-' selected disabled>Ajouter</option>
<option
v-for='f in gstore.formations'
v-show='tp.formations.indexOf(f.idForm) < 0'
:value='f.idForm'>{{ f.labelForm }}</option>
</select>
<span class='pointer' data-create @click='gstore.add_form(2, i)'></span>
</div>
</div>
</section>
</div>
</div>
</template>
<script>
export default {
name: 'CONTAINER_VIEW',
data(){
return { gstore: gstore.get }
},
beforeMount(){
/* (1) Try to load data */
gstore.get.load_ue_groups(this.$route.params.code, 3).catch( (err) => { // try at max 3 times (200ms each) for UE to be loaded
/* (2) On error -> go to 'view' page */
gstore.get.router.push('/ue/view/');
});
}
}
</script>