WIP: JS Tree improvements

* adds optional short_name rendering for selectable codes
* refactors autocomplete field for compensation state into custom js tree widget
* adds single select (radio) alternative to tree widget templates

konova/templates/konova/widgets/tree/checkbox/checkbox-tree-select-content.html

@@ -10,12 +10,15 @@
             {% fa5_icon 'angle-down' %}
         </span>
         {% endif %}
+        {% if code.short_name %}
+            ({{code.short_name}})
+        {% endif %}
         {{code.long_name}}
     </label>
     {% if not code.is_leaf %}
     <div id="children_{{code.pk|unlocalize}}" data-toggle="collapse" class="collapse tree-element-children">
         {% with code.children as codes %}
-        {% include 'konova/widgets/checkbox-tree-select-content.html' %}
+        {% include 'konova/widgets/tree/checkbox/checkbox-tree-select-content.html' %}
         {% endwith %}
     </div>
     {% endif %}

konova/templates/konova/widgets/tree/checkbox/checkbox-tree-select.html

@@ -5,7 +5,7 @@
 </div>
 
 <div id="tree-root">
-    {% include 'konova/widgets/checkbox-tree-select-content.html' %}
+    {% include 'konova/widgets/tree/checkbox/checkbox-tree-select-content.html' %}
 </div>
 
 <script>

konova/templates/konova/widgets/tree/radio/radio-tree-select-content.html

@@ -0,0 +1,25 @@
+{% load l10n fontawesome_5 %}
+{% for code in codes %}
+<div class="ml-4 tree-element">
+    <label class="tree-label collapsed" role="{% if not code.is_leaf%}button{% endif %}" for="input_{{code.pk|unlocalize}}" id="{{code.pk|unlocalize}}" data-toggle="collapse" data-target="#children_{{code.pk|unlocalize}}" aria-expanded="true" aria-controls="children_{{code.pk|unlocalize}}">
+        {% if code.is_leaf%}
+        <input class="tree-input" id="input_{{code.pk|unlocalize}}" name="{{ widget.name }}" type="radio" value="{{code.pk|unlocalize}}" {% if code.pk|unlocalize in widget.value %}checked{% endif %}/>
+        {% else %}
+        <span class="collapse-icn">
+            {% fa5_icon 'angle-down' %}
+        </span>
+        {% endif %}
+        {% if code.short_name %}
+            ({{code.short_name}})
+        {% endif %}
+        {{code.long_name}}
+    </label>
+    {% if not code.is_leaf %}
+    <div id="children_{{code.pk|unlocalize}}" data-toggle="collapse" class="collapse tree-element-children">
+        {% with code.children as codes %}
+        {% include 'konova/widgets/tree/radio/radio-tree-select-content.html' %}
+        {% endwith %}
+    </div>
+    {% endif %}
+</div>
+{% endfor %}

konova/templates/konova/widgets/tree/radio/radio-tree-select.html

@@ -0,0 +1,70 @@
+{% load i18n %}
+
+<div class="ml-4 mb-4">
+    <input id="tree-search-input" class="form-control" type="text" placeholder="{% trans 'Search' %}"/>
+</div>
+<div id="tree-root">
+    {% include 'konova/widgets/tree/radio/radio-tree-select-content.html' %}
+</div>
+
+<script>
+    function toggleSelectedCssClass(element){
+        element = $(element);
+        var cssClass = "badge rlp-r"
+
+        var directParent = element.closest(".tree-element-children")
+        var root = element.parents(".tree-element-children")
+
+        var otherCheckedInputsOfParent = directParent.find('.tree-input:checked');
+        var otherCheckedInputsOfRoot = root.find('.tree-input:checked');
+
+        if(otherCheckedInputsOfParent.length == 0){
+            var parentLabel = directParent.siblings(".tree-label");
+            parentLabel.removeClass(cssClass)
+            if(otherCheckedInputsOfRoot.length == 0){
+                var rootLabel = root.siblings(".tree-label")
+                rootLabel.removeClass(cssClass)
+            }
+        }else{
+            var rootAndParentLabel = root.siblings(".tree-label");
+            rootAndParentLabel.addClass(cssClass);
+        }
+
+    }
+
+    function changeHandler(event){
+        toggleSelectedCssClass(this);
+    }
+
+    function searchInputHandler(event){
+        var elem = $(this);
+        var val = elem.val()
+        var allTreeElements = $(".tree-element")
+        var allTreeElementsContain = $(".tree-element").filter(function(){
+            var reg = new RegExp(val, "i");
+            return reg.test($(this).text());
+            }
+        );
+        if(val.length > 0){
+            // Hide everything
+            allTreeElements.hide()
+            // Now show again everything matching the query
+            allTreeElementsContain.show()
+        }else{
+            // Show everything if no query exists
+            allTreeElements.show()
+        }
+    }
+
+    // Add event listener on search input
+    $("#tree-search-input").keyup(searchInputHandler)
+
+    // Add event listener on changed checkboxes
+    $(".tree-input").change(changeHandler);
+
+    // initialize all pre-checked checkboxes (e.g. on an edit form)
+    var preCheckedElements = $(".tree-input:checked");
+    preCheckedElements.each(function (index, element){
+        toggleSelectedCssClass(element);
+    })
+</script>