352 lines
8.7 KiB
Vue
352 lines
8.7 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' 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' :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>
|
|
<!-- <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: [],
|
|
edit: false,
|
|
newName: ''
|
|
}
|
|
};
|
|
},
|
|
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){
|
|
|
|
// 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( () => {
|
|
|
|
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, new_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 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));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
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.d_dialog = false;
|
|
|
|
// only hide not [data-unblur-version] elements
|
|
if( e.target.getAttribute('data-unblur-version') === null )
|
|
this.version.dialog = false;
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
</script> |