add page size control (#1005)

bihealth · Feb 12, 2025 · a32f538 · a32f538
1 parent 2eee70c
commit a32f538
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/projectroles/static/projectroles/css/projectroles.css b/projectroles/static/projectroles/css/projectroles.css
@@ -311,8 +311,17 @@ table.sodar-card-table-bordered tbody tr:last-child td {
 }
 
 
-/* Project list table ------------------------------------------------------- */
+/* Project list ------------------------------------------------------------- */
 
+.sodar-pr-project-list-input-group {
+  max-width: 450px !important;
+}
+
+select.sodar-pr-project-list-page-length {
+  max-width: 100px !important;
+  height: 32px;
+  padding-top: 5px;
+}
 
 table.sodar-pr-project-list-table tbody tr {
   height: 53px !important;

diff --git a/projectroles/static/projectroles/js/project_list.js b/projectroles/static/projectroles/js/project_list.js
@@ -345,6 +345,14 @@ $(document).ready(function () {
                 return $(api.row(dataIndex).node()).data('starred');
             } else return true;
         });
+        // Handle page length change
+        $('.sodar-pr-project-list-page-length').change(function () {
+            var dt = $(this).closest(
+                '#sodar-pr-project-list').find('table').DataTable();
+            var value = parseInt($(this).val());
+            dt.page.len(value).draw();
+            // TODO: Update user setting here
+        });
 
         if (projectUuids.length > 0) {
             // Update custom columns

diff --git a/projectroles/templates/projectroles/_project_list.html b/projectroles/templates/projectroles/_project_list.html
@@ -18,7 +18,8 @@ <h4>
         <i class="iconify" data-icon="mdi:rhombus-split"></i>
         {% get_display_name 'PROJECT' title=True plural=True %}
       {% endif %}
-      <div class="input-group sodar-header-input-group pull-right">
+      <div class="input-group sodar-header-input-group
+                  sodar-pr-project-list-input-group pull-right">
         {% if request.user.is_authenticated %}
           <div class="input-group-prepend">
             <button class="btn btn-secondary"
@@ -30,6 +31,16 @@ <h4>
             </button>
           </div>
         {% endif %}
+        {# TODO: Get user setting instead #}
+        {% get_django_setting 'PROJECTROLES_PROJECT_LIST_PAGINATION' 10 as list_pagination %}
+        <select class="form-control sodar-pr-project-list-page-length">
+          <option selected value="{{ list_pagination }}">Page</option>
+          <option value="10">10</option>
+          <option value="25">25</option>
+          <option value="50">50</option>
+          <option value="100">100</option>
+          <option value="-1">All</option>
+        </select>
         <input class="form-control"
                type="text"
                placeholder="Filter"