Skip to content
Snippets Groups Projects
Commit 2bafe7c4 authored by Thomas Fradet's avatar Thomas Fradet
Browse files

setting mod list select refactorisation

parent e325b7cb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
CHANGELOG.md
+ 9
− 3
View file @ 2bafe7c4
......@@ -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
......
lang/en/block_career.php
+ 1
− 1
View file @ 2bafe7c4
......@@ -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';
......
lang/fr/block_career.php
+ 1
− 1
View file @ 2bafe7c4
......@@ -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';
......
styles.css
+ 86
− 44
View file @ 2bafe7c4
......@@ -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;
}
view/view_career_setting.php
+ 134
− 183
View file @ 2bafe7c4
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment