Add filter buttons tp newsletter

links/newsletter_views.py

@@ -5,6 +5,8 @@ from django.http import Http404
 from rest_framework import viewsets, status
 from rest_framework.response import Response
 from rest_framework.pagination import PageNumberPagination
+from django.utils import timezone
+from datetime import datetime
 from .models import Newsletter
 from .forms import NewsletterForm
 from .serializers import NewsletterSerializer
@@ -15,6 +17,54 @@ class NewsletterListView(ListView):
     context_object_name = 'newsletters'
     paginate_by = 10
 
+    def get_queryset(self):
+        queryset = Newsletter.objects.all().order_by('-created_at')
+
+        # Type filter
+        newsletter_type = self.request.GET.get('type')
+        if newsletter_type:
+            queryset = queryset.filter(type=newsletter_type)
+
+        # Date range filter
+        date_from = self.request.GET.get('date_from')
+        date_to = self.request.GET.get('date_to')
+
+        if date_from:
+            try:
+                date_from = datetime.strptime(date_from, '%Y-%m-%d')
+                queryset = queryset.filter(created_at__gte=date_from)
+            except ValueError:
+                pass
+
+        if date_to:
+            try:
+                date_to = datetime.strptime(date_to, '%Y-%m-%d')
+                queryset = queryset.filter(created_at__lte=date_to)
+            except ValueError:
+                pass
+
+        return queryset
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+
+        # Add newsletter types for dropdown
+        context['newsletter_types'] = Newsletter.NewsletterType.choices
+
+        # Add selected filters to context
+        context['selected_type'] = self.request.GET.get('type', '')
+        context['date_from'] = self.request.GET.get('date_from', '')
+        context['date_to'] = self.request.GET.get('date_to', '')
+
+        # Check if any filter is applied
+        context['is_filtered'] = any([
+            context['selected_type'],
+            context['date_from'],
+            context['date_to']
+        ])
+
+        return context
+
 class NewsletterDetailView(DetailView):
     model = Newsletter
     template_name = 'links/newsletter_detail.html'

links/templates/links/newsletter_detail.html

@@ -66,20 +66,19 @@
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <div class="bg-white shadow-sm rounded-lg overflow-hidden">
         <div class="px-4 py-5 sm:p-6">
-            <!-- Header with title and actions -->
             <div class="flex justify-between items-start mb-6">
-                <div>
-                    <h1 class="text-3xl font-bold text-gray-900">{{ newsletter.title }}</h1>
-                    <div class="mt-2">
-                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
-                            {% if newsletter.type == 'technology' %}bg-purple-100 text-purple-800
-                            {% elif newsletter.type == 'world_news' %}bg-green-100 text-green-800
-                            {% else %}bg-blue-100 text-blue-800{% endif %}">
-                            {{ newsletter.get_type_display }}
-                        </span>
-                    </div>
+            <!-- Back Button -->
+                <div class="mb-6">
+                    <a href="{% url 'newsletter-list' %}"
+                    class="inline-flex items-center p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md"
+                    title="{% trans 'Back to List' %}">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+                        </svg>
+                        <span class="ml-1 text-sm">{% trans "Back to List" %}</span>
+                    </a>
                 </div>
-
                 <!-- Action Buttons -->
                 <div class="flex space-x-2">
                     <a href="{% url 'newsletter-update' newsletter.pk %}"
@@ -107,17 +106,27 @@
                                   d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                         </svg>
                     </button>
-                    <a href="{% url 'newsletter-list' %}"
-                       class="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md"
-                       title="{% trans 'Back to List' %}">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
-                        </svg>
-                    </a>
                 </div>
             </div>
 
+            <!-- Title and Actions -->
+            <div class="flex justify-between items-start mb-6">
+                <!-- Title and Type -->
+                <div>
+                    <h1 class="text-3xl font-bold text-gray-900">{{ newsletter.title }}</h1>
+                    <div class="mt-2">
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+                            {% if newsletter.type == 'technology' %}bg-purple-100 text-purple-800
+                            {% elif newsletter.type == 'world_news' %}bg-green-100 text-green-800
+                            {% else %}bg-blue-100 text-blue-800{% endif %}">
+                            {{ newsletter.get_type_display }}
+                        </span>
+                    </div>
+                </div>
+
+
+            </div>
+
             <!-- Metadata -->
             <div class="mb-6 text-sm text-gray-500">
                 <div>{% trans "Created" %}: {{ newsletter.created_at|date:"Y-m-d H:i" }}</div>

links/templates/links/newsletter_list.html

@@ -10,6 +10,50 @@
         </a>
     </div>
 
+    <!-- Filter Section -->
+    <div class="bg-white shadow rounded-lg mb-6 p-4">
+        <form method="get" class="space-y-4 sm:space-y-0 sm:flex sm:items-center sm:space-x-4">
+            <div class="flex-1">
+                <label for="type" class="block text-sm font-medium text-gray-700 mb-1">{% trans "Type" %}</label>
+                <select name="type" id="type"
+                        class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
+                    <option value="">{% trans "All Types" %}</option>
+                    {% for value, label in newsletter_types %}
+                        <option value="{{ value }}" {% if selected_type == value %}selected{% endif %}>
+                            {{ label }}
+                        </option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="flex-1">
+                <label for="date_from" class="block text-sm font-medium text-gray-700 mb-1">{% trans "From Date" %}</label>
+                <input type="date" name="date_from" id="date_from"
+                       value="{{ date_from|date:'Y-m-d' }}"
+                       class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
+            </div>
+            <div class="flex-1">
+                <label for="date_to" class="block text-sm font-medium text-gray-700 mb-1">{% trans "To Date" %}</label>
+                <input type="date" name="date_to" id="date_to"
+                       value="{{ date_to|date:'Y-m-d' }}"
+                       class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
+            </div>
+            <!-- Filter Buttons -->
+            <div class="flex justify-end items-end space-x-2">
+                <button type="submit"
+                        class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 h-10 inline-flex items-center">
+                    {% trans "Filter" %}
+                </button>
+                {% if is_filtered %}
+                    <a href="{% url 'newsletter-list' %}"
+                       class="text-gray-600 hover:text-gray-800 px-4 py-2 rounded-md border border-gray-300 h-10 inline-flex items-center">
+                        {% trans "Clear" %}
+                    </a>
+                {% endif %}
+            </div>
+        </form>
+    </div>
+
+    <!-- Newsletter List -->
     <div class="bg-white shadow overflow-hidden sm:rounded-md">
         <ul class="divide-y divide-gray-200">
             {% for newsletter in newsletters %}