✨ [FEAT] Add Annotation Categories to form in HD Views annotations (r…

…efs #4032)
GeotrekCE · Jul 31, 2024 · 4a441cb · 4a441cb
1 parent 0229b0b
commit 4a441cb
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 5 deletions.
diff --git a/geotrek/common/forms.py b/geotrek/common/forms.py
@@ -23,7 +23,7 @@
 from geotrek.authent.models import (StructureOrNoneRelated, StructureRelated,
                                     default_structure)
 from geotrek.common.mixins.models import PublishableMixin
-from geotrek.common.models import AccessibilityAttachment, HDViewPoint
+from geotrek.common.models import AccessibilityAttachment, AnnotationCategory, HDViewPoint
 from geotrek.common.utils.translation import get_translated_fields
 
 from .mixins.models import NoDeleteMixin
@@ -472,6 +472,11 @@ class Meta:
 
 class HDViewPointAnnotationForm(forms.ModelForm):
     annotations = forms.JSONField(label=False)
+    annotations_categories = forms.JSONField(label=False)
+    annotation_category = forms.ModelChoiceField(
+        required=False,
+        queryset=AnnotationCategory.objects.all()
+    )
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -490,6 +495,20 @@ def __init__(self, *args, **kwargs):
                 'style': 'display: none;'
             }
         )
+        self.fields['annotations_categories'].required = False
+        self.fields['annotations_categories'].widget = forms.Textarea(
+            attrs={
+                'name': 'annotations_categories',
+                'rows': '15',
+                'type': 'textarea',
+                'autocomplete': 'off',
+                'autocorrect': 'off',
+                'autocapitalize': 'off',
+                'spellcheck': 'false',
+                # Do not show GEOJson textarea to users
+                'style': 'display: none;'
+            }
+        )
         self._init_layout()
 
     def _init_layout(self):
@@ -502,6 +521,8 @@ def _init_layout(self):
 
         leftpanel = Div(
             'annotations',
+            'annotations_categories',
+            'annotation_category',
             css_id="modelfields",
         )
         formactions = FormActions(
@@ -530,4 +551,4 @@ def _init_layout(self):
 
     class Meta:
         model = HDViewPoint
-        fields = ('annotations', )
+        fields = ('annotations', 'annotations_categories' )
diff --git a/geotrek/common/models.py b/geotrek/common/models.py
@@ -328,6 +328,7 @@ class HDViewPoint(TimeStampedModelMixin, MapEntityMixin):
     content_type = models.ForeignKey(ContentType, on_delete=models.PROTECT)
     content_object = GenericForeignKey('content_type', 'object_id')
     annotations = models.JSONField(verbose_name=_("Annotations"), blank=True, default=dict)
+    annotations_categories = models.JSONField(blank=True, default=dict)
     uuid = models.UUIDField(default=uuid.uuid4, editable=False, unique=True)
     author = models.CharField(blank=True, default='', max_length=128,
                               verbose_name=_('Author'),

diff --git a/geotrek/common/static/common/js/annotations.js b/geotrek/common/static/common/js/annotations.js
@@ -238,7 +238,13 @@ function initAnnotationsWidget(map) {
             }
             var entry = $('#annotationlist .entry#sample').clone();
             entry.attr({ id: '', 'annotation-id': id });
-            entry.on('click', edit_label);
+            entry.find('.entry-name').on('click', edit_label);
+            if (annotation.type() == 'point') {
+                var category_selector = $('#id_annotation_category').clone();
+                category_selector.attr('for-annotation', id);
+                category_selector.on("change", update_annotation_category_event)
+                entry.find('.entry-name').after(category_selector);
+            }
             entry.find('.entry-name').text(annotation.name());
             if (query.editing == id) {
                 entry.find('.entry-adjust').hide();
@@ -258,10 +264,26 @@ function initAnnotationsWidget(map) {
         }
     }
 
+    function update_annotation_category(annotation_id, category_id) {
+        var annotations_categories = JSON.parse($("#div_id_annotations_categories textarea").val())
+        if (category_id == "") {
+            delete annotations_categories[annotation_id]
+        } else {
+            annotations_categories[annotation_id] = category_id
+        }
+        $("#div_id_annotations_categories textarea").val(JSON.stringify(annotations_categories))
+    }
+
+    function update_annotation_category_event(e) {
+        category_id = e.target.value
+        annotation_id = e.target.getAttribute('for-annotation')
+        update_annotation_category(annotation_id, category_id)
+    }
+
     function edit_label(event) {
-        var entry = $(event.currentTarget);
+        var span = $(event.currentTarget);
+        entry = span.closest('.entry')
         // When clicking annotation name, display text input allowing to change it
-        var span = entry.find('.entry-name')
         if (span.find('input').length) {
             return
         }
@@ -327,6 +349,7 @@ function initAnnotationsWidget(map) {
                 handleAnnotationChange(evt);
                 break;
             case 'remove':
+                update_annotation_category(id, "")
                 layer.removeAnnotation(annotation);
                 break;
             case 'remove-all':

diff --git a/geotrek/common/static/common/style.css b/geotrek/common/static/common/style.css
@@ -38,6 +38,14 @@ fieldset {
   flex-basis: 55%;
 }
 
+#div_id_annotation_category {
+  display: none;
+}
+
+#id_annotation_category {
+  width: 25rem;
+}
+
 .loader-wrapper {
   display: table;
   margin: 0 auto;