Show Task list instead of activities in notification dropdown (#3928)

Fixes #3887 

hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html

-{% load i18n markdown_tags nh3_tags %}
+{% load i18n %}
 
 <div class="w-8/12 m-auto mb-10">
     <h2 class="text-center font-light">{% trans "My tasks" %}</h2>
 
     <div class="task--list border divide-y shadow-sm">
         {% for task in my_tasks.data %}
-            <div class="bg-white p-2 flex items-center">
-                <svg class="icon icon--dashboard-tasks"><use xlink:href="#{{ task.icon }}"></use></svg>
-                <div class="flex flex-1 items-center">
-                    <span>{{ task.text|markdown|nh3 }}</span>
-                    {% if task.type == "Draft" %}
-                        <span
-                            class="bg-red-200 rounded-full whitespace-nowrap inline-block ms-1 my-2 px-2 pt-0.5 pb-1 text-sm font-medium text-gray-800"
-                        >
-                            {{ task.type }}
-                        </span>
-                    {% endif %}
-                </div>
-                <a class="button button--primary" href="{{ task.url }}">{% trans "View" %}</a>
-            </div>
+            {% include "todo/todolist_item.html" with button_type_class="button--primary" %}
         {% endfor %}
     </div>
 </div>

hypha/apply/todo/templates/todo/todolist_dropdown.html

+{% load i18n %}
+
+{% for task in object_list %}
+    {% include "todo/todolist_item.html" with button_type_class=" button--transparent button--narrow" %}
+{% empty %}
+    <p class="m-0 p-3 border-b-2 border-light-grey last:border-b-0">
+        {% trans "No pending task." %}
+    </p>
+{% endfor %}

hypha/apply/todo/templates/todo/todolist_item.html

+{% load i18n markdown_tags nh3_tags %}
+
+<div class="bg-white p-2 flex items-center">
+    <svg class="icon icon--dashboard-tasks"><use xlink:href="#{{ task.icon }}"></use></svg>
+    <div class="flex flex-1 items-center">
+        <span>{{ task.text|markdown|nh3 }}</span>
+        {% if task.type == "Draft" %}
+            <span
+                class="bg-red-200 rounded-full whitespace-nowrap inline-block ms-1 my-2 px-2 pt-0.5 pb-1 text-sm font-medium text-gray-800"
+            >
+                {{ task.type }}
+            </span>
+        {% endif %}
+    </div>
+    <a class="button {{ button_type_class }} ms-2" href="{{ task.url }}">{% trans "View" %}</a>
+</div>

hypha/apply/todo/urls.py

+from django.urls import path
+
+from .views import TodoListView
+
+app_name = "hypha.apply.todo"
+
+
+urlpatterns = [
+    path("todo/list/", TodoListView.as_view(), name="list"),
+]

hypha/apply/todo/views.py

 from django.contrib.auth.models import Group
 from django.contrib.contenttypes.models import ContentType
 from django.db.models import Count
+from django.utils.decorators import method_decorator
+from django.views.generic import ListView
+
+from hypha.apply.users.decorators import staff_required
 
 from .models import Task
 from .options import get_task_template
 from .services import validate_user_groups_uniqueness, validate_user_uniquness
 
 
+@method_decorator(staff_required, name="dispatch")
+class TodoListView(ListView):
+    model = Task
+    template_name = "todo/todolist_dropdown.html"
+
+    def get_queryset(self):
+        tasks = render_task_templates_for_user(self.request, self.request.user)
+        return tasks
+
+
 def add_task_to_user(code, user, related_obj):
     """
     Add task for a user

hypha/templates/base-apply.html

@@ -101,34 +101,33 @@
             </section>
 
             <div class="header__button-container flex gap-4">
-                {% comment %} Notifications {% endcomment %}
+                {% comment %} Todo List {% endcomment %}
                 {% if request.user.is_authenticated and request.user.is_apply_staff %}
                     <div
                         x-data="{open: false}"
-                        x-init="$watch('open', value => { if (value) { document.getElementById('id-notification-list').dispatchEvent(new Event('htmx:fetch')); } })"
+                        x-init="$watch('open', value => { if (value) { document.getElementById('id-task-list').dispatchEvent(new Event('htmx:fetch')); } })"
                     >
-                        <a href="{% url "activity:notifications" %}"
+                        <a href="{% url "todo:list" %}"
                            class="p-2 flex items-center hover:opacity-70 transition-opacity"
-                           aria-label="{% trans "Notifications" %}"
-                           aria-haspopup="activity"
+                           aria-label="{% trans "Task List" %}"
+                           aria-haspopup="task_list"
                            aria-expanded="false"
                            role="button"
-                           title="{% trans "Click to open your notifications" %}"
+                           title="{% trans "Click to open your task list" %}"
                            @click.prevent="open = ! open"
                         >
                             {% heroicon_outline "bell-alert" class="inline me-1 text-black" aria_hidden="true" %}
                         </a>
                         <div x-cloak x-show="open" x-transition @click.outside="open = false">
-                            <div class="notifications notifications--dropdown">
-                                <div class="notifications__content zeta" role="activity">
-                                    <div class="notifications__header">
-                                        <span>{% trans "Notifications" %}</span>
-                                        <a class="notifications__more" href="{% url "activity:notifications" %}">{% trans "Show All" %}</a>
+                            <div class="relative z-999999">
+                                <div class="absolute end-4 bg-white border border-gray-200 min-w-[400px] shadow-md max-h-[500px] overflow-y-scroll zeta" role="task_list">
+                                    <div class="p-2 flex justify-between border-b border-gray-100 font-semibold bg-gray-100">
+                                        <span>{% trans "Task List" %}</span>
                                     </div>
 
                                     <div
-                                        id="id-notification-list"
-                                        hx-get="{% url "activity:notifications" %}?type=header_dropdown"
+                                        id="id-task-list"
+                                        hx-get="{% url "todo:list" %}?type=header_dropdown"
                                         hx-swap="innerHTML"
                                         hx-trigger="htmx:fetch"
                                     >
@@ -152,7 +151,7 @@
                         </div>
                     </div>
                 {% endif %}
-                {% comment %} Notifications End{% endcomment %}
+                {% comment %} Todo List End{% endcomment %}
 
                 {% if request.path != '/auth/' and request.path != '/login/' %}
                     {% include "includes/login_button.html" %}

hypha/urls.py

@@ -19,6 +19,7 @@ from hypha.apply.utils.views import custom_wagtail_page_delete
 urlpatterns = [
     path("apply/", include("hypha.apply.funds.urls", "apply")),
     path("activity/", include("hypha.apply.activity.urls", "activity")),
+    path("todo/", include("hypha.apply.todo.urls", "todo")),
     path("api/", include(api_urls)),
     path("django-admin/", admin.site.urls),
     path(