feat(portfolio): add project search

portfolio/templates/project_list.html

@@ -2,40 +2,20 @@
 {% load i18n %}
 {% block content %}
     <div class="container mt-4">
-        <div class="row row-deck row-cards">
+        <form class="mb-4">
-            {% for project in object_list %}
+            <div class="form-floating">
-                <div class="col-md-4">
+                <input type="text"
-                    {% if project.url %}
+                       class="form-control"
-                        <a class="card card-link card-link-pop"
+                       id="floating-name"
-                           href="{{ project.url }}"
+                       placeholder=""
-                           target="_blank">
+                       name="query"
-                            <div class="card-body">
+                       autocomplete="off"
-                                <h4>{{ project.name }}</h4>
+                       hx-target="#projects"
-                                <p>{{ project.short_description }}</p>
+                       hx-get="{% url 'projects-query' %}"
-                                <div>
+                       hx-trigger="load, input, delay:200ms" />
-                                    {% for t in project.tags.all %}
+                <label for="floating-name">{% trans "Search" %}</label>
-                                        <div class="badge text-white fs-5"
+            </div>
-                                             style="background-color: #{{ t.color }}">{{ t }}</div>
+        </form>
-                                    {% endfor %}
+        <div id="projects"></div>
-                                </div>
-                            </div>
-                        </a>
-                    {% else %}
-                        <div class="card">
-                            <div class="card-body">
-                                <h4>{{ project.name }}</h4>
-                                <p>{{ project.short_description }}</p>
-                                <div>
-                                    {% for t in project.tags.all %}
-                                        <div class="badge text-white fs-5"
-                                             style="background-color: #{{ t.color }}">{{ t }}</div>
-                                    {% endfor %}
-                                </div>
-                            </div>
-                        </div>
-                    {% endif %}
-                </div>
-            {% endfor %}
-        </div>
     </div>
 {% endblock %}

portfolio/templates/project_list_query.html

@@ -0,0 +1,35 @@
+<div class="row row-deck row-cards">
+    {% for project in object_list %}
+        <div class="col-md-4">
+            {% if project.url %}
+                <a class="card card-link card-link-pop"
+                   href="{{ project.url }}"
+                   target="_blank">
+                    <div class="card-body">
+                        <h4>{{ project.name }}</h4>
+                        <p>{{ project.short_description }}</p>
+                        <div>
+                            {% for t in project.tags.all %}
+                                <div class="badge text-white fs-5"
+                                     style="background-color: #{{ t.color }}">{{ t }}</div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </a>
+            {% else %}
+                <div class="card">
+                    <div class="card-body">
+                        <h4>{{ project.name }}</h4>
+                        <p>{{ project.short_description }}</p>
+                        <div>
+                            {% for t in project.tags.all %}
+                                <div class="badge text-white fs-5"
+                                     style="background-color: #{{ t.color }}">{{ t }}</div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    {% endfor %}
+</div>

portfolio/urls.py

@@ -5,6 +5,7 @@ from portfolio import views
 urlpatterns = [
     path("", views.PortfolioView.as_view(), name="portfolio"),
     path("projects/", views.ProjectList.as_view(), name="projects"),
+    path("projects/query/", views.ProjectListQuery.as_view(), name="projects-query"),
     path("contact/", views.ContactSend.as_view(), name="contact"),
     path("company/<int:pk>/logo/", views.CompanyLogo.as_view(), name="company-logo"),
 ]

portfolio/views.py

@@ -18,9 +18,8 @@ class PortfolioView(TemplateView):
         }
 
 
-class ProjectList(ListView):
+class ProjectList(TemplateView):
     template_name = "project_list.html"
-    model = models.Project
 
 
 class ContactSend(TemplateView):
@@ -49,3 +48,15 @@ class CompanyLogo(DetailView):
     def get(self, request, *args, **kwargs):
         company = self.get_object()
         return FileResponse(company.logo)
+
+
+class ProjectListQuery(ListView):
+    template_name = "project_list_query.html"
+    model = models.Project
+
+    def get_queryset(self):
+        query = self.request.GET.get("query")
+        if not query:
+            return super().get_queryset()
+
+        return super().get_queryset().filter(name__contains=query)