Merge pull request dimagi#1011 from dimagi/ze/create-task-modal

Create Task Modal

Author: zandre-eng

commcare_connect/opportunity/forms.py

@@ -37,6 +37,7 @@
     OpportunityVerificationFlags,
     PaymentInvoice,
     PaymentUnit,
+    Task,
     UserVisit,
     VisitReviewStatus,
     VisitValidationStatus,
@@ -1846,3 +1847,47 @@ def line_items(self):
                 """
             ),
         )
+
+
+class CreateTaskForm(forms.Form):
+    task = forms.ModelChoiceField(
+        label=_("Task"),
+        queryset=Task.objects.none(),
+        empty_label=_("Select a task"),
+        widget=forms.Select(attrs={"data-tomselect": "1"}),
+    )
+    connect_worker = forms.ModelChoiceField(
+        label=_("Connect Worker"),
+        queryset=User.objects.none(),
+        empty_label=_("Select a Connect Worker"),
+        widget=forms.Select(attrs={"data-tomselect": "1"}),
+    )
+    due_date = forms.DateField(
+        label=_("Due Date"),
+        widget=forms.DateInput(format="%Y-%m-%d", attrs={"type": "date"}),
+    )
+
+    def __init__(self, *args, opportunity=None, **kwargs):
+        super().__init__(*args, **kwargs)
+        if opportunity is not None:
+            self.fields["task"].queryset = Task.objects.filter(app=opportunity.deliver_app)
+            self.fields["connect_worker"].queryset = User.objects.filter(
+                opportunityaccess__opportunity=opportunity,
+                opportunityaccess__accepted=True,
+                opportunityaccess__suspended=False,
+            )
+        self.fields["due_date"].widget.attrs["min"] = datetime.date.today().isoformat()
+
+        self.helper = FormHelper(self)
+        self.helper.form_tag = False
+        self.helper.layout = Layout(
+            Field("task"),
+            Field("connect_worker"),
+            Field("due_date"),
+        )
+
+    def clean_due_date(self):
+        due_date = self.cleaned_data["due_date"]
+        if due_date < datetime.date.today():
+            raise ValidationError(_("Due date cannot be in the past."))
+        return due_date

commcare_connect/opportunity/tests/factories.py

@@ -267,6 +267,17 @@ class Meta:
         model = "opportunity.PaymentInvoice"
 
 
+class TaskFactory(DjangoModelFactory):
+    app = SubFactory(CommCareAppFactory)
+    slug = Faker("slug")
+    name = Faker("name")
+    description = Faker("text")
+    time_estimate = Faker("pyint", min_value=1, max_value=8)
+
+    class Meta:
+        model = "opportunity.Task"
+
+
 class ExchangeRateFactory(DjangoModelFactory):
     currency_code = "USD"
     rate = 1.0

commcare_connect/opportunity/tests/test_forms.py

@@ -10,6 +10,7 @@
 from commcare_connect.opportunity.forms import (
     AddBudgetNewUsersForm,
     AutomatedPaymentInvoiceForm,
+    CreateTaskForm,
     OpportunityChangeForm,
     OpportunityInitUpdateForm,
 )
@@ -27,6 +28,7 @@
     OpportunityFactory,
     PaymentInvoiceFactory,
     PaymentUnitFactory,
+    TaskFactory,
 )
 from commcare_connect.program.tests.factories import ManagedOpportunityFactory, ProgramFactory
 
@@ -767,3 +769,32 @@ def test_readonly_form_with_line_items_table(self, valid_opportunity):
         )
 
         assert form.line_items_table == mock_table
+
+
+@pytest.mark.django_db
+class TestCreateTaskForm:
+    @pytest.fixture
+    def task(self, opportunity):
+        return TaskFactory(app=opportunity.deliver_app)
+
+    def test_invalid_past_date(self, opportunity, task):
+        access = OpportunityAccessFactory(opportunity=opportunity, accepted=True, suspended=False)
+        data = {
+            "task": task.pk,
+            "connect_worker": access.user.pk,
+            "due_date": (datetime.date.today() - datetime.timedelta(days=1)).isoformat(),
+        }
+        form = CreateTaskForm(data, opportunity=opportunity)
+        assert not form.is_valid()
+        assert "due_date" in form.errors
+
+    def test_flw_queryset_filtering(self, opportunity):
+        active = OpportunityAccessFactory(opportunity=opportunity, accepted=True, suspended=False).user
+        unaccepted = OpportunityAccessFactory(opportunity=opportunity, accepted=False, suspended=False).user
+        suspended = OpportunityAccessFactory(opportunity=opportunity, accepted=True, suspended=True).user
+
+        flw_queryset = CreateTaskForm(opportunity=opportunity).fields["connect_worker"].queryset
+
+        assert active in flw_queryset
+        assert unaccepted not in flw_queryset
+        assert suspended not in flw_queryset

commcare_connect/templates/tasks/new_task_modal.html

@@ -0,0 +1,63 @@
+{% load i18n %}
+{% load crispy_forms_tags %}
+{% load static %}
+
+<link rel="stylesheet" href="{% static 'bundles/css/tomselect.css' %}">
+<script src="{% static 'bundles/js/tomselect-bundle.js' %}" defer></script>
+<script>
+    document.addEventListener('htmx:afterRequest', function (event) {
+        if (event.detail.successful && event.detail.elt.id === 'create-task-form') {
+            const form = document.getElementById('create-task-form');
+            form.reset();
+            form.querySelectorAll('[data-tomselect]').forEach(el => el.tomselect?.clear());
+            window.dispatchEvent(new CustomEvent('create-task-success'));
+        }
+    });
+</script>
+
+<div x-show="{{ modal_name }}" x-cloak x-transition.opacity class="modal-backdrop" role="dialog" aria-modal="true"
+    aria-labelledby="new-task-modal-title"
+    @keydown.escape.window="{{ modal_name }} = false"
+    @create-task-success.window="{{ modal_name }} = false">
+    <div @click.outside="{{ modal_name }} = false" class="modal">
+
+        <div class="flex justify-between items-start mb-4">
+            <div>
+                <div class="flex items-center gap-3 mb-1">
+                    <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 shrink-0">
+                        <i class="fa-solid fa-list-check" aria-hidden="true"></i>
+                    </div>
+                    <h2 id="new-task-modal-title" class="text-xl font-bold text-brand-deep-purple">
+                        {% trans "Create Task" %}
+                    </h2>
+                </div>
+                <p class="text-sm text-gray-500 mt-1">
+                    {% trans "Create a new task, and assign it to the relevant Connect Worker." %}
+                </p>
+            </div>
+            <button type="button" class="button-icon" @click="{{ modal_name }} = false"
+                    aria-label="{% trans 'Close dialog' %}">
+                <i class="fa-solid fa-xmark cursor-pointer" aria-hidden="true"></i>
+            </button>
+        </div>
+
+        <form id="create-task-form"
+              method="post"
+              action="{{ create_task_url }}"
+              hx-post="{{ create_task_url }}"
+              hx-target="#create-task-form"
+              hx-swap="outerHTML">
+            {% csrf_token %}
+            {% crispy form %}
+            <div class="flex justify-between gap-3 pt-2">
+                <button type="button" @click="{{ modal_name }} = false"
+                        class="button button-md outline-style flex-1">
+                    {% trans "Cancel" %}
+                </button>
+                <button type="submit" class="button button-md primary-dark flex-1">
+                    {% trans "Save Changes" %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>