Sorters search

process_manager/tables.py

@@ -28,38 +28,44 @@ class ProcessTable(tables.Table):
 
     uuid = tables.Column(
         verbose_name="UUID",
+        orderable=True,
         attrs={"td": {"class": "fw-bold text-break text-start"}},
     )
     name = tables.Column(
         verbose_name="Process Name",
+        orderable=True,
         attrs={
             "td": {"class": "fw-bold text-primary text-center"},
             "th": {"class": "text-center header-style"},
         },
     )
     user = tables.Column(
         verbose_name="User",
+        orderable=True,
         attrs={
             "td": {"class": "text-secondary text-center"},
             "th": {"class": "text-center header-style"},
         },
     )
     session = tables.Column(
         verbose_name="Session",
+        orderable=True,
         attrs={
             "td": {"class": "text-secondary text-center"},
             "th": {"class": "text-center header-style"},
         },
     )
     status_code = tables.Column(
         verbose_name="Status",
+        orderable=True,
         attrs={
             "td": {"class": "fw-bold text-center"},
             "th": {"class": "text-center header-style"},
         },
     )
     exit_code = tables.Column(
         verbose_name="Exit Code",
+        orderable=True,
         attrs={
             "td": {"class": "text-center"},
             "th": {"class": "text-center header-style"},
@@ -68,13 +74,15 @@ class ProcessTable(tables.Table):
     logs = tables.TemplateColumn(
         logs_column_template,
         verbose_name="Logs",
+        orderable=False,
         attrs={
             "td": {"class": "text-center"},
             "th": {"class": "text-center header-style"},
         },
     )
     select = tables.CheckBoxColumn(
         accessor="uuid",
+        orderable=False,
         verbose_name="Select",
         attrs={
             "th__input": {

process_manager/templates/process_manager/index.html

@@ -15,6 +15,67 @@
       max-height: 80vh;
       overflow-y: auto;
     }
+    #search-dropdown {
+        width: auto;
+        padding: 0.375rem 0.75rem;
+        font-size: 1rem;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+    }
+    .custom-thead {
+        background-color: #f8f9fa;
+        border-radius: 8px;
+    }
+    .custom-th {
+        padding: 10px;
+        text-align: center;
+        font-weight: 600;
+        color: #495057;
+    }
+    .sort-link {
+        text-decoration: none;
+        color: #007bff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .sort-icon {
+        font-size: 0.9em;
+        margin-left: 5px;
+        opacity: 0.6;
+    }
+    .table-header {
+        font-weight: bold;
+        color: #6c757d;
+    }
+    .clear-sorting {
+        padding: 5px 12px;
+        background-color: #f8f9fa;
+        color: #495057;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        font-size: 0.9em;
+        font-weight: 600;
+        cursor: pointer;
+        text-decoration: none;
+        transition: background-color 0.3s ease;
+    }
+    .sort-link {
+        cursor: pointer;
+        text-decoration: none;
+        color: blue;
+    }
+
+
+    .sort-link:hover {
+        text-decoration: underline;
+        color: darkblue;
+    }
+
+    .clear-sorting:hover {
+        background-color: #e2e6ea;
+    }
     .table-container {
       border-radius: 10px;
     }
@@ -171,13 +232,28 @@ <h5>Process Control</h5>
                         class="btn btn-info w-100 ms-2"
                         _="on click hide me toggle .hide-messages on #main-content">Show Messages</button>
               </div>
-              <input class="form-control mb-3"
-                     type="search"
-                     name="search"
-                     placeholder="Search processes..."
-                     hx-get="{% url 'process_manager:process_table' %}"
-                     hx-trigger="input changed delay:500ms, every 1s"
-                     hx-target="div.table-container">
+              <div class="d-flex align-items-center mb-3">
+                <select id="search-dropdown" name="search-drp" class="form-control me-2">
+                  <option value="">Search By</option>
+                  <option value="uuid">UUID</option>
+                  <option value="name">Process Name</option>
+                  <option value="user">User</option>
+                  <option value="session">Session</option>
+                  <option value="status_code">Status</option>
+                  <option value="exit_code">Exit Code</option>
+                </select>
+                <input id="search-input"
+                       class="form-control"
+                       type="search"
+                       name="search"
+                       placeholder="Search processes..."
+                       style="flex: 1"
+                       hx-get="{% url 'process_manager:process_table' %}"
+                       hx-trigger="input changed delay:500ms, every 1s"
+                       hx-target="div.table-container"
+                       hx-include="#sort-field, #search-dropdown">
+              </div>
+              <input type="hidden" id="sort-field" name="sort" value="">
               <div class="table-container"></div>
             </form>
           </div>

process_manager/templates/process_manager/partials/process_table.html

@@ -1,2 +1,32 @@
+{% extends "django_tables2/table.html" %}
 {% load render_table from django_tables2 %}
+{% load querystring from django_tables2 %}
+{% block table.thead %}
+  <div>
+    <a href="{% url 'process_manager:process_table' %}?sort="
+       _="on click set #sort-field's value to '' set #sort-param-display's textContent to 'None'"
+       hx-get="{% url 'process_manager:process_table' %}?sort="
+       hx-target="div.table-container"
+       class="clear-sorting">Clear Sorting</a>
+  </div>
+  {% if table.show_header %}
+    <thead class="custom-thead" {{ table.attrs.thead.as_html }}>
+      <tr>
+        {% for column in table.columns %}
+          <th class="custom-th" {{ column.attrs.th.as_html }}>
+            {% if column.orderable %}
+              <a _="on click get #sort-field then set currentSort to its.value then if currentSort is '{{ column.name }}' set #sort-field's value to '-{{ column.name }}' else set #sort-field's value to '{{ column.name }}' end then set newSortUrl to '{% url 'process_manager:process_table' %}?sort=' + #sort-field.value then my.setAttribute('hx-get', newSortUrl) then call htmx.ajax('GET', newSortUrl, {target: 'div.table-container'})"
+                 class="sort-link">
+                {{ column.header }}
+                <span class="sort-icon">⇅</span>
+              </a>
+            {% else %}
+              <span class="table-header">{{ column.header }}</span>
+            {% endif %}
+          </th>
+        {% endfor %}
+      </tr>
+    </thead>
+  {% endif %}
+{% endblock table.thead %}
 {% render_table table %}

process_manager/views/partials.py

@@ -1,6 +1,5 @@
 """View functions for partials."""
 
-import django_tables2
 from django.contrib.auth.decorators import login_required
 from django.http import HttpRequest, HttpResponse
 from django.shortcuts import render
@@ -13,19 +12,18 @@
 
 
 def filter_table(
-    search: str, table: list[dict[str, str | int]]
+    search: str, column: str, table: list[dict[str, str | int]]
 ) -> list[dict[str, str | int]]:
-    """Filter table data based on search parameter.
+    """Filter table data based on search and column parameters.
 
     If the search parameter is empty, the table data is returned unfiltered. Otherwise,
-    the table data is filtered based on the search parameter. The search parameter can
-    be a string or a string with a column name and search string separated by a colon.
-    If the search parameter is a column name, the search string is matched against the
-    values in that column only. Otherwise, the search string is matched against all
-    columns.
+    the table data is filtered based on the search parameter. If the column parameter
+    is provided, the search string is matched against the values in that column only.
+    If no valid column is specified, the search string is matched against all columns.
 
     Args:
         search: The search string to filter the table data.
+        column: The column name to filter by, or an empty string to search all columns.
         table: The table data to filter.
 
     Returns:
@@ -35,17 +33,9 @@ def filter_table(
         return table
 
     all_cols = list(table[0].keys())
-    column, _, search = search.partition(":")
-    if not search:
-        # No column-based filtering
-        search = column
-        columns = all_cols
-    elif column not in all_cols:
-        # If column is unknown, search all columns
-        columns = all_cols
-    else:
-        # Search only the specified column
-        columns = [column]
+    columns = [column] if column in all_cols else all_cols
+
+    # Convert search string to lowercase for case-insensitive matching
     search = search.lower()
     return [row for row in table if any(search in str(row[k]).lower() for k in columns)]
 
@@ -63,31 +53,36 @@ def process_table(request: HttpRequest) -> HttpResponse:
 
     status_enum_lookup = dict(item[::-1] for item in ProcessInstance.StatusCode.items())
 
-    table_data = []
-    process_instances = session_info.data.values
-    for process_instance in process_instances:
-        metadata = process_instance.process_description.metadata
-        uuid = process_instance.uuid.uuid
-        table_data.append(
-            {
-                "uuid": uuid,
-                "name": metadata.name,
-                "user": metadata.user,
-                "session": metadata.session,
-                "status_code": status_enum_lookup[process_instance.status_code],
-                "exit_code": process_instance.return_code,
-            }
-        )
-    # Filter table data based on search parameter
-    table_data = filter_table(request.GET.get("search", ""), table_data)
+    # Build the table data
+    table_data = [
+        {
+            "uuid": process_instance.uuid.uuid,
+            "name": process_instance.process_description.metadata.name,
+            "user": process_instance.process_description.metadata.user,
+            "session": process_instance.process_description.metadata.session,
+            "status_code": status_enum_lookup[process_instance.status_code],
+            "exit_code": process_instance.return_code,
+        }
+        for process_instance in session_info.data.values
+    ]
+    # Get the values from the GET request
+    search_dropdown = request.GET.get("search-drp", "")
+    search_input = request.GET.get("search", "")
+
+    # Determine the column and search values for filtering
+    column = search_dropdown if search_dropdown else ""
+    search = search_input if search_input else ""
+
+    # Apply search filtering
+    table_data = filter_table(search, column, table_data)
     table = ProcessTable(table_data)
 
-    # sort table data based on request parameters
-    table_configurator = django_tables2.RequestConfig(request)
-    table_configurator.configure(table)
+    # Set the order based on the 'sort' parameter in the GET request, defaulting to ''
+    sort_param = request.GET.get("sort", "")
+    table.order_by = sort_param
 
     return render(
         request=request,
-        context=dict(table=table),
+        context={"table": table},
         template_name="process_manager/partials/process_table.html",
     )