#7 New forms

* introduces bootstrap class form-control for proper html form input rendering
* fixes bug where missing shared users for an entry resulted in a None exception
* adds GenerateInput with template in generate-content-input.html, which provides a generate button for fetching server-side content
* adds/updates translations

konova/forms.py

@@ -43,7 +43,6 @@ class BaseForm(forms.Form):
     instance = None  # The data holding model object
     form_attrs = {}  # Holds additional attributes, that can be used in the template
     has_required_fields = False  # Automatically set. Triggers hint rendering in templates
-    full_width_fields = False  # w-100 for all input fields
 
     def __init__(self, *args, **kwargs):
         self.instance = kwargs.pop("instance", None)
@@ -56,11 +55,6 @@ class BaseForm(forms.Form):
                 self.has_required_fields = True
                 break
 
-        if self.full_width_fields:
-            # Automatically add bootstrap w-100 class for maximum width of form fields in modals
-            for key, val in self.fields.items():
-                self.add_widget_html_class(key, "w-100")
-
     @abstractmethod
     def save(self):
         # To be implemented in subclasses!
@@ -326,6 +320,11 @@ class NewDocumentForm(BaseModalForm):
         label=_("Title"),
         label_suffix=_(""),
         max_length=500,
+        widget=forms.TextInput(
+            attrs={
+                "class": "form-control",
+            }
+        )
     )
     creation_date = forms.DateField(
         label=_("Created on"),
@@ -335,6 +334,7 @@ class NewDocumentForm(BaseModalForm):
             attrs={
                 "type": "date",
                 "data-provide": "datepicker",
+                "class": "form-control",
             },
             format="%d.%m.%Y"
         )
@@ -345,7 +345,7 @@ class NewDocumentForm(BaseModalForm):
         help_text=_("Must be smaller than 15 Mb"),
         widget=forms.FileInput(
             attrs={
-                "class": "w-75"
+                "class": "form-control-file",
             }
         ),
     )
@@ -359,6 +359,7 @@ class NewDocumentForm(BaseModalForm):
             attrs={
                 "cols": 30,
                 "rows": 5,
+                "class": "form-control",
             }
         )
     )
@@ -370,9 +371,6 @@ class NewDocumentForm(BaseModalForm):
         Ema: EmaDocument,
     }
 
-    # Define w-100 for all form fields
-    full_width_fields = True
-
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.form_title = _("Add new document")

konova/static/css/konova.css

@@ -60,13 +60,7 @@ a {
     color: var(--rlp-red);
 }
 
-input[type=text], input[type=date] {
-    border: 1px solid gray;
-    border-radius: 0.2rem;
-    padding: 0.3rem 0.5rem;
-}
-
-input:focus, textarea:focus, select:focus{
+.form-control:focus{
     outline: none;
     border-color: var(--rlp-red);
     box-shadow: 0 0 3px var(--rlp-red);

konova/templates/konova/custom_widgets/generate-content-input.html

@@ -0,0 +1,22 @@
+{% load i18n fontawesome_5 %}
+
+<div class="input-group w-100" title="{{ widget.value|stringformat:'s' }}">
+    <input id="gen-id-input" aria-describedby="gen-id-btn" type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>
+    <div class="input-group-append" onclick="fetchNewIdentifier()">
+        <span id="gen-id-btn" class="btn btn-default" value="{% trans 'Generate new' %}" title="{% trans 'Generate new' %}">{% fa5_icon 'dice' %}</span>
+    </div>
+</div>
+<script>
+    function fetchNewIdentifier() {
+        fetch("{{ widget.attrs.url }}")
+            .then(function(response){
+                return response.json();
+            })
+            .then(function(data){
+                document.getElementById("gen-id-input").value = data["identifier"];
+            })
+            .catch(function(error){
+                console.log(error);
+            });
+    }
+</script>