ptut-vhost/webpack/vue/header.vue

<template>

	<div id='HEADER'>

		<!-- Department management -->
		<div class='departments'>

			<div class='current' @click='d_dialog=!d_dialog'>{{ get_dcurrent().label || 'département à jour' }}</div>
			<div class='department-dialog' v-show='d_dialog'>
				<span v-for='d in dpts' @click='d_switch(d.id)'>{{ d.label }}</span>
			</div>

		</div>

		<!-- Version management -->
		<div class='versions'>

			<div class='current' @click='v_dialog=!v_dialog' :data-id='get_vcurrent().id'>{{ get_vcurrent().date || 'version à jour' }}</div>
			<div class='version-dialog' v-show='v_dialog'>
				<span v-for='v in vers' v-show='v.id!=ver_id' @click='v_switch(v.id)' :data-id='v.id'>{{ 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;
		}
	}
}
</script>