137 lines
3.2 KiB
Vue
137 lines
3.2 KiB
Vue
<template>
|
|
|
|
<div id='HEADER'>
|
|
|
|
<!-- Department management -->
|
|
<div class='departments' data-unblur-department>
|
|
|
|
<div class='current' @click='d_dialog=!d_dialog' data-unblur-department>{{ get_dcurrent().label || 'département à jour' }}</div>
|
|
<div class='department-dialog' v-show='d_dialog' data-unblur-department>
|
|
<span v-for='d in dpts' @click='d_switch(d.id)' data-unblur-department>{{ d.label }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Version management -->
|
|
<div class='versions' data-unblur-version>
|
|
|
|
<div class='current' @click='v_dialog=!v_dialog' :data-id='get_vcurrent().id' data-unblur-version>{{ get_vcurrent().date || 'version à jour' }}</div>
|
|
<div class='version-dialog' v-show='v_dialog' data-unblur-version>
|
|
<span v-for='v in vers' v-show='v.id!=ver_id' @click='v_switch(v.id)' :data-id='v.id' data-unblur-version>{{ v.date || 'version à jour' }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- <div class='header-title'>{{ gstore.header_title }}</div> -->
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
name: 'HEADER',
|
|
data(){
|
|
return {
|
|
gstore: gstore.get,
|
|
is_connected: _SERVER.session.connected,
|
|
|
|
d_dialog: false,
|
|
dep_id: _SERVER.session.department_id,
|
|
dpts: _SERVER.session.departments,
|
|
|
|
v_dialog: false,
|
|
ver_id: -1,
|
|
vers: [
|
|
{ id: -1, date: null },
|
|
{ id: 0, date: '01-02-2017' },
|
|
{ id: 1, date: '23-03-2017' }
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
|
|
/* (1) Get current department data
|
|
---------------------------------------------------------*/
|
|
get_dcurrent(){
|
|
|
|
// search in @dpts where id is @dep_id
|
|
for( var d in this.dpts )
|
|
if( this.dpts[d].id == this.dep_id )
|
|
return this.dpts[d];
|
|
|
|
return { id: null, label: null };
|
|
|
|
},
|
|
|
|
/* (2) Get current versoin data
|
|
---------------------------------------------------------*/
|
|
get_vcurrent(){
|
|
|
|
// search in @vers where id is @ver_id
|
|
for( var v in this.vers )
|
|
if( this.vers[v].id == this.ver_id )
|
|
return this.vers[v];
|
|
|
|
return { date: null };
|
|
|
|
},
|
|
|
|
/* (3) Switch to other department
|
|
---------------------------------------------------------*/
|
|
d_switch(id){
|
|
|
|
// 1. De-activate dialogs
|
|
this.d_dialog = false;
|
|
this.v_dialog = false;
|
|
|
|
// 2. Ask for department change
|
|
api.call(`PUT department/${id}`, {}, function(rs){
|
|
|
|
// error -> do nothing
|
|
if( rs.error !== 0 || rs.success !== true )
|
|
return;
|
|
|
|
// 3. Update GUI
|
|
this.dep_id = id;
|
|
|
|
// 4. Reload page if needed
|
|
setTimeout(() => { document.location = ''; }, 200);
|
|
|
|
}.bind(this));
|
|
|
|
},
|
|
|
|
/* (4) Switch to other version
|
|
---------------------------------------------------------*/
|
|
v_switch(id){
|
|
|
|
// 1. De-activate dialogs
|
|
this.d_dialog = false;
|
|
this.v_dialog = false;
|
|
|
|
// 2. Ask for version change
|
|
// TODO: api.call()
|
|
|
|
// 3. Update GUI
|
|
this.ver_id = id;
|
|
}
|
|
},
|
|
beforeMount(){
|
|
|
|
// set onblur to hide department lists
|
|
window.onblur.link('header.department', (e) => {
|
|
|
|
// only hide not [data-unblur-department] elements
|
|
if( e.target.getAttribute('data-unblur-department') === null )
|
|
this.d_dialog = false;
|
|
|
|
// only hide not [data-unblur-version] elements
|
|
if( e.target.getAttribute('data-unblur-version') === null )
|
|
this.v_dialog = false;
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
</script> |