ptut-vhost/webpack/vue/header.vue

<template>

	<div id='HEADER'>

		<!-- Department management -->
		<div class='departments' data-unblur-department>

			<div class='current' data-unblur-department>
				<span class='create' @click='!department.create?(department.newLabel="")+(department.create=true):d_create()'></span>
				<span class='remove' @click='d_remove()'></span>
				<input v-if='department.create' type='text' placeholder='Nouveau nom' v-model='department.newLabel' size=''>
				<span v-if='!department.create' @click='department.dialog=!department.dialog' data-unblur-department>{{ get_dcurrent().label }}</span>
			</div>

			<div class='department-dialog' v-show='department.dialog' data-unblur-department>
				<span v-for='d in department.list' v-show='d.id!=department.current' @click='d_switch(d.id)' data-unblur-department>{{ d.label }}</span>
			</div>

		</div>

		<!-- Version management -->
		<div class='versions' data-unblur-version>

			<div class='current' :data-id='get_vcurrent().id' data-unblur-version>
				<span class='remove' @click='v_remove()'></span>
				<span class='edit' @click='!version.edit?(version.newName="")+(version.edit=true):v_edit()'></span>
				<input v-if='version.edit' type='text' :placeholder='get_vcurrent().name' v-model='version.newName' size=''>
				<span v-if='!version.edit' @click='version.dialog=!version.dialog' data-unblur-version>{{ get_vcurrent().name }}</span>
			</div>

			<div class='version-dialog' v-show='version.dialog' data-unblur-version>
				<span v-for='v in version.list' @click='v_switch(v.id)' v-show='v.id!=version.current' :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>

		<!-- Export all -->
		<div class='global-export'>
			<div class='current export' @click='global_export()'>
				<span class='export'></span>
				exporter
			</div>
		</div>

	</div>

</template>


<script>
export default {
	name: 'HEADER',
	data(){
	    return {
	        gstore:			gstore.get,
			is_connected:	_SERVER.session.connected,

			department: {
				dialog: false,
				current: _SERVER.session.department_id,
				list:   _SERVER.session.departments,
				create: false,
				newLabel: ''
			},

			version: {
				dialog:  false,
				current: -1,
				list:    [],
				edit: false,
				newName: ''
			}
	    };
	},
	methods: {

		/* (1) Get current department data
		---------------------------------------------------------*/
		get_dcurrent(id){

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

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

			return { id: -2, name: 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.department.dialog = false;
			this.version.dialog = false;

			// 2. Do nothing if no change
			if( this.department.current == 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.department.current = 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.department.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){

				// 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 empty department
		---------------------------------------------------------*/
		d_create(){

			// 1. De-activate dialogs
			this.department.dialog = false;
			this.version.dialog = false;

			// get current department
			var cur = this.get_dcurrent();
			if( cur.id < 0 || this.department.newLabel.length < 1 ){
				this.department.create = false;
				return;
			}

			var newlabel = this.department.newLabel;

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

				popup.ask({
					title:   'Confirmation de création de département',
					content: `Le nouveau département <b>${newlabel}</b> va être créé; il ne contiendra aucune donnée, il permet de gérer plusieurs départements ne partageant pas les mêmes UEs, enseignants, formations, etc<br><br>Voulez-vous créer un nouveau département vide ?`,
					action:  'Créer',
					type:    'valid'
				}, (popup_rs) => { popup_rs && resolve() });

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

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

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

						return popup.ask({
							title:   'Erreur ('+rs.error+')',
							content: 'La création de département a échoué.',
							action:  'OK',
							type:    'neutral'
						}, () => {});

					}

					// 3. Update GUI
					this.department.list.push( { id: parseInt(rs.created_id), name: newlabel } );

				}.bind(this));

			});

		},

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

			// 1. De-activate dialogs
			this.department.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( () => {

				let newVersionName = `${this.get_vcurrent().name}*`;
				// Call API to create a new version
				api.call(`POST department/version/`, {label:newVersionName}, function(rs){

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

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

					}

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

				}.bind(this));

			});

		},

		/* (6) Rename a version
		---------------------------------------------------------*/
		v_edit(){

			// get current version
			var cur = this.get_vcurrent();
			if( cur.id < 0 || this.version.newName.length < 1 ){
				this.version.edit = false;
				return;
			}

			var newname = this.version.newName;

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

				popup.ask({
					title:   'Confirmation de modification de version',
					content: `La version <b>${cur.name}</b> va être renommée en <b>${newname}</b><br><br>Voulez-vous valider cette modification ?`,
					action:  'Valider',
					type:    'search'
				}, (popup_rs) => { popup_rs && resolve() });

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

				// Call API to create a new version
				api.call(`PUT department/version/${cur.id}`, {label:newname}, function(rs){

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

						return popup.ask({
							title:   'Erreur ('+rs.error+')',
							content: 'La modification a échoué.',
							action:  'OK',
							type:    'neutral'
						}, () => {});

					}

					// 3. Update GUI
					cur.name = newname;

				}.bind(this));

			}).finally( () => {
				this.version.edit = false;
			})

		},

		/* (7) Remove a department
		---------------------------------------------------------*/
		d_remove(){

			// get current department
			var cur = this.get_dcurrent();
			if( cur.id < 0 )
				return;

			// if last department -> forbid
			if( this.department.list.length < 2 ){
				return popup.ask({
					title:   'Dernier départment',
					content: `Le département <b>${cur.label}</b> ne peut être supprimé car il est le dernier disponible`,
					action:  'OK',
					type:    'invalid'
				});
			}

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

				popup.ask({
					title:   'Confirmation de suppression',
					content: `Le département <b>${cur.label}</b> va être supprimé. Toutes les données seront perdues de manière définitive</b><br><br>Voulez-vous supprimer ce département ?`,
					action:  'Supprimer',
					type:    'invalid'
				}, (popup_rs) => { popup_rs && resolve() });

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

				// Call API to delete the current department
				api.call(`DELETE department/${cur.id}`, {}, function(rs){

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

						return popup.ask({
							title:   'Erreur ('+rs.error+')',
							content: 'La suppression a échoué.',
							action:  'OK',
							type:    'neutral'
						}, () => {});

					}

					// 3. Reload page
					document.location = '';

				}.bind(this));

			});

		},

		/* (7) Remove a version
		---------------------------------------------------------*/
		v_remove(){

			// get current version
			var cur = this.get_vcurrent();
			if( cur.id < 0 )
				return;

			// if last version -> forbid
			if( this.version.list.length < 2 ){
				return popup.ask({
					title:   'Dernière version',
					content: `La version <b>${cur.name}</b> ne peut être supprimée car il ne reste aucune autre version pour ce département`,
					action:  'OK',
					type:    'invalid'
				});
			}

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

				popup.ask({
					title:   'Confirmation de suppression',
					content: `La version <b>${cur.name}</b> va être supprimée. Toutes les données seront perdues de manière définitive</b><br><br>Voulez-vous supprimer cette version ?`,
					action:  'Supprimer',
					type:    'invalid'
				}, (popup_rs) => { popup_rs && resolve() });

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

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

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

						return popup.ask({
							title:   'Erreur ('+rs.error+')',
							content: 'La suppression a échoué.',
							action:  'OK',
							type:    'neutral'
						}, () => {});

					}

					// 3. Reload page
					document.location = '';

				}.bind(this));

			});

		},


		/* (x) Exports all data about this department's version
		---------------------------------------------------------*/
		global_export(){

			api.call(`GET department/export`, {}, function(rs){
				console.log(rs);

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

					return popup.ask({
						title:   'Erreur ('+rs.error+')',
						content: 'L\'export a échoué.',
						action:  'OK',
						type:    'neutral'
					}, () => {});

				}

				// 2. Launch download
				document.location = rs.link;

			}.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, new_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.department.dialog = false;

			// only hide not [data-unblur-version] elements
			if( e.target.getAttribute('data-unblur-version') === null )
				this.version.dialog = false;

		});

	}
}
</script>