Change how List Pages are populated (#68)

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#68

epdb/views.py

@@ -1726,7 +1726,7 @@ def package_scenarios(request, package_uuid):
 
     if request.method == 'GET':
 
-        if 'application/json' in request.META.get('HTTP_ACCEPT'): #request.headers.get('Accept') == 'application/json':
+        if 'application/json' in request.META.get('HTTP_ACCEPT') and not request.GET.get('all', None):
             scens = Scenario.objects.filter(package=current_package).order_by('name')
             res = [{'name': s.name, 'url': s.url, 'uuid': s.uuid} for s in scens]
             return JsonResponse(res, safe=False)
@@ -1736,7 +1736,7 @@ def package_scenarios(request, package_uuid):
 
         context['meta']['current_package'] = current_package
         context['object_type'] = 'scenario'
-        context['breadcrumbs'] = breadcrumbs(current_package, 'pathway')
+        context['breadcrumbs'] = breadcrumbs(current_package, 'scenario')
 
         reviewed_scenario_qs = Scenario.objects.none()
         unreviewed_scenario_qs = Scenario.objects.none()

templates/collections/objects_list.html

@@ -2,27 +2,21 @@
 {% load static %}
 {% block content %}
 
-{% if reviewed_objects.count > 50 or unreviewed_objects.count > 50  %}
+    {% if object_type != 'package' %}
-{% if object_type != 'package' %}
+        <div>
-<div id="load-remaining-button-div">
+            <div id="load-all-error" style="display: none;">
-    <button class="btn btn-secondary btn-lg btn-block" type="button" id="load-remaining">Load all {% if reviewed_objects.count > 0 %} {{ reviewed_objects.count }} {% else %} {{ unreviewed_objects.count }} {% endif %} {{ object_type }}s
+                <div class="alert alert-danger" role="alert">
-    </button>
+                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-    <p></p>
+                    <span class="sr-only">Error:</span>
-    <div id="load-all-loading"></div>
+                    Getting objects failed!
-    <p></p>
+                </div>
-    <div id="load-all-error" style="display: none;">
+            </div>
-        <div class="alert alert-danger" role="alert">
-          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-          <span class="sr-only">Error:</span>
-          Getting objects failed!
-        </div>
-    </div>
 
-    <input type="text" id="object-search" class="form-control" placeholder="Search by name" style="display: none;">
+            <input type="text" id="object-search" class="form-control" placeholder="Search by name"
-    <p></p>
+                   style="display: none;">
-</div>
+            <p></p>
-{% endif %}
+        </div>
-{% endif %}
+    {% endif %}
 
 {% block action_modals %}
 {% if object_type == 'package' %}
@@ -248,21 +242,34 @@
         </ul>
         {% endif %}
     </div>
+    <style>
+        .spinner-widget {
+            position: fixed; /* stays in place on scroll */
+            bottom: 20px; /* distance from bottom */
+            right: 20px; /* distance from right */
+            z-index: 9999; /* above most elements */
+            width: 60px; /* adjust to gif size */
+            height: 60px;
+        }
+
+        .spinner-widget img {
+            width: 100%;
+            height: auto;
+        }
+    </style>
+    {% if object_type != 'package' %}
+        <div id="load-all-loading" class="spinner-widget">
+            <img id="loading-gif" src="{% static '/images/wait.gif' %}" alt="Loading...">
+        </div>
+    {% endif %}
 </div>
     <script>
         $(function () {
 
-            $('#modal-form-delete-submit').on('click', function (e) {
-                e.preventDefault();
-                $('#modal-form-delete').submit();
-            });
-
             $('#object-search').show();
 
-            if ($('#load-remaining').length) {
+            {% if object_type != 'package' %}
-                $('#load-remaining').on('click', function () {
+                setTimeout(function () {
-
-                    makeLoadingGif("#load-all-loading", "{% static '/images/wait.gif' %}");
                     $('#load-all-error').hide();
 
                     $.getJSON('?all=true', function (resp) {
@@ -272,20 +279,26 @@
                         for (o in resp.objects) {
                             obj = resp.objects[o];
                             if (obj.reviewed) {
-                                $('#ReviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + '</a>');
+                                $('#ReviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + ' <span class="glyphicon glyphicon-star" aria-hidden="true" style="float:right" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reviewed"></span></a>');
                             } else {
                                 $('#UnreviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + '</a>');
                             }
                         }
 
-                        $('#load-all-loading').empty();
+                        $('#load-all-loading').hide();
                         $('#load-remaining').hide();
                     }).fail(function (resp) {
-                        $('#load-all-loading').empty();
+                        $('#load-all-loading').hide();
                         $('#load-all-error').show();
                     });
-                });
+
-            }
+                }, 2500);
+            {% endif %}
+
+            $('#modal-form-delete-submit').on('click', function (e) {
+                e.preventDefault();
+                $('#modal-form-delete').submit();
+            });
 
             $('#object-search').on('keyup', function () {
                 let query = $(this).val().toLowerCase();

templates/framework.html

@@ -3,7 +3,11 @@
 {% load static %}
 <head>
     <title>{{ title }}</title>
-
+    <style>
+        html, body {
+            overflow-x: hidden;
+        }
+    </style>
     {# TODO use bundles from bootstrap 3.3.7 #}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">