Choose Campaign

After user has selected a vaccine, we have to show a list of campaigns made for that vaccine. So, in this video, we are going to create choose-campaign page.

Resources

• choose-campaign.html

Views

In the views.py file of vaccination, at first import the Campaign model.

from campaign.models import Campaign

Now, lets create a view to show a list of campaign

class ChooseCampaign(LoginRequiredMixin, generic.ListView):
    # At first, specify the name of model for which you are creating this list view
    model = Campaign
    # Now, give the template name
    template_name = "vaccination/choose-campaign.html"
    # After that, paginate this view by 10 objects per page.
    paginate_by = 10
    # Then set the ordering
    ordering = ["start_date"]

    # Now, we need to override the queryset of this view because, we don't want to show all the campaigns instance
    # We want to show only those campaigns that are associated with a particular vaccine.
    # So, we need to apply filter on the queryset.
    def get_queryset(self):
      # In this filter, we will filter out vaccine by the vaccine_id.
      return super().get_queryset().filter(vaccine=self.kwargs["vaccine_id"])
      # We will get this vaccine id from the url.

Templates

Now, lets create a template for this view. Create choose-campaign.html file in the templates folder under vaccination sub-folder.

I have attached choose-campaign.html file in the resources section. Please download it and paste its content in this file.

{% extends 'mysite/base.html' %}

{% block title %} 
    <title>Choose Campaign</title>
{% endblock title %}

{% block content %}
<div class="mt-3">
  <div class="d-flex align-items-center justify-content-between">
    <h3 class="text-center">Choose Your Desired Campaign</h3>
  </div>
  <table class="table table-responsive table-hover">
    <thead>
      <tr>
        <th scope="col">Center</th>
        <th scope="col">Start Date</th>
        <th scope="col">End Date</th>
        <th scope="col">Confirm</th>
      </tr>
    </thead>

    <tbody>
      {% for campaign in page_obj %}
      <tr>
        <td>{{ campaign.center.name }}</td>
        <td>{{ campaign.start_date }}</td>
        <td>{{ campaign.end_date }}</td>
        <td><a href="#" class="btn-sm btn-outline-primary">Select</a></td>
      </tr>
      {% endfor %}
    </tbody>

  </table>

  {% include "components/pagination.html" %}

</div>
{% endblock content %}

URLS

Now, lets create a url path to access this view.

path("choose-campaign/<int:vaccine_id>/", views.ChooseCampaign.as_view(), name="choose-campaign"),

After that add this url in the choose-vaccine.html file.

<td><a href="{% url 'vaccination:choose-campaign' vaccine.id %}" class="btn-sm btn-outline-primary">Select</a></td>

[Run the development server and see the changes]