Restructuration des champs du formulaire de lieu

src/agenda_culturel/forms.py

@@ -726,7 +726,7 @@ class EventAddPlaceForm(Form):
         return self.instance
 
 
-class PlaceForm(ModelForm):
+class PlaceForm(GroupFormMixin, ModelForm):
     required_css_class = 'required'
 
     apply_to_all = BooleanField(
@@ -742,6 +742,25 @@ class PlaceForm(ModelForm):
         fields = "__all__"
         widgets = {"location": TextInput()}
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+        self.add_group('header', _('Header'))
+        self.fields['name'].group_id = 'header'
+        
+        
+        self.add_group('address', _('Address'))
+        self.fields['address'].group_id = 'address'
+        self.fields['postcode'].group_id = 'address'
+        self.fields['city'].group_id = 'address'
+        self.fields['location'].group_id = 'address'
+
+        self.add_group('meta', _('Meta'))
+        self.fields['aliases'].group_id = 'meta'
+
+        self.add_group('information', _('Information'))
+        self.fields['description'].group_id = 'information'
+
     def as_grid(self):
         result = ('<div class="grid"><div>'
             + super().as_p()

src/agenda_culturel/static/style.scss

@@ -1518,3 +1518,37 @@ label.required::after {
 .maskable_group .body_group.closed {
     display: none;
 }
+
+.form-place {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    row-gap: .5em;
+    margin-bottom: 0.5em;
+    .map-widget {
+        grid-row: 3;
+    }
+    #group_address .body_group {
+        display: grid;
+        grid-template-columns: repear(2, 1fr);
+
+        column-gap: .5em;
+        #div_id_address, #div_id_location {
+            grid-column: 1 / 3;
+        }
+    
+    }
+}
+@media only screen and (min-width: 992px) {
+    .form-place {
+        grid-template-columns: repeat(2, 1fr);
+        
+        .map-widget {
+            grid-column: 2 / 3;
+            grid-row: 1 / 3;
+        }
+
+        #group_other {
+            grid-column: 1 / 3;
+        }
+    }
+}

src/agenda_culturel/templates/agenda_culturel/place_form.html

@@ -25,7 +25,23 @@
     <p><strong>Remarque&nbsp;:</strong> les champs ont été pré-remplis à partir de la description sous forme libre et n'est probablement pas parfaite.</p>
     {% endif %}
     <form method="post">{% csrf_token %}
-        {{ form.as_grid }}
+        <div class="grid form-place">
+            {{ form }}
+            <div class="map-widget">
+                <div id="map_location" style="width: 100%; aspect-ratio: 16/9"></div>
+                <p>Cliquez pour ajuster la position GPS</p>
+                <input type="checkbox" role="switch" id="lock_position">Verrouiller la position</input>
+                <script>
+                    document.getElementById("lock_position").onclick = function() {
+                        const field = document.getElementById("id_location");
+                        if (this.checked)
+                            field.setAttribute("readonly", true);
+                        else
+                            field.removeAttribute("readonly");
+                    }
+                </script>
+            </div>
+        </div>
         <div class="grid buttons">
             <a href="{% if request.META.HTTP_REFERER %}{{ request.META.HTTP_REFERER }}{% else %}{{ object.get_absolute_url }}{% endif %}" role="button" class="secondary">Annuler</a>
             <input type="submit" value="Envoyer">