feat: sort and search by language/name on edit page

- Support sort by language
- Support sort by name
- Support search by language

Refs: #137

web-app/django/VIM/apps/instruments/static/instruments/css/detail.css

@@ -83,7 +83,6 @@ th[scope='row'] {
   text-align: center;
   text-decoration: none;
   outline: none;
-  color: #fff;
   border: none;
   border-radius: 3px;
   margin-right: 5px;
@@ -97,3 +96,6 @@ th[scope='row'] {
 .btn.publish {
   background-color: #28a745;
 }
+.btn.search {
+  background-color: #9eb384
+}

web-app/django/VIM/apps/instruments/templates/instruments/detail.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-
 {% load static %}
 
 {% block title %}
@@ -23,6 +22,18 @@ <h2>
       </h2>
       <hr />
     </div>
+
+    <div class="sort-search-form">
+      <form method="get" action="">
+        <input type="text" name="search" placeholder="Search by language..." value="{{ request.GET.search }}" />
+        <select name="sort">
+          <option value="language__en_label" {% if request.GET.sort == 'language__en_label' %}selected{% endif %}>Sort by Language</option>
+          <option value="name" {% if request.GET.sort == 'name' %}selected{% endif %}>Sort by Name</option>
+        </select>
+        <button class="btn search">Search/Sort</button>
+      </form>
+    </div>
+
     <div class="detail-body">
       <div class="instrument-forms">
         <table class="table table-sm table-striped table-bordered">

web-app/django/VIM/apps/instruments/views/instrument_detail.py

@@ -1,7 +1,6 @@
 from django.views.generic import DetailView
 from VIM.apps.instruments.models import Instrument, Language
 
-
 class InstrumentDetail(DetailView):
     """
     Displays details of a specific instrument.
@@ -14,10 +13,16 @@ class InstrumentDetail(DetailView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
 
-        # Query the instrument names in all languages
-        context["instrument_names"] = (
-            context["instrument"].instrumentname_set.all().select_related("language")
-        )
+        search_query = self.request.GET.get('search', '')
+        sort_by = self.request.GET.get('sort', 'language__en_label')
+
+        instrument_names = context["instrument"].instrumentname_set.all().select_related("language")
+
+        if search_query:
+            instrument_names = instrument_names.filter(language__en_label__icontains=search_query)
+
+        instrument_names = instrument_names.order_by(sort_by)
+        context["instrument_names"] = instrument_names
 
         # Get the active language
         active_language_en = self.request.session.get("active_language_en", None)