Fix/fix inlines (#354)

* fixed some bugs with inlines removed add button if max number of forms is reached * removed forced extra number, build assets * selectixe controll one above * changed extra fields notaction to allow for deafult * removed use of z index for helper panes * typo * remove no use pep 517 flag
dpgmediamagazines · Jun 3, 2019 · bf1bfde · bf1bfde
1 parent 0359bdc
commit bf1bfde
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 17,738 deletions.
diff --git a/arctic/mixins.py b/arctic/mixins.py
@@ -510,7 +510,8 @@ def get_context_data(self, **kwargs):
                 except AttributeError:
                     verbose_name = formset.model._meta.verbose_name_plural
                 setattr(context["inlines"][i], "verbose_name", verbose_name)
-                context["inlines"][i].extra = 1
+                extra = getattr(self.inlines[i], 'inline_extra', 1)
+                context["inlines"][i].extra = extra
                 if hasattr(self.inlines[i], "sorting_field"):
                     setattr(
                         context["inlines"][i],

diff --git a/arctic/static/arctic/dist/assets/css/arctic.css b/arctic/static/arctic/dist/assets/css/arctic.css
diff --git a/arctic/static/arctic/dist/assets/img/arctic_logo.svg b/arctic/static/arctic/dist/assets/img/arctic_logo.svg
diff --git a/arctic/static/arctic/dist/assets/js/app.js b/arctic/static/arctic/dist/assets/js/app.js
diff --git a/arctic/static/arctic/src/assets/js/components/datepickers.js b/arctic/static/arctic/src/assets/js/components/datepickers.js
@@ -48,6 +48,7 @@ function startDatepicker() {
     $('[js-datepicker]').each(function(index) {
         var date = datetimeformatter($(this).attr("data-date"), $(this).attr('format') ? $(this).attr('format') : datetime_picker_settings.dateFormat);
         var instance = this;
+        var oldValue = this.value;
         $(instance).attr('type', 'text');
         $(instance).datepicker({
             todayButton: true,
@@ -67,13 +68,17 @@ function startDatepicker() {
             })
 
         }).data('datepicker').selectDate(date);
+        if (oldValue) {
+            this.value = oldValue;
+        }
     });
 }
 
 function startTimePicker() {
     $('[js-timepicker]').each(function(index) {
         var date = datetimeformatter($(this).attr("data-date"), $(this).attr('format') ? $(this).attr('format') : datetime_picker_settings.timeFormat);
         var instance = this;
+        var oldValue = this.value;
         $(instance).attr('type', 'text');
         $(instance).datepicker({
             onlyTimepicker: true,
@@ -93,13 +98,17 @@ function startTimePicker() {
                 return inst;
             })
         }).data('datepicker').selectDate(date);
+        if (oldValue) {
+            this.value = oldValue;
+        }
     });
 }
 
 function startDateTimePicker() {
     $('[js-datetimepicker]').each(function(index) {
         var date = datetimeformatter($(this).attr("data-datetime"),  $(this).attr('format') ? $(this).attr('format') : `${datetime_picker_settings.dateFormat} ${datetime_picker_settings.timeFormat}`);
         var instance = this;
+        var oldValue = this.value;
         $(instance).attr('type', 'text');
         $(instance).datepicker({
             language: 'en',
@@ -119,6 +128,9 @@ function startDateTimePicker() {
                 return inst;
             })
        }).data('datepicker').selectDate(date);
+       if (oldValue) {
+           this.value = oldValue;
+       }
     });
 }
 

diff --git a/arctic/static/arctic/src/assets/js/components/inlines.js b/arctic/static/arctic/src/assets/js/components/inlines.js
@@ -2,10 +2,11 @@ function startDynamicInlines() {
     let inlineFormSelector = '[data-inline-form]';
     hideFields(inlineFormSelector);
     deleteButton(inlineFormSelector);
+    checkMaxNum(inlineFormSelector);
 
-    $('[data-inline-button]').off().on('click', function(e){
+    $('[js-data-inline-button]').off().on('click', function(e){
         e.preventDefault();
-
+        let max_num = this.getAttribute('data-inline-max-num');
         let $parent = $(this).parent();
         let $inlineForm = $parent.find(inlineFormSelector);
         inlineForm = $inlineForm[$inlineForm.length -1];
@@ -37,6 +38,11 @@ function startDynamicInlines() {
         startSortInlines();
         floatLabels();
         betterFile();
+
+        // check max number
+        if (max_num == $inlineForm.length) {
+            $(this).hide();
+        }
     });
 
     function deleteButton(inlineFormSelector) {
@@ -84,6 +90,20 @@ function startDynamicInlines() {
         let $delete$Fields = $(inlineFormSelector).find(deleteInput);
         $delete$Fields.closest('.row').addClass('hide');
     }
+
+    function checkMaxNum(inlineFormSelector) {
+        // Check if the form already reached the max number of fields
+        let $addButton = $('[js-data-inline-button]');
+        for(let i = 0, len = $addButton.length; i < len; i++) {
+            let button = $addButton[i];
+            let $parent = $(button).parent();
+            let $inlineForm = $parent.find(inlineFormSelector);
+            let max_num = button.getAttribute('data-inline-max-num');
+            if (max_num == $inlineForm.length) {
+                $(button).hide();
+            }
+        }
+    }
  }
 
  function checkOrder(fields) {

diff --git a/arctic/static/arctic/src/assets/js/components/modal.js b/arctic/static/arctic/src/assets/js/components/modal.js
@@ -9,10 +9,10 @@ $(document).ready(function() {
     $('iframe').iFrameResize({
         scrolling: true,
         warningTimeout: 0,
-        resizedCallback: function(messageData) {
+        onResized: function(messageData) {
             $('#iframe-modal').modal('handleUpdate');
         },
-        messageCallback: function(messageData) {
+        onMessage: function(messageData) {
             if (messageData.message == 'close') {
                 $('#iframe-modal').modal('hide');
             }

diff --git a/arctic/static/arctic/src/assets/scss/partials/_forms.scss b/arctic/static/arctic/src/assets/scss/partials/_forms.scss
@@ -375,12 +375,16 @@ form.search-form {
     .inline-helper-pane {
         position: absolute;
         top: 0;
-        left: 0;
-        right: -50px;
         height: 100%;
         z-index: 0;
 
-        &--big {
+        &--right {
+            right: -50px;
+            left: 100%;
+        }
+
+        &--left {
+            right: 100%;
             left: -50px;
         }
     }

diff --git a/arctic/templates/arctic/base_create_update.html b/arctic/templates/arctic/base_create_update.html
@@ -48,7 +48,7 @@ <h6 class="arctic-card__title">{{ formset.verbose_name }}</h6>
                                     {% include "arctic/partials/form_fields_inline.html" with form=form hide_form=forloop.last %}
                                 {% endblock %}
                                 {% if forloop.last %}
-                                    <button class="btn btn-secondary btn-sm" data-inline-button>
+                                    <button class="btn btn-secondary btn-sm" data-inline-max-num="{{ formset.max_num }}" js-data-inline-button>
                                         <i title="Add Inline" class="fa fa-plus"></i>
                                     </button>
                                 {% endif %}

diff --git a/arctic/templates/arctic/index.html b/arctic/templates/arctic/index.html
@@ -134,7 +134,7 @@ <h4 id="form" data-magellan-target="form">Form with HTML5 input types</h4>
                         <button class="btn btn-primary" type="submit" value="Submit">Submit</button>
                     </div>
                 </div>
-            </div> 
+            </div>
         </fieldset>
     </form>
 

diff --git a/arctic/templates/arctic/partials/form_fields_inline.html b/arctic/templates/arctic/partials/form_fields_inline.html
@@ -16,15 +16,18 @@
         {% endblock %}
     {% endif %}
 {% endfor %}
-    <div class="inline-helper-pane {% if formset.sorting_field %}inline-helper-pane--big{% endif %}"></div>
     {% if formset.sorting_field %}
+        <div class="inline-helper-pane inline-helper-pane--left"></div>
         <div class="inline-form-grab">
             <i class="fa fa-bars"></i>
         </div>
     {% endif %}
-    <div class="btn btn-secondary btn-sm inline-form-delete" js-inline-delete>
-        <i class="fa fa-trash fa-lg"></i>
-    </div>
+    {% if formset.can_delete is not False %}
+        <div class="inline-helper-pane inline-helper-pane--right"></div>
+        <div class="btn btn-secondary btn-sm inline-form-delete" js-inline-delete>
+            <i class="fa fa-trash fa-lg"></i>
+        </div>
+    {% endif %}
     <div class="inline-separator">
         <hr><br>
     </div>

diff --git a/example/articles/inlines.py b/example/articles/inlines.py
@@ -19,3 +19,4 @@ class ImagesInline(InlineFormSet):
     fields = "__all__"
     layout = {"blah": "bah"}
     sorting_field = "order"
+    inline_extra = 1
diff --git a/tox.ini b/tox.ini
@@ -1,5 +1,5 @@
 [tox]
-envlist = 
+envlist =
     py{36,37}-django{111,201,202}
 
 [travis]
@@ -9,7 +9,6 @@ python =
 
 [testenv]
 deps =
-    --no-use-pep517
     -efile://{toxinidir}
     -rrequirements/test.txt
     django202: Django >= 2.2, < 2.3