Vaccination Detail

In this video, we are going to create vaccination detail page where the users can see the complete vaccination details along with an option to download appointment letter and vaccine certificate.

Resources

• vaccination-detail.html

Views

In the views.py file of vaccination, let us create a new view named VaccinationDetail.

class VaccinationDetail(LoginRequiredMixin, generic.DetailView):
    # In this detail view, at first, we need to specify the name of model.
    model = Vaccination
    # After that, give the template name
    template_name = "vaccination/vaccination-detail.html"

Templates

After that, lets create the vaccination-detail.html file.

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

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

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

{% block content %}
<div class="card mb-3">
  <div class="card-body">
    <h5 class="card-title mb-4"><i class="fas fa-syringe"></i> Vaccination Details </h5>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Patient Name
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.patient.get_full_name }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Center Name
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.campaign.center.name }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Vaccine Name
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.campaign.vaccine.name }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Slot Date
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.slot.date }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Slot Time
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.slot.start_time }} to {{ object.slot.end_time }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Status
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {% if object.is_vaccinated %}
          Vaccinated
        {% else %}
          Scheduled
        {% endif %}
      </div>
    </div>

    {% if object.is_vaccinated %}
    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Date of Vaccination
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.date }}
      </div>
    </div>
    {% endif %}

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Last Modified On
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.updated_on }}
      </div>
    </div>

    <div class="row mb-1">
      <div class="col-5 col-sm-4 col-md-3 col-lg-2 fw-bold">
        Last Updated By
      </div>
      <div class="col-7 col-sm-8 col-md-9 col-lg-10">
        {{ object.updated_by }}
      </div>
    </div>

    <div class="row mb-1 btn-container">
      <div class="col-12">
        <button class="btn btn-sm btn-primary m-1">
          <a href="#"><i class="fas fa-download"></i> Appointment Letter</a>
        </button>

        {% if object.is_vaccinated %}
        <button class="btn btn-sm btn-success m-1">
            <a href="#"><i class="fas fa-download"></i> Vaccine Certificate</a>
        </button>
        {% endif %}
      </div>
    </div>

  </div>
</div>
{% endblock content %}

URLS

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

path("detail/<int:pk>/", views.VaccinationDetail.as_view(), name="vaccination-detail"),

After that, we need to add this url in the vaccination-list-patient.html

<td><a href="{% url 'vaccination:vaccination-detail' vaccination.id %}" class="btn-sm btn-outline-primary">View Details</a></td>