From b59d1cbeff8d849690c94a42ad191607f611f9f8 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Sat, 3 Mar 2018 22:18:36 +0100
Subject: [PATCH] [webpack.page.teachers] load professors through API + flex
 layout

---
 webpack/component/teacher/view.vue | 40 ++++++++----------------------
 webpack/data/teacher.js            | 19 +++++++++++++-
 webpack/scss/container.scss        | 13 ++++++----
 webpack/scss/layout.scss           |  3 +++
 webpack/scss/menu.scss             |  8 +++---
 5 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/webpack/component/teacher/view.vue b/webpack/component/teacher/view.vue
index 76ab1be..432e169 100644
--- a/webpack/component/teacher/view.vue
+++ b/webpack/component/teacher/view.vue
@@ -2,46 +2,26 @@
 
 	<div id='CONTAINER' class='card'>
 
-		<section>
-			<span class='category'>in deSiGn</span>
-			<h1>Adrien Marquès</h1>
+		<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
+
+		<section v-for='prof in gstore.professors'>
+			<span class='category'>{{ prof.abreviation }}</span>
+			<h1>{{ prof.firstName }} {{ prof.lastName }}</h1>
 
 			<div class='table'>
 				<div>
-					<span>13</span>
-					<span>days left in design</span>
+					<span>{{prof.hoursToDo}}</span>
+					<span>heures à faire</span>
 				</div>
 				<div>
-					<span>74</span>
-					<span>days to finish</span>
-				</div>
-			</div>
-
-			<div class='footer'>
-				<span class='course'>13</span><hr>
-				<span class='td active'>9</span><hr>
-				<span class='tp'>32</span>
-			</div>
-		</section>
-
-		<section>
-			<span class='category'>in deSiGn</span>
-			<h1 class='warning'>Lucas Mascaro</h1>
-
-			<div class='table'>
-				<div>
-					<span>23</span>
-					<span>days left in design</span>
-				</div>
-				<div>
-					<span>104</span>
-					<span>days to finish</span>
+					<span>?</span>
+					<span>heures prévues</span>
 				</div>
 			</div>
 
 			<div class='footer'>
 				<span class='course active'>13</span><hr>
-				<span class='td'>9</span><hr>
+				<span class='td active'>9</span><hr>
 				<span class='tp active'>32</span>
 			</div>
 		</section>
diff --git a/webpack/data/teacher.js b/webpack/data/teacher.js
index 8fe87e0..4ec086e 100644
--- a/webpack/data/teacher.js
+++ b/webpack/data/teacher.js
@@ -1 +1,18 @@
-gstore.add('blo', 12);
+/* (1) Load professors
+---------------------------------------------------------*/
+/* (1) Initialize list */
+gstore.add('professors', []);
+
+/* (2) Get professors */
+api.call('GET professor', {}, function(rs){
+
+	// {1} If error -> abort //
+	if( rs.error !== 0 )
+		return console.log('No professor found, error: '+rs.error);
+
+	// {2} Store professors //
+	console.log(rs);
+	gstore.get.professors = rs.professors;
+
+
+});
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 113e37d..d3826a4 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -15,7 +15,6 @@
 	background-color: $bg-color;
 
 	overflow: hidden;
-	overflow-y: auto;
 
 	z-index: 100;
 
@@ -32,7 +31,6 @@
 	flex-direction: column;
 	justify-content: flex-start;
 
-
 	& > *:first-child{ margin-top: 1em; }
 	& > *:last-child{ margin-bottom: 3em; }
 
@@ -86,14 +84,19 @@
 	display: flex;
 
 	// flex properties
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: flex-start;
+	flex-direction:  row;
+	justify-content: space-between;
+	align-items:     flex-start;
+	flex-wrap:       wrap;
 
 
 	/* (1) Card container */
 	& > section{
 
+		// flex-grow: 1;
+		flex-basis: 15em;
+		flex-shrink: 1;
+
 		display: block;
 		position: relative;
 
diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss
index a450118..bc7657b 100644
--- a/webpack/scss/layout.scss
+++ b/webpack/scss/layout.scss
@@ -29,6 +29,9 @@ body{
 
 	background: $bg-color;
 	color: $primary-color;
+
+	overflow: hidden;
+	overflow-y: auto;
 }
 
 
diff --git a/webpack/scss/menu.scss b/webpack/scss/menu.scss
index da64ac3..d3ad998 100644
--- a/webpack/scss/menu.scss
+++ b/webpack/scss/menu.scss
@@ -13,11 +13,11 @@
 	/* (1) Container
 	---------------------------------------------------------*/
 	display: flex;
-	position: absolute;
-		top: $header-height;
+	position: fixed;
+		top: 0;
 		left: 0;
 		width: calc( #{$menu-width} - 1px );
-		height: calc( 100% - #{$header-height} );
+		height: 100%;
 
 	background-color: $menu-bg;
 	border-right: 1px solid #e3e7eb;
@@ -27,7 +27,7 @@
 	justify-content: space-around;
 	align-items: center;
 
-	z-index: 200;
+	z-index: 100;
 
 	/* (2) Items
 	---------------------------------------------------------*/