From 4e1ca634ff849618611c6a5d6f2d547f500550e6 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Tue, 8 May 2018 14:46:50 +0200
Subject: [PATCH] fixed [ue.manage] list style + added ordering basis (TODO:
 order algorithm)

---
 webpack/component/ue/manage.vue  | 18 +++++++++---------
 webpack/data/ue.js               | 32 ++++++++++++++++++++++++++++++++
 webpack/scss/container/list.scss | 13 ++++++-------
 3 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/webpack/component/ue/manage.vue b/webpack/component/ue/manage.vue
index 7adca42..572f910 100644
--- a/webpack/component/ue/manage.vue
+++ b/webpack/component/ue/manage.vue
@@ -12,9 +12,9 @@
 			<!-- FILTERS -->
 			<section class='filter'>
 				<div style='flex-basis: 3.2em'></div>
-				<div data-filter='1'>enseignant     <span class='arrow' data-way='down'></span></div>
-				<div data-filter='0'>volume horaire <span class='arrow' data-way='down'></span></div>
-				<div data-filter='0'>formations     <span class='arrow' data-way='down'></span></div>
+				<div :data-filter='gstore.order.current===0?1:0' @click='gstore.order_toggle(0)'>enseignant     <span class='arrow' :data-way='gstore.order.way'></span></div>
+				<div :data-filter='gstore.order.current===1?1:0' @click='gstore.order_toggle(1)'>volume horaire <span class='arrow' :data-way='gstore.order.way'></span></div>
+				<div :data-filter='gstore.order.current===2?1:0' @click='gstore.order_toggle(2)'>formations     <span class='arrow' :data-way='gstore.order.way'></span></div>
 
 			</section>
 
@@ -54,9 +54,9 @@
 				data-anim-incoming='1'
 				:data-anim-bounce='gstore.nav_anim.out?1:0'
 
+				:data-prof='c.idProf'
 				:data-vol='c.volume'
-				:data-form='c.formations.join(`|`)'
-				data-typ='cm'>
+				:data-form='c.formations.join(`|`)'>
 
 				<div class='icon remove' @click='gstore.rem(0, i)'></div>
 				<select v-model='c.new_prof' @change='gstore.upd_prof(0, i)'>
@@ -92,9 +92,9 @@
 				data-anim-incoming='1'
 				:data-anim-bounce='gstore.nav_anim.out?1:0'
 
+				:data-prof='td.idProf'
 				:data-vol='td.volume'
-				:data-form='td.formations.join(`|`)'
-				data-typ='td'>
+				:data-form='td.formations.join(`|`)'>
 
 				<div class='icon remove' @click='gstore.rem(1, i)'></div>
 				<select v-model='td.new_prof' @change='gstore.upd_prof(1, i)'>
@@ -130,9 +130,9 @@
 				data-anim-incoming='1'
 				:data-anim-bounce='gstore.nav_anim.out?1:0'
 
+				:data-prof='tp.idProf'
 				:data-vol='tp.volume'
-				:data-form='tp.formations.join(`|`)'
-				data-typ='td'>
+				:data-form='tp.formations.join(`|`)'>
 
 				<div class='icon remove' @click='gstore.rem(2, i)'></div>
 				<select v-model='tp.new_prof' @change='gstore.upd_prof(2, i)'>
diff --git a/webpack/data/ue.js b/webpack/data/ue.js
index 7d9fb35..e4aacd8 100644
--- a/webpack/data/ue.js
+++ b/webpack/data/ue.js
@@ -1078,6 +1078,38 @@ gstore.add('upd_prof', function(type, res_i){
 	});
 
 
+});
+
+/* (4) Ordering filters */
+gstore.add('order', {
+	available: ['prof', 'volume', 'forms'],
+	current: 0,
+	way: 1 // 1 ASC, -1 DESC
+});
+
+gstore.add('order_toggle', function(ord_i){
+
+	// 1. Check params types
+	if( isNaN(ord_i) || gstore.get.order.available[ord_i] == null )
+		return;
+
+	// 2. If new ordering field -> toggle it
+	if( ord_i !== gstore.get.order.current )
+		gstore.get.order.current = ord_i;
+
+	// 3. If already selected -> toggle way
+	else
+		gstore.get.order.way *= -1;
+
+	// 4. Get all elements to order
+	let els = document.querySelectorAll('section[data-prof][data-vol][data-form]');
+
+	// 5. Ordering by 'prof'
+
+
+
+
+
 });
 
 
diff --git a/webpack/scss/container/list.scss b/webpack/scss/container/list.scss
index eb0783d..8ef14d3 100644
--- a/webpack/scss/container/list.scss
+++ b/webpack/scss/container/list.scss
@@ -157,6 +157,8 @@
 
 		& > div{
 
+			cursor: default;
+
 			& > span.arrow{
 				display: inline-block;
 				position: relative;
@@ -165,13 +167,9 @@
 
 				margin-bottom: -.3em;
 
-				background: url('/asset/svg/down_arrow.svg@aaaaaa') center center no-repeat;
+				background: url() center center no-repeat;
 				background-size: auto 100%;
 
-
-				&[data-way='up']{   background-image: url('/asset/svg/up_arrow.svg@aaaaaa'); }
-				&[data-way='down']{ background-image: url('/asset/svg/down_arrow.svg@aaaaaa'); }
-
 				cursor: pointer;
 			}
 
@@ -180,8 +178,9 @@
 				color: $primary-color;
 
 				& > span.arrow{
-					&[data-way='up']{   background-image: url('/asset/svg/up_arrow.svg@555555'); }
-					&[data-way='down']{ background-image: url('/asset/svg/down_arrow.svg@555555'); }
+
+					&[data-way='-1']{   background-image: url('/asset/svg/up_arrow.svg@555555'); }
+					&[data-way='1']{ background-image: url('/asset/svg/down_arrow.svg@555555'); }
 				}
 
 			}