Grocery Bag using Django (Part-5) - Filter Items by Date

Introduction

In the previous post, we had completed CRUD operations in our web application. If you haven't read it till now, make sure you read it here. This will be a short blog where we will be filtering the items on the index page according to the dates they were created on.

Filter by date

On the index page, you'll find an option to filter the items by the date they were created on. What we are going to do is to create an HTML form that makes a GET request on the index route whenever it is submitted. On the backend, if we get the date field, we filter the items by the date. If the date field is not there, we simply don't apply any filter except user=request.user. Open the bag/views.py file and update the index view function as:

@login_required
def index(request):
    date = request.GET.get('date')
    if date:
        items = Item.objects.filter(user=request.user, date=date).order_by('-id')
    else:
        items = Item.objects.filter(user=request.user).order_by('-id')
    context = {
        'items': items
    }
    return render(request, "index.html", context)

As discussed above, if we get the value of the date, we filter the items according to the date too. If not, we don't filter it.

We are also required to update the index.html file as:

{% extends "base.html" %}{% load static %} 

{% block title %}View Bag{% endblock title %} 

{% block content %}
<body>
  <div class="container mt-5">
    <!-- top -->
    <div class="row">
      <div class="col-lg-6">
        <h1>View Grocery List</h1>
        <a href="{% url 'add-item' %}">
          <button type="button" class="btn btn-success">Add Item</button>
        </a>
      </div>
      <div class="col-lg-6 float-right">
        <form action="{% url 'index' %}" method="get">
          <div class="row">
            <div class="col-lg-6">
              <!-- Date Filtering-->
              <input type="date" name="date" class="form-control" />
            </div>
            <div class="col-lg-4">
              <input type="submit" class="btn btn-danger" value="filter" />
            </div>
            <div class="col-lg-2">
              <p class="mt-1"><a href="{% url 'signout' %}">Log Out</a></p>
            </div>
          </div>
        </form>
      </div>
    </div>
    <br>
    {% include 'partials/alerts.html' %}
    <!-- Grocery Cards -->
    <div class="row mt-4">
      <!-- Loop This -->
      {% for item in items %}
      <div class="col-lg-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{{item.name}}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{item.quantity}}</h6>
            {% if item.status == 'PENDING' %}
            <p class="text-info">{{item.status}}</p>
            {% elif item.status == 'BOUGHT' %}
            <p class="text-success">{{item.status}}</p>
            {% else %}
            <p class="text-danger">{{item.status}}</p>
            {% endif %}
            <div class="row">
              <div class="col-md-6">
                <a href="{% url 'update-item' item.id %}">
                  <button type="button" class="btn btn-primary">UPDATE</button>
                </a>
              </div>
              <div class="col-md-6">
                <a href="{% url 'delete-item' item.id %}">
                  <button type="button" class="btn btn-danger">DELETE</button>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</body>
{% endblock content %}

As discussed above, we created an HTML form around the date filter with a GET request on the index route. And that's it, we're done!!

Demo Video

You can watch the demo video here:

Conclusion

This was a short and simple blog on how we can filter the items on the index page according to the dates they were created on. In the next blog(the final one), we'll deploy this app on Heroku, a free hosting platform. Stay tuned!

Code till now: https://github.com/ashutoshkrris/Grocery-Bag/tree/blog5