Improve multiple select inputs

+ Group edition form gains success message, is prettier
+ Fix: K-Fêt prefix for group name on this form
This commit is contained in:
Aurélien Delobelle 2017-05-18 21:41:23 +02:00
parent 1a661c1fd3
commit e9073e2265
5 changed files with 60 additions and 19 deletions

View file

@ -595,3 +595,16 @@ thead .tooltip {
width: 50px; width: 50px;
margin: 0 auto; margin: 0 auto;
} }
/* Multiple select customizations */
.ms-choice {
height: 34px !important;
line-height: 34px !important;
border: 1px solid #ccc !important;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;
}
.ms-choice > div {
top: 4px !important;
}

View file

@ -1,37 +1,62 @@
{% extends 'kfet/base.html' %} {% extends 'kfet/base.html' %}
{% load staticfiles %} {% load staticfiles %}
{% load widget_tweaks %}
{% block extra_head %} {% block extra_head %}
<link rel="stylesheet" text="text/css" href="{% static 'kfet/css/multiple-select.css' %}"> <link rel="stylesheet" text="text/css" href="{% static 'kfet/css/multiple-select.css' %}">
<script src="{% static 'kfet/js/multiple-select.js' %}"></script> <script src="{% static 'kfet/js/multiple-select.js' %}"></script>
{% endblock %} {% endblock %}
{% block title %}Permissions - Édition{% endblock %}
{% block content-header-title %}Modification des permissions{% endblock %}
{% block content %} {% block content %}
<form action="" method="post"> {% include "kfet/base_messages.html" %}
<div class="row">
<div class="col-sm-12 col-md-8 col-md-offset-2 nopadding">
<div class="content-center content-form">
<form action="" method="post" class="form-horizontal">
{% csrf_token %} {% csrf_token %}
<div> <div class="form-group">
{{ form.name.errors }} <label for="{{ form.name.id_for_label }}" class="col-sm-2 control-label">{{ form.name.label }}</label>
{{ form.name.label_tag }} <div class="col-sm-10">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon">K-Fêt</span> <span class="input-group-addon">K-Fêt</span>
{{ form.name }} {{ form.name|add_class:"form-control" }}
</div>
{% if form.name.errors %}<span class="help-block">{{ form.name.errors }}</span>{% endif %}
{% if form.name.help_text %}<span class="help-block">{{ form.name.help_text }}</span>{% endif %}
</div> </div>
</div> </div>
<div> {% include "kfet/form_field_snippet.html" with field=form.permissions %}
{{ form.permissions.errors }} {% if not perms.kfet.manage_perms %}
{{ form.permissions.label_tag }} {% include "kfet/form_authentication_snippet.html" %}
{{ form.permissions }} {% endif %}
</div> {% include "kfet/form_submit_snippet.html" with value="Enregistrer" %}
<input type="submit" value="Enregistrer">
</form> </form>
</div>
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$("select").multipleSelect({ let perms_input = $("#id_permissions");
width: 500, perms_input.removeClass("form-control");
perms_input.multipleSelect({
width: "100%",
filter: true, filter: true,
allSelected: "Tou-te-s",
selectAllText: "Tou-te-s",
countSelected: "# sur %"
}); });
let $name_input = $("#id_name");
let raw_name = $name_input.val();
let prefix = "K-Fêt ";
if (raw_name.startsWith(prefix))
$name_input.val(raw_name.substring(prefix.length));
}); });
</script> </script>

View file

@ -3,7 +3,7 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-8 col-md-offset-2 nopadding"> <div class="col-sm-12 col-md-8 col-md-offset-2 nopadding">
<div class="content-center content-form"> <div class="content-center content-form">
<form submit="" method="post" class="form-horizontal"> <form action="" method="post" class="form-horizontal">
{% csrf_token %} {% csrf_token %}
{% include "kfet/form_snippet.html" %} {% include "kfet/form_snippet.html" %}
{% if not authz %} {% if not authz %}

View file

@ -128,6 +128,9 @@ $(document).ready(function() {
$("select").multipleSelect({ $("select").multipleSelect({
width: '100%', width: '100%',
filter: true, filter: true,
allSelected: " ",
selectAllText: "Tout-te-s",
countSelected: "# sur %"
}); });
$("input").on('dp.change change', function() { $("input").on('dp.change change', function() {

View file

@ -539,7 +539,7 @@ class AccountGroupCreate(SuccessMessageMixin, CreateView):
success_message = 'Nouveau groupe : %(name)s' success_message = 'Nouveau groupe : %(name)s'
success_url = reverse_lazy('kfet.account.group') success_url = reverse_lazy('kfet.account.group')
class AccountGroupUpdate(UpdateView): class AccountGroupUpdate(SuccessMessageMixin, UpdateView):
queryset = Group.objects.filter(name__icontains='K-Fêt') queryset = Group.objects.filter(name__icontains='K-Fêt')
template_name = 'kfet/account_group_form.html' template_name = 'kfet/account_group_form.html'
form_class = GroupForm form_class = GroupForm