Update dashboard module editing layout

jet/dashboard/templates/jet.dashboard/update_module.html

@@ -20,120 +20,77 @@
     {% endblock %}
 {% endif %}
 
-{% block content %}
-    <form action="" method="POST">
-        <div class="changeform">
-            {% csrf_token %}
-
-            {{ form.media }}
-            {{ settings_form.media }}
-            {{ children_formset.media }}
-
-            <ul class="changeform-tabs">
-                <li class="changeform-tabs-item selected{% if form.errors or settings_form.errors %} errors{% endif %}">
-                    <a href="#" class="changeform-tabs-item-link" data-module-id="module_0">
-                        {% trans "General" %}
-                    </a>
-                </li>
-                {% if children_formset %}
-                    {% formset_has_errors children_formset as errors %}
-
-                    <li class="changeform-tabs-item{% if errors %} errors{% endif %}">
-                        <a href="#" class="changeform-tabs-item-link" data-module-id="module_1">
-                            {{ child_name_plural }}
-                        </a>
-                    </li>
-                {% endif %}
-            </ul>
+{% block bodyclass %}{{ block.super }} dashboard jet change-form{% endblock %}
 
-            <div class="module selected" id="module_0">
-                {{ form.non_field_errors }}
-                {{ settings_form.non_field_errors }}
+{% block content %}
+    <div id="content-main">
+        {% block object-tools %}{% endblock %}
 
+        <form action="" method="post" novalidate>{% csrf_token %}{% block form_top %}{% endblock %}
+            <div>
                 {% if form.errors or settings_form.errors %}
+                    <p class="errornote">{% trans "Please correct the errors below." %}</p>
+                {% endif %}
+
+                {% block field_sets %}
                     <fieldset class="module aligned">
-                        <p class="errornote">
-                            {% trans "Please correct the errors below." %}
-                        </p>
+                        {% include "jet.dashboard/update_module_fieldset.html" with form=form wrap=False %}
+
+                        {% if settings_form %}
+                            {% include "jet.dashboard/update_module_fieldset.html" with form=settings_form wrap=False %}
+                        {% endif %}
                     </fieldset>
-                {% endif %}
+                {% endblock %}
 
-                {% include "jet.dashboard/update_module_fieldset.html" with form=form %}
+                {% block after_field_sets %}{% endblock %}
 
-                {% if settings_form %}
-                    {% include "jet.dashboard/update_module_fieldset.html" with form=settings_form %}
-                {% endif %}
-            </div>
+                {% block inline_field_sets %}
+                    {% if children_formset %}
+                        <div class="inline-group">
+                            <fieldset class="module">
+                                <h2>{{ child_name_plural }}</h2>
+
+                                {{ children_formset.management_form }}
+                                {{ children_formset.non_form_errors }}
 
-            {% if children_formset %}
-                <div class="module" id="module_1">
-                    <div class="inline-group">
-                        {{ children_formset.management_form }}
-                        {{ children_formset.non_form_errors }}
-
-                        <div class="stacked-inline side cf">
-                            <div class="stacked-inline-side">
-                            <div class="stacked-inline-side-top"></div>
-                                <ul class="stacked-inline-list">
-                                    {% for form in children_formset %}
-                                        <li class="stacked-inline-list-item{% if forloop.first %} selected{% endif %}{% if form.errors %} errors{% endif %}">
-                                            <a href="#" class="stacked-inline-list-item-link" data-inline-related-id="{{ children_formset.prefix }}-{{ forloop.counter0 }}">
-                                                {% if not form.initial %}
-                                                    <span class="icon-new"></span>
-                                                {% endif %}
-                                                <b>{{ child_name }}:</b>&nbsp;
-                                                <span class="inline_label">
-                                                    #{{ forloop.counter }}
-                                                </span>
-                                            </a>
-                                        </li>
-                                    {% endfor %}
-                                    <li class="stacked-inline-list-item empty">
-                                        <a href="#" class="stacked-inline-list-item-link" data-inline-related-id="{{ children_formset.prefix }}-empty">
-                                            <span class="icon-new"></span>
-                                            <b>{{ child_name }}:</b>&nbsp;
-                                            <span class="inline_label">
-                                                #{{ children_formset|length }}
-                                            </span>
-                                        </a>
-                                    </li>
-                                </ul>
-                                <div class="stacked-inline-side-bottom"></div>
-                            </div>
-                            <div class="stacked-inline-content">
                                 {% for form in children_formset %}
-                                    <div class="stacked {% if forloop.first %}selected {% endif %}inline-related {% if forloop.last %} last-related{% endif %}" id="{{ children_formset.prefix }}-{{ forloop.counter0 }}">
+                                    <div class="inline-related{% if forloop.last %} empty-form last-related{% else %} has_original{% endif %}">
+                                        <h3>
+                                            <b>{{ child_name|capfirst }}:</b>&nbsp;<span class="inline_label">#{{ forloop.counter }}</span>
+
+                                            {% if forloop.last %}
+                                                <span><a href="#" class="inline-deletelink">{% trans "Delete" %}</a></span>
+                                            {% elif children_formset.can_delete %}
+                                                <span class="delete"><label>{{ form.DELETE }} {% trans "Delete" %}</label></span>
+                                            {% endif %}
+                                        </h3>
+
                                         {% if form.non_field_errors %}{{ form.non_field_errors }}{% endif %}
+
                                         {% include "jet.dashboard/update_module_fieldset.html" with form=form %}
                                     </div>
                                 {% endfor %}
-                                {% with form=children_formset.empty_form %}
-                                    <div class="stacked inline-related empty-form last-related" id="{{ children_formset.prefix }}-empty">
-                                        {% if form.non_field_errors %}{{ form.non_field_errors }}{% endif %}
-                                        {% include "jet.dashboard/update_module_fieldset.html" with form=form %}
+
+                                {% with child_name as verbose_name %}
+                                    <div class="add-row">
+                                        <a href="#">{% blocktrans %}Add another {{ verbose_name }}{% endblocktrans %}</a>
                                     </div>
                                 {% endwith %}
-                            </div>
+                            </fieldset>
                         </div>
-                    </div>
-                    </div>
+                    {% endif %}
+                {% endblock %}
 
-                    <script type="text/javascript">
-                    (function($) {
-                      $("#module_1 .inline-related").stackedFormset({
-                        prefix: '{{ children_formset.prefix }}',
-                        adminStaticPrefix: '{% static "admin/" %}',
-                        deleteText: "{% trans "Remove" %}",
-                        addText: "<span class=\"icon-add\"></span> {% blocktrans with verbose_name=child_name|capfirst %}Add another {{ verbose_name }}{% endblocktrans %}"
-                      });
-                    })(django.jQuery);
-                    </script>
+                {% block after_related_objects %}{% endblock %}
 
-            {% endif %}
+                {% block submit_buttons_bottom %}
+                    <div class="submit-row">
+                        <input type="submit" value="{% trans 'Save' %}" class="default" name="_save" />
+                    </div>
+                {% endblock %}
 
-            <div class="submit-row">
-                <input type="submit" value="{% trans 'Save' %}" class="default" name="_save" />
+                {% block admin_change_form_document_ready %}{% endblock %}
             </div>
-       </div>
-    </form>
-{% endblock %}
+        </form>
+    </div>
+{% endblock %}

jet/dashboard/templates/jet.dashboard/update_module_fieldset.html

@@ -1,20 +1,22 @@
 {% load i18n jet_tags %}
 
-<fieldset class="module aligned">
+{% if wrap != False %}<fieldset class="module aligned">{% endif %}
     {% for field in form %}
-        <div class="form-row{% if field.errors %} errors{% endif %}">
-            {{ field.errors }}
+        {% if field.name != 'DELETE' %}
+            <div class="form-row{% if field.errors %} errors{% endif %}">
+                {{ field.errors }}
 
-            {% if field|is_checkbox %}
-                {{ field }} <label{% if field.field.required %} class="required"{% endif %} for="{{ field.id_for_label }}">{{ field.label }}</label>
-            {% else %}
-                <label{% if field.field.required %} class="required"{% endif %} for="{{ field.id_for_label }}">{{ field.label }}:</label>
-                {{ field }}
-            {% endif %}
+                {% if field|is_checkbox %}
+                    {{ field }} <label{% if field.field.required %} class="required"{% endif %} for="{{ field.id_for_label }}">{{ field.label }}</label>
+                {% else %}
+                    <label{% if field.field.required %} class="required"{% endif %} for="{{ field.id_for_label }}">{{ field.label }}:</label>
+                    {{ field }}
+                {% endif %}
 
-            {% if field.field.help_text %}
-                <p class="help">{{ field.field.help_text|safe }}</p>
-            {% endif %}
-        </div>
+                {% if field.field.help_text %}
+                    <p class="help">{{ field.field.help_text|safe }}</p>
+                {% endif %}
+            </div>
+        {% endif %}
     {% endfor %}
-</fieldset>
+{% if wrap != False %}</fieldset>{% endif %}

jet/static/jet/js/src/features/dashboard.js

@@ -247,6 +247,75 @@ Dashboard.prototype = {
             });
         });
     },
+    updateModuleChildrenFormsetLabels: function($inline) {
+        $inline.find('.inline-related').each(function(i) {
+            $(this).find('.inline_label').text('#' + (i + 1));
+        });
+    },
+    updateModuleChildrenFormsetFormIndex: function($form, index) {
+        var prefix = "children";
+        var id_regex = new RegExp("(" + prefix + "-(\\d+|__prefix__))");
+        var replacement = prefix + "-" + index;
+
+        $form.find("fieldset.module *").each(function() {
+            var $el = $(this);
+
+            $.each(['for', 'id', 'name'], function() {
+                var attr = this;
+
+                if ($el.attr(attr)) {
+                    $el.attr(attr, $el.attr(attr).replace(id_regex, replacement));
+                }
+            });
+        });
+    },
+    updateModuleChildrenFormsetFormsIndexes: function($inline) {
+        var self = this;
+        var from = parseInt($inline.find('.inline-related.has_original').length);
+
+        $inline.find('.inline-related.last-related').each(function(i) {
+            self.updateModuleChildrenFormsetFormIndex($(this), from + i);
+        });
+    },
+    updateModuleChildrenFormsetTotalForms: function($inline) {
+        var $totalFormsInput = $inline.find('[name="children-TOTAL_FORMS"]');
+        var totalForms = parseInt($inline.find('.inline-related').length);
+
+        $totalFormsInput.val(totalForms);
+    },
+    initModuleChildrenFormsetUpdate: function($dashboard) {
+        if (!$dashboard.hasClass('change-form')) {
+            return;
+        }
+
+        var self = this;
+        var $inline = $dashboard.find('.inline-group');
+
+        $inline.find('.add-row a').on('click', function(e) {
+            e.preventDefault();
+
+            var $empty = $inline.find('.inline-related.empty-form');
+            var $clone = $empty
+                .clone(true)
+                .removeClass('empty-form')
+                .insertBefore($empty);
+
+            self.updateModuleChildrenFormsetLabels($inline);
+            self.updateModuleChildrenFormsetFormIndex($empty, parseInt($inline.find('.inline-related').length) - 1);
+            self.updateModuleChildrenFormsetFormIndex($clone, parseInt($inline.find('.inline-related').length) - 2);
+            self.updateModuleChildrenFormsetTotalForms($inline);
+        });
+
+        $inline.find('.inline-deletelink').on('click', function(e) {
+            e.preventDefault();
+
+            $(this).closest('.inline-related').remove();
+
+            self.updateModuleChildrenFormsetFormsIndexes($inline);
+            self.updateModuleChildrenFormsetLabels($inline);
+            self.updateModuleChildrenFormsetTotalForms($inline);
+        });
+    },
     run: function() {
         var $dashboard = this.$dashboard;
 
@@ -256,6 +325,7 @@ Dashboard.prototype = {
             this.initCollapsibleModules($dashboard);
             this.initDeletableModules($dashboard);
             this.initAjaxModules($dashboard);
+            this.initModuleChildrenFormsetUpdate($dashboard);
         } catch (e) {
             console.error(e, e.stack);
         }