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 118 additions and 40 deletions
members/admin.py
...@@ -9,36 +9,47 @@ from outils.common import MConfig ...@@ -9,36 +9,47 @@ from outils.common import MConfig
default_msettings = {'msg_accueil': {'title': 'Message borne accueil', default_msettings = {'msg_accueil': {'title': 'Message borne accueil',
'type': 'textarea', 'type': 'textarea',
'value': '' 'value': '',
'sort_order': 1
}, },
'no_picture_member_advice': {'title': 'Message avertissement membre sans photo', 'no_picture_member_advice': {'title': 'Message avertissement membre sans photo',
'type': 'textarea', 'type': 'textarea',
'value': '' 'value': '',
'sort_order': 2
}, },
'shop_opening_hours' : { 'shop_opening_hours': {
'title': 'Horaires ouverture magasin', 'title': 'Horaires ouverture magasin',
'type': 'textarea', 'type': 'textarea',
'value': '' 'value': '',
'sort_order': 3
}, },
'abcd_calendar_link' : { 'abcd_calendar_link': {
'title': 'Lien vers le calendrier ABCD', 'title': 'Lien vers le calendrier ABCD',
'type': 'text', 'type': 'text',
'value': '' 'value': '',
'class': 'link',
'sort_order': 4
}, },
'forms_link' : { 'forms_link': {
'title': 'Lien vers la page des formulaires', 'title': 'Lien vers la page des formulaires',
'type': 'text', 'type': 'text',
'value': '' 'value': '',
'class': 'link',
'sort_order': 5
}, },
'unsuscribe_form_link' : { 'unsuscribe_form_link': {
'title': 'Lien vers le formulaire de ré-inscription', 'title': 'Lien vers le formulaire de ré-inscription',
'type': 'text', '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', 'title': 'Lien vers le formulaire pour les membres n\'ayant pas rattrapé leur service après 6 mois',
'type': 'text', 'type': 'text',
'value': '' 'value': '',
'class': 'link',
'sort_order': 7
} }
} }
...@@ -63,7 +74,8 @@ def get_settings(request): ...@@ -63,7 +74,8 @@ def get_settings(request):
for k, v in default_msettings.items(): for k, v in default_msettings.items():
if not (k in msettings): if not (k in msettings):
msettings[k] = v 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: except Exception as e:
result['error'] = str(e) result['error'] = str(e)
else: else:
......
outils/static/css/module_config.css
#main_content {text-align: center;} #main_content {text-align: center;}
.param {margin-bottom: 15px;} .param {margin-bottom: 15px;}
.param label {font-weight: bold;} .param label {font-weight: bold;}
\ No newline at end of file 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'), var param_template = $('#templates #param'),
submit_btn = $('#templates #submit_button'), submit_btn = $('#templates .submit_button'),
main_content = $('#main_content'); main_content = $('#main_content'),
msettings = [];
function save_module_settings() { function save_module_settings() {
var form_elts = $('.input-container'), var form_elts = $('.input-container'),
data = {}; data = {};
form_elts.each(function(i, elt){ form_elts.each(function(i, elt){
console.log(elt)
const label = $(elt).closest('.param').find('label'), const label = $(elt).closest('.param').find('label'),
key = label.attr('for'), key = label.attr('for');
title = label.text();
if (key.length > 0 && key != 'iname') { if (key.length > 0 && key != 'iname') {
let value = "", let value = "";
type = ""; data[key] = msettings[key];
if ($(elt).hasClass('ql-container')) { if ($(elt).hasClass('ql-container')) {
type = 'textarea';
value = $(elt).find('.ql-editor').html().replace('<p><br></p>','') value = $(elt).find('.ql-editor').html().replace('<p><br></p>','')
} else { } else {
type = 'input';
value = $(elt).find('input').val(); value = $(elt).find('input').val();
} }
data[key] = { data[key].value = value;
title: title,
type: type,
value: value
};
} }
...@@ -74,23 +72,36 @@ function get_module_settings() { ...@@ -74,23 +72,36 @@ function get_module_settings() {
.done(function(rData) { .done(function(rData) {
try { try {
if (typeof rData.res.settings != "undefined") { if (typeof rData.res.settings != "undefined") {
msettings = rData.res.settings;
var added_elts = [], var added_elts = [],
quill_containers = []; quill_containers = [];
for (let key in rData.res.settings) { for (let key in msettings) {
var param = $(param_template.clone().html()); var param = $(param_template.clone().html());
// param html include textarea and input : one of them will be removed
var input = null; var input = null;
let data = rData.res.settings[key]; let data = rData.res.settings[key];
// Fill the label content
param.find('label').text(data.title) param.find('label').text(data.title)
.attr('for', key); .attr('for', key)
if (data.type == 'textarea') { if (data.type == 'textarea') {
param.find('input').remove(); 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 = param.find('textarea');
input.attr('name', key).text(data.value); input.attr('name', key).text(data.value);
input.closest('div').attr('id', 'quill-' + key) // create a div wrapper and put textarea in it
.css('height', '375px') 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( quill_containers.push(
{ {
...@@ -103,6 +114,7 @@ function get_module_settings() { ...@@ -103,6 +114,7 @@ function get_module_settings() {
param.find('textarea').remove(); param.find('textarea').remove();
input = param.find('input'); input = param.find('input');
input.attr('name', key).attr('value', data.value); 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() { ...@@ -116,7 +128,8 @@ function get_module_settings() {
added_elts.push(key); added_elts.push(key);
} }
if (added_elts.length > 0) { 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); submit_btn.click(save_module_settings);
quill_containers.forEach(function(params){ quill_containers.forEach(function(params){
...@@ -133,4 +146,18 @@ function get_module_settings() { ...@@ -133,4 +146,18 @@ function get_module_settings() {
}); });
} }
get_module_settings(); get_module_settings();
\ No newline at end of file
$(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 @@ ...@@ -31,7 +31,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="submit_button"> <div class="submit_button">
<div> <div>
<button type="button" class="btn--primary">Enregistrer</button> <button type="button" class="btn--primary">Enregistrer</button>
</div> </div>
...@@ -43,4 +43,4 @@ ...@@ -43,4 +43,4 @@
<script src='{% static "js/all_common.js" %}?v='></script> <script src='{% static "js/all_common.js" %}?v='></script>
<script src='{% static "js/module_config.js" %}?v='></script> <script src='{% static "js/module_config.js" %}?v='></script>
{% endblock %} {% endblock %}
\ No newline at end of file
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