Fix search field functionality

src/servala/frontend/forms/service.py

@@ -1,4 +1,5 @@
 from django import forms
+from django.db.models import Q
 from django.utils.translation import gettext_lazy as _
 
 from servala.core.models import (
@@ -18,13 +19,17 @@ class ServiceFilterForm(forms.Form):
     cloud_provider = forms.ModelChoiceField(
         queryset=CloudProvider.objects.all(), required=False
     )
-    q = forms.CharField(required=False)
+    q = forms.CharField(label=_("Search"), required=False)
 
     def filter_queryset(self, queryset):
         if category := self.cleaned_data.get("category"):
             queryset = queryset.filter(category=category)
         if cloud_provider := self.cleaned_data.get("cloud_provider"):
             queryset = queryset.filter(offerings__provider=cloud_provider)
+        if search := self.cleaned_data.get("q"):
+            queryset = queryset.filter(
+                Q(name__icontains=search) | Q(category__name__icontains=search)
+            )
         return queryset
 
 

src/servala/frontend/templates/frontend/organizations/service_detail.html

@@ -28,8 +28,10 @@
                 </div>
             </div>
         </div>
+        <div class="row">
             {% for offering in service.offerings.all %}
-            <div class="card col-6 col-lg-3 col-md-4">
+                <div class="col-6 col-lg-3 col-md-4">
+                    <div class="card">
                         <div class="card-header d-flex align-items-center">
                             {% if offering.provider.logo %}
                                 <img src="{{ offering.provider.logo.url }}"
@@ -54,6 +56,7 @@
                             <a href="offering/{{ offering.pk }}/" class="btn btn-light-primary">{% translate "Read More" %}</a>
                         </div>
                     </div>
+                </div>
             {% empty %}
                 <div class="card">
                     <div class="card-body">
@@ -61,5 +64,6 @@
                     </div>
                 </div>
             {% endfor %}
+        </div>
     </section>
 {% endblock content %}

src/servala/frontend/templates/frontend/organizations/services.html

@@ -16,8 +16,10 @@
                 </div>
             </div>
         </div>
+        <div class="row">
             {% for service in services %}
-            <div class="card col-6 col-lg-3 col-md-4">
+                <div class="col-6 col-lg-3 col-md-4">
+                    <div class="card">
                         <div class="card-header d-flex align-items-center">
                             {% if service.logo %}
                                 <img src="{{ service.logo.url }}"
@@ -39,6 +41,7 @@
                             <a href="{{ service.slug }}/" class="btn btn-light-primary">{% translate "Read More" %}</a>
                         </div>
                     </div>
+                </div>
             {% empty %}
                 <div class="card">
                     <div class="card-body">
@@ -46,6 +49,7 @@
                     </div>
                 </div>
             {% endfor %}
+        </div>
     </section>
     <script src="{% static "js/autosubmit.js" %}" defer></script>
 {% endblock content %}