Add contact creation in POI form

integreat_cms/cms/models/contact/contact.py

@@ -6,6 +6,7 @@
 from django.contrib.postgres.search import SearchQuery, SearchRank, SearchVector
 from django.db import models
 from django.db.models import Q
+from django.urls import reverse
 from django.utils import timezone
 from django.utils.functional import cached_property
 from django.utils.translation import gettext
@@ -266,6 +267,21 @@ def full_url(self) -> str:
         """
         return f"{settings.BASE_URL}/{self.location.region.slug}/contact/{self.id}/"
 
+    @cached_property
+    def backend_edit_link(self) -> str:
+        """
+        This function returns the absolute url to the edit form of this region
+
+        :return: The url
+        """
+        return reverse(
+            "edit_contact",
+            kwargs={
+                "region_slug": self.region.slug,
+                "contact_id": self.id,
+            },
+        )
+
     class Meta:
         verbose_name = _("contact")
         default_related_name = "contact"

integreat_cms/cms/templates/ajax_contact_form/_contact_form_widget.html

@@ -0,0 +1,33 @@
+{% load i18n %}
+{% load widget_tweaks %}
+<div>
+    <label for="{{ contact_form.title.id_for_label }}">
+        {{ contact_form.point_of_contact_for.label }}
+    </label>
+    {% render_field contact_form.point_of_contact_for|append_attr:"form:ajax_contact_form" %}
+    <label for="{{ contact_form.name.id_for_label }}">
+        {{ contact_form.name.label }}
+    </label>
+    {% render_field contact_form.name|append_attr:"form:ajax_contact_form" %}
+    <label for="{{ contact_form.email.id_for_label }}">
+        {{ contact_form.email.label }}
+    </label>
+    {% render_field contact_form.email|append_attr:"form:ajax_contact_form" %}
+    <label for="{{ contact_form.phone_number.id_for_label }}">
+        {{ contact_form.phone_number.label }}
+    </label>
+    {% render_field contact_form.phone_number|append_attr:"form:ajax_contact_form" %}
+    <label for="{{ contact_form.website.id_for_label }}">
+        {{ contact_form.website.label }}
+    </label>
+    {% render_field contact_form.website|append_attr:"form:ajax_contact_form" %}
+    <button id="submit-contact-form-button"
+            name="location"
+            value="{{ poi_id }}"
+            form="ajax_contact_form"
+            data-btn-save-contact-form
+            class="btn w-full mt-4 mb-2"
+            data-url="{% url 'create_contact_ajax' region_slug=request.region.slug %}">
+        {% translate "Submit" %}
+    </button>
+</div>

integreat_cms/cms/templates/pois/poi_form.html

@@ -184,6 +184,12 @@ <h3 class="font-bold text-black heading">
             </div>
         </div>
     </form>
+    <form id="ajax_contact_form"
+          name="ajax_contact_form"
+          method="post"
+          enctype="multipart/form-data"
+          data-unsaved-warning>
+    </form>
     {{ media_config_data|json_script:"media_config_data" }}
     {% if not perms.cms.change_poi or poi_form.instance.id and poi_form.instance.archived %}
         {% include "../_tinymce_config.html" with readonly=1 %}

integreat_cms/cms/templates/pois/poi_form_sidebar/related_contacts_box.html

@@ -17,12 +17,38 @@
                     {% trans "This location is not currently referred to in any contact." %}
                 {% endif %}
             </div>
-            {% for contact in contacts %}
-                <a href="{% url 'edit_contact' contact_id=contact.id region_slug=request.region.slug %}"
-                   class="block pt-2 hover:underline">
-                    <i icon-name="pen-square" class="mr-2"></i> {{ contact.label_in_reference_list }}
-                </a>
-            {% endfor %}
+            <div id="related-contact-list">
+                {% for contact in contacts %}
+                    <a href="{% url 'edit_contact' contact_id=contact.id region_slug=request.region.slug %}"
+                       class="block pt-2 hover:underline">
+                        <i icon-name="pen-square" class="mr-2"></i> {{ contact.label_in_reference_list }}
+                    </a>
+                {% endfor %}
+            </div>
         </div>
+        {% if perms.cms.change_contact %}
+            <div>
+                <div class="help-text mt-4 font-bold">
+                    <div>
+                        <button id="show-contact-form-button"
+                                form="ajax_contact_form"
+                                class="btn w-full mt-4 mb-2"
+                                data-url="{% url 'show_contact_form_ajax' region_slug=request.region.slug poi_id=poi_id %}">
+                            {% translate "Create a new contact" %}
+                        </button>
+                    </div>
+                </div>
+                <div id="contact-ajax-success-message"
+                     class="bg-green-100 border-l-4 border-green-500 text-green-800 px-4 py-3 hidden">
+                    {% trans "The new contact was successfully created." %}
+                </div>
+                <div id="contact-ajax-error-message"
+                     class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-3 hidden">
+                    {% trans "An error occurred." %}
+                </div>
+                <div id="contact-form-widget">
+                </div>
+            </div>
+        {% endif %}
     {% endwith %}
 {% endblock collapsible_box_content %}

integreat_cms/cms/urls/protected.py

@@ -1462,6 +1462,16 @@
                                 contacts.DeleteContactBulkAction.as_view(),
                                 name="bulk_delete_contacts",
                             ),
+                            path(
+                                "show-contact-form-ajax/<int:poi_id>/",
+                                contacts.ContactFormAjaxView.as_view(),
+                                name="show_contact_form_ajax",
+                            ),
+                            path(
+                                "create-contact-ajax/",
+                                contacts.ContactFormAjaxView.as_view(),
+                                name="create_contact_ajax",
+                            ),
                             path(
                                 "<int:contact_id>/",
                                 include(

integreat_cms/cms/views/contacts/__init__.py

@@ -9,5 +9,6 @@
     DeleteContactBulkAction,
     RestoreContactBulkAction,
 )
+from .contact_form_ajax_view import ContactFormAjaxView
 from .contact_form_view import ContactFormView
 from .contact_list_view import ContactListView

integreat_cms/cms/views/contacts/contact_form_ajax_view.py

@@ -0,0 +1,94 @@
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
+from django.http import JsonResponse
+from django.shortcuts import render
+from django.utils.decorators import method_decorator
+from django.views.generic import TemplateView
+
+from ...decorators import permission_required
+from ...forms import ContactForm
+from ...models import Contact
+from .contact_context_mixin import ContactContextMixin
+
+if TYPE_CHECKING:
+    from typing import Any
+
+    from django.http import HttpRequest, HttpResponse
+
+
+@method_decorator(permission_required("cms.view_contact"), name="dispatch")
+@method_decorator(permission_required("cms.change_contact"), name="post")
+class ContactFormAjaxView(TemplateView, ContactContextMixin):
+    """
+    View for the ajax contact widget
+    """
+
+    #: Template for ajax POI widget
+    template = "ajax_contact_form/_contact_form_widget.html"
+
+    def get(self, request: HttpRequest, *args: Any, **kwargs: Any) -> HttpResponse:
+        r"""Render a contact form widget template
+
+        :param request: The current request
+        :param \*args: The supplied arguments
+        :param \**kwargs: The supplied keyword arguments
+        :return: The html template of a POI form
+        """
+        contact_form = ContactForm(
+            additional_instance_attributes={"region": request.region}
+        )
+
+        return render(
+            request,
+            "ajax_contact_form/_contact_form_widget.html",
+            {
+                **self.get_context_data(**kwargs),
+                "contact_form": contact_form,
+                "poi_id": kwargs.get(
+                    "poi_id",
+                ),
+            },
+        )
+
+    def post(self, request: HttpRequest, *args: Any, **kwargs: Any) -> HttpResponse:
+        r"""Add a new POI to the database
+
+        :param request: The current request
+        :param \*args: The supplied arguments
+        :param \**kwargs: The supplied keyword arguments
+        :raises ~django.http.Http404: If no language for the given language slug was found
+
+        :return: A status message, either a success or an error message
+        """
+
+        contact_instance = Contact.objects.filter(id=None).first()
+
+        data = request.POST.dict()
+
+        contact_form = ContactForm(
+            data=data,
+            files=request.FILES,
+            instance=contact_instance,
+            additional_instance_attributes={
+                "region": request.region,
+            },
+        )
+
+        if not contact_form.is_valid():
+            return JsonResponse(
+                data={
+                    "contact_form": contact_form.get_error_messages(),
+                }
+            )
+
+        contact = contact_form.save()
+
+        return JsonResponse(
+            data={
+                "success": "Successfully created location",
+                "contact_label": contact.label_in_reference_list(),
+                "edit_url": contact.backend_edit_link,
+            }
+        )

integreat_cms/locale/de/LC_MESSAGES/django.po

@@ -4890,7 +4890,9 @@ msgstr "Faxnummer"
 msgid "Update"
 msgstr "Aktualisieren"
 
-#: cms/templates/_tinymce_config.html cms/views/media/media_context_mixin.py
+#: cms/templates/_tinymce_config.html
+#: cms/templates/ajax_contact_form/_contact_form_widget.html
+#: cms/views/media/media_context_mixin.py
 msgid "Submit"
 msgstr "Speichern"
 
@@ -4980,6 +4982,7 @@ msgid "The new location was successfully created."
 msgstr "Ein neuer Ort wurde erfolgreich erstellt."
 
 #: cms/templates/ajax_poi_form/poi_box.html
+#: cms/templates/pois/poi_form_sidebar/related_contacts_box.html
 msgid "An error occurred."
 msgstr "Es ist ein Fehler aufgetreten."
 
@@ -7802,6 +7805,14 @@ msgstr "Dieser Ort wird in folgenden Kontakten verwendet."
 msgid "This location is not currently referred to in any contact."
 msgstr "Zur Zeit gibt es keine Kontakte zu diesem Ort."
 
+#: cms/templates/pois/poi_form_sidebar/related_contacts_box.html
+msgid "Create a new contact"
+msgstr "Kontakt erstellen"
+
+#: cms/templates/pois/poi_form_sidebar/related_contacts_box.html
+msgid "The new contact was successfully created."
+msgstr "Ein neuer Kontakt wurde erfolgreich erstellt."
+
 #: cms/templates/pois/poi_list.html cms/templates/pois/poi_list_archived.html
 msgid "Archived locations"
 msgstr "Archivierte Orte"
@@ -11185,6 +11196,16 @@ msgstr ""
 "Diese Seite konnte nicht importiert werden, da sie zu einer anderen Region "
 "gehört ({})."
 
+#~ msgid "Here you can create a new contact with this location."
+#~ msgstr "Hier können Sie einen neuen Kontakt mit diesem Ort erstellen."
+
+#~ msgid ""
+#~ "Add missing data or change existing data. Select the data you want to "
+#~ "import."
+#~ msgstr ""
+#~ "Ergänzen Sie fehlende Daten oder ändern bestehende Daten. Wählen Sie die "
+#~ "Daten aus, die übernommen werden sollen."
+
 #~ msgid "An error occurred while importing events from this external calendar"
 #~ msgstr "Ein Fehler mit dem Import von Veranstaltungen ist aufgetreten"
 
@@ -11232,13 +11253,6 @@ msgstr ""
 #~ msgid "Created by"
 #~ msgstr "Erstellt von"
 
-#~ msgid ""
-#~ "Add missing data or change existing data. Select the data you want to "
-#~ "import."
-#~ msgstr ""
-#~ "Ergänzen Sie fehlende Daten oder ändern bestehende Daten. Wählen Sie die "
-#~ "Daten aus, die übernommen werden sollen."
-
 #~ msgid "E-mail from location"
 #~ msgstr "E-mail des Ortes"
 

integreat_cms/static/src/index.ts

@@ -104,6 +104,8 @@ import "./js/menu";
 import "./js/poi-categories/poicategory-colors-icons";
 import "./js/dashboard/broken-links";
 
+import "./js/contact_box";
+
 // IE11: fetch
 /* eslint-disable-next-line @typescript-eslint/no-var-requires */
 require("element-closest").default(window);