now better version management all-in-header

webpack/scss/constants.scss

@@ -23,6 +23,7 @@ $rd-form-valid-color:   '20d696';
 $rd-form-neutral-color: 'b8c0c8';
 $rd-form-search-color:  '1d74e5';
 $rd-form-invalid-color: 'ea4b35';
+$rd-form-primary-color: '54627c';
 
 // Menu
 $menu-bg: #333;

webpack/scss/header.scss

@@ -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) */
 		& > div.department-dialog,
 		& > div.version-dialog{
@@ -64,6 +121,8 @@
 			border-top: 0;
 			border-radius: 0 0 3px 3px;
 
+			&>:first-child{ border-top: 1px solid #ddd; }
+
 			background-color: #fff;
 
 			// box-shadow: 0 2px 2px #ddd;
@@ -77,7 +136,7 @@
 				position: relative;
 
 				padding: .5em 1em;
-				padding-left: .5em;
+				padding-left: 2em;
 
 				background-color: #fff;
 
@@ -88,53 +147,29 @@
 				// hover animation
 				&: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;
 						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;
 				}
 
 			}

webpack/vue/header.vue

@@ -15,13 +15,16 @@
 		<!-- 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='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,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>
@@ -47,7 +50,9 @@ export default {
 			version: {
 				dialog:  false,
 				current: -1,
-				list:    []
+				list:    [],
+				edit: false,
+				newName: ''
 			}
 	    };
 	},
@@ -81,7 +86,7 @@ export default {
 				if( this.version.list[v].id == id )
 					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') ){
 
 						return popup.ask({
-							title:   'Erreur ('+err_code+')',
+							title:   'Erreur ('+rs.error+')',
 							content: 'La création de version à échoué.',
 							action:  'OK',
 							type:    'neutral'
@@ -191,36 +196,36 @@ export default {
 
 		/* (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;
 
-			var ver = this.version.list[index];
+			var newname = this.version.newName;
-			var newname = ver.new_name;
 
 			// 2. Popup confirm
 			(new Promise( (resolve, reject) => {
 
 				popup.ask({
 					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',
-					type:    'valid'
+					type:    'search'
 				}, (popup_rs) => { popup_rs && resolve() });
 
 			// 3. On popup confirm
 			})).then( () => {
 
 				// 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
 					if( rs.error !== 0 || !rs.hasOwnProperty('updated') ){
 
 						return popup.ask({
-							title:   'Erreur ('+err_code+')',
+							title:   'Erreur ('+rs.error+')',
 							content: 'La modification a échoué.',
 							action:  'OK',
 							type:    'neutral'
@@ -229,13 +234,70 @@ export default {
 					}
 
 					// 3. Update GUI
-					ver.name = newname;
+					cur.name = newname;
-					ver.new_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));
+
+			});
+
 		}
 
 	},