now better version management all-in-header
This commit is contained in:
parent
1225f69d9d
commit
78c3d1c02d
|
@ -23,6 +23,7 @@ $rd-form-valid-color: '20d696';
|
||||||
$rd-form-neutral-color: 'b8c0c8';
|
$rd-form-neutral-color: 'b8c0c8';
|
||||||
$rd-form-search-color: '1d74e5';
|
$rd-form-search-color: '1d74e5';
|
||||||
$rd-form-invalid-color: 'ea4b35';
|
$rd-form-invalid-color: 'ea4b35';
|
||||||
|
$rd-form-primary-color: '54627c';
|
||||||
|
|
||||||
// Menu
|
// Menu
|
||||||
$menu-bg: #333;
|
$menu-bg: #333;
|
||||||
|
|
|
@ -48,6 +48,63 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// current version: EDIT + REMOVE
|
||||||
|
&.versions > div.current{
|
||||||
|
|
||||||
|
span.edit,
|
||||||
|
span.remove{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
top: .2em;
|
||||||
|
width: 1.1em;
|
||||||
|
height: 1.1em;
|
||||||
|
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
background: center center no-repeat;
|
||||||
|
background-size: 80% auto;
|
||||||
|
|
||||||
|
&.edit{
|
||||||
|
background-image: url('/asset/svg/a.svg@b8c0c8');
|
||||||
|
&:hover{
|
||||||
|
background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.remove{
|
||||||
|
background-image: url('/asset/svg/cross.svg@b8c0c8');
|
||||||
|
&:hover{
|
||||||
|
background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child{
|
||||||
|
margin-right: .5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// editable input
|
||||||
|
& > input[type='text']{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 10em;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
// background-color: #f00;
|
||||||
|
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/* (1.2) Version dialog (to switch to another) */
|
/* (1.2) Version dialog (to switch to another) */
|
||||||
& > div.department-dialog,
|
& > div.department-dialog,
|
||||||
& > div.version-dialog{
|
& > div.version-dialog{
|
||||||
|
@ -64,6 +121,8 @@
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
border-radius: 0 0 3px 3px;
|
border-radius: 0 0 3px 3px;
|
||||||
|
|
||||||
|
&>:first-child{ border-top: 1px solid #ddd; }
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
// box-shadow: 0 2px 2px #ddd;
|
// box-shadow: 0 2px 2px #ddd;
|
||||||
|
@ -77,7 +136,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
padding: .5em 1em;
|
padding: .5em 1em;
|
||||||
padding-left: .5em;
|
padding-left: 2em;
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
|
@ -88,53 +147,29 @@
|
||||||
// hover animation
|
// hover animation
|
||||||
&:hover{ background-color: darken(#fff, 5%); }
|
&:hover{ background-color: darken(#fff, 5%); }
|
||||||
|
|
||||||
// pre-icons
|
// switch+create icons
|
||||||
& > span.edit,
|
&:before{
|
||||||
& > span.switch,
|
content: '';
|
||||||
& > span.create{
|
|
||||||
display: inline-block;
|
display: block;
|
||||||
position: relative;
|
position: absolute;
|
||||||
// top: calc( 50% - .7em/2 );
|
top: calc( 50% - 1em/2 );
|
||||||
// left: calc( 1em/2 + .7em/2 );
|
left: calc( .5em/2 + 1em/2 );
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
|
|
||||||
padding-right: .5em;
|
background: url('/asset/svg/switch.svg@#{$rd-form-primary-color}') center center no-repeat;
|
||||||
|
background-size: auto 80%;
|
||||||
&.switch{
|
|
||||||
background: url('/asset/svg/switch.svg@b8c0c8') center center no-repeat;
|
|
||||||
background-size: 80% auto;
|
|
||||||
&:hover{
|
|
||||||
background-image: url('/asset/svg/switch.svg@#{$rd-form-invalid-color}');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.edit{
|
// create icon specifications
|
||||||
background: url('/asset/svg/a.svg@b8c0c8') center center no-repeat;
|
&[data-id='-1']{
|
||||||
background-size: contain;
|
|
||||||
&:hover{
|
&:before{
|
||||||
background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}');
|
background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}');
|
||||||
}
|
background-size: auto 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.create{
|
|
||||||
background: url('/asset/svg/plus.svg@#{$rd-form-valid-color}') center center no-repeat;
|
|
||||||
background-size: 60% auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
& > input{
|
|
||||||
width: auto;
|
|
||||||
max-width: 6em;
|
|
||||||
padding: 0;
|
|
||||||
margin: .25em .5em;
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
background: transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,13 +15,16 @@
|
||||||
<!-- Version management -->
|
<!-- Version management -->
|
||||||
<div class='versions' data-unblur-version>
|
<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='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>
|
<div class='version-dialog' v-show='version.dialog' data-unblur-version>
|
||||||
<span v-for='(v,i) in version.list' v-show='v.id!=version.current' :data-id='v.id' 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 :class='v.name==v.new_name?`switch`:`edit`' @click='v.name==v.new_name?v_switch(v.id):v_rename(i)'></span><input data-unblur-version type='text' :placeholder='v.name' v-model='v.new_name'>
|
<span @click='v_create()' data-unblur-version data-id='-1'>Créer</span>
|
||||||
</span>
|
|
||||||
<span @click='v_create()' data-unblur-version data-id='-1'><span class='create'></span>Créer</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -47,7 +50,9 @@ export default {
|
||||||
version: {
|
version: {
|
||||||
dialog: false,
|
dialog: false,
|
||||||
current: -1,
|
current: -1,
|
||||||
list: []
|
list: [],
|
||||||
|
edit: false,
|
||||||
|
newName: ''
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -81,7 +86,7 @@ export default {
|
||||||
if( this.version.list[v].id == id )
|
if( this.version.list[v].id == id )
|
||||||
return this.version.list[v];
|
return this.version.list[v];
|
||||||
|
|
||||||
return { id: -2, name: '-', new_name: '-' };
|
return { id: -2, name: '-' };
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -172,7 +177,7 @@ export default {
|
||||||
if( rs.error !== 0 || !rs.hasOwnProperty('created_id') ){
|
if( rs.error !== 0 || !rs.hasOwnProperty('created_id') ){
|
||||||
|
|
||||||
return popup.ask({
|
return popup.ask({
|
||||||
title: 'Erreur ('+err_code+')',
|
title: 'Erreur ('+rs.error+')',
|
||||||
content: 'La création de version à échoué.',
|
content: 'La création de version à échoué.',
|
||||||
action: 'OK',
|
action: 'OK',
|
||||||
type: 'neutral'
|
type: 'neutral'
|
||||||
|
@ -191,36 +196,36 @@ export default {
|
||||||
|
|
||||||
/* (6) Rename a version
|
/* (6) Rename a version
|
||||||
---------------------------------------------------------*/
|
---------------------------------------------------------*/
|
||||||
v_rename(index){
|
v_edit(){
|
||||||
|
|
||||||
// fail if not found index
|
// get current version
|
||||||
if( this.version.list[index] == null )
|
var cur = this.get_vcurrent();
|
||||||
|
if( cur.id < 0 )
|
||||||
return;
|
return;
|
||||||
|
|
||||||
var ver = this.version.list[index];
|
var newname = this.version.newName;
|
||||||
var newname = ver.new_name;
|
|
||||||
|
|
||||||
// 2. Popup confirm
|
// 2. Popup confirm
|
||||||
(new Promise( (resolve, reject) => {
|
(new Promise( (resolve, reject) => {
|
||||||
|
|
||||||
popup.ask({
|
popup.ask({
|
||||||
title: 'Confirmation de modification de version',
|
title: 'Confirmation de modification de version',
|
||||||
content: `La version <b>${ver.name}</b> va être renommée en <b>${newname}</b><br><br>Voulez-vous valider cette modification ?`,
|
content: `La version <b>${cur.name}</b> va être renommée en <b>${newname}</b><br><br>Voulez-vous valider cette modification ?`,
|
||||||
action: 'Valider',
|
action: 'Valider',
|
||||||
type: 'valid'
|
type: 'search'
|
||||||
}, (popup_rs) => { popup_rs && resolve() });
|
}, (popup_rs) => { popup_rs && resolve() });
|
||||||
|
|
||||||
// 3. On popup confirm
|
// 3. On popup confirm
|
||||||
})).then( () => {
|
})).then( () => {
|
||||||
|
|
||||||
// Call API to create a new version
|
// Call API to create a new version
|
||||||
api.call(`PUT department/version/${ver.id}`, {label:newname}, function(rs){
|
api.call(`PUT department/version/${cur.id}`, {label:newname}, function(rs){
|
||||||
|
|
||||||
// 1. error -> popup
|
// 1. error -> popup
|
||||||
if( rs.error !== 0 || !rs.hasOwnProperty('updated') ){
|
if( rs.error !== 0 || !rs.hasOwnProperty('updated') ){
|
||||||
|
|
||||||
return popup.ask({
|
return popup.ask({
|
||||||
title: 'Erreur ('+err_code+')',
|
title: 'Erreur ('+rs.error+')',
|
||||||
content: 'La modification a échoué.',
|
content: 'La modification a échoué.',
|
||||||
action: 'OK',
|
action: 'OK',
|
||||||
type: 'neutral'
|
type: 'neutral'
|
||||||
|
@ -229,13 +234,70 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. Update GUI
|
// 3. Update GUI
|
||||||
ver.name = newname;
|
cur.name = newname;
|
||||||
ver.new_name = newname;
|
|
||||||
|
|
||||||
}.bind(this));
|
}.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));
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue