From 2bafe7c4c3d1cfbc82cff96dd7220a4b1b7fb9b8 Mon Sep 17 00:00:00 2001
From: Thomas Fradet <t.fradet8@gmail.com>
Date: Tue, 28 May 2019 18:27:38 +0200
Subject: [PATCH] setting mod list select refactorisation
---
CHANGELOG.md | 12 +-
lang/en/block_career.php | 2 +-
lang/fr/block_career.php | 2 +-
styles.css | 130 +++++++++-----
view/view_career_setting.php | 317 +++++++++++++++--------------------
5 files changed, 231 insertions(+), 232 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f40ba9c..f6fe51e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -76,6 +76,12 @@ Ajout d'un bouton en haut de page pour éditer le parcours, visible uniquement p
Elles ne s'affichent pas si elles sont vides.
+#### Parcours inexistant
+
+[ ] Traiter l'erreur en cas de parcours inexistant (liens morts, url bidouillées, etc.).
+
+Afficher un beau message d'erreur.
+
### Gestion des droits
Ajout de vérification du droit d'éditer le cours pour les interfaces d'édition de parcours. Modification de noms de paramètres.
@@ -92,11 +98,11 @@ Amélioration des textes sur les pages de liste et d'édition des parcours.
#### Liste à cocher
-[ ] Transformer le multiselect en liste à cocher.
+[x] Transformer le multiselect en liste à cocher.
-Attention : actuellement, on peut ajouter plusieurs fois le même élément ce qui créée des erreurs.
+Bugs corrigés : ajouter plusieurs fois le même élément causait des erreurs, ne fonctionnait pas sur Firefox.
-Ne fonctionne pas sur firefox. Bien tester sur tous les navigateurs.
+Ajout de coches sexy, crédit : https://jalokim.graphics/playground/fancy-checkbox-radios
### Bloc en lui-même
diff --git a/lang/en/block_career.php b/lang/en/block_career.php
index f4114c9..966824d 100644
--- a/lang/en/block_career.php
+++ b/lang/en/block_career.php
@@ -11,7 +11,7 @@
$string['titleadddesc_plugin'] = 'Description';
$string['titleaddimg_plugin'] = 'Course picture';
$string['titleaddelem_plugin'] = 'Path content';
- $string['titleaddelemdesc_plugin'] = 'Select course ressources and activities in the left list and add it to your path in the right list by clicking in arrow icons.';
+ $string['titleaddelemdesc_plugin'] = 'Select course ressources and activities you want in your path.';
$string['heading_plugin'] = 'You can create a Path to group activities and ressources appart from the other inside a learning path. ';
$string['add_path'] = 'Add a path';
$string['any_carrer'] = 'No Path in this course';
diff --git a/lang/fr/block_career.php b/lang/fr/block_career.php
index 8135263..4ac058c 100644
--- a/lang/fr/block_career.php
+++ b/lang/fr/block_career.php
@@ -10,7 +10,7 @@
$string['titleadddesc_plugin'] = 'Description';
$string['titleaddimg_plugin'] = 'Image du parcours';
$string['titleaddelem_plugin'] = 'Contenu du parcours';
- $string['titleaddelemdesc_plugin'] = 'Sélectionnez des activités et ressources du cours dans la liste de gauche et ajoutez-les au parcours dans la liste de droite en utilisant les flèches.';
+ $string['titleaddelemdesc_plugin'] = 'Sélectionnez des activités et ressources du cours que vous souhaitez ajouter au parcours.';
$string['heading_plugin'] = 'Les parcours permettent de regrouper certaines ressources du cours dans un enchaînement particulier à part des autres.';
$string['add_path'] = 'Ajouter un parcours';
$string['any_carrer'] = 'Pas de parcours';
diff --git a/styles.css b/styles.css
index a8f5c77..234872a 100644
--- a/styles.css
+++ b/styles.css
@@ -63,64 +63,106 @@
.career-list-group .list-group-item {
border: none;
border-top: 1px solid rgba(0,0,0,.125);
- border-bottom: 1px solid rgba(0,0,0,.125);
+ border-bottom: 1px solid rgba(0,0,0,.125);
}
/* Path settings */
-.left_course_elements, .right_course_elements {
- width: 33%;
- float: left;
- padding: 1%;
- color: white;
- text-align: center;
- -webkit-box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
- box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
-}
-.left_course_elements {
- background: #2d2d2d;
+ul.career-ul {
+ list-style-type: none;
+ margin-bottom: 0;
}
-.right_course_elements {
- background: #009186;
-
+.career-edit-list-title {
+ margin-top: 1rem;
+ display: inline-block;
+ cursor: pointer;
}
-.middle_elements {
- text-align: center;
- width: 11%;
- float: left;
- padding: 1%;
+.career-edit-list-title:hover {
+ text-decoration: underline;
}
-.subject-info-box-1,
-.subject-info-box-2 {
- float: left;
- width: 100%;
+@media screen and (min-width: 768px) {
+ .career-cols {
+ column-count: 2;
+ }
}
-
-.subject-info-box-1 select,
-.subject-info-box-2 select {
- height: 200px;
- padding: 0;
+@media screen and (min-width: 1200px) {
+ .career-cols {
+ column-count: 3;
+ }
}
-.subject-info-box-1 select option,
-.subject-info-box-2 select option {
- padding: 4px 10px 4px 10px;
-}
+/* Path settings radios */
+/* https://jalokim.graphics/playground/fancy-checkbox-radios */
-.subject-info-box-1 select option:hover,
-.subject-info-box-2 select option:hover {
- background: #EEEEEE;
+.fancy--holder {
+ position: relative;
+ overflow: hidden;
+ font-size: 0;
+ display: inline-block;
+ margin-bottom: 0;
}
-
-.path-list-edit-link {
+.fancy--holder input {
position: absolute;
- top: 0;
- right: 0;
-}
-
-.iena-btn-career-arrow {
- padding: 0.5rem;
+ top: -100%;
+ left: -200px;
+ opacity: 0;
+ height: 0; width: 0;
+}
+.fancy--holder.fancy--checkbox2 .fancy--input {
+ width: 40px;
+ height: 20px;
+ border-radius: 100px;
+ display: inline-block;
+ vertical-align: top;
+ position: relative;
+ cursor: pointer;
+ background-color: #454749;
+}
+.fancy--holder.fancy--checkbox2 .fancy--input:before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ border-radius: 100px;
+ background: #FFFFFF;
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ transition: left 0.2s;
+}
+.fancy--holder.fancy--checkbox2.fancy--legend .fancy--input:after {
+ content: "off";
+ font-size: 8px;
+ color: #fff;
+ width: 100%;
+ display: block;
+ text-align: right;
+ text-transform: uppercase;
+ padding: 0px 4px;
+ line-height: 20px ;
+}
+.fancy--holder.fancy--checkbox2 input:checked ~ .fancy--input {
+ background-color: rgba(67, 171, 33, 0.73);
+ transition: background-color 0.2s;
+}
+.fancy--holder.fancy--checkbox2 input:checked ~ .fancy--input:before {
+ left: 22px;
+ transition: left 0.2s;
+}
+.fancy--holder.fancy--checkbox2 input:checked ~ .fancy--input:after {
+ text-align: left;
+ content: "on";
+}
+.fancy--holder.fancy--checkbox2 input:disabled ~ .fancy--input{
+ opacity: 0.3;
+ cursor: not-allowed;
+}
+.fancy--holder .fancy--label {
+ cursor: pointer;
+ margin-left: 10px;
+ font-size: 13px;
+ color: black;
+ user-select: none;
}
diff --git a/view/view_career_setting.php b/view/view_career_setting.php
index 10f38df..fe91e34 100644
--- a/view/view_career_setting.php
+++ b/view/view_career_setting.php
@@ -13,186 +13,137 @@
class view_career_setting extends moodleform
{
- public function definition()
- {
- // TODO: Implement definition() method.
- global $CFG;
-
- $mform = $this->_form; // Don't forget the underscore!
-
- //Default value
- }
-
- public function get_content()
- {
- global $DB, $CFG;
-
- $mform = $this->_form;
- $careerId = optional_param('pathid', NULL, PARAM_INT);
- $course = required_param('courseid', PARAM_INT);
-
- $name = "";
- $description = "";
- $ressourcesId = "";
- $contentButton = "Ajouter un parcours";
- // $imagePath = "";
-
- if (isset($careerId) && !empty($careerId))
- {
- $requete = $DB->get_record_sql('SELECT * FROM {block_career} WHERE id = ?', array($careerId));
- $name = $requete->name;
- $description = $requete->description;
- $ressourcesId = explode(",", $requete->ressources);
- $contentButton = "Modifier le parcours";
- // $imagePath = $requete->image;
-
- }
-
-
- $mform->addElement('text','careerName',get_string('titleaddname_plugin', 'block_career'));
- $mform->addRule('careerName', get_string('error'), 'required', null, null, false, false);
- $mform->setDefault('careerName',$name);
-
- $mform->addElement('editor', 'descriptionName', get_string('titleadddesc_plugin', 'block_career'));
- $mform->setType('descriptionName', PARAM_RAW);
- $mform->addRule('descriptionName', get_string('error'), 'required', null, null, false, false);
- $mform->setDefault('descriptionName',array('text'=>$description));
-
- //FilePicker IMAGE
- //$mform->addElement('filepicker', 'imageName', get_string('titleaddimg_plugin', 'block_career'), null);
-
-
- // $content = "<h1>" . get_string('title_plugin', 'block_career') . "</h1>";
- $content = "";
- $content .= "<h2>Édition du parcours</h2>";
- $content .= "<div class='alert alert-info'>" . get_string('heading_plugin', 'block_career') . "</div>";
-
- $temp = $mform->toHtml();
-
-
- $temp = substr($temp,(strpos($temp,'>')+1));
- $temp = substr($temp,0, -7);
-
- $sections = block_career_section::get_sections_by_id_course($course);
-
- $content .= '<div class="row"><form class="col-12" action="career_setting.php?courseid=' . $course . '" method="post" enctype="multipart/form-data">';
-
- $content .= $temp;
-
- // $content .= ' <section class="section"><h3>' . get_string('titleaddimg_plugin', 'block_career') . '</h3>
- // <input type="file" class="input" name="imageName" accept="image/*" /></section>';
-
-
- $content .= ' <section class="section row"><div class="col-12"><h2>' . get_string('titleaddelem_plugin', 'block_career') . '</h2>
- <div class="alert alert-info">' . get_string('titleaddelemdesc_plugin', 'block_career') . '</div>
- <div class="left_course_elements">
- <div class="title">Cours</div>
- <div class="subject-info-box-1">
- <select multiple="multiple" id="lstBox1" class="form-control">';
-
- foreach ($sections as $section)
- {
- $section->ressources = block_career_ressource::get_ressources_by_id_section($section->id);
- }
-
- foreach ($sections as $section)
- {
- $content .= '<optgroup label="'.$section->name.'" value="'.$section->id.'">';
-
- foreach ($section->ressources as $ressource)
- {
- $content .= '<option label="'.$ressource->name.'" value ="'.$ressource->id.'" name="'.$ressource->id.'">'.$ressource->name.'</option>';
- }
- $content .= '</optgroup>';
- }
-
- $content .='</select></div></div>';
-
- $content .= '<div class="middle_elements">
- <div class="title">Actions</div>
- <div class="subject-info-arrows text-center">
- <input type="button" id="btnAllRight" value=">>" class="btn btn-default iena-btn-career-arrow" /><br />
- <input type="button" id="btnRight" value=">" class="btn btn-default iena-btn-career-arrow" /><br />
- <input type="button" id="btnLeft" value="<" class="btn btn-default iena-btn-career-arrow" /><br />
- <input type="button" id="btnAllLeft" value="<<" class="btn btn-default iena-btn-career-arrow" />
- </div>
- </div>';
-
- $content .= '<div class="right_course_elements">
- <div class="title">Parcours</div>
- <div class="subject-info-box-2">
- <select multiple="multiple" id="lstBox2" name="ressource[]" class="form-control" required>';
-
- if ($ressourcesId != "") {
- foreach ($ressourcesId as $value)
- {
- $res = new block_career_ressource();
- $res->get_ressource_by_id($value);
-
- if ($careerId != 0)
- $content .= '<option label="'.$res->name.'" value ="'.$res->id.'">';
- }
- }
-
-
- $content .= '</select>
- </div>
- <div class="clearfix"></div>
- </div>
- </div>
- </section>';
-
- $content .= '<script>
- function selectAll(e)
- {
- // e.preventDefault();
- selectBox = document.getElementById("lstBox2");
-
- var checkValue = 0;
-
- for (var i = 0; i < selectBox.options.length; i++)
- {
- selectBox.options[i].selected = true;
- }
-
- $("#lstBox2 :selected").map(function(i, el) {
-
- if (checkValue == $(el).val())
- $(el).remove();
-
- checkValue = $(el).val();
- });
- }
- // console.log()
- </script>';
-
- // if ($careerId != 0) {
- // $content .= '<input type="hidden" name="imagePath" value="'.$imagePath.'">';
- // }
-
- $content .= '
- <div class="row mt-3">
- <div class="col">
- <input type="hidden" name="careerId" value="'.$careerId.'">
- <a href=' . $CFG->wwwroot . "/blocks/career/career_list.php?courseid=" . $course . ' class="btn btn-secondary">Annuler</a> ';
-
-
-
- if ($careerId != 0) {
- $content .= "<a href='$CFG->wwwroot/blocks/career/career_setting.php?courseid=$course&delete=1&id=$careerId' class='btn btn-danger'>Supprimer</a> ";
- }
-
- $content .= '
- <button type="submit" onclick="selectAll(event);" class="btn btn-primary">'.$contentButton.'</button>
- </div>
- </div>
- ';
-
-
- $content .= '</div></form>';
-
-
- return $content;
- }
-
- }
\ No newline at end of file
+ public function definition()
+ {
+ // TODO: Implement definition() method.
+ global $CFG;
+
+ $mform = $this->_form; // Don't forget the underscore!
+
+ //Default value
+ }
+
+ public function get_content()
+ {
+ global $DB, $CFG;
+
+ $mform = $this->_form;
+ $careerId = optional_param('pathid', NULL, PARAM_INT);
+ $course = required_param('courseid', PARAM_INT);
+
+ $name = "";
+ $description = "";
+ $ressourcesId = "";
+ $contentButton = "Ajouter un parcours";
+ // $imagePath = "";
+
+ if (isset($careerId) && !empty($careerId))
+ {
+ $requete = $DB->get_record_sql('SELECT * FROM {block_career} WHERE id = ?', array($careerId));
+ $name = $requete->name;
+ $description = $requete->description;
+ $ressourcesId = explode(",", $requete->ressources);
+ $contentButton = "Modifier le parcours";
+ // $imagePath = $requete->image;
+
+ }
+
+
+ $mform->addElement('text','careerName',get_string('titleaddname_plugin', 'block_career'));
+ $mform->addRule('careerName', get_string('error'), 'required', null, null, false, false);
+ $mform->setDefault('careerName',$name);
+
+ $mform->addElement('editor', 'descriptionName', get_string('titleadddesc_plugin', 'block_career'));
+ $mform->setType('descriptionName', PARAM_RAW);
+ $mform->addRule('descriptionName', get_string('error'), 'required', null, null, false, false);
+ $mform->setDefault('descriptionName',array('text'=>$description));
+
+ //FilePicker IMAGE
+ //$mform->addElement('filepicker', 'imageName', get_string('titleaddimg_plugin', 'block_career'), null);
+
+
+ // $content = "<h1>" . get_string('title_plugin', 'block_career') . "</h1>";
+ $content = "";
+ $content .= "<h2>Édition du parcours</h2>";
+ $content .= "<div class='alert alert-info'>" . get_string('heading_plugin', 'block_career') . "</div>";
+
+ $temp = $mform->toHtml();
+
+
+ $temp = substr($temp,(strpos($temp,'>')+1));
+ $temp = substr($temp,0, -7);
+
+ $sections = block_career_section::get_sections_by_id_course($course);
+
+ $content .= '<div class="row"><form class="col-12" action="career_setting.php?courseid=' . $course . '" method="post" enctype="multipart/form-data">';
+
+ $content .= $temp;
+
+ foreach ($sections as $section) {
+ $section->ressources = block_career_ressource::get_ressources_by_id_section($section->id);
+ }
+
+ $content .= '<h2 style="margin-top: 1.5rem;">' . get_string('titleaddelem_plugin', 'block_career') . '</h2><div class="alert alert-info">' . get_string('titleaddelemdesc_plugin', 'block_career') . '</div>';
+
+ $content .= "<section class='career-cols'>";
+
+ foreach ($sections as $section) {
+ if ( count($section->ressources) > 0 ) {
+ $content .= '<div style="break-inside: avoid;"><h3 class="h4 career-edit-list-title">' . $section->name . '</h3>';
+ $content .= '<ul class="career-ul">';
+ foreach ($section->ressources as $ressource) {
+ $check = false;
+ if ($ressourcesId != "") {
+ foreach ($ressourcesId as $ress_id) {
+ if ( $ress_id == $ressource->id ) {
+ $check = true;
+ break;
+ }
+ }
+ }
+ if ( $check ) {
+ $content .= '<li>
+ <label class="fancy--holder fancy--checkbox2">
+ <input type="checkbox" name="ressource[]" value="' . $ressource->id . '" label="'. $ressource->name .'" checked>
+ <span class="fancy--input"></span>
+ <span class="fancy--label">'. $ressource->name .'</span>
+ </label>
+ <li>';
+ } else {
+ $content .= '<li>
+ <label class="fancy--holder fancy--checkbox2">
+ <input type="checkbox" name="ressource[]" value="' . $ressource->id . '" label="'. $ressource->name .'">
+ <span class="fancy--input"></span>
+ <span class="fancy--label">'. $ressource->name .'</span>
+ </label>
+ <li>';
+ }
+ }
+ $content .= '</ul></div>';
+ }
+ }
+
+ $content .= "</section>";
+
+ $content .= '
+ <div class="row mt-3">
+ <div class="col">
+ <input type="hidden" name="careerId" value="'.$careerId.'">
+ <a href=' . $CFG->wwwroot . "/blocks/career/career_list.php?courseid=" . $course . ' class="btn btn-secondary">Annuler</a> ';
+
+ if ($careerId != 0) {
+ $content .= "<a href='$CFG->wwwroot/blocks/career/career_setting.php?courseid=$course&delete=1&id=$careerId' class='btn btn-danger'>Supprimer</a> ";
+ }
+
+ $content .= '
+ <button type="submit" class="btn btn-primary">'.$contentButton.'</button>
+ </div>
+ </div>
+ ';
+
+ $content .= '</div></form>';
+
+ return $content;
+ }
+
+}
\ No newline at end of file
--
GitLab