ptut-vhost/webpack/vue/header.vue

506 lines
13 KiB
Vue
Raw Permalink Normal View History

<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>
2018-05-09 13:57:47 +00:00
<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( () => {
2018-05-09 13:57:47 +00:00
let newVersionName = `${this.get_vcurrent().name}*`;
// Call API to create a new version
2018-05-09 13:57:47 +00:00
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 } );
2018-05-09 13:57:47 +00:00
}.bind(this));
});
},
/* (6) Rename a version
---------------------------------------------------------*/
v_edit(){
2018-05-09 13:57:47 +00:00
// get current version
var cur = this.get_vcurrent();
if( cur.id < 0 || this.version.newName.length < 1 ){
this.version.edit = false;
2018-05-09 13:57:47 +00:00
return;
}
2018-05-09 13:57:47 +00:00
var newname = this.version.newName;
2018-05-09 13:57:47 +00:00
// 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 ?`,
2018-05-09 13:57:47 +00:00
action: 'Valider',
type: 'search'
2018-05-09 13:57:47 +00:00
}, (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){
2018-05-09 13:57:47 +00:00
// 1. error -> popup
if( rs.error !== 0 || !rs.hasOwnProperty('updated') ){
return popup.ask({
title: 'Erreur ('+rs.error+')',
2018-05-09 13:57:47 +00:00
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){
// 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));
}
},
2018-05-09 13:57:47 +00:00
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
2018-05-09 13:57:47 +00:00
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>