Improve multiple select inputs

+ Group edition form gains success message, is prettier
+ Fix: K-Fêt prefix for group name on this form

kfet/static/kfet/css/index.css

@@ -595,3 +595,16 @@ thead .tooltip {
     width: 50px;
     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;
+}

kfet/templates/kfet/account_group_form.html

@@ -1,37 +1,62 @@
 {% extends 'kfet/base.html' %}
 {% load staticfiles %}
+{% load widget_tweaks %}
 
 {% block extra_head %}
 <link rel="stylesheet" text="text/css" href="{% static 'kfet/css/multiple-select.css' %}">
 <script src="{% static 'kfet/js/multiple-select.js' %}"></script>
 {% endblock %}
 
+{% block title %}Permissions - Édition{% endblock %}
+{% block content-header-title %}Modification des permissions{% endblock %}
+
 {% 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 %}
-  <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">
               <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>
+        {% 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>
+    </div>
+  </div>
+</div>
 
 <script type="text/javascript">
 $(document).ready(function() {
-    $("select").multipleSelect({
+    let perms_input = $("#id_permissions");
-        width: 500,
+    perms_input.removeClass("form-control");
+    perms_input.multipleSelect({
+        width: "100%",
         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>
 

kfet/templates/kfet/base_form.html

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

kfet/templates/kfet/history.html

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

kfet/views.py

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