Merge pull request #2170 from laws-africa/search-alerts-ui

Search alerts UI
laws-africa · Nov 20, 2024 · 11d110d · 11d110d
2 parents 6706fab + 36ca76f
commit 11d110d
Show file tree

Hide file tree

Showing 16 changed files with 236 additions and 244 deletions.
diff --git a/peachjam/js/components/FindDocuments/index.vue b/peachjam/js/components/FindDocuments/index.vue
@@ -94,31 +94,24 @@
               {{ $t("Filters") }} <span v-if="selectedFacetsCount">({{ selectedFacetsCount }})</span>
             </button>
           </form>
-          <div class="d-md-flex justify-content-between">
-            <div
-              id="saved-search-button"
-            />
-            <div
-              id="savedSearchModal"
-              class="modal fade"
-              tabindex="-1"
-              aria-labelledby="savedSearchModalLabel"
-              aria-hidden="true"
-            >
-              <div
-                id="savedSearchModalDialog"
-                class="modal-dialog"
-              />
-            </div>
-            <div class="my-2 text-end">
-              <HelpBtn page="search/" />
-            </div>
+          <div class="my-2 text-end">
+            <HelpBtn page="search/" />
           </div>
-          <div v-if="searchTip" class="my-2">
+          <div v-if="searchTip" class="mt-2 mb-3">
             <i class="bi bi-info-circle" />
             {{ searchTip.prompt }}
             <a href="#" @click.stop.prevent="useSearchTip()">{{ searchTip.q }}</a>
           </div>
+          <div id="saved-search-button" />
+          <div
+            id="saved-search-modal"
+            class="modal fade"
+            tabindex="-1"
+            aria-labelledby="saved-search-modal-label"
+            aria-hidden="true"
+          >
+            <div id="saved-search-modal-dialog" class="modal-dialog" />
+          </div>
         </div>
         <div
           id="nav-advanced-search"
@@ -880,7 +873,7 @@ export default {
       };
     },
     savedSearchModal () {
-      htmx.ajax('GET', '/search/saved-searches/modal', {target: '#saved-search-button'})
+      htmx.ajax('GET', '/search/saved-searches/button', { target: '#saved-search-button' });
     }
   }
 };

diff --git a/peachjam/js/peachjam.ts b/peachjam/js/peachjam.ts
@@ -54,6 +54,7 @@ class PeachJam {
     this.setupPopovers();
     this.scrollNavTabs();
     this.clearGACookies();
+    this.setupConfirm();
     window.dispatchEvent(new Event('peachjam.after-setup'));
   }
 
@@ -248,6 +249,23 @@ class PeachJam {
       }
     }
   }
+
+  setupConfirm () {
+    // On buttons and links with a data-confirm="message" attribute, show a message and stop everything if the user
+    // doesn't confirm.
+    document.body.addEventListener('click', function (e) {
+      if (e.target && e.target instanceof HTMLElement && e.target.matches('a[data-confirm], button[data-confirm], input[data-confirm]')) {
+        const message = e.target.getAttribute('data-confirm');
+        if (message) {
+          if (!confirm(message)) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+          }
+        }
+      }
+    });
+  }
 }
 
 const peachJam = new PeachJam();

diff --git a/peachjam/templates/peachjam/saved_document_update.html b/peachjam/templates/peachjam/saved_document_update.html
@@ -54,9 +54,9 @@
                    name="{{ form.new_folder.name }}"
                    type="text"/>
           </div>
-          <p class="mt-3">
-            <a href="{% url 'folder_list' %}">{% trans 'View saved documents' %}</a>
-          </p>
+          <div class="mt-3">
+            <a href="{% url 'folder_list' %}">{% trans 'All saved documents' %}</a>
+          </div>
         </form>
       </div>
       <div class="modal-footer d-flex justify-content-between">
@@ -66,7 +66,7 @@
                 hx-target="#saveDocumentWrapper"
                 hx-include="#save-document-form"
                 hx-post="{% url 'saved_document_delete' saved_document.id %}"
-                hx-confirm="Are you sure you want to unsave this document?">
+                hx-confirm="{% trans "Are you sure?" %}">
           {% trans 'Unsave' %}
         </button>
         <div>

diff --git a/peachjam/templates/user_account/_tabs.html b/peachjam/templates/user_account/_tabs.html
@@ -37,7 +37,8 @@
     <li class="nav-item">
       <a href="{% url 'search:saved_search_list' %}"
          class="nav-link {% if active == 'saved_searches' %}active{% endif %}">
-        {% trans "Saved searches" %}
+        <i class="bi bi-bell"></i>
+        {% trans "Search alerts" %}
       </a>
     </li>
   {% endblock %}

diff --git a/peachjam_search/forms.py b/peachjam_search/forms.py
@@ -3,7 +3,13 @@
 from peachjam_search.models import SavedSearch
 
 
-class SavedSearchForm(forms.ModelForm):
+class SavedSearchCreateForm(forms.ModelForm):
     class Meta:
         model = SavedSearch
         fields = ["q", "filters", "note"]
+
+
+class SavedSearchUpdateForm(forms.ModelForm):
+    class Meta:
+        model = SavedSearch
+        fields = ["note"]
diff --git a/peachjam_search/templates/peachjam_search/_saved_search_filters.html b/peachjam_search/templates/peachjam_search/_saved_search_filters.html
@@ -0,0 +1,3 @@
+{# djlint:off #}
+{% for values in saved_search.get_filters_dict.values %}{% if not forloop.first %},&nbsp;{% endif %}{{ values|join:", " }}{% endfor %}
+{# djlint:on #}
diff --git a/peachjam_search/templates/peachjam_search/_saved_search_list.html b/peachjam_search/templates/peachjam_search/_saved_search_list.html
diff --git a/peachjam_search/templates/peachjam_search/_saved_search_modal.html b/peachjam_search/templates/peachjam_search/_saved_search_modal.html
@@ -0,0 +1,70 @@
+{% load i18n %}
+<div hx-swap-oob="true"
+     id="saved-search-modal-dialog"
+     class="modal-dialog">
+  <div class="modal-content">
+    <div class="modal-header">
+      <h1 id="saved-search-modal-label" class="modal-title fs-5">{% trans 'Search alert' %}</h1>
+      <button type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="{% trans "Close" %}"></button>
+    </div>
+    <div class="modal-body">
+      {% if request.user.is_authenticated %}
+        {% if saved_search.pk %}
+          <p class="alert alert-primary">{% trans "We'll email you when new documents are found for this search." %}</p>
+          <form id="saved-search-form"
+                hx-target="#saved-search-button"
+                hx-post="{% url 'search:saved_search_update' saved_search.pk %}">
+            <div class="mb-3">{{ saved_search.q }}</div>
+            <div class="mb-3">{% include 'peachjam_search/_saved_search_filters.html' %}</div>
+            <div>
+              <label class="form-label" for="{{ form.note.id_for_label }}">{{ form.note.label }}</label>
+              <textarea class="form-control"
+                        id="{{ form.note.id_for_label }}"
+                        name="{{ form.note.name }}"
+                        placeholder="{% trans "A note to yourself about this search" %}">{{ form.note.value|default_if_none:'' }}</textarea>
+            </div>
+          </form>
+        {% else %}
+          {% trans "Saving..." %}
+        {% endif %}
+        <div class="mt-3">
+          <a href="{% url 'search:saved_search_list' %}">{% trans "All search alerts" %}</a>
+        </div>
+      {% else %}
+        {% blocktrans trimmed %}
+          You are not logged in. Please log in to receive alerts when we find new matches for your search.
+        {% endblocktrans %}
+      {% endif %}
+    </div>
+    <div class="modal-footer {% if saved_search.pk %}d-flex justify-content-between{% endif %}">
+      {% if saved_search.pk %}
+        <button class="btn btn-danger"
+                type="button"
+                data-bs-dismiss="modal"
+                hx-target="#saved-search-button"
+                hx-post="{% url 'search:saved_search_delete' saved_search.pk %}?next={% url 'search:saved_search_button' %}"
+                hx-confirm="{% trans "Are you sure?" %}">
+          {% trans 'Delete alert' %}
+        </button>
+      {% endif %}
+      <div>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Close' %}</button>
+        {% if request.user.is_authenticated %}
+          {% if saved_search.pk %}
+            <button type="submit"
+                    form="saved-search-form"
+                    class="btn btn-primary"
+                    data-bs-dismiss="modal">
+              {% trans 'Save' %}
+            </button>
+          {% endif %}
+        {% else %}
+          <a href="{% url 'account_login' %}" class="btn btn-primary">{% trans 'Login' %}</a>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/peachjam_search/templates/peachjam_search/emails/search_alert.html b/peachjam_search/templates/peachjam_search/emails/search_alert.html
@@ -1,21 +1,26 @@
+{% load i18n %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8"/>
-    <title>Search Alert</title>
+    <title>{% trans "Search Alert" %}</title>
   </head>
   <body>
-    <p>Hi {{ saved_search.user }}</p>
-    <p>We have found new documents that match your search for:</p>
+    <p>{{ saved_search.user }},</p>
+    <p>{% trans "We have found new documents that match your search alert:" %}</p>
     <p>
-      <strong>{{ saved_search.q }}</strong>
+      <strong><a href="{{ site.domain }}{{ saved_search.get_absolute_url }}">{{ saved_search.q }}</a></strong>
+    </p>
+    <p>{% include 'peachjam_search/_saved_search_filters.html' %}</p>
+    <ul>
+      {% for doc in hits %}
+        <li>
+          <a href="{{ site.domain }}{{ doc.expression_frbr_uri }}">{{ doc.title }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+    <p>
+      <a href="{{ site.domain }}{% url "search:saved_search_list" %}">{% trans "Manage your search alerts" %}</a>
     </p>
-    <p>Here are the new documents:</p>
-    {% for doc in hits %}
-      <h3>
-        <a href="{{ site.domain }}{{ doc.expression_frbr_uri }}">{{ doc.title }}</a>
-      </h3>
-    {% endfor %}
-    <p>Best regards.</p>
   </body>
 </html>
diff --git a/peachjam_search/templates/peachjam_search/emails/search_alert.txt b/peachjam_search/templates/peachjam_search/emails/search_alert.txt
@@ -1,13 +1,16 @@
-Search Alert
- Hi {{ saved_search.user }}
-We have found new documents that match your search for:
+{{ saved_search.user }},
+
+We have found new documents that match your search alert:
+
 {{ saved_search.q }}
-Here are the new documents:
+
+{{ site.domain }}{{ saved_search.get_absolute_url }}
 
 {% for doc in hits %}
-  TITLE: {{ doc.title }}
-  URL: {{ site.domain }}{{ doc.expression_frbr_uri }}
-  ========================
+  Title: {{ doc.title }}
+  {{ site.domain }}{{ doc.expression_frbr_uri }}
+
 {% endfor %}
 
-Best regards.
+
+Manage your search alerts: {{ site.domain }}{% url "search:saved_search_list" %}
diff --git a/peachjam_search/templates/peachjam_search/saved_search_button.html b/peachjam_search/templates/peachjam_search/saved_search_button.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+{% if request.user.is_authenticated %}
+  <form id="saved-search-button"
+        hx-post="{% url 'search:saved_search_create' %}">
+    <input type="hidden" name="q" value="{{ saved_search.q }}"/>
+    <input type="hidden" name="filters" value="{{ saved_search.filters }}"/>
+  {% endif %}
+  <button class="btn btn-outline-primary"
+          data-bs-toggle="modal"
+          data-bs-target="#saved-search-modal">
+    <i class="bi bi-bell"></i>
+    {% trans 'Get alerts for this search' %}
+  </button>
+  {% if request.user.is_authenticated %}</form>{% endif %}
+  {% include 'peachjam_search/_saved_search_modal.html' %}