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='version.dialog=!version.dialog' :data-id='get_vcurrent().id' data-unblur-version>{{ get_vcurrent().name }}</div>
			<div class='version-dialog' v-show='version.dialog' data-unblur-version>
				<span v-for='v in version.list' v-show='v.id!=version.current' @click='v_switch(v.id)' :data-id='v.id' data-unblur-version>{{ v.name }}</span>
				<span @click='v_create()' data-unblur-version data-id='-1'>Créer</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,

			version: {
				dialog:  false,
				current: -1,
				list:    []
			}
	    };
	},
	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 version data
		---------------------------------------------------------*/
		get_vcurrent(id){

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

			// search in @ist where id is @id
			for( var v in this.version.list )
				if( this.version.list[v].id == id )
					return this.version.list[v];

			return { id: -2, name: '-' };

		},

		/* (3) Switch to other department
		---------------------------------------------------------*/
		d_switch(id){

			// 1. De-activate dialogs
			this.d_dialog = false;
			this.version.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.version.dialog = false;

			// 2. Do nothing if no change
			if( this.version.current == id )
				return;

			// 3. Ask for department change
			api.call(`GET department/version/switch/${id}`, {}, function(rs){
				console.log(rs);

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

				// 2. Update GUI
				this.version.current = 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.version.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/`, {label:'test'}, 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'
						}, () => {});

					}

					// 3. Update GUI
					this.version.list.push( { id: parseInt(rs.created_id), label: label } );

				}.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.version.list = [];

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

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

				// add version to list
				this.version.list.push( { id: ver.iddatabase, name: ver.label } );

			}

			this.version

		}.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.version.dialog = false;

		});

	}
}
</script>