[module.department] renamed (got rid of the 'e') | [webpack.header] department switch OK

build/api/module/departmentController.php

@@ -12,7 +12,7 @@ namespace api\module;
 use database\core\Repo;
 use database\repo\professor;
 
-class departementController
+class departmentController
 {
 
 	public function put($args){

config/modules.json

@@ -71,13 +71,13 @@
 		}
 	},
 
-	"departement":{
+	"department":{
 
 		"PUT":{
 			"des": "Switch the user on another department database",
 			"per": [],
 			"par": {
-				"department": {"des": "Department id",	"typ": "id"}
+				"URL0": {"des": "Department id", "typ": "id", "ren": "department" }
 			}
 		},
 		"errors":{
@@ -90,7 +90,7 @@
 		},
 		"stats":{
 			"GET": {
-				"des": "Get the statistics about the departement",
+				"des": "Get the statistics about the department",
 				"per": [],
 				"par": {
 				}

webpack/scss/header.scss

@@ -14,13 +14,14 @@
 
 	// flex properties
 	flex-direction:  row;
-	justify-content: space-between;
+	justify-content: flex-start;
 	align-items:     center;
 
 	z-index: 150;
 
 
 	/* (1) Version management */
+	& > div.departments,
 	& > div.versions{
 
 		/* (1.1) Version status */
@@ -61,7 +62,7 @@
 				background-color: $form-invalid-color;
 			}
 
-			&[data-id='0']:before{
+			&[data-id='-1']:before{
 				background-color: $form-valid-color;
 			}
 
@@ -69,20 +70,24 @@
 		}
 
 		/* (1.2) Version dialog (to switch to another) */
+		& > div.department-dialog,
 		& > div.version-dialog{
 			display: block;
 			position: absolute;
-				top: #{$header-height + .5em};
+				margin-top: 0;
-				left: 1em;
+				margin-left: 0;
+
+			&.department-dialog{ margin-left: 1em; }
 
 			// padding: 1em .5em;
 
 			border: 1px solid #ddd;
-			border-radius: 3px;
+			border-top: 0;
+			border-radius: 0 0 3px 3px;
 
 			background-color: #fff;
 
-			box-shadow: 0 2px 2px #ddd;
+			// box-shadow: 0 2px 2px #ddd;
 
 			overflow: hidden;
 
@@ -120,7 +125,7 @@
 					background-color: $form-invalid-color;
 				}
 
-				&[data-id='0']:before{
+				&[data-id='-1']:before{
 					background-color: $form-valid-color;
 				}
 
@@ -129,6 +134,21 @@
 
 	}
 
+	/* (2) Department | Version layout */
+	& > div.departments > div.current{
+		margin-right: 0;
+		padding-left: 1em;
+		border-radius: 3px 0 0 3px;
+
+		&:before{ content: none; }
+	}
+
+	& > div.versions > div.current{
+		margin-left: 0;
+		border-radius: 0 3px 3px 0;
+		border-left: 0;
+	}
+
 
 
 }

webpack/vue/header.vue

@@ -2,13 +2,22 @@
 
 	<div id='HEADER'>
 
+		<!-- Department management -->
+		<div class='departments'>
+
+			<div class='current' @click='d_dialog=!d_dialog'>{{ get_dcurrent().label || 'département à jour' }}</div>
+			<div class='department-dialog' v-show='d_dialog'>
+				<span v-for='d in dpts' @click='d_switch(d.id)'>{{ d.label }}</span>
+			</div>
+
+		</div>
+
 		<!-- Version management -->
 		<div class='versions'>
 
-			<div class='current' @click='version_dialog=!version_dialog' :data-id='current_version_id'>{{ versions[current_version_id].date || 'version à jour' }}</div>
+			<div class='current' @click='v_dialog=!v_dialog' :data-id='get_vcurrent().id'>{{ get_vcurrent().date || 'version à jour' }}</div>
-			<div class='version-dialog' v-show='version_dialog'>
+			<div class='version-dialog' v-show='v_dialog'>
-				<span data-id='0' @click='version_dialog=false; current_version_id=0'>version à jour</span>
+				<span v-for='v in vers' v-show='v.id!=ver_id' @click='v_switch(v.id)' :data-id='v.id'>{{ v.date || 'version à jour' }}</span>
-				<span v-for='v in (1,versions.length-1)' @click='version_dialog=false; current_version_id=v' :data-id='v'>{{ versions[v].date }}</span>
 			</div>
 
 		</div>
@@ -27,14 +36,86 @@ export default {
 	        gstore:			gstore.get,
 			is_connected:	_SERVER.session.connected,
 
-			version_dialog: false,
+			d_dialog: false,
-			current_version_id: 0,
+			dep_id:   _SERVER.session.department_id,
-			versions: [
+			dpts:     _SERVER.session.departments,
-				{ date: null         },
+
-				{ date: '01-02-2017' },
+			v_dialog: false,
-				{ date: '23-03-2017' }
+			ver_id:   -1,
+			vers:     [
+				{ id: -1, date: null         },
+				{ id: 0,  date: '01-02-2017' },
+				{ id: 1,  date: '23-03-2017' }
 			]
 	    };
+	},
+	methods: {
+
+		/* (1) Get current department data
+		---------------------------------------------------------*/
+		get_dcurrent(){
+
+			// search in @dpts where id is @dep_id
+			for( var d in this.dpts )
+				if( this.dpts[d].id == this.dep_id )
+					return this.dpts[d];
+
+			return { id: null, label: null };
+
+		},
+
+		/* (2) Get current versoin data
+		---------------------------------------------------------*/
+		get_vcurrent(){
+
+			// search in @vers where id is @ver_id
+			for( var v in this.vers )
+				if( this.vers[v].id == this.ver_id )
+					return this.vers[v];
+
+			return { date: null };
+
+		},
+
+		/* (3) Switch to other department
+		---------------------------------------------------------*/
+		d_switch(id){
+
+			// 1. De-activate dialogs
+			this.d_dialog = false;
+			this.v_dialog = false;
+
+			// 2. Ask for department change
+			api.call(`PUT department/${id}`, {}, function(rs){
+
+				// error -> do nothing
+				if( rs.error !== 0 || rs.success !== true )
+					return;
+
+				// 3. Update GUI
+				this.dep_id = id;
+
+				// 4. 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.v_dialog = false;
+
+			// 2. Ask for version change
+			// TODO: api.call()
+
+			// 3. Update GUI
+			this.ver_id = id;
+		}
 	}
 }
 </script>