Stop hiding the grids when POI is removed

Co-authored-by: David Venhoff <david.venhoff@tuerantuer.org>
digitalfabrik · Dec 23, 2024 · f4dd21c · f4dd21c
1 parent f32507c
commit f4dd21c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/integreat_cms/cms/templates/ajax_poi_form/poi_box.html b/integreat_cms/cms/templates/ajax_poi_form/poi_box.html
@@ -28,7 +28,7 @@
         <label for="{{ form.location.id_for_label }}">
             {{ form.location.label }}
         </label>
-        {% translate "Name of location" as poi_title_placeholder %}
+        {% translate "Select a location" as poi_title_placeholder %}
         <div class="relative my-2">
             <input id="poi-query-input"
                    type="search"
@@ -43,7 +43,7 @@
                 <button id="poi-remove"
                         title="{% translate "Remove location" %}"
                         {% if form.disabled %}disabled{% endif %}>
-                    <i icon-name="trash-2" class="h-5 w-5"></i>
+                    <i icon-name="pencil" class="h-5 w-5"></i>
                 </button>
             </div>
         </div>
@@ -55,6 +55,15 @@
         <div class="relative" id="poi-query-result">
             {% include "_poi_query_result.html" %}
         </div>
+        {% if current_menu_item == "contacts" %}
+            <div id="info-location-mandatory"
+                 class="py-2 {% if poi %}hidden{% endif %}">
+                <i icon-name="alert-circle" class="h-5 w-5"></i>
+                <span class="help-text italic align-middle">
+                    {% trans "This field cannot be empty. Please select a location." %}
+                </span>
+            </div>
+        {% endif %}
         {% include "ajax_poi_form/_poi_address_container.html" with disabled=form.has_not_location.value %}
         <div id="poi-ajax-success-message"
              class="bg-green-100 border-l-4 border-green-500 text-green-800 px-4 py-3 hidden">

diff --git a/integreat_cms/locale/de/LC_MESSAGES/django.po b/integreat_cms/locale/de/LC_MESSAGES/django.po
@@ -4968,13 +4968,17 @@ msgid "Publish"
 msgstr "Veröffentlichen"
 
 #: cms/templates/ajax_poi_form/poi_box.html
-msgid "Name of location"
-msgstr "Name des Ortes"
+msgid "Select a location"
+msgstr "Ort eingeben"
 
 #: cms/templates/ajax_poi_form/poi_box.html
 msgid "Remove location"
 msgstr "Ort entfernen"
 
+#: cms/templates/ajax_poi_form/poi_box.html
+msgid "This field cannot be empty. Please select a location."
+msgstr "Dieses Feld darf nicht leer sein. Bitte geben Sie einen Ort ein."
+
 #: cms/templates/ajax_poi_form/poi_box.html
 msgid "The new location was successfully created."
 msgstr "Ein neuer Ort wurde erfolgreich erstellt."
@@ -9254,8 +9258,8 @@ msgstr "Die Version {} existiert nicht."
 msgid ""
 "%s %s can not change its status as it was imported from an external calendar"
 msgstr ""
-"Der Status von %s %s kann nicht geändert "
-"werden, da diese Veranstaltung aus einem externen Kalender importiert wurde"
+"Der Status von %s %s kann nicht geändert werden, da diese Veranstaltung aus "
+"einem externen Kalender importiert wurde"
 
 #: cms/views/content_version_view.py
 msgid "You cannot reject changes if there is no version to return to."

diff --git a/integreat_cms/static/src/index.ts b/integreat_cms/static/src/index.ts
@@ -49,7 +49,7 @@ import "./js/grids/toggle-grid-checkbox";
 import "./js/chat/send-chat-message";
 import "./js/chat/delete-chat-message";
 
-import "./js/poi_box";
+import "./js/poi-box";
 import "./js/events/conditional-fields";
 import "./js/events/auto-complete";
 

diff --git a/integreat_cms/static/src/js/poi_box.ts → integreat_cms/static/src/js/poi-box.ts b/integreat_cms/static/src/js/poi_box.ts → integreat_cms/static/src/js/poi-box.ts
@@ -3,11 +3,11 @@ import { getCsrfToken } from "./utils/csrf-token";
 
 type FormResponse = { success: boolean; poi_address_container: string };
 
-const toggleContactFieldBox = (show: boolean) => {
+const showContactFieldBox = () => {
     const contactFieldsBox = document.getElementById("contact_fields");
-    contactFieldsBox?.classList.toggle("hidden", !show);
+    contactFieldsBox?.classList.remove("hidden");
     const contactUsageBox = document.getElementById("contact_usage");
-    contactUsageBox?.classList.toggle("hidden", !show);
+    contactUsageBox?.classList.remove("hidden");
 };
 
 const hideSearchResults = () => {
@@ -19,7 +19,7 @@ const renderPoiData = (poiTitle: string, newPoiData: string) => {
     document.getElementById("poi-address-container").outerHTML = newPoiData;
     document.getElementById("poi-query-input").setAttribute("placeholder", poiTitle);
     hideSearchResults();
-    toggleContactFieldBox(true);
+    showContactFieldBox();
 };
 
 const hidePoiFormWidget = () => {
@@ -34,6 +34,7 @@ const setPoi = ({ target }: Event) => {
     renderPoiData(option.getAttribute("data-poi-title"), option.getAttribute("data-poi-address"));
     document.getElementById("poi-address-container")?.classList.remove("hidden");
     console.debug("Rendered POI data");
+    document.getElementById("info-location-mandatory")?.classList.add("hidden");
 };
 
 const showMessage = (response: FormResponse) => {
@@ -154,8 +155,9 @@ const removePoi = () => {
     hideSearchResults();
     // Clear the poi form
     hidePoiFormWidget();
-    toggleContactFieldBox(false);
     console.debug("Removed POI data");
+    (document.getElementById("id_location") as HTMLInputElement).value = "-1";
+    document.getElementById("info-location-mandatory")?.classList.remove("hidden");
 };
 
 let scheduledFunction: number | null = null;
@@ -207,4 +209,11 @@ window.addEventListener("load", () => {
         // event handler to reset filter form
         document.getElementById("filter-reset")?.addEventListener("click", removePoi);
     }
+
+    const contactFields = document.getElementById("contact_fields");
+    contactFields?.querySelectorAll("input").forEach((el) => {
+        if ((el as HTMLInputElement).value) {
+            showContactFieldBox();
+        }
+    });
 });