Completely changes the method used to display a simple TextInput field in the...

Completely changes the method used to display a simple TextInput field in the dynamic bug_categories row; now using an extra CharField which is turned visible/invisible.
Add free_text field to models.py, change migrations and admin.py accordingly.
Added modified top/bottom margins in hjelp.css.
Further disables all fields that are not visible and simplifies jQuery section of rebus.html.
Modifies models.py so that children are deleted when the free text option is selected.

aleksis/apps/hjelp/admin.py

@@ -44,7 +44,7 @@ class FAQQuestionAdmin(admin.ModelAdmin):
 
 
 class REBUSCategoryAdmin(admin.ModelAdmin):
-    list_display = ("name", "_icon", "_parent", "_placeholder", "_tagging")
+    list_display = ("name", "_icon", "_parent", "_placeholder", "_free_text")
 
     class Media:
         css = {
@@ -60,8 +60,8 @@ class REBUSCategoryAdmin(admin.ModelAdmin):
     def _placeholder(self, obj):
         return obj.placeholder
 
-    def _tagging(self, obj):
-        return obj.tagging
+    def _free_text(self, obj):
+        return obj.free_text
 
 
 admin.site.register(FAQQuestion, FAQQuestionAdmin)

aleksis/apps/hjelp/forms.py

@@ -20,7 +20,11 @@ class REBUSForm(forms.Form):
         widget=ModelSelect2Widget(
             model=REBUSCategory,
             search_fields=["name__icontains"],
-            attrs={"data-minimum-input-length": 0, "class": "browser-default", "data-placeholder": _("Select a category")},
+            attrs={
+                "data-minimum-input-length": 0,
+                "class": "browser-default",
+                "data-placeholder": _("Select a category"),
+            },
         ),
     )
     bug_category_2 = forms.ModelChoiceField(
@@ -43,6 +47,10 @@ class REBUSForm(forms.Form):
             attrs={"data-minimum-input-length": 0, "class": "browser-default"},
         ),
     )
+    bug_category_free_text = forms.CharField(
+        label=_("Please specify the error according to the chosen category."),
+        required=False,
+    )
     short_description = forms.CharField(
         label=_("Please describe the error in one sentence."), required=True
     )

aleksis/apps/hjelp/models.py

@@ -58,12 +58,17 @@ class REBUSCategory(models.Model):
                             verbose_name=_("Symbol"))
     parent = models.ForeignKey("self", related_name="children", on_delete=models.CASCADE, blank=True,
                                null=True, verbose_name=_("Parent"))
-    tagging = models.BooleanField(verbose_name=_("Tagging allowed"), default=False)
+    free_text = models.BooleanField(verbose_name=_("Free text input allowed"), default=False)
     placeholder = models.CharField(max_length=100, verbose_name=_("Placeholder"), blank=True, null=True)
 
     def __str__(self):
         return self.name
 
+    def save(self, *args, **kwargs):
+        if self.free_text:
+            REBUSCategory.objects.filter(parent=self).delete()
+        super(REBUSCategory, self).save(*args, **kwargs)
+
     class Meta:
         verbose_name = _("Bug report category")
         verbose_name_plural = _("Bug report categories")

aleksis/apps/hjelp/static/css/hjelp.css

@@ -65,4 +65,6 @@
 
 .bug-category-field {
     flex-grow: 1;
+    margin-top: 0;
+    margin-bottom: 0;
 }

aleksis/apps/hjelp/templates/hjelp/rebus.html

@@ -16,34 +16,44 @@
         <p class="red-text">{{ form.non_field_errors }}</p>
 
         <div class="row">
-            <div id="{{ form.bug_category_1.auto_id }}" class="input col s12 m4 support-input-mobile browser-default">
+            <div id="{{ form.bug_category_1.auto_id }}" class="input col s12 m4 browser-default">
                 <div class="flex-row">
                     <div id="bug_category_1_icon" class="bug-category-icon">
                         <i class="material-icons prefix small">bug_report</i>
                     </div>
-                    <div class="bug-category-field">
+                    <div class="support-input-mobile bug-category-field">
                         {{ form.bug_category_1 }}
                     </div>
                 </div>
             </div>
-            <div id="{{ form.bug_category_2.auto_id }}" class="input col s12 m4 support-input-mobile browser-default" style="display: none">
+            <div id="{{ form.bug_category_2.auto_id }}" class="input col s12 m4 browser-default" style="display: none" disabled>
                 <div class="flex-row">
                     <div id="bug_category_2_icon" class="bug-category-icon">
                     </div>
-                    <div class="bug-category-field">
+                    <div class="support-input-mobile bug-category-field">
                         {{ form.bug_category_2 }}
                     </div>
                 </div>
             </div>
-            <div id="{{ form.bug_category_3.auto_id }}" class="input col s12 m4 support-input-mobile browser-default" style="display: none">
+            <div id="{{ form.bug_category_3.auto_id }}" class="input col s12 m4 browser-default" style="display: none" disabled>
                 <div class="flex-row">
                     <div id="bug_category_3_icon" class="bug-category-icon">
                     </div>
-                    <div class="bug-category-field">
+                    <div class="support-input-mobile bug-category-field">
                         {{ form.bug_category_3 }}
                     </div>
                 </div>
             </div>
+            <div id="{{ form.bug_category_free_text.auto_id }}" class="input col s12 m4" style="display: none" disabled>
+                <div class="flex-row">
+                    <div id="bug_category_free_text_icon" class="bug-category-icon">
+                    </div>
+                    <div class="input-field support-input-mobile bug-category-field">
+                        {{ form.bug_category_free_text }}
+                        <label for="{{ form.bug_category_free_text.id_for_label }}"></label>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div class="row">
@@ -81,8 +91,11 @@
                 M.toast({html: "<i class='material-icons left'>error</i>Bitte fülle alle benötigten Felder aus!"})
             }
         });
-
-        $.fn.setNextProperties = function (field_id, next_field_id, icon_id, next_field_name) {
+        $.fn.hideAndDisable = function (id) {
+            $(id).hide();
+            $(id).disabled = true;
+        }
+        $.fn.setNextProperties = function (field_id, next_field_id, next_field_name) {
             var category = $('#' + field_id).find(':selected').text();
             $.ajax({
                 url: '{% url "rebus-get-next-properties" %}',
@@ -91,25 +104,30 @@
                 },
                 dataType: 'json',
                 success: function (data) {
-                    $(icon_id).html("<i class=\"material-icons prefix small\">" + data.icon + "</i>");
-                    $("[name=" + next_field_name + "]").djangoSelect2({tags: data.tagging});
-                    $("[name=" + next_field_name + "]").next("span.select2:first").find("span.select2-selection__placeholder").html(data.placeholder);
-                    if (($(next_field_id).is(':hidden')) && ((data.tagging == true) || ( data.has_children))) {
+                    if (data.free_text) {
+                        $.fn.hideAndDisable(next_field_id)
+                        next_field_id = "#{{ form.bug_category_free_text.auto_id }}"
+                        $(next_field_id).children().children('.bug-category-field').children('label').html(data.placeholder)
+                    } else {
+                        $.fn.hideAndDisable("#{{ form.bug_category_free_text.auto_id }}")
+                        $("[name=" + next_field_name + "]").next("span.select2:first").find("span.select2-selection__placeholder").html(data.placeholder);
+                    }
+                    $(next_field_id).children().children('.bug-category-icon').html("<i class=\"material-icons prefix small\">" + data.icon + "</i>");
+                    if (($(next_field_id).is(':hidden')) && ((data.has_children)) || (data.free_text)){
+                        $(next_field_id).disabled = false;
                         $(next_field_id).show();
-                    } else if (!data.has_children) {
-                        $(next_field_id).hide();
                     }
                 }
             });
         }
         $("#{{ form.bug_category_1.auto_id }}").on('input', function() {
-            $.fn.setNextProperties(this.id, "#{{ form.bug_category_2.auto_id }}", "#bug_category_2_icon", "bug_category_2")
+            $.fn.setNextProperties(this.id, "#{{ form.bug_category_2.auto_id }}", "bug_category_2")
             if ($("#{{ form.bug_category_3.auto_id }}").is(':visible')) {
-                $("#{{ form.bug_category_3.auto_id }}").hide();
+                $.fn.hideAndDisable("#{{ form.bug_category_3.auto_id }}")
             }
         });
         $("#{{ form.bug_category_2.auto_id }}").on('input', function() {
-            $.fn.setNextProperties(this.id, "#{{ form.bug_category_3.auto_id }}", "#bug_category_3_icon", "bug_category_3")
+            $.fn.setNextProperties(this.id, "#{{ form.bug_category_3.auto_id }}", "bug_category_3")
         });
     </script>
 

aleksis/apps/hjelp/views.py

@@ -71,7 +71,12 @@ def add_arrows(array: list):
 
 def rebus_get_next_properties(request):
     category = request.GET.get("category", None)
-    next_properties = {"icon": REBUSCategory.objects.get(name=category).icon, "tagging": REBUSCategory.objects.get(name=category).tagging, "placeholder": REBUSCategory.objects.get(name=category).placeholder, "has_children": REBUSCategory.objects.get(name=category).children.exists()}
+    next_properties = {
+        "icon": REBUSCategory.objects.get(name=category).icon,
+        "free_text": REBUSCategory.objects.get(name=category).free_text,
+        "placeholder": REBUSCategory.objects.get(name=category).placeholder,
+        "has_children": REBUSCategory.objects.get(name=category).children.exists(),
+    }
     return JsonResponse(next_properties)
 
 
@@ -84,12 +89,13 @@ def rebus(request):
             bug_category_1 = str(form.cleaned_data["bug_category_1"])
             bug_category_2 = str(form.cleaned_data["bug_category_2"])
             bug_category_3 = str(form.cleaned_data["bug_category_3"])
+            bug_category_free_text = form.cleaned_data["bug_category_free_text"]
             short_description = form.cleaned_data["short_description"]
             long_description = form.cleaned_data["long_description"]
 
             # Register activity
             desc_act = "{} | {}".format(
-                add_arrows([bug_category_1, bug_category_2, bug_category_3]),
+                add_arrows([bug_category_1, bug_category_2, bug_category_3, bug_category_free_text]),
                 short_description,
             )
             act = Activity(
@@ -103,7 +109,7 @@ def rebus(request):
             # Send mail
             context = {
                 "arrow_list": add_arrows(
-                    [bug_category_1, bug_category_2, bug_category_3]
+                    [bug_category_1, bug_category_2, bug_category_3, bug_category_free_text]
                 ),
                 "short_desc": short_description,
                 "long_desc": long_description,