Skip to content

T
third-party
Commit 6f811203 by François
Options

Improve module settings saving (accordion, and sort order)

parent 455757da
Pipeline #1395 failed with stage
in 2 minutes 7 seconds
Showing with 113 additions and 32 deletions
members/admin.py
......@@ -9,36 +9,47 @@ from outils.common import MConfig
default_msettings = {'msg_accueil': {'title': 'Message borne accueil',
'type': 'textarea',
'value': ''
'value': '',
'sort_order': 1
},
'no_picture_member_advice': {'title': 'Message avertissement membre sans photo',
'type': 'textarea',
'value': ''
'value': '',
'sort_order': 2
},
'shop_opening_hours' : {
'shop_opening_hours': {
'title': 'Horaires ouverture magasin',
'type': 'textarea',
'value': ''
'value': '',
'sort_order': 3
},
'abcd_calendar_link' : {
'abcd_calendar_link': {
'title': 'Lien vers le calendrier ABCD',
'type': 'text',
'value': ''
'value': '',
'class': 'link',
'sort_order': 4
},
'forms_link' : {
'forms_link': {
'title': 'Lien vers la page des formulaires',
'type': 'text',
'value': ''
'value': '',
'class': 'link',
'sort_order': 5
},
'unsuscribe_form_link' : {
'unsuscribe_form_link': {
'title': 'Lien vers le formulaire de ré-inscription',
'type': 'text',
'value': ''
'value': '',
'class': 'link',
'sort_order': 6
},
'member_cant_have_delay_form_link' : {
'member_cant_have_delay_form_link': {
'title': 'Lien vers le formulaire pour les membres n\'ayant pas rattrapé leur service après 6 mois',
'type': 'text',
'value': ''
'value': '',
'class': 'link',
'sort_order': 7
}
}
......@@ -63,7 +74,8 @@ def get_settings(request):
for k, v in default_msettings.items():
if not (k in msettings):
msettings[k] = v
result['settings'] = msettings
result['settings'] = dict(sorted(msettings.items(), key=lambda k_v: k_v[1]['sort_order']))
except Exception as e:
result['error'] = str(e)
else:
......
outils/static/css/module_config.css
#main_content {text-align: center;}
.param {margin-bottom: 15px;}
.param label {font-weight: bold;}
input.link {min-width: 50em;}
.submit_button {margin-bottom: 10px;}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
button.accordion::after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active::after {
content: "\2212";
}
outils/static/js/module_config.js
var param_template = $('#templates #param'),
submit_btn = $('#templates #submit_button'),
main_content = $('#main_content');
submit_btn = $('#templates .submit_button'),
main_content = $('#main_content'),
msettings = [];
function save_module_settings() {
var form_elts = $('.input-container'),
data = {};
form_elts.each(function(i, elt){
console.log(elt)
const label = $(elt).closest('.param').find('label'),
key = label.attr('for'),
title = label.text();
key = label.attr('for');
if (key.length > 0 && key != 'iname') {
let value = "",
type = "";
let value = "";
data[key] = msettings[key];
if ($(elt).hasClass('ql-container')) {
type = 'textarea';
value = $(elt).find('.ql-editor').html().replace('<p><br></p>','')
} else {
type = 'input';
value = $(elt).find('input').val();
}
data[key] = {
title: title,
type: type,
value: value
};
data[key].value = value;
}
......@@ -74,23 +72,36 @@ function get_module_settings() {
.done(function(rData) {
try {
if (typeof rData.res.settings != "undefined") {
msettings = rData.res.settings;
var added_elts = [],
quill_containers = [];
for (let key in rData.res.settings) {
for (let key in msettings) {
var param = $(param_template.clone().html());
// param html include textarea and input : one of them will be removed
var input = null;
let data = rData.res.settings[key];
// Fill the label content
param.find('label').text(data.title)
.attr('for', key);
.attr('for', key)
if (data.type == 'textarea') {
param.find('input').remove();
// create an accordean button with label content as "text"
let accordeon_btn = $('<button>').attr('type', 'button')
.addClass('accordion')
.html(param.find('label').remove())
param.prepend(accordeon_btn);
input = param.find('textarea');
input.attr('name', key).text(data.value);
input.closest('div').attr('id', 'quill-' + key)
// create a div wrapper and put textarea in it
let content_div = $('<div>').attr('id', 'quill-' + key)
.css('height', '375px')
.html(input.remove())
param.find('.input-container').addClass('panel')
.addClass('ql-container')
.append(content_div);
quill_containers.push(
{
......@@ -103,6 +114,7 @@ function get_module_settings() {
param.find('textarea').remove();
input = param.find('input');
input.attr('name', key).attr('value', data.value);
if (typeof data.class != "undefined") input.addClass(data.class);
}
/*
......@@ -116,7 +128,8 @@ function get_module_settings() {
added_elts.push(key);
}
if (added_elts.length > 0) {
submit_btn.appendTo(main_content);
submit_btn.prependTo(main_content);
submit_btn.clone().appendTo(main_content);
}
submit_btn.click(save_module_settings);
quill_containers.forEach(function(params){
......@@ -134,3 +147,17 @@ function get_module_settings() {
}
get_module_settings();
$(document).on('click', '.accordion', function(){
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
\ No newline at end of file
templates/outils/config.html
......@@ -31,7 +31,7 @@
</div>
</div>
</div>
<div id="submit_button">
<div class="submit_button">
<div>
<button type="button" class="btn--primary">Enregistrer</button>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment