From 40a6f1d775338c4fe65ec4db9c0af93129a984af Mon Sep 17 00:00:00 2001
From: Thomas Fradet <t.fradet8@gmail.com>
Date: Thu, 24 Oct 2019 15:32:37 +0200
Subject: [PATCH] dropdowns for search & list size adaptation

---
 competency_iena_competencies_2.php        | 28 ++++----
 competency_iena_competency_students_2.php | 30 +++++---
 js/dropdown.js                            | 84 +++++++++++------------
 3 files changed, 76 insertions(+), 66 deletions(-)

diff --git a/competency_iena_competencies_2.php b/competency_iena_competencies_2.php
index 9c5d660..ef3ff42 100644
--- a/competency_iena_competencies_2.php
+++ b/competency_iena_competencies_2.php
@@ -45,8 +45,7 @@ if ($count_course_cpts === 0) {
 	$student->get_student_by_id($studentid);
 
 	$PAGE->set_heading($OUTPUT->heading($student->firstname . " " . $student->lastname, 2, 'headingblock header outline'));
-	$PAGE->requires->js("/blocks/competency_iena/js/datalist-polyfill.min.js");
-	$PAGE->requires->js("/blocks/competency_iena/js/stud-x-cpts.js");
+	$PAGE->requires->js("/blocks/competency_iena/js/dropdown.js");
 	echo $OUTPUT->header();
 
 	/* Les demandes de validation de compétence (review) prises dans le cptuser car n'existent pas dans le contexte restreint à un cours. */
@@ -81,19 +80,20 @@ if ($count_course_cpts === 0) {
 	echo "<h2 class='h3'>{$student->firstname} {$student->lastname}</h2>";
 
 	if ( !$is_student ) {
-		echo "<form action='{$CFG->wwwroot}/blocks/competency_iena/competency_iena_competencies_2.php' id='change_stud_form' class='form-inline'>";
+		echo "<form action='{$CFG->wwwroot}/blocks/competency_iena/competency_iena_competencies_2.php' id='change_stud_form' class='form-inline' autocomplete='off' style='display: block;height: 1.5rem;'>";
 		echo "<input type='text' hidden name='courseid' value='{$courseid}'>";
 		echo "<span hidden id='studentid'>{$studentid}</span>";
-		/* https://github.com/mfranzke/datalist-polyfill */
-		echo "<label class='m-y-1 m-r-1' for='studentid_sel' style='color: black;'>Etudiant</label>";
-		echo "<input type='text' name='studentid' id='studentid_sel' value='' list='student_list' class='form-control m-r-1'>";
-		echo "<datalist id='student_list' title='Select student'>";
+		
+		echo "<div id='student_dropdown' class='iena-dropdown' style='z-index: 10;'>";
+		echo "<input type='text' hidden name='studentid' id='studentid_sel' class='iena-drop-input-value' value=''>";
+		echo "<input type='text' value='' class='form-control iena-drop-input' style='font-size: .7rem; line-height: 1; width: 300px;' placeholder='{$student->firstname} {$student->lastname}'><button class='btn btn-secondary' id='prevStud' style='font-size: .8rem;line-height: 1.09; margin-left: 0.5rem;'>Précédent</button><button class='btn btn-secondary' id='nextStud' style='font-size: .8rem;line-height: 1.09; margin-left: 0.5rem;'>Suivant</button>";
+		echo "<div class='iena-droplist' id='student_list'>";
 		foreach ($students as $stud) {
-			echo "<option value='{$stud->firstname} {$stud->lastname} ({$stud->id})' data-value='{$stud->id}'>{$stud->firstname} {$stud->lastname} ({$stud->id})</option>";
+			echo "<a href='#' data-value='{$stud->id}' class='iena-drop-item' style='display: none;'>{$stud->firstname} {$stud->lastname}</a>";
 		}
-		echo "</datalist>";
-		echo "<div><button class='btn btn-secondary' id='prevStud'>Précédent</button>";
-		echo "<button class='btn btn-secondary m-l-1' id='nextStud'>Suivant</button></div>";
+		echo "</div>";
+		echo "</div>";
+		
 		echo "</form>";
 	}
 
@@ -135,7 +135,7 @@ if ($count_course_cpts === 0) {
 		echo "
 		<a href='{$CFG->wwwroot}/blocks/competency_iena/course_competency.php?courseid={$courseid}&studentid={$studentid}&competencyid={$cpt->get('id')}' class='list-group-item list-group-item-action{$proficient_class}'>
 		<div class='d-flex w-100 justify-content-between'>
-		<h3 class='mb-1 iena-cpt-action-title'>{$cpt->get('shortname')}</h3>";
+		<h3 class='mb-1 iena-cpt-action-title h4'>{$cpt->get('shortname')}</h3>";
 		foreach ($reviews_data as $review) {
 			if ( $review->competencyid == $cpt->get('id') ) {
 				echo "<div><small class='review-badge'>Évaluation demandée</small></div>";
@@ -143,8 +143,8 @@ if ($count_course_cpts === 0) {
 			}
 		}
 		echo "</div>
-		<p class='' style='margin-bottom: 0;'>Évaluation : <em>{$eval}</em></p>
-		<small class=''>Acquis : {$proficient_str}</small>
+		<p class='small' style='margin-bottom: 0;'>Évaluation : <em>{$eval}</em> / Acquis : {$proficient_str}</p>
+		<!--<small class=''>Acquis : {$proficient_str}</small>-->
 		</a>";
 	}
 	echo "</div>";
diff --git a/competency_iena_competency_students_2.php b/competency_iena_competency_students_2.php
index d9776a1..0614115 100644
--- a/competency_iena_competency_students_2.php
+++ b/competency_iena_competency_students_2.php
@@ -52,8 +52,7 @@ if (count($course_cpts) === 0) {
 	}
 	
 	$PAGE->set_heading($OUTPUT->heading($current_cpt->shortname, 2, 'headingblock header outline'));
-	$PAGE->requires->js("/blocks/competency_iena/js/datalist-polyfill.min.js");
-	$PAGE->requires->js("/blocks/competency_iena/js/cpt-x-studs.js");
+	$PAGE->requires->js("/blocks/competency_iena/js/dropdown.js");
 	echo $OUTPUT->header();
 
 	/* Les étudiants. */
@@ -72,7 +71,7 @@ if (count($course_cpts) === 0) {
 
 	echo "<div class='alert row' style='padding: 0; background-color: inherit; color: inherit;'>"; /* Début change competency. */
 	echo "<div class='col-12' style='padding-left: 0;'>";
-	echo "<form action='{$CFG->wwwroot}/blocks/competency_iena/competency_iena_competency_students_2.php' id='change_cpt_form' class='form-inline'>";
+	echo "<form action='{$CFG->wwwroot}/blocks/competency_iena/competency_iena_competency_students_2.php' id='change_cpt_form' class='form-inline' autocomplete='off' style='display: block;height: 1.5rem;'>";
 	echo "<input type='text' hidden name='courseid' value='{$COURSE->id}'>";
 	if ( isset($_GET['grade']) ) {
 		echo "<input type='text' hidden name='grade' value='{$_GET['grade']}'>";
@@ -84,15 +83,26 @@ if (count($course_cpts) === 0) {
 		echo "<input type='text' hidden name='review' value='{$_GET['review']}'>";
 	}
 	echo "<span hidden id='competencyid'>{$current_cpt->id}</span>";
-	echo "<label class='m-r-1' for='competencyid_sel' style=''>Changer de compétence</label>";
-	echo "<input type='text' name='competencyid' id='competencyid_sel' value='' list='competency_list' class='form-control'>";
-	echo "<datalist id='competency_list' title='Select competency'>";
+	
+	// echo "<input type='text' name='competencyid' id='competencyid_sel' value='' list='competency_list' class='form-control'>";
+	// echo "<datalist id='competency_list' title='Select competency'>";
+	// foreach ($course_cpts as $course_cpt) {
+	// 	echo "<option value='{$course_cpt->get('shortname')} ({$course_cpt->get('id')})' data-value='{$course_cpt->get('id')}'>{$course_cpt->get('shortname')} ({$course_cpt->get('id')})</option>";
+	// }
+	// echo "</datalist>";
+	// echo "<button class='btn btn-secondary m-l-1' id='prevCpt'>Précédent</button>";
+	// echo "<button class='btn btn-secondary m-l-1' id='nextCpt'>Suivant</button>";
+
+	echo "<div id='student_dropdown' class='iena-dropdown' style='z-index: 1;'>";
+	echo "<input type='text' hidden name='competencyid' id='competencyid_sel' class='iena-drop-input-value' value=''>";
+	echo "<input type='text' value='' class='form-control iena-drop-input' style='font-size: .7rem; line-height: 1; width: 300px;' placeholder='{$current_cpt->shortname}' autocomplete='nope'><button class='btn btn-secondary' id='prevCpt' style='font-size: .8rem;line-height: 1.09; margin-left: 0.5rem;'>Précédent</button><button class='btn btn-secondary' id='nextCpt' style='font-size: .8rem;line-height: 1.09; margin-left: 0.5rem;'>Suivant</button>";
+	echo "<div class='iena-droplist' id='competency_list'>";
 	foreach ($course_cpts as $course_cpt) {
-		echo "<option value='{$course_cpt->get('shortname')} ({$course_cpt->get('id')})' data-value='{$course_cpt->get('id')}'>{$course_cpt->get('shortname')} ({$course_cpt->get('id')})</option>";
+		echo "<a href='#' data-value='{$course_cpt->get('id')}' class='iena-drop-item' style='display: none;'>{$course_cpt->get('shortname')}</a>";
 	}
-	echo "</datalist>";
-	echo "<button class='btn btn-secondary m-l-1' id='prevCpt'>Précédent</button>";
-	echo "<button class='btn btn-secondary m-l-1' id='nextCpt'>Suivant</button>";
+	echo "</div>";
+	echo "</div>";
+	
 	echo "</form>";
 	echo "</div>";
 	echo "</div>"; /* Fin change competency. */
diff --git a/js/dropdown.js b/js/dropdown.js
index 0dfa1b1..5a39ad6 100644
--- a/js/dropdown.js
+++ b/js/dropdown.js
@@ -60,55 +60,55 @@
 
 		/* Activation of previous and next buttons for dropdowns */
 
-		var opts = document.getElementById('student_list').childNodes;
-		var studentid = document.getElementById('studentid').innerHTML;
-		for (var i = 0; i < opts.length; i++) {
-			if (opts[i].dataset.value === studentid) {
-				var prev = opts[i - 1] === undefined ? false : opts[i - 1].dataset.value;
-				var next = opts[i + 1] === undefined ? false : opts[i + 1].dataset.value;
-				if (prev === false) {
-					document.getElementById('prevStud').setAttribute('disabled', 'disabled');
-				} else {
-					// document.getElementById('prevStud').href += prev;
-					document.getElementById('prevStud').dataset.prev = prev;
-					document.getElementById('prevStud').onclick = function () {
-						document.getElementById('studentid_sel').value = document.getElementById('prevStud').dataset.prev;
+		if (document.getElementById('student_list') !== null) {
+			var opts = document.getElementById('student_list').childNodes;
+			var studentid = document.getElementById('studentid').innerHTML;
+			for (var i = 0; i < opts.length; i++) {
+				if (opts[i].dataset.value === studentid) {
+					var prev = opts[i - 1] === undefined ? false : opts[i - 1].dataset.value;
+					var next = opts[i + 1] === undefined ? false : opts[i + 1].dataset.value;
+					if (prev === false) {
+						document.getElementById('prevStud').setAttribute('disabled', 'disabled');
+					} else {
+						document.getElementById('prevStud').dataset.prev = prev;
+						document.getElementById('prevStud').onclick = function () {
+							document.getElementById('studentid_sel').value = document.getElementById('prevStud').dataset.prev;
+						}
 					}
-				}
-				if (next === false) {
-					document.getElementById('nextStud').setAttribute('disabled', 'disabled');
-				} else {
-					// document.getElementById('nextStud').href += next;
-					document.getElementById('nextStud').dataset.next = next;
-					document.getElementById('nextStud').onclick = function () {
-						document.getElementById('studentid_sel').value = document.getElementById('nextStud').dataset.next;
+					if (next === false) {
+						document.getElementById('nextStud').setAttribute('disabled', 'disabled');
+					} else {
+						document.getElementById('nextStud').dataset.next = next;
+						document.getElementById('nextStud').onclick = function () {
+							document.getElementById('studentid_sel').value = document.getElementById('nextStud').dataset.next;
+						}
 					}
 				}
 			}
 		}
 
-		var opts = document.getElementById('competency_list').childNodes;
-		var competencyid = document.getElementById('competencyid').innerHTML;
-		for (var i = 0; i < opts.length; i++) {
-			if (opts[i].dataset.value === competencyid) {
-				var prev = opts[i - 1] === undefined ? false : opts[i - 1].dataset.value;
-				var next = opts[i + 1] === undefined ? false : opts[i + 1].dataset.value;
-				if (prev === false) {
-					document.getElementById('prevCpt').setAttribute('disabled', 'disabled');
-				} else {
-					// document.getElementById('prevCpt').href += prev;
-					document.getElementById('prevCpt').dataset.prev = prev;
-					document.getElementById('prevCpt').onclick = function () {
-						document.getElementById('competencyid_sel').value = document.getElementById('prevCpt').dataset.prev;
+		if (document.getElementById('competency_list') !== null) {
+			var opts = document.getElementById('competency_list').childNodes;
+			var competencyid = document.getElementById('competencyid').innerHTML;
+			for (var i = 0; i < opts.length; i++) {
+				if (opts[i].dataset.value === competencyid) {
+					var prev = opts[i - 1] === undefined ? false : opts[i - 1].dataset.value;
+					var next = opts[i + 1] === undefined ? false : opts[i + 1].dataset.value;
+					if (prev === false) {
+						document.getElementById('prevCpt').setAttribute('disabled', 'disabled');
+					} else {
+						document.getElementById('prevCpt').dataset.prev = prev;
+						document.getElementById('prevCpt').onclick = function () {
+							document.getElementById('competencyid_sel').value = document.getElementById('prevCpt').dataset.prev;
+						}
 					}
-				}
-				if (next === false) {
-					document.getElementById('nextCpt').setAttribute('disabled', 'disabled');
-				} else {
-					// document.getElementById('nextCpt').href += next;
-					document.getElementById('nextCpt').dataset.next = next;
-					document.getElementById('nextCpt').onclick = function () {
-						document.getElementById('competencyid_sel').value = document.getElementById('nextCpt').dataset.next;
+					if (next === false) {
+						document.getElementById('nextCpt').setAttribute('disabled', 'disabled');
+					} else {
+						document.getElementById('nextCpt').dataset.next = next;
+						document.getElementById('nextCpt').onclick = function () {
+							document.getElementById('competencyid_sel').value = document.getElementById('nextCpt').dataset.next;
+						}
 					}
 				}
 			}
-- 
GitLab