Slot List

In this video, we are going to create slot list page. Using this slot list, we will show all the vaccination slots that patient can book for a particular campaign.

Resources

• Code Files
• slot-list.html

Code Setup

• But at first, lets setup the project code for this section.

• So, you need to download the project code files the resources section: DOWNLOAD ZIP FILE

• Now, extract the folder on the desktop.

• Then, copy the mysite folder which is the project root directory.

• Replace the mysite folder of your project with the copied mysite folder. So, if you made any mistake while writing the code in the previous section, then, it won't affect your learning in this section.

• Open your project in the VS code and in the terminal, activate the virtual environment, and move to the mysite.

• Run the migrations and create a superuser.

Views

In the views.py, at first import the slot model

from campaign.models import Slot

Now, lets create a view named "SlotListView".

# This view will inherit LoginRequiredMixin, generic.ListView
class SlotListView(LoginRequiredMixin, generic.ListView):
    # Now specify the model for which you want to create this ListView
    model = Slot
    # Then give the name of the template
    template_name = "campaign/slot-list.html"
    # After that, paginate this slot-list page by 10 slots per page
    paginate_by = 10

    # Now, by default this view, will return all the slots present in the database.
    # But, I want to show slots only for a particular campaign not for all the campaigns.
    # So, in order to filter out slots data that we will show in the page, we need to modify the queryset of this view.
    # Now, here override the get_queryset method
    def get_queryset(self):
        # In this method, at first, get the default queryset that this view uses.
        queryset = super().get_queryset()
        # After that, we will apply filter on this queryset to show slots only for a particular campaign not for all campaign.
        # We will use self.kwargs to extract the any value from the url params.
        queryset = Slot.objects.filter(campaign=self.kwargs["campaign_id"]).order_by("id")
        # Then, at last return this queryset.
        return queryset

Templates

Now, lets create the slot-list.html file in the templates folder under campaign.

I have attached slot-list.html file in the resources section. Please download it, copy its content and paste it in this html file.

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

{% block title %}
    <title>Slot List</title>
{% endblock title %}

{% block content %}
<div class="mt-3">

  <div class="d-flex align-items-center justify-content-between">
    <h3 class="text-center"><i class="fas fa-clock"></i> Slot List</h3>
    <a href="#"><i class="fas fa-plus"></i> Create Slot</a>
  </div>

  <table class="table table-responsive table-hover text-center">
      <thead>
        <tr>
          <th scope="col">Start Time</th>
          <th scope="col">End Time</th>
          <th scope="col">Date</th>
          <th scope="col">Max Capacity</th>
          <th scope="col">Reserved</th>
          <th scope="col">Select</th>
        </tr>
      </thead>

      <tbody>
        {% for slot in object_list %}
        <tr>
          <td>{{ slot.start_time }}</td>
          <td>{{ slot.end_time }}</td>
          <td>{{ slot.date }}</td>
          <td>{{ slot.max_capacity }}</td>
          <td>{{ slot.reserved }}</td>
          <td><a href="#" class="btn-sm btn-outline-primary">View Details</a></td>
        </tr>
        {% endfor %}
      </tbody>

  </table>
  {% include "components/pagination.html" %}
</div>
{% endblock content %}

URL

Now, create a url path to access this view.

path("<int:campaign_id>/slot/", views.SlotListView.as_view(), name="slot-list"),

Also, we need to add this url path in the campaign-detail.html

<a href="{% url 'campaign:slot-list' object.id %}"><i class="fas fa-eye"></i> View Slots</a>

[Run the development server and see the changes]