ptut-vhost/webpack/vue/header.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' v-show='d.id!=dep_id' @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>
				<span @click='v_create()' data-unblur-version data-id='-1'>Nouvelle version</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(id){

			// use @dep_id, if invalid argument @id
			( isNaN(id) ) && ( id = this.dep_id );

			// search in @dpts where id is @dep_id
			for( var d in this.dpts )
				if( this.dpts[d].id == id )
					return this.dpts[d];

			return { id: null, label: null };

		},

		/* (2) Get current versoin data
		---------------------------------------------------------*/
		get_vcurrent(id){

			// use @dep_id, if invalid argument @id
			( isNaN(id) ) && ( id = this.ver_id );

			// search in @vers where id is @ver_id
			for( var v in this.vers )
				if( this.vers[v].id == 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. Do nothing if no change
			if( this.dep_id == id )
				return;

			// 3. Ask for department change
			api.call(`PUT department/${id}`, {}, function(rs){

				// 1. error -> do nothing
				if( rs.error !== 0 || rs.switched !== true )
					return;

				// 2. Update GUI
				this.dep_id = id;

				// 3. 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. Do nothing if no change
			if( this.ver_id == id )
				return;

			// 3. Get version date
			var verdate = this.get_vcurrent(id).date;

			// 4. If null date -> go to current version
			( verdate === null ) && ( verdate = '' );

			// 5. Ask for department change
			api.call(`PUT department/version/0/${verdate}`, {}, function(rs){

				// 1. error -> do nothing
				if( rs.error !== 0 || rs.updated !== true )
					return;

				// 2. Update GUI
				this.ver_id = id;

				// 3. Reload page if needed
				setTimeout(() => { document.location = ''; }, 200);

			}.bind(this));

		},

		/* (5) Create a new version from now
		---------------------------------------------------------*/
		v_create(){

			// 1. De-activate dialogs
			this.d_dialog = false;
			this.v_dialog = false;

			// 2. Popup confirm
			(new Promise( (resolve, reject) => {

				popup.ask({
					title:   'Confirmation de création de version',
					content: `Une sauvegarde (ou version) va être crée à partir de l'état actuel des données de tout le département<br><br>Voulez-vous créer cette sauvegarde ?`,
					action:  'Créer',
					type:    'valid'
				}, (popup_rs) => { popup_rs && resolve() });

			// 3. On popup confirm
			})).then( () => {

				// Call API to create a new version
				api.call(`POST department/version/`, {}, function(rs){

					// 1. error -> popup
					if( rs.error !== 0 || !rs.hasOwnProperty('created_id') ){

						return popup.ask({
							title:   'Error ('+err_code+')',
							content: 'La création de sauvegarde à échoué.',
							action:  'OK',
							type:    'neutral'
						}, () => {});

					}

					// 2. Get last version id
					var last_id = this.vers[ this.vers.length-1 ].id;

					// 3. Update GUI
					this.vers.push( { id: last_id+1, date: rs.created_id } );

				}.bind(this));

			})

		}

	},
	beforeMount(){

		/* (1) Try to fetch versions from API */
		api.call('GET department/version', {}, function(rs){

			// 1. Manage error
			if( rs.error !== 0 || !rs.hasOwnProperty('versions') )
				return;

			// 2. Init version list
			this.vers = [ { id: -1, date: null } ];
			var idv = 0;

			// 3. Store versions
			for( var ver of rs.versions ){

				// if current version -> set @ver_id
				if( _SERVER.session.version === ver )
					this.ver_id = idv

				// add version to list
				this.vers.push( { id: idv++, date: ver } );

			}

		}.bind(this) );



		/* (2) 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>