task/WP-8: Add filtering and date-sorting to user's View Submissions (#…

…147)

* Add filter and sort dropdowns and corresponding JS functions to listing template

* Filter and/or sort data in view and pass data and query str back to templates

* Added needed url patterns to app's urls.py

* Temporary addition to catch app's query string before updating paginator

* Filtering and sorting fixes: sort and filter data before data formatting, and some code clean up

* Set None date entries to way in the future, and use limit var in paginator call

apcd-cms/src/apps/components/paginator/templates/paginator.html

@@ -7,7 +7,7 @@
         class="c-button c-button--as-link c-page-end"
         type="button"
         {% if page.has_previous %}
-            onclick="window.location.href='{% url pagination_url_namespaces %}{% if selected_filter %}?filter={{selected_filter}}&{% else %}?{% endif %}page={{page.previous_page_number}}';"
+            onclick="window.location.href='{% url pagination_url_namespaces %}{% if query_str %}{{ query_str }}{% elif selected_filter %}?filter={{selected_filter}}&{% else %}?{% endif %}page={{page.previous_page_number}}';"
         {% else %}
             disabled
         {% endif %}
@@ -20,7 +20,7 @@
                 <button 
                 class="c-button c-button--secondary {% if page.number == i %}c-button--is-active{% endif %} c-button--size-small c-page-item c-page-link c-page-link--always-click"
                 type="button"
-                onclick="window.location.href='{% url pagination_url_namespaces %}{% if selected_filter %}?filter={{selected_filter}}&{% else %}?{% endif %}page={{i}}';"
+                onclick="window.location.href='{% url pagination_url_namespaces %}{% if query_str %}{{ query_str }}{% elif selected_filter %}?filter={{selected_filter}}&{% else %}?{% endif %}page={{i}}';"
                 >
                     {{i}}
                 </button>
@@ -33,7 +33,7 @@
         class="c-button c-button--as-link c-page-end"
         type="button"
         {% if page.has_next %}
-            onclick="window.location.href='{% url pagination_url_namespaces %}{% if selected_filter %}?filter={{selected_filter}}&{% else %}?{% endif %}page={{page.next_page_number}}';"
+            onclick="window.location.href='{% url pagination_url_namespaces %}{% if query_str %}{{ query_str }}{% elif selected_filter %}?filter={{selected_filter}}&{% else %}?{% endif %}page={{page.next_page_number}}';"
         {% else %}
             disabled
         {% endif %}

apcd-cms/src/apps/submissions/templates/list_submissions.html

@@ -5,6 +5,7 @@
 
 <link rel="stylesheet" href="{% static 'submissions/css/table.css' %}">
 <link rel="stylesheet" href="{% static 'submissions/css/modal.css' %}">
+<link rel="stylesheet" href="{% static 'admin_regis_table/css/table.css' %}">
 <link rel="stylesheet" href="{% static 'admin_regis_table/css/core-styles.c-form.css' %}">
 
 <div class="container">
@@ -14,6 +15,27 @@ <h1>View Submissions</h1>
   <hr />
   <p style="margin-bottom: 30px">A list of submissions by a user</p>
   <hr />
+  <div class="filter-container">
+    <div class="filter-content">
+      <span><b>Filter by Status: </b></span>
+      <select id="statusFilter" class="status-filter" onchange="filterTableByStatus()">
+        {% for option in filter_options %}
+          <option class="dropdown-text" {% if option == selected_filter %}selected{% endif %}>{{ option }}</option>
+        {% endfor %}
+      </select>
+      <span><b>Sort by: </b></span>
+      <select id="dateSort" class="status-filter" onchange="sortByDate()">
+        <option class="dropdown-text" {% if not selected_sort %}selected{% else %}hidden{% endif %} disabled> </option>
+        {% for option, display_text in sort_options.items %}
+          <option class="dropdown-text" value={{option}} {% if option == selected_sort %}selected{% endif %}>{{ display_text }}</option>
+        {% endfor %}
+      </select>
+      {% if selected_filter or selected_sort %}
+        <button onclick="clearSelections()">Clear Options</button>
+      {% endif %}
+    </div>
+  </div>
+
   <table id="submissionTable" class="submission-table">
       <thead>
           <tr>
@@ -41,4 +63,44 @@ <h1>View Submissions</h1>
 
   {% include 'paginator.html' %}
 </div>
+<script>
+    function filterTableByStatus() {
+        var filterDropdown, filterValue, url_params, url, xhr;
+        filterDropdown = document.getElementById("statusFilter");
+        filterValue =  filterDropdown.value;
+        url_params = `?filter=${filterValue}`;
+        {% if selected_sort %}
+            url_params = `?filter=${filterValue}&sort={{selected_sort}}`;
+        {% endif %}
+        url = `/submissions/list-submissions/${url_params}`;
+        xhr = new XMLHttpRequest();
+        xhr.open('GET', url);
+        xhr.send();
+        window.location.href = url;
+        window.location.load();
+    }
+    function sortByDate() {
+        var sortDropdown, sortValue, url_params, url, xhr;
+        sortDropdown = document.getElementById('dateSort');
+        sortValue =  sortDropdown.value;
+        url_params = `?sort=${sortValue}`;
+        {% if selected_filter %}
+            url_params = `?filter={{selected_filter}}&sort=${sortValue}`;
+        {% endif %}
+        url = `/submissions/list-submissions/${url_params}`;
+        xhr = new XMLHttpRequest();
+        xhr.open('GET', url);
+        xhr.send();
+        window.location.href = url;
+        window.location.load();
+    }
+    function clearSelections() {
+        var xhr;
+        xhr = new XMLHttpRequest();
+        xhr.open('GET', '/submissions/list-submissions/')
+        xhr.send()
+        window.location.href = '/submissions/list-submissions/';
+        window.location.load();
+    }
+</script>  
 {% endblock %}

apcd-cms/src/apps/submissions/urls.py

@@ -4,5 +4,8 @@
 app_name = 'submissions'
 urlpatterns = [
     path('list-submissions/', SubmissionsTable.as_view(), name="list_submissions"),
+    path(r'list-submissions/?filter=(?P<filter>)/', SubmissionsTable.as_view(), name="list_submissions"),
+    path(r'list-submissions/?sort=(?P<sort>)/', SubmissionsTable.as_view(), name="list_submissions"),
+    path(r'list-submissions/?filter=(?P<filter>)&sort=(?P<sort>)/', SubmissionsTable.as_view(), name="list_submissions"),
     path('check-submitter-role/', check_submitter_role),
 ]

apcd-cms/src/apps/submissions/views.py

@@ -3,7 +3,7 @@
 from django.contrib.auth.decorators import login_required
 from apps.utils.apcd_database import get_user_submissions_and_logs
 from apps.utils.apcd_groups import has_apcd_group
-from apps.utils.utils import title_case
+from apps.utils.utils import title_case, table_filter
 from apps.components.paginator.paginator import paginator
 import logging
 from dateutil import parser
@@ -28,11 +28,27 @@ def get_context_data(self, *args, **kwargs):
 
         submission_content = get_user_submissions_and_logs(user)
 
+        filter = self.request.GET.get('filter')
+        dateSort = self.request.GET.get('sort')
+
+        def getDate(row):
+            date = row['received_timestamp']
+            return parser.parse(date) if date is not None else parser.parse('1-1-3005') # put 'None' date entries all together at top/bottom depending on direction of sort
+
+        if dateSort is not None:
+            context['selected_sort'] = dateSort
+            submission_content = sorted(submission_content, key=lambda row:getDate(row), reverse=(dateSort == 'newDate'))
+
         try:
             page_num = int(self.request.GET.get('page'))
         except:
             page_num = 1
 
+        context['selected_filter'] = None
+        if filter is not None and filter != 'All':
+            context['selected_filter'] = filter
+            submission_content = table_filter(filter, submission_content, 'status')
+
         limit = 50
         offset = limit * (page_num - 1)
 
@@ -50,8 +66,14 @@ def get_context_data(self, *args, **kwargs):
 
 
         context['header'] = ['Received', 'File Name', ' ', 'Outcome', 'Status', 'Last Updated', 'Actions']
-
-        context.update(paginator(self.request, submission_content))
+        context['filter_options'] = ['All', 'In Process', 'Complete']
+        context['sort_options'] = {'newDate': 'Newest Received', 'oldDate': 'Oldest Received'}
+
+        queryStr = '?'
+        if len(self.request.META['QUERY_STRING']) > 0:
+            queryStr = queryStr + self.request.META['QUERY_STRING'].replace(f'page={page_num}', '') + ('&' if self.request.GET.get('page') is None else '')
+        context['query_str'] = queryStr
+        context.update(paginator(self.request, submission_content, limit))
         context['pagination_url_namespaces'] = 'submissions:list_submissions'
 
         return context

apcd-cms/src/apps/utils/utils.py

@@ -11,6 +11,13 @@ def title_case(value):
 
 
 def table_filter(filter, table_data, filtered_category):
-    filtered_data = [row for row in table_data if row[filtered_category] == filter or filter in row[filtered_category]]
+    filtered_data = []
+    formatted_filter = filter.lower()
+    for row in table_data:
+        if row[filtered_category] is None:
+            continue
+        formatted_value = row[filtered_category].lower()
+        if formatted_value == formatted_filter or formatted_filter in formatted_value:
+            filtered_data.append(row)
 
     return filtered_data