From 18789c231dd6bc4b18c24642d660ef197c9c4ac0 Mon Sep 17 00:00:00 2001
From: mpeltriaux <michel.peltriaux@sgdnord.rlp.de>
Date: Tue, 10 May 2022 15:07:21 +0200
Subject: [PATCH 1/4] Visual enhancement for custom JS tree widget

* adds proper css behaviour for collapsed icon
* adds minor js comments
---
 konova/static/css/konova.css                          | 11 ++++++++++-
 .../konova/widgets/checkbox-tree-select-content.html  |  6 ++++--
 .../konova/widgets/checkbox-tree-select.html          |  3 +++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/konova/static/css/konova.css b/konova/static/css/konova.css
index 7e7f3fd..ed79704 100644
--- a/konova/static/css/konova.css
+++ b/konova/static/css/konova.css
@@ -262,4 +262,13 @@ Similar to bootstraps 'shadow-lg'
     padding-left: 2em;
 }
 
- */
\ No newline at end of file
+ */
+.collapse-icn > i{
+    transition: all 0.3s ease;
+}
+.collapsed .collapse-icn > i{
+    transform: rotate(-90deg);
+}
+.tree-label.badge{
+    font-size: 90%;
+}
\ No newline at end of file
diff --git a/konova/templates/konova/widgets/checkbox-tree-select-content.html b/konova/templates/konova/widgets/checkbox-tree-select-content.html
index 9bf5725..31599ef 100644
--- a/konova/templates/konova/widgets/checkbox-tree-select-content.html
+++ b/konova/templates/konova/widgets/checkbox-tree-select-content.html
@@ -2,11 +2,13 @@
 
 {% for code in codes %}
 <div class="ml-4 tree-element">
-    <label class="tree-label" 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}}">
+    <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="checkbox" value="{{code.pk|unlocalize}}" {% if code.pk|unlocalize in widget.value %}checked{% endif %}/>
         {% else %}
-        {% fa5_icon 'angle-right' %}
+        <span class="collapse-icn">
+            {% fa5_icon 'angle-down' %}
+        </span>
         {% endif %}
         {{code.long_name}}
     </label>
diff --git a/konova/templates/konova/widgets/checkbox-tree-select.html b/konova/templates/konova/widgets/checkbox-tree-select.html
index c2b107c..68e4321 100644
--- a/konova/templates/konova/widgets/checkbox-tree-select.html
+++ b/konova/templates/konova/widgets/checkbox-tree-select.html
@@ -47,9 +47,12 @@
             }
         );
         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()
         }
     }
-- 
2.38.5


From a5d24e6db59fee3ad6560ab1eb927f9a6078f1ac Mon Sep 17 00:00:00 2001
From: mpeltriaux <michel.peltriaux@sgdnord.rlp.de>
Date: Tue, 10 May 2022 16:41:46 +0200
Subject: [PATCH 2/4] 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
---
 codelist/models.py                            |  9 ++-
 compensation/forms/modalForms.py              | 19 ++---
 intervention/inputs.py                        | 67 +++++++++++++++++-
 .../checkbox-tree-select-content.html         |  5 +-
 .../checkbox}/checkbox-tree-select.html       |  2 +-
 .../tree/radio/radio-tree-select-content.html | 25 +++++++
 .../widgets/tree/radio/radio-tree-select.html | 70 +++++++++++++++++++
 7 files changed, 173 insertions(+), 24 deletions(-)
 rename konova/templates/konova/widgets/{ => tree/checkbox}/checkbox-tree-select-content.html (84%)
 rename konova/templates/konova/widgets/{ => tree/checkbox}/checkbox-tree-select.html (96%)
 create mode 100644 konova/templates/konova/widgets/tree/radio/radio-tree-select-content.html
 create mode 100644 konova/templates/konova/widgets/tree/radio/radio-tree-select.html

diff --git a/codelist/models.py b/codelist/models.py
index de7a210..8e5de0c 100644
--- a/codelist/models.py
+++ b/codelist/models.py
@@ -65,24 +65,23 @@ class KonovaCode(models.Model):
             ret_val += ", " + self.parent.long_name
         return ret_val
 
-    def add_children(self):
+    def add_children(self, order_by: str = "long_name"):
         """ Adds all children (resurcively until leaf) as .children to the KonovaCode
 
         Returns:
             code (KonovaCode): The manipulated KonovaCode instance
         """
         if self.is_leaf:
-            return None
+            return self
 
         children = KonovaCode.objects.filter(
-            code_lists__in=self.code_lists.all(),
             parent=self
         ).order_by(
-            "long_name"
+            order_by
         )
         self.children = children
         for child in children:
-            child.add_children()
+            child.add_children(order_by)
         return self
 
 
diff --git a/compensation/forms/modalForms.py b/compensation/forms/modalForms.py
index 8404c7a..d129459 100644
--- a/compensation/forms/modalForms.py
+++ b/compensation/forms/modalForms.py
@@ -17,7 +17,8 @@ from codelist.models import KonovaCode
 from codelist.settings import CODELIST_BIOTOPES_ID, CODELIST_COMPENSATION_ACTION_ID, CODELIST_BIOTOPES_EXTRA_CODES_ID, \
     CODELIST_COMPENSATION_ACTION_DETAIL_ID
 from compensation.models import CompensationDocument, EcoAccountDocument
-from intervention.inputs import CompensationActionTreeCheckboxSelectMultiple
+from intervention.inputs import CompensationActionTreeCheckboxSelectMultiple, \
+    CompensationStateTreeRadioSelect
 from konova.contexts import BaseContext
 from konova.forms import BaseModalForm, NewDocumentModalForm, RemoveModalForm
 from konova.models import DeadlineType
@@ -156,22 +157,12 @@ class NewStateModalForm(BaseModalForm):
     What has been on this area before changes/compensations have been applied and what will be the result ('after')?
 
     """
-    biotope_type = forms.ModelChoiceField(
+    biotope_type = forms.MultipleChoiceField(
         label=_("Biotope Type"),
         label_suffix="",
         required=True,
         help_text=_("Select the biotope type"),
-        queryset=KonovaCode.objects.filter(
-            is_archived=False,
-            is_leaf=True,
-            code_lists__in=[CODELIST_BIOTOPES_ID],
-        ),
-        widget=autocomplete.ModelSelect2(
-            url="codes-biotope-autocomplete",
-            attrs={
-                "data-placeholder": _("Biotope Type"),
-            }
-        ),
+        widget=CompensationStateTreeRadioSelect(),
     )
     biotope_extra = forms.ModelMultipleChoiceField(
         label=_("Biotope additional type"),
@@ -272,7 +263,7 @@ class EditCompensationStateModalForm(NewStateModalForm):
         super().__init__(*args, **kwargs)
         self.form_title = _("Edit state")
         form_data = {
-            "biotope_type": self.state.biotope_type,
+            "biotope_type": self.state.biotope_type.id,
             "biotope_extra": self.state.biotope_type_details.all(),
             "surface": self.state.surface,
         }
diff --git a/intervention/inputs.py b/intervention/inputs.py
index 34fe043..a08c0b7 100644
--- a/intervention/inputs.py
+++ b/intervention/inputs.py
@@ -1,6 +1,6 @@
 from django import forms
 from codelist.models import KonovaCode
-from codelist.settings import CODELIST_COMPENSATION_ACTION_ID
+from codelist.settings import CODELIST_COMPENSATION_ACTION_ID, CODELIST_BIOTOPES_ID
 
 
 class DummyFilterInput(forms.HiddenInput):
@@ -38,7 +38,17 @@ class TreeCheckboxSelectMultiple(forms.CheckboxSelectMultiple):
     """ Provides multiple selection of parent-child data
 
     """
-    template_name = "konova/widgets/checkbox-tree-select.html"
+    template_name = "konova/widgets/tree/checkbox/checkbox-tree-select.html"
+
+    class meta:
+        abstract = True
+
+
+class TreeRadioSelect(forms.RadioSelect):
+    """ Provides single selection of parent-child data
+
+    """
+    template_name = "konova/widgets/tree/radio/radio-tree-select.html"
 
     class meta:
         abstract = True
@@ -68,6 +78,30 @@ class KonovaCodeTreeCheckboxSelectMultiple(TreeCheckboxSelectMultiple):
         return context
 
 
+class KonovaCodeTreeRadioSelect(TreeRadioSelect):
+    """ Provides single selection of KonovaCode
+
+    """
+    filter = None
+
+    def __init__(self, *args, **kwargs):
+        self.code_list = kwargs.pop("code_list", None)
+        self.filter = kwargs.pop("filter", {})
+        super().__init__(*args, **kwargs)
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        codes = KonovaCode.objects.filter(
+            **self.filter,
+        )
+        codes = [
+            parent_code.add_children()
+            for parent_code in codes
+        ]
+        context["codes"] = codes
+        return context
+
+
 class CompensationActionTreeCheckboxSelectMultiple(KonovaCodeTreeCheckboxSelectMultiple):
     """ Provides multiple selection of CompensationActions
 
@@ -79,4 +113,31 @@ class CompensationActionTreeCheckboxSelectMultiple(KonovaCodeTreeCheckboxSelectM
         self.filter = {
             "code_lists__in": [CODELIST_COMPENSATION_ACTION_ID],
             "parent": None,
-        }
\ No newline at end of file
+        }
+
+
+class CompensationStateTreeRadioSelect(KonovaCodeTreeRadioSelect):
+    """ Provides single selection of CompensationState
+
+    """
+    filter = None
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.filter = {
+            "code_lists__in": [CODELIST_BIOTOPES_ID],
+            "parent": None,
+            "is_archived": False,
+        }
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        codes = KonovaCode.objects.filter(
+            **self.filter,
+        )
+        codes = [
+            parent_code.add_children("short_name")
+            for parent_code in codes
+        ]
+        context["codes"] = codes
+        return context
\ No newline at end of file
diff --git a/konova/templates/konova/widgets/checkbox-tree-select-content.html b/konova/templates/konova/widgets/tree/checkbox/checkbox-tree-select-content.html
similarity index 84%
rename from konova/templates/konova/widgets/checkbox-tree-select-content.html
rename to konova/templates/konova/widgets/tree/checkbox/checkbox-tree-select-content.html
index 31599ef..84f97ec 100644
--- a/konova/templates/konova/widgets/checkbox-tree-select-content.html
+++ b/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 %}
diff --git a/konova/templates/konova/widgets/checkbox-tree-select.html b/konova/templates/konova/widgets/tree/checkbox/checkbox-tree-select.html
similarity index 96%
rename from konova/templates/konova/widgets/checkbox-tree-select.html
rename to konova/templates/konova/widgets/tree/checkbox/checkbox-tree-select.html
index 68e4321..9626945 100644
--- a/konova/templates/konova/widgets/checkbox-tree-select.html
+++ b/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>
diff --git a/konova/templates/konova/widgets/tree/radio/radio-tree-select-content.html b/konova/templates/konova/widgets/tree/radio/radio-tree-select-content.html
new file mode 100644
index 0000000..1d7d8e6
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/konova/templates/konova/widgets/tree/radio/radio-tree-select.html b/konova/templates/konova/widgets/tree/radio/radio-tree-select.html
new file mode 100644
index 0000000..87df9f2
--- /dev/null
+++ b/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>
\ No newline at end of file
-- 
2.38.5


From 5fe27e02ecaf3d866652e4baae61171159f0bbba Mon Sep 17 00:00:00 2001
From: mpeltriaux <michel.peltriaux@sgdnord.rlp.de>
Date: Wed, 11 May 2022 08:41:37 +0200
Subject: [PATCH 3/4] WIP: JS Tree

* simplifies js for single-select radio tree
---
 .../widgets/tree/radio/radio-tree-select.html | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/konova/templates/konova/widgets/tree/radio/radio-tree-select.html b/konova/templates/konova/widgets/tree/radio/radio-tree-select.html
index 87df9f2..0c919c3 100644
--- a/konova/templates/konova/widgets/tree/radio/radio-tree-select.html
+++ b/konova/templates/konova/widgets/tree/radio/radio-tree-select.html
@@ -12,24 +12,16 @@
         element = $(element);
         var cssClass = "badge rlp-r"
 
-        var directParent = element.closest(".tree-element-children")
-        var root = element.parents(".tree-element-children")
+        // Find all already tagged input elements and reset them to be untagged
+        var allTaggedInputs = $("#tree-root").find(".badge.rlp-r")
+        allTaggedInputs.removeClass(cssClass)
 
-        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);
-        }
+        // Find all parents of selected element
+        var parentElements = element.parents(".tree-element-children")
 
+        // Tag parents of element
+        var parentLabels = parentElements.siblings(".tree-label");
+        parentLabels.addClass(cssClass);
     }
 
     function changeHandler(event){
-- 
2.38.5


From eb763a94fbc71952fb76b588d43811b218340ce4 Mon Sep 17 00:00:00 2001
From: mpeltriaux <michel.peltriaux@sgdnord.rlp.de>
Date: Wed, 11 May 2022 10:16:34 +0200
Subject: [PATCH 4/4] JS Tree enhancement

* extends compensation state forms to match the new logic
* adds minor changes for tests
---
 compensation/forms/modalForms.py    | 18 +++++++++++++++---
 compensation/models/compensation.py |  6 +++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/compensation/forms/modalForms.py b/compensation/forms/modalForms.py
index d129459..581a7b3 100644
--- a/compensation/forms/modalForms.py
+++ b/compensation/forms/modalForms.py
@@ -157,7 +157,7 @@ class NewStateModalForm(BaseModalForm):
     What has been on this area before changes/compensations have been applied and what will be the result ('after')?
 
     """
-    biotope_type = forms.MultipleChoiceField(
+    biotope_type = forms.ChoiceField(
         label=_("Biotope Type"),
         label_suffix="",
         required=True,
@@ -200,6 +200,16 @@ class NewStateModalForm(BaseModalForm):
         super().__init__(*args, **kwargs)
         self.form_title = _("New state")
         self.form_caption = _("Insert data for the new state")
+        choices = KonovaCode.objects.filter(
+            code_lists__in=[CODELIST_BIOTOPES_ID],
+            is_archived=False,
+            is_leaf=True,
+        ).values_list("id", flat=True)
+        choices = [
+            (choice, choice)
+            for choice in choices
+        ]
+        self.fields["biotope_type"].choices = choices
 
     def save(self, is_before_state: bool = False):
         state = self.instance.add_state(self, is_before_state)
@@ -262,8 +272,9 @@ class EditCompensationStateModalForm(NewStateModalForm):
         self.state = kwargs.pop("state", None)
         super().__init__(*args, **kwargs)
         self.form_title = _("Edit state")
+        biotope_type_id = self.state.biotope_type.id if self.state.biotope_type else None
         form_data = {
-            "biotope_type": self.state.biotope_type.id,
+            "biotope_type": biotope_type_id,
             "biotope_extra": self.state.biotope_type_details.all(),
             "surface": self.state.surface,
         }
@@ -271,7 +282,8 @@ class EditCompensationStateModalForm(NewStateModalForm):
 
     def save(self, is_before_state: bool = False):
         state = self.state
-        state.biotope_type = self.cleaned_data.get("biotope_type", None)
+        biotope_type_id = self.cleaned_data.get("biotope_type", None)
+        state.biotope_type = KonovaCode.objects.get(id=biotope_type_id)
         state.biotope_type_details.set(self.cleaned_data.get("biotope_extra", []))
         state.surface = self.cleaned_data.get("surface", None)
         state.save()
diff --git a/compensation/models/compensation.py b/compensation/models/compensation.py
index 3deff50..3727e0c 100644
--- a/compensation/models/compensation.py
+++ b/compensation/models/compensation.py
@@ -8,6 +8,8 @@ Created on: 16.11.21
 import shutil
 
 from django.contrib import messages
+
+from codelist.models import KonovaCode
 from user.models import User, Team
 from django.db import models, transaction
 from django.db.models import QuerySet, Sum
@@ -142,8 +144,10 @@ class AbstractCompensation(BaseObject, GeoReferencedMixin):
         """
         form_data = form.cleaned_data
         with transaction.atomic():
+            biotope_type_id = form_data["biotope_type"]
+            code = KonovaCode.objects.get(id=biotope_type_id)
             state = CompensationState.objects.create(
-                biotope_type=form_data["biotope_type"],
+                biotope_type=code,
                 surface=form_data["surface"],
             )
             state_additional_types = form_data["biotope_extra"]
-- 
2.38.5