department.create/delete(unimplemented server-side)/switch

build/api/module/departmentController.php

@@ -157,7 +157,7 @@ class departmentController
         $_SESSION['AvailableDepartments'] = $departments;
 
         //we are good now
-        return ["success" => true];
+        return [];
 
     }
 

webpack/scss/header.scss

@@ -34,6 +34,7 @@
 			margin-left: 1em;
 
 			padding: .5em 1em;
+			padding-left: .7em;
 
 			border: 1px solid #ddd;
 			border-radius: 3px;
@@ -48,22 +49,30 @@
 
 		}
 
-		// current version: EDIT + REMOVE
+		// current: CREATE + EDIT + REMOVE
-		&.versions > div.current{
+		& > div.current{
 
+			span.create,
 			span.edit,
 			span.remove{
 				display: inline-block;
 				position: relative;
 					top: .2em;
-					width: 1.1em;
+					width: 1em;
-					height: 1.1em;
+					height: 1em;
 
 				border-radius: 3px;
 
 				background: center center no-repeat;
 				background-size: 80% auto;
 
+				&.create{
+					background-image: url('/asset/svg/plus.svg@b8c0c8');
+					&:hover{
+						background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}');
+					}
+				}
+
 				&.edit{
 					background-image: url('/asset/svg/a.svg@b8c0c8');
 					&:hover{

webpack/vue/header.vue

@@ -5,9 +5,15 @@
 		<!-- 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='current' data-unblur-department>
-			<div class='department-dialog' v-show='d_dialog' data-unblur-department>
+				<span class='create' @click='!department.create?(department.newLabel="")+(department.create=true):d_create()'></span>
-				<span v-for='d in dpts' v-show='d.id!=dep_id' @click='d_switch(d.id)' data-unblur-department>{{ d.label }}</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>
@@ -43,9 +49,13 @@ export default {
 	        gstore:			gstore.get,
 			is_connected:	_SERVER.session.connected,
 
-			d_dialog: false,
+			department: {
-			dep_id:   _SERVER.session.department_id,
+				dialog: false,
-			dpts:     _SERVER.session.departments,
+				current: _SERVER.session.department_id,
+				list:   _SERVER.session.departments,
+				create: false,
+				newLabel: ''
+			},
 
 			version: {
 				dialog:  false,
@@ -62,15 +72,15 @@ export default {
 		---------------------------------------------------------*/
 		get_dcurrent(id){
 
-			// use @dep_id, if invalid argument @id
+			// use @current, if invalid argument @id
-			( isNaN(id) ) && ( id = this.dep_id );
+			( isNaN(id) ) && ( id = this.department.current );
 
-			// search in @dpts where id is @dep_id
+			// search in @list where id is @current
-			for( var d in this.dpts )
+			for( var d in this.department.list )
-				if( this.dpts[d].id == id )
+				if( this.department.list[d].id == id )
-					return this.dpts[d];
+					return this.department.list[d];
 
-			return { id: null, label: null };
+			return { id: -2, name: null };
 
 		},
 
@@ -95,11 +105,11 @@ export default {
 		d_switch(id){
 
 			// 1. De-activate dialogs
-			this.d_dialog = false;
+			this.department.dialog = false;
 			this.version.dialog = false;
 
 			// 2. Do nothing if no change
-			if( this.dep_id == id )
+			if( this.department.current == id )
 				return;
 
 			// 3. Ask for department change
@@ -110,7 +120,7 @@ export default {
 					return;
 
 				// 2. Update GUI
-				this.dep_id = id;
+				this.department.current = id;
 
 				// 3. Reload page if needed
 				setTimeout(() => { document.location = ''; }, 200);
@@ -124,7 +134,7 @@ export default {
 		v_switch(id){
 
 			// 1. De-activate dialogs
-			this.d_dialog = false;
+			this.department.dialog = false;
 			this.version.dialog = false;
 
 			// 2. Do nothing if no change
@@ -148,12 +158,66 @@ export default {
 
 		},
 
+		/* (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.d_dialog = false;
+			this.department.dialog = false;
 			this.version.dialog = false;
 
 			// 2. Popup confirm
@@ -186,7 +250,7 @@ export default {
 					}
 
 					// 3. Update GUI
-					this.version.list.push( { id: parseInt(rs.created_id), name: newVersionName, new_name: newVersionName } );
+					this.version.list.push( { id: parseInt(rs.created_id), name: newVersionName } );
 
 				}.bind(this));
 
@@ -246,6 +310,62 @@ export default {
 
 		},
 
+		/* (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(){
@@ -339,7 +459,7 @@ export default {
 
 			// only hide not [data-unblur-department] elements
 			if( e.target.getAttribute('data-unblur-department') === null )
-				this.d_dialog = false;
+				this.department.dialog = false;
 
 			// only hide not [data-unblur-version] elements
 			if( e.target.getAttribute('data-unblur-version') === null )